/* A shared ink vocabulary for the exhibition screen and the visitor's phone. */
:root{--paper:#faf9f4;--ink:#141917;--muted:#777971;--line:#deded4;--lilac:#173448;--cyan:#173448;--hot:#b73728;--symbol-red:#b73728;--symbol-blue:#173448}
.interface-glyph{display:block;position:relative;width:100%;height:100%;pointer-events:none}
.interface-glyph>img,.glyph-render,.glyph-render>svg{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;object-fit:contain;overflow:visible}
.has-glyph .glyph-render svg{stroke:none;fill:none}
.control-icon{display:block;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--ink)}
.control-icon .control-accent{stroke:var(--symbol-red)}
.control-icon g,.control-icon .control-shift{transform-origin:20px 25px;transition:transform 260ms cubic-bezier(.22,1,.36,1)}
.app #stageLabel[data-control-icon]{opacity:1}
:is(.symbol-action,.brand):focus-visible .control-fan-left{transform:rotate(-7deg)}
:is(.symbol-action,.brand):focus-visible .control-fan-right{transform:rotate(7deg)}
:is(.symbol-action,.brand):focus-visible .control-reels{transform:translateY(2px)}
:is(.symbol-action,.brand):focus-visible .control-inward-left{transform:translate(2px,2px)}
:is(.symbol-action,.brand):focus-visible .control-inward-right{transform:translate(-2px,2px)}
:is(.symbol-action,.brand):focus-visible .control-cross{transform:rotate(-8deg);transform-origin:20px 20px}
.brand:focus-visible .control-shift{transform:translateX(-2px)}
@media(hover:hover){
 .symbol-action:hover:not(:disabled) .control-fan-left{transform:rotate(-7deg)}
 .symbol-action:hover:not(:disabled) .control-fan-right{transform:rotate(7deg)}
 .symbol-action:hover:not(:disabled) .control-reels{transform:translateY(2px)}
 .symbol-action:hover:not(:disabled) .control-inward-left{transform:translate(2px,2px)}
 .symbol-action:hover:not(:disabled) .control-inward-right{transform:translate(-2px,2px)}
 .symbol-action:hover:not(:disabled) .control-cross{transform:rotate(-8deg);transform-origin:20px 20px}
 .brand:hover .control-shift{transform:translateX(-2px)}
}
.state-glyph{display:block;flex:none;width:64px;height:64px}
[data-symbol-loading]>.state-glyph>.interface-glyph{animation:loading-glyph-enter 180ms ease-out both}
:is(.symbol-action,#bootGlyph)[data-symbol-loading]>.state-glyph{width:100%;height:100%}
.symbol-action[data-symbol-loading]:disabled{opacity:.8}
@keyframes loading-glyph-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){[data-symbol-loading]>.state-glyph>.interface-glyph{animation:none}}
.symbol-action{position:relative;display:inline-grid;place-items:center;flex:none;width:58px;height:58px;padding:9px!important;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background 160ms,border-color 160ms,transform 120ms;box-shadow:none}
.symbol-action:disabled{opacity:.35;cursor:default}
.symbol-action:active:not(:disabled){transform:scale(.94)}
.symbol-action:focus-visible{outline:2px solid var(--symbol-blue);outline-offset:6px}
@media(hover:hover){.symbol-action:hover:not(:disabled){background:#eeeee5;border-color:#a3aaa2;box-shadow:none}}
body .app .symbol-action{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none;animation:none}
body .app .symbol-action.primary,body .app .handoff-action{background:#eeeee5;border-color:#c9cec3}
.app .topbar{top:20px;left:4.5%;right:4.5%}.app .brand,.app #stageLabel{display:block;width:42px;height:42px}.app #stageLabel{width:32px;height:32px;opacity:.6}
body[data-stage="entry"],body[data-stage="entry"] .entry-panel{background:var(--paper)}
.entry-panel .entry-center{background:var(--paper);box-shadow:0 0 50px 24px var(--paper)}
#entryGlyph{width:58px;height:58px}.entry-sequence .has-glyph{width:34px;height:34px}.entry-sequence i{display:block;width:16px;height:1px;background:var(--line);font-size:0}
#entryWaiting .state-glyph{width:160px;height:160px}.entry-actions .symbol-action{width:52px;height:52px;margin:0}
.entry-panel #entryPhoneLink:focus-visible{outline-color:var(--symbol-blue)}
body[data-stage="input"] .left-panel:has(.seed-deck:not(.is-started)){justify-content:center;gap:50px}
body[data-stage="input"] .left-panel:has(.seed-deck:not(.is-started)) h1{position:relative;width:100%;height:clamp(230px,34dvh,340px);overflow:visible;clip-path:none;margin:0}
#openingGlyph{display:block;width:clamp(230px,34dvh,340px);height:100%;margin:auto}
.seed-deck:not(.is-started){display:none}
.app .shuffle-controls{gap:16px}.app .shuffle-mode{width:56px!important;height:56px;border:0!important;background:transparent!important;border-radius:0;position:relative;padding:6px!important;box-shadow:none!important}
.app .shuffle-mode::after{content:'';position:absolute;bottom:-9px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--symbol-red);opacity:0;transition:opacity 150ms}
.app .shuffle-mode.is-active::after{opacity:1}
.app .shuffle-start{width:68px!important;height:68px;margin-left:20px;padding:12px!important}
.app .seed-card.chosen,.app .card.selected{outline:2px solid var(--symbol-red);outline-offset:6px}
.app .seed-card:focus-visible,.app .card:focus-visible,.app .human-focus-card:focus-visible{outline-color:var(--symbol-blue)}
.human-focus-symbols{display:flex;align-items:center;justify-content:flex-end;padding-right:3%}
.human-focus-symbols .state-glyph{width:clamp(66px,11vw,126px);height:clamp(66px,11vw,126px)}
.app .handoff-action{width:68px;height:68px;padding:11px!important;bottom:max(22px,4dvh)}
.app .draw-identity{width:46px;height:46px}.app .ai-transfer>span{display:none}.app .ai-transfer .symbol-loading{position:static;margin:0}.app #aiSymbols .state-glyph{width:80px;height:80px}
.app .cards-head h2{width:50px;height:50px}.app .card-actions .symbol-action{width:58px!important;height:58px;background:transparent;border-color:var(--line)}
.app .key-arrow{width:48px;height:48px}.app .key-pair{color:var(--symbol-red)}
.app .generation-progress,.app .progress{background:#e2e4db}.app .generation-progress i,.app .progress i{background:var(--symbol-blue)}.app .generation-head strong{color:var(--muted)}
.app #openCards{width:68px;height:68px}.app #retryGeneration{width:48px;height:48px;margin:0}
.app .print-panel h2{display:flex;align-items:center;min-height:64px}.app #printTitle.has-glyph{width:74px;height:74px}.app .print-meta #layerText.has-glyph{width:24px;height:24px}
.app .artwork-actions a.symbol-action{width:54px;height:54px;font-size:0;text-decoration:none}
.app .print-panel .symbol-action{margin-top:16px}.app .generated-art{border-color:var(--line);box-shadow:0 10px 26px #14191712}
.app #scanStatus:after{color:var(--symbol-blue)}.app .status,.app .kicker{color:var(--muted)}
.app .fusion-field>i{display:none}
@media(max-width:760px){
 .app .topbar{top:14px}.app .brand{width:36px;height:36px}
 .app .shuffle-controls{gap:12px}.app .shuffle-mode{width:48px!important;height:48px;padding:5px!important}.app .shuffle-start{width:60px!important;height:60px;margin-left:12px}
 body[data-stage="input"] .left-panel:has(.seed-deck:not(.is-started)){gap:36px}
 .human-focus-symbols{align-items:flex-start;justify-content:center;padding:0;top:0}.human-focus-symbols .state-glyph{width:62px;height:62px}
 .app .human-focus{height:78dvh}.app .human-focus-card{width:min(66vw,43dvh)}
 .app .ai-duet{gap:15px}.app #aiSymbols .state-glyph{width:42px;height:42px}.app .draw-identity{width:38px;height:38px}
 .app .card-actions .symbol-action{width:52px!important;height:52px}
 .app .print-panel{top:85px}.app .handoff-action{width:60px;height:60px}
}
@media(max-height:540px){body[data-stage="input"] .left-panel:has(.seed-deck:not(.is-started)){gap:20px}.app #openingGlyph{width:170px}.app .left-panel:has(.seed-deck:not(.is-started)) h1{height:180px}}
@media(prefers-reduced-motion:reduce){.symbol-action{transition:none}.symbol-action:active:not(:disabled){transform:none}.control-icon g,.control-icon .control-shift{transition:none;transform:none!important}}

/* Keep both authors' cards and their moving marks on the same two columns. */
body[data-stage="key"] .right-panel{--pair-card:min(27vw,27dvh,220px);--pair-gap:clamp(24px,5vw,64px);width:calc(var(--pair-card)*2 + var(--pair-gap));gap:20px;inset:76px auto 32px 50%}
body[data-stage="key"] .key-glyph{width:100%;flex:none}
body[data-stage="key"] .key-pair{display:grid;grid-template-columns:repeat(2,var(--pair-card));gap:var(--pair-gap);width:100%}
body[data-stage="key"] .key-pair img{display:block;width:100%;height:auto;aspect-ratio:2/3;border-radius:3px;box-shadow:2px 2px 0 #c8baa0,0 16px 30px #473b2b1c}
body[data-stage="key"] .generation-box{width:100%;margin:0}
body[data-stage="key"] .generation-head{display:block}
body[data-stage="key"] #generationSymbols{display:grid;grid-template-columns:repeat(2,var(--pair-card));gap:var(--pair-gap);width:100%;justify-items:center}
body[data-stage="key"] #generationSymbols .state-glyph{width:64px;height:64px}
body[data-stage="key"] #generationPercent{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body[data-stage="key"] .generation-progress{width:min(180px,60%);height:2px;margin:18px auto 0}
body[data-stage="key"] .generated-art:not([hidden]){display:none}
body[data-stage="key"] .generation-box p{text-align:center}
body[data-stage="key"] .actions{width:68px}
@media(max-height:540px){body[data-stage="key"] .right-panel{--pair-card:24dvh;gap:10px;inset:58px auto 16px 50%}body[data-stage="key"] #generationSymbols .state-glyph{width:44px;height:44px}body[data-stage="key"] .generation-progress{margin-top:8px}body[data-stage="key"] #openCards{width:52px;height:52px}}
body[data-stage="key"] .actions:has(#previewPair:not([hidden])){width:auto;flex-direction:column;align-items:center}body[data-stage="key"] #previewPair{font-size:12px;margin:0;padding:10px 16px;white-space:nowrap}