/* Ctrl Studio hero (ch- prefix) */
/* Layout: full-bleed hero, copy bottom-left over paper, scanline cat stage on the right; mobile stacks stage over copy.
   Single committed light look, matching ctrlstudio.it (light-first). */
.ch-hero, .ch-lab, .ch-lab-btn {
  --ch-paper: #f4f4f4;      /* Bianchino Ctrl */
  --ch-ink: #121212;        /* Nero Morbido Ctrl */
  --ch-text: #212121;       /* Antracite Ctrl */
  --ch-muted: #5a5a5a;      /* secondary on light, legible */
  --ch-rule: #d6d6dc;
  --ch-blue: #2e50ff;       /* Blu Ctrl, used rarely */
  --ch-deep: #10111a;       /* Grigio Deep Bluastro, lab panel */
  --ch-white: #ffffff;
  --ch-panel-text: #f4f4f4;
  --ch-panel-muted: #a3a6b8;
  --ch-f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ch-f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ch-gl: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left, 0px));
  --ch-gr: max(clamp(16px, 4vw, 56px), env(safe-area-inset-right, 0px));
  --ch-ease: cubic-bezier(.165, .84, .44, 1);
}
.ch-hero, .ch-hero *, .ch-lab, .ch-lab *, .ch-lab-btn { box-sizing: border-box; }
.ch-hero [hidden], .ch-lab[hidden], .ch-lab [hidden], .ch-lab-btn[hidden] { display: none !important; }
.ch-hero :focus-visible, .ch-lab :focus-visible { outline: 2px solid var(--ch-blue); outline-offset: 3px; }

/* ---------- hero ---------- */
.ch-hero { position: relative; font-family: var(--ch-f-sans); color: var(--ch-text); line-height: 1.333; overflow: hidden; height: clamp(640px, 100svh, 920px); background: var(--ch-paper); isolation: isolate; }
.ch-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 1; }
.ch-zone { position: absolute; left: 42%; right: 1%; top: 11%; bottom: 3%; pointer-events: none; }

