/* Duet stage. Everything is sized in container-query width units (cqw) of the 16:9 stage. */
/* colours, type, space and paper come from tokens.css; these are the page's own */
:root { --vec-stroke: #1b8f3a; --panel: var(--story); --mono: "SF Mono", Menlo, Consolas, monospace; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { display: flex; align-items: center; justify-content: center; background: var(--yellow) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23111' stroke-opacity='.12' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><path d='M0 24 q10 -14 20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0'/><path d='M0 140 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14'/><path d='M96 56 l-10 -10 M110 50 l0 -14 M124 56 l10 -10 M90 70 l-14 0 M130 70 l14 0'/><path d='M30 70 l.01 0 M50 100 l.01 0' stroke-width='10'/><path d='M14 56 a18 18 0 0 1 36 0 M60 116 a14 14 0 0 0 28 0'/></g></svg>") 0 0 / 160px 160px repeat;
       animation: drift 27s linear infinite; }
@keyframes drift { to { background-position: -160px -160px; } }
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* the mat: a 16:9 plate letterboxed in the viewport; the stage sits inside it behind a keyline frame */
.mat { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16/9; container-type: inline-size; }
.hidden { display: none !important; }

/* the stage is a 16:9 box letterboxed in the viewport */
.stage { position: absolute; left: 3.5cqw; top: calc(50% - 26.16cqw); width: 93cqw; aspect-ratio: 16/9; background: #000; overflow: hidden;
         border-radius: var(--paper-radius); box-shadow: 0 0 0 var(--frame-stroke) var(--ink);
         container-type: inline-size; font-family: var(--story); color: var(--ink); user-select: none; }

