/* The scene: the app as one keyboard on one stage. Load after stage.css. Every rule waits for
   .has-scene on <html>, which scene.js sets, so without the module the page keeps its old look.
   Type: Archivo, one family at three widths (narrow for labels, normal for reading, widest for the
   word on the wall). Figures in DM Mono. The interface has no colour of its own: the only colour
   is the board's light, which also fills the word behind it. */

.has-scene {
  --bg: #060607; --bg-2: #0c0c0d; --surface: #121213; --surface-2: #1a1a1c; --line: #222224; --line-2: #343437;
  --ink: #f4f2ee; --ink-2: #a5a39e; --ink-3: #6b6964;
  --accent: #f4f2ee !important; --accent-ink: #0a0a0b !important;
  --lead: 244 242 238;
  --font: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --serif: 'DM Mono', ui-monospace, monospace;
  --pose: 1100ms cubic-bezier(.16,1,.3,1);
}
.has-scene .mark-s, .has-scene .gate h1 em, .has-scene .tab-help, .has-scene .intro li::after, .has-scene .dlg h2 em,
.has-scene .slow-time b, .has-scene .imp-rows b, .has-scene .batt-now b, .has-scene .m-typed b, .has-scene .tile-n,
.has-scene .type-pad b, .has-scene .dz-fonts .f-serif { font-style: normal; letter-spacing: -0.04em; }