.ch-copy { position: absolute; z-index: 10; left: var(--ch-gl); bottom: clamp(2rem, 7vh, 4.5rem); width: min(38rem, 44vw); display: flex; flex-direction: column; gap: 1.2rem; }
.ch-eyebrow { display: flex; gap: .7em; margin: 0; font: 500 .75rem/1 var(--ch-f-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ch-muted); }
.ch-eyebrow span { transition: color .25s var(--ch-ease); }
.ch-eyebrow span.ch-on { color: var(--ch-blue); }
.ch-hero h1 { margin: 0; font: 600 clamp(2.6rem, 5.3vw, 5.5rem)/.96 var(--ch-f-sans); letter-spacing: -.052em; color: var(--ch-text); text-wrap: balance; }
.ch-hero h1 em, .ch-hero h1 .ch-em { font-style: normal; color: var(--ch-blue); }
.ch-lead { margin: 0; max-width: 31rem; font: 400 clamp(1rem, 1.2vw, 1.13rem)/1.42 var(--ch-f-sans); letter-spacing: -.0178em; color: #3a3a3a; }
.ch-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.ch-hero .ch-btn { display: inline-flex; align-items: center; border-radius: 100vw; padding: .9rem 1.45rem; background: var(--ch-text); color: var(--ch-white); text-decoration: none; font: 500 .8rem/1 var(--ch-f-sans); text-transform: uppercase; letter-spacing: -.0238em; transition: letter-spacing .2s var(--ch-ease), background .2s var(--ch-ease); }
.ch-hero .ch-btn:hover { letter-spacing: .03em; background: var(--ch-ink); }
.ch-hero .ch-link { color: var(--ch-text); font: 500 .8rem/1 var(--ch-f-sans); text-transform: uppercase; letter-spacing: -.0238em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .2rem; transition: letter-spacing .2s var(--ch-ease); }
.ch-hero .ch-link:hover { letter-spacing: .03em; }
.ch-hint { display: flex; align-items: center; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; font: 400 .78rem/1.4 var(--ch-f-mono); color: var(--ch-muted); }
.ch-kbd { font: 500 .72rem/1 var(--ch-f-mono); padding: .2rem .42rem .22rem; border: 1px solid #c4c4cc; border-bottom-width: 2px; border-radius: .3rem; background: var(--ch-white); color: var(--ch-text); }
.ch-services { margin: 0; font: 400 .7rem/1.5 var(--ch-f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ch-muted); }

.ch-badge { position: absolute; z-index: 10; left: var(--ch-gl); top: 5.6rem; margin: 0; font: 400 .66rem/1.3 var(--ch-f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); }

/* ---------- glass ctrl key ---------- */
.ch-key-wrap { position: absolute; z-index: 5; width: var(--ch-k, 120px); height: var(--ch-k, 120px); }
.ch-key-wrap .ch-bob { width: 100%; height: 100%; }
/* screen-space scanlines over the key, clipped to its projected silhouette and aligned to the canvas rows */
.ch-key-lines { position: absolute; inset: -30%; z-index: 2; pointer-events: none; mix-blend-mode: multiply;
  background: repeating-linear-gradient(180deg, var(--ch-lc, rgba(18, 18, 18, .2)) 0 var(--ch-lt, 1.5px), transparent var(--ch-lt, 1.5px) var(--ch-sl, 5px));
  background-position: 0 var(--ch-lo, 0px); }
/* 3D glass keycap: stacked rings make the tapered walls, an inner stem shows through, a cap closes the top.
   Tilted 52deg and turned by --ch-rz0. Light comes from the upper right of the screen; in the key's own frame that is
   its upper right (gradient 242deg), the hidden right/top walls are lit, the visible left wall is the darkest,
   and the floor shadow falls to the lower left. */
.ch-key { appearance: none; position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 22%; perspective: calc(var(--ch-k, 120px) * 5); }
.ch-kc { position: absolute; inset: 9%; transform-style: preserve-3d; --ch-depth: calc(var(--ch-k, 120px) * .3);
  transform: rotateX(calc(52deg + var(--ch-tx, 0deg))) rotateZ(calc(var(--ch-rz0, -30deg) + var(--ch-tz, 0deg)));
  transition: transform .4s var(--ch-ease); }
.ch-kc > i { position: absolute; inset: 0; border-radius: 24%; pointer-events: none;
  transform: translateZ(calc(var(--ch-depth) * var(--ch-t))) scale(calc(1 - .12 * var(--ch-t)));
  transition: transform .16s cubic-bezier(.3, 1.5, .5, 1); }
.ch-kc > .ch-shadow { inset: -6%; border-radius: 34%; background: radial-gradient(closest-side, rgba(16, 17, 26, .45), rgba(16, 17, 26, 0));
  transform: translate3d(-9%, 5%, -1px); filter: blur(calc(var(--ch-k, 120px) * .035)); transition: none; }
.ch-kc > .ch-w { border: calc(var(--ch-k, 120px) * .02) solid; background: rgba(240, 243, 252, .012);
  border-color: rgba(255, 255, 255, .55) rgba(248, 250, 255, .75) rgba(176, 182, 202, .6) rgba(112, 118, 140, .6); }
.ch-kc > .ch-w.ch-rim { border-color: rgba(255, 255, 255, .95) rgba(255, 255, 255, 1) rgba(255, 255, 255, .8) rgba(236, 239, 248, .75); }
.ch-kc > .ch-stem { inset: 31%; border-radius: 14%; background: rgba(46, 80, 255, .08); border: 1px solid rgba(255, 255, 255, .3); }
.ch-kc > .ch-top { display: grid; place-items: center; border: calc(var(--ch-k, 120px) * .012) solid rgba(255, 255, 255, .95);
  background: linear-gradient(242deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .45) 48%, rgba(220, 226, 242, .32));
  box-shadow: inset 0 0 calc(var(--ch-k, 120px) * .05) rgba(255, 255, 255, .8), 0 0 0 0 rgba(46, 80, 255, 0);
  transition: transform .16s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s var(--ch-ease); }
.ch-kc .ch-dish { position: absolute; inset: 13%; border-radius: 30%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0) 45%, rgba(16, 17, 26, .08));
  box-shadow: inset calc(var(--ch-k, 120px) * -.014) calc(var(--ch-k, 120px) * .016) calc(var(--ch-k, 120px) * .04) rgba(16, 17, 26, .14),
    inset calc(var(--ch-k, 120px) * .01) calc(var(--ch-k, 120px) * -.01) calc(var(--ch-k, 120px) * .02) rgba(255, 255, 255, .9); }
