:root{--paper:#f5f5ed;--card:#fbfbf6;--ink:#243e35;--muted:#53675c;--line:#d9dfd1;--green:#255b46;--light:#e4ecdc;--warn:#77511e;--gold:#af955b;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}button{min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:9px 16px;font-size:14px}button:hover{background:#eaf0e1}button:disabled{opacity:.55;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #799e5d;outline-offset:3px}button.primary,.primary{background:var(--green);color:white;border-color:var(--green);font-weight:600;min-height:52px}button.primary:hover{background:#194b37}.quiet{border-color:transparent;background:transparent}.app-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,5vw);border-bottom:1px solid var(--line);gap:15px}.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--green)}.wordmark b{font-size:26px;letter-spacing:-1.2px}.wordmark b span{color:var(--gold)}.mark{font:38px/1 Georgia;border:1.5px solid var(--green);border-radius:12px;padding:0 8px 5px;position:relative}.mark sup{font:14px Georgia;position:relative;top:-10px}.header-note,.eyebrow{font-size:11px;letter-spacing:2.1px;font-weight:600;color:var(--muted)}.header-note{margin-left:auto;margin-right:24px}.app-header>button{font-size:14px}.app-header button span{margin-left:8px}h1,h2,h3,p{margin-top:0}h1{font-weight:550;font-size:clamp(32px,3.5vw,54px);line-height:1.07;letter-spacing:-1.8px;margin-bottom:17px}h1 em{font:italic 1.1em/1.06 Georgia}h2{font-size:28px;line-height:1.17;letter-spacing:-.8px;font-weight:550}h3{font-size:17px}p{margin-bottom:16px}a{color:var(--green);text-underline-offset:3px}.eyebrow{margin-bottom:20px}.task-heading>p:last-child{max-width:470px;color:var(--muted)}#app{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(310px, .82fr) minmax(0,1.4fr);grid-template-rows:auto 1fr auto;column-gap:48px;padding:40px max(26px,4vw) 22px;min-height:calc(100dvh - 123px)}.task-heading{grid-column:1;grid-row:1}.task-details{grid-column:1;grid-row:2;min-width:0}.visual{grid-column:2;grid-row:1/4;min-width:0;background:radial-gradient(ellipse at 45% 42%,#fffef9,#f0f2e6 78%);border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;min-height:440px;position:relative}.visual-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 24px;font-size:13px}.visual-top>span:first-child{font-weight:600}.pill{padding:4px 9px;border:1px solid #c8d7bc;border-radius:30px;font-size:11px;background:#f8fbf1;white-space:nowrap}.canvas-area{position:relative;flex:1;min-height:320px}.canvas-area canvas,.inspect-canvas-area canvas{width:100%;height:100%;position:absolute;inset:0;display:block;cursor:grab;touch-action:none}.visual-bottom{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;gap:12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}.inspect-button{background:var(--green);color:white;font-size:12px;border-color:var(--green);white-space:nowrap}.inspect-button:hover{color:var(--ink)}.guide-dock{grid-row:3;grid-column:1;padding-top:20px;margin-top:6px}.dock-meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}progress{width:100%;height:3px;appearance:none;border:0;display:block;margin:13px 0 16px}progress::-webkit-progress-bar{background:#dfe6d8;border-radius:10px}progress::-webkit-progress-value{background:var(--green);border-radius:10px}.dock-actions{display:flex;gap:9px}.dock-actions .primary{flex:1;display:flex;align-items:center;justify-content:space-between;text-align:left}.back-button{font-size:12px;white-space:nowrap}#simulationNote{font-size:11px;display:block;text-align:center;color:var(--muted);margin-top:10px}.app-footer{display:flex;align-items:center;justify-content:center;gap:20px;min-height:47px;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding:7px 20px}.app-footer button{min-height:32px;border:0;background:transparent;font-size:11px;padding:4px}.task-details details{border-top:1px solid var(--line);padding:12px 0;margin-top:15px}.task-details details p{font-size:13px}.task-details summary{font-size:13px;color:var(--green);cursor:pointer}summary{cursor:pointer}summary+div{margin-top:14px}.stage-feedback{font-size:13px;color:var(--green);min-height:0;margin:10px 0}.stage-feedback:empty{display:none}.small{font-size:12px;color:var(--muted)}.muted{color:var(--muted)}.callout{border-left:3px solid #9bad87;padding:12px 16px;background:#e9efe2;border-radius:0 12px 12px 0;font-size:14px;margin:16px 0}.callout.warning{border-color:#c3a267;background:#f6eedb;color:var(--warn)}.callout p{margin:4px 0}.stats{display:flex;gap:22px;margin:22px 0}.stats strong{font-size:27px;font-weight:550;display:block;letter-spacing:-.8px}.stats small{font-size:11px;color:var(--muted);display:block}.choice-list{display:grid;gap:10px;margin:18px 0}.choice{text-align:left;padding:16px 18px;position:relative;background:var(--card)}.choice b{display:block}.choice small{display:block;margin-top:4px;color:var(--muted);font-size:12px}.choice.selected{border:2px solid var(--green);background:#edf3e5}.choice.selected:after{content:'✓';position:absolute;right:17px;top:14px;color:var(--green)}.choice span{font-size:11px;color:var(--muted);display:block}.field{display:grid;gap:6px;font-size:13px;margin:14px 0}.field input,.field select{width:100%;min-width:0;border:1px solid #bbc9b5;border-radius:10px;padding:12px;background:#fffef9;min-height:46px}.field small{font-size:11px;color:var(--muted)}.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin:16px 0}.check input{margin-top:4px;accent-color:var(--green);width:18px;height:18px;flex:0 0 18px}.numbered{padding-left:22px;font-size:14px;line-height:1.75}.numbered li{margin-bottom:9px}.instruction{font-size:16px}.connection-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.connection-choices button{padding:13px 4px}.connection-choices .selected{background:var(--green);color:white}.connection-choices .wan{grid-column:1/-1;color:var(--warn)}.microprogress{font-size:11px;color:var(--muted);letter-spacing:1px;margin:6px 0 10px}.code-location{font-size:12px;font-weight:600;color:var(--green);margin-bottom:10px}.terminal{background:#172e27;color:#edf8df;border:1px solid #314c3d;border-radius:16px;overflow:hidden}.terminal header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #3b5345;font-size:11px;color:#c2d7b7}.terminal button{background:#294837;color:#eef6e6;border:1px solid #5c775f;min-height:38px;font-size:12px}.terminal pre{margin:0;padding:22px;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font:15px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace}.expected{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-size:14px}.expected strong{display:block;font-size:11px;letter-spacing:1px;color:var(--muted);margin-bottom:7px}.expected p{margin:0}.command-app{display:block!important;max-width:1000px!important;padding-top:35px!important}.command-app .task-heading{max-width:820px}.command-app .visual{display:none}.command-app .guide-dock{max-width:820px}.command-app .task-details{max-width:820px}.command-app h1{font-size:38px}.command-app .terminal pre{font-size:16px}.command-app .task-heading p:last-child{max-width:720px}.command-app .guide-dock{margin-top:20px}dialog{border:1px solid var(--line);color:var(--ink);background:var(--card);padding:0;border-radius:22px;max-height:90dvh;width:min(720px,calc(100% - 28px));box-shadow:0 35px 100px #11271f33}dialog::backdrop{background:#142d2455;backdrop-filter:blur(4px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}.dialog-header h2{font-size:24px;margin:0}#drawerBody{padding:22px}.menu-grid{display:grid;gap:8px}.menu-grid button{text-align:left;display:flex;justify-content:space-between;padding:16px}.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery button{text-align:left;min-height:100px;padding:16px}.gallery b,.gallery small{display:block}.gallery small{font-size:11px;margin-top:5px;color:var(--muted)}.gallery .part-number{display:block;font:italic 22px Georgia;color:#7b8e68;margin-bottom:9px}.budget-item{border-bottom:1px solid var(--line);padding:18px 0;display:grid;grid-template-columns:1fr 92px;column-gap:15px}.budget-item h3{margin-bottom:4px;font-size:15px}.budget-item p{font-size:12px;color:var(--muted);margin-bottom:6px}.budget-item .check{margin:7px 0;grid-column:1}.budget-item input[type=number]{min-width:0;width:100%;border:1px solid var(--line);border-radius:9px;padding:8px}.budget-total{display:flex;justify-content:space-between;padding:17px 0;font-size:20px;border-bottom:1px solid var(--line)}.budget-total b{font-weight:550}.budget-badge{display:inline-block;font-size:10px;padding:3px 7px;border:1px solid var(--line);border-radius:8px;margin:5px 0}.wide-button{width:100%;margin:10px 0}.step-list{display:grid;gap:8px}.step-list button{text-align:left;padding:12px 15px;font-size:13px}.source-item{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px}.inspector{max-width:none;width:min(1180px,calc(100% - 30px));height:min(1000px,calc(100dvh - 24px));max-height:none;overflow:hidden;display:none;grid-template-rows:auto auto minmax(160px,1fr) auto auto auto}.inspector[open]{display:grid}.inspector-header{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}#itemCount{font-size:12px;color:var(--muted)}.inspector-heading{padding:14px 26px 0}.inspector-heading .eyebrow{font-size:10px}.inspector-heading h2{font-size:28px;margin:5px 0 6px}.inspector-heading p{font-size:13px;color:var(--muted);margin-bottom:6px}.inspect-canvas-area{position:relative;min-height:140px;background:radial-gradient(ellipse at center,#fffef9,#edf0e3);overflow:hidden}.inspect-view-controls{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.views,.zoom-controls{display:flex;gap:5px}.views button{font-size:12px;padding:8px 15px;border:0;background:transparent}.views button[aria-pressed=true]{background:var(--green);color:white}.zoom-controls button{font-size:18px;padding:3px;width:42px;min-height:40px}.inspect-info{padding:8px 26px;max-height:170px;overflow:auto}.inspect-info p{font-size:12px;margin:5px 0}.inspect-info summary{font-size:12px;color:var(--green)}.gesture-copy{font-size:11px!important;color:var(--muted)}.inspect-info details{padding:6px 0}.inspector-nav{display:flex;justify-content:space-between;gap:14px;padding:12px 24px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card)}.inspector-nav button{flex:1}.model-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;font-size:14px;background:#edf1e5}.model-fallback p{max-width:280px}.no-script{padding:30px;background:#fff0cd;position:fixed;inset:auto 0 0}#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;padding:13px 20px;background:#254b39;color:white;border-radius:13px;z-index:100;max-width:calc(100% - 24px);width:max-content;font-size:13px;box-shadow:0 6px 24px #172e2733;display:none}#toast.show{display:block}.skip{position:fixed;top:-100px;background:white;padding:10px;z-index:200}.skip:focus{top:5px}[hidden]{display:none!important}.presentation #taskTitle{font-size:48px}.presentation .guide-dock{margin-top:30px}.receipt{font:12px/1.8 ui-monospace,monospace;white-space:pre-wrap;background:#eaf0e1;padding:16px;border-radius:12px}.scenario-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scenario-result{padding:16px;border:1px solid var(--line);margin-top:16px;border-radius:12px;font-size:14px}.diagram{display:grid;grid-template-columns:1fr;gap:8px;text-align:center;padding:20px 12px}.diagram span{padding:13px;border:1px solid var(--line);border-radius:12px}.diagram i{font-style:normal;color:var(--muted)}
@media(min-width:1450px){#app{column-gap:70px}.visual{min-height:680px}}
@media(max-width:900px){.header-note{display:none}#app{column-gap:25px;grid-template-columns:minmax(280px,1fr) minmax(0,1.1fr);padding:30px 24px}.visual-bottom{flex-direction:column}.visual{min-height:400px}.canvas-area{min-height:300px}h1{font-size:36px}}
@media(max-width:680px){body{font-size:15px}.app-header{height:64px;padding:0 18px}.wordmark b{font-size:24px}.mark{font-size:32px}.wordmark{gap:9px}.app-header>button{font-size:13px}#app{display:flex;flex-direction:column;padding:24px 18px 0;min-height:calc(100dvh - 111px);gap:0}.task-heading{order:0}.eyebrow{font-size:10px;letter-spacing:1.55px;margin-bottom:12px}h1{font-size:34px;letter-spacing:-1.2px;margin-bottom:12px}.welcome h1 br{display:none}.welcome h1 em{font:inherit}.task-heading>p:last-child{font-size:14px;margin-bottom:18px;line-height:1.6}.visual{order:1;min-height:0;flex:none;height:340px;border-radius:18px;margin-bottom:18px}.visual-top{padding:12px 14px;font-size:12px}.pill{font-size:10px}.canvas-area{min-height:0;flex:1}.visual-bottom{padding:9px 12px;flex-direction:row;font-size:10px}.inspect-button{min-height:40px;padding:7px 10px;font-size:11px}#gestureHint{max-width:150px}.task-details{order:2}.guide-dock{order:3;position:relative;background:var(--paper);padding:17px 0 18px;margin-top:auto;z-index:2}.dock-meta{font-size:10px;gap:6px}.dock-actions .primary{min-height:50px;font-size:14px}#simulationNote{font-size:10px;margin-top:9px}.back-button{font-size:11px;padding:8px 11px}.app-footer{font-size:10px;gap:9px;flex-wrap:wrap;padding:8px 14px}.app-footer button{font-size:10px}.app-footer>span:first-child{width:100%;text-align:center}.stats{margin:16px 0}.stats strong{font-size:25px}.stats small{font-size:11px}.command-app{padding:24px 18px 0!important;display:flex!important;min-height:calc(100dvh - 118px)!important}.command-app .task-heading{order:0}.command-app .task-details{order:1}.command-app .guide-dock{order:2;margin-top:auto}.command-app h1{font-size:32px}.command-app .terminal pre{font-size:14px;padding:18px}.command-app .task-heading p:last-child{font-size:14px}.expected{font-size:13px}.inspector{margin:0;width:100%;height:100dvh;border-radius:0;border:0;grid-template-rows:auto auto minmax(170px,1fr) auto auto auto;max-height:100dvh}.inspector-header{padding:8px 12px}.inspector-header button{font-size:12px;padding:8px}.inspector-heading{padding:12px 18px 0}.inspector-heading h2{font-size:25px}.inspector-heading p{font-size:12px}.inspector-heading .eyebrow{font-size:9px}.inspect-view-controls{padding:9px 12px;gap:5px}.views{gap:0}.views button{font-size:11px;padding:8px 10px;min-height:42px}.zoom-controls{gap:3px}.zoom-controls button{width:32px;min-height:38px;font-size:17px}.inspect-info{padding:6px 18px;max-height:155px}.inspector-nav{padding:10px 15px max(10px,env(safe-area-inset-bottom));gap:8px}.inspector-nav button{font-size:12px;min-height:48px}.dialog-header{padding:17px}.dialog-header h2{font-size:21px}#drawerBody{padding:18px}.budget-item{grid-template-columns:1fr 75px;gap:10px}.budget-item h3{font-size:14px}.budget-item p{font-size:11px}.gallery{gap:8px}.gallery button{padding:12px}.gallery b{font-size:13px}.task-details details{margin-top:8px}.presentation #taskTitle{font-size:36px}.connection-choices button{font-size:12px}.task-details .callout{font-size:13px}.welcome .task-details details{display:none}.welcome .guide-dock{padding-top:12px}.welcome .visual{height:320px}.welcome .stats{margin:8px 0 4px}.welcome .task-heading>p:last-child{margin-bottom:14px}}
@media(max-width:370px){.views button{padding:8px 7px}.zoom-controls button{width:29px}h1{font-size:30px}.visual{height:300px}.inspector-heading p{font-size:11px}.stats{gap:18px}.wordmark b{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media print{.app-header,.visual,.guide-dock,.app-footer,.legal-band,.inspector{display:none!important}#app{display:block;padding:15px}.task-heading,.task-details{display:block}dialog[open]{position:static;max-height:none;border:0;width:100%;overflow:visible}#drawer{position:static}}

/* v4.1: the product owns the screen; controls never cover its surfaces. */
#toast.show{display:block} .stage-feedback.error,#profileError{color:#8b3528}
#fullInspector{font-size:12px} .inspector:fullscreen{width:100vw;height:100dvh;max-width:none;border:0;border-radius:0}
.inspector-heading .eyebrow{margin-bottom:8px}.inspect-canvas-area{isolation:isolate}
.connection-choices button[aria-pressed=true]{background:var(--green);color:white}
.inspect-info details[open]{padding-bottom:12px}.inspect-info summary{min-height:32px;padding:5px 0}
@media(max-width:680px){.inspector-heading{padding-top:8px}.inspector-heading h2{font-size:24px}.inspector-heading .eyebrow{display:none}.gesture-copy{margin-top:0!important}.inspector-header{padding-top:max(8px,env(safe-area-inset-top))}#fullInspector{font-size:11px;padding:8px 4px}.inspect-info{max-height:140px}.inspector-nav{padding-bottom:max(12px,env(safe-area-inset-bottom))}}
@media(max-height:640px){.inspector-heading .eyebrow,.gesture-copy{display:none}.inspector-heading h2{font-size:22px;margin-top:0}.inspector-heading p{margin-bottom:3px}.inspect-info{max-height:88px}.inspector-header{padding:4px 12px}.inspector-nav{padding-top:6px}.inspect-view-controls{padding-top:5px;padding-bottom:5px}.inspector{grid-template-rows:auto auto minmax(100px,1fr) auto auto auto}}

/* v5.1 add-ons on the v4.1 look: every-part scene, inspector fixes, desk landing */
.inspect-canvas-area{min-height:0}
.measure-layer{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.measure{position:absolute;transform:translate(-50%,-100%);font-size:10px;padding:3px 8px;border:1px solid var(--line);border-radius:30px;background:#fbfbf6ee;color:var(--muted);white-space:nowrap}
.scene-modes{display:flex;gap:6px;flex-wrap:wrap}
.scene-modes button{min-height:34px;padding:5px 12px;border-radius:30px;font-size:12px}
.scene-modes button[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
.views[hidden]{display:none}
.text-button{min-height:40px;border:0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:8px 6px}
.text-button:hover{background:transparent;color:var(--green)}
.visual-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.visual-actions .quiet{min-height:40px;padding:7px 10px;font-size:11px;border-color:var(--line)}
.welcome .canvas-area,.lab-mode .canvas-area{background:linear-gradient(180deg,#f4f2ea,#e6e3d7)}
.desk-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.desk-tag{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;width:18px;height:18px;min-height:0;padding:0;border-radius:50%;border:2px solid #fff;background:var(--green);box-shadow:0 1px 5px #0004}
.desk-tag:hover{background:var(--green)}
.desk-tag span{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px;white-space:nowrap;box-shadow:0 4px 14px #0002;text-align:left}
.desk-tag small{display:none;white-space:normal;width:210px;color:var(--muted);margin-top:3px}
.desk-tag:hover span,.desk-tag:focus-visible span,.desk-tag.open span{display:block}
.desk-tag.open small{display:block}
.desk-tag.open,.desk-tag:hover,.desk-tag:focus-visible{z-index:2}
.summary-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 6px}
.summary-card{display:block;text-align:left;min-height:0;padding:12px 14px;border-radius:14px;background:var(--card)}
.summary-card .sc-label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.summary-card b{display:block;font-size:19px;margin-top:3px;color:var(--ink)}
.summary-card .sc-detail{display:none;font-size:12px;line-height:1.45;color:var(--muted);margin-top:6px}
.summary-card:hover .sc-detail,.summary-card:focus-visible .sc-detail,.summary-card[aria-expanded=true] .sc-detail{display:block}
/* v5.1: arch mark; part names only on hover/tap, placed beside the part, never on it */
.mark{width:40px;height:40px;border:0;border-radius:0;padding:0;font:inherit;color:var(--green)}
.app-header button,.text-button{white-space:nowrap}
.desk-outline,.measure-outline{position:absolute;display:none;border:1.5px solid var(--gold);border-radius:6px;pointer-events:none}
.measure-outline{display:block}
.desk-tip{position:absolute;display:none;transform:translate(-50%,-100%);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px;white-space:nowrap;box-shadow:0 4px 14px #0002;pointer-events:none}
.desk-tip small{display:block;white-space:normal;width:220px;color:var(--muted);margin-top:2px}
.desk-tip.below,.measure.below{transform:translate(-50%,0)}
/* v5.1 mode switch + Packet lab (light palette) */
.modes{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:30px;background:var(--card);margin-left:28px}
.modes button{min-height:34px;border:0;border-radius:30px;padding:5px 14px;font-size:13px;background:transparent;white-space:nowrap}
.modes button[aria-pressed=true]{background:var(--green);color:#fff}
@media(max-width:860px){.app-header{flex-wrap:wrap;height:auto;min-height:64px;padding-top:8px;padding-bottom:8px;row-gap:6px}.modes{order:5;width:100%;margin:0;justify-content:center}.modes button{flex:1;padding:5px 8px}.header-note,#allPartsButton{display:none}#pauseAutoButton,#stopAutoButton{min-height:36px;padding:5px 10px;font-size:12px}}
.lab-dialog{width:min(900px,calc(100% - 28px))}
.lab-body{padding:4px 24px 24px}
.lab-note{letter-spacing:.12em;color:var(--muted)}
#labSvg{width:100%;height:auto;display:block;background:radial-gradient(ellipse at 45% 42%,#fffef9,#f0f2e6 78%);border:1px solid var(--line);border-radius:16px}
.lab-link{stroke:#c8d7bc;stroke-width:3}
.lab-link.dash{stroke-dasharray:6 7}
.lab-node rect{fill:var(--card);stroke:var(--line);stroke-width:1.5}
.lab-node text{font-size:13px;fill:var(--muted)}
.lab-node.down{opacity:.4}
.lab-node.hit rect{stroke:var(--gold);stroke-width:2.5}
.lab-node .ic{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round}
.lab-node .ic.pi{fill:var(--light)}
.lab-node .ic.dots{stroke-dasharray:2 3}
#labPacket{filter:drop-shadow(0 1px 4px #0004)}
.badge-text{font-size:12px;font-weight:600;fill:#fff}
.lab-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.lab-stats div{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:10px 14px}
.lab-stats b{display:block;font-size:26px;color:var(--green)}
.lab-stats span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lab-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lab-buttons button{font-size:13px}
.lab-buttons button[aria-pressed=true]{border-color:var(--green);background:var(--light)}
@media(max-width:700px){.lab-buttons{grid-template-columns:1fr 1fr}.lab-body{padding:4px 14px 18px}}
.lab-result{margin-top:14px}
.lab-log{list-style:none;margin:14px 0 0;padding:10px 14px;border-radius:12px;background:var(--light);color:var(--ink);font:12px/1.8 ui-monospace,monospace;min-height:44px}
.lab-log:empty::before{content:'Pick a request above.';color:var(--muted)}
.lab-log time{color:var(--muted);margin-right:6px}
.lab-tag{position:absolute;display:none;transform:translate(-50%,-100%);margin-top:-12px;background:var(--card);color:var(--ink);border:2px solid;border-radius:10px;padding:5px 10px;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px #0002;pointer-events:none;z-index:3}
.task-details .lab-buttons{grid-template-columns:1fr 1fr}
.lab-now{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-weight:600;font-size:14px}
.lab-now i{width:10px;height:10px;border-radius:50%;flex:none}
.lab-now[hidden]{display:none}
/* v5.2: the desk IS the landing page — full-width hero, text and cards below it */
@media(min-width:681px){.welcome .visual{grid-column:1/-1;grid-row:1;height:min(66vh,700px);min-height:420px;margin-bottom:30px}.welcome .task-heading{grid-column:1;grid-row:2}.welcome .task-details{grid-column:2;grid-row:2;align-self:start}.welcome .guide-dock{grid-column:1/-1;grid-row:3}}
@media(max-width:680px){.welcome .visual{order:-1;height:56vh;min-height:300px}}
/* Warm white page and pale sage scene palette from Omer's reference. */
:root{--paper:#fbfaf1;--card:#fdfdf7;--ink:#173a37;--muted:#66756a;--line:#dce0d4;--green:#1f4f45;--light:#eef1e6}
body{background:#fbfaf1}
.app-header{background:#fdfdf7;border-bottom:1px solid #dce0d4}
.visual{background:#fdfdf7;border-color:#dce0d4}
.welcome .canvas-area,.lab-mode .canvas-area{background:linear-gradient(180deg,#eef0e6,#e1e4d8)}
.modes{background:#eceee4;border:0;border-radius:14px;padding:4px}
.modes button{border-radius:11px;font-weight:600;color:var(--ink)}
.modes button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0000001a}
.term-mode .canvas-area,.term-mode .visual-bottom,.term-mode .visual-top{display:none}
.term-win{display:flex;flex-direction:column;flex:1;min-height:420px;background:#fdfdf7}
.term-win[hidden]{display:none}
.term-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#dcdfd3}
.term-bar span{margin-left:8px}
.term-out{flex:1;margin:0;padding:16px 18px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);min-height:260px;max-height:60vh}
.term-line{display:flex;align-items:center;gap:6px;padding:10px 18px;border-top:1px solid var(--line);font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
.term-line span{color:var(--green);font-weight:600;white-space:nowrap}
.term-line input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;padding:6px 0}
.term-actions{display:flex;gap:8px;justify-content:flex-end;padding:0 18px 16px;flex-wrap:wrap}
.term-actions button{min-height:40px;font-size:13px}
.term-steps{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px}
.term-steps li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:7px 10px;border:1px solid transparent;border-radius:10px;font-size:14px}
.term-steps li b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--light);font-size:12px}
.term-steps li small{color:var(--muted);font-size:11px}
.term-steps li[data-state=current]{border-color:var(--line);background:var(--card)}
.term-steps li[data-state=current] b{background:var(--green);color:#fff}
.term-steps li[data-state=done]{color:var(--muted)}
.term-steps li[data-state=done] b::after{content:'✓'}
.term-steps li[data-state=done] b{font-size:0;background:#dfe9dc}
.term-steps li[data-state=done] b::after{font-size:12px}
/* v5.6: the terminal is black, on a laptop screen (bezel + base) */
.term-mode .visual{background:transparent;border:0;overflow:visible;box-shadow:none}
.term-mode .visual::after{content:'';display:block;height:18px;margin:0 -5%;background:linear-gradient(180deg,#d6d9d3,#a9aea8);border-radius:0 0 22px 22px;box-shadow:0 10px 24px #0002}
.term-win{background:#0c0e0d;border:16px solid #262928;border-bottom-width:22px;border-radius:20px 20px 6px 6px}
.term-bar{background:#161918;border-bottom:1px solid #2a2e2c;color:#9aa69e}
.term-bar i:nth-child(1){background:#ff5f57}.term-bar i:nth-child(2){background:#febc2e}.term-bar i:nth-child(3){background:#28c840}
.term-out{color:#d7e3d9;background:#0c0e0d}
.term-line{border-top:1px solid #2a2e2c;background:#0c0e0d}
.term-line span{color:#7fd49b}
.term-line input{color:#eef5f0;caret-color:#7fd49b}
.term-line input::placeholder{color:#6f7d74}
.term-actions{background:#0c0e0d;padding-top:4px}
.term-actions button{background:#1b1f1d;border-color:#3a403d;color:#e6efe8}
.term-actions button.primary{background:#7fd49b;border-color:#7fd49b;color:#0c0e0d}
/* v5.8: sage instead of white, as asked */
:root{--paper:#e3e9dc;--card:#f1f4eb;--line:#cfd6c6;--light:#dce4d3}
body{background:#e3e9dc}
.app-header{background:#edf1e7}
.visual{background:#edf1e7}
.welcome .canvas-area,.lab-mode .canvas-area{background:linear-gradient(180deg,#dfe5d8,#d3dbcb)}
.modes{background:#dfe5d8}

/* v6: one primary mobile path and scene controls outside the geometry. */
.scene-cards{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.welcome .scene-cards{display:grid;flex:0 0 auto;min-height:58px}
.scene-cards button{border:0;border-radius:0;text-align:left;background:var(--card);padding:11px 12px;min-height:58px;display:grid;align-content:center;gap:1px}
.scene-cards button:hover,.scene-cards button:focus-visible{background:#e7eddf}
.scene-cards span{font:10px ui-monospace,monospace;color:var(--muted)}
.scene-cards b{font-size:12px}
.scene-lab-controls{display:none;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px;border-top:1px solid var(--line)}
.lab-mode .scene-lab-controls{display:grid}
.scene-lab-controls button{font-size:11px;padding:5px;min-height:44px}
.term-warning{font-size:12px;font-weight:700;color:#8b3528;padding:8px 16px;margin:0;background:#fff2dc}
.board-labels{position:absolute;inset:0;pointer-events:none;z-index:4}
.board-labels button{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;min-height:36px;min-width:36px;border-radius:50%;padding:0;background:#fdfdf7e8;border:2px solid var(--green);font-size:11px;font-weight:700}
.board-labels button span{display:none;position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:white;padding:5px 8px;border-radius:7px}
.board-labels button:hover span,.board-labels button:focus-visible span{display:block}
@media(max-width:680px){.welcome .task-heading{order:0}.welcome .visual{order:1;height:300px;min-height:260px;margin-bottom:12px}.welcome .guide-dock{order:2;margin-top:0;padding:5px 0 12px}.welcome .task-details{order:3}.welcome .scene-cards{overflow-x:auto}.scene-cards button{min-height:50px;padding:6px}.scene-cards b{font-size:10px}.welcome .visual-bottom{display:flex}.scene-lab-controls button{font-size:10px}.board-labels button{min-height:30px;min-width:30px}}

@media(min-width:681px){.term-mode .visual{align-self:start;height:min(74vh,720px);min-height:540px}.term-mode .term-win{min-height:0}.term-mode .term-out{min-height:180px;max-height:none}}
@media(max-width:680px){.term-mode .visual{height:430px;min-height:0}.term-mode .term-win{min-height:0}.term-mode .term-out{min-height:120px;max-height:none}}

.term-steps{max-height:480px;overflow:auto;scrollbar-color:#b7c4b3 transparent}
@media(max-width:680px){.term-steps{max-height:260px}}

:root{--muted:#4b5f51}
.modes button,.scene-modes button,.views button,.zoom-controls button,.visual-actions .quiet,.inspect-button,.app-footer button{min-height:44px}
.zoom-controls button{min-width:44px}
@media(max-width:680px){.zoom-controls button{width:44px;min-height:44px}.views button{min-height:44px}}

/* v6.1: obvious browse path, readable guide map, and annotated example lessons. */
#guideMapButton{background:#244d3c;color:#fff;border:2px solid #244d3c;font-weight:700;font-size:15px;box-shadow:0 2px 8px #163a2a26}
#guideMapButton:hover{background:#173d2e;color:#fff}
#browseButton{display:block;width:100%;margin-top:10px;border-color:#7d9e7b;background:#f6faf1;color:#204b36;font-weight:700;text-align:center}
#browseButton[hidden]{display:none}
.preview-banner{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;background:#fff0c8;border-bottom:2px solid #af8133;padding:10px 16px;text-align:center;font-size:14px}
.preview-banner[hidden]{display:none}
.preview-banner button{background:#244d3c;color:white;border:0;font-weight:700}
.previewing .task-details .check,.previewing #copyCommand{display:none}
#resetSceneButton{min-height:44px;background:#f6faf1;border:1px solid #9bb599;font-weight:700}
#drawer{position:fixed;inset:0 auto 0 0;margin:0;width:min(450px,100vw);height:100dvh;max-height:100dvh;border-radius:0 22px 22px 0;overflow:auto}
#drawer .menu-intro{font-size:16px}
#drawer .menu-grid button{display:block;width:100%;text-align:left}
#drawer .menu-grid b,#drawer .menu-grid small{display:block}
#drawer .menu-grid small{margin-top:3px;font-size:12px}
#drawer .step-list button{display:flex;gap:12px;align-items:flex-start;width:100%}
#drawer .step-list button>span{font:700 11px ui-monospace,monospace;color:#4c6b56}
#drawer h3{margin:22px 0 8px}
.basics{border-top:1px solid var(--line);margin-top:16px;padding-top:15px}
.basics h2{font-size:22px;margin-bottom:8px}
.why-list{margin:8px 0 16px;padding-left:20px;line-height:1.6}
.why-list li{margin:0 0 7px}
.network-lesson{border:1px solid #b8cdb8;border-radius:16px;padding:18px;background:#f5f8ef;margin:4px 0 18px}
.lesson-lede{font-size:17px;line-height:1.5}
.lesson-steps{border-top:1px solid #cad8c7;padding-top:18px}
.lesson-steps ol{padding-left:23px;line-height:1.65}
.lesson-steps li{margin-bottom:9px}
.lesson-steps figure{margin:16px 0}
.lesson-steps img{display:block;width:100%;height:auto;border:1px solid #9eb3a5;border-radius:12px;background:#fff}
.lesson-steps figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.advanced-network{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:16px 0;background:#f5f8ef}
.advanced-network summary{font-weight:700;font-size:14px}
.advanced-network[open] summary{margin-bottom:12px}
.board-key{font-size:12px;padding:9px 12px;background:#e7f0e5;border-radius:9px;margin-bottom:8px}
.board-key b{display:block;margin-bottom:4px}
.board-key ul{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:0;padding:0}
.board-key li{white-space:nowrap}
@media(max-width:680px){#guideMapButton{font-size:13px;padding:8px 10px}.preview-banner{font-size:12px}.network-lesson{padding:14px}.lesson-lede{font-size:15px}.basics h2{font-size:19px}#drawer{width:100vw;border-radius:0}.welcome .visual-bottom{display:flex}.welcome #resetSceneButton{min-height:40px;padding:5px 8px;font-size:11px}.welcome #everyPartButton,.welcome #inspectButton{display:none}.welcome #rotatePiece,.welcome #powerPathButton,.welcome #deskZoomIn,.welcome #deskZoomOut{display:inline-flex}}

/* Larger connector key; each abbreviation has its own explanation. */
.board-key{font-size:13px;line-height:1.45}
.board-key ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 14px}

/* The power explanation stays beside the desk so the loose lid cannot read as a second adapter. */
.scene-explanation{display:none;margin:0;padding:9px 18px;background:#f5f3e8;border-top:1px solid var(--line);font-size:13px;line-height:1.4}
.welcome .scene-explanation{display:block}
.scene-explanation b{color:var(--ink)}
@media(min-width:681px){.welcome .task-heading{grid-row:1;grid-column:1/-1}.welcome .visual{grid-row:2;grid-column:1/-1;height:auto;min-height:520px;margin-bottom:8px}.welcome .canvas-area{min-height:260px}.welcome .guide-dock{grid-row:3;grid-column:1/-1;margin-top:0}.welcome .task-details{grid-row:4;grid-column:1/-1}}
@media(max-width:680px){.scene-explanation{font-size:11px;padding:7px 12px}.welcome .visual{height:300px;min-height:260px}.welcome .guide-dock{order:2;margin-top:0}.welcome .task-heading{order:0}}
/* The lab's written scenario buttons already control the same four outcomes. */
.lab-mode .scene-lab-controls{display:none}
.preview-edit-note{margin:0 0 15px;padding:11px 13px;border-left:4px solid #af955b;background:#fff3d8;font-size:13px;line-height:1.45}
.board-key li{white-space:normal}
@media(max-width:680px){.board-key{font-size:12px}.board-key ul{grid-template-columns:1fr 1fr;gap:4px 7px}}

/* Combined candidate: real command reference and model comparison. */
.command-card{padding:14px 0;border-bottom:1px solid #c4cebe}.command-card pre{overflow:auto;padding:12px;background:#173d33;color:#f3f4e7;border-radius:8px}.command-card p{font-size:14px}.comparison-drawer{width:min(1080px,96vw);max-width:1080px}.compare-models{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare-models section{min-width:0;border:1px solid #c4cebe;border-radius:12px;padding:12px}.compare-models canvas{display:block;width:100%;height:240px;touch-action:none}.comparison-table{border-collapse:collapse;width:100%;font-size:14px}.comparison-table th,.comparison-table td{text-align:left;border-bottom:1px solid #c4cebe;padding:10px;vertical-align:top}.table-scroll{overflow:auto}#commandSearch{width:100%;margin:8px 0;padding:12px;border:1px solid #647d70;border-radius:8px} @media(max-width:600px){.compare-models{grid-template-columns:1fr}.compare-models canvas{height:200px}.comparison-table{font-size:12px}}

/* v6.4.2: short auto-assemble label on phones */
.narrow-only{display:none}
@media (max-width:560px){.wide-only{display:none}.narrow-only{display:inline}}
/* v6.4.5: a taller 3D view on phones */
@media (max-width:680px){.canvas-area{min-height:180px}.welcome .canvas-area{min-height:140px}.welcome .scene-cards{flex:0 0 auto;min-height:52px}}
/* Auto-assemble progress bar and a larger 3D stage */
.lab-key{display:flex;flex-wrap:wrap;gap:8px 14px;margin:10px 0 4px;font-size:12px;color:var(--muted,#5c6558)}
.lab-key span{display:inline-flex;align-items:center;gap:6px}
.lab-key i{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 8px currentColor}
#pauseAutoButton,#stopAutoButton,.auto-transport button{border:0;border-radius:999px;padding:6px 14px;font:600 13px/1.2 inherit;cursor:pointer;min-height:40px;z-index:6}
#pauseAutoButton,.auto-transport [data-action="pauseAuto"]{background:#f5c842;color:#243e35}
#stopAutoButton,.auto-transport [data-action="stopAuto"]{background:#b3401a;color:#fff8f0}
.auto-transport,.auto-transport-inline{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.auto-transport-inline{margin:12px 0 0}
body.auto-mode .auto-transport{display:flex}
body.auto-mode #nextButton,body.auto-mode #browseButton,body.auto-mode .guide-dock,body.auto-mode #allPartsButton{display:none}
.auto-bar{height:6px;border-radius:3px;background:#dfe7dc;overflow:hidden;margin:0 0 16px}
.auto-bar i{display:block;height:100%;width:0;background:#2f6a45;animation:autobar linear forwards}
@keyframes autobar{to{width:100%}}
@media (prefers-reduced-motion:reduce){.auto-bar i{animation-duration:1ms!important;width:100%}}
@media (min-width:901px){body.auto-mode #app{grid-template-columns:minmax(260px,.45fr) minmax(0,2fr);max-width:none}body.auto-mode .canvas-area{min-height:72vh}}
@media (max-width:900px){body.auto-mode .canvas-area{min-height:48vh}}
@media (max-width:680px){body.auto-mode .canvas-area{min-height:36vh}}
/* Network Workbench: the two-word wordmark stacks beside the mark where the header is tight, so it takes about the room the old short name did. */
@media(max-width:1360px){.wordmark b{width:min-content;font-size:17px;line-height:1.05;letter-spacing:-.6px}}
@media(max-width:680px){.wordmark b{font-size:15px}}
@media(max-width:370px){.wordmark b{font-size:14px}}
/* Static legal band under the footer (scripts/check-legal.mjs reads static HTML only). */
.legal-band{max-width:1100px;margin:0 auto;padding:18px 20px 28px;font:400 12.5px/1.65 system-ui,-apple-system,'Segoe UI',sans-serif;color:inherit;opacity:.82} .legal-band a{color:inherit}