/* ---------- the word on the wall ---------- */
.scn-title {
  position: absolute; left: calc(50% - 50vw); width: 100vw; top: -1.2vw; height: 17vw;
  z-index: -1; overflow: clip; pointer-events: none; text-align: center;
  --scn-light: linear-gradient(90deg, #232325, #232325);
  transition: top var(--pose), opacity 500ms ease;
}
.scn-word {
  position: absolute; left: 0; right: 0; top: 0;
  font: 900 var(--fs, 18vw)/.84 'Archivo', sans-serif; font-stretch: 125%; letter-spacing: -.035em; text-transform: uppercase;
  white-space: nowrap;
  background: var(--scn-light); -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: transform;
}
.is-podium .scn-title { opacity: 0; }

/* ---------- camera: one pose per part ---------- */
.has-scene .stage { transition: margin var(--pose), padding var(--pose); padding-top: 6.5vw; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .has-scene.has-stage .stage > .board,
  .has-scene.has-stage .stg-desk {
    transform: perspective(1800px) translate3d(var(--px, 0), var(--py, 0), 0) scale(var(--ps, 1))
      rotateX(calc(var(--prx, 9deg) + var(--stg-tx, 0deg))) rotateY(var(--stg-ty, 0deg)) rotateZ(var(--prz, 0deg));
    transition: transform var(--pose);
  }
  .has-scene[data-scene="gate"] .stage { --prx: 56deg; --prz: -13deg; --ps: .84; margin-bottom: -9vw; }
  .has-scene[data-scene="light"] .stage { --prx: 48deg; --prz: -6deg; --ps: .92; margin-bottom: -3vw; }
  .has-scene[data-scene="light"]:has(#board.is-painting) .stage { --prx: 9deg; --prz: 0deg; --ps: 1; margin-bottom: 0; }
  .has-scene[data-scene="screen"] .stage { --prx: 24deg; --prz: 3deg; --ps: 1.5; --px: -27%; --py: 34%; margin-bottom: 0; }
  .has-scene[data-scene="screen"] .under { margin-top: 15vw; }
  .has-scene[data-scene="light"] .under { margin-top: 4.2vw; }
  .has-scene[data-scene="light"]:has(#board.is-painting) .under { margin-top: 22px; }
  .has-scene[data-scene="settings"] .stage { --prx: 60deg; --prz: 0deg; --ps: .78; --py: -46%; margin-bottom: -11vw; }
  .has-scene[data-scene="screen"] .scn-title { top: 1.2vw; }
  .is-podium.has-scene .stage { --prx: 9deg; --prz: 0deg; --ps: 1; --px: 0; --py: 0; margin: 0; padding-top: 0; }
}

/* ---------- the board as it really is: white case, black, cream and taupe caps ---------- */
/* Opaque caps: the print on them never lights up. The light lives in the gaps and on the white
   plate around each cap, as on the real thing. */
.has-scene .board {
  background: linear-gradient(180deg, #f2efe9 0%, #e4e0d8 7%, #d3cfc6 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(0,0,0,.22), 0 14px 18px -12px rgba(0,0,0,.95), 0 0 0 1px #0a0908 !important;
}
.has-scene .key::before { inset: -9%; border-radius: 1cqw; filter: blur(0.5cqw); opacity: calc(var(--a) * .9); }
.has-scene .cap { box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,.14), inset 0 -0.3cqw 0 var(--edge), 0 0.14cqw 0.22cqw rgba(0,0,0,.45); }
.has-scene .legend-t { color: var(--lg); text-shadow: none; font-family: 'Archivo', sans-serif; font-stretch: 88%; font-weight: 600; }
.has-scene .cap-k { --lg: #f1eee7; --edge: #050505; }
.has-scene .cap-c { --lg: #1d1c1a; --edge: #aaa397; }
.has-scene .cap-t { --lg: #1d1c1a; --edge: #7f745f; }
.has-scene .cap-k .cap { background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 20%, #141415 100%); }
.has-scene .cap-c .cap { background: linear-gradient(180deg, #f3efe6 0%, #e6e1d5 22%, #d8d2c5 100%); }
.has-scene .cap-t .cap { background: linear-gradient(180deg, #c9bca4 0%, #b9ab92 22%, #a89a80 100%); }
.has-scene .cap-c .cap::after, .has-scene .cap-t .cap::after { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.05)); }
.has-scene .key.is-off .legend-t { color: color-mix(in srgb, var(--lg) 38%, transparent); }
.has-scene .board.is-fn .key.is-blank .legend-t { color: color-mix(in srgb, var(--lg) 32%, transparent); }
.has-scene .key.is-mod .cap { box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,.14), inset 0 -0.3cqw 0 var(--edge), 0 0 0 0.1cqw #0a0a0b, 0 0 0 0.24cqw #ff5a36; }
.has-scene .key.is-sel .cap { box-shadow: inset 0 0.08cqw 0 rgba(255,255,255,.16), inset 0 -0.3cqw 0 var(--edge), 0 0 0 0.12cqw #0a0a0b, 0 0 0 0.3cqw #fff, 0 0.9cqw 1.4cqw rgba(0,0,0,.55); }
.has-scene .board.is-painting .key .cap { background: revert-layer; }
.has-scene .board.is-painting .cap-k .cap { background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 20%, #141415 100%); }
.has-scene .board.is-painting .cap-c .cap { background: linear-gradient(180deg, #f3efe6 0%, #e6e1d5 22%, #d8d2c5 100%); }
.has-scene .board.is-painting .cap-t .cap { background: linear-gradient(180deg, #c9bca4 0%, #b9ab92 22%, #a89a80 100%); }
.has-scene .key.is-knob .cap { background: conic-gradient(from 20deg, #f4f4f2, #9c9c98 25%, #ededea 50%, #8f8f8b 75%, #f4f4f2); box-shadow: 0 0.3cqw 0.6cqw rgba(0,0,0,.45), inset 0 0 0 0.12cqw #77756f; }
.has-scene .key.is-knob .legend-t { color: #2a2927; }
.has-scene .screen { background: #050505; box-shadow: inset 0 0 0 0.14cqw #1a1a1a, 0 0 0 0.1cqw rgba(0,0,0,.35); color: #d7f24a; }
.has-scene .screen-t, .has-scene .screen-p { font-family: 'DM Mono', monospace; color: #d7f24a; }

/* ---------- top bar: quiet ---------- */
.has-scene .mark-x { font-weight: 900; font-stretch: 125%; letter-spacing: -0.04em; font-size: 19px; }
.has-scene .mark-s { font-family: var(--font); font-stretch: 62%; font-weight: 500; font-size: 15px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); }
.has-scene .profiles { background: none; border-color: var(--line); }
.has-scene .profiles-label { font-stretch: 62%; letter-spacing: .16em; }

/* ---------- the dock: four words, the chosen one opens wide ---------- */
.has-scene .under { position: relative; z-index: 3; transition: margin var(--pose); }
.has-scene .deck { position: relative; z-index: 3; margin-top: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.has-scene main { padding-bottom: 140px; }
.has-scene .tabs {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 40;
  width: max-content; max-width: calc(100vw - 24px);
  padding: 6px 8px 6px 6px; gap: 0; border: 1px solid var(--line-2); border-radius: 16px;
  background: #0b0b0c; box-shadow: 0 24px 60px -10px rgba(0,0,0,.9), 0 0 0 1px #000;
}
.has-scene .tabs [role="tab"] {
  padding: 13px 15px 12px; border-radius: 11px;
  font: 600 14px/1 'Archivo', sans-serif; font-stretch: 62%; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-3);
  transition: font-stretch 520ms cubic-bezier(.2,.8,.2,1), letter-spacing 520ms cubic-bezier(.2,.8,.2,1), color 300ms ease, background 300ms ease, font-weight 520ms;
}
.has-scene .tabs [role="tab"]:hover { color: var(--ink); font-stretch: 84%; }
.has-scene .tabs [role="tab"][aria-selected="true"] {
  font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; color: #0a0a0b;
  background: rgb(var(--lead)); transition-property: font-stretch, letter-spacing, color, font-weight;
}
.has-scene .tab-ink { display: none; }
.has-scene .tabs-meta { margin-left: 10px; padding: 0 8px 0 14px; border-left: 1px solid var(--line); }
.has-scene .tab-help { font-size: 13px; }

/* ---------- the console under the board ---------- */
.has-scene .panel { padding: 30px 0 0; max-width: 1120px; margin: 0 auto; }
.has-scene .fx button, .has-scene .set-card, .has-scene .paint, .has-scene .live-card { box-shadow: none; background: var(--bg-2); border: 1px solid var(--line); }
.has-scene .fx button { border-radius: 10px; font-stretch: 84%; letter-spacing: .01em; }
.has-scene .fx button[aria-checked="true"] { border-color: rgb(var(--lead)); box-shadow: 0 0 0 1px rgb(var(--lead)), 0 0 34px -8px rgb(var(--lead) / .55); }
.has-scene .live-card.is-on { border-color: rgb(var(--lead)); box-shadow: 0 0 44px -14px rgb(var(--lead) / .6); }
.has-scene .tune-label, .has-scene .paint-label, .has-scene .gate-kicker { font-stretch: 62%; font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .16em; }
.has-scene .btn { font-weight: 700; font-stretch: 100%; letter-spacing: -.005em; }
.has-scene .paint-title, .has-scene .live-title, .has-scene .set-card h3 { font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; }
.has-scene .under .hint { font-stretch: 84%; }
/* Each part of the console arrives one piece after the other when its scene opens. */
@keyframes scn-rise { from { opacity: 0; transform: translateY(22px); } }
.has-scene .panel:not([hidden]) > * { animation: scn-rise 760ms cubic-bezier(.16,1,.3,1) both; }
.has-scene .panel:not([hidden]) > :nth-child(1) { animation-delay: 260ms; }
.has-scene .panel:not([hidden]) > :nth-child(2) { animation-delay: 330ms; }
.has-scene .panel:not([hidden]) > :nth-child(3) { animation-delay: 400ms; }
.has-scene .panel:not([hidden]) > :nth-child(n+4) { animation-delay: 470ms; }
.has-scene .fx button { animation: scn-rise 620ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(300ms + var(--i, 0) * 22ms); }

/* ---------- the gate: no veil, the board shows itself ---------- */
.has-scene .stage > .gate { position: relative; z-index: 3; display: block; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: 2vw; }
.has-scene .stage > .gate::before { content: none; }
.has-scene .stage > .gate[hidden] { display: none !important; }
.has-scene[data-scene="gate"] .under { display: none; }
.has-scene .gate-card { margin: 0 auto; animation: scn-rise 900ms cubic-bezier(.16,1,.3,1) 500ms both; }
.has-scene .gate h1 { font-weight: 800; font-stretch: 118%; font-size: clamp(26px, 3.1vw, 44px); letter-spacing: -.035em; line-height: 1; }
.has-scene .gate h1 em { font-family: var(--font); font-weight: 800; color: var(--ink-3); }
.has-scene .gate-copy { margin-top: 14px; }

@media (max-width: 760px) {
  .scn-title { top: 1vw; height: 22vw; }
  .has-scene .stage { padding-top: 15vw; }
  .has-scene .tabs { bottom: 10px; padding: 5px; }
  .has-scene .tabs [role="tab"] { padding: 12px 9px 11px; font-size: 12px; letter-spacing: .08em; }
  .has-scene .tabs [role="tab"][aria-selected="true"] { font-stretch: 100%; }
  .has-scene .tabs-meta, .has-scene .tabs .undo-t { display: none; }
  .has-scene .panel { padding-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-scene .stage, .scn-title, .has-scene .tabs [role="tab"] { transition: none; }
  .has-scene .panel:not([hidden]) > *, .has-scene .fx button, .has-scene .gate-card { animation: none; }
}