.ch-kc .ch-label { position: relative; font: 500 calc(var(--ch-k, 120px) * .21)/1 var(--ch-f-sans); letter-spacing: -.03em; color: rgba(18, 18, 18, .82); transform: rotate(12deg); transition: color .2s var(--ch-ease); }
.ch-key:hover .ch-kc { --ch-depth: calc(var(--ch-k, 120px) * .33); }
.ch-key.ch-armed .ch-kc, .ch-key.ch-pressed .ch-kc { --ch-depth: calc(var(--ch-k, 120px) * .12); }
.ch-key.ch-armed .ch-kc > i, .ch-key.ch-pressed .ch-kc > i { transition-duration: .07s; }
.ch-key.ch-armed .ch-top, .ch-key.ch-pressed .ch-top { box-shadow: inset 0 0 calc(var(--ch-k, 120px) * .05) rgba(255, 255, 255, .8), 0 0 0 calc(var(--ch-k, 120px) * .05) rgba(46, 80, 255, .22); }
.ch-key.ch-armed .ch-label, .ch-key.ch-pressed .ch-label { color: var(--ch-blue); }
.ch-key:focus-visible { outline: 2px solid var(--ch-blue); outline-offset: 6px; }
.ch-key-tag { position: absolute; z-index: 5; transform: translateX(-50%); font: 500 .68rem/1 var(--ch-f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ch-muted); white-space: nowrap; transition: opacity .4s var(--ch-ease); }
.ch-key-tag.ch-gone { opacity: 0; }

/* ---------- speech bubble ---------- */
.ch-bubble { position: absolute; z-index: 6; transform: translateY(-100%); max-width: min(17rem, calc(100vw - 32px)); padding: .6rem .8rem .62rem; background: var(--ch-white); color: var(--ch-ink);
  border: 1.5px solid var(--ch-ink); border-radius: 3px; box-shadow: 3px 3px 0 var(--ch-ink); font: 400 .82rem/1.4 var(--ch-f-mono); letter-spacing: -.01em; }
