.nb-page{--nb-bg:#0c111b;--nb-panel:#131c2a;--nb-line:#2b3b50;--nb-text:#eff4fc;--nb-muted:#a4b5ca;--nb-accent:#72f5d5;background:radial-gradient(ellipse at 65% 0,#19303b 0,transparent 45%),var(--nb-bg);color:var(--nb-text);min-height:100vh}.nb-page #app-header{background:#0b1320}.nb-page .topbar{background:transparent;border-color:var(--nb-line)}.nb-page a{color:var(--nb-text)}.nb-wrap{max-width:1500px;padding:42px 28px 24px}.nb-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.nb-eyebrow{font:10px/1.5 monospace;letter-spacing:.16em;color:var(--nb-accent)}.nb-header h1{font-size:clamp(30px,4vw,54px);letter-spacing:-.055em;margin:9px 0}.nb-header p{color:var(--nb-muted);margin:0}.nb-page .btn,.nb-page button,.nb-page select{font:inherit}.nb-page .btn{background:#1b293a;border:1px solid #35475f;color:var(--nb-text);border-radius:8px;min-height:40px}.nb-page .btn:hover{background:#263b50}.nb-page button:disabled{opacity:.42;cursor:default}.nb-page button:focus-visible,.nb-page input:focus-visible,.nb-page select:focus-visible{outline:3px solid #fff;outline-offset:3px}.nb-layout{display:grid;grid-template-columns:250px minmax(330px,1fr) 260px;gap:20px;align-items:start}.nb-panel{background:linear-gradient(135deg,#162232,#111a28);border:1px solid var(--nb-line);border-radius:15px;padding:22px;min-width:0}.nb-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.nb-section span{font:9px monospace;color:var(--nb-muted)}.nb-page h2{font-size:15px;margin:0 0 12px}.nb-section h2{margin:0}.nb-track{display:flex;align-items:center;width:100%;gap:12px;text-align:start;background:transparent;color:var(--nb-text);border:1px solid transparent;border-radius:10px;padding:13px 8px;margin-bottom:5px;cursor:pointer}.nb-track[aria-pressed=true]{background:#203444;border-color:#53796f}.nb-track .nb-cover{width:40px;height:48px;display:grid;place-items:center;border:1px solid currentColor;border-radius:5px;flex-shrink:0;font:18px monospace;background:repeating-linear-gradient(150deg,transparent 0 7px,#ffffff09 7px 9px)}.nb-track strong{display:block;font-size:13px;margin-bottom:5px}.nb-track small{color:var(--nb-muted);font-size:10px}.nb-page fieldset{border:0;padding:0;margin:23px 0 0;min-width:0}.nb-page legend{font-size:12px;color:var(--nb-muted);margin-bottom:10px}.nb-difficulties{display:flex;gap:4px}.nb-difficulties button{flex:1;min-width:0;padding:10px 3px;font-size:11px;border:1px solid var(--nb-line);color:var(--nb-muted);background:#111a26;cursor:pointer;border-radius:6px}.nb-difficulties button[aria-pressed=true]{background:var(--nb-accent);color:#08251e;border-color:var(--nb-accent)}.nb-page label{font-size:12px;display:block;margin-top:15px;color:var(--nb-muted)}.nb-page input[type=range]{width:100%;accent-color:var(--nb-accent)}.nb-page select{width:100%;padding:9px;background:#101927;color:var(--nb-text);border:1px solid var(--nb-line);border-radius:6px;margin-top:6px}.nb-page .nb-toggle{display:flex;gap:8px;align-items:center;margin:18px 0}.nb-toggle b{margin-inline-start:auto;font:11px monospace;color:var(--nb-accent)}.nb-stage{padding:0;overflow:hidden}.nb-stage-top{padding:20px 23px;display:flex;justify-content:space-between;gap:10px;align-items:center}.nb-stage-top h2{font-size:21px;margin:5px 0 0}.nb-score{text-align:end}.nb-score span{font-size:9px;letter-spacing:.1em;color:var(--nb-muted);display:block}.nb-score strong{font:25px monospace;letter-spacing:.03em}.nb-visual{height:390px;position:relative;background:linear-gradient(#0b1420,#102c38);overflow:hidden}#nb-canvas{display:block;width:100%;height:100%}.nb-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:#0b1623cf;padding:32px;pointer-events:none}.nb-overlay[hidden]{display:none}.nb-orbit{display:flex;gap:10px;margin-bottom:26px;transform:skewY(-9deg)}.nb-orbit span{height:70px;width:38px;border:1px solid #6ef2d080;color:#7aeed3;display:grid;place-items:center;background:linear-gradient(transparent,#78f2d02b);font:18px monospace}.nb-orbit span:nth-child(2n){transform:translateY(-12px);border-color:#b3a4fa;color:#b3a4fa}.nb-overlay strong{font-size:24px}.nb-overlay p{max-width:300px;line-height:1.8;font-size:12px;color:var(--nb-muted)}.nb-count{position:absolute;inset:35% 0 auto;text-align:center;font:bold 60px monospace;color:white;pointer-events:none}.nb-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 12px 12px;background:#10232e;touch-action:none}.nb-pads button{touch-action:none;user-select:none;-webkit-user-select:none;color:var(--nb-accent);height:61px;background:#163b42;border:1px solid #47716a;border-top:3px solid var(--nb-accent);border-radius:0 0 9px 9px;font:22px monospace;cursor:pointer}.nb-pads button:nth-child(2n){color:#c3b4ff;background:#30344c;border-color:#595c80;border-top-color:#b9a3ff}.nb-pads button.active{background:#6cdfc3;color:#10231f;box-shadow:0 0 25px #72f5d550}.nb-pads span{display:block;font:9px monospace;opacity:.7;margin-top:4px}.nb-progress{height:3px;background:#25374c}.nb-progress div{height:100%;width:0;background:var(--nb-accent)}.nb-performance{display:flex;justify-content:space-between;gap:8px;padding:18px 22px;color:var(--nb-muted);font-size:10px}.nb-performance b{color:var(--nb-text);font:18px monospace}.nb-controls{display:flex;gap:8px;padding:0 22px}.nb-page .nb-primary{background:var(--nb-accent);color:#0d2924;border-color:var(--nb-accent);font-weight:700;flex:1}.nb-page .nb-primary:hover{background:#a9ffe8}#nb-notice{padding:0 22px;font-size:11px;line-height:1.7;color:var(--nb-muted);min-height:36px;margin:16px 0}.nb-result{padding:20px;margin:0 22px 22px;border:1px solid #527b6f;background:#1e393b;border-radius:12px}.nb-result h3{margin:0 0 8px;color:var(--nb-accent);font-size:23px}.nb-result p{font-size:12px;line-height:1.8;margin:6px 0}.nb-detail{display:grid;gap:20px}.nb-rating{font:46px monospace;margin:10px 0 0;letter-spacing:-.05em}.nb-detail p,#nb-pattern{font-size:11px;color:var(--nb-muted);line-height:1.8}.nb-detail .nb-rating+p{margin:2px 0 18px}.nb-records{display:flex;gap:18px;border-top:1px solid var(--nb-line);padding-top:16px}.nb-records strong{display:block;font:18px monospace}.nb-records span{font-size:10px;color:var(--nb-muted)}.nb-detail fieldset{margin:0}.nb-detail output{float:inline-end;color:var(--nb-accent);font:12px monospace}.nb-detail .btn{width:100%;margin-top:12px;font-size:12px}.nb-how p{margin:10px 0}.nb-footer{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:11px;color:var(--nb-muted);margin-top:24px}.nb-footer a{color:var(--nb-accent)}
@media(min-width:1400px){.nb-visual{height:450px}}@media(max-width:1100px){.nb-layout{grid-template-columns:220px minmax(300px,1fr)}.nb-detail{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}}@media(max-width:680px){.nb-wrap{padding:25px 14px}.nb-header{align-items:flex-start;gap:10px}.nb-header h1{font-size:30px}.nb-header p{font-size:12px;line-height:1.7}.nb-eyebrow{font-size:8px}.nb-layout{display:flex;flex-direction:column;gap:14px}.nb-layout>*,.nb-detail{width:100%}.nb-library{padding:16px}#nb-tracks{display:grid;grid-template-columns:1fr 1fr;gap:5px}.nb-track{padding:8px 5px;gap:8px;margin:0}.nb-track .nb-cover{width:27px;height:36px;font-size:13px}.nb-track strong{font-size:10px}.nb-track small{font-size:9px}.nb-page fieldset{margin-top:12px}.nb-difficulties button{font-size:12px}.nb-page .nb-toggle{margin:10px 0}#nb-config>label[for=nb-section],#nb-section{display:none}#nb-config:has(#nb-practice:checked)>label[for=nb-section],#nb-config:has(#nb-practice:checked) #nb-section{display:block}.nb-visual{height:330px}.nb-stage-top{padding:17px}.nb-stage-top h2{font-size:20px}.nb-score strong{font-size:22px}.nb-controls{padding:0 14px}.nb-performance{padding:16px 14px}.nb-detail{display:grid;grid-template-columns:1fr 1fr;gap:14px}.nb-detail .nb-panel{padding:16px}.nb-how{grid-column:1/-1}.nb-rating{font-size:34px}.nb-records{flex-direction:column;gap:13px}.nb-records strong{font-size:17px}.nb-pads button{height:66px}.nb-result{margin:0 14px 14px;padding:15px}}
@media(prefers-reduced-motion:reduce){.nb-page *{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:680px){.nb-controls .btn{white-space:nowrap;font-size:12px;padding-inline:10px}.nb-stage{scroll-margin-top:12px}}