:root{--nb:#0891b2;--nb-dark:#155e75;--nb-soft:#ecfeff;--nb-ink:#12303a;--nb-muted:#60747b;--nb-line:#d6ebef}body{background:linear-gradient(180deg,#f0fdff 0,#fff 520px)}[hidden]{display:none!important}
.nb-hero{max-width:1160px;margin:22px auto 0;padding:42px;display:grid;grid-template-columns:1.4fr .6fr;gap:35px;align-items:center;border-radius:28px;color:#fff;background:radial-gradient(circle at 90% 15%,rgba(103,232,249,.35),transparent 32%),linear-gradient(135deg,#083344,#0e7490 60%,#0891b2);box-shadow:0 24px 55px rgba(8,145,178,.2)}.nb-kicker{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#a5f3fc}.nb-hero h1{margin:10px 0 13px;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05}.nb-hero p{max-width:670px;color:#cffafe;line-height:1.7}.nb-hero .tool-badges{margin-top:19px}.nb-hero .tool-badge{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24)}.nb-hero-code{display:flex;flex-direction:column;align-items:center;padding:24px;border:1px solid rgba(255,255,255,.25);border-radius:20px;background:rgba(255,255,255,.1);font-family:ui-monospace,monospace}.nb-hero-code span{color:#a5f3fc;font-size:1.35rem}.nb-hero-code i{font-style:normal;margin:8px}.nb-hero-code strong{font-size:2.5rem}.nb-hero-code small{margin-top:8px;color:#cffafe}
.nb-body{max-width:1160px}.nb-app{margin:28px 0;padding:28px;border-radius:21px;background:#fff;border:1px solid var(--nb-line);box-shadow:0 13px 38px rgba(14,116,144,.08)}.nb-app-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.nb-app-head span,.nb-info article>span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--nb)}.nb-app-head h2{font-size:1.25rem;color:var(--nb-ink);margin-top:4px}.nb-quiet{border:1px solid var(--nb-line);background:#fff;border-radius:8px;padding:8px 12px;color:var(--nb-muted);cursor:pointer}.nb-entry{display:grid;grid-template-columns:1fr 240px;gap:13px}.nb-app label{display:flex;flex-direction:column;gap:7px;font-size:.79rem;font-weight:700;color:var(--nb-ink)}.nb-app input,.nb-app select{padding:12px;border:1.5px solid var(--nb-line);border-radius:10px;background:#fff;color:var(--nb-ink);font:500 .9rem inherit;outline:none}.nb-app input:focus,.nb-app select:focus{border-color:var(--nb);box-shadow:0 0 0 3px rgba(8,145,178,.1)}#source-value{font-family:ui-monospace,monospace}.nb-hint{margin:9px 0 16px;font-size:.78rem;color:var(--nb-muted)}.nb-hint code{background:var(--nb-soft);padding:2px 4px;border-radius:4px}.nb-controls{display:flex;align-items:center;gap:17px;flex-wrap:wrap;padding:13px 15px;margin-bottom:14px;background:#f8fcfd;border-radius:11px}.nb-controls label{flex-direction:row;align-items:center;margin:0}.nb-controls input{width:auto}.nb-controls select{padding:6px}.nb-primary{width:100%;padding:13px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--nb-dark),var(--nb));color:#fff;cursor:pointer;font:700 .86rem inherit;box-shadow:0 8px 18px rgba(8,145,178,.17)}.nb-banner{margin-top:14px;padding:11px 14px;border-radius:9px;background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;font-size:.82rem}.nb-banner.error{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.nb-results{margin-top:19px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.nb-result{display:grid;grid-template-columns:115px 1fr auto;align-items:center;gap:10px;padding:13px;border:1px solid var(--nb-line);border-radius:11px;background:#fbfeff}.nb-result>span{font-size:.78rem;font-weight:700;color:var(--nb-ink)}.nb-result small{display:block;color:var(--nb-muted);font-weight:500}.nb-result output,.nb-custom output{overflow-wrap:anywhere;font:600 .82rem ui-monospace,monospace;color:var(--nb-dark)}.nb-result button,.nb-custom button{padding:6px 8px;border:1px solid var(--nb-line);border-radius:6px;background:#fff;color:var(--nb-dark);cursor:pointer;font-size:.7rem}.nb-custom,.nb-meta,.nb-bits{grid-column:1/-1}.nb-custom{padding:15px;border:1px solid var(--nb-line);border-radius:11px}.nb-custom label{flex-direction:row;justify-content:space-between}.nb-custom>div{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center;margin-top:9px}.nb-custom input{padding:8px}.nb-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.nb-meta div{padding:13px;background:var(--nb-soft);border-radius:10px}.nb-meta span{display:block;font-size:.7rem;color:var(--nb-muted)}.nb-meta strong{display:block;margin-top:4px;color:var(--nb-ink)}.nb-bits{padding:15px;border-radius:12px;background:#102a33;color:#fff}.nb-bits>div:first-child{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:.75rem}.nb-bits small{color:#a5f3fc}.nb-bits>div:last-child{overflow-wrap:anywhere;font-family:ui-monospace,monospace;letter-spacing:2px;line-height:1.7}.nb-bits b{font-weight:700}.nb-bits .one{color:#67e8f9}.nb-bits .zero{color:#47636b}.nb-bits i{color:#fff;font-style:normal}
.nb-examples{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;margin-bottom:24px;border-radius:17px;background:var(--nb-soft);border:1px solid #bae6ef}.nb-examples h2{font-size:1rem;color:var(--nb-ink)}.nb-examples p{font-size:.78rem;color:var(--nb-muted)}.nb-examples>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.nb-examples button{padding:9px 11px;border:1px solid #b8dce4;border-radius:8px;background:#fff;color:var(--nb-dark);cursor:pointer;font:600 .75rem inherit}.nb-info{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.nb-info article{padding:22px;border:1px solid var(--nb-line);border-radius:16px;background:#fff}.nb-info h2{margin:8px 0;font-size:1rem;color:var(--nb-ink)}.nb-info p,.nb-faq p{font-size:.83rem;line-height:1.65;color:var(--nb-muted)}.nb-faq{margin:30px 0 44px}.nb-faq h2{margin-bottom:12px}.nb-faq details{padding:14px 16px;border-bottom:1px solid var(--nb-line)}.nb-faq summary{cursor:pointer;font-weight:700;color:var(--nb-ink)}.nb-faq p{margin-top:8px}
@media(max-width:800px){.nb-hero{margin:12px;padding:28px;grid-template-columns:1fr}.nb-hero-code{display:none}.nb-entry,.nb-info{grid-template-columns:1fr}.nb-examples{align-items:flex-start;flex-direction:column}}@media(max-width:570px){.nb-app{padding:18px}.nb-results{grid-template-columns:1fr}.nb-result{grid-column:1;grid-template-columns:1fr auto}.nb-result>span{grid-column:1/-1}.nb-meta{grid-template-columns:1fr}.nb-custom>div{grid-template-columns:75px 1fr}.nb-custom button{grid-column:1/-1}.nb-hero{padding:23px}}
