:root{font-family:Arial,Helvetica,sans-serif;color:#262a2e;background:#eef0f2;font-synthesis:none;--line:#d8dcdf;--muted:#666e76;--good:#267348;--bad:#a63139}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #247cbb;outline-offset:4px}button{border:1px solid var(--line);background:#fff;color:inherit;border-radius:8px;padding:11px 16px}a{color:inherit;text-decoration:none}.toolbar{padding:24px 4vw;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);gap:20px}.eyebrow{font-size:10px;letter-spacing:1.3px;color:var(--muted);font-weight:700}.toolbar h1{font-size:22px;font-weight:500;margin:6px 0 0}.toolbar h1 span{font-size:12px;color:var(--muted);vertical-align:middle}.toolbar nav{display:flex;align-items:center;gap:20px;font-size:12px}.notice{margin:20px 4vw 0;padding:12px 16px;border:1px solid #ccd2d7;border-radius:8px;color:#586069;font-size:12px;line-height:1.6;background:#f8f9fa}.workspace{display:grid;grid-template-columns:minmax(330px,420px) minmax(400px,680px);justify-content:center;gap:5vw;padding:24px 4vw 48px}.panel-label{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;margin:0 0 12px;gap:10px}.touch-host{background:#fff;border:1px solid #cdd2d6;box-shadow:0 18px 60px #1e28370b;border-radius:13px;overflow:hidden}.touch{position:relative;aspect-ratio:9/16;container-type:inline-size;overflow:hidden;background:white;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}.touch button{font-size:3cqw}.touch h2{font-size:6.8cqw;line-height:1.12;letter-spacing:-.16cqw;font-weight:500;margin:3.5cqw 0}.touch p{font-size:3.3cqw;line-height:1.5;color:#596169}.touch .step{font-size:2.5cqw;letter-spacing:.13cqw;font-weight:700;color:#737b83}.touch-bar{display:flex;align-items:center;justify-content:space-between;padding:5cqw 6cqw;border-bottom:1px solid #e8eaec;font-size:2.8cqw}.touch-bar button{border:0;padding:1.4cqw 0;background:transparent;font-size:2.8cqw}.screen-content{padding:6cqw}.menu{padding:15cqw 8cqw;display:flex;flex-direction:column;height:100%}.menu h2{font-size:12cqw;margin-top:9cqw}.menu p{max-width:75cqw;font-size:3.8cqw}.menu-actions{display:grid;gap:4cqw;margin-top:auto}.primary,.secondary{min-height:12cqw;width:100%;font-size:3.5cqw!important;display:block;border-radius:2cqw;padding:3cqw 5cqw}.primary{background:#333b42;color:#fff;border-color:#333b42}.secondary{background:#fff;border-color:#bdc4c9}.wireframe-label{font-size:2.4cqw;color:#91979e;text-align:center;margin-top:9cqw}.ingredients{display:grid;gap:2.5cqw;margin-top:5cqw}.training-grid{grid-template-columns:repeat(2,1fr)}.game-grid{grid-template-columns:repeat(3,1fr);gap:2cqw}.ingredient{touch-action:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5cqw;text-align:center;min-height:15cqw;padding:3cqw 1cqw!important;border-radius:2cqw;border:1px solid #d2d7db;background:#f8f9fa;animation:appear .32s both;animation-delay:var(--delay);will-change:transform}.ingredient span{font-size:3cqw;font-weight:500}.ingredient small{font-size:2.3cqw;color:#7a8288}.ingredient img{width:10cqw;height:10cqw;object-fit:contain;pointer-events:none}.ingredient.selected,.ingredient.watched{border-color:#7eb994;background:#eff8f1}.ingredient.selected{box-shadow:0 0 15px #39895532}.ingredient.added{opacity:.35}.ingredient.dragging{z-index:20;box-shadow:0 10px 24px #26354238;transition:none;animation:none;pointer-events:none}.training-tip{margin-top:5cqw}.touch-footer{padding:0 6cqw 6cqw;margin-top:auto}.bowl{margin-top:6cqw;border:2px dashed #b3bbc2;border-radius:5cqw;min-height:30cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4cqw;gap:2cqw;transition:background .15s,border-color .15s}.bowl strong{font-size:3cqw;letter-spacing:.3cqw;color:#69737c}.bowl>span{font-size:2.5cqw;color:#8b9298}.bowl.over-good{background:#e3f7e9;border-color:#369456;box-shadow:0 0 30px #2f9c6340}.bowl.over-bad{background:#fbe9e9;border-color:#b94747;box-shadow:0 0 30px #c3454540}.bowl-items{display:flex;gap:1cqw;flex-wrap:wrap;justify-content:center}.bowl-chip{border:1px solid #cbd2d7;border-radius:2cqw;padding:.8cqw 1.6cqw;font-size:2cqw;background:#fff;animation:appear .25s}.result{padding:10cqw 8cqw;display:flex;flex-direction:column;gap:4cqw;flex:1;justify-content:center;text-align:center}.result .primary{margin-top:6cqw}.result p{font-size:3.7cqw;margin:0}.result small{font-size:2.5cqw;color:#848b91}.result-mark{border:1px solid #cbd7ce;border-radius:50%;width:24cqw;height:24cqw;display:grid;place-items:center;align-self:center;font-size:5cqw;color:#386d46;background:#f4f8f5}.modal-backdrop{position:absolute;inset:0;background:#26313b88;backdrop-filter:blur(4px);display:flex;align-items:center;padding:6cqw;z-index:30}.card{position:relative;background:#fff;border-radius:3cqw;padding:10cqw 7cqw 7cqw;width:100%;box-shadow:0 15px 50px #202b3340;animation:appear .2s}.card-close{position:absolute;right:3cqw;top:2cqw;border:0;background:transparent;padding:0 2cqw;font-size:8cqw!important;font-weight:300}.card h2{font-size:7cqw}.card p{font-size:3.7cqw}.card>.primary{margin-top:7cqw}.card>.secondary{margin-top:3cqw}.card img{max-width:30cqw;max-height:30cqw;object-fit:contain}.card-kind{font-weight:600}.good{color:var(--good)!important}.bad{color:var(--bad)!important}.led-stage{width:100%;aspect-ratio:1;display:grid;place-items:center;background:#e5e8eb;border-radius:12px;border:1px solid #d9dfe3;padding:5%}.led-frame{position:relative;overflow:hidden;background:white;width:100%;aspect-ratio:1;box-shadow:0 16px 50px #29344015}.led-frame.circle{border-radius:50%}.led-frame video{width:100%;height:100%;display:block;object-fit:contain;transform-origin:center}.boundary{position:absolute;inset:0;border:1px dashed #ec2530;opacity:.75;border-radius:50%;pointer-events:none}.video-error{position:absolute;inset:15%;background:#fffffff0;border:1px solid #d8dde1;align-content:center;text-align:center;font-size:13px;line-height:1.6;padding:20px}.video-error[hidden]{display:none}.playback{display:flex;justify-content:space-between;align-items:center;margin-top:24px;gap:20px}.playback h2{font-size:20px;font-weight:500;margin:7px 0}.playback button{font-size:12px}.video-progress{height:3px;background:#d7dce1;margin:16px 0 22px}.video-progress i{display:block;height:100%;width:0;background:#78838e}.calibration{background:#f8f9fa;border:1px solid var(--line);border-radius:8px;padding:16px;font-size:12px}.calibration summary{cursor:pointer;font-weight:600}.calibration label{display:flex;align-items:center;gap:8px;margin-top:16px}.calibration p{font-size:11px;line-height:1.7;color:var(--muted)}.calibration input[type=range]{width:40%;accent-color:#505f6e}.session-info{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);padding-top:22px;margin-top:24px}.session-info p{font-size:12px;margin:8px 0}.hardware-note{font-size:11px;color:#8a9299;line-height:1.6;margin-top:22px}.connection[data-status=error],.connection[data-status=reconnecting]{color:#a63139}.boot-error{max-width:600px;margin:15vh auto;padding:25px}.boot-error p{line-height:1.7}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#252c33;color:white;padding:15px;border-radius:10px}body[data-view=touch] .toolbar,body[data-view=touch] .notice,body[data-view=touch] .panel-label,body[data-view=touch] .led-panel{display:none}body[data-view=touch] .workspace{display:block;padding:0;height:100dvh}body[data-view=touch] .touch-panel{height:100%;display:flex;justify-content:center}body[data-view=touch] .touch-host{height:100%;aspect-ratio:9/16;border:0;border-radius:0}body[data-view=touch] .touch{height:100%;width:auto}body[data-view=led] .touch-panel,body[data-view=led] .toolbar,body[data-view=led] .notice,body[data-view=led] .panel-label,body[data-view=led] .playback,body[data-view=led] .video-progress,body[data-view=led] .calibration,body[data-view=led] .session-info,body[data-view=led] .hardware-note{display:none}body[data-view=led]{background:black}body[data-view=led] .workspace{display:block;padding:0;height:100dvh}body[data-view=led] .led-panel{height:100%}body[data-view=led] .led-stage{height:100%;width:100%;aspect-ratio:auto;background:black;padding:0;display:flex;justify-content:center;border:0;border-radius:0}body[data-view=led] .led-frame{height:min(100vw,100dvh);width:min(100vw,100dvh);align-self:center;box-shadow:none}@keyframes appear{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@media(max-width:850px){.workspace{grid-template-columns:minmax(290px,390px);gap:32px;padding-top:20px}.toolbar{align-items:flex-start}.toolbar nav{flex-wrap:wrap;justify-content:flex-end;gap:12px;max-width:180px}.toolbar h1{font-size:18px}.notice{font-size:11px}.led-stage{padding:3%}.panel-label{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important}}
.workspace{--stand-height:max(480px,calc(100dvh - 220px));grid-template-columns:min(420px,calc(var(--stand-height) * .5625)) min(680px,var(--stand-height))}@media(max-width:850px){.workspace{grid-template-columns:minmax(290px,390px)}}
.touch[data-enter=no] .ingredient{animation:none}
button,a{touch-action:manipulation}.ingredient{touch-action:none}
.touch.figma-design{container-type:inline-size;background:#ebebeb}.design-scene{display:block;width:100%;height:100%;flex:1;min-height:0;user-select:none}.figma-action{cursor:pointer;touch-action:manipulation}.figma-action:focus-visible,.figma-ingredient:focus-visible{outline:3px solid #247cbb;outline-offset:4px}.figma-ingredient{cursor:grab;touch-action:none;transition:opacity .2s,filter .2s}.figma-ingredient.added{opacity:.25;cursor:default}.figma-ingredient.selected,.figma-ingredient.watched{filter:drop-shadow(0 0 14px #2cbe5c)}.figma-ingredient.dragging{cursor:grabbing;filter:drop-shadow(0 16px 12px #0005);transition:none}.figma-bowl.over-good{filter:drop-shadow(0 0 20px #17b64d)}.figma-bowl.over-bad{filter:drop-shadow(0 0 20px #d32638)}.design-scene .bowl-chip{animation:none}.map-placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;gap:5cqw;padding:10cqw;text-align:center}.map-placeholder h2{font-size:8cqw}.map-placeholder p{font-size:4cqw}
@keyframes figmaAppear{from{opacity:0}to{opacity:1}}.touch[data-enter=yes] .figma-ingredient{animation:figmaAppear .45s backwards;animation-delay:var(--delay)}.figma-action:focus:not(:focus-visible){outline:none}
.touch.figma-design,.design-scene{touch-action:none}
.figma-action:focus,.figma-ingredient:focus{outline:none;box-shadow:none}
html[data-input=keyboard] .figma-action:focus-visible,html[data-input=keyboard] .figma-ingredient:focus-visible{outline:3px solid #247cbb;outline-offset:5px}
.ingredient-art{transform-box:fill-box;transform-origin:center;transition:transform var(--grab-ms,220ms) cubic-bezier(.2,.75,.2,1)}
.figma-ingredient.grabbed .ingredient-art{transform:scale(var(--grab-scale,1.24))}
.figma-ingredient.grabbed{filter:drop-shadow(0 13px 10px #0003)}
.figma-ingredient.dragging{transition:filter .22s;filter:drop-shadow(0 16px 12px #0003)}
.bowl-chip{transform-box:fill-box;transform-origin:center;pointer-events:none}
.collected-nutrient{pointer-events:none}
.global-exit{cursor:pointer}
#return-target.available{fill:#22ac4908;stroke:#72b385;stroke-width:2;stroke-dasharray:12 10}.home-ghost.return-preview{opacity:.5;filter:drop-shadow(0 0 12px #27a94c)}
.led-frame video[hidden]{display:none}
.touch[data-enter=yes] .figma-ingredient.grabbed{animation:none;opacity:1}
.motion-circle{cursor:grab;touch-action:none;transition:filter .24s}.motion-circle .source-scale{transition:transform .38s cubic-bezier(.2,.7,.2,1)}.motion-circle.watched{filter:drop-shadow(0 0 12px #20bd50)}.motion-circle.selected{filter:drop-shadow(0 0 15px #20bd50)}.motion-circle.grabbed{filter:drop-shadow(0 14px 10px #0003);cursor:grabbing}.motion-circle.grabbed .ingredient-art{transform:scale(1.24)}.home-ghost{opacity:.13;pointer-events:none}.collected-nutrient{pointer-events:auto}.button-face{transform-box:fill-box;transform-origin:center;transition:transform .12s cubic-bezier(.2,.7,.2,1),opacity .12s}.pressed .button-face{transform:scale(.965);opacity:.82}#base-layer,#motion-layer,#overlay-layer{transition:opacity .12s}.screen-leaving #base-layer,.screen-leaving #motion-layer{opacity:.15}.card-leaving #overlay-layer{opacity:0}#return-target.active{fill:#22ac4912;stroke:#32a455;stroke-width:3;stroke-dasharray:12 10}#overlay-layer[role=dialog]{pointer-events:auto}html[data-input=keyboard] .motion-circle:focus-visible{outline:3px solid #247cbb;outline-offset:5px}

/* Preserve the previous composition throughout preparation. */
.screen-leaving #base-layer,.screen-leaving #motion-layer{opacity:1}
.scene-status{position:absolute;z-index:5;bottom:3%;left:5%;right:5%;padding:3cqw 4cqw;background:#fffffff2;border:1px solid #ddd;border-radius:3cqw;box-shadow:0 8px 25px #0001;font-size:3cqw;line-height:1.5;text-align:center}.scene-status[hidden]{display:none}.scene-status p{margin:0 0 2cqw;font-size:3cqw}.scene-status button{margin:1cqw;font-size:3cqw}.scene-status button[hidden]{display:none}#outgoing-layer{pointer-events:none}.background-frame{pointer-events:none}

/* Client presentation: only the two screen labels, no engineering chrome.
   Keep controls mounted for runtime listeners; they are not part of this view. */
.toolbar,.notice,.playback,.video-progress,.calibration,.session-info,.hardware-note,.boundary,.panel-label>span+span{display:none!important}
/* A border inside a fixed aspect-ratio box subtracts width and height unequally.
   Removing it keeps host and 9:16 scene identical, rather than cropping the art. */
.touch-host{border:0;background:#ebebeb}

/* 0.5.3 mobile preview scroll hotfix: kiosk and desktop retain their input policy. */
@media (max-width:850px) {
 body[data-view=demo] .touch.figma-design,
 body[data-view=demo] .design-scene { touch-action:pan-y; }
 /* Ingredient drag stays exclusive to the game, not native page scrolling. */
 body[data-view=demo] .motion-circle,
 body[data-view=demo] .figma-ingredient { touch-action:none; }
}
@media (max-width:850px) { body[data-view=demo] .motion-circle * { touch-action:none; } }
@media (max-width:850px) and (pointer:coarse) {
 body[data-view=demo] .design-scene,body[data-view=demo] .design-scene * {-webkit-tap-highlight-color:transparent;}
 body[data-view=demo] .motion-circle .source-scale {scale:1;transition:transform .38s cubic-bezier(.2,.7,.2,1),scale .38s cubic-bezier(.2,1.5,.45,1);}
 body[data-view=demo] .motion-circle.preview-pressed .source-scale {scale:.94;transition:scale .09s ease-out;}
}
@media (prefers-reduced-motion:reduce) {body[data-view=demo] .motion-circle .source-scale {transition:none!important;}}
@media (max-width:850px) and (pointer:coarse) {
 /* Do not combine the tap compression with the drag-only enlargement. */
 body[data-view=demo] .motion-circle.preview-pressed .ingredient-art {transform:scale(1);}
}

/* Same selected/watched semantics; avoid unreliable CSS drop-shadow on SVG in Safari. */
.training-state-glow{opacity:0;transition:opacity .24s;pointer-events:none}
.touch[data-screen=training] .motion-circle.selected,.touch[data-screen=training] .motion-circle.watched{filter:none}
.touch[data-screen=training] .motion-circle.selected .training-state-glow{opacity:1}
.touch[data-screen=training] .motion-circle.watched:not(.selected) .training-state-glow{opacity:.85}