:root{color-scheme:dark;--ink:#e8f1ed;--muted:#adbec4;--gold:#ffc66a;--line:#35515e;--teal:#7de2d4}*{box-sizing:border-box}body{margin:0;background:#0b1b24;color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button,select{min-height:46px;border:1px solid #4c6976;border-radius:8px;background:#203c49;color:var(--ink);padding:9px 14px;cursor:pointer}button:hover{background:#2b4b57}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{border-color:var(--gold);background:#3e4946;color:#ffe0a5}button.primary{background:var(--gold);border-color:var(--gold);color:#142b35;font-weight:750}a{color:var(--gold);text-underline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid var(--teal);outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;border-bottom:1px solid var(--line);background:#10242e}.brand{text-decoration:none;font-weight:900;letter-spacing:.1em;color:var(--ink)}.brand span{display:block;font-size:10px;letter-spacing:.22em;color:var(--teal)}nav{display:flex;align-items:center;gap:20px;font-size:14px}nav a{display:inline-flex;align-items:center;min-height:44px}main{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:calc(100vh - 80px)}.workspace{padding:22px 24px;min-width:0}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:10px;letter-spacing:.15em;font-weight:800;color:var(--teal);margin:0 0 4px}h1{font-size:clamp(26px,3vw,36px);line-height:1.1;letter-spacing:-.03em;margin:0}h2{font-size:18px;margin:0}.localBadge{font-size:11px;color:#b6d9d2;border:1px solid #3b625d;padding:5px 9px;border-radius:20px;white-space:nowrap}.intro{margin:9px 0 18px;color:var(--muted);font-size:15px}.viewBar,.controls,.controls>div{display:flex;align-items:center;flex-wrap:wrap;gap:7px}.viewBar{margin-bottom:10px}.viewBar button{font-size:13px;padding:9px 13px;min-width:46px}.viewBar #fit{margin-left:auto}#stage{height:clamp(340px,54vh,690px);position:relative;border:1px solid #6e8a8d;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#f0f1eb,#c9d6d4);color:#28434d}#canvasHost,canvas{width:100%;height:100%;display:block}canvas{touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:25px}#empty p{margin:5px 0;font-size:14px;max-width:290px}#empty .cube{font-size:85px;line-height:1.2;font-weight:200;color:#668c96;transform:rotate(15deg)}#viewLabel{position:absolute;left:14px;bottom:12px;font-size:10px;letter-spacing:.15em;font-weight:800;background:#eff6efe0;color:#294651;padding:5px 8px;border-radius:5px;pointer-events:none}#dropHint{position:absolute;inset:8px;border:3px dashed #375f67;border-radius:9px;background:#e0eee8ed;display:grid;place-items:center;font-size:20px;font-weight:750;pointer-events:none}.controls{justify-content:space-between;margin-top:10px}.controls button{font-size:13px;min-width:46px}.gesture{font-size:12px;color:var(--muted);margin:10px 0 18px}.gesture span{display:block;font-size:11px;color:#8fa7af}.modelStrip{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:16px}.modelStrip h2{overflow-wrap:anywhere}.modelStrip>p{font-size:12px;color:var(--muted);text-align:right;margin:0}aside{border-left:1px solid var(--line);background:#122a35;padding:17px}summary{cursor:pointer;min-height:46px;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;list-style:none}summary::before{content:'▸';color:var(--teal)}details[open]>summary::before{content:'▾'}#console>summary{display:block;padding:0 0 12px;line-height:1.2}#console>summary::before{float:left;margin-right:8px}#console>summary>span{display:block;margin:6px 0 0 19px;font-size:9px;font-weight:600;letter-spacing:.13em;color:var(--muted)}.consoleBody section{padding:16px 0}.openCard{border-top:1px solid var(--line)}#openFile{width:100%;margin:8px 0 0}.small,.consoleBody p{font-size:12px;color:var(--muted)}#status{padding:10px 12px;background:#173a45;border-left:3px solid var(--teal);border-radius:3px;overflow-wrap:anywhere}#status.error{border-color:#ffac97;color:#ffcec0;background:#3a2b2c}.example{width:100%;display:flex;align-items:center;gap:9px;padding:8px;text-align:left;font-size:13px;background:#172f3b}.example img{object-fit:contain;border-radius:5px;background:#e6eddf;flex:0 0 64px}.example small{display:block;font-size:10px;color:var(--muted);font-weight:400}.example>span:last-child{margin-left:auto;color:var(--gold)}.sub{border-top:1px solid var(--line);padding:5px 0 8px}.sub>p{margin:6px 0 12px}.sub label,.appearance label{display:block;margin:7px 0;font-size:13px;color:var(--muted)}textarea{width:100%;font-size:16px;resize:vertical;min-height:120px;border:1px solid #4c6976;border-radius:6px;background:#0c222d;color:var(--ink);padding:10px}.sub button{width:100%;margin-top:8px}.appearance{border-top:1px solid var(--line)}.appearance select{width:100%;font-size:16px}.appearance button{width:100%;margin-top:9px}dl{font-size:12px;display:grid;grid-template-columns:auto 1fr;gap:5px 12px}dt{color:var(--muted)}dd{margin:0;text-align:right;overflow-wrap:anywhere}.footerActions{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:17px}.footerActions button{font-size:12px;flex:1}.boundary{margin-bottom:0}[hidden]{display:none!important}
@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 290px}.workspace{padding:19px 16px}aside{padding:14px}.localBadge{display:none}.viewBar{gap:5px}.viewBar button{padding:8px 11px}.viewBar #fit{margin-left:0}.controls{align-items:flex-start}.controls>div{gap:5px}}
@media(max-width:760px){header{padding:12px 16px;flex-wrap:wrap;gap:10px}nav{gap:14px;font-size:12px}nav button{font-size:13px}main{display:block}.workspace{padding:18px 12px}#stage{height:52vh;min-height:300px;max-height:530px}.viewBar button{flex:1;padding:7px 9px}.controls button{padding:8px 10px}aside{border-left:0;border-top:1px solid var(--line);padding:18px}.modelStrip{align-items:flex-start}.modelStrip>p{max-width:140px}.gesture{font-size:11px}.consoleBody{max-width:600px;margin:0 auto}#console>summary{min-height:48px}.example img{width:70px}.footerActions button{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#empty button{pointer-events:auto;margin-top:18px}

.baseCard{border-top:1px solid var(--line)}.baseCard label{display:block;margin:9px 0 6px;font-size:13px;color:var(--muted)}.baseCard select{width:100%;font-size:16px;min-width:0}.baseActions{display:grid;gap:8px}.baseActions button{width:100%}#baseRole{margin:8px 0 12px}#baseStatus{overflow-wrap:anywhere}

body.embedded header,body.embedded .heading,body.embedded .intro,body.embedded #baseChassis,body.embedded #example{display:none}body.embedded main{min-height:0}body.embedded #stage{height:420px;min-height:0;max-height:none}body.embedded .workspace{padding:18px}body.embedded .boundary{margin-bottom:0}@media(max-width:760px){body.embedded #stage{height:350px}body.embedded .workspace{padding:12px}}