:root{font-family:'DM Sans',system-ui,sans-serif;color:#e9f1f0;background:#0e1924;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible{outline:2px solid #74e4bd;outline-offset:2px}.shell{max-width:1800px;margin:auto;min-height:100vh;display:flex;flex-direction:column}.top{height:74px;border-bottom:1px solid #29404b;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#11212b}.brand{display:flex;gap:14px;align-items:center}.mark{font:700 24px 'Space Grotesk',sans-serif;color:#13252a;background:#77e6bd;width:38px;height:38px;border-radius:11px;text-align:center;line-height:38px}.brand strong{font:700 19px 'Space Grotesk',sans-serif;letter-spacing:-.04em}.brand small{display:block;color:#93a8ae;font-size:11px;margin-top:2px}.top-right{display:flex;gap:20px;align-items:center;color:#98afb5;font-size:12px}.pill{border:1px solid #35535c;border-radius:20px;padding:8px 12px}.workspace{display:grid;grid-template-columns:288px minmax(450px,1fr) 314px;flex:1;min-height:calc(100vh - 74px)}.left,.right{background:#13232f;padding:22px;border-right:1px solid #29404b}.right{border-left:1px solid #29404b;border-right:0}.eyebrow{color:#75dbb5;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin:0 0 12px}.level{color:#9eafb8;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.heading{font:600 26px 'Space Grotesk',sans-serif;letter-spacing:-.045em;line-height:1.1;margin:9px 0 12px}.brief{line-height:1.55;color:#bdced0;margin:0 0 22px}.section{border-top:1px solid #2a414c;padding-top:21px;margin-top:22px}.section h3,.panel-title{font:600 13px 'Space Grotesk',sans-serif;margin:0 0 14px}.req{padding:11px 0;border-bottom:1px solid #263b46;line-height:1.45;display:flex;gap:9px;color:#c8d6d7}.req b{color:#71d8b2;font-size:15px}.lesson{border:1px solid #31555a;border-radius:10px;background:#1a373b;padding:13px;line-height:1.5;color:#c7e5dd;margin-top:20px}.lesson strong{display:block;color:#80e4bd;margin-bottom:5px;font-size:11px;text-transform:uppercase;letter-spacing:.1em}.navigator{display:flex;align-items:center;gap:8px;margin-top:22px}.navigator button,.ghost{border:1px solid #35505b;background:#1a303d;color:#d3e4e2;border-radius:8px;padding:9px 11px}.navigator select{background:#1a303d;color:#eef5ef;border:1px solid #35505b;border-radius:8px;padding:10px;min-width:0;flex:1}.center{min-width:0;display:flex;flex-direction:column}.toolbar{height:63px;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid #29404b}.toolbar .spacer{flex:1}.primary{border:0;border-radius:8px;background:#79e3b8;color:#09281e;font-weight:700;padding:10px 15px}.primary:hover{background:#a5f3cf}.hint{font-size:11px;color:#9cb3b8;padding:8px 18px;background:#152834;border-bottom:1px solid #2b424c}.canvas-wrap{position:relative;flex:1;min-height:520px;overflow:auto;background-color:#11212c;background-image:radial-gradient(#31505b 1px,transparent 1px);background-size:22px 22px}.canvas{min-width:850px;min-height:610px;position:relative}.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.node{position:absolute;width:146px;min-height:72px;background:#203541;border:1px solid #41606c;border-radius:11px;box-shadow:0 12px 22px #08151d77;user-select:none;touch-action:none;z-index:1;display:flex;align-items:center;gap:10px;padding:11px;cursor:grab}.node:hover{border-color:#74dcb6}.node.selected{border:2px solid #85ebc0;box-shadow:0 0 0 4px #65dcb022,0 12px 24px #07131b80}.node.connecting{border:2px dashed #f6c47b}.node .symbol{width:34px;height:34px;background:#2f5558;border-radius:9px;display:grid;place-items:center;color:#85e9c0;font-size:22px;flex-shrink:0}.node .n-label{font-weight:700;line-height:1.1;font-size:12px}.node .n-sub{color:#9cb3b5;font-size:10px;margin-top:5px}.port{position:absolute;width:10px;height:10px;background:#88ebc4;border:2px solid #17332f;border-radius:50%;top:31px}.port.in{left:-6px}.port.out{right:-6px}.empty-message{position:absolute;left:270px;top:45px;color:#9fb6bd;border:1px dashed #44636c;background:#162c37;padding:16px;border-radius:9px;width:300px;line-height:1.5;pointer-events:none}.palette{border-top:1px solid #29404b;padding:13px 18px;background:#152631}.palette-top{display:flex;align-items:center;justify-content:space-between}.palette-top span{font-size:11px;color:#95abb1}.components{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.component{background:#203944;border:1px solid #3b5861;border-radius:7px;color:#deefec;padding:8px 10px;font-size:11px}.component:hover{border-color:#7de5bf;background:#2a4c52}.component b{color:#84e2ba;margin-right:6px;font-size:14px}.right .small{font-size:11px;color:#9eb3b8;line-height:1.55}.inspector{border:1px solid #35515b;background:#1a303b;border-radius:10px;padding:14px;margin-top:12px}.inspector h3{margin:0 0 12px;font:600 16px 'Space Grotesk',sans-serif}.fields{display:flex;gap:10px;margin:14px 0}.fields label{flex:1;color:#a9bfc1;font-size:11px}.fields input{display:block;width:100%;margin-top:5px;background:#10232d;border:1px solid #41606a;color:white;border-radius:6px;padding:8px}.inspector-actions{display:flex;gap:7px}.inspector-actions button{flex:1}.summary{margin-top:24px;border-top:1px solid #29404b;padding-top:20px}.score-row{display:flex;align-items:flex-end;justify-content:space-between}.score{font:600 43px 'Space Grotesk',sans-serif;color:#8beabe;line-height:1}.score small{font:400 13px 'DM Sans',sans-serif;color:#a7bfc0}.meter{height:7px;background:#2c424c;border-radius:10px;margin:12px 0 8px;overflow:hidden}.fill{height:100%;background:#82e7bb;border-radius:10px}.checks{max-height:410px;overflow:auto;margin-top:13px}.check{border-top:1px solid #2b424a;padding:11px 0;display:flex;gap:8px;line-height:1.4}.check .status{font-weight:700;color:#f1ad89;flex-shrink:0}.check.pass .status{color:#7cdeb2}.check strong{font-size:12px}.check p{margin:5px 0 0;color:#9fb5ba;font-size:11px}.banner{background:#244341;color:#c9f3df;padding:10px;border-radius:7px;font-size:11px;line-height:1.5;margin-top:12px}.footer{color:#7f9aa1;font-size:10px;padding:10px 18px;border-top:1px solid #29404b}.reset{margin-top:12px;color:#c2d2d4}@media(max-width:1120px){.workspace{grid-template-columns:245px minmax(360px,1fr)}.right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:24px;border-left:0;border-top:1px solid #29404b}.summary{margin-top:0;border-top:0;padding-top:0}}@media(max-width:700px){.top{padding:0 15px}.top-right .pill{display:none}.workspace{display:block}.left,.right{padding:18px;border:0;border-bottom:1px solid #29404b}.right{display:block}.canvas-wrap{min-height:480px;max-height:550px}.toolbar{overflow-x:auto;white-space:nowrap}.summary{margin-top:20px;border-top:1px solid #29404b;padding-top:20px}}
.video-link{display:block;color:#9beecb;text-decoration:none;font-size:11px;line-height:1.45;margin-top:12px}.video-link:hover{text-decoration:underline}.node.broken,.node.broken.selected{border:2px solid #ff676f;background:#56313a;box-shadow:0 0 0 5px #f24d5a33,0 12px 25px #08151d99}.node.broken .n-sub{color:#ff9aa0;font-weight:700}.node.broken .symbol{background:#8f3945;color:#ffb7ba}.node.healthy{border-color:#6dcfa5}.node-report{background:#163b37;border:1px solid #326657;color:#cbefde;border-radius:8px;padding:9px;font-size:11px;margin:12px 0}.node-report.problem{background:#4b2933;border-color:#e76069;color:#ffcbcd}.node-report p{line-height:1.5;margin:7px 0 0}

.mobile-nav,.mobile-close{display:none}
@media(max-width:700px){
 :root{font-size:15px}
 .top{height:56px;padding:0 12px}.brand strong{font-size:17px}.brand small,.top-right{display:none}
 .workspace{display:flex;flex-direction:column;min-height:calc(100dvh - 56px)}
 .mobile-nav{display:flex;align-items:center;gap:8px;background:#162b36;padding:7px 10px;min-height:54px}
 .mobile-nav span{min-width:0;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
 .mobile-nav button{min-height:42px;padding:7px 10px;font-size:13px}
 .left,.right{display:none;position:fixed;inset:56px 0 0;z-index:10;background:#13232f;overflow:auto;padding:18px 20px 40px}
 .left.mobile-open,.right.mobile-open{display:block}.mobile-close{display:block;margin:0 0 18px auto;min-height:44px}
 .center{flex:1;min-height:0;display:flex;flex-direction:column}
 .toolbar{height:auto;min-height:52px;gap:6px;padding:5px 9px;overflow:visible;white-space:normal}
 .toolbar .eyebrow{display:none}.toolbar button{min-height:44px;font-size:13px;padding:8px 9px}
 .toolbar #run{margin-left:auto}.hint{font-size:12px;line-height:1.4;padding:7px 10px}
 .canvas-wrap{flex:1;min-height:38dvh;max-height:none;overflow:auto;overscroll-behavior:contain}
 .canvas{min-width:850px;min-height:610px}.empty-message{left:220px;width:260px}
 .palette{position:sticky;bottom:0;z-index:3;padding:8px 10px 12px;background:#152631}
 .palette-top span{display:none}.components{flex-wrap:nowrap;overflow-x:auto;margin-top:7px;padding-bottom:4px;scroll-snap-type:x proximity}
 .component{flex:0 0 auto;min-height:44px;padding:8px 11px;font-size:13px;scroll-snap-align:start}
 .fields input{min-height:44px;font-size:16px}.inspector-actions button,.navigator button,.navigator select{min-height:44px}
 .right .small,.check p{font-size:13px}.footer{display:none}
}
@media(max-width:700px){.empty-message{left:8px;top:12px;width:260px;font-size:12px;padding:10px}.node{min-height:76px}}

/* A rotated phone should keep the canvas dominant; the palette remains one row. */
@media(max-width:950px) and (orientation:landscape) and (max-height:520px){
 .top{height:42px}.brand .mark{width:30px;height:30px;line-height:30px;font-size:18px}.brand small{display:none}
 .workspace{display:flex;flex-direction:column;min-height:calc(100dvh - 42px)}
 .mobile-nav{display:flex;min-height:42px;padding:3px 10px}.mobile-nav button{min-height:36px}
 .left,.right{display:none;position:fixed;inset:42px 0 0;z-index:10;overflow:auto;background:#13232f;padding:14px 20px}
 .left.mobile-open,.right.mobile-open{display:block}.mobile-close{display:block;margin-left:auto}
 .center{flex:1;min-height:0}.toolbar{height:46px;min-height:46px;padding:3px 10px}.toolbar button{min-height:38px}
 .canvas-wrap{flex:1;min-height:35dvh;max-height:none}.palette{position:sticky;bottom:0;z-index:3;padding:4px 10px}
 .palette-top{display:none}.components{flex-wrap:nowrap;overflow-x:auto;margin:0}.component{flex:0 0 auto;min-height:38px}
 .footer{display:none}.empty-message{left:8px;top:8px;width:260px;padding:8px}
}
@media(max-width:950px) and (orientation:landscape) and (max-height:520px){
 .top-right,.toolbar .eyebrow{display:none}.mobile-nav{justify-content:space-between}.mobile-nav span{flex:1;text-align:center}
 .toolbar{min-height:42px;height:42px;justify-content:flex-end;gap:7px}.toolbar .spacer{display:none}
 .toolbar .ghost,.toolbar .primary{min-height:36px;padding:6px 10px}.hint{padding:5px 10px}
}

/* Level selection and mobile drawer controls */
.level-screen{width:min(1120px,100%);margin:0 auto;padding:clamp(20px,5vw,65px);flex:1}.level-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:28px}.level-heading h1{font:600 clamp(29px,5vw,52px) 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:0 0 10px}.level-heading p{color:#aac2c4;margin:0}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.level-card{min-width:0;min-height:190px;border:1px solid #38565f;background:#1a303b;border-radius:15px;padding:20px;text-align:left;color:#e9f1f0;display:flex;flex-direction:column;align-items:start;gap:8px}.level-card:hover,.level-card:focus-visible{border-color:#8beabe;background:#234241}.level-card.level-next{border-color:#7ce7b8;box-shadow:0 0 0 2px #69d8ae33}.level-number{color:#7de4bb;font:700 20px 'Space Grotesk',sans-serif}.level-card-title{font:600 21px 'Space Grotesk',sans-serif}.level-tag{color:#9eb9bd;font-size:12px}.level-status{margin-top:auto;color:#a6ebc6;font-weight:700;font-size:12px}.levels-desktop{flex-shrink:0}.mobile-close{position:sticky;top:0;z-index:11;background:#284755!important;border-color:#76dbb3!important;color:#fff!important;font-weight:700!important;min-width:100px}
@media(max-width:700px){.level-screen{padding:22px 14px 45px}.level-heading{align-items:start;flex-direction:column;margin-bottom:20px}.level-heading h1{font-size:32px}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.level-card{min-height:158px;padding:13px;gap:5px}.level-card-title{font-size:16px}.level-number{font-size:17px}.level-tag,.level-status{font-size:11px}.levels-desktop{display:none!important}.mobile-nav{gap:5px}.mobile-nav button{padding:7px!important;font-size:12px!important}}
@media(max-width:950px) and (orientation:landscape) and (max-height:520px){.levels-desktop{display:none!important}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.level-card{min-height:125px}}
/* Netlify's injected public badge occupies the component palette on phones. */
#nl-badge-frame{display:none!important}

.strategy-list{display:grid;gap:8px;margin:14px 0}.strategy-list p{margin:0 0 4px}.strategy{display:flex;flex-direction:column;align-items:start;gap:3px;text-align:left;width:100%;border:1px solid #41606a;background:#1b3540;color:#e1f1eb;border-radius:9px;padding:11px}.strategy small{color:#9fbab9}.strategy.active{border-color:#7de5b8;background:#275247}.strategy.active strong:before{content:'✓ ';color:#9ff0cb}@media(max-width:700px){.strategy{min-height:55px}}
.revise{margin-top:12px;min-height:44px;border-color:#78dbb4;color:#a9f2d1}
.strategy-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:14px 0}.strategy-shortcuts .strategy{height:100%}.strategy-shortcuts small{line-height:1.35}

/* Component editing and results stay as non-blocking bottom sheets on phones. */
.node-editor{display:none}
@media(max-width:700px){
 .right.mobile-open{top:auto;bottom:0;max-height:57dvh;z-index:9;border-top:2px solid #77dfb6;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px #06121bcc;padding:14px 20px 32px}
 .node-editor{display:block;position:fixed;inset:auto 0 0;z-index:12;max-height:58dvh;overflow-y:auto;overscroll-behavior:contain;background:#132b35;border-top:2px solid #77dfb6;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px #06121bcc;padding:14px 20px max(22px,env(safe-area-inset-bottom))}
 .editor-head{position:sticky;top:-14px;background:#132b35;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;z-index:1}.editor-head button{min-height:44px}.node-editor .strategy-list{grid-template-columns:repeat(2,minmax(0,1fr))}.node-editor .strategy{min-height:62px}.editor-warning{color:#ffc2b7;font-size:12px;line-height:1.4}
 .node-editor .inspector-actions button{min-height:44px}
}
@media(max-width:950px) and (orientation:landscape) and (max-height:520px){.right.mobile-open{top:auto;bottom:0;max-height:72dvh}.node-editor{display:block;position:fixed;inset:auto 0 0;max-height:72dvh;overflow:auto;background:#132b35;z-index:12;padding:12px 20px}.node-editor .strategy-list{display:flex}.node-editor .strategy-list>*{flex:1}}

/* Touch wiring: large hit areas without covering node labels. */
.port.out{width:28px;height:28px;top:24px;right:-14px;border:8px solid #17332f;background:#8af0c7;z-index:4;touch-action:none;cursor:crosshair}.node.wire-target{border:2px solid #ffe6a0;box-shadow:0 0 0 7px #f6d99455}.wires{pointer-events:none}.wire-visible{pointer-events:none}.wire-hit{pointer-events:stroke;cursor:pointer}.wire-hit:hover{stroke:#ffb98455}

.intro{width:min(680px,100%);padding:35px 25px 70px;margin:auto;line-height:1.5}.intro h1{font:600 clamp(32px,6vw,52px) 'Space Grotesk',sans-serif;margin:18px 0 10px}.intro h2{font-size:16px;margin:26px 0 8px;color:#94edc4}.intro li{margin:8px 0;padding-left:2px}.intro ul,.intro ol{padding-left:22px}.intro-brief{font-size:18px;color:#c9dedc}.intro .primary{min-height:52px;margin-top:22px;padding:12px 22px}.intro .eyebrow{margin-top:30px}.coach{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;color:#13352b;background:#9decca;font-size:12px;font-weight:700;line-height:1.35}.coach button{border:0;background:transparent;color:#15392e;font-size:18px;padding:4px 8px}.coach+ .palette{position:sticky}
@media(max-width:700px){.intro{padding:24px 20px 55px;margin:0 auto}.intro h1{font-size:34px}.intro .primary{width:100%}.coach{position:sticky;bottom:72px;z-index:4}}

@media(max-width:700px){.right.has-results.mobile-open>div:first-of-type{display:none}.right.has-results.mobile-open .summary{margin:0;border:0;padding:0}.right.has-results.mobile-open .score-row{align-items:center}.right.has-results.mobile-open .checks{max-height:none}}

@media(max-width:700px){.toolbar:has(.clear-cancel){gap:5px;padding:0 8px}.toolbar:has(.clear-cancel) .eyebrow{display:none}.toolbar .clear-cancel{min-height:42px}}

/* Keep the whole play surface inside the phone viewport instead of autoscrolling the page under its controls. */
@media(max-width:700px) and (orientation:portrait){.workspace{height:calc(100dvh - 56px);min-height:0;overflow:hidden}.center{overflow:hidden}.canvas-wrap{min-height:0}.canvas{min-height:100%}.palette{flex-shrink:0;position:relative}.coach{position:relative;bottom:auto;flex-shrink:0}}

@media(max-width:700px) and (orientation:portrait){.shell{height:100dvh;min-height:0}.workspace{height:auto;min-height:0;flex:1}.mobile-nav{flex-shrink:0}.center{flex:1;min-height:0}.canvas-wrap{height:0;min-height:0;flex:1}.canvas{min-height:100%}.hint,.toolbar{flex-shrink:0}}
/* Keep add controls above the drawing surface, with new components placed in-view. */
.center>.palette{order:0;flex-shrink:0}.center>.canvas-wrap{order:1}.center>.coach{order:2}.center>.footer{order:3}
.palette{padding:8px 12px}.palette .components{flex-wrap:nowrap;overflow-x:auto;margin-top:5px;padding-bottom:3px}.palette .component{flex:0 0 auto;min-height:38px}
.export-menu{display:flex;gap:8px;padding:9px 12px;background:#193440;border-bottom:1px solid #34545b}.export-menu[hidden]{display:none}.export-menu button{background:#244b48;color:#eafff3;border:1px solid #7edab4;border-radius:8px;min-height:40px;padding:7px 12px}
.connection-list{display:grid;gap:6px;margin:12px 0}.connection-list>strong{font-size:12px}.connection-list button{display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:left;background:#21404a;border:1px solid #477179;border-radius:8px;padding:9px;color:#e8f6f1;min-height:44px}.connection-list span{color:#ffb8a5;white-space:nowrap}
.focus-mode .top,.focus-mode .mobile-nav,.focus-mode .hint,.focus-mode .coach,.focus-mode .left,.focus-mode .right,.focus-mode .footer{display:none!important}.focus-mode .workspace{height:100dvh;min-height:0;display:flex}.focus-mode .center{flex:1;min-height:0;overflow:hidden}.focus-mode .toolbar{flex-shrink:0}.focus-mode .canvas-wrap{flex:1;min-height:0;max-height:none}.focus-mode .node-editor{display:block}
@media(max-width:700px){.palette{position:relative;bottom:auto;z-index:2;padding:5px 10px 7px}.palette-top{display:none}.palette .components{margin:0}.palette .component{min-height:44px}.toolbar{flex-wrap:wrap;gap:5px}.toolbar button{font-size:12px!important;min-height:38px!important}.toolbar #run{margin-left:0}.export-menu{flex-wrap:wrap}.export-menu button{flex:1}.focus-mode .toolbar #clear,.focus-mode .toolbar #run,.focus-mode .toolbar #arrange,.focus-mode .toolbar #export{display:none}.focus-mode .toolbar #focus{margin-left:auto}.focus-mode .palette{flex-shrink:0}.focus-mode .canvas-wrap{height:0}}
.quick-fix{display:block;margin:9px 0 3px;border:1px solid #77dcb6;background:#245747;color:#e8fff3;border-radius:8px;padding:9px 12px;min-height:40px;text-align:left;font-weight:700}.quick-fix:hover{background:#32765d}
.consistency-choice{margin:12px 0}.consistency-choice>strong{display:block;font-size:12px;margin-bottom:7px}.consistency-choice>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.consistency-choice .strategy{height:100%;min-height:77px}.consistency-choice .strategy small{line-height:1.25}
.usage-choice{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0;color:#c8e3db;font-size:12px;font-weight:700}.usage-choice select{min-height:44px;background:#203944;color:#edf8f3;border:1px solid #6acaa7;border-radius:8px;padding:7px;max-width:62%}
/* Checking is part of the drawing loop, including the expanded canvas. */
.focus-mode .toolbar #run{display:inline-flex!important;margin-left:0}
.focus-mode .right.mobile-open{display:block!important;position:fixed;inset:auto 0 0;z-index:20;max-height:min(68dvh,650px);overflow-y:auto;overscroll-behavior:contain;background:#13232f;border:2px solid #77dfb6;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px #06121bcc;padding:14px 20px 28px}
.focus-mode .right.mobile-open .mobile-close{display:block;margin-left:auto;min-height:44px}
@media(min-width:701px){.focus-mode .right.mobile-open{left:auto;width:min(480px,100%);border-radius:18px 0 0 0}}
/* One dominant action; secondary canvas actions live in a compact menu. */
.toolbar{justify-content:flex-end}.toolbar .spacer{flex:1}.toolbar #run{margin-left:auto}.tools-menu{display:flex;gap:7px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid #34545b;background:#193440}.tools-menu[hidden]{display:none}.tools-menu button{min-height:40px}.focus-mode .toolbar #tools-toggle{display:none}.focus-mode .toolbar #focus-exit{margin-left:0}
@media(max-width:700px){.toolbar{min-height:52px;flex-wrap:nowrap}.toolbar #run{margin-left:auto;min-height:42px!important}.toolbar #tools-toggle{min-height:42px!important}.toolbar .spacer{display:none}.tools-menu{gap:6px}.tools-menu button{flex:1 1 calc(50% - 6px);min-height:42px}.focus-mode .toolbar #run{margin-left:0}.focus-mode .toolbar #focus-exit{margin-left:auto}.focus-mode .toolbar #tools-toggle{display:none}}
.sandbox-card{border-color:#7de4bb;background:#20483f}.import-panel{position:fixed;inset:auto 0 0;z-index:25;max-height:75dvh;overflow:auto;background:#132b35;border:2px solid #77dfb6;border-radius:18px 18px 0 0;box-shadow:0 -15px 40px #08151dcc;padding:18px 20px max(22px,env(safe-area-inset-bottom))}.import-panel p{line-height:1.4;color:#bed9d2}.import-panel textarea{width:100%;height:22dvh;min-height:130px;resize:vertical;background:#0f2630;color:#eafff2;border:1px solid #5eb69c;border-radius:8px;padding:10px;font:12px ui-monospace,monospace}.import-panel .primary{min-height:44px;margin-top:10px}.import-error{color:#ffd0c4!important;background:#593037;padding:9px;border-radius:8px}.import-link-error{position:fixed;top:10px;left:10px;right:10px;z-index:30}.share-toast{position:fixed;left:10px;right:10px;bottom:14px;z-index:30;background:#245747;color:#ecfff3;border:1px solid #8ae7bc;border-radius:8px;padding:13px;display:flex;justify-content:space-between;gap:8px}.share-toast button{background:transparent;border:0;color:inherit;font-size:20px}.export-menu{flex-wrap:wrap}.export-menu button{flex:1 1 calc(50% - 8px)}
.import-preview{border:1px solid #75dcb4;background:#1c413d;border-radius:12px;padding:18px;margin-bottom:18px}.import-preview h2{margin:0 0 8px;font-size:21px}.import-preview p{color:#c9e4dd;line-height:1.5}.import-preview button{min-height:44px;margin:5px 7px 0 0}
.share-toast input{display:block;width:100%;max-width:100%;margin-top:8px;padding:10px;color:#102723;background:#e0fff0;border:1px solid #84d9b4;border-radius:7px;font-size:13px}
.progress-summary{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}.progress-summary span{border:1px solid #386659;border-radius:20px;background:#1b3938;color:#c5efdb;padding:7px 10px;font-size:12px;font-weight:600}
.technology-note{border:1px solid #426b67;border-radius:9px;background:#1c3d3c;color:#d3eee3;padding:11px;margin:11px 0;line-height:1.45}.technology-note p{margin:6px 0}.technology-note small{color:#a9d4c6}.components .component{white-space:nowrap}
.palette-top{gap:9px}.palette-top input{min-width:0;width:min(220px,42vw);border:1px solid #41676b;border-radius:7px;background:#102935;color:#e9f1f0;padding:8px 10px;font-size:13px}.component[hidden]{display:none!important}@media(max-width:700px){.palette-top input{flex:1;width:auto;max-width:220px;min-height:38px;font-size:16px}}
@media(max-width:700px){.palette-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}.palette-top .panel-title{font-size:12px;white-space:nowrap}.palette-top input{display:block;min-width:0}}
@media(max-width:950px) and (orientation:landscape) and (max-height:520px){.palette-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}}

.role-help{font-size:12px;line-height:1.45;color:#b5cbce;margin:7px 0 15px}.route-explainer{border:1px solid #417465;background:#183a39;border-radius:10px;padding:12px;margin:12px 0;color:#d5f0e5;line-height:1.45}.route-explainer strong{display:block;margin-bottom:6px}.route-explainer p{font-size:12px;overflow-wrap:anywhere;margin:6px 0}.route-explainer small{display:block;color:#b3d4cc;font-size:11px}