:root{--bg:var(--pr-paper);--panel:#fff;--panel2:#edf1f7;--line:#cdd5e2;--ink:#172238;--dim:#4c5d76;--dim2:#52637b;--accent:var(--pr-accent);--ok:#176444;--bad:#ad3030;--warn:#865b09}
.top{height:auto;min-height:var(--pr-section-bar-height);flex-wrap:wrap;background:var(--pr-soft);padding:6px max(24px,(100% - var(--pr-page-width)) / 2);position:relative;backdrop-filter:none}.top .sub{font-weight:600;color:var(--ink)}.topnav{flex-wrap:wrap}.btn{font:inherit;min-height:var(--pr-control-height);border-radius:var(--pr-control-radius)}.btn.primary{color:white}.btn:disabled{cursor:not-allowed;opacity:.55}.skip{position:absolute;left:12px;top:-100px}.skip:focus{top:8px;z-index:20;background:white;padding:12px}:focus-visible{outline:3px solid #c47712;outline-offset:3px}
.studio-intro{padding:40px 32px 28px;display:flex;gap:32px;justify-content:space-between;border-bottom:1px solid var(--line)}.studio-intro h1{max-width:760px;margin:12px 0}.studio-intro p{font-size:18px;color:var(--dim)}.eyebrow{font:12px var(--mono);letter-spacing:.12em;color:var(--accent)}.intro-links{display:flex;flex-wrap:wrap;align-content:center;gap:12px;max-width:340px}.intro-links a{flex-basis:100%}.storage-status{margin:0;padding:0 32px}.storage-status:not(:empty){padding:12px 32px;background:#fff4d9}
.layout{grid-template-columns:290px minmax(0,1fr)}.sidebar{padding:20px;max-height:1100px;position:sticky;top:0;align-self:start}.sidebar label,.filter-pair label{display:block;font-size:12px;font-weight:600;margin:8px 0}.sidebar input,.sidebar select{width:100%;margin-top:5px}.filter-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}input,select,textarea{font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:4px;background:white;padding:8px;max-width:100%}.catalog-note{font-size:12px;color:var(--dim)}.pitem{width:100%;border:0;background:transparent;text-align:left;border-radius:4px}.pitem.active{background:#e6ecfa;color:#203b85}.problem-list{max-height:650px;overflow:auto}.pitem .dot{display:none}.pitem .diff{font-size:10px}.main{max-width:1500px;min-width:0;padding:26px}.problem-head h1{font-size:var(--pr-heading-1)}.statement{color:var(--ink);border-radius:5px;max-height:400px}.statement code{color:var(--ink)}.editor{background:#101c31;color:#e4edff;border-radius:5px;min-height:270px}.editor-label{display:block;font-weight:600;margin:12px 0}.notebook-label{display:block;margin:16px 0}.notebook-label textarea{display:block;width:100%;margin:6px 0}.toolbar,.wave-controls,.canvas-toolbar{flex-wrap:wrap}.wave-controls{display:flex;gap:10px;align-items:end}.wave-controls label{font-size:12px;display:flex;flex-direction:column;gap:4px}.wave-controls input[type=file]{width:190px}.wave{width:100%;background:#101c31}.wave-title{margin:14px 0}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%}th,td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line);font:13px var(--mono)}th{font-weight:700}.result{border-top:1px solid var(--line);padding-top:16px}.verdict:empty{display:none}
.concept-panel{margin:24px 0;border:1px solid var(--line);background:white;border-radius:5px;overflow:hidden}.concept-top{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;gap:16px;justify-content:space-between;align-items:center}.concept-top h2{margin:0;font-size:var(--pr-heading-2)}.concept-body{padding:22px}.concept-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:end}.concept-controls label{display:flex;flex-direction:column;gap:6px;font-size:13px}.concept-scene{margin:20px 0;background:#edf2fa;border:1px solid #d3dded;min-height:100px;padding:20px;overflow:auto}.bit-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.bit-cell{display:inline-flex;min-width:42px;min-height:42px;padding:8px;align-items:center;justify-content:center;border:1px solid #8fa3c7;background:#fff;font:600 16px var(--mono)}.bit-cell.on{background:#2949a0;color:white}.concept-explanation{max-width:85ch;line-height:1.65}.concept-boundary{font-size:12px;color:var(--dim);border-top:1px solid var(--line);padding-top:10px}
.canvas-area{overflow:auto;min-height:420px;background-color:#eff3fa}.canvas-nodes,.canvas-wires{min-width:800px;min-height:420px}.node{background:white;color:var(--ink);border-color:#8fa3c7;touch-action:none}.node-title{color:var(--ink)}.port{padding:0;min-height:16px;min-width:16px;border:2px solid white;background:#2949a0}.circuit-controls{padding:16px 0;display:flex;flex-wrap:wrap;gap:12px}.circuit-controls label{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.node:focus-visible{outline:3px solid #c47712}.node-live{font:12px var(--mono);padding:0 8px}.log,pre{overflow:auto;max-width:100%}.modal-card{background:white}.modal input{color:var(--ink)}.hidden{display:none!important}.status{white-space:normal}.status.ok{color:var(--ok)}.synth-note{font-size:12px}.board-table{background:white}
.node .port{width:20px;height:20px;background:#2949a0}.node .port.out{right:-11px}.node .port.in{left:-11px}.node:has(.port.in.p0):not(:has(.port.in.p1)) .port.in.p0{top:50%;transform:translateY(-50%)}
.canvas-area .node{width:88px;min-width:88px;margin:0}.canvas-wires{z-index:2}.canvas-nodes{z-index:3}.canvas-area{background-image:radial-gradient(#c8d4e7 1px,transparent 1px);background-size:20px 20px}.statement h1{font:600 20px/1.3 var(--pr-sans)!important}.statement-details{margin:18px 0}.statement-details summary{cursor:pointer;font-weight:600;padding:12px 0}.workspace{margin-top:18px}.concept-top>span{font-size:12px;color:var(--dim)}
.library-toggle{display:none}
@media(max-width:760px){.library-toggle{display:block;width:100%}.library-toggle[aria-expanded=false]+.library-content{display:none}.canvas-area::after{content:'Scroll across the canvas to reach all nodes';position:sticky;left:8px;top:390px;z-index:4;background:#eff3fa;font-size:11px;color:#4c5d76;padding:4px}}
@media(max-width:1000px){.top{padding:6px 16px}.top .sub{display:none}.studio-intro{flex-direction:column;padding:24px 20px}.intro-links{max-width:none}.layout{grid-template-columns:240px minmax(0,1fr)}.main{padding:20px}.toolbar .hint{display:none}}
@media(max-width:760px){.layout{grid-template-columns:1fr}.sidebar{display:block;position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line)}.problem-list{max-height:220px}.main{padding:16px}.topnav{width:100%;display:flex}.top .spacer{display:none}.top{gap:10px}.studio-intro h1{font-size:var(--pr-heading-1)}.concept-top{align-items:start;flex-direction:column}.concept-body{padding:14px}.filter-pair{grid-template-columns:1fr 1fr}.canvas-area{max-width:100%}.verdict-line{flex-wrap:wrap}.modal-card{width:calc(100vw - 24px);max-height:90dvh;overflow:auto}.wave-controls>*{max-width:100%}.intro-links .btn{flex:1}.concept-controls label{flex:1;min-width:120px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}

.studio-notebook-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid var(--line)}.studio-notebook-toolbar>span{font-weight:600;margin-right:auto}.exercise-ports{display:block;font-size:13px;white-space:pre-wrap;margin:12px 0}.problem-head h1{font:650 28px/1.25 var(--pr-display-font)}#practiceView{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.4fr);gap:18px}.problem-head{grid-column:1/-1}.concept-panel{grid-column:1;grid-row:2;margin:0}.statement-details{grid-column:1;grid-row:3;max-height:55vh;overflow:auto}.workspace{grid-column:2;grid-row:2/span 2}.studio-work-tabs{display:none}.wave-wrap:not(.has-trace) .wave-controls>:not(:first-child){display:none}.wave-wrap:not(.has-trace) canvas{display:none}.track-group>summary{padding:14px 8px;font-weight:600;cursor:pointer}.family-group>summary{padding:10px 8px;cursor:pointer;font-size:14px}.family-group small{color:var(--muted);font-size:12px}.pitem small{display:block;line-height:1.5;font-size:11px}.family-variants .pitem{margin:3px 0}.concept-lesson{max-width:900px;margin:32px auto;padding:0 20px}.concept-lesson .concept-panel{margin-top:24px}.selected{background:var(--pr-accent-soft)}.concept-boundary{font-size:13px}.topnav button[hidden]{display:none}
@media(max-width:900px){#practiceView{display:block}.studio-work-tabs{display:flex;gap:6px;overflow:auto;margin:10px 0}.studio-work-tabs button{white-space:nowrap;flex:1;border:1px solid var(--line);border-radius:6px;padding:10px;background:#fff}.studio-work-tabs button[aria-pressed=true]{background:var(--pr-accent-soft);border-color:var(--pr-accent)}.statement-details{max-height:none}.workspace{margin-top:10px}[data-work-pane]{display:none!important}body[data-work-view=edit] [data-work-pane=edit],body[data-work-view=spec] [data-work-pane=spec],body[data-work-view=concept] [data-work-pane=concept],body[data-work-view=results] [data-work-pane=results]{display:block!important}.studio-notebook-toolbar{padding:10px 16px}.studio-notebook-toolbar>span{display:none}.editor{min-height:320px}.top .sub{display:none}}

.notebook-files{position:relative}.notebook-files>summary{cursor:pointer;padding:9px 0;font-size:14px}.notebook-files>div{position:absolute;top:100%;left:0;z-index:30;display:grid;gap:8px;min-width:180px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:6px}.notebook-files .btn{text-align:left}#canvasView.hidden .canvas-area::after{content:none}
@media(max-width:900px){.top #status.ok,.top #userArea{display:none}.studio-notebook-toolbar{gap:20px;padding-block:4px}.studio-notebook-toolbar>a{font-size:14px}}

.runner-feedback{margin:10px 0 16px;font-size:13px;line-height:1.5}.runner-feedback button{float:right;margin:0 0 8px 12px}.runner-feedback:after{content:"";display:block;clear:both}.runner-feedback p{margin:0}.storage-status:not(:empty){background:#f1f5f3;color:#243b37;font-size:13px}