/* Scene geometry is deliberately bespoke. UI colors, type and spacing use tokens. */
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body { background:var(--ground); color:var(--text); font-family:var(--body); font-size:var(--base); line-height:1.65; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; color:var(--text); }
a { color:var(--accent); text-underline-offset:.25em; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:var(--display); line-height:1.1; }
h1 { font-size:var(--heading); letter-spacing:-.035em; }
h2 { font-size:var(--title); letter-spacing:-.02em; }
h3 { font-size:var(--lg); }
p { max-width:65ch; }
button,a,input,textarea,select,[tabindex],[contenteditable=true] { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); background:var(--raised); border:var(--line) solid var(--control-line); color:var(--text); border-radius:var(--radius); font-size:var(--sm); font-weight:600; white-space:nowrap; text-decoration:none; }
.btn.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn.quiet { background:transparent; }
.btn:disabled { opacity:.55; cursor:default; }
.small { font-size:var(--sm); }
.micro { font-size:var(--xs); }
.muted { color:var(--muted); }
.mono { font-family:var(--mono); }
.tag { color:var(--accent); font:600 var(--xs)/1.5 var(--mono); letter-spacing:.055em; }
.toolbar { display:flex; align-items:center; gap:var(--space-2); }
.canvas-app { height:100dvh; display:grid; grid-template-rows:56px minmax(0,1fr); }
.workspace-bar { display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-4); border-bottom:var(--line) solid var(--hairline); background:var(--surface); z-index:30; }
.workspace-bar .brand { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; color:var(--text); }
.brand img { width:56px; height:32px; object-fit:contain; }
.workspace-title { padding-left:var(--space-4); border-left:var(--line) solid var(--hairline); font-size:var(--sm); }
.workspace-bar .status { margin-left:auto; color:var(--muted); font-size:var(--xs); }
.workspace-bar .btn { padding:var(--space-1) var(--space-3); }
.workspace-layout { min-height:0; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.workspace-sidebar { min-height:0; overflow:auto; padding:var(--space-4) var(--space-3); border-right:var(--line) solid var(--subtle-line); background:var(--surface); z-index:25; transition:transform var(--enter) var(--ease-out),opacity var(--enter) var(--ease-out); }
.workspace-sidebar h2 { font-family:var(--body); font-size:var(--base); margin:var(--space-1) var(--space-2) var(--space-4); }
.sidebar-label { font:var(--xs)/1.5 var(--mono); color:var(--muted); padding:var(--space-4) var(--space-2) var(--space-2); }
.space-button { display:block; width:100%; text-align:left; border:0; border-radius:var(--radius); background:transparent; padding:var(--space-2) var(--space-3); font-size:var(--sm); }
.space-button span { display:block; color:var(--muted); font-size:var(--xs); }
.space-button[aria-current=true] { background:var(--raised); }
.window-launcher { display:flex; justify-content:space-between; width:100%; border:0; border-left:2px solid transparent; background:transparent; text-align:left; padding:var(--space-2) var(--space-3); font-size:var(--sm); }
.window-launcher span { color:var(--muted); font-size:var(--xs); }
.window-launcher[aria-pressed=true] { border-color:var(--accent); background:var(--raised); }
.sidebar-bottom { border-top:var(--line) solid var(--hairline); margin-top:var(--space-5); padding:var(--space-4) var(--space-2); }
.sidebar-bottom .agent { display:flex; gap:var(--space-2); align-items:center; }
.agent img { width:24px; height:24px; border-radius:50%; }
.sidebar-bottom p { font-size:var(--xs); color:var(--muted); margin-top:var(--space-3); }
.sidebar-bottom .btn { margin-top:var(--space-4); }
.canvas-viewport { position:relative; overflow:hidden; background:var(--ground); min-width:0; min-height:0; touch-action:none; }
.canvas-viewport[data-tool=hand],.canvas-viewport[data-tool=hand] .frame-content,.canvas-viewport[data-tool=hand] .frame-handle { cursor:grab; }
.canvas-viewport[data-tool=hand] .frame-content { touch-action:none; }
.canvas-viewport.panning,.canvas-viewport.panning * { cursor:grabbing!important; user-select:none; }
.canvas-viewport.moving-frame,.canvas-viewport.moving-frame * { cursor:grabbing!important; user-select:none; }
.canvas-grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.canvas-grid circle { fill:var(--subtle-line); }
.canvas-world { position:absolute; inset:0 auto auto 0; width:2300px; height:1900px; transform-origin:0 0; will-change:transform; }
.canvas-world.camera-motion { transition:transform var(--camera-duration,240ms) var(--ease-in-out); }
.origin-label { position:absolute; left:40px; top:24px; color:var(--muted); font:var(--xs)/1.5 var(--mono); pointer-events:none; }
.empty-canvas { position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:var(--muted); gap:var(--space-3); pointer-events:none; }
.empty-canvas h1 { color:var(--text); font-size:var(--title); }
.canvas-frame { position:absolute; border:var(--line) solid var(--hairline); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.canvas-frame.is-focused { border-color:var(--accent); }
.canvas-tool[aria-pressed=true] { background:var(--raised); outline:var(--line) solid var(--accent); }
.canvas-tool kbd { font:var(--xs)/1 var(--mono); color:var(--muted); margin-left:var(--space-1); }
.frame-chrome { height:38px; flex-shrink:0; display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-3); background:var(--raised); border-bottom:var(--line) solid var(--hairline); }
.frame-handle { flex:1; border:0; padding:0; background:transparent; text-align:left; font:600 var(--xs)/1.5 var(--mono); min-width:0; cursor:grab; touch-action:none; }
.frame-handle strong { color:var(--text); font-weight:600; }
.frame-type { color:var(--muted); font:var(--xs)/1.5 var(--mono); flex-shrink:0; }
.frame-close { border:0; background:transparent; color:var(--muted); padding:var(--space-1); font:var(--xs)/1.5 var(--mono); }
.frame-content { min-height:0; flex:1; overflow:auto; touch-action:pan-y; }
.frame-foot { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4); background:var(--raised); border-top:var(--line) solid var(--hairline); font-size:var(--xs); color:var(--muted); }
.frame-foot .activity { margin-left:auto; }
.canvas-frame.hidden { visibility:hidden; opacity:0; pointer-events:none; }
.canvas-frame.closed { display:none; }
.workspace-sidebar.hidden { opacity:0; transform:translateX(-12px); pointer-events:none; }
.empty-canvas.hidden { display:none; }
.canvas-hud { position:absolute; left:var(--space-4); bottom:var(--space-4); right:var(--space-4); display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); z-index:20; pointer-events:none; }
.canvas-hud>div { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2); background:var(--surface); border:var(--line) solid var(--hairline); border-radius:var(--radius); pointer-events:auto; }
.canvas-hud .btn { padding:var(--space-1) var(--space-3); }
.canvas-hud .hint { color:var(--muted); font-size:var(--xs); max-width:380px; }
.canvas-hud .zoom-value { min-width:48px; text-align:center; font:var(--xs)/1.5 var(--mono); }
.page-content { padding:var(--space-5); }
.site-mini-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-6); }
.site-mini-nav img { width:64px; height:38px; object-fit:contain; }
.page-content h1 { margin-bottom:var(--space-4); }
.page-content h1 span { color:var(--accent); }
.page-content p { color:var(--muted); font-size:var(--sm); margin-bottom:var(--space-4); }
.page-content .toolbar { margin:var(--space-5) 0; }
.about-note { border-top:var(--line) solid var(--hairline); padding-top:var(--space-3); }
.feature-row { display:grid; grid-template-columns:30px 1fr; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:var(--line) solid var(--hairline); }
.feature-row:last-child { border-bottom:0; }
.feature-row>span { font:var(--sm)/1.5 var(--mono); color:var(--accent); }
.feature-row h3 { margin-bottom:var(--space-2); }
.feature-row p { margin:0; }
.field { display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--sm); margin:var(--space-4) 0; }
.field input,.field textarea,.field select,.chat-compose textarea { width:100%; border:var(--line) solid var(--control-line); border-radius:var(--radius); color:var(--text); background:var(--ground); padding:var(--space-2) var(--space-3); }
.field input:disabled { color:var(--muted); background:var(--raised); }
.notice { border-left:2px solid var(--accent); padding-left:var(--space-3); color:var(--muted); font-size:var(--sm); }
[contenteditable=true] { outline:var(--line) dashed var(--accent); outline-offset:3px; }
.art-editor { display:grid; grid-template-columns:145px minmax(0,1fr) 155px; height:100%; }
.art-layer-panel,.art-inspector { padding:var(--space-3); }
.art-layer-panel { border-right:var(--line) solid var(--hairline); }
.art-inspector { border-left:var(--line) solid var(--hairline); }
.panel-heading { font-size:var(--xs); color:var(--muted); margin-bottom:var(--space-3); }
.layer-row { display:flex; gap:var(--space-2); align-items:center; margin:var(--space-3) 0; font-size:var(--xs); }
input[type=checkbox] { accent-color:var(--accent); width:14px; height:14px; margin:0; }
.art-layer-panel .btn { font-size:var(--xs); padding:var(--space-1) var(--space-2); margin-top:var(--space-3); }
.art-center { min-width:0; display:flex; flex-direction:column; background:var(--ground); }
.art-canvas { flex:1; display:grid; place-items:center; min-height:0; }
.art-canvas svg { width:90%; max-height:230px; overflow:visible; }
.art-canvas text { fill:var(--text); }
.art-board-caption { padding:var(--space-3); font:var(--xs)/1.5 var(--mono); color:var(--muted); }
.art-inspector .field { font-size:var(--xs); margin:var(--space-3) 0; }
.art-inspector input { padding:var(--space-1) var(--space-2); font-size:var(--xs); }
.art-inspector input[type=range] { padding:0; accent-color:var(--accent); }
.art-inspector input[type=color] { height:30px; padding:var(--space-1); }
.art-inspector .btn { padding:var(--space-1) var(--space-2); font-size:var(--xs); width:100%; }
.game-stage { display:block; width:100%; height:250px; background:var(--ground); }
.game-details { padding:var(--space-4); display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); }
.game-details h3 { margin-bottom:var(--space-1); }
.game-details p { color:var(--muted); font-size:var(--xs); }
.flow-toolbar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:var(--line) solid var(--hairline); }
.flow-toolbar .btn { padding:var(--space-1) var(--space-3); }
.flow-graph { position:relative; width:760px; height:280px; overflow:hidden; }
.flow-edges { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.flow-edges path { stroke:var(--accent); stroke-width:2.5; fill:none; }
.flow-node { position:absolute; width:210px; border:var(--line) solid var(--hairline); background:var(--raised); border-radius:var(--radius); }
.node-title { padding:var(--space-2) var(--space-3); border-bottom:var(--line) solid var(--hairline); font:600 var(--xs)/1.5 var(--mono); }
.node-body { padding:var(--space-3); }
.node-body .field { margin:0 0 var(--space-3); font-size:var(--xs); }
.node-body textarea { min-height:50px; padding:var(--space-2); resize:vertical; }
.port-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); font-size:var(--xs); color:var(--muted); }
.port { width:17px; height:17px; border:2px solid var(--accent); padding:0; border-radius:50%; background:var(--ground); }
.port.selected { background:var(--accent); }
.flow-result { display:grid; place-items:center; min-height:70px; border:var(--line) solid var(--hairline); background:var(--ground); margin-bottom:var(--space-3); }
.flow-result svg { width:115px; height:60px; }
.flow-status { padding:var(--space-3) var(--space-4); font-size:var(--xs); color:var(--muted); }
.chat-panel { padding:var(--space-4); }
.chat-room { display:flex; align-items:center; justify-content:space-between; border-bottom:var(--line) solid var(--hairline); padding-bottom:var(--space-3); margin-bottom:var(--space-4); }
.chat-room h3 { font-size:var(--base); }
.message { display:flex; gap:var(--space-3); margin:var(--space-4) 0; }
.message img,.avatar-letter { width:26px; height:26px; border-radius:50%; flex-shrink:0; }
.avatar-letter { background:var(--raised); color:var(--accent); display:grid; place-items:center; font-size:var(--xs); font-weight:600; }
.message strong { font-size:var(--sm); }
.message time { color:var(--muted); font-size:var(--xs); margin-left:var(--space-2); }
.message p { font-size:var(--sm); color:var(--muted); margin-top:var(--space-1); }
.attachment-link { display:inline-block; color:var(--accent); background:transparent; border:0; padding:0; font-size:var(--sm); text-decoration:underline; text-underline-offset:.2em; }
.chat-compose { border-top:var(--line) solid var(--hairline); padding:var(--space-3) var(--space-4); }
.chat-compose textarea { height:56px; resize:vertical; font-size:var(--sm); }
.chat-compose .toolbar { justify-content:space-between; margin-top:var(--space-2); }
.chat-compose .btn { padding:var(--space-1) var(--space-3); }
.mobile-menu { display:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (hover:hover) and (pointer:fine) { .btn:hover,.window-launcher:hover,.space-button:hover { background:var(--raised); } .btn.primary:hover { background:var(--accent); opacity:.9; } }
@media(max-width:900px) { :root { --sidebar-width:11rem; }.workspace-bar .status { display:none; }.workspace-bar .toolbar { margin-left:auto; }.canvas-hud .hint { max-width:230px; } }
@media(max-width:600px) {
  .canvas-app { grid-template-rows:52px minmax(0,1fr); }.workspace-layout { display:block; position:relative; }
  .workspace-bar { padding:0 var(--space-3); gap:var(--space-2); }.workspace-title { display:none; }.workspace-bar .brand img { width:48px; }.workspace-bar .toolbar .review-link { display:none; }
  .mobile-menu { display:inline-flex; }.workspace-sidebar { position:absolute; left:0; top:0; bottom:0; width:245px; box-shadow:var(--shadow); transform:translateX(-100%); }.workspace-sidebar.mobile-open { transform:translateX(0); opacity:1; }
  .canvas-grid { display:none; }
  .canvas-viewport { width:100%; height:100%; }.canvas-world { width:100%; height:100%; transform:none!important; transition:none!important; }
  .origin-label { display:none; }.canvas-frame { display:none; left:var(--space-3)!important; top:var(--space-3)!important; width:calc(100% - var(--space-5))!important; height:calc(100% - 100px)!important; transform:none!important; }
  .canvas-frame.mobile-active:not(.closed):not(.hidden) { display:flex; }.canvas-frame.hidden { display:none; }.frame-handle { cursor:default; }
  .frame-type { font-size:var(--xs); }.canvas-hud { left:var(--space-3); right:var(--space-3); bottom:var(--space-3); }.canvas-hud .hint { display:none; }.canvas-hud .zoom-controls { display:none; }
  .page-content { padding:var(--space-4); }.site-mini-nav { margin-bottom:var(--space-5); }h1 { font-size:var(--heading); }.art-editor { grid-template-columns:100px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; }.art-inspector { grid-column:1 / -1; border-left:0; border-top:var(--line) solid var(--hairline); display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }.art-inspector .panel-heading { display:none; }.art-inspector .field { margin:0; }.art-inspector .btn { width:auto; }.art-canvas svg { max-height:180px; }.art-layer-panel { padding:var(--space-2); }.layer-row { font-size:var(--xs); gap:var(--space-1); }
  .game-stage { height:210px; }.game-details { display:block; }.game-details .toolbar { margin-top:var(--space-3); }.flow-toolbar { flex-wrap:wrap; }.flow-graph { height:470px; width:100%; }.flow-node { width:calc(100% - var(--space-6)); left:var(--space-4)!important; }.flow-edges { display:none; }.flow-node[data-node=brief] { top:var(--space-4)!important; }.flow-node[data-node=generator] { top:175px!important; }.flow-node[data-node=preview] { top:300px!important; }.node-body textarea { min-height:40px; }
}
@media(prefers-reduced-motion:reduce) { .workspace-sidebar { transition:opacity var(--fast) linear; }.canvas-world.camera-motion { transition:none; } }

[data-motion=reduce] .workspace-sidebar { transition:none; }
[data-motion=reduce] .canvas-world.camera-motion { transition:none; }