/* picture layer */
.pic { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .45s ease; }
.base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.ov { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: visible; pointer-events: none; }
.ovimg { width: 176px; height: 240px; object-fit: fill; display: block; }
.defs { position: absolute; }
.mask { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* paint order inside the picture layer: a filtered <img> otherwise paints above its later siblings */
.base { z-index: 0; } .ovimg { z-index: 1; } .mask { z-index: 2; } svg.ov { z-index: 3; }
.base, .ovimg { filter: url(#levels) saturate(var(--sat, 1)); }
.stage.clean { --sat: 1.7; }
.stage.vector .base, .stage.vector .ovimg { visibility: hidden; }
.paper { fill: var(--paper); visibility: hidden; }
.stage.vector .paper { visibility: visible; }
.ov path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ov .ink path { stroke: var(--vec-ink, var(--ink)); stroke-width: var(--ink-w, 1.2); }
.ov .robot path { stroke: var(--vec-stroke, var(--robot)); stroke-width: var(--stroke-w, 1.4); }
.ov .robot path.queued { stroke-dasharray: 2 1.5; }
.ov .board rect { fill: none; stroke: var(--yellow); stroke-width: .8; }
.ov .ghost path { stroke: var(--vec-stroke, var(--robot)); stroke-width: 1.4; opacity: .35; }
.ov .ghost circle { fill: #000; stroke: var(--yellow); stroke-width: .8; }
.ov .ghost.idle { display: none; }
.ov .hand-ink path { stroke: var(--human); stroke-width: 1.2; opacity: .9; } .ov .hand-ink circle { display: none; }   /* the hand is the pen */

/* storybook chips */
.chip { display: inline-block; padding: .45cqw 1.4cqw; font-weight: 700; font-size: 1.6cqw; line-height: 1.2; border-radius: 999px;
        border: var(--paper-border) solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--story); }
.chip.red { background: var(--red); color: #fff; } .chip.green { background: var(--green); color: #fff; }
.chip.black, .chip.white { background: var(--paper); color: var(--ink); } .chip.yellow { background: var(--yellow); color: var(--ink); }
.logo-wrap .logo { display: block; height: 3.2cqw; width: auto; color: var(--ink); }
.logo-wrap.off .logo { filter: grayscale(1); opacity: .55; }
.tl { position: absolute; left: 1.6cqw; top: 1.4cqw; display: flex; gap: 1cqw; align-items: center; z-index: 3; }
.tr { position: absolute; right: 1.6cqw; top: 1.4cqw; display: flex; gap: 1cqw; align-items: center; z-index: 3; }
.tr #count { font-size: 1.9cqw; } .tr #count b { color: var(--red); }
.tr.cam { top: 5.4cqw; z-index: 5; }   /* a row below the chips and over the welcome: a dead camera must show from the zero state on */
button.chip { cursor: pointer; } #sound.on { background: var(--yellow); }
.cta { position: absolute; left: 1.6cqw; top: 7.2cqw; z-index: 3; display: flex; gap: 1cqw; align-items: center; }
.go { font: 700 2.4cqw/1.1 var(--story); padding: 1cqw 2.4cqw; border-radius: 999px;
      border: var(--frame-stroke) solid var(--ink); background: var(--green); color: #fff; cursor: pointer; box-shadow: .4cqw .4cqw 0 var(--ink); }
.go.home { position: absolute; left: 1.6cqw; top: 7.2cqw; z-index: 3; }
/* the artist picker: a chip beside Go that drops a column of artists during the human turn */
.pick { position: relative; }
#artist-btn { font-size: 1.7cqw; padding: .6cqw 1.5cqw; }
#artist-btn:disabled { cursor: default; box-shadow: .25cqw .25cqw 0 var(--ink); transform: none; opacity: .92; }
.menu { position: absolute; left: 0; top: calc(100% + .8cqw); z-index: 4; display: flex; flex-direction: column; gap: .5cqw; min-width: 26cqw; }
.menu .chip { display: flex; align-items: baseline; gap: .8cqw; text-align: left; font-size: 1.4cqw; font-weight: 500; padding: .55cqw 1.3cqw; white-space: nowrap; }
.menu .chip b { font-weight: 700; font-size: 1.6cqw; min-width: 8cqw; }
.menu .chip.on { background: var(--yellow); }
/* the demo's hand: a cartoon pointer over the stage, its fingertip on the point it is sent to; it never
   takes a click, so a real pointer can use the same buttons while it moves */
.hand { position: absolute; left: 50%; top: 50%; width: 5cqw; height: 6cqw; z-index: 5; pointer-events: none;
        transform: translate(-1.17cqw, -.17cqw); transform-origin: 1.17cqw .17cqw; transition: left .625s ease, top .625s ease, transform .15s ease;
        filter: drop-shadow(.3cqw .3cqw 0 rgba(0, 0, 0, .35)); }
.hand svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hand .skin { fill: var(--cream); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.hand .line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.hand .cuff { fill: var(--red); stroke: var(--ink); stroke-width: 3.5; }
.hand.press { transform: translate(-1.17cqw, -.17cqw) scale(.88); }
.hand .marker { display: none; } .hand.draw .marker { display: block; } .hand.draw .finger { display: none; }   /* only the pen draws */
.hand.draw { transition: transform .15s ease; }   /* the pen sits on the trace's point every frame; no glide to lag behind it */
/* the demo's robot arm: a green marker in a gripper on a link, its tip on the robot pen's point during the robot's turn */
.arm { position: absolute; left: 50%; top: 50%; width: 7cqw; height: 7cqw; z-index: 5; pointer-events: none; transform: translate(-.875cqw, -6.65cqw);
       filter: drop-shadow(.3cqw .3cqw 0 rgba(0, 0, 0, .35)); }
.arm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.arm .link, .arm .jaw { fill: var(--paper); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.arm .joint { fill: var(--green); stroke: var(--ink); stroke-width: 3; }
.arm .barrel { fill: var(--green); stroke: var(--ink); stroke-width: 2.5; }
.arm .band, .arm .tip { fill: var(--ink); }
.arm .grip { fill: var(--cream); }
.arm .tag { left: 4cqw; top: 5.6cqw; }
/* names: a caption pill on the hand, and one that rides the robot's pen dot */
.tag { position: absolute; font: 700 1.2cqw/1 var(--story); padding: .35cqw .8cqw; border: .25cqw solid var(--ink); border-radius: 999px;
       background: var(--paper); color: var(--ink); pointer-events: none; white-space: nowrap; }
.hand .tag { left: 3.4cqw; top: 5.4cqw; }
/* the turn clock: who is on and their seconds, over a bar that fills across the chip */
.clock { position: relative; overflow: hidden; }
.clock .fill { position: absolute; inset: 0; width: calc(var(--fill, 0) * 100%); background: var(--human); opacity: .25; transition: width .1s linear; }
.clock[data-who="robot"] .fill { background: var(--robot); }
.clock[data-who="paused"] .fill { animation: blink 1s ease-in-out infinite; }
.clock > b, .clock > span { position: relative; }
@media (prefers-reduced-motion: reduce) { .hand { transition: none; } .hand.press { transform: translate(-1.17cqw, -.17cqw); } }

/* bubbles: positioned by script, tail or dots toward the anchor */
.sub { position: absolute; width: 24cqw; z-index: 2; transition: left .35s ease, top .35s ease; }
body.crop .sub { width: 21cqw; }
.bubble { position: relative; border: var(--paper-border) solid var(--ink); border-radius: var(--paper-radius); padding: 1.8cqw 2.2cqw; font-size: 2.4cqw; font-weight: 700; line-height: 1.12; text-align: center; }
body.crop .bubble { font-size: 1.9cqw; padding: 1.3cqw 1.6cqw; }
.bubble p { margin: 0; }
.bubble.speech { background: var(--yellow); }
.bubble.speech::before, .bubble.speech::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border: 1.6cqw solid transparent; }
.bubble.speech:not(.right)::before { right: -2.6cqw; border-right: 0; border-left: 2.6cqw solid var(--ink); }
.bubble.speech:not(.right)::after { right: -1.55cqw; border-width: 1.1cqw; border-right: 0; border-left: 1.8cqw solid var(--yellow); }
.bubble.speech.right::before { left: -2.6cqw; border-left: 0; border-right: 2.6cqw solid var(--ink); }
.bubble.speech.right::after { left: -1.55cqw; border-width: 1.1cqw; border-left: 0; border-right: 1.8cqw solid var(--yellow); }
.bubble.thought { background: var(--paper); }
.bubble.thought::before, .bubble.thought::after { content: ""; position: absolute; background: var(--paper); border: var(--paper-border) solid var(--ink); border-radius: 50%; }
.bubble.thought:not(.right)::before { width: 2.2cqw; height: 2.2cqw; right: -2.6cqw; bottom: -1.2cqw; }
.bubble.thought:not(.right)::after { width: 1.2cqw; height: 1.2cqw; right: -4.6cqw; bottom: -2.9cqw; }
.bubble.thought.right::before { width: 2.2cqw; height: 2.2cqw; left: -2.6cqw; bottom: -1.2cqw; }
.bubble.thought.right::after { width: 1.2cqw; height: 1.2cqw; left: -4.6cqw; bottom: -2.9cqw; }
.bubble.thinking { animation: think 1.6s ease-in-out infinite; }
.bubble.thinking::before { animation: blink 1.6s ease-in-out infinite; } .bubble.thinking::after { animation: blink 1.6s ease-in-out .4s infinite; }
@keyframes think { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes blink { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* controls: a small corner button, and a panel over the bottom of the picture, laid out on a grid */
.corner { position: absolute; right: 1.6cqw; bottom: 1.4cqw; z-index: 6; display: flex; gap: .6cqw; align-items: center; }
body.controls .corner, body.diagnostics .corner { display: none; }
.gear { position: relative; z-index: 6; font: 700 1cqw/1 var(--story); letter-spacing: .1em; text-transform: uppercase;
        padding: .5cqw 1cqw; background: var(--paper); color: var(--ink); border: .25cqw solid var(--ink); border-radius: 999px; cursor: pointer; opacity: .8; }
.gear:hover { opacity: 1; }
.gear.icon { padding: .4cqw; display: flex; }
.gear.icon svg { width: 1.4cqw; height: 1.4cqw; display: block; }
.light { width: .9cqw; height: .9cqw; border-radius: 50%; border: .15cqw solid var(--ink); background: var(--red); }
.light.on { background: var(--green); }
.light.blink { background: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .light.on.blink { background: var(--green); } }
.panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 1cqw 1.6cqw 1cqw; background: rgba(255,255,255,.94);
         display: none; grid-template-columns: 5.5cqw repeat(12, minmax(0, 1fr)); column-gap: .6cqw; row-gap: .7cqw; align-items: center;
         border-top: var(--frame-stroke) solid var(--ink); font-family: var(--story); color: var(--ink); }
body.controls .panel { display: grid; }
.panel .lbl { grid-column: 1; font: 700 .85cqw/1 var(--story); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.g { display: flex; gap: .5cqw; align-items: center; min-width: 0; height: 2.4cqw; }
.s1 { grid-column: span 1; } .s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s12 { grid-column: span 12; }
.panel button, .panel a { flex: 1 1 0; min-width: 0; height: 100%; font: 700 .95cqw/1 var(--story); letter-spacing: .04em; text-transform: uppercase;
                          padding: 0 .7cqw; background: var(--paper); color: var(--ink); border: .2cqw solid var(--ink); border-radius: 999px; cursor: pointer; text-decoration: none;
                          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; }
.panel button.on { background: var(--yellow); color: var(--ink); }
.panel button:disabled { opacity: .35; cursor: default; }
.panel button.on:disabled { opacity: 1; }   /* "Ending…" is disabled but must stay readable */
.panel button.danger { background: var(--red); color: #fff; }
.panel button.hide { background: transparent; }
.g.pos { justify-content: center; font: 700 .95cqw/1 var(--story); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); border: .2cqw solid var(--ink); border-radius: 999px; }
.g .num { font: 700 1cqw/1 var(--story); color: var(--ink); min-width: 3.2cqw; text-align: right; margin-right: .5cqw; }
.g.count .num { flex: 1; text-align: center; }
.g.count button { flex: 0 0 2.4cqw; }
.lbl2 { font: 700 .75cqw/1 var(--story); color: var(--ink); text-transform: uppercase; letter-spacing: .08em; min-width: 4.2cqw; }
.g.slider input[type=range] { flex: 1; width: auto; min-width: 0; accent-color: var(--yellow); }
.g.fine { gap: 1cqw; }
.g.fine label.color { flex: 1; display: flex; align-items: center; gap: .4cqw; font: 700 .75cqw/1 var(--story); color: var(--ink); text-transform: uppercase; letter-spacing: .06em; min-width: 0; white-space: nowrap; }
.g.fine input[type=color] { width: 2.2cqw; height: 1.8cqw; padding: 0; border: .15cqw solid var(--ink); background: var(--paper); }
.g.fine input[type=range] { flex: 1; width: auto; min-width: 0; accent-color: var(--yellow); }
.sun { display: inline-block; width: 2cqw; text-align: center; color: var(--orange); font-size: 1.6cqw; transform: rotate(var(--dir, 0deg)); transition: transform .2s; }
.status { grid-column: 1 / -1; font: .85cqw/1.5 var(--mono); color: #555; min-height: 1.3cqw; }
.status b { color: var(--ink); font-weight: 600; } .status .err { color: var(--red); font-weight: 700; }

/* diagnostics drawer: everything the page streams, as a timeline and a log; it shares the bottom with the panel */
.diag { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 5; display: none; flex-direction: column; gap: .6cqw;
        padding: .8cqw 1.6cqw 1cqw; background: rgba(255,255,255,.94); border-top: var(--frame-stroke) solid var(--ink);
        font-family: var(--mono); color: var(--ink); }
body.diagnostics .diag { display: flex; }   /* the body class differs from the drawer's own class on purpose: a shared name would make the body match .diag { display: none } and hide the page */
.diag-head { display: flex; gap: 1cqw; align-items: center; height: 2.4cqw; flex: 0 0 auto; }
.diag .lbl { font: 700 .85cqw/1 var(--story); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.diag-summary { flex: 1; font: .85cqw/1.5 var(--mono); color: #555; }
.diag-summary b { color: var(--ink); font-weight: 600; } .diag-summary .err { color: var(--red); font-weight: 700; } .diag-summary .ok { color: var(--green); }
.diag-head button { flex: 0 0 auto; height: 100%; font: 700 .95cqw/1 var(--story); letter-spacing: .04em; text-transform: uppercase; padding: 0 .7cqw;
                    background: transparent; color: var(--ink); border: .2cqw solid var(--ink); border-radius: 999px; cursor: pointer;
                    box-shadow: .18cqw .18cqw 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.diag-head button:hover { transform: translate(-.12cqw, -.12cqw) rotate(-1deg); box-shadow: .32cqw .32cqw 0 var(--ink); }
.diag-head button:active { transform: translate(.12cqw, .12cqw); box-shadow: 0 0 0 var(--ink); }
.diag-timeline { width: 100%; aspect-ratio: 1000 / 92; flex: 0 0 auto; display: block; }
.diag-timeline text { font: 600 6px var(--mono); fill: var(--ink); }   /* viewBox units */
.diag-timeline text.tick { fill: #777; font-size: 5.5px; } .diag-timeline text.mark { font-size: 5px; }
.diag-timeline line.lane { stroke: rgba(0,0,0,.12); stroke-width: .6; }
.diag-timeline line.tick { stroke: rgba(0,0,0,.15); stroke-width: .6; stroke-dasharray: 2 2; }
.diag-timeline rect.mark { fill: var(--ink); } .diag-timeline rect.mark.err { fill: var(--red); }
.diag-timeline rect.band.ok { fill: var(--green); opacity: .45; } .diag-timeline rect.band.err { fill: var(--red); }
.diag-log { flex: 1 1 auto; min-height: 0; overflow: auto; border-top: .1cqw solid rgba(0,0,0,.15); }
table.log { width: 100%; border-collapse: collapse; table-layout: fixed; font: .8cqw/1.4 var(--mono); color: var(--ink); }
table.log th { position: sticky; top: 0; background: #fff; text-align: left; font-weight: 600; padding: .15cqw .5cqw; color: #555; }
table.log th:nth-child(1) { width: 7cqw; } table.log th:nth-child(2) { width: 3cqw; } table.log th:nth-child(3) { width: 9cqw; }
table.log th:nth-child(4) { width: 3.5cqw; } table.log th:nth-child(5) { width: 4.5cqw; }
table.log td { padding: .1cqw .5cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.log tr.row { cursor: pointer; } table.log tr.row:hover td { background: rgba(0,0,0,.04); }
table.log tr.err td { color: var(--red); } table.log tr.out td { background: rgba(255,212,0,.25); } table.log tr.ws td { color: #555; font-style: italic; }
table.log tr.detail td { white-space: normal; }
table.log tr.detail pre { margin: 0 0 .3cqw; font: .72cqw/1.35 var(--mono); white-space: pre-wrap; max-height: 12cqw; overflow: auto;
                          background: #f6f6f6; padding: .4cqw .6cqw; border-radius: .4cqw; }

/* welcome page: the zero state, over the picture and under the operator panel */
.key { color: #fff; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; }
.welcome { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; color: var(--ink);
           background: var(--yellow) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23111' stroke-opacity='.12' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><path d='M0 24 q10 -14 20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0 t20 0'/><path d='M0 140 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14 l10 -14 l10 14'/><path d='M96 56 l-10 -10 M110 50 l0 -14 M124 56 l10 -10 M90 70 l-14 0 M130 70 l14 0'/><path d='M30 70 l.01 0 M50 100 l.01 0' stroke-width='10'/><path d='M14 56 a18 18 0 0 1 36 0 M60 116 a14 14 0 0 0 28 0'/></g></svg>") 0 0 / 160px 160px repeat; animation: drift 27s linear infinite; }
.welcome-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s2); max-width: 64cqw; }
.welcome-inner > * { margin: 0; animation: pop .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.welcome-inner > :nth-child(1) { animation-delay: 0ms; }
.welcome-inner > :nth-child(2) { animation-delay: 120ms; }
.welcome-inner > :nth-child(3) { animation-delay: 240ms; }
.welcome-inner > :nth-child(4) { animation-delay: 360ms; }
.welcome-inner > :nth-child(5) { animation-delay: 480ms; } .welcome-inner > :nth-child(6) { animation-delay: 600ms; } .welcome-inner > :nth-child(7) { animation-delay: 720ms; }
.welcome-logo { width: 34cqw; height: auto; }
.welcome-title { font-size: var(--headline); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.welcome-line { font-size: var(--body); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.welcome-do { color: var(--red); font-weight: 700; }
.welcome-start { margin-top: var(--s2); font: 700 2.4cqw/1.1 var(--story); padding: 1.2cqw 3.2cqw; border-radius: 999px;
                 border: var(--frame-stroke) solid var(--ink); background: var(--green); color: #fff; cursor: pointer; box-shadow: .4cqw .4cqw 0 var(--ink); }
.welcome-start:disabled { background: var(--paper); color: var(--ink); opacity: .85; cursor: default; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .welcome, .welcome-inner > * { animation: none; } }

/* buttons: toy press. Every button rests on a hard ink shadow, lifts a step on hover with a small tilt,
   and squashes onto its shadow when pressed. Disabled buttons stay still. */
button.chip, .gear, .go, .welcome-start, .panel button, .panel a { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.panel button, .panel a { box-shadow: .18cqw .18cqw 0 var(--ink); }
.panel button:not(:disabled):hover, .panel a:hover { transform: translate(-.12cqw, -.12cqw) rotate(-1deg); box-shadow: .32cqw .32cqw 0 var(--ink); }
.panel button:not(:disabled):active { transform: translate(.12cqw, .12cqw); box-shadow: 0 0 0 var(--ink); }
.panel button.on { transform: translate(.12cqw, .12cqw); box-shadow: 0 0 0 var(--ink); }   /* a switch that is pressed in */
.panel button.on:not(:disabled):hover { transform: translate(.04cqw, .04cqw); box-shadow: .1cqw .1cqw 0 var(--ink); }
button.chip { box-shadow: .25cqw .25cqw 0 var(--ink); cursor: pointer; }
button.chip:hover, button.chip.hover { transform: translate(-.15cqw, -.15cqw) rotate(-1deg); box-shadow: .45cqw .45cqw 0 var(--ink); }
button.chip:active, button.chip.active { transform: translate(.15cqw, .15cqw); box-shadow: 0 0 0 var(--ink); }
.gear { box-shadow: .2cqw .2cqw 0 var(--ink); }
.gear:hover { transform: translate(-.12cqw, -.12cqw) rotate(-1deg); box-shadow: .35cqw .35cqw 0 var(--ink); }
.gear:active { transform: translate(.1cqw, .1cqw); box-shadow: 0 0 0 var(--ink); }
.go.home { background: var(--yellow); color: var(--ink); }
.go:hover, .go.hover, .welcome-start:not(:disabled):hover { transform: translate(-.2cqw, -.2cqw) rotate(-1.5deg); box-shadow: .7cqw .7cqw 0 var(--ink); }
.go:active, .go.active, .welcome-start:not(:disabled):active { transform: translate(.3cqw, .3cqw); box-shadow: .1cqw .1cqw 0 var(--ink); }
/* the two big ones wiggle once after they pop in */
@keyframes wiggle { 0% { rotate: 0deg; } 25% { rotate: -3deg; } 50% { rotate: 3deg; } 75% { rotate: -1.5deg; } 100% { rotate: 0deg; } }
.go.pop, .welcome-start.pop { animation: pop .45s cubic-bezier(.2, .7, .3, 1) backwards, wiggle .6s ease-out .45s; }
@media (prefers-reduced-motion: reduce) {
  button.chip, .gear, .go, .welcome-start, .panel button, .panel a { transition: none; }
  .go.pop, .welcome-start.pop { animation: none; }
}

/* developer mode (press D) */
body.dev [data-el]{outline:1px dashed rgba(39,67,227,.4);outline-offset:-1px;}
body.dev [data-el]:hover{outline:2px solid #2743E3;background:rgba(39,67,227,.07);cursor:crosshair;}
.dev-badge{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:2147483000;display:none;padding:7px 14px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#2743E3;border-radius:999px;box-shadow:0 6px 20px rgba(39,67,227,.35);}
body.dev .dev-badge{display:block;}
.dev-label{position:fixed;z-index:2147483001;display:none;pointer-events:none;padding:4px 8px;font:600 11px/1 system-ui,sans-serif;color:#fff;background:#1B221D;border-radius:6px;white-space:nowrap;}
.dev-toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(10px);z-index:2147483002;opacity:0;padding:9px 16px;font:600 12px/1 system-ui,sans-serif;color:#fff;background:#1B2FA8;border-radius:999px;transition:opacity .2s,transform .2s;pointer-events:none;}
.dev-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* replay mode: the showcase site's recording drives the page; nothing here moves a robot */
body.replay .live-only { display: none !important; }
a.chip { text-decoration: none; cursor: pointer; box-shadow: .25cqw .25cqw 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
a.chip:hover { transform: translate(-.15cqw, -.15cqw) rotate(-1deg); box-shadow: .45cqw .45cqw 0 var(--ink); }
.welcome-home { font-size: var(--caption); font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }