/* Presentation remote — the phone page (/remote). Tokens mirror
   server/statics/css/variables.css by name and value but are keyed by
   [data-theme] instead of the media query: the remote defaults to dark
   regardless of the OS (a presenter's phone in a dark room, the presenter
   view's own convention) with a light / device preference. Type, buttons,
   segmented control, pills and sheets follow server/docs/DESIGN.md. */

:root {
    --text: #edeff5;            --text-rgb: 237, 239, 245;
    --muted: #a7aec0;
    --bg: #121318;              --surface: #1b1c22;
    --card: #121318;            --border: rgba(237, 239, 245, 0.10);
    --btn-bg: #edeff5;          --btn-text: #121318;
    --success: #3794ff;         --success-rgb: 55, 148, 255;
    --error: #f14c4c;           --error-rgb: 241, 76, 76;
    --brand-iris-rgb: 243, 117, 231;
    --state-active-bg: rgba(255, 255, 255, 0.10);
    --state-selected-bg: rgba(255, 255, 255, 0.08);
    --focus-outline-color: rgba(255, 255, 255, 0.55);
    --shot-bg: #000;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --global-font-title: 'SSHOW SEO Sans', "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --notes-scale: 1;
    --float: #1b1c22;           /* the dock and the sheets — surfaces that float over the page */
    --laser: #FF3889;           /* this phone's laser — the seat's color from pairing (remote.js applyLaser) */
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    color-scheme: dark;
}
html[data-theme="light"] {
    --text: #2b2b2b;            --text-rgb: 43, 43, 43;
    --muted: #6b7280;
    --bg: #ffffff;              --surface: #f5f3f0;
    --card: #ffffff;            --border: #e5e5e5;
    --btn-bg: #2b2b2b;          --btn-text: #f5f3f0;
    --success: #2e7dcc;         --success-rgb: 46, 125, 204;
    --error: #e74c3c;           --error-rgb: 231, 76, 60;
    --state-active-bg: rgba(0, 0, 0, 0.08);
    --state-selected-bg: rgba(0, 0, 0, 0.06);
    --focus-outline-color: rgba(0, 0, 0, 0.55);
    --shot-bg: #f5f3f0;
    --float: #ffffff;
    color-scheme: light;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme]) {
        --text: #2b2b2b;        --text-rgb: 43, 43, 43;
        --muted: #6b7280;
        --bg: #ffffff;          --surface: #f5f3f0;
        --card: #ffffff;        --border: #e5e5e5;
        --btn-bg: #2b2b2b;      --btn-text: #f5f3f0;
        --success: #2e7dcc;     --success-rgb: 46, 125, 204;
        --error: #e74c3c;       --error-rgb: 231, 76, 60;
        --state-active-bg: rgba(0, 0, 0, 0.08);
        --state-selected-bg: rgba(0, 0, 0, 0.06);
        --focus-outline-color: rgba(0, 0, 0, 0.55);
        --shot-bg: #f5f3f0;
        --float: #ffffff;
        color-scheme: light;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    background: var(--bg);
    color: var(--text);
    letter-spacing: -0.005em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
    touch-action: manipulation;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--focus-outline-color); outline-offset: 2px; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Every element the script hides with the attribute wins over its own display rule. */
[hidden] { display: none !important; }
b { font-weight: 600; }

/* The page is one fixed box — no document scroll, so nothing pulls to refresh. */
.rc { position: fixed; inset: 0; display: grid; overflow: hidden; height: 100dvh; }
.rc-screen { grid-area: 1 / 1; display: none; flex-direction: column; min-height: 0; padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
.rc[data-screen="pair"]  .rc-pair,
.rc[data-screen="enter"] .rc-enter,
.rc[data-screen="ready"] .rc-ready,
.rc[data-screen="show"]  .rc-show,
.rc[data-screen="fail"]  .rc-fail,
.rc[data-screen="lost"]  .rc-lost,
.rc[data-screen="end"]   .rc-end { display: flex; animation: rc-fade 0.3s var(--ease); }
@keyframes rc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- type (DESIGN.md §3) ---- */
.rc-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); line-height: 1; margin: 0; }
.rc-cap { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: var(--muted); line-height: 1; }
.rc-title { font-family: var(--global-font-title); font-size: clamp(22px, 6vw, 28px); font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 10px 0 8px; }
.rc-sub { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.rc-hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 12px 0 0; text-align: center; }
.rc-muted { color: var(--muted); }
.rc-waiting { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 18px 0 0; }
.rc-waiting i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: rc-pulse 1.2s var(--ease) infinite; }

/* ---- buttons (DESIGN.md §7.4 — one family, pill, Pretendard 600) ---- */
.rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; letter-spacing: -0.005em; transition: opacity 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.1s var(--ease); }
.rc-btn svg { font-size: 16px; }
.rc-btn-lg { height: 48px; padding: 0 26px; font-size: 14px; }
.rc-btn-xl { height: 56px; padding: 0 32px; font-size: 16px; width: 100%; }
.rc-btn-primary { background: var(--btn-bg); color: var(--btn-text); }
.rc-btn-primary:active { opacity: 0.85; transform: scale(0.96); }
.rc-btn-secondary { border: 1px solid rgba(var(--text-rgb), 0.16); color: var(--text); }
.rc-btn-secondary:active { background: rgba(var(--text-rgb), 0.04); border-color: rgba(var(--text-rgb), 0.32); }
.rc-btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; }
.rc-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--muted); }
.rc-icon:active { background: var(--state-active-bg); }

/* ---- segmented (DESIGN.md §7.12) ---- */
.rc-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: rgba(var(--text-rgb), 0.04); border: 1px solid rgba(var(--text-rgb), 0.08); }
.rc-seg-opt { height: 32px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color 0.18s var(--ease), background-color 0.18s var(--ease); }
.rc-seg-opt.is-selected { background: var(--state-selected-bg); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(var(--text-rgb), 0.06); }

/* ---- top bar ---- */
.rc-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 4px; min-height: 56px; }
.rc-conn { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--muted); min-width: 0; }
.rc-conn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: none; box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.22); }
.rc[data-conn="connecting"] .rc-conn i { background: var(--muted); box-shadow: none; animation: rc-pulse 1.2s var(--ease) infinite; }
/* A move drawn ahead of the laptop's answer (remote.js guessMove) — the dot breathes until it comes. */
.rc[data-sending] .rc-conn i { animation: rc-pulse 1.2s var(--ease) infinite; }
.rc[data-conn="lost"] .rc-conn i { background: var(--error); box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.22); }
@keyframes rc-pulse { 50% { opacity: 0.35; } }
/* The timer's ring fills toward the target time; it warns past 90% and the time itself turns past the target. */
.rc-timer { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 7px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), 0.16); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.rc-timer svg { font-size: 26px; transform: rotate(-90deg); stroke-width: 2.6; }
.rc-timer circle { stroke: rgba(var(--text-rgb), 0.16); }
.rc-timer circle[data-timer-ring] { stroke: var(--text); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--ease), stroke 0.18s var(--ease); }
.rc-timer:active { background: var(--state-active-bg); }
.rc-timer.is-paused b { color: var(--muted); }
.rc-timer.is-late circle[data-timer-ring] { stroke: var(--error); }
.rc-timer.is-over { color: var(--error); border-color: rgba(var(--error-rgb), 0.4); }

/* ---- pairing: the one brand moment (ink mark + aurora, DESIGN.md §2.4 / §8.3) ---- */
.rc-pair { position: relative; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.rc-aura { position: absolute; inset: -20%; pointer-events: none; opacity: 0.9;
    background:
        radial-gradient(34% 30% at 22% 30%, rgba(243, 117, 231, 0.18), transparent 70%),
        radial-gradient(40% 32% at 78% 22%, rgba(255, 56, 137, 0.16), transparent 70%),
        radial-gradient(44% 36% at 62% 72%, rgba(105, 177, 255, 0.18), transparent 70%),
        radial-gradient(36% 30% at 18% 78%, rgba(252, 146, 84, 0.16), transparent 70%);
    filter: blur(60px) saturate(120%); animation: rc-aurora 24s ease-in-out infinite alternate; }
@keyframes rc-aurora { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2%, -2%) scale(1.06); } 100% { transform: translate(-2%, 2%) scale(1.04); } }
.rc-pair-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 320px; }
.rc-pair .auth-mark { width: 52px; margin-bottom: 14px; color: var(--text); }
.rc-pair .auth-mark svg { display: block; width: 100%; aspect-ratio: 603 / 958; height: auto; }
.rc-pair-title { font-family: var(--global-font-title); font-size: 28px; font-weight: 700; letter-spacing: 0; line-height: 1.2; margin: 0; }
.rc-pair-sub { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.rc-pair-sub b { color: var(--text); }
[data-when] { display: none; }
.rc[data-conn="connecting"] [data-when="connecting"], .rc[data-conn="lost"] [data-when="connecting"], .rc[data-conn="connected"] [data-when="connected"] { display: inline; }
.rc-pair-dots { display: flex; gap: 6px; margin-top: 18px; height: 6px; }
.rc-pair-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: rc-pulse 1.2s var(--ease) infinite; }
.rc-pair-dots i:nth-child(2) { animation-delay: 0.2s; } .rc-pair-dots i:nth-child(3) { animation-delay: 0.4s; }
.rc[data-conn="connected"] .rc-pair-dots { visibility: hidden; }

/* ---- typed code: a box per character, three and three, over one real input ---- */
.rc-enter { align-items: center; padding: max(10vh, 40px) 24px 24px; text-align: center; }
.rc-enter-card { display: flex; flex-direction: column; align-items: center; max-width: 380px; width: 100%; }
.rc-code { position: relative; display: block; width: 100%; margin: 28px 0 16px; }
.rc-code input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; -webkit-user-select: text; user-select: text; }
.rc-code-cells { display: flex; justify-content: center; align-items: center; gap: 7px; pointer-events: none; }
.rc-code-cells i { position: relative; width: min(46px, 12vw); height: 60px; border-radius: 14px; background: var(--surface); border: 1px solid transparent; display: grid; place-items: center; font-style: normal; font-size: 26px; font-weight: 700; color: var(--text); transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease); }
.rc-code-cells i:nth-child(4) { margin-left: 14px; }
.rc-code-cells i:nth-child(4)::before { content: ""; position: absolute; left: -15px; top: 50%; width: 9px; height: 2px; border-radius: 1px; background: rgba(var(--text-rgb), 0.3); }
.rc-code input:focus + .rc-code-cells i.is-next { background: var(--bg); border-color: rgba(var(--text-rgb), 0.3); }
.rc-code input:focus + .rc-code-cells i.is-next::after { content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--text); animation: rc-caret 1s steps(1) infinite; }
@keyframes rc-caret { 50% { opacity: 0; } }

/* ---- ready ---- */
.rc-ready-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; gap: 4px; }
.rc-ready-text { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.rc-cover { position: relative; width: min(80%, 420px); margin: 0 0 26px; }
.rc-cover .rc-aura { inset: -35% -20%; opacity: 0.75; }
.rc-cover .rc-shot { border-radius: 18px; }
.rc-ready-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 20px 20px; }

/* ---- shots ---- */
.rc-shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--shot-bg); }
.rc-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--text-rgb), 0.08); pointer-events: none; }
.rc-shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rc-shot img:not([src]), .rc-shot img[src=""] { visibility: hidden; }

/* ---- the show: a view (slide · laser pad · notes) and a side (where it stands, what comes next) ---- */
.rc-body { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 4px 16px 12px; }
.rc-view { flex: none; display: flex; flex-direction: column; min-height: 0; }
.rc-side { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.rc-laser, .rc-prompt-notes, .rc-size, .rc-laser-hint { display: none; }
/* Laser: the pad comes down to the thumb, right over the dock — the notes stay above it. */
.rc[data-laser] .rc-view { order: 2; }
.rc[data-laser] .rc-hero, .rc[data-laser] .rc-upnext { display: none; }
.rc[data-laser] .rc-laser, .rc[data-laser] .rc-laser-hint { display: flex; }
.rc[data-laser] .rc-laser-hint { margin-top: auto; }
/* Notes: where the show stands on top, the notes fill the rest. */
.rc[data-mode="prompt"] .rc-view { order: 2; flex: 1; }
.rc[data-mode="prompt"] .rc-side { flex: none; }
.rc[data-mode="prompt"] .rc-hero, .rc[data-mode="prompt"] .rc-upnext, .rc[data-mode="prompt"] .rc-peek { display: none; }
.rc[data-mode="prompt"] .rc-prompt-notes { display: block; }
.rc[data-mode="prompt"] .rc-size { display: inline-flex; }

.rc-hero { border-radius: 20px; touch-action: pan-y; }
.rc-cover-note { display: none; position: absolute; inset: 0; place-items: center; background: #000; color: rgba(255, 255, 255, 0.55); font-size: 14px; font-weight: 600; }
.rc[data-cover="black"] .rc-cover-note { display: grid; }

.rc-where { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-pos { flex: none; display: inline-flex; align-items: baseline; gap: 4px; min-height: 44px; font-variant-numeric: tabular-nums; }
.rc-pos b { font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.rc-pos > span { font-size: 15px; color: var(--muted); }
.rc-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hold · resume: shown only while the scene has something to play; lit while held. With the notes' size buttons beside it, the icon alone. */
.rc-hold { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), 0.16); font-size: 13px; font-weight: 600; transition: background-color 0.18s var(--ease), transform 0.1s var(--ease); }
.rc-hold svg { font-size: 14px; }
.rc-hold.is-on { background: var(--state-selected-bg); }
.rc-hold:active { background: var(--state-active-bg); transform: scale(0.96); }
.rc[data-mode="prompt"] .rc-hold { width: 36px; padding: 0; }
.rc[data-mode="prompt"] .rc-hold span { display: none; }
.rc-size { flex: none; gap: 6px; }
.rc-size button { height: 36px; min-width: 46px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), 0.16); font-size: 13px; font-weight: 600; }
.rc-size button:last-child { font-size: 16px; }
.rc-size button:active { background: var(--state-active-bg); }
/* One mark per scene, the current one filling as its clock runs (a long deck is one bar). */
.rc-rail { flex: none; display: flex; gap: 3px; height: 4px; }
.rc-rail i { position: relative; flex: 1; border-radius: 2px; background: rgba(var(--text-rgb), 0.14); overflow: hidden; }
.rc-rail i.is-done { background: rgba(var(--text-rgb), 0.42); }
.rc-rail i.is-now::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); border-radius: 2px; background: var(--text); transition: width 0.3s var(--ease); }

.rc-upnext { flex: none; display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 18px; background: var(--surface); border: 1px solid rgba(var(--text-rgb), 0.06); text-align: left; transition: background-color 0.18s var(--ease), transform 0.1s var(--ease); }
.rc-upnext .rc-shot { border-radius: 11px; }
.rc-upnext b { display: block; margin-top: 7px; font-size: 15px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-upnext.is-empty { opacity: 0.4; pointer-events: none; }
.rc-upnext:active { transform: scale(0.98); }
.rc-peek { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 64px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid rgba(var(--text-rgb), 0.06); text-align: left; overflow: hidden; }
.rc-peek .rc-cap { display: flex; align-items: center; justify-content: space-between; }
.rc-peek .rc-cap svg { font-size: 16px; }
.rc-peek [data-notes-peek] { flex: 1; min-height: 0; overflow: hidden; font-size: 16px; line-height: 1.6; color: var(--text); white-space: pre-wrap; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.rc-peek.is-empty [data-notes-peek] { color: var(--muted); }
.rc-peek:active { background: var(--state-active-bg); }

/* ---- laser (the pad is the slide; the finger is the laser, drawn just above it so it stays in sight) ---- */
.rc-laser { position: relative; flex: none; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; max-height: 42vh; border-radius: 20px; overflow: hidden; background: var(--shot-bg); touch-action: none; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--laser) 45%, transparent); transition: box-shadow 0.2s var(--ease); }
.rc-laser.is-held { box-shadow: 0 0 0 2px var(--laser), 0 0 36px -4px color-mix(in srgb, var(--laser) 55%, transparent); }
.rc-laser img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rc-laser img:not([src]), .rc-laser img[src=""] { visibility: hidden; }
/* The show's own dot, small: a white core in the phone's color with its bloom (core PlayUIMode LASER). */
.rc-laser-dot { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, #fff 0 15%, var(--laser) 24% 42%, color-mix(in srgb, var(--laser) 35%, transparent) 52%, transparent 70%); }
/* A tap's answer on the pad (remote.js ring): a ring where it pressed, in the laser's color when the press hit something. */
.rc-laser-ring { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid rgba(var(--text-rgb), 0.7); opacity: 0; pointer-events: none; }
.rc-laser-ring.is-sent, .rc-laser-ring.is-hit { animation: rc-ring 0.45s var(--ease); }
.rc-laser-ring.is-hit { border-color: var(--laser); box-shadow: 0 0 16px -2px var(--laser); }
@keyframes rc-ring { from { opacity: 1; transform: scale(0.5); } to { opacity: 0; transform: scale(1.4); } }
.rc-laser-hint { flex: none; align-items: center; justify-content: center; gap: 9px; margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); }
.rc-laser-hint i { width: 8px; height: 8px; border-radius: 50%; background: var(--laser); box-shadow: 0 0 0 4px color-mix(in srgb, var(--laser) 24%, transparent); }
/* Two lines: how to point, how to press. */
.rc-laser-hint span { white-space: pre-line; line-height: 1.45; }

/* ---- notes ---- */
.rc-prompt-notes { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 2px 24px; -webkit-user-select: text; user-select: text; -webkit-mask-image: linear-gradient(#000 calc(100% - 32px), transparent); mask-image: linear-gradient(#000 calc(100% - 32px), transparent); }
.rc-notes { font-size: calc(24px * var(--notes-scale)); line-height: 1.55; letter-spacing: -0.012em; font-weight: 500; white-space: pre-wrap; }
.rc-notes.is-empty { color: var(--muted); font-weight: 400; }
.rc-notes-project { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(var(--text-rgb), 0.08); }
.rc-notes-project p:last-child { margin: 8px 0 0; font-size: calc(16px * var(--notes-scale)); line-height: 1.6; color: var(--muted); white-space: pre-wrap; }

/* ---- the dock: every press lives here, in the same place on every view ---- */
.rc-dock { flex: none; display: flex; flex-direction: column; gap: 8px; margin: 0 12px 8px; padding: 8px 10px 10px; border-radius: 32px; background: var(--float); border: 1px solid rgba(var(--text-rgb), 0.08); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.55); }
html[data-theme="light"] .rc-dock { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 44px -18px rgba(26, 25, 28, 0.22); }
@media (prefers-color-scheme: light) { html:not([data-theme]) .rc-dock { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 44px -18px rgba(26, 25, 28, 0.22); } }
/* In a browser tab the bottom edge belongs to Safari's floating bar — keep the dock off it. */
@media (display-mode: browser) { .rc-dock { margin-bottom: 44px; } }
.rc-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
.rc-tool { height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 20px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: -0.01em; transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.1s var(--ease); }
.rc-tool svg { font-size: 23px; stroke-width: 1.8; }
.rc-tool span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-tool:active { background: var(--state-active-bg); transform: scale(0.96); }
.rc-tool.is-on { background: var(--state-selected-bg); color: var(--text); font-weight: 600; }
.rc-tool-laser.is-on { color: var(--laser); background: color-mix(in srgb, var(--laser) 15%, transparent); }
.rc-drive { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
.rc-prev { height: 84px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), 0.16); color: var(--text); transition: background-color 0.18s var(--ease), transform 0.1s var(--ease); }
.rc-prev svg, .rc-next i svg { font-size: 28px; stroke-width: 2.3; }
.rc-prev:active, .rc-prev.is-pressed { background: var(--state-active-bg); transform: scale(0.96); }
.rc-next { height: 84px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 28px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text); text-align: left; transition: opacity 0.18s var(--ease), transform 0.1s var(--ease); }
.rc-next > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-next .rc-cap { color: var(--btn-text); opacity: 0.55; letter-spacing: 0.02em; }
.rc-next b { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-next i { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--btn-text) 10%, transparent); }
.rc-next:active, .rc-next.is-pressed { opacity: 0.9; transform: scale(0.97); }

/* ---- end · lost · fail ---- */
.rc-end, .rc-lost, .rc-fail { align-items: center; justify-content: center; padding: 24px; text-align: center; }
.rc-end-card { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 360px; }
.rc-end-card .rc-sub b { color: var(--text); font-variant-numeric: tabular-nums; }
.rc-end-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 22px; }
.rc-end-actions .rc-btn { width: 100%; }

/* ---- sheets: cards floating over the page, like the dock ---- */
.rc-sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; padding: 0 calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l)); background: rgba(20, 19, 22, 0.42); animation: rc-sheet-fade 0.2s var(--ease); }
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .rc-sheet { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } }
.rc-sheet[hidden] { display: none; }
@keyframes rc-sheet-fade { from { opacity: 0; } }
.rc-sheet-panel { width: 100%; max-height: 82vh; max-height: 82dvh; display: flex; flex-direction: column; padding-bottom: 14px; background: var(--float); color: var(--text); border-radius: 32px; border: 1px solid rgba(var(--text-rgb), 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 24px 60px -12px rgba(0, 0, 0, 0.50); animation: rc-sheet-up 0.24s var(--ease-spring); }
html[data-theme="light"] .rc-sheet-panel { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -12px rgba(26, 25, 28, 0.24); }
@keyframes rc-sheet-up { from { transform: translateY(24px); opacity: 0; } }
.rc-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 10px 22px; font-family: var(--global-font-title); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.rc-sheet-head b span { margin-left: 4px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-sheet-confirm { padding: 0 22px 22px; }
.rc-sheet-confirm .rc-sheet-head { padding-left: 0; padding-right: 0; }
.rc-sheet-confirm .rc-end-actions { margin-top: 16px; }
.rc-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; padding: 4px 16px 6px; overflow-y: auto; }
.rc-scene { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; transition: transform 0.1s var(--ease); }
.rc-scene .rc-shot { border-radius: 12px; }
.rc-scene.is-now .rc-shot { box-shadow: 0 0 0 2px var(--float), 0 0 0 4px var(--text); }
.rc-scene-meta { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 2px; font-size: 13px; font-weight: 600; }
.rc-scene-meta em { flex: none; font-style: normal; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-scene-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-scene-meta b { display: none; flex: none; margin-left: auto; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; line-height: 20px; }
.rc-scene.is-now .rc-scene-meta b { display: inline-block; }
.rc-scene:active { transform: scale(0.97); }
/* The list fades out at its foot, like the notes — what scrolls past the sheet's edge shows it is there. */
.rc-settings { display: flex; flex-direction: column; padding: 2px 16px 24px; overflow-y: auto; -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent); }
/* A clipping group would shrink in the column (its min-height is 0) and cut its own rows — it keeps its height, the list scrolls. */
.rc-group { flex: none; margin-bottom: 12px; border-radius: 18px; background: rgba(var(--text-rgb), 0.05); overflow: hidden; }
.rc-set-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px 8px 16px; font-size: 15px; font-weight: 500; text-align: left; }
.rc-set-row + .rc-set-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid rgba(var(--text-rgb), 0.08); }
.rc-set-row small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.rc-set-row-info { font-weight: 400; }
.rc-set-row-info .rc-muted { font-size: 14px; text-align: right; }
.rc-set-switch { cursor: pointer; }
.rc-set-action { justify-content: center; font-weight: 600; transition: background-color 0.18s var(--ease); }
.rc-set-action:active { background: var(--state-active-bg); }
.rc-set-action.is-danger { color: var(--error); }
.rc-set-note { margin: 0 8px 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.rc:not([data-screen="show"]) [data-show-only] { display: none; }
.rc-swatch { flex: none; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; background: var(--laser); box-shadow: 0 0 0 3px color-mix(in srgb, var(--laser) 24%, transparent); }
.rc-stepper { display: inline-flex; align-items: center; gap: 2px; border-radius: 999px; border: 1px solid rgba(var(--text-rgb), 0.16); }
.rc-stepper button { width: 42px; height: 38px; font-size: 18px; font-weight: 500; }
.rc-stepper b { min-width: 48px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.rc-switch { position: relative; width: 46px; height: 28px; flex: none; }
.rc-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.rc-switch i { position: absolute; inset: 0; border-radius: 999px; background: rgba(var(--text-rgb), 0.18); transition: background-color 0.18s var(--ease); }
.rc-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); transition: transform 0.18s var(--ease); }
.rc-switch input:checked + i { background: var(--text); }
.rc-switch input:checked + i::after { transform: translateX(18px); }

