/* An open canvas: navigation and detail stay outside the illustration. */
.home-page{min-height:100svh;display:grid;grid-template-rows:72px 1fr auto;}
.home-page main#main{width:100%;max-width:1600px;margin:auto;padding:0 32px;}
.home-scene{--scene-ink:#20201e;--scene-muted:#6c6c66;--scene-paper:#fff;position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:center;min-height:calc(100svh - 130px);color:var(--scene-ink);}
.scene-intro{grid-area:1 / 1;justify-self:start;align-self:center;z-index:1;max-width:190px;}
.scene-intro h1{font-size:13px;line-height:1.65;font-weight:400;letter-spacing:0;margin:0;max-width:190px;text-wrap:initial;}
.scene-intro p{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0 0;}
.scene-stage{grid-area:1 / 1;justify-self:center;position:relative;width:min(900px,calc((100svh - 244px)*1.4286),76%);aspect-ratio:10 / 7;min-width:0;margin:24px 0;}
.scene-canvas{display:block;width:100%;height:100%;overflow:visible;}.scene-node-layer{position:absolute;inset:0;pointer-events:none;}
.home-scene button{font:12px/1.3 'Courier New',monospace;color:var(--scene-ink);border:0;background:transparent;}
.home-scene :is(button,a,summary):focus-visible{outline:2px solid var(--scene-ink);outline-offset:4px;}
.scene-node{position:absolute;display:flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap;transform:translate(-50%,-50%);padding:8px 10px;pointer-events:auto;font-size:10px!important;}
.scene-node[aria-pressed=true]{text-decoration:underline;text-underline-offset:5px;}.scene-node:hover{background:#f3f3ef;}
.node-arrow{display:none;}.node-grok-mark{width:36px;height:36px;object-fit:contain;flex:none;}
.scene-node-grok{flex-direction:column;gap:4px;padding:6px 8px;}
.scene-toolbar{grid-area:2 / 1;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:64px;}
.scene-selector{display:flex;align-items:center;gap:12px;}
.scene-selector button{min-height:44px;padding:8px 0;color:var(--scene-muted);font-size:11px;}
.scene-selector button[aria-pressed=true]{color:var(--scene-ink);text-decoration:underline;text-underline-offset:5px;}
.scene-build{font-size:12px;text-decoration:none;background:#f0f0ee;border-radius:18px;min-height:38px;padding:9px 14px;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;}
.scene-build:hover{background:#e5e5e1;}#scene-inspect{justify-self:end;min-height:44px;display:flex;gap:16px;align-items:center;}
#scene-inspector{box-sizing:border-box;width:min(840px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:32px;border:1px solid #deded8;color:var(--ink);background:var(--paper);}
#scene-inspector::backdrop{background:rgb(255 255 255 / .9);}
.inspector-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px;}.inspector-header h2{font-size:28px;letter-spacing:-.04em;margin:0;}#scene-close{min-height:44px;flex:none;}
.inspector-status{font-size:13px;line-height:1.6;color:var(--muted);max-width:52ch;margin-bottom:32px;}
.scene-console{padding:0 0 28px;min-width:0;}#scene-replay{min-height:44px;margin-top:10px;}
.scene-caption{display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:baseline;}
#scene-detail-name{font-size:16px;}.scene-caption p{grid-row:2;grid-column:1 / -1;font-size:14px;line-height:1.5;color:var(--scene-muted);margin:0;max-width:48ch;}
.scene-caption a{grid-column:2;grid-row:1;font-size:12px;min-height:32px;}
.scene-controls{margin-top:22px;border-block:1px solid #deded8;scroll-margin-top:30px;}
.scene-controls summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;font-size:13px;list-style:none;}
.scene-controls summary::-webkit-details-marker{display:none;}.scene-controls[open] summary span{transform:rotate(45deg);}
.scene-demo{margin:8px 0 16px;}.scene-demo-controls{display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
.demo-label{display:none;}.scene-demo-controls button{min-height:44px;min-width:44px;padding:8px;font-size:12px;}
.led-choice{display:grid;place-items:center;}.led-choice span{display:block;width:14px;height:14px;background:var(--swatch);border-radius:50%;}
.led-choice[aria-pressed=true] span{outline:1px solid var(--scene-ink);outline-offset:4px;}
.demo-text[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px;}.scene-demo-controls button:hover{background:#edede6;}
#scene-feedback{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--scene-muted);}
.scene-evidence{font-size:11px;color:var(--scene-muted);margin:14px 0 0;}.simulation-mark{display:none;}
.scene-noscript{grid-column:1 / -1;font-size:14px;}.home-scene[data-disconnected] .scene-stage{opacity:.62;}
.scene-node-layer,.scene-console,.playground-tools details{display:none;}.scene-ready .scene-static-fallback{display:none;}.scene-ready .scene-node-layer{display:block;}.scene-ready .scene-console{display:block;}.scene-ready .playground-tools details{display:block;}
.home-workbench{border-top:1px solid var(--line);scroll-margin-top:24px;}
.home-workbench>summary{cursor:pointer;min-height:76px;display:flex;align-items:center;justify-content:space-between;font-size:15px;list-style:none;}
.home-workbench>summary:after{content:'+';font-size:22px;}.home-workbench[open]>summary:after{content:'−';}
.home-workbench>summary::-webkit-details-marker{display:none;}
.builder-paths,.home-activity{border-top:1px solid var(--line);padding:64px 0;scroll-margin-top:32px;}
.builder-paths .eyebrow,.home-activity .eyebrow{display:none;}
.builder-paths h2,.home-activity h2{font-size:clamp(36px,4vw,54px);margin:0 0 32px;}
.builder-paths .path-row{grid-template-columns:40px minmax(0,1fr) auto;padding:28px 0;}
.home-activity{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;}
.home-activity h2{grid-column:1;grid-row:1 / 4;}.home-activity p{grid-column:2;margin:0 0 24px;color:var(--muted);max-width:40ch;}.home-activity a{font-size:14px;margin-right:28px;min-height:44px;display:inline-flex;align-items:center;}
.home-activity>a{grid-column:2;justify-self:start;}
.home-proof{padding:48px 0;border-top:1px solid var(--line);}.home-proof h2{font-size:clamp(32px,4vw,54px);}.home-proof img{display:block;width:100%;max-width:800px;height:auto;margin:24px 0;}

@media(max-width:1100px){.scene-intro{align-self:start;margin-top:24px;}.scene-stage{width:min(850px,calc((100svh - 244px)*1.4286),92%);}}
@media(max-width:600px){
 .home-page{grid-template-rows:68px 1fr auto;}.home-page main#main{padding:0 20px;}.home-scene{min-height:calc(100svh - 138px);grid-template-rows:auto 1fr auto;}
 .scene-intro{grid-area:1 / 1;margin-top:18px;max-width:250px;}.scene-intro h1{font-size:12px;max-width:250px;}.scene-intro p{display:none;}
 .scene-stage{grid-area:2 / 1;width:100%;margin:24px 0;}.scene-node{font-size:9px!important;padding:6px;}.node-grok-mark{width:30px;height:30px;}
 .scene-toolbar{grid-area:3 / 1;grid-template-columns:1fr 1fr;gap:8px 20px;padding:0 0 10px;}.scene-selector{grid-column:1 / -1;justify-content:center;gap:24px;}.scene-selector button{font-size:10px;}.scene-build{justify-self:start;font-size:11px;}#scene-inspect{font-size:11px;}
 #scene-inspector{padding:20px;max-height:calc(100dvh - 24px);}.inspector-header h2{font-size:24px;}.inspector-header{gap:12px;}.scene-caption{column-gap:10px;}.scene-caption a{font-size:11px;}.scene-caption p{font-size:13px;}
 .builder-paths{padding:40px 0;}.builder-paths .path-row{grid-template-columns:24px minmax(0,1fr);gap:12px;}.builder-paths .path-row a{grid-column:2;justify-self:start;}.builder-paths h2{font-size:34px;}.home-workbench>summary{font-size:14px;}
}
@media(max-height:500px) and (min-width:601px){.home-page{grid-template-rows:52px 1fr auto;}.home-scene{min-height:calc(100svh - 96px);}.scene-intro{margin-top:12px;max-width:170px;}.scene-intro h1{font-size:12px;}.scene-stage{width:min(70%,calc((100svh - 176px)*1.4286));margin:12px 0;}.scene-toolbar{min-height:44px;}}
@media(prefers-reduced-motion:reduce){.scene-node{transition:none;}}html[data-reduced-motion] .scene-node{transition:none;}
.playground-return{display:inline-flex;align-items:center;min-height:44px;font-size:13px;}
.docs-entry-paths{display:flex;flex-wrap:wrap;gap:8px 26px;margin:30px 0 45px;border-block:1px solid var(--line);padding:14px 0;}
.docs-entry-paths a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid var(--line);}
.component-directory[id="components"]{scroll-margin-top:100px;}

.scene-customize-link{display:inline-block;font-size:12px;margin:0 0 8px;text-underline-offset:4px;}
.playground-workbench{display:grid;grid-template-columns:32% 1fr;gap:8%;margin:40px 5.7% 100px;padding-top:50px;border-top:1px solid #dadad3;scroll-margin-top:100px;}
.playground-intro h2{font-size:clamp(36px,4vw,58px);font-weight:500;letter-spacing:-.05em;line-height:1.04;margin:24px 0;}
.playground-intro p{font-size:16px;line-height:1.6;color:#73736e;}
.playground-workbench button,.playground-workbench input{font:inherit;}
.playground-workbench button{background:transparent;border:0;padding:12px 0;min-height:44px;cursor:pointer;color:#1b1b1a;font-size:13px;text-underline-offset:5px;}
.playground-workbench button:hover,.playground-workbench a:hover{text-decoration:underline;}
.playground-workbench :is(button,input,a,summary):focus-visible{outline:2px solid #1b1b1a;outline-offset:4px;}
.playground-tools details{border-bottom:1px solid #dadad3;padding:0 0 18px;margin:0 0 24px;}
.playground-tools summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-size:16px;list-style:none;}
.playground-tools summary::-webkit-details-marker{display:none;}
.playground-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin:24px 0;}
.playground-fields>label{display:block;font-size:12px;color:#62625c;}
.playground-fields input:not([type=checkbox]){display:block;box-sizing:border-box;width:100%;margin-top:8px;min-height:44px;border:0;border-bottom:1px solid #bcbcb3;background:#fbfbf8;border-radius:0;padding:8px;color:#20201c;}
.playground-fields input[type=color]{padding:5px;max-width:90px;}
.playground-fields input[type=range]{padding:0;background:transparent;accent-color:#20201c;}
.playground-fields output,.field-unit{float:right;font:11px 'Courier New',monospace;}
.playground-checks{display:flex;flex-direction:column;gap:12px;justify-content:center;font-size:12px;}
.playground-checks label{display:flex;gap:10px;align-items:center;min-height:44px;}
.playground-checks input{width:18px;height:18px;accent-color:#20201c;}
.playground-actions{display:flex;flex-wrap:wrap;gap:25px;}
.playground-actions button:first-child,.playground-export{border-bottom:1px solid #20201c!important;}
.playground-note{font-size:12px!important;line-height:1.7!important;color:#73736e;max-width:650px;}
.playground-reports{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.playground-reports>*{min-width:0;}
.playground-reports h3{font-size:12px;font-weight:400;}
.playground-reports pre{font-size:11px;line-height:1.65;overflow:auto;max-height:290px;padding:16px;background:#f7f7f2;}
#playground-phase{font:11px/1.7 'Courier New',monospace;color:#62625c;}
.playground-kit{display:grid;grid-template-columns:1fr 180px;gap:24px;margin:34px 0;}
.playground-kit h3{font-size:26px;font-weight:500;letter-spacing:-.03em;margin:15px 0;}
.playground-kit p{font-size:14px;line-height:1.7;}
.playground-kit-links{display:flex;flex-direction:column;gap:16px;justify-content:center;font-size:12px;}
.playground-kit-links a{line-height:1.6;text-underline-offset:4px;}
@media(max-width:760px){.playground-workbench{grid-template-columns:1fr;margin:20px 7% 60px;padding-top:30px;gap:35px;}.playground-intro h2{margin:15px 0;}.playground-intro p br{display:none;}.playground-fields{gap:20px 18px;}.playground-kit{grid-template-columns:1fr;gap:4px;}.playground-kit-links{gap:12px;}.playground-reports{grid-template-columns:1fr;}.playground-tools summary{font-size:14px;}}
@media(max-width:380px){.playground-fields{grid-template-columns:1fr;}}

#playground-export-preview{margin:20px 0;}
#playground-export-preview label{font-size:12px;}
#playground-export-json{display:block;box-sizing:border-box;width:100%;margin:10px 0;border:1px solid #dadad3;padding:15px;background:#f7f7f2;color:#20201c;font:11px/1.7 'Courier New',monospace;resize:vertical;}
.playground-workbench [hidden]{display:none!important;}

.home-scene{scroll-margin-top:88px;}
.home-workbench>summary>span{display:none;}
.home-workbench .playground-workbench{margin:0 0 40px;border:0;padding:24px 0;}

.inspector-header{position:sticky;top:-32px;z-index:2;background:var(--paper);padding-block:12px;margin-top:-12px;}
@media(max-width:600px){.inspector-header{top:-20px;}}

/* Scene selection is separate from the device illustration's route controls. */
.home-scene [hidden]{display:none!important;}
.scene-gallery-nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:26px;}
.scene-gallery-nav button{min-height:36px;padding:8px 0;font-size:11px;color:var(--muted);}
.scene-gallery-nav button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;}
.alternate-stage{grid-area:1 / 1;justify-self:center;position:relative;width:min(900px,calc((100svh - 244px)*1.4286),76%);aspect-ratio:10 / 7;min-width:0;margin:24px 0;}
.scene-gallery-hint{font:10px/1.5 'Courier New',monospace;color:var(--muted);margin:0;max-width:28ch;}
@media(max-width:1100px){.alternate-stage{width:min(850px,calc((100svh - 244px)*1.4286),92%);}.scene-gallery-nav{margin-top:12px;}}
@media(max-width:600px){.scene-gallery-nav{flex-direction:row;gap:16px;margin-top:10px;}.scene-gallery-nav button{font-size:10px;}.scene-index{display:none;}.scene-stage,.alternate-stage{grid-area:2 / 1;width:100%;margin:0;}.scene-gallery-hint{grid-column:1 / -1;justify-self:center;max-width:none;}.home-scene{min-height:calc(100svh - 155px);}}
@media(max-height:500px) and (min-width:601px){.alternate-stage{width:min(70%,calc((100svh - 176px)*1.4286));margin:12px 0;}.scene-gallery-nav{margin-top:10px;gap:0;}.scene-gallery-nav button{min-height:30px;font-size:10px;}}