/* Developers hub: shell + utility layer for hub sub-pages (replaces Tailwind CDN). */
.dev-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding-top: 32px; padding-bottom: 72px; }
.dev-shell.no-hero { padding-top: 112px; }
.dev-side-in { position: sticky; top: 92px; display: grid; gap: 16px; }
.dev-hub { background: var(--yellow-soft); border: 1px solid #F1DF8C; border-radius: 18px; padding: 16px; }
.dev-hub-k, .dev-nav-k, .dev-plan span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dev-hub b { display: block; font-size: 14.5px; margin-top: 4px; }
.dev-hub p { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.dev-hub a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 2px; }
.dev-nav { display: grid; gap: 2px; }
.dev-nav-k { padding: 0 12px 6px; }
.dev-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: background .15s, color .15s; }
.dev-nav a svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.dev-nav a:hover { background: var(--white); color: var(--ink); }
.dev-nav a.on { background: var(--ink); color: #fff; font-weight: 600; }
.dev-nav a.on svg { color: var(--yellow); }
.dev-plan { background: var(--ink); color: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 4px; }
.dev-plan span { color: #A7A49B; }
.dev-plan b { font-size: 26px; letter-spacing: -0.03em; margin-bottom: 8px; }
.dev-plan b small { font-size: 13px; color: #A7A49B; font-weight: 500; }
.dev-plan .btn { height: 38px; font-size: 13.5px; }
.dev-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 28px; }
.dev-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.dev-crumbs b { color: var(--ink); font-weight: 500; }
@media (max-width: 1023px) {
  .dev-shell { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dev-side-in { position: static; }
  .dev-hub, .dev-plan { display: none; }
  .dev-nav { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .dev-nav::-webkit-scrollbar { display: none; }
  .dev-nav-k { display: none; }
  .dev-nav a { white-space: nowrap; border: 1px solid var(--line); background: var(--white); padding: 8px 12px; }
  .dev-nav a svg { display: none; }
}

/* ---- Utility layer (scoped to hub content) ---- */
.dev-main { min-width: 0; font-size: 16px; color: var(--ink-2); }
.dev-main h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; color: var(--ink); }
.dev-main h2 { letter-spacing: -0.03em; color: var(--ink); }
.dev-main h3 { letter-spacing: -0.02em; color: var(--ink); }
.dev-main section > h2 { padding-top: 6px; }
.dev-main .text-xs { font-size: 12px; } .dev-main .text-sm { font-size: 14.5px; } .dev-main .text-lg { font-size: 18px; }
.dev-main .text-2xl { font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.15; } .dev-main .text-3xl { font-size: 2.2rem; } .dev-main .text-4xl { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.02; }
.dev-main .font-bold { font-weight: 700; } .dev-main .font-extrabold { font-weight: 700; } .dev-main .font-semibold { font-weight: 600; }
.dev-main .font-mono { font-family: var(--mono); } .dev-main .italic { font-style: italic; }
.dev-main .uppercase { text-transform: uppercase; } .dev-main .tracking-widest { letter-spacing: .1em; } .dev-main .tracking-tight { letter-spacing: -0.04em; }
.dev-main .text-nb-dark { color: var(--ink); } .dev-main .text-slate-600, .dev-main .text-slate-700 { color: var(--ink-2); } .dev-main .text-slate-500 { color: var(--muted); } .dev-main .text-slate-300 { color: #C9C6BD; }
.dev-main .text-white { color: #fff; } .dev-main .text-nb-yellow { color: var(--yellow); } .dev-main .text-amber-900 { color: #713F12; }
.dev-main p.text-nb-orange, .dev-main span.text-nb-orange { color: var(--muted); font-family: var(--mono); font-weight: 500; }
.dev-main a.text-nb-orange, .dev-main .text-slate-600 a, .dev-main li a, .dev-main td a, .dev-main p a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dev-main a.text-nb-orange:hover, .dev-main p a:hover { text-decoration-color: var(--orange); }
.dev-main .bg-white { background: var(--white); } .dev-main .bg-slate-100 { background: var(--paper); border: 1px solid var(--line); } .dev-main .bg-amber-50 { background: var(--yellow-soft); }
.dev-main .bg-nb-dark, .dev-main .bg-slate-900 { background: var(--ink); color: #fff; }
.dev-main .border { border: 1px solid var(--line); } .dev-main .border-slate-200 { border-color: var(--line); } .dev-main .border-amber-200 { border-color: #F1DF8C; }
.dev-main .border-l-4 { border-left: 4px solid var(--yellow); } .dev-main .border-nb-yellow { border-color: var(--yellow); }
.dev-main .rounded { border-radius: 6px; } .dev-main .rounded-2xl { border-radius: 20px; } .dev-main .rounded-3xl { border-radius: 26px; } .dev-main .rounded-full { border-radius: 999px; }
.dev-main .p-5 { padding: 20px; } .dev-main .p-6 { padding: 24px; } .dev-main .px-1 { padding-left: 4px; padding-right: 4px; } .dev-main .px-1\.5 { padding-left: 6px; padding-right: 6px; } .dev-main .px-4 { padding-left: 16px; padding-right: 16px; }
.dev-main .py-0\.5 { padding-top: 2px; padding-bottom: 2px; } .dev-main .py-2 { padding-top: 8px; padding-bottom: 8px; } .dev-main .pl-4 { padding-left: 16px; } .dev-main .pl-5 { padding-left: 20px; }
.dev-main .mb-1 { margin-bottom: 4px; } .dev-main .mb-2 { margin-bottom: 8px; } .dev-main .mb-3 { margin-bottom: 12px; } .dev-main .mb-4 { margin-bottom: 16px; } .dev-main .mb-8 { margin-bottom: 32px; } .dev-main .mb-10 { margin-bottom: 40px; } .dev-main .mb-12 { margin-bottom: 56px; } .dev-main .mt-3 { margin-top: 12px; }
.dev-main .max-w-2xl { max-width: 680px; } .dev-main .w-full { width: 100%; } .dev-main .overflow-x-auto { overflow-x: auto; }
.dev-main .flex { display: flex; } .dev-main .flex-wrap { flex-wrap: wrap; } .dev-main .grid { display: grid; } .dev-main .gap-3 { gap: 12px; } .dev-main .gap-4 { gap: 16px; }
.dev-main .space-y-2 > * + * { margin-top: 8px; } .dev-main .space-y-3 > * + * { margin-top: 12px; }
.dev-main .list-decimal { list-style: decimal; } .dev-main ul:not([class]) { list-style: none; }
.dev-main code.bg-slate-100 { font-family: var(--mono); font-size: .86em; color: var(--ink); }
.dev-main a.rounded-full.border { display: inline-flex; align-items: center; height: 40px; font-size: 14px; font-weight: 600; background: var(--white); border-color: var(--line-2); transition: border-color .2s; }
.dev-main a.rounded-full.border:hover { border-color: var(--ink); }
.dev-main a.rounded-full.bg-nb-dark { display: inline-flex; align-items: center; height: 40px; font-size: 14px; font-weight: 600; }
.dev-main a.rounded-2xl { display: block; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s; }
.dev-main a.rounded-2xl:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 20px 40px -26px rgba(10,10,10,.25); }
.dev-main .rounded-3xl.bg-nb-dark { background: var(--yellow); color: var(--ink); }
.dev-main .rounded-3xl.bg-nb-dark .text-slate-300 { color: rgba(10,10,10,.7); }
.dev-main .rounded-3xl.bg-nb-dark h2 { color: var(--ink); }
@media (min-width: 640px) { .dev-main .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .dev-main .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .dev-main .sm\:p-8 { padding: 32px; } }

/* tables */
.dev-main .param-table { border-collapse: collapse; font-size: 14.5px; }
.dev-main .param-table th { text-align: left; font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--paper); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dev-main .param-table td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.dev-main .param-table tr:first-child td { border-top: 0; }
.dev-main .overflow-x-auto.rounded-2xl { border-radius: 20px; }
.dev-main .term { margin-top: 8px; }
.dev-main .term pre { white-space: pre-wrap; font-size: 12.5px; }

/* calculator */
.calc { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.calc-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.calc-top label { font-weight: 600; color: var(--ink); }
.calc-top output { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--ink) var(--p, 6%), var(--line) var(--p, 6%)); outline: 0; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); cursor: pointer; }
.calc input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); cursor: pointer; }
.calc-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin: 8px 0 20px; }
.calc-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.calc-m { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.calc-m.hot { background: var(--yellow-soft); border-color: #F1DF8C; }
.calc-m span { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.calc-m b { font-size: 24px; letter-spacing: -0.03em; color: var(--ink); }
.calc-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.calc-note code { font-family: var(--mono); font-size: .9em; background: var(--paper); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; }
@media (max-width: 760px) { .calc-grid { grid-template-columns: 1fr 1fr; } .calc { padding: 20px; } }

/* developers index */
.dev-hero { padding-bottom: 40px; }
.dev-main .sec-block { margin-bottom: 56px; }
.dev-main .sec-block > h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; margin: 10px 0 20px; }