/* ---- status pill · fullscreen notice (dropdown popover shadow, DESIGN.md §6.2) ---- */
.rc-banner { position: fixed; z-index: 30; display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid rgba(var(--text-rgb), 0.10); box-shadow: 0 1px 2px rgba(var(--brand-iris-rgb), 0.04), 0 16px 40px rgba(var(--brand-iris-rgb), 0.14); font-size: 13px; font-weight: 500; color: var(--text); animation: rc-fade 0.3s var(--ease); }
.rc-banner { left: 50%; top: calc(10px + var(--safe-t)); transform: translateX(-50%); height: 34px; padding: 0 14px; border-radius: 999px; max-width: calc(100% - 28px); white-space: nowrap; }
.rc-banner i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: rc-pulse 1.2s var(--ease) infinite; flex: none; }
.rc-banner.is-ok i { background: var(--success); animation: none; }
.rc-banner.is-warn i { background: var(--error); }
/* In the flow between the top bar and the view — it pushes them down instead of covering a control, and a sheet covers it like everything else. */
.rc-pending { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid rgba(var(--text-rgb), 0.10); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text); animation: rc-fade 0.3s var(--ease); }
.rc-pending svg { flex: none; font-size: 18px; color: var(--muted); }

/* ---- a wide screen (a phone on its side, a tablet across): the view on the left, the side and the dock on the right ---- */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
    .rc[data-screen="show"] .rc-show { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top top" "pending pending" "view side" "view dock"; }
    .rc-show .rc-top { grid-area: top; }
    .rc-show .rc-pending { grid-area: pending; }
    .rc-body { display: contents; }
    .rc-view { grid-area: view; order: 0 !important; justify-content: center; padding: 4px 8px 12px 16px; }
    .rc-side { grid-area: side; padding: 4px 16px 12px 8px; }
    .rc-dock { grid-area: dock; margin-left: 8px; }
    .rc-hero, .rc-laser { max-height: 100%; }
    .rc[data-mode="prompt"] .rc-upnext { display: grid; }
    .rc-cover { width: min(46%, 420px); }
}
@media (orientation: landscape) and (max-height: 500px) {
    .rc-top { min-height: 48px; padding-top: 4px; }
    .rc-upnext { display: none !important; }
    .rc-tool { height: 46px; }
    .rc-drive { grid-template-columns: 64px minmax(0, 1fr); }
    .rc-prev, .rc-next { height: 64px; }
    .rc-next { padding-left: 20px; }
    .rc-next i { width: 46px; height: 46px; }
    .rc-ready-body { flex-direction: row; gap: 24px; text-align: left; }
    .rc-ready-text { align-items: flex-start; }
    .rc-cover { margin: 0; }
}
/* A short phone (a small one, or a browser's bars taking the height): the slide gives way first, the next card goes. */
@media (orientation: portrait) and (max-height: 720px) {
    .rc-hero, .rc-laser { width: min(100%, calc(32dvh * 16 / 9)); align-self: center; }
    .rc-upnext, .rc[data-laser] .rc-peek { display: none; }
    .rc-peek { min-height: 0; }
}
/* A tablet held upright: the phone's column, not stretched past a comfortable width. */
@media (orientation: portrait) and (min-width: 640px) {
    .rc-show > .rc-top, .rc-show > .rc-pending, .rc-body, .rc-dock { width: 100%; max-width: 680px; margin-left: auto; margin-right: auto; }
    .rc-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
    .rc-sheet { align-items: center; justify-content: center; }
    .rc-sheet-panel { max-width: 640px; }
    .rc-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .rc-aura, .rc-pair-dots i, .rc-banner i, .rc-conn i, .rc-waiting i, .rc-screen, .rc-sheet, .rc-sheet-panel, .rc-banner, .rc-pending, .rc-code-cells i::after { animation: none; }
    .rc-rail i::after, .rc-btn, .rc-tool, .rc-prev, .rc-next, .rc-upnext, .rc-laser, .rc-timer circle { transition: none; }
}