.ch-bubble::after { content: ""; position: absolute; left: 16px; bottom: -8px; width: 12px; height: 12px; background: var(--ch-white); border-right: 1.5px solid var(--ch-ink); border-bottom: 1.5px solid var(--ch-ink); transform: rotate(45deg) skew(8deg, 8deg); }
.ch-bubble.ch-tail-right::after { left: auto; right: 16px; }
.ch-bubble .ch-ghost { visibility: hidden; }
.ch-bubble .ch-cursor { display: inline-block; width: .55em; height: 1.05em; margin: 0 .05em -.18em; background: var(--ch-blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ch-bubble.ch-pop { animation: pop .22s var(--ch-ease); }
@keyframes pop { from { transform: translateY(-100%) scale(.95); opacity: .4; } }

/* ---------- lab ---------- */
.ch-lab-btn { position: fixed; z-index: 40; right: calc(var(--ch-gr) - 4px); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .5rem; border: 0; cursor: pointer;
  padding: .7rem 1rem; border-radius: 100vw; background: var(--ch-deep); color: var(--ch-panel-text); font: 500 .72rem/1 var(--ch-f-mono); text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 8px 24px -10px rgba(16, 17, 26, .6); }
.ch-lab-btn i { width: 7px; height: 7px; border-radius: 50%; background: var(--ch-blue); }
.ch-lab { position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); width: min(22rem, calc(100vw - 32px)); max-height: calc(100svh - 6.5rem); overflow: auto;
  background: var(--ch-deep); color: var(--ch-panel-text); border-radius: 14px; padding: 1rem 1.1rem 1.1rem; font: 400 .8rem/1.4 var(--ch-f-sans); box-shadow: 0 24px 60px -20px rgba(16, 17, 26, .7); display: flex; flex-direction: column; gap: 1rem; }
.ch-lab header { display: flex; align-items: baseline; gap: .6rem; }
.ch-lab header strong { font: 600 1rem/1 var(--ch-f-sans); letter-spacing: -.03em; }
.ch-lab header span { color: var(--ch-panel-muted); font-family: var(--ch-f-mono); font-size: .7rem; flex: 1; }
.ch-lab .ch-x { appearance: none; border: 0; background: transparent; color: var(--ch-panel-text); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .2rem .3rem; }
.ch-lab h4 { margin: 0 0 .5rem; font: 500 .68rem/1 var(--ch-f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ch-panel-muted); }
.ch-lab section { display: flex; flex-direction: column; gap: .55rem; }
.ch-lab p.ch-note { margin: 0; color: var(--ch-panel-muted); font-size: .74rem; }
.ch-slot { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .5rem .55rem; border: 1px dashed rgba(244, 244, 244, .22); border-radius: 8px; }
.ch-slot.ch-drag { border-color: var(--ch-blue); background: rgba(46, 80, 255, .12); }
.ch-slot b { font-weight: 500; }
.ch-slot b small { display: block; color: var(--ch-panel-muted); font: 400 .64rem/1.2 var(--ch-f-mono); }
.ch-slot .ch-fname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ch-panel-muted); font: 400 .7rem/1.2 var(--ch-f-mono); }
.ch-slot .ch-acts { display: flex; gap: .3rem; }
.ch-mini { appearance: none; border: 1px solid rgba(244, 244, 244, .25); background: transparent; color: var(--ch-panel-text); border-radius: 6px; padding: .3rem .5rem; font: 500 .66rem/1 var(--ch-f-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.ch-mini:hover { border-color: var(--ch-panel-text); }
.ch-slot input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ch-row { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr) 2.6rem; align-items: center; gap: .5rem; }
.ch-row span { color: var(--ch-panel-text); }
.ch-row output { font: 400 .7rem/1 var(--ch-f-mono); color: var(--ch-panel-muted); text-align: right; font-variant-numeric: tabular-nums; }
.ch-row input[type=range] { width: 100%; accent-color: var(--ch-blue); }
.ch-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.ch-check input { accent-color: var(--ch-blue); }
.ch-seg { display: flex; gap: .3rem; }
.ch-seg label { cursor: pointer; }
.ch-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ch-seg span { display: inline-block; padding: .35rem .6rem; border-radius: 6px; border: 1px solid rgba(244, 244, 244, .25); font: 500 .68rem/1 var(--ch-f-mono); text-transform: uppercase; letter-spacing: .06em; }
.ch-seg input:checked + span { background: var(--ch-panel-text); color: var(--ch-deep); border-color: var(--ch-panel-text); }
.ch-seg input:focus-visible + span { outline: 2px solid var(--ch-blue); outline-offset: 2px; }
.ch-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.ch-lab textarea { width: 100%; min-height: 7rem; resize: vertical; background: rgba(0, 0, 0, .25); color: var(--ch-panel-text); border: 1px solid rgba(244, 244, 244, .2); border-radius: 8px; font: 400 .7rem/1.4 var(--ch-f-mono); padding: .5rem; }
.ch-copied { color: var(--ch-panel-muted); font: 400 .7rem/1 var(--ch-f-mono); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ch-zone { left: 46%; }
  .ch-copy { width: min(34rem, 48vw); }
}
@media (max-width: 760px) {
  .ch-hero { height: auto; display: flex; flex-direction: column; padding-top: 68px; padding-bottom: 5.2rem; }
  .ch-zone { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; height: clamp(300px, 94vw, 470px); }
  .ch-copy { position: relative; left: auto; bottom: auto; width: auto; padding-left: var(--ch-gl); padding-right: var(--ch-gr); margin-top: .5rem; }
  .ch-badge { top: 4.6rem; max-width: 70vw; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-key-wrap .ch-bob, .ch-bubble .ch-cursor, .ch-bubble.ch-pop { animation: none; }
  .ch-kc, .ch-kc > i, .ch-kc > .ch-top, .ch-btn, .ch-link, .ch-eyebrow span { transition: none; }
}