/* 제품 동작 예시(HTML·CSS로 그린 장면) 스타일. 원본은 2026-10-05 디자인 캔버스의 kit.css 와 장면 조각이다.
   장면 안의 길이는 모두 calc(var(--u) * N) — 무대(.st, .film-app)가 크기 컨테이너로 --u(설계 1px)를 정한다.
   선택자는 .sc-<장면> / .k-<부품> 접두로만 쓴다. 장면의 기본 스타일은 그 장면의 끝 화면이다(동작 줄이기에서 보이는 화면). */
@layer components {
/* ───────── scene kit (lengths in design px via --u, set by the stage) ───────── */
.sc { position: absolute; inset: 0; font-family: var(--f-ui); font-size: calc(var(--u) * 12); line-height: 1.45; color: var(--ui-text); letter-spacing: 0; word-break: keep-all; overflow-wrap: normal; -webkit-font-smoothing: antialiased; }
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc p { margin: 0; }
.sc svg { display: block; }
.k-win { position: absolute; display: flex; flex-direction: column; overflow: hidden; background: var(--ui-ground); border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 12); box-shadow: 0 calc(var(--u) * 28) calc(var(--u) * 64) rgba(5, 12, 9, 0.34), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(5, 12, 9, 0.22); }
.k-cap { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 12); background: var(--ui-chrome); border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.k-cap b { color: var(--ui-text); font-weight: 600; }
.k-tab { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 7); background: rgba(255, 255, 255, 0.07); color: var(--ui-text); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.k-ctl { display: flex; align-items: center; gap: calc(var(--u) * 16); margin-left: auto; color: var(--ui-muted); }
.k-ctl svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.k-ico { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; object-fit: contain; }
.k-ico.tile { padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 4); background: #F3F2EE; }
.k-svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.k-mark { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; }
.k-term { flex: 1; overflow: hidden; padding: calc(var(--u) * 14) calc(var(--u) * 16); background: var(--ui-terminal); color: #D5DBE1; font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); line-height: 1.65; white-space: pre-wrap; }
.k-term p { margin: 0; }
.k-dim { color: var(--ui-muted); }
.k-ok { color: var(--ui-ok); }
.k-warn { color: var(--ui-warn); }
.k-info { color: var(--ui-info); }
.k-diff { font-family: var(--f-mono); font-size: calc(var(--u) * 11); line-height: 1.75; }
.k-hunk { padding: calc(var(--u) * 3) calc(var(--u) * 10); color: var(--ui-info); font-family: var(--f-mono); font-size: calc(var(--u) * 11); white-space: pre; }
.k-dl { display: grid; grid-template-columns: calc(var(--u) * 28) calc(var(--u) * 28) calc(var(--u) * 14) 1fr; padding-right: calc(var(--u) * 10); color: #C9D1D9; white-space: pre; }
.k-dl > span:nth-child(-n + 2) { padding-right: calc(var(--u) * 6); color: #6B7480; text-align: right; }
.k-dl.add { background: rgba(46, 160, 67, 0.2); color: #B8F0C8; }
.k-dl.del { background: rgba(248, 81, 73, 0.17); color: #FFC1BC; }
.k-mod { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 18); height: calc(var(--u) * 17); padding: 0 calc(var(--u) * 5); border: 1px solid rgba(232, 163, 61, 0.5); border-radius: calc(var(--u) * 4); background: rgba(232, 163, 61, 0.16); color: #F2B65A; font-size: calc(var(--u) * 10.5); font-weight: 700; }
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 10); border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 6); background: rgba(255, 255, 255, 0.06); color: var(--ui-text); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.k-btn.pri { border-color: transparent; background: var(--ui-brand); color: #FFFFFF; font-weight: 600; }
.k-chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); border: 1px solid rgba(111, 211, 160, 0.38); border-radius: calc(var(--u) * 6); background: rgba(28, 141, 94, 0.18); color: #BDEBD3; font-size: calc(var(--u) * 11); white-space: nowrap; }
.k-chip b { color: #FFFFFF; font-weight: 600; }
.k-input { display: flex; align-items: center; gap: calc(var(--u) * 8); min-height: calc(var(--u) * 34); padding: calc(var(--u) * 8) calc(var(--u) * 10); border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 8); background: var(--ui-terminal); color: var(--ui-text); font-size: calc(var(--u) * 12); }
.k-dot { display: inline-block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); flex: none; border-radius: 50%; background: #7C8794; }
.k-dot.work { background: #FF9F0A; }
.k-dot.need { background: #56D69A; }
.k-dot.end { background: #4A525C; }
.k-cursor { position: absolute; left: 0; top: 0; z-index: 40; width: calc(var(--u) * 20); height: calc(var(--u) * 24); pointer-events: none; filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, 0.4)); }
.k-ring { position: absolute; left: 0; top: 0; z-index: 39; width: calc(var(--u) * 30); height: calc(var(--u) * 30); margin: calc(var(--u) * -15) 0 0 calc(var(--u) * -15); border: calc(var(--u) * 2) solid rgba(111, 211, 160, 0.95); border-radius: 50%; opacity: 0; pointer-events: none; }
.k-caret { display: inline-block; width: calc(var(--u) * 7); height: 1.2em; vertical-align: text-bottom; background: currentColor; animation: k-blink 1.05s steps(1) infinite; }
@keyframes k-blink { 50% { opacity: 0; } }
.k-sel { position: absolute; z-index: 20; border: calc(var(--u) * 1.5) solid #3FB984; border-radius: calc(var(--u) * 6); background: rgba(63, 185, 132, 0.12); pointer-events: none; }
.k-sel-label { position: absolute; left: calc(var(--u) * -1.5); bottom: 100%; display: flex; align-items: center; height: calc(var(--u) * 19); margin-bottom: calc(var(--u) * 4); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 4); background: #1C8D5E; color: #FFFFFF; font-size: calc(var(--u) * 10.5); font-weight: 600; white-space: nowrap; }
.k-toast { position: absolute; z-index: 30; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 14); border: 1px solid rgba(111, 211, 160, 0.35); border-radius: calc(var(--u) * 10); background: #20262E; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(0, 0, 0, 0.38); color: var(--ui-text); font-size: calc(var(--u) * 12); white-space: nowrap; }
.k-toast b { font-weight: 600; }
.k-check { display: grid; place-items: center; width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; border-radius: 50%; background: var(--ui-brand); color: #FFFFFF; font-size: calc(var(--u) * 11); font-weight: 700; }
.k-note { position: absolute; z-index: 35; display: inline-flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 14); border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(14, 27, 21, 0.16); color: #0E1B15; font-size: calc(var(--u) * 12.5); font-weight: 600; white-space: nowrap; }
.k-page { position: relative; overflow: hidden; background: #F7F8F5; color: #14211B; font-family: var(--f-ui); }
.k-pbtn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 14); border: 1px solid #C9D2CC; border-radius: calc(var(--u) * 8); background: #FFFFFF; color: #14211B; font-size: calc(var(--u) * 12.5); font-weight: 600; white-space: nowrap; }
.k-pbtn.on { border-color: transparent; background: #1C8D5E; color: #FFFFFF; }
.k-phone { position: absolute; padding: calc(var(--u) * 9); border-radius: calc(var(--u) * 36); background: #0A0D11; box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(5, 12, 9, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.k-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--u) * 28); background: var(--ui-ground); }
.sc img { max-width: none; }

/* ───────── scenes: film ───────── */
/* ===== orke product film — one persistent desktop driven by .ch-1 … .ch-5 on the root =====
   Base rules = chapter 1 end state. Each chapter writes its END state as plain rules and its motion
   as film-cN-* keyframes (7s, once, both). Windows, desk, dock bar and phone glide with transitions. */
.sc-film { overflow: hidden; }
.sc-film p { margin: 0; }

/* ---------- desk group (moves as one in chapter 5) ---------- */
.sc-film .film-desk { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease; }
.sc-film.ch-5 .film-desk { transform: translateX(calc(var(--u) * -140)) scale(.88); opacity: .45; }

/* ---------- windows: z-order + dim glide between chapters ---------- */
.sc-film .film-win { box-sizing: border-box; transform-origin: 50% 50%; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease, z-index .6s linear; }
.sc-film .film-term { left: calc(var(--u) * 40); top: calc(var(--u) * 34); width: calc(var(--u) * 540); height: calc(var(--u) * 470); z-index: 1; transform: scale(.985); }
.sc-film .film-web { left: calc(var(--u) * 330); top: calc(var(--u) * 22); width: calc(var(--u) * 830); height: calc(var(--u) * 520); z-index: 4; transform: scale(1); }
.sc-film .film-git { left: calc(var(--u) * 120); top: calc(var(--u) * 28); width: calc(var(--u) * 960); height: calc(var(--u) * 520); z-index: 6; opacity: 0; transform: translateY(calc(var(--u) * 26)) scale(.96); transform-origin: 50% 100%; }
.sc-film.ch-2 .film-term { z-index: 4; transform: scale(1); }
.sc-film.ch-2 .film-web, .sc-film.ch-4 .film-web { z-index: 1; transform: scale(.985); }
.sc-film.ch-4 .film-git { opacity: 1; transform: translateY(0) scale(1); }

/* ---------- caption details ---------- */
.sc-film .film-win .film-tab { gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 9); white-space: nowrap; }
.sc-film .film-tab .film-tmark { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: none; }
.sc-film .film-sock { width: calc(var(--u) * 8); height: calc(var(--u) * 8); box-sizing: border-box; border-radius: 50%; border: calc(var(--u) * 2) solid var(--ui-brand); margin-left: calc(var(--u) * 2); flex: none; }
.sc-film .film-tabx { width: calc(var(--u) * 9); height: calc(var(--u) * 9); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; opacity: .55; flex: none; }
.sc-film .film-newtab { margin-left: calc(var(--u) * 10); font-size: calc(var(--u) * 16); line-height: 1; color: var(--ui-muted); }

/* ================= TERMINAL ================= */
.sc-film .film-term .film-tbody { position: relative; white-space: normal; }
.sc-film .film-tin { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: calc(var(--u) * 14); bottom: calc(var(--u) * 12); display: flex; flex-direction: column; }
.sc-film .film-thead { flex: none; width: calc(var(--u) * 300); box-sizing: border-box; padding: calc(var(--u) * 5) calc(var(--u) * 10); border: 1px solid rgba(217,119,87,.55); border-radius: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 12); }
.sc-film .film-thead p { white-space: nowrap; }
.sc-film .film-spark { color: #D97757; margin-right: calc(var(--u) * 6); }
.sc-film .film-tb { color: #F4F6F8; font-weight: 600; }
.sc-film .film-tl { flex: none; white-space: nowrap; opacity: 0; }
.sc-film .film-tin .film-tgap { margin-top: calc(var(--u) * 8); }
.sc-film .film-tprompt { padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: calc(var(--u) * 4); background: rgba(255,255,255,.06); color: #F4F6F8; }
.sc-film .film-tsub { padding-left: calc(var(--u) * 16); }
.sc-film .film-tgt { color: var(--ui-muted); margin-right: calc(var(--u) * 7); }
.sc-film .film-bul { margin-right: calc(var(--u) * 7); }
.sc-film .film-tred { color: var(--ui-danger); }
.sc-film .film-tdiff { flex: none; margin: calc(var(--u) * 5) 0 0 calc(var(--u) * 16); border: 1px solid rgba(255,255,255,.08); border-radius: calc(var(--u) * 6); overflow: hidden; opacity: 0; }
.sc-film .film-cx { white-space: pre; overflow: hidden; }
.sc-film .film-tsp { flex: 1; }
.sc-film .film-tstat { flex: none; position: relative; height: calc(var(--u) * 19); }
.sc-film .film-tsr, .sc-film .film-tsd { position: absolute; left: 0; top: 0; height: calc(var(--u) * 19); display: flex; align-items: center; gap: calc(var(--u) * 8); white-space: nowrap; opacity: 0; }
.sc-film .film-tsr { color: #E9A58C; }
.sc-film .film-spin { width: calc(var(--u) * 10); height: calc(var(--u) * 10); box-sizing: border-box; border-radius: 50%; border: calc(var(--u) * 1.5) solid #D97757; box-shadow: inset calc(var(--u) * 4) 0 0 0 #D97757; flex: none; }
.sc-film .film-tinput { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 30); margin-top: calc(var(--u) * 8); padding: 0 calc(var(--u) * 10); box-sizing: border-box; border: 1px solid rgba(255,255,255,.16); border-radius: calc(var(--u) * 6); }
.sc-film .film-thint { flex: none; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 10.5); line-height: 1.4; color: #6F7985; }
/* terminal end states: lines from chapter 2 on; status run in 2, done from 3 */
.sc-film.ch-2 .film-tl, .sc-film.ch-3 .film-tl, .sc-film.ch-4 .film-tl, .sc-film.ch-5 .film-tl,
.sc-film.ch-2 .film-tdiff, .sc-film.ch-3 .film-tdiff, .sc-film.ch-4 .film-tdiff, .sc-film.ch-5 .film-tdiff { opacity: 1; }
.sc-film.ch-2 .film-tsr { opacity: 1; }
.sc-film.ch-3 .film-tsd, .sc-film.ch-4 .film-tsd, .sc-film.ch-5 .film-tsd { opacity: 1; }

/* ================= WEB WINDOW ================= */
.sc-film .film-wtool { position: absolute; left: 0; right: 0; top: calc(var(--u) * 34); height: calc(var(--u) * 44); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 14); background: #161B22; border-bottom: 1px solid var(--ui-border); color: #AFB9C5; }
.sc-film .film-tmuted { opacity: .4; }
.sc-film .film-reload { transform-origin: 50% 50%; }
.sc-film .film-addr { flex: 1; min-width: 0; height: calc(var(--u) * 30); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); border-radius: calc(var(--u) * 15); background: #1A2028; border: 1px solid rgba(255,255,255,.06); font-size: calc(var(--u) * 12); color: #C3CCD7; white-space: nowrap; }
.sc-film .film-addric { width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: none; fill: none; stroke: #76818E; stroke-width: 1.5; stroke-linecap: round; }
.sc-film .film-addrp { color: #76818E; }
.sc-film .film-agent { width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: none; border-radius: calc(var(--u) * 7); display: flex; align-items: center; justify-content: center; background: #232A33; box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(111,211,160,.4); }
.sc-film .film-agent .film-amark { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.sc-film .film-load { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * -1); height: calc(var(--u) * 2); background: var(--ui-ok); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.sc-film .film-wbody { position: absolute; left: 0; right: 0; top: calc(var(--u) * 78); bottom: 0; }

/* ----- the light page ----- */
.sc-film .film-web .film-page { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 572); padding: 0; overflow: hidden; }
.sc-film .film-pscroll { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 560); }
.sc-film .film-pnav { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 50); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 32); border-bottom: 1px solid #E3E8E2; }
.sc-film .film-pbrand { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 14); font-weight: 700; color: #14211B; }
.sc-film .film-pnav .film-pmk { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; }
.sc-film .film-plinks { display: flex; gap: calc(var(--u) * 22); font-size: calc(var(--u) * 12); color: #4F6157; }
.sc-film .film-plabel { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 84); font-size: calc(var(--u) * 10.5); line-height: calc(var(--u) * 14); font-weight: 600; letter-spacing: calc(var(--u) * 0.9); color: #2F7A55; white-space: nowrap; }
.sc-film .film-ph { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 104); font-size: calc(var(--u) * 34); line-height: 1.22; font-weight: 800; letter-spacing: calc(var(--u) * -0.7); color: #14211B; white-space: nowrap; }
.sc-film .film-pcopy { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 196); font-size: calc(var(--u) * 13.5); line-height: calc(var(--u) * 20); color: #4F6157; white-space: nowrap; }
.sc-film .film-pos { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 302); font-size: calc(var(--u) * 11.5); color: #6B7B72; white-space: nowrap; }
.sc-film .film-page .film-dlb { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 244); width: calc(var(--u) * 178); height: calc(var(--u) * 40); box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); border-radius: calc(var(--u) * 8); background: #FFFFFF; border: 1px solid #C5CFC8; font-size: calc(var(--u) * 13); font-weight: 600; color: #24342B; white-space: nowrap; }
.sc-film .film-page .film-dla { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 238); width: calc(var(--u) * 214); height: calc(var(--u) * 52); box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 9); border-radius: calc(var(--u) * 10); background: var(--ui-brand); border: 1px solid var(--ui-brand); font-size: calc(var(--u) * 14.5); font-weight: 700; color: #FFFFFF; white-space: nowrap; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(28,141,94,.28); transform-origin: 50% 50%; opacity: 0; }
.sc-film .film-dlic { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-dlic2 { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* page illustration */
.sc-film .film-ill-t { position: absolute; left: calc(var(--u) * 330); top: calc(var(--u) * 86); width: calc(var(--u) * 176); height: calc(var(--u) * 114); border-radius: calc(var(--u) * 10); background: #15181D; box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 28) rgba(20,33,27,.22); }
.sc-film .film-ill-w { position: absolute; left: calc(var(--u) * 372); top: calc(var(--u) * 160); width: calc(var(--u) * 176); height: calc(var(--u) * 118); box-sizing: border-box; border-radius: calc(var(--u) * 10); background: #FFFFFF; border: 1px solid #DCE3DD; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 30) rgba(20,33,27,.16); overflow: hidden; }
.sc-film .film-ill-b { position: absolute; display: block; border-radius: calc(var(--u) * 3); }
.sc-film .film-ill-t .film-ill-b { background: rgba(255,255,255,.14); height: calc(var(--u) * 5); }
.sc-film .film-ill-w .film-ill-b { background: #D5DDD7; height: calc(var(--u) * 5); }
.sc-film .film-ill-pr { position: absolute; left: calc(var(--u) * 12); top: calc(var(--u) * 24); font-family: var(--f-mono); font-size: calc(var(--u) * 12); color: var(--ui-ok); }
.sc-film .film-ill-top { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 20); background: #F1F4F1; }
.sc-film .film-ill-t .film-ib0 { left: calc(var(--u) * 10); top: calc(var(--u) * 8); width: calc(var(--u) * 46); height: calc(var(--u) * 8); background: rgba(255,255,255,.1); }
.sc-film .film-ill-t .film-ib1 { left: calc(var(--u) * 32); top: calc(var(--u) * 31); width: calc(var(--u) * 70); background: rgba(255,255,255,.26); }
.sc-film .film-ill-t .film-ib2 { left: calc(var(--u) * 12); top: calc(var(--u) * 52); width: calc(var(--u) * 124); }
.sc-film .film-ill-t .film-ib3 { left: calc(var(--u) * 12); top: calc(var(--u) * 64); width: calc(var(--u) * 92); }
.sc-film .film-ill-t .film-ib4 { left: calc(var(--u) * 12); top: calc(var(--u) * 76); width: calc(var(--u) * 108); }
.sc-film .film-ill-t .film-ib5 { left: calc(var(--u) * 12); top: calc(var(--u) * 94); width: calc(var(--u) * 64); background: rgba(111,211,160,.55); }
.sc-film .film-ill-w .film-iw0 { left: calc(var(--u) * 10); top: calc(var(--u) * 6); width: calc(var(--u) * 64); height: calc(var(--u) * 8); background: #E1E7E2; }
.sc-film .film-ill-w .film-iw1 { left: calc(var(--u) * 12); top: calc(var(--u) * 32); width: calc(var(--u) * 92); height: calc(var(--u) * 9); background: #2B3A31; }
.sc-film .film-ill-w .film-iw2 { left: calc(var(--u) * 12); top: calc(var(--u) * 50); width: calc(var(--u) * 132); }
.sc-film .film-ill-w .film-iw3 { left: calc(var(--u) * 12); top: calc(var(--u) * 60); width: calc(var(--u) * 100); }
.sc-film .film-ill-w .film-iw4 { left: calc(var(--u) * 12); top: calc(var(--u) * 78); width: calc(var(--u) * 58); height: calc(var(--u) * 16); border-radius: calc(var(--u) * 8); background: var(--ui-brand); }
/* below the fold */
.sc-film .film-pdiv { position: absolute; left: calc(var(--u) * 40); right: calc(var(--u) * 40); top: calc(var(--u) * 334); height: 0; border-top: 1px solid #E3E8E2; }
.sc-film .film-pflabel { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 350); font-size: calc(var(--u) * 11); font-weight: 700; letter-spacing: calc(var(--u) * 0.4); color: #2F7A55; }
.sc-film .film-pcard { position: absolute; top: calc(var(--u) * 372); width: calc(var(--u) * 156); height: calc(var(--u) * 84); box-sizing: border-box; padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 10); background: #FFFFFF; border: 1px solid #E1E7E2; }
.sc-film .film-pc1 { left: calc(var(--u) * 40); }
.sc-film .film-pc2 { left: calc(var(--u) * 208); }
.sc-film .film-pc3 { left: calc(var(--u) * 376); }
.sc-film .film-pcic { display: block; width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: none; stroke: var(--ui-brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-pct { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); font-weight: 700; color: #14211B; }
.sc-film .film-pcd { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 11); color: #6B7B72; white-space: nowrap; }
.sc-film .film-pmore { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 484); font-size: calc(var(--u) * 16); font-weight: 700; color: #14211B; white-space: nowrap; }
.sc-film .film-pmore2 { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 510); font-size: calc(var(--u) * 12); color: #6B7B72; white-space: nowrap; }
/* page overlays (fixed to the viewport, not scrolled) */
.sc-film .film-pedge { position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(28,141,94,.45); opacity: 0; }
.sc-film .film-hov1 { position: absolute; left: calc(var(--u) * 36); top: calc(var(--u) * 240); width: calc(var(--u) * 186); height: calc(var(--u) * 48); box-sizing: border-box; border: calc(var(--u) * 1.5) solid rgba(28,141,94,.65); border-radius: calc(var(--u) * 10); background: rgba(28,141,94,.06); opacity: 0; }
.sc-film .film-page .film-sel { left: calc(var(--u) * 36); top: calc(var(--u) * 240); width: calc(var(--u) * 186); height: calc(var(--u) * 48); box-sizing: border-box; border-radius: calc(var(--u) * 10); transform-origin: 50% 50%; opacity: 1; }
.sc-film .film-hov3 { position: absolute; left: calc(var(--u) * 36); top: calc(var(--u) * 234); width: calc(var(--u) * 222); height: calc(var(--u) * 60); box-sizing: border-box; border: calc(var(--u) * 1.5) solid rgba(111,211,160,.9); border-radius: calc(var(--u) * 13); background: rgba(111,211,160,.08); opacity: 0; }
.sc-film .film-pthumb { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * 4); width: calc(var(--u) * 4); height: calc(var(--u) * 340); border-radius: calc(var(--u) * 2); background: rgba(20,33,27,.3); opacity: 0; }
.sc-film .film-flash { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #FFFFFF; opacity: 0; }

/* ----- browser agent panel ----- */
.sc-film .film-side { position: absolute; right: 0; top: 0; bottom: 0; width: calc(var(--u) * 256); box-sizing: border-box; background: #171C23; border-left: 1px solid var(--ui-border); }
.sc-film .film-phead { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 12); height: calc(var(--u) * 22); display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); font-weight: 600; color: #D8E0E8; white-space: nowrap; }
.sc-film .film-phead .film-hmark { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; }
.sc-film .film-px { margin-left: auto; width: calc(var(--u) * 14); height: calc(var(--u) * 14); flex: none; fill: none; stroke: #8D99A6; stroke-width: 1.5; stroke-linecap: round; }
.sc-film .film-psess { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 42); height: calc(var(--u) * 34); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 10); background: #0D1116; border: 1px solid rgba(255,255,255,.07); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 12); color: #C8D2DD; }
.sc-film .film-psname { flex: 1; white-space: nowrap; }
.sc-film .film-wst { position: relative; width: calc(var(--u) * 58); height: calc(var(--u) * 16); flex: none; }
.sc-film .film-wst-wait, .sc-film .film-wst-work { position: absolute; right: 0; top: 0; height: calc(var(--u) * 16); display: flex; align-items: center; gap: calc(var(--u) * 5); white-space: nowrap; font-size: calc(var(--u) * 10.5); }
.sc-film .film-wst-wait { color: #7D8B99; opacity: 0; }
.sc-film .film-wst-work { color: #C2CBD5; opacity: 1; }
.sc-film .film-chev { width: calc(var(--u) * 12); height: calc(var(--u) * 12); flex: none; fill: none; stroke: #9CABB9; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-intro { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 100); text-align: center; opacity: 0; }
.sc-film .film-intro .film-emb { display: block; width: calc(var(--u) * 36); height: calc(var(--u) * 36); margin: 0 auto calc(var(--u) * 10); }
.sc-film .film-intro-t { font-size: calc(var(--u) * 12.5); font-weight: 600; color: #D1DAE4; }
.sc-film .film-intro-c { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); line-height: 1.6; color: #8794A2; }
.sc-film .film-bubble { position: absolute; left: calc(var(--u) * 24); right: calc(var(--u) * 12); top: calc(var(--u) * 92); box-sizing: border-box; padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 9); background: #232A33; border-radius: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 4) calc(var(--u) * 12); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 6); }
.sc-film .film-bubble-t { font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 18); color: #E1E8EF; white-space: nowrap; }
.sc-film .film-sentline { position: absolute; right: calc(var(--u) * 12); top: calc(var(--u) * 164); font-size: calc(var(--u) * 10.5); color: #8D99A6; white-space: nowrap; }
.sc-film .film-jevrow { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 192); height: calc(var(--u) * 32); box-sizing: border-box; background: #0D1116; border: 1px solid rgba(111,211,160,.22); border-radius: calc(var(--u) * 8); opacity: 0; }
.sc-film .film-jrun, .sc-film .film-jdone { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-film .film-jrun { color: #BFE9D2; opacity: 0; }
.sc-film .film-jdone { color: #9FD9B8; opacity: 1; }
.sc-film .film-jdot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); flex: none; border-radius: 50%; background: var(--ui-ok); }
.sc-film .film-tag { margin-left: auto; padding: calc(var(--u) * 1) calc(var(--u) * 5); border: 1px solid rgba(255,255,255,.14); border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 10); line-height: 1.3; color: #9AA3AE; }
.sc-film .film-pctx { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 252); height: calc(var(--u) * 40); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 10); background: #0D1116; border: 1px solid rgba(255,255,255,.05); border-radius: calc(var(--u) * 8); }
.sc-film .film-pctx-i { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; object-fit: contain; }
.sc-film .film-pctx-t { display: flex; flex-direction: column; gap: calc(var(--u) * 2); line-height: 1.2; white-space: nowrap; }
.sc-film .film-pctx-a { font-size: calc(var(--u) * 10); color: #8794A2; }
.sc-film .film-pctx-b { font-size: calc(var(--u) * 11.5); color: #BAC6D3; }
.sc-film .film-side .film-comp { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 300); height: calc(var(--u) * 106); min-height: 0; box-sizing: border-box; display: block; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: calc(var(--u) * 14); background: #0D1116; box-shadow: 0 0 0 0 rgba(111,211,160,0); }
.sc-film .film-comp .film-cchip { position: absolute; left: calc(var(--u) * 10); top: calc(var(--u) * 10); transform-origin: 0 50%; opacity: 0; white-space: nowrap; }
.sc-film .film-ctext { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 42); height: calc(var(--u) * 18); font-size: calc(var(--u) * 12.5); line-height: calc(var(--u) * 18); color: #DBE4ED; overflow: hidden; }
.sc-film .film-ctools { position: absolute; left: calc(var(--u) * 10); right: calc(var(--u) * 10); top: calc(var(--u) * 68); height: calc(var(--u) * 28); display: flex; align-items: center; gap: calc(var(--u) * 6); }
.sc-film .film-tool { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 7); display: flex; align-items: center; justify-content: center; color: #A1ADBA; background-color: rgba(28,141,94,0); }
.sc-film .film-toolic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-send { margin-left: auto; width: calc(var(--u) * 28); height: calc(var(--u) * 28); flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #E8EBEF; color: #0D1116; transform-origin: 50% 50%; }
.sc-film .film-sendic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-tip { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 342); height: calc(var(--u) * 20); box-sizing: border-box; display: flex; align-items: center; padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 5); background: #2A303A; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0,0,0,.35); font-size: calc(var(--u) * 10.5); color: #E8EBEF; white-space: nowrap; opacity: 0; }
.sc-film .film-hint { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 414); text-align: center; font-size: calc(var(--u) * 10); color: #728190; white-space: nowrap; }
/* typed text with a caret that rides the reveal edge (track = text width) */
.sc-film .film-typed { position: relative; display: inline-block; vertical-align: top; white-space: nowrap; }
.sc-film .film-tx { display: inline-block; white-space: nowrap; }
.sc-film .film-trk { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateX(-100%); opacity: 0; }
.sc-film .film-trk .film-caret { position: absolute; right: calc(var(--u) * -2); top: calc(var(--u) * 2); bottom: calc(var(--u) * 2); height: auto; margin: 0; }
.sc-film .film-ctext .film-tx { opacity: 0; }
/* web end states */
.sc-film.ch-3 .film-page .film-dlb, .sc-film.ch-4 .film-page .film-dlb, .sc-film.ch-5 .film-page .film-dlb { opacity: 0; }
.sc-film.ch-3 .film-page .film-dla, .sc-film.ch-4 .film-page .film-dla, .sc-film.ch-5 .film-page .film-dla { opacity: 1; }
.sc-film.ch-3 .film-page .film-sel, .sc-film.ch-4 .film-page .film-sel, .sc-film.ch-5 .film-page .film-sel { opacity: 0; }
.sc-film.ch-3 .film-jevrow, .sc-film.ch-4 .film-jevrow, .sc-film.ch-5 .film-jevrow { opacity: 1; }
.sc-film.ch-3 .film-wst-wait, .sc-film.ch-4 .film-wst-wait, .sc-film.ch-5 .film-wst-wait { opacity: 1; }
.sc-film.ch-3 .film-wst-work, .sc-film.ch-4 .film-wst-work, .sc-film.ch-5 .film-wst-work { opacity: 0; }

/* ================= GIT WINDOW ================= */
.sc-film .film-gcapimg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; object-fit: contain; }
.sc-film .film-gcapt { margin-left: calc(var(--u) * 8); white-space: nowrap; }
.sc-film .film-gpath { margin-left: calc(var(--u) * 12); color: #838C99; white-space: nowrap; }
.sc-film .film-gtool { position: absolute; left: 0; right: 0; top: calc(var(--u) * 34); height: calc(var(--u) * 42); box-sizing: border-box; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 10); background: #1B1F26; border-bottom: 1px solid var(--ui-border); }
.sc-film .film-ggrp { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.sc-film .film-gtool .film-gb { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 9); box-sizing: border-box; font-size: calc(var(--u) * 11.5); font-weight: 400; color: #C9D1DA; white-space: nowrap; }
.sc-film .film-gic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-gsep { width: calc(var(--u) * 1); height: calc(var(--u) * 18); margin: 0 calc(var(--u) * 2); background: var(--ui-border); }
.sc-film .film-gctr { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); }
.sc-film .film-gbr { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 10); box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 6); background: #0D1116; font-size: calc(var(--u) * 12); font-weight: 600; color: #E8EBEF; white-space: nowrap; }
.sc-film .film-gcar { font-size: calc(var(--u) * 10); color: #838C99; }
.sc-film .film-gtrack { font-size: calc(var(--u) * 11.5); color: #838C99; white-space: nowrap; }
.sc-film .film-gbody { position: absolute; left: 0; right: 0; top: calc(var(--u) * 76); bottom: calc(var(--u) * 22); }
.sc-film .film-gside { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 190); box-sizing: border-box; padding: calc(var(--u) * 8); background: #1B1F26; border-right: 1px solid var(--ui-border); font-size: calc(var(--u) * 11.5); }
.sc-film .film-gmode { display: flex; align-items: center; gap: calc(var(--u) * 9); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 12); color: #9AA3AE; white-space: nowrap; }
.sc-film .film-gmode + .film-gmode { margin-top: calc(var(--u) * 2); }
.sc-film .film-gmsel { background: rgba(255,255,255,.09); color: #E8EBEF; font-weight: 600; }
.sc-film .film-gmic { width: calc(var(--u) * 14); height: calc(var(--u) * 14); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-gbadge { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 18); height: calc(var(--u) * 17); padding: 0 calc(var(--u) * 5); box-sizing: border-box; border-radius: calc(var(--u) * 9); background: rgba(255,255,255,.12); font-size: calc(var(--u) * 10.5); font-weight: 600; color: #E8EBEF; transform-origin: 50% 50%; }
.sc-film .film-gfilter { display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 28); margin: calc(var(--u) * 8) 0 calc(var(--u) * 6); padding: 0 calc(var(--u) * 8); box-sizing: border-box; background: #0D1116; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 6); color: #838C99; }
.sc-film .film-ggt { display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 24); margin-top: calc(var(--u) * 4); padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 11); color: #838C99; }
.sc-film .film-gchev { width: calc(var(--u) * 10); height: calc(var(--u) * 10); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-gitem { display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 24); padding-left: calc(var(--u) * 24); color: #C9D1DA; white-space: nowrap; }
.sc-film .film-gon { padding-left: calc(var(--u) * 9); font-weight: 600; color: #E8EBEF; }
.sc-film .film-gchk { width: calc(var(--u) * 10); height: calc(var(--u) * 10); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-gsub { font-size: calc(var(--u) * 10.5); color: #838C99; }
.sc-film .film-gmid { position: absolute; left: calc(var(--u) * 190); top: 0; bottom: 0; width: calc(var(--u) * 270); box-sizing: border-box; border-right: 1px solid var(--ui-border); background: #15181D; }
.sc-film .film-gsh { position: absolute; left: 0; right: 0; height: calc(var(--u) * 38); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 12); font-size: calc(var(--u) * 11.5); color: #9AA3AE; white-space: nowrap; }
.sc-film .film-gsh1 { top: 0; }
.sc-film .film-gsh2 { top: calc(var(--u) * 151); }
.sc-film .film-gcnt { position: relative; width: calc(var(--u) * 18); height: calc(var(--u) * 17); flex: none; }
.sc-film .film-gcn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 9); background: rgba(255,255,255,.1); font-size: calc(var(--u) * 10.5); font-weight: 600; color: #C9D1DA; }
.sc-film .film-gcu0, .sc-film .film-gcs2 { opacity: 0; }
.sc-film .film-gsm { margin-left: auto; display: inline-flex; align-items: center; height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 8); box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); color: #E8EBEF; white-space: nowrap; }
.sc-film .film-gdivl { position: absolute; left: 0; right: 0; top: calc(var(--u) * 150); height: 0; border-top: 1px solid var(--ui-border); }
.sc-film .film-gem { position: absolute; left: calc(var(--u) * 14); font-size: calc(var(--u) * 11.5); color: #6F7985; white-space: nowrap; }
.sc-film .film-geu { top: calc(var(--u) * 46); opacity: 0; }
.sc-film .film-ges { top: calc(var(--u) * 197); }
.sc-film .film-gf { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: calc(var(--u) * 40); height: calc(var(--u) * 26); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 5); font-size: calc(var(--u) * 12); color: #C9D1DA; white-space: nowrap; }
.sc-film .film-gf2 { top: calc(var(--u) * 68); }
.sc-film .film-gfsel { background: #0D1116; box-shadow: inset calc(var(--u) * 2) 0 0 0 #E8EBEF; color: #E8EBEF; }
.sc-film .film-gfic { width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: none; fill: none; stroke: #9AA3AE; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-gfd { font-size: calc(var(--u) * 11); color: #838C99; }
.sc-film .film-gbox { position: absolute; left: 0; right: 0; top: calc(var(--u) * 292); bottom: 0; box-sizing: border-box; background: #1B1F26; border-top: 1px solid var(--ui-border); }
.sc-film .film-gmsg { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 10); height: calc(var(--u) * 64); box-sizing: border-box; background: #0D1116; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 18); color: #E8EBEF; overflow: hidden; box-shadow: 0 0 0 0 rgba(111,211,160,0); }
.sc-film .film-gph { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 7); color: #6F7985; white-space: nowrap; }
.sc-film .film-gmsg .film-typed { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 7); }
.sc-film .film-gmsg .film-tx { opacity: 0; }
.sc-film .film-gfoot { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 84); height: calc(var(--u) * 30); display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 11); color: #838C99; white-space: nowrap; }
.sc-film .film-gn { position: relative; width: calc(var(--u) * 74); height: calc(var(--u) * 16); flex: none; }
.sc-film .film-gnt { position: absolute; left: 0; top: 0; line-height: calc(var(--u) * 16); }
.sc-film .film-gn2 { opacity: 0; }
.sc-film .film-gkbd { font-family: var(--f-mono); font-size: calc(var(--u) * 10.5); color: #838C99; }
.sc-film .film-gfoot .film-gcommit { margin-left: auto; width: calc(var(--u) * 58); padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 12.5); transform-origin: 50% 50%; opacity: .45; }
.sc-film .film-gdp { position: absolute; left: calc(var(--u) * 460); right: 0; top: 0; bottom: 0; background: #0D1116; }
.sc-film .film-gdc { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.sc-film .film-gdh { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 40); box-sizing: border-box; padding: 0 calc(var(--u) * 12); background: #1B1F26; border-bottom: 1px solid var(--ui-border); white-space: nowrap; }
.sc-film .film-gdname { font-size: calc(var(--u) * 13); font-weight: 600; color: #E8EBEF; }
.sc-film .film-gadd { font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); color: #7EE787; }
.sc-film .film-gdel { font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); color: #FFA198; }
.sc-film .film-gacts { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 6); }
.sc-film .film-gacts .film-gsm { margin-left: 0; }
.sc-film .film-gdots { padding: 0 calc(var(--u) * 2); font-size: calc(var(--u) * 14); color: #838C99; }
.sc-film .film-gdiff { padding: calc(var(--u) * 6) 0; }
.sc-film .film-gdempty { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 12); color: #6F7985; opacity: 0; }
.sc-film .film-git .film-gtoast { position: absolute; left: calc(var(--u) * 626); top: calc(var(--u) * 432); white-space: nowrap; opacity: 0; transform: translateY(calc(var(--u) * 16)) scale(.97); }
.sc-film .film-gsha { font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); color: #9AA3AE; }
.sc-film .film-gstat { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 22); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 14); padding: 0 calc(var(--u) * 10); background: #1B1F26; border-top: 1px solid var(--ui-border); font-size: calc(var(--u) * 10.5); color: #838C99; white-space: nowrap; }
/* git end states: committed in 4 (kept through 5 while the window fades) */
.sc-film.ch-4 .film-gf, .sc-film.ch-5 .film-gf { opacity: 0; transform: translateY(calc(var(--u) * 151)); }
.sc-film.ch-4 .film-gcu2, .sc-film.ch-5 .film-gcu2 { opacity: 0; }
.sc-film.ch-4 .film-gcu0, .sc-film.ch-5 .film-gcu0 { opacity: 1; }
.sc-film.ch-4 .film-geu, .sc-film.ch-5 .film-geu { opacity: 1; }
.sc-film.ch-4 .film-gbadge, .sc-film.ch-5 .film-gbadge { opacity: 0; transform: scale(.5); }
.sc-film.ch-4 .film-gdc, .sc-film.ch-5 .film-gdc { opacity: 0; }
.sc-film.ch-4 .film-gdempty, .sc-film.ch-5 .film-gdempty { opacity: 1; }
.sc-film.ch-4 .film-git .film-gtoast, .sc-film.ch-5 .film-git .film-gtoast { opacity: 1; transform: translateY(0) scale(1); }

/* ================= DOCK ================= */
.sc-film .film-dock { position: absolute; left: calc(var(--u) * 519); top: calc(var(--u) * 574); width: calc(var(--u) * 162); height: calc(var(--u) * 54); box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 16); background: rgba(27,31,38,.94); box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 32) rgba(0,0,0,.45); z-index: 7; }
.sc-film .film-dt { position: absolute; top: calc(var(--u) * 4); width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 10); display: flex; align-items: center; justify-content: center; background-color: rgba(255,255,255,0); transition: background-color .4s ease; }
.sc-film .film-dt1 { left: calc(var(--u) * 8); }
.sc-film .film-dt2 { left: calc(var(--u) * 60); }
.sc-film .film-dt3 { left: calc(var(--u) * 112); background-color: rgba(255,255,255,.1); }
.sc-film .film-dimg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); object-fit: contain; }
.sc-film .film-dbar { position: absolute; left: calc(var(--u) * 21); top: calc(var(--u) * 47); width: calc(var(--u) * 14); height: calc(var(--u) * 3); border-radius: calc(var(--u) * 2); background: var(--ui-ok); transform: translateX(calc(var(--u) * 104)); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.sc-film.ch-2 .film-dt3, .sc-film.ch-4 .film-dt3 { background-color: rgba(255,255,255,0); }
.sc-film.ch-2 .film-dt1, .sc-film.ch-4 .film-dt2 { background-color: rgba(255,255,255,.1); }
.sc-film.ch-2 .film-dbar { transform: translateX(0); }
.sc-film.ch-4 .film-dbar { transform: translateX(calc(var(--u) * 52)); }

/* ================= PHONE (chapter 5) ================= */
.sc-film .film-phw { position: absolute; left: calc(var(--u) * 860); top: calc(var(--u) * 34); width: calc(var(--u) * 284); height: calc(var(--u) * 572); z-index: 10; transform: translateX(calc(var(--u) * 420)); opacity: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.sc-film.ch-5 .film-phw { transform: translateX(0); opacity: 1; transition: transform .8s cubic-bezier(.2,.7,.2,1) .3s, opacity .4s ease .3s; }
.sc-film .film-phw .film-phone { left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; outline: calc(var(--u) * 1) solid rgba(255,255,255,.12); outline-offset: calc(var(--u) * -1); }
.sc-film .film-phone .film-pscr { position: relative; }
.sc-film .film-phw .film-pcnote { position: absolute; right: calc(var(--u) * 300); top: calc(var(--u) * 63); display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 16); box-sizing: border-box; white-space: nowrap; opacity: 0; }
.sc-film .film-noteic { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; fill: none; stroke: var(--ui-brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-film.ch-5 .film-phw .film-pcnote { opacity: 1; }
.sc-film .film-pbar { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 46); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 12); padding: 0 calc(var(--u) * 18); background: #1B1F26; border-bottom: 1px solid var(--ui-border); }
.sc-film .film-pmenu { font-size: calc(var(--u) * 15); line-height: 1; color: #C9D1DA; }
.sc-film .film-pbrand2 { font-size: calc(var(--u) * 14); font-weight: 700; color: #E8EBEF; }
.sc-film .film-pset { margin-left: auto; width: calc(var(--u) * 18); height: calc(var(--u) * 18); object-fit: contain; }
.sc-film .film-psess2 { position: absolute; left: 0; right: 0; top: calc(var(--u) * 46); height: calc(var(--u) * 50); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 9); padding: 0 calc(var(--u) * 16); background: #15181D; border-bottom: 1px solid var(--ui-border); }
.sc-film .film-pcl { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; object-fit: contain; }
.sc-film .film-pttl { font-size: calc(var(--u) * 13.5); font-weight: 700; color: #E8EBEF; white-space: nowrap; }
.sc-film .film-ust { position: relative; margin-left: auto; width: calc(var(--u) * 62); height: calc(var(--u) * 16); flex: none; }
.sc-film .film-ust-wait, .sc-film .film-ust-work { position: absolute; right: 0; top: 0; height: calc(var(--u) * 16); display: flex; align-items: center; gap: calc(var(--u) * 5); white-space: nowrap; font-size: calc(var(--u) * 11); }
.sc-film .film-ust-wait { color: #9AA3AE; }
.sc-film .film-ust-work { color: #C2CBD5; opacity: 0; }
.sc-film .film-ptm { position: absolute; left: 0; right: 0; top: calc(var(--u) * 96); bottom: calc(var(--u) * 94); box-sizing: border-box; padding: calc(var(--u) * 10) calc(var(--u) * 14); background: #0D1116; font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); line-height: 1.65; color: #C9D1DA; overflow: hidden; }
.sc-film .film-pl { margin-top: calc(var(--u) * 3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-film .film-pgap { margin-top: calc(var(--u) * 10); }
.sc-film .film-pu { margin-left: calc(var(--u) * -6); margin-right: calc(var(--u) * -6); padding: calc(var(--u) * 1) calc(var(--u) * 6); border-radius: calc(var(--u) * 4); background: rgba(255,255,255,.06); color: #F1F3F5; }
.sc-film .film-pin { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 48); height: calc(var(--u) * 46); box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); background: #15181D; border-top: 1px solid var(--ui-border); }
.sc-film .film-phone .film-pfield { flex: 1; min-width: 0; height: calc(var(--u) * 34); min-height: 0; box-sizing: border-box; display: flex; align-items: center; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 9); font-size: calc(var(--u) * 12.5); color: #E1E8EF; overflow: hidden; box-shadow: 0 0 0 0 rgba(111,211,160,0); }
.sc-film .film-pgt { color: var(--ui-ok); font-family: var(--f-mono); }
.sc-film .film-pfield .film-tx { opacity: 0; }
.sc-film .film-psend { width: calc(var(--u) * 34); height: calc(var(--u) * 34); flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ui-brand); color: #FFFFFF; transform-origin: 50% 50%; }
.sc-film .film-psendic { width: calc(var(--u) * 17); height: calc(var(--u) * 17); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sc-film .film-pkeys { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 48); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 16) calc(var(--u) * 4); background: #15181D; border-top: 1px solid var(--ui-border); }
.sc-film .film-pkey { min-width: calc(var(--u) * 38); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 6); box-sizing: border-box; border-radius: calc(var(--u) * 6); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.07); font-size: calc(var(--u) * 11.5); color: #B3BDC9; }
.sc-film .film-ptd { position: absolute; width: calc(var(--u) * 30); height: calc(var(--u) * 30); margin: calc(var(--u) * -15) 0 0 calc(var(--u) * -15); border-radius: 50%; background: rgba(255,255,255,.22); opacity: 0; }
.sc-film .film-ptd1, .sc-film .film-ptr1 { left: calc(var(--u) * 100); top: calc(var(--u) * 483); }
.sc-film .film-ptd2, .sc-film .film-ptr2 { left: calc(var(--u) * 237); top: calc(var(--u) * 483); }

/* ================= cursors + click rings ================= */
.sc-film .film-ring { z-index: 39; opacity: 0; }
.sc-film .film-r1t { left: calc(var(--u) * 612); top: calc(var(--u) * 467); }
.sc-film .film-r1a { left: calc(var(--u) * 196); top: calc(var(--u) * 348); }
.sc-film .film-r1b { left: calc(var(--u) * 794); top: calc(var(--u) * 465); }
.sc-film .film-r3 { left: calc(var(--u) * 222); top: calc(var(--u) * 352); }
.sc-film .film-gra { left: calc(var(--u) * 440); top: calc(var(--u) * 101); }
.sc-film .film-grb { left: calc(var(--u) * 428); top: calc(var(--u) * 474); }
.sc-film .film-web .film-cur1 { transform-origin: calc(var(--u) * 3) calc(var(--u) * 3); transform: translate(calc(var(--u) * 792), calc(var(--u) * 463)); opacity: 1; }
.sc-film.ch-2 .film-web .film-cur1, .sc-film.ch-3 .film-web .film-cur1, .sc-film.ch-4 .film-web .film-cur1, .sc-film.ch-5 .film-web .film-cur1 { opacity: 0; }
.sc-film .film-jevw { position: absolute; left: 0; top: 0; z-index: 40; transform-origin: calc(var(--u) * 3) calc(var(--u) * 3); transform: translate(calc(var(--u) * 340), calc(var(--u) * 426)); opacity: 0; }
.sc-film .film-jevlab { position: absolute; left: calc(var(--u) * 15); top: calc(var(--u) * 21); height: calc(var(--u) * 16); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 8); background: var(--ui-ok); color: #0D1116; font-size: calc(var(--u) * 10.5); font-weight: 700; line-height: calc(var(--u) * 16); white-space: nowrap; }
.sc-film .film-git .film-gcur { transform-origin: calc(var(--u) * 3) calc(var(--u) * 3); transform: translate(calc(var(--u) * 426), calc(var(--u) * 472)); opacity: 0; }
.sc-film.ch-4 .film-git .film-gcur { opacity: 1; }

/* ================= chapter 1 · 요청 ================= */
.sc-film.ch-1 .film-web .film-cur1 { animation: film-c1-cur 7s linear both; }
.sc-film.ch-1 .film-tool1 { animation: film-c1-pick 7s linear both; }
.sc-film.ch-1 .film-pedge { animation: film-c1-edge 7s linear both; }
.sc-film.ch-1 .film-hov1 { animation: film-c1-hov 7s linear both; }
.sc-film.ch-1 .film-r1a { animation: film-c1-ra 7s linear both; }
.sc-film.ch-1 .film-r1t { animation: film-c1-rt 7s linear both; }
.sc-film.ch-1 .film-tip { animation: film-c1-tip 7s linear both; }
.sc-film.ch-1 .film-page .film-sel { animation: film-c1-sel 7s linear both; }
.sc-film.ch-1 .film-comp .film-cchip { animation: film-c1-chip 7s linear both; }
.sc-film.ch-1 .film-side .film-comp { animation: film-c1-comp 7s linear both; }
.sc-film.ch-1 .film-ctext .film-tx { animation: film-c1-txt 7s linear both; }
.sc-film.ch-1 .film-ctext .film-trk { animation: film-c1-trk 7s linear both; }
.sc-film.ch-1 .film-send { animation: film-c1-send 7s linear both; }
.sc-film.ch-1 .film-r1b { animation: film-c1-rb 7s linear both; }
.sc-film.ch-1 .film-intro { animation: film-c1-intro 7s linear both; }
.sc-film.ch-1 .film-bubble { animation: film-c1-bub 7s linear both; }
.sc-film.ch-1 .film-sentline { animation: film-c1-sent 7s linear both; }
.sc-film.ch-1 .film-wst-wait { animation: film-c1-wait 7s linear both; }
.sc-film.ch-1 .film-wst-work { animation: film-c1-work 7s linear both; }

/* ================= chapter 2 · 작업 ================= */
.sc-film.ch-2 .film-web .film-cur1 { animation: film-c2-cur 7s linear both; }
.sc-film.ch-2 .film-tl1 { animation: film-c2-l1 7s linear both; }
.sc-film.ch-2 .film-tl2 { animation: film-c2-l2 7s linear both; }
.sc-film.ch-2 .film-tl3 { animation: film-c2-l3 7s linear both; }
.sc-film.ch-2 .film-tl4 { animation: film-c2-l4 7s linear both; }
.sc-film.ch-2 .film-tdiff { animation: film-c2-diff 7s linear both; }
.sc-film.ch-2 .film-tl5 { animation: film-c2-l5 7s linear both; }
.sc-film.ch-2 .film-tl6 { animation: film-c2-l6 7s linear both; }
.sc-film.ch-2 .film-tsr { animation: film-c2-st 7s linear both; }
.sc-film.ch-2 .film-spin { animation: film-c2-spin 7s linear both; }

/* ================= chapter 3 · 확인 ================= */
.sc-film.ch-3 .film-flash { animation: film-c3-flash 7s linear both; }
.sc-film.ch-3 .film-load { animation: film-c3-load 7s linear both; }
.sc-film.ch-3 .film-reload { animation: film-c3-reload 7s linear both; }
.sc-film.ch-3 .film-page .film-sel { animation: film-c3-sel 7s linear both; }
.sc-film.ch-3 .film-page .film-dlb { animation: film-c3-dlb 7s linear both; }
.sc-film.ch-3 .film-page .film-dla { animation: film-c3-dla 7s linear both; }
.sc-film.ch-3 .film-jevrow { animation: film-c3-jrow 7s linear both; }
.sc-film.ch-3 .film-jrun { animation: film-c3-jrun 7s linear both; }
.sc-film.ch-3 .film-jdone { animation: film-c3-jdone 7s linear both; }
.sc-film.ch-3 .film-jdot { animation: film-c3-jdot 7s linear both; }
.sc-film.ch-3 .film-wst-wait { animation: film-c3-wait 7s linear both; }
.sc-film.ch-3 .film-wst-work { animation: film-c3-work 7s linear both; }
.sc-film.ch-3 .film-jevw { animation: film-c3-jev 7s linear both; }
.sc-film.ch-3 .film-hov3 { animation: film-c3-hov 7s linear both; }
.sc-film.ch-3 .film-r3 { animation: film-c3-ring 7s linear both; }
.sc-film.ch-3 .film-pscroll { animation: film-c3-scroll 7s linear both; }
.sc-film.ch-3 .film-pthumb { animation: film-c3-thumb 7s linear both; }
.sc-film.ch-3 .film-tsr { animation: film-c3-tsr 7s linear both; }
.sc-film.ch-3 .film-tsd { animation: film-c3-tsd 7s linear both; }
.sc-film.ch-3 .film-spin { animation: film-c3-spin 7s linear both; }

/* ================= chapter 4 · 커밋 ================= */
.sc-film.ch-4 .film-git .film-gcur { animation: film-c4-cur 7s linear both; }
.sc-film.ch-4 .film-gra { animation: film-c4-ra 7s linear both; }
.sc-film.ch-4 .film-grb { animation: film-c4-rb 7s linear both; }
.sc-film.ch-4 .film-gf1 { animation: film-c4-f1 7s linear both; }
.sc-film.ch-4 .film-gf2 { animation: film-c4-f2 7s linear both; }
.sc-film.ch-4 .film-gcu2 { animation: film-c4-cu2 7s linear both; }
.sc-film.ch-4 .film-gcu0 { animation: film-c4-cu0 7s linear both; }
.sc-film.ch-4 .film-gcs0 { animation: film-c4-cs0 7s linear both; }
.sc-film.ch-4 .film-gcs2 { animation: film-c4-cs2 7s linear both; }
.sc-film.ch-4 .film-geu { animation: film-c4-geu 7s linear both; }
.sc-film.ch-4 .film-ges { animation: film-c4-ges 7s linear both; }
.sc-film.ch-4 .film-gmsg { animation: film-c4-foc 7s linear both; }
.sc-film.ch-4 .film-gph { animation: film-c4-ph 7s linear both; }
.sc-film.ch-4 .film-gmsg .film-tx { animation: film-c4-txt 7s linear both; }
.sc-film.ch-4 .film-gmsg .film-trk { animation: film-c4-trk 7s linear both; }
.sc-film.ch-4 .film-gn0 { animation: film-c4-n0 7s linear both; }
.sc-film.ch-4 .film-gn2 { animation: film-c4-n2 7s linear both; }
.sc-film.ch-4 .film-gfoot .film-gcommit { animation: film-c4-btn 7s linear both; }
.sc-film.ch-4 .film-git .film-gtoast { animation: film-c4-toast 7s linear both; }
.sc-film.ch-4 .film-gbadge { animation: film-c4-badge 7s linear both; }
.sc-film.ch-4 .film-gdc { animation: film-c4-dc 7s linear both; }
.sc-film.ch-4 .film-gdempty { animation: film-c4-de 7s linear both; }

/* ================= chapter 5 · 이어가기 ================= */
.sc-film.ch-5 .film-git .film-gcur { animation: film-c5-gcur 7s linear both; }
.sc-film.ch-5 .film-phw .film-pcnote { animation: film-c5-note 7s linear both; }
.sc-film.ch-5 .film-ptd1 { animation: film-c5-td1 7s linear both; }
.sc-film.ch-5 .film-ptr1 { animation: film-c5-tr1 7s linear both; }
.sc-film.ch-5 .film-phone .film-pfield { animation: film-c5-foc 7s linear both; }
.sc-film.ch-5 .film-pfield .film-tx { animation: film-c5-txt 7s linear both; }
.sc-film.ch-5 .film-pfield .film-trk { animation: film-c5-trk 7s linear both; }
.sc-film.ch-5 .film-ptd2 { animation: film-c5-td2 7s linear both; }
.sc-film.ch-5 .film-ptr2 { animation: film-c5-tr2 7s linear both; }
.sc-film.ch-5 .film-psend { animation: film-c5-send 7s linear both; }
.sc-film.ch-5 .film-pl7 { animation: film-c5-l7 7s linear both; }
.sc-film.ch-5 .film-pl8 { animation: film-c5-l8 7s linear both; }
.sc-film.ch-5 .film-pl9 { animation: film-c5-l9 7s linear both; }
.sc-film.ch-5 .film-ust-wait { animation: film-c5-wait 7s linear both; }
.sc-film.ch-5 .film-ust-work { animation: film-c5-work 7s linear both; }

/* ================= keyframes · chapter 1 (percent = s / 7) ================= */
@keyframes film-c1-cur {
  0% { opacity: 0; transform: translate(calc(var(--u) * 610), calc(var(--u) * 465)) scale(1); }
  1.43% { opacity: 1; transform: translate(calc(var(--u) * 610), calc(var(--u) * 465)) scale(1); }
  3.57% { transform: translate(calc(var(--u) * 610), calc(var(--u) * 465)) scale(1); }
  4.29% { transform: translate(calc(var(--u) * 610), calc(var(--u) * 465)) scale(0.86); }
  5.71% { transform: translate(calc(var(--u) * 610), calc(var(--u) * 465)) scale(1); }
  7.14% { transform: translate(calc(var(--u) * 610), calc(var(--u) * 465)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  17.14% { transform: translate(calc(var(--u) * 194), calc(var(--u) * 346)) scale(1); }
  20.71% { transform: translate(calc(var(--u) * 194), calc(var(--u) * 346)) scale(1); }
  21.43% { transform: translate(calc(var(--u) * 194), calc(var(--u) * 346)) scale(0.86); }
  22.86% { transform: translate(calc(var(--u) * 194), calc(var(--u) * 346)) scale(1); }
  27.14% { transform: translate(calc(var(--u) * 194), calc(var(--u) * 346)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  32.86% { transform: translate(calc(var(--u) * 244), calc(var(--u) * 384)) scale(1); }
  61.43% { transform: translate(calc(var(--u) * 244), calc(var(--u) * 384)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  70% { transform: translate(calc(var(--u) * 792), calc(var(--u) * 463)) scale(1); }
  75% { transform: translate(calc(var(--u) * 792), calc(var(--u) * 463)) scale(1); }
  75.71% { transform: translate(calc(var(--u) * 792), calc(var(--u) * 463)) scale(0.86); }
  77.14% { transform: translate(calc(var(--u) * 792), calc(var(--u) * 463)) scale(1); }
  100% { opacity: 1; transform: translate(calc(var(--u) * 792), calc(var(--u) * 463)) scale(1); }
}
@keyframes film-c1-pick {
  0%, 4.29% { background-color: rgba(28,141,94,0); color: #A1ADBA; }
  5.71%, 24.29% { background-color: rgba(28,141,94,.3); color: #8FE3B6; }
  26.43% { background-color: rgba(28,141,94,0); color: #A1ADBA; }
  100% { background-color: rgba(28,141,94,0); color: #A1ADBA; }
}
@keyframes film-c1-edge {
  0%, 4.29% { opacity: 0; }
  6.43% { opacity: 1; }
  24.29% { opacity: 1; }
  27.14% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c1-hov {
  0%, 17.14% { opacity: 0; }
  18.57% { opacity: 1; }
  24.29% { opacity: 1; }
  25.71% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c1-ra {
  0%, 21.43% { opacity: 0; transform: scale(.4); }
  22.14% { opacity: 1; transform: scale(.6); }
  29.29% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes film-c1-rt {
  0%, 4.29% { opacity: 0; transform: scale(.4); }
  5% { opacity: 1; transform: scale(.6); }
  12.14% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes film-c1-tip {
  0% { opacity: 0; }
  1.43% { opacity: 1; }
  7.14% { opacity: 1; }
  8.57% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c1-sel {
  0% { opacity: 0; transform: scale(1.06); }
  24.29% { opacity: 0; transform: scale(1.06); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  27.14% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes film-c1-chip {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 4)) scale(.88); }
  30% { opacity: 0; transform: translateY(calc(var(--u) * 4)) scale(.88); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  33.57% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; transform: translateY(0) scale(1); }
  82.14% { opacity: 0; transform: translateY(calc(var(--u) * -4)) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * -4)) scale(1); }
}
@keyframes film-c1-comp {
  0%, 29.29% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
  31.43% { box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(111,211,160,.45); }
  80% { box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(111,211,160,.45); }
  82.86% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
}
@keyframes film-c1-txt {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  34.29% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(21, end); }
  62.86% { opacity: 1; clip-path: inset(0 0 0 0); }
  80% { opacity: 1; clip-path: inset(0 0 0 0); }
  81.43% { opacity: 0; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes film-c1-trk {
  0%, 30% { opacity: 0; transform: translateX(-100%); }
  30.71% { opacity: 1; transform: translateX(-100%); }
  34.29% { opacity: 1; transform: translateX(-100%); animation-timing-function: steps(21, end); }
  62.86% { opacity: 1; transform: translateX(0); }
  80% { opacity: 1; transform: translateX(0); }
  80.71% { opacity: 0; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes film-c1-send {
  0%, 75% { transform: scale(1); }
  75.71% { transform: scale(.86); }
  77.86% { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes film-c1-rb {
  0%, 75.71% { opacity: 0; transform: scale(.4); }
  76.43% { opacity: 1; transform: scale(.6); }
  83.57% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes film-c1-intro {
  0%, 78.57% { opacity: 1; transform: translateY(0); }
  80.71% { opacity: 0; transform: translateY(calc(var(--u) * -8)); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * -8)); }
}
@keyframes film-c1-bub {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 12)); }
  80.71% { opacity: 0; transform: translateY(calc(var(--u) * 12)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  84.29% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c1-sent {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 4)); }
  83.57% { opacity: 0; transform: translateY(calc(var(--u) * 4)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  87.14% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c1-wait {
  0%, 80% { opacity: 1; }
  81.43% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c1-work {
  0%, 81.43% { opacity: 0; }
  83.57% { opacity: 1; }
  100% { opacity: 1; }
}

/* ================= keyframes · chapter 2 ================= */
@keyframes film-c2-cur {
  0% { opacity: 1; }
  5.71% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c2-l1 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  5.71% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  10.71% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c2-l2 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  12.86% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  17.86% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c2-l3 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  22.86% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  27.86% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c2-l4 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  34.29% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  39.29% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c2-diff {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(calc(var(--u) * -10)); }
  38.57% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(calc(var(--u) * -10)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  45.71% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}
@keyframes film-c2-l5 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  52.86% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  57.86% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c2-l6 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  64.29% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  69.29% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c2-st {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 4)); }
  80% { opacity: 0; transform: translateY(calc(var(--u) * 4)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c2-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(2520deg); }
}

/* ================= keyframes · chapter 3 ================= */
@keyframes film-c3-flash {
  0%, 4.29% { opacity: 0; }
  6.43% { opacity: .92; }
  11.43% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c3-load {
  0%, 4.29% { opacity: 1; transform: scaleX(0); }
  10% { opacity: 1; transform: scaleX(1); }
  12.86% { opacity: 0; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes film-c3-reload {
  0% { transform: rotate(0deg); }
  4.29% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  12.86% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
@keyframes film-c3-sel {
  0%, 5.71% { opacity: 1; }
  6.43% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c3-dlb {
  0%, 6.42% { opacity: 1; }
  6.43% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c3-dla {
  0%, 6.42% { opacity: 0; transform: scale(1); }
  6.43% { opacity: 1; transform: scale(1); }
  36.43% { opacity: 1; transform: scale(1); }
  37.14% { opacity: 1; transform: scale(.96); }
  39.29% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes film-c3-jrow {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 8)); }
  8.57% { opacity: 0; transform: translateY(calc(var(--u) * 8)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  12.86% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c3-jrun {
  0%, 74.29% { opacity: 1; }
  76.43% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c3-jdone {
  0%, 74.29% { opacity: 0; transform: translateX(calc(var(--u) * -4)); }
  77.14% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes film-c3-jdot {
  0%, 8.57% { box-shadow: 0 0 0 0 rgba(111,211,160,.6); }
  19.99% { box-shadow: 0 0 0 calc(var(--u) * 6) rgba(111,211,160,0); }
  20% { box-shadow: 0 0 0 0 rgba(111,211,160,.6); }
  31.42% { box-shadow: 0 0 0 calc(var(--u) * 6) rgba(111,211,160,0); }
  31.43% { box-shadow: 0 0 0 0 rgba(111,211,160,.6); }
  42.85% { box-shadow: 0 0 0 calc(var(--u) * 6) rgba(111,211,160,0); }
  42.86% { box-shadow: 0 0 0 0 rgba(111,211,160,.6); }
  54.28% { box-shadow: 0 0 0 calc(var(--u) * 6) rgba(111,211,160,0); }
  54.29% { box-shadow: 0 0 0 0 rgba(111,211,160,.6); }
  65.7% { box-shadow: 0 0 0 calc(var(--u) * 6) rgba(111,211,160,0); }
  65.71% { box-shadow: 0 0 0 0 rgba(111,211,160,.6); }
  77.13% { box-shadow: 0 0 0 calc(var(--u) * 6) rgba(111,211,160,0); }
  100% { box-shadow: 0 0 0 calc(var(--u) * 6) rgba(111,211,160,0); }
}
@keyframes film-c3-wait {
  0%, 74.29% { opacity: 0; }
  76.43% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c3-work {
  0%, 74.29% { opacity: 1; }
  75.71% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c3-jev {
  0% { opacity: 0; transform: translate(calc(var(--u) * 486), calc(var(--u) * 468)) scale(1); }
  14.29% { opacity: 0; transform: translate(calc(var(--u) * 486), calc(var(--u) * 468)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  27.14% { opacity: 1; transform: translate(calc(var(--u) * 220), calc(var(--u) * 350)) scale(1); }
  36.43% { opacity: 1; transform: translate(calc(var(--u) * 220), calc(var(--u) * 350)) scale(1); }
  37.14% { opacity: 1; transform: translate(calc(var(--u) * 220), calc(var(--u) * 350)) scale(.86); }
  38.57% { opacity: 1; transform: translate(calc(var(--u) * 220), calc(var(--u) * 350)) scale(1); }
  41.43% { opacity: 1; transform: translate(calc(var(--u) * 220), calc(var(--u) * 350)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  45.71% { opacity: 1; transform: translate(calc(var(--u) * 328), calc(var(--u) * 418)) scale(1); }
  80% { opacity: 1; transform: translate(calc(var(--u) * 328), calc(var(--u) * 418)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  85.71% { opacity: 0; transform: translate(calc(var(--u) * 340), calc(var(--u) * 426)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--u) * 340), calc(var(--u) * 426)) scale(1); }
}
@keyframes film-c3-hov {
  0%, 27.14% { opacity: 0; }
  28.57% { opacity: 1; }
  40% { opacity: 1; }
  42.14% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c3-ring {
  0%, 37.14% { opacity: 0; transform: scale(.4); }
  37.86% { opacity: 1; transform: scale(.6); }
  45% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes film-c3-scroll {
  0% { transform: translateY(0); }
  45.71% { transform: translateY(0); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  54.29% { transform: translateY(calc(var(--u) * -110)); }
  57.14% { transform: translateY(calc(var(--u) * -110)); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  65.71% { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@keyframes film-c3-thumb {
  0%, 44.29% { opacity: 0; transform: translateY(0); }
  45.71% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  54.29% { opacity: 1; transform: translateY(calc(var(--u) * 86)); }
  57.14% { opacity: 1; transform: translateY(calc(var(--u) * 86)); animation-timing-function: cubic-bezier(.45,0,.25,1); }
  65.71% { opacity: 1; transform: translateY(0); }
  68.57% { opacity: 0; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes film-c3-tsr {
  0%, 74.29% { opacity: 1; }
  76.43% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c3-tsd {
  0%, 74.29% { opacity: 0; }
  77.14% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c3-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(2520deg); }
}

/* ================= keyframes · chapter 4 ================= */
@keyframes film-c4-cur {
  0% { opacity: 0; transform: translate(calc(var(--u) * 638), calc(var(--u) * 298)) scale(1); }
  7.14% { opacity: 0; transform: translate(calc(var(--u) * 638), calc(var(--u) * 298)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  15.71% { opacity: 1; transform: translate(calc(var(--u) * 438), calc(var(--u) * 99)) scale(1); }
  17.86% { opacity: 1; transform: translate(calc(var(--u) * 438), calc(var(--u) * 99)) scale(1); }
  18.57% { opacity: 1; transform: translate(calc(var(--u) * 438), calc(var(--u) * 99)) scale(.86); }
  20% { opacity: 1; transform: translate(calc(var(--u) * 438), calc(var(--u) * 99)) scale(1); }
  22.86% { opacity: 1; transform: translate(calc(var(--u) * 438), calc(var(--u) * 99)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  29.29% { opacity: 1; transform: translate(calc(var(--u) * 294), calc(var(--u) * 418)) scale(1); }
  55.71% { opacity: 1; transform: translate(calc(var(--u) * 294), calc(var(--u) * 418)) scale(1); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  61.43% { opacity: 1; transform: translate(calc(var(--u) * 426), calc(var(--u) * 472)) scale(1); }
  66.43% { opacity: 1; transform: translate(calc(var(--u) * 426), calc(var(--u) * 472)) scale(1); }
  67.14% { opacity: 1; transform: translate(calc(var(--u) * 426), calc(var(--u) * 472)) scale(.86); }
  68.57% { opacity: 1; transform: translate(calc(var(--u) * 426), calc(var(--u) * 472)) scale(1); }
  100% { opacity: 1; transform: translate(calc(var(--u) * 426), calc(var(--u) * 472)) scale(1); }
}
@keyframes film-c4-ra {
  0%, 18.57% { opacity: 0; transform: scale(.4); }
  19.29% { opacity: 1; transform: scale(.6); }
  26.43% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes film-c4-rb {
  0%, 67.14% { opacity: 0; transform: scale(.4); }
  67.86% { opacity: 1; transform: scale(.6); }
  75% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes film-c4-f1 {
  0% { opacity: 1; transform: translateY(0); }
  21.43% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  27.86% { opacity: 1; transform: translateY(calc(var(--u) * 151)); }
  71.43% { opacity: 1; transform: translateY(calc(var(--u) * 151)); }
  74.29% { opacity: 0; transform: translateY(calc(var(--u) * 151)); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * 151)); }
}
@keyframes film-c4-f2 {
  0% { opacity: 1; transform: translateY(0); }
  22.86% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  29.29% { opacity: 1; transform: translateY(calc(var(--u) * 151)); }
  72.86% { opacity: 1; transform: translateY(calc(var(--u) * 151)); }
  75.71% { opacity: 0; transform: translateY(calc(var(--u) * 151)); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * 151)); }
}
@keyframes film-c4-cu2 {
  0%, 21.43% { opacity: 1; }
  22.86% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c4-cu0 {
  0%, 22.14% { opacity: 0; }
  23.57% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c4-cs0 {
  0%, 21.43% { opacity: 1; }
  22.86% { opacity: 0; }
  72.86% { opacity: 0; }
  74.29% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c4-cs2 {
  0%, 22.14% { opacity: 0; }
  23.57% { opacity: 1; }
  71.43% { opacity: 1; }
  72.86% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c4-geu {
  0%, 27.14% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c4-ges {
  0%, 20.71% { opacity: 1; }
  22.14% { opacity: 0; }
  74.29% { opacity: 0; }
  77.14% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c4-foc {
  0%, 28.57% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
  30% { box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(111,211,160,.5); }
  71.43% { box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(111,211,160,.5); }
  72.86% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
}
@keyframes film-c4-ph {
  0%, 31.42% { opacity: 1; }
  31.43% { opacity: 0; }
  72.86% { opacity: 0; }
  74.29% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c4-txt {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  31.43% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(39, end); }
  54.29% { opacity: 1; clip-path: inset(0 0 0 0); }
  71.43% { opacity: 1; clip-path: inset(0 0 0 0); }
  72.86% { opacity: 0; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes film-c4-trk {
  0%, 29.29% { opacity: 0; transform: translateX(-100%); }
  30% { opacity: 1; transform: translateX(-100%); }
  31.43% { opacity: 1; transform: translateX(-100%); animation-timing-function: steps(39, end); }
  54.29% { opacity: 1; transform: translateX(0); }
  71.43% { opacity: 1; transform: translateX(0); }
  72.14% { opacity: 0; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes film-c4-n0 {
  0%, 21.43% { opacity: 1; }
  22.86% { opacity: 0; }
  72.86% { opacity: 0; }
  74.29% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c4-n2 {
  0%, 22.14% { opacity: 0; }
  23.57% { opacity: 1; }
  71.43% { opacity: 1; }
  72.86% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c4-btn {
  0%, 31.43% { opacity: .45; transform: scale(1); }
  32.86% { opacity: 1; transform: scale(1); }
  66.43% { opacity: 1; transform: scale(1); }
  67.14% { opacity: 1; transform: scale(.92); }
  69.29% { opacity: 1; transform: scale(1); }
  72.86% { opacity: 1; transform: scale(1); }
  75.71% { opacity: .45; transform: scale(1); }
  100% { opacity: .45; transform: scale(1); }
}
@keyframes film-c4-toast {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 16)) scale(.97); }
  71.43% { opacity: 0; transform: translateY(calc(var(--u) * 16)) scale(.97); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  76.43% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes film-c4-badge {
  0%, 71.43% { opacity: 1; transform: scale(1); }
  74.29% { opacity: 0; transform: scale(.5); }
  100% { opacity: 0; transform: scale(.5); }
}
@keyframes film-c4-dc {
  0%, 72.14% { opacity: 1; }
  75.71% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c4-de {
  0%, 75% { opacity: 0; }
  78.57% { opacity: 1; }
  100% { opacity: 1; }
}

/* ================= keyframes · chapter 5 ================= */
@keyframes film-c5-gcur {
  0% { opacity: 1; }
  5.71% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes film-c5-note {
  0% { opacity: 0; transform: translateX(calc(var(--u) * 12)); }
  17.14% { opacity: 0; transform: translateX(calc(var(--u) * 12)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  21.43% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes film-c5-td1 {
  0%, 26.43% { opacity: 0; transform: scale(.6); }
  28.57% { opacity: 1; transform: scale(1); }
  30.71% { opacity: 1; transform: scale(.9); }
  34.29% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes film-c5-tr1 {
  0%, 28.57% { opacity: 0; transform: scale(.4); }
  29.29% { opacity: 1; transform: scale(.6); }
  36.43% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes film-c5-foc {
  0%, 28.57% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
  30.71% { box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(111,211,160,.5); }
  60% { box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(111,211,160,.5); }
  62.14% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,211,160,0); }
}
@keyframes film-c5-txt {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); }
  32.86% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(12, end); }
  54.29% { opacity: 1; clip-path: inset(0 0 0 0); }
  60% { opacity: 1; clip-path: inset(0 0 0 0); }
  61.43% { opacity: 0; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes film-c5-trk {
  0%, 29.29% { opacity: 0; transform: translateX(-100%); }
  30% { opacity: 1; transform: translateX(-100%); }
  32.86% { opacity: 1; transform: translateX(-100%); animation-timing-function: steps(12, end); }
  54.29% { opacity: 1; transform: translateX(0); }
  60% { opacity: 1; transform: translateX(0); }
  60.71% { opacity: 0; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes film-c5-td2 {
  0%, 57.86% { opacity: 0; transform: scale(.6); }
  60% { opacity: 1; transform: scale(1); }
  62.14% { opacity: 1; transform: scale(.9); }
  65.71% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes film-c5-tr2 {
  0%, 60% { opacity: 0; transform: scale(.4); }
  60.71% { opacity: 1; transform: scale(.6); }
  67.86% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes film-c5-send {
  0%, 59.29% { transform: scale(1); }
  60% { transform: scale(.86); }
  62.14% { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes film-c5-l7 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  60.71% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  64.29% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c5-l8 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  65.71% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  69.29% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c5-l9 {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  80% { opacity: 0; transform: translateY(calc(var(--u) * 6)); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  83.57% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes film-c5-wait {
  0%, 60% { opacity: 1; }
  61.43% { opacity: 0; }
  80% { opacity: 0; }
  82.14% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes film-c5-work {
  0%, 60.71% { opacity: 0; }
  62.14% { opacity: 1; }
  80% { opacity: 1; }
  81.43% { opacity: 0; }
  100% { opacity: 0; }
}

/* 뒤 창 어둡게 하기: 창 위에 반투명 막을 덮는다. filter 로 창을 어둡게 하면 창 안의 브랜드 표식도 다시 칠해지므로 쓰지 않는다
   (images/brands/provenance.md 「표시 계약」). 막의 밝기는 원래의 brightness(.5)와 같다. */
.sc-film .film-win::after { content: ""; position: absolute; inset: 0; z-index: 60; border-radius: inherit; background: rgba(9, 11, 14, .5); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.sc-film .film-term::after { opacity: 1; }
.sc-film.ch-2 .film-term::after { opacity: 0; }
.sc-film.ch-2 .film-web::after, .sc-film.ch-4 .film-web::after { opacity: 1; }

/* ───────── scenes: web ───────── */
.sc-wa .wa-stpick .k-dot.web-sdot { background: var(--ui-ok); }
.sc-wc .wc-hst .wc-hs1 { color: #C2CBD5; }
/* ===== group web · shared ===== */
.sc-wa .web-loop, .sc-wb .web-loop, .sc-wc .web-loop { position: absolute; inset: 0; animation: web-loop 8s cubic-bezier(.2,.7,.2,1) infinite both; }
@keyframes web-loop {
  0% { opacity: 0; transform: translateY(calc(var(--u)*8)); }
  5% { opacity: 1; transform: translateY(0); }
  93% { opacity: 1; transform: translateY(0); }
  98% { opacity: 0; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(calc(var(--u)*8)); }
}
/* window chrome */
.sc-wa .web-cap, .sc-wb .web-cap, .sc-wc .web-cap { flex: none; gap: calc(var(--u)*6); padding-left: calc(var(--u)*8); }
.sc-wa .web-tab, .sc-wb .web-tab, .sc-wc .web-tab { display: inline-flex; align-items: center; padding: 0 calc(var(--u)*8) 0 calc(var(--u)*7); color: var(--ui-text); white-space: nowrap; }
.sc-wa .web-favi, .sc-wb .web-favi, .sc-wc .web-favi { width: calc(var(--u)*14); height: calc(var(--u)*14); object-fit: contain; flex: none; }
.sc-wa .web-tabx, .sc-wb .web-tabx, .sc-wc .web-tabx { width: calc(var(--u)*9); height: calc(var(--u)*9); margin-left: calc(var(--u)*3); color: var(--ui-muted); flex: none; }
.sc-wa .web-plus, .sc-wb .web-plus, .sc-wc .web-plus { width: calc(var(--u)*12); height: calc(var(--u)*12); margin-left: calc(var(--u)*2); color: var(--ui-muted); flex: none; }
.sc-wa .web-bar, .sc-wb .web-bar, .sc-wc .web-bar { flex: none; box-sizing: border-box; height: calc(var(--u)*36); display: flex; align-items: center; gap: calc(var(--u)*11); padding: 0 calc(var(--u)*9) 0 calc(var(--u)*13); background: #171B21; border-bottom: 1px solid rgba(255,255,255,.07); color: #AEB8C3; }
.sc-wa .web-dim, .sc-wb .web-dim, .sc-wc .web-dim { opacity: .42; }
.sc-wa .web-addr, .sc-wb .web-addr, .sc-wc .web-addr { flex: 1; min-width: 0; box-sizing: border-box; height: calc(var(--u)*25); display: flex; align-items: center; gap: calc(var(--u)*6); padding: 0 calc(var(--u)*10); border-radius: calc(var(--u)*13); background: #0F1318; border: 1px solid rgba(255,255,255,.06); font-size: calc(var(--u)*11.5); color: #C6CDD6; white-space: nowrap; overflow: hidden; }
.sc-wa .web-info, .sc-wb .web-info, .sc-wc .web-info { width: calc(var(--u)*12); height: calc(var(--u)*12); color: #76818E; flex: none; }
.sc-wa .web-agentbtn, .sc-wb .web-agentbtn, .sc-wc .web-agentbtn { flex: none; box-sizing: border-box; width: calc(var(--u)*26); height: calc(var(--u)*26); display: grid; place-items: center; border-radius: calc(var(--u)*7); background: rgba(28,141,94,.16); border: 1px solid rgba(111,211,160,.24); }
.sc-wa .web-amark, .sc-wb .web-amark, .sc-wc .web-amark { width: calc(var(--u)*15); height: calc(var(--u)*15); }
.sc-wa .web-page, .sc-wb .web-page, .sc-wc .web-page { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* 브라우저 에이전트 composer (wa, wb) */
.sc-wa .web-comp, .sc-wb .web-comp { box-sizing: border-box; padding: calc(var(--u)*12); gap: calc(var(--u)*10); z-index: 6; }
.sc-wa .web-head, .sc-wb .web-head { flex: none; height: calc(var(--u)*24); display: flex; align-items: center; gap: calc(var(--u)*7); }
.sc-wa .web-hmark, .sc-wb .web-hmark { width: calc(var(--u)*16); height: calc(var(--u)*16); flex: none; }
.sc-wa .web-title, .sc-wb .web-title { font-size: calc(var(--u)*12.5); font-weight: 600; letter-spacing: -.01em; color: var(--ui-text); white-space: nowrap; }
.sc-wa .web-who, .sc-wb .web-who { margin-left: auto; box-sizing: border-box; height: calc(var(--u)*24); display: flex; align-items: center; gap: calc(var(--u)*6); padding: 0 calc(var(--u)*9) 0 calc(var(--u)*6); border-radius: calc(var(--u)*7); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); font-size: calc(var(--u)*11); color: var(--ui-muted); white-space: nowrap; }
.sc-wa .web-whoico, .sc-wb .web-whoico { width: calc(var(--u)*14); height: calc(var(--u)*14); flex: none; }
.sc-wa .web-state, .sc-wb .web-state { display: grid; }
.sc-wa .web-st1, .sc-wa .web-st2, .sc-wb .web-st1, .sc-wb .web-st2 { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(var(--u)*5); }
.sc-wa .web-st1, .sc-wb .web-st1 { opacity: 0; }
.sc-wa .web-st2, .sc-wb .web-st2 { color: #C2CBD5; }
.sc-wa .web-sdot, .sc-wb .web-sdot { width: calc(var(--u)*6); height: calc(var(--u)*6); flex: none; }
.sc-wa .web-card, .sc-wb .web-card { flex: none; position: relative; box-sizing: border-box; display: flex; flex-direction: column; padding-bottom: calc(var(--u)*8); border: 1px solid rgba(255,255,255,.10); border-radius: calc(var(--u)*12); background: var(--ui-terminal); overflow: hidden; }
.sc-wa .web-chips, .sc-wb .web-chips { flex: none; box-sizing: border-box; display: flex; align-items: flex-start; padding: calc(var(--u)*9) calc(var(--u)*9) 0; }
.sc-wa .web-text, .sc-wb .web-text { flex: none; position: relative; box-sizing: border-box; height: calc(var(--u)*49); padding: calc(var(--u)*6) calc(var(--u)*11) 0; font-size: calc(var(--u)*13); line-height: calc(var(--u)*20); color: var(--ui-text); }
.sc-wa .web-tb, .sc-wb .web-tb { position: relative; }
.sc-wa .web-line, .sc-wb .web-line { display: block; height: calc(var(--u)*20); white-space: nowrap; }
.sc-wa .web-ph, .sc-wb .web-ph { position: absolute; left: 0; top: 0; white-space: nowrap; color: var(--ui-muted); opacity: 0; }
.sc-wa .web-pcaret, .sc-wb .web-pcaret { position: absolute; left: calc(var(--u)*-2); top: calc(var(--u)*3); width: calc(var(--u)*1.5); height: calc(var(--u)*15); color: var(--ui-text); }
.sc-wa .web-foot, .sc-wb .web-foot { flex: none; box-sizing: border-box; height: calc(var(--u)*34); display: flex; align-items: center; gap: calc(var(--u)*4); padding: 0 calc(var(--u)*8); }
.sc-wa .web-tool, .sc-wb .web-tool { position: relative; flex: none; width: calc(var(--u)*28); height: calc(var(--u)*28); display: grid; place-items: center; border-radius: calc(var(--u)*8); color: var(--ui-muted); }
.sc-wa .web-tool svg, .sc-wb .web-tool svg { width: calc(var(--u)*17); height: calc(var(--u)*17); }
.sc-wa .web-sendwrap, .sc-wb .web-sendwrap { position: relative; flex: none; margin-left: auto; width: calc(var(--u)*30); height: calc(var(--u)*30); }
.sc-wa .web-send, .sc-wb .web-send { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: #E8EBEF; color: #0D1116; }
.sc-wa .web-send svg, .sc-wb .web-send svg { width: calc(var(--u)*16); height: calc(var(--u)*16); }
.sc-wa .web-ring, .sc-wb .web-ring { left: 50%; top: 50%; }
.sc-wa .web-chipx, .sc-wb .web-chipx { width: calc(var(--u)*10); height: calc(var(--u)*10); margin-left: calc(var(--u)*2); opacity: .75; flex: none; }
/* typing: the text is revealed with clip-path, the caret rides an edge box of the same width */
.sc-wa .web-tw, .sc-wb .web-tw, .sc-wc .web-tw { display: inline-block; position: relative; vertical-align: top; }
.sc-wa .web-type, .sc-wb .web-type, .sc-wc .web-type { display: inline-block; white-space: nowrap; vertical-align: top; }
.sc-wa .web-edge, .sc-wb .web-edge, .sc-wc .web-edge { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.sc-wa .web-caret, .sc-wb .web-caret, .sc-wc .web-caret { position: absolute; right: calc(var(--u)*-2); top: calc(var(--u)*3); width: calc(var(--u)*1.5); height: calc(var(--u)*15); }
.sc-wa .web-note, .sc-wb .web-note, .sc-wc .web-note { position: absolute; display: inline-flex; align-items: center; z-index: 9; gap: calc(var(--u)*8); white-space: nowrap; }
.sc-wa .web-ncheck, .sc-wb .web-ncheck, .sc-wc .web-ncheck { flex: none; }

/* ===== wa · 요소를 골라 지시하기 ===== */
.sc-wa .wa-win { left: calc(var(--u)*28); top: calc(var(--u)*28); width: calc(var(--u)*420); height: calc(var(--u)*296); }
.sc-wa .wa-nav { position: absolute; left: 0; top: 0; right: 0; box-sizing: border-box; height: calc(var(--u)*36); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u)*24); border-bottom: 1px solid #E3E8E1; }
.sc-wa .wa-brand { display: flex; align-items: center; gap: calc(var(--u)*7); font-size: calc(var(--u)*13); font-weight: 700; letter-spacing: -.01em; color: #14211B; }
.sc-wa .wa-logo { width: calc(var(--u)*14); height: calc(var(--u)*14); border-radius: calc(var(--u)*4); background: #1C8D5E; }
.sc-wa .wa-links { display: flex; gap: calc(var(--u)*16); font-size: calc(var(--u)*11.5); color: #5E6B64; }
.sc-wa .wa-h1 { position: absolute; left: calc(var(--u)*24); top: calc(var(--u)*62); font-size: calc(var(--u)*26); line-height: calc(var(--u)*32); font-weight: 800; letter-spacing: -.025em; color: #14211B; white-space: nowrap; }
.sc-wa .wa-p { position: absolute; left: calc(var(--u)*24); top: calc(var(--u)*104); font-size: calc(var(--u)*12.5); line-height: calc(var(--u)*19); color: #56635C; white-space: nowrap; }
.sc-wa .wa-bwrap { position: absolute; left: calc(var(--u)*24); top: calc(var(--u)*150); width: calc(var(--u)*92); height: calc(var(--u)*36); }
.sc-wa .wa-btn { box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; font-size: calc(var(--u)*13); font-weight: 700; }
.sc-wa .wa-link { position: absolute; left: calc(var(--u)*132); top: calc(var(--u)*150); height: calc(var(--u)*36); display: flex; align-items: center; font-size: calc(var(--u)*12.5); font-weight: 600; color: #1C6B4A; white-space: nowrap; }
.sc-wa .wa-art { position: absolute; left: calc(var(--u)*244); top: calc(var(--u)*44); width: calc(var(--u)*146); box-sizing: border-box; display: flex; flex-direction: column; gap: calc(var(--u)*2); padding: calc(var(--u)*8) calc(var(--u)*10); border-radius: calc(var(--u)*10); background: #FFFFFF; border: 1px solid #E3E8E1; box-shadow: 0 calc(var(--u)*8) calc(var(--u)*18) rgba(20,33,27,.07); }
.sc-wa .wa-row { display: flex; align-items: center; gap: calc(var(--u)*7); height: calc(var(--u)*17); font-size: calc(var(--u)*11); color: #33423A; white-space: nowrap; }
.sc-wa .wa-done { color: #8A968F; }
.sc-wa .wa-ck { width: calc(var(--u)*12); height: calc(var(--u)*12); border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--u)*1.5) #C3CCC5; flex: none; display: grid; place-items: center; color: #FFFFFF; }
.sc-wa .wa-ckon { background: #1C8D5E; box-shadow: none; }
.sc-wa .wa-ck svg { width: calc(var(--u)*9); height: calc(var(--u)*9); }
.sc-wa .wa-hhov { position: absolute; inset: calc(var(--u)*-5); border: 1px solid #1C8D5E; border-radius: calc(var(--u)*5); background: rgba(28,141,94,.05); opacity: 0; animation: wa-hhov 8s infinite both; }
.sc-wa .wa-lab { position: absolute; left: calc(var(--u)*-1); bottom: 100%; box-sizing: border-box; height: calc(var(--u)*18); display: flex; align-items: center; padding: 0 calc(var(--u)*6); border-radius: calc(var(--u)*4) calc(var(--u)*4) 0 0; background: #1C8D5E; color: #FFFFFF; font-size: calc(var(--u)*10.5); line-height: 1; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.sc-wa .wa-bhov { position: absolute; inset: calc(var(--u)*-5); border: 1px solid #1C8D5E; border-radius: calc(var(--u)*6); background: rgba(28,141,94,.05); opacity: 0; animation: wa-bhov 8s infinite both; }
.sc-wa .wa-bsel { inset: calc(var(--u)*-5); border-radius: calc(var(--u)*6); animation: wa-bsel 8s infinite both; }
.sc-wa .wa-blab { left: calc(var(--u)*-5); bottom: calc(100% + var(--u)*5); animation: wa-blab 8s infinite both; }
.sc-wa .wa-ring1 { left: 50%; top: 50%; animation: wa-ring1 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wa .wa-comp { left: calc(var(--u)*262); top: calc(var(--u)*220); width: calc(var(--u)*270); height: calc(var(--u)*210); }
.sc-wa .wa-card { height: calc(var(--u)*126); }
.sc-wa .wa-chips { height: calc(var(--u)*33); }
.sc-wa .wa-chip { display: inline-flex; align-items: center; transform-origin: 0 50%; gap: calc(var(--u)*5); animation: wa-chip 8s infinite both; }
.sc-wa .wa-tb { animation: wa-tb 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wa .wa-ph1 { animation: wa-ph1 8s infinite both; }
.sc-wa .wa-ph2 { animation: wa-ph2 8s infinite both; }
.sc-wa .wa-t1 { animation: wa-t1 8s infinite both; }
.sc-wa .wa-e1 { animation: wa-e1m 8s infinite both, wa-e1o 8s infinite both; }
.sc-wa .wa-t2 { animation: wa-t2 8s infinite both; }
.sc-wa .wa-e2 { animation: wa-e2m 8s infinite both, wa-e2o 8s infinite both; }
.sc-wa .wa-tool1 { animation: wa-tool1 8s infinite both; }
.sc-wa .wa-send { animation: wa-send 8s infinite both; }
.sc-wa .wa-ring2 { animation: wa-ring2 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wa .wa-st1 { animation: wa-st1 8s infinite both; }
.sc-wa .wa-st2 { animation: wa-st2 8s infinite both; }
.sc-wa .wa-status { flex: none; position: relative; height: calc(var(--u)*16); font-size: calc(var(--u)*11); color: var(--ui-muted); }
.sc-wa .wa-stpick, .sc-wa .wa-sthint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u)*6); white-space: nowrap; }
.sc-wa .wa-stpick { color: var(--ui-ok); opacity: 0; animation: wa-stpick 8s infinite both; }
.sc-wa .wa-sthint { animation: wa-sthint 8s infinite both; }
.sc-wa .wa-note { left: calc(var(--u)*28); top: calc(var(--u)*351); animation: wa-note 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wa .wa-cur { transform: translate(calc(var(--u)*496), calc(var(--u)*367)); transform-origin: calc(var(--u)*2) calc(var(--u)*2); animation: wa-cur 8s cubic-bezier(.2,.7,.2,1) infinite both; }
/* wa timeline (8 s): 0.3 cursor leaves 요소 선택 → 1.0 hovers 제목 → 2.45 hovers 버튼 → 2.95 click (selected)
   → 3.2 chip → 3.85–5.6 typing → 6.15 send → 6.35 작업 중 + note → 7.45 fade */
@keyframes wa-cur {
  0%, 3.75% { transform: translate(calc(var(--u)*296), calc(var(--u)*365)) scale(1); }
  12.5%, 23.75% { transform: translate(calc(var(--u)*158), calc(var(--u)*181)) scale(1); }
  30.625%, 36.875% { transform: translate(calc(var(--u)*102), calc(var(--u)*268)) scale(1); }
  37.5% { transform: translate(calc(var(--u)*102), calc(var(--u)*268)) scale(.86); }
  38.75%, 40.625% { transform: translate(calc(var(--u)*102), calc(var(--u)*268)) scale(1); }
  48.125%, 70.625% { transform: translate(calc(var(--u)*504), calc(var(--u)*316)) scale(1); }
  76.25%, 76.875% { transform: translate(calc(var(--u)*496), calc(var(--u)*367)) scale(1); }
  77.5% { transform: translate(calc(var(--u)*496), calc(var(--u)*367)) scale(.86); }
  78.75%, 98% { transform: translate(calc(var(--u)*496), calc(var(--u)*367)) scale(1); }
  99%, 100% { transform: translate(calc(var(--u)*296), calc(var(--u)*365)) scale(1); }
}
@keyframes wa-hhov { 0%, 12.5% { opacity: 0; } 14.375%, 24.375% { opacity: 1; } 26.25%, 100% { opacity: 0; } }
@keyframes wa-bhov { 0%, 30% { opacity: 0; } 31.875%, 37.5% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes wa-blab { 0%, 30% { opacity: 0; } 31.875%, 98% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes wa-bsel { 0%, 37.5% { opacity: 0; transform: scale(1.08); } 39.5%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(1.08); } }
@keyframes wa-ring1 { 0%, 36.875% { opacity: 0; transform: scale(.4); } 37.5% { opacity: .9; transform: scale(.55); } 43.125%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wa-tool1 { 0%, 38.125% { background-color: rgba(28,141,94,.22); color: #6FD3A0; } 40%, 99% { background-color: rgba(28,141,94,0); color: #9AA3AE; } 100% { background-color: rgba(28,141,94,.22); color: #6FD3A0; } }
@keyframes wa-stpick { 0%, 38.125% { opacity: 1; } 40%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wa-sthint { 0%, 39% { opacity: 0; } 41%, 98% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes wa-chip { 0%, 40% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.3,1.4,.5,1); } 42.5% { opacity: 1; transform: scale(1.05); } 44.375%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes wa-tb { 0%, 40% { transform: translateY(calc(var(--u)*-27)); } 43.125%, 98% { transform: translateY(0); } 99%, 100% { transform: translateY(calc(var(--u)*-27)); } }
@keyframes wa-ph1 { 0%, 40% { opacity: 1; } 41.25%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wa-ph2 { 0%, 41.25% { opacity: 0; } 43.125%, 48% { opacity: 1; } 48.125%, 100% { opacity: 0; } }
@keyframes wa-t1 { 0%, 48.125% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(9, end); } 55%, 98% { clip-path: inset(0 0 0 0); } 99%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes wa-e1m { 0%, 48.125% { transform: translateX(-100%); animation-timing-function: steps(9, end); } 55%, 100% { transform: translateX(0); } }
@keyframes wa-e1o { 0%, 48% { opacity: 0; } 48.125%, 55.5% { opacity: 1; } 55.625%, 100% { opacity: 0; } }
@keyframes wa-t2 { 0%, 55.625% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(18, end); } 70%, 98% { clip-path: inset(0 0 0 0); } 99%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes wa-e2m { 0%, 55.625% { transform: translateX(-100%); animation-timing-function: steps(18, end); } 70%, 100% { transform: translateX(0); } }
@keyframes wa-e2o { 0%, 55.5% { opacity: 0; } 55.625%, 77.5% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes wa-send {
  0%, 48.75% { background-color: rgba(255,255,255,.08); color: #9AA3AE; transform: scale(1); }
  50% { background-color: #E8EBEF; color: #0D1116; }
  76.875% { transform: scale(1); }
  77.5% { transform: scale(.86); }
  78.75% { transform: scale(1); }
  98% { background-color: #E8EBEF; color: #0D1116; transform: scale(1); }
  99%, 100% { background-color: rgba(255,255,255,.08); color: #9AA3AE; transform: scale(1); }
}
@keyframes wa-ring2 { 0%, 76.875% { opacity: 0; transform: scale(.4); } 77.5% { opacity: .9; transform: scale(.55); } 83.125%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wa-st1 { 0%, 78.125% { opacity: 1; } 79.375%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wa-st2 { 0%, 78.75% { opacity: 0; } 80%, 98% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes wa-note { 0%, 79.375% { opacity: 0; transform: translateY(calc(var(--u)*8)); } 82.5%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*8)); } }

/* ===== wb · 화면 갈무리 첨부 ===== */
.sc-wb .wb-win { left: calc(var(--u)*28); top: calc(var(--u)*28); width: calc(var(--u)*420); height: calc(var(--u)*296); }
.sc-wb .wb-eyebrow { position: absolute; left: calc(var(--u)*24); top: calc(var(--u)*16); font-size: calc(var(--u)*10.5); line-height: calc(var(--u)*14); font-weight: 700; letter-spacing: .02em; color: #1C8D5E; white-space: nowrap; }
.sc-wb .wb-h2 { position: absolute; left: calc(var(--u)*24); top: calc(var(--u)*32); font-size: calc(var(--u)*17); line-height: calc(var(--u)*22); font-weight: 800; letter-spacing: -.02em; color: #14211B; white-space: nowrap; }
.sc-wb .wb-cards { position: absolute; left: calc(var(--u)*24); top: calc(var(--u)*66); width: calc(var(--u)*370); height: calc(var(--u)*56); display: flex; gap: calc(var(--u)*3); }
.sc-wb .wb-cd { flex: 1; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u)*3); padding: 0 calc(var(--u)*7); border-radius: calc(var(--u)*6); background: #FFFFFF; border: 1px solid #DCE2DA; }
.sc-wb .wb-ct { display: flex; align-items: center; gap: calc(var(--u)*5); font-size: calc(var(--u)*12); line-height: calc(var(--u)*16); font-weight: 700; color: #14211B; white-space: nowrap; }
.sc-wb .wb-ci { width: calc(var(--u)*11); height: calc(var(--u)*11); border-radius: calc(var(--u)*3); background: #CFE9DB; flex: none; }
.sc-wb .wb-cx { font-size: calc(var(--u)*10.5); line-height: calc(var(--u)*14); color: #5E6B64; white-space: nowrap; }
.sc-wb .wb-faq { position: absolute; left: calc(var(--u)*24); top: calc(var(--u)*146); width: calc(var(--u)*200); }
.sc-wb .wb-fqt { font-size: calc(var(--u)*12); line-height: calc(var(--u)*16); font-weight: 700; color: #14211B; margin-bottom: calc(var(--u)*6); white-space: nowrap; }
.sc-wb .wb-fq { box-sizing: border-box; height: calc(var(--u)*24); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #E3E8E1; font-size: calc(var(--u)*11); color: #5E6B64; white-space: nowrap; }
.sc-wb .wb-flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; animation: wb-flash 8s infinite both; }
.sc-wb .wb-comp { left: calc(var(--u)*262); top: calc(var(--u)*232); width: calc(var(--u)*270); height: calc(var(--u)*200); }
.sc-wb .wb-card { height: calc(var(--u)*142); }
.sc-wb .wb-chips { height: calc(var(--u)*49); }
.sc-wb .wb-tile { box-sizing: border-box; height: calc(var(--u)*40); display: flex; align-items: center; gap: calc(var(--u)*8); padding: 0 calc(var(--u)*8) 0 calc(var(--u)*4); border-radius: calc(var(--u)*9); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #C9D1DA; transform-origin: 0 50%; animation: wb-tile 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wb .wb-slot { width: calc(var(--u)*60); height: calc(var(--u)*32); flex: none; }
.sc-wb .wb-tlab { font-size: calc(var(--u)*12); color: var(--ui-text); white-space: nowrap; }
.sc-wb .wb-fly { position: absolute; left: 0; top: 0; z-index: 7; width: calc(var(--u)*418); height: calc(var(--u)*224); overflow: hidden; border-radius: calc(var(--u)*10); background: #F7F8F5; box-shadow: 0 calc(var(--u)*14) calc(var(--u)*34) rgba(13,17,22,.30), 0 0 0 calc(var(--u)*3) #FFFFFF; transform-origin: 0 0; transform: translate(calc(var(--u)*289), calc(var(--u)*292)) scale(.1435); animation: wb-fly 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wb .wb-tb { animation: wb-tb 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wb .wb-ph { animation: wb-ph 8s infinite both; }
.sc-wb .wb-pc { animation: wb-pc 8s infinite both; }
.sc-wb .wb-t1 { animation: wb-t1 8s infinite both; }
.sc-wb .wb-e1 { animation: wb-e1m 8s infinite both, wb-e1o 8s infinite both; }
.sc-wb .wb-t2 { animation: wb-t2 8s infinite both; }
.sc-wb .wb-e2 { animation: wb-e2m 8s infinite both, wb-e2o 8s infinite both; }
.sc-wb .wb-tool2 { opacity: .38; animation: wb-tool2 8s infinite both; }
.sc-wb .wb-ring1 { animation: wb-ring1 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wb .wb-send { animation: wb-send 8s infinite both; }
.sc-wb .wb-ring2 { animation: wb-ring2 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wb .wb-st1 { animation: wb-st1 8s infinite both; }
.sc-wb .wb-st2 { animation: wb-st2 8s infinite both; }
.sc-wb .wb-note { left: calc(var(--u)*28); top: calc(var(--u)*377); animation: wb-note 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wb .wb-cur { transform: translate(calc(var(--u)*496), calc(var(--u)*395)); transform-origin: calc(var(--u)*2) calc(var(--u)*2); animation: wb-cur 8s cubic-bezier(.2,.7,.2,1) infinite both; }
/* wb timeline (8 s): 0.6 cursor leaves the cramped cards → 1.55 click 화면 첨부 → 1.65 flash, the page shot pops
   → 2.0–2.65 shot shrinks into the 화면 갈무리 tile → 3.45–5.05 typing → 5.6 send → 5.7 작업 중 + note → 7.45 fade */
@keyframes wb-cur {
  0%, 7.5% { transform: translate(calc(var(--u)*208), calc(var(--u)*200)) scale(1); }
  18.125%, 19.375% { transform: translate(calc(var(--u)*329), calc(var(--u)*395)) scale(1); }
  20.3125% { transform: translate(calc(var(--u)*329), calc(var(--u)*395)) scale(.86); }
  21.875%, 34.375% { transform: translate(calc(var(--u)*329), calc(var(--u)*395)) scale(1); }
  41.25%, 63.75% { transform: translate(calc(var(--u)*504), calc(var(--u)*346)) scale(1); }
  69.375%, 70% { transform: translate(calc(var(--u)*496), calc(var(--u)*395)) scale(1); }
  70.9375% { transform: translate(calc(var(--u)*496), calc(var(--u)*395)) scale(.86); }
  72.5%, 98% { transform: translate(calc(var(--u)*496), calc(var(--u)*395)) scale(1); }
  99%, 100% { transform: translate(calc(var(--u)*208), calc(var(--u)*200)) scale(1); }
}
@keyframes wb-ring1 { 0%, 19.375% { opacity: 0; transform: scale(.4); } 20% { opacity: .9; transform: scale(.55); } 25.625%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wb-tool2 {
  0%, 19.375% { background-color: rgba(28,141,94,0); color: #9AA3AE; opacity: 1; }
  20.625%, 31.25% { background-color: rgba(28,141,94,.22); color: #6FD3A0; opacity: 1; }
  33.125%, 98% { background-color: rgba(28,141,94,0); color: #9AA3AE; opacity: .38; }
  99%, 100% { background-color: rgba(28,141,94,0); color: #9AA3AE; opacity: 1; }
}
@keyframes wb-flash { 0%, 20.625% { opacity: 0; } 21.5% { opacity: .9; } 25.625%, 100% { opacity: 0; } }
@keyframes wb-fly {
  0%, 21.25% { opacity: 0; transform: translate(calc(var(--u)*50.45), calc(var(--u)*113.6)) scale(.55); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  22.5%, 25% { opacity: 1; transform: translate(calc(var(--u)*40), calc(var(--u)*108)) scale(.6); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  33.125%, 98% { opacity: 1; transform: translate(calc(var(--u)*289), calc(var(--u)*292)) scale(.1435); }
  99%, 100% { opacity: 0; transform: translate(calc(var(--u)*50.45), calc(var(--u)*113.6)) scale(.55); }
}
@keyframes wb-tile { 0%, 30.625% { opacity: 0; transform: scale(.92); } 33.75%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.92); } }
@keyframes wb-tb { 0%, 30.625% { transform: translateY(calc(var(--u)*-43)); } 34.375%, 98% { transform: translateY(0); } 99%, 100% { transform: translateY(calc(var(--u)*-43)); } }
@keyframes wb-ph { 0%, 43% { opacity: 1; } 43.125%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wb-pc { 0%, 40% { opacity: 0; } 40.625%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wb-t1 { 0%, 43.125% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(13, end); } 55%, 98% { clip-path: inset(0 0 0 0); } 99%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes wb-e1m { 0%, 43.125% { transform: translateX(-100%); animation-timing-function: steps(13, end); } 55%, 100% { transform: translateX(0); } }
@keyframes wb-e1o { 0%, 43% { opacity: 0; } 43.125%, 55.5% { opacity: 1; } 55.625%, 100% { opacity: 0; } }
@keyframes wb-t2 { 0%, 55.625% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(8, end); } 63.125%, 98% { clip-path: inset(0 0 0 0); } 99%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes wb-e2m { 0%, 55.625% { transform: translateX(-100%); animation-timing-function: steps(8, end); } 63.125%, 100% { transform: translateX(0); } }
@keyframes wb-e2o { 0%, 55.5% { opacity: 0; } 55.625%, 70.625% { opacity: 1; } 71.25%, 100% { opacity: 0; } }
@keyframes wb-send {
  0%, 43.75% { background-color: rgba(255,255,255,.08); color: #9AA3AE; transform: scale(1); }
  45.625% { background-color: #E8EBEF; color: #0D1116; }
  70% { transform: scale(1); }
  70.9375% { transform: scale(.86); }
  72.5% { transform: scale(1); }
  98% { background-color: #E8EBEF; color: #0D1116; transform: scale(1); }
  99%, 100% { background-color: rgba(255,255,255,.08); color: #9AA3AE; transform: scale(1); }
}
@keyframes wb-ring2 { 0%, 70% { opacity: 0; transform: scale(.4); } 70.625% { opacity: .9; transform: scale(.55); } 76.25%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wb-st1 { 0%, 71.25% { opacity: 1; } 72.5%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wb-st2 { 0%, 71.875% { opacity: 0; } 73.125%, 98% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes wb-note { 0%, 72.5% { opacity: 0; transform: translateY(calc(var(--u)*8)); } 76.25%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*8)); } }

/* ===== wc · Jev에게 웹 조작 맡기기 ===== */
.sc-wc .wc-win { left: calc(var(--u)*28); top: calc(var(--u)*28); width: calc(var(--u)*352); height: calc(var(--u)*352); }
.sc-wc .wc-abtn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
.sc-wc .wc-form { position: absolute; inset: 0; animation: wc-form 8s cubic-bezier(.2,.7,.2,1) infinite both; opacity: 0; }
.sc-wc .wc-title { position: absolute; left: calc(var(--u)*32); top: calc(var(--u)*26); font-size: calc(var(--u)*20); line-height: calc(var(--u)*26); font-weight: 800; letter-spacing: -.02em; color: #14211B; white-space: nowrap; }
.sc-wc .wc-sub { position: absolute; left: calc(var(--u)*32); top: calc(var(--u)*56); font-size: calc(var(--u)*12); line-height: calc(var(--u)*16); color: #5E6B64; white-space: nowrap; }
.sc-wc .wc-lbl { position: absolute; left: calc(var(--u)*32); top: calc(var(--u)*96); font-size: calc(var(--u)*11.5); line-height: calc(var(--u)*14); font-weight: 600; color: #3C4A43; white-space: nowrap; }
.sc-wc .wc-in { position: absolute; left: calc(var(--u)*32); top: calc(var(--u)*116); width: calc(var(--u)*236); height: calc(var(--u)*38); box-sizing: border-box; display: flex; align-items: center; padding: 0 calc(var(--u)*12); border-radius: calc(var(--u)*8); background: #FFFFFF; border: 1px solid #D5DBD3; font-size: calc(var(--u)*12.5); color: #14211B; white-space: nowrap; animation: wc-focus 8s infinite both; }
.sc-wc .wc-eph { position: absolute; left: calc(var(--u)*12); top: 0; bottom: 0; display: flex; align-items: center; color: #A0AAA4; opacity: 0; animation: wc-eph 8s infinite both; }
.sc-wc .wc-tw { line-height: calc(var(--u)*18); }
.sc-wc .wc-caret { top: calc(var(--u)*1.5); right: calc(var(--u)*-1.5); }
.sc-wc .wc-t { animation: wc-t 8s infinite both; }
.sc-wc .wc-e { animation: wc-em 8s infinite both, wc-eo 8s infinite both; }
.sc-wc .wc-agree { position: absolute; left: calc(var(--u)*32); top: calc(var(--u)*172); height: calc(var(--u)*18); display: flex; align-items: center; gap: calc(var(--u)*8); font-size: calc(var(--u)*12); color: #33423A; white-space: nowrap; }
.sc-wc .wc-box { width: calc(var(--u)*16); height: calc(var(--u)*16); flex: none; display: grid; place-items: center; border-radius: calc(var(--u)*4); background: #1C8D5E; box-shadow: inset 0 0 0 calc(var(--u)*1.5) #1C8D5E; color: #FFFFFF; animation: wc-box 8s infinite both; }
.sc-wc .wc-boxck { width: calc(var(--u)*11); height: calc(var(--u)*11); animation: wc-boxck 8s infinite both; }
.sc-wc .wc-bwrap { position: absolute; left: calc(var(--u)*32); top: calc(var(--u)*210); width: calc(var(--u)*236); height: calc(var(--u)*38); }
.sc-wc .wc-btn { box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0; background-color: #1C8D5E; font-size: calc(var(--u)*13); font-weight: 700; animation: wc-btn 8s infinite both; }
.sc-wc .wc-done { position: absolute; left: 0; top: calc(var(--u)*64); width: calc(var(--u)*291); display: flex; flex-direction: column; align-items: center; animation: wc-done 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-dc { width: calc(var(--u)*46); height: calc(var(--u)*46); border-radius: 50%; display: grid; place-items: center; background: rgba(28,141,94,.12); color: #1C8D5E; animation: wc-dc 8s infinite both; }
.sc-wc .wc-dc svg { width: calc(var(--u)*24); height: calc(var(--u)*24); }
.sc-wc .wc-dt { position: relative; margin-top: calc(var(--u)*12); font-size: calc(var(--u)*17); line-height: calc(var(--u)*24); font-weight: 800; letter-spacing: -.02em; color: #14211B; white-space: nowrap; }
.sc-wc .wc-ds { margin-top: calc(var(--u)*6); font-size: calc(var(--u)*12); line-height: calc(var(--u)*16); color: #5E6B64; white-space: nowrap; }
.sc-wc .wc-ver { position: absolute; inset: calc(var(--u)*-6) calc(var(--u)*-8); border-radius: calc(var(--u)*7); background: rgba(111,211,160,.10); box-shadow: 0 0 0 calc(var(--u)*1.5) #6FD3A0; opacity: 0; animation: wc-ver 8s infinite both; }
.sc-wc .wc-log { left: calc(var(--u)*320); top: calc(var(--u)*96); width: calc(var(--u)*212); height: calc(var(--u)*278); box-sizing: border-box; padding: calc(var(--u)*14); gap: calc(var(--u)*10); z-index: 6; }
.sc-wc .wc-head { flex: none; height: calc(var(--u)*20); display: flex; align-items: center; gap: calc(var(--u)*7); }
.sc-wc .wc-jico { width: calc(var(--u)*16); height: calc(var(--u)*16); color: var(--ui-ok); flex: none; }
.sc-wc .wc-name { font-size: calc(var(--u)*13); font-weight: 700; color: var(--ui-text); }
.sc-wc .wc-hst { margin-left: auto; display: grid; font-size: calc(var(--u)*11); color: var(--ui-ok); white-space: nowrap; }
.sc-wc .wc-hs1, .sc-wc .wc-hs2 { grid-area: 1 / 1; display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--u)*5); }
.sc-wc .wc-hs1 { opacity: 0; animation: wc-hs1 8s infinite both; }
.sc-wc .wc-hs2 { animation: wc-hs2 8s infinite both; }
.sc-wc .wc-sdot { width: calc(var(--u)*6); height: calc(var(--u)*6); flex: none; }
.sc-wc .wc-tag { flex: none; align-self: flex-start; box-sizing: border-box; height: calc(var(--u)*22); display: flex; align-items: center; padding: 0 calc(var(--u)*7); border-radius: calc(var(--u)*6); background: rgba(242,182,90,.10); border: 1px solid rgba(242,182,90,.28); color: #F2C27A; font-size: calc(var(--u)*10.5); letter-spacing: -.01em; white-space: nowrap; }
.sc-wc .wc-task { flex: none; display: flex; flex-direction: column; gap: calc(var(--u)*3); padding-top: calc(var(--u)*11); border-top: 1px solid rgba(255,255,255,.08); }
.sc-wc .wc-tl { font-size: calc(var(--u)*10.5); line-height: calc(var(--u)*15); color: var(--ui-muted); white-space: nowrap; }
.sc-wc .wc-tt { font-size: calc(var(--u)*12.5); line-height: calc(var(--u)*18); font-weight: 600; color: var(--ui-text); white-space: nowrap; }
.sc-wc .wc-steps { flex: none; display: flex; flex-direction: column; }
.sc-wc .wc-row { height: calc(var(--u)*26); display: flex; align-items: center; gap: calc(var(--u)*8); font-size: calc(var(--u)*11.5); color: var(--ui-text); white-space: nowrap; }
.sc-wc .wc-act { color: var(--ui-muted); }
.sc-wc .wc-ico { width: calc(var(--u)*16); height: calc(var(--u)*16); flex: none; display: grid; }
.sc-wc .wc-run { grid-area: 1 / 1; width: calc(var(--u)*16); height: calc(var(--u)*16); color: var(--ui-info); opacity: 0; }
.sc-wc .wc-ok { grid-area: 1 / 1; display: grid; place-items: center; line-height: 1; width: calc(var(--u)*16); height: calc(var(--u)*16); font-size: calc(var(--u)*10); }
.sc-wc .wc-r1 { animation: wc-row1 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-r2 { animation: wc-row2 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-r3 { animation: wc-row3 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-r4 { animation: wc-row4 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-r5 { animation: wc-row5 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-u1 { animation: wc-run1 8s infinite both; }
.sc-wc .wc-u2 { animation: wc-run2 8s infinite both; }
.sc-wc .wc-u3 { animation: wc-run3 8s infinite both; }
.sc-wc .wc-u4 { animation: wc-run4 8s infinite both; }
.sc-wc .wc-u5 { animation: wc-run5 8s infinite both; }
.sc-wc .wc-k1 { animation: wc-ok1 8s infinite both; }
.sc-wc .wc-k2 { animation: wc-ok2 8s infinite both; }
.sc-wc .wc-k3 { animation: wc-ok3 8s infinite both; }
.sc-wc .wc-k4 { animation: wc-ok4 8s infinite both; }
.sc-wc .wc-k5 { animation: wc-ok5 8s infinite both; }
.sc-wc .wc-ring { z-index: 8; }
.sc-wc .wc-g1 { left: calc(var(--u)*264); top: calc(var(--u)*236); animation: wc-g1 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-g2 { left: calc(var(--u)*70); top: calc(var(--u)*281); animation: wc-g2 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-g3 { left: calc(var(--u)*183); top: calc(var(--u)*330); animation: wc-g3 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-note { left: calc(var(--u)*28); top: calc(var(--u)*392); animation: wc-note 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-jev { position: absolute; left: 0; top: 0; z-index: 40; transform: translate(calc(var(--u)*244), calc(var(--u)*237)); animation: wc-jev 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-wc .wc-jcur { transform-origin: calc(var(--u)*2) calc(var(--u)*2); animation: wc-press 8s infinite both; }
.sc-wc .wc-jtag { position: absolute; left: calc(var(--u)*15); top: calc(var(--u)*21); box-sizing: border-box; height: calc(var(--u)*18); display: flex; align-items: center; padding: 0 calc(var(--u)*7); border-radius: calc(var(--u)*9); background: #1C8D5E; color: #FFFFFF; font-size: calc(var(--u)*10.5); font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 calc(var(--u)*2) calc(var(--u)*6) rgba(13,17,22,.25); }
/* wc timeline (8 s): 0.3 Jev moves to 이메일 → 1.0 click, 1.45–2.45 types test@example.com → 3.15 checks 약관 동의
   → 4.1 clicks 가입하기 → 4.45 success page → 5.2 Jev reads the result → 5.9 log ✓ + 완료 + note → 7.45 fade */
@keyframes wc-jev {
  0%, 3.75% { transform: translate(calc(var(--u)*298), calc(var(--u)*158)); }
  11.875%, 31.875% { transform: translate(calc(var(--u)*262), calc(var(--u)*234)); }
  38.75%, 43.75% { transform: translate(calc(var(--u)*69), calc(var(--u)*280)); }
  50.625%, 58.75% { transform: translate(calc(var(--u)*182), calc(var(--u)*329)); }
  65%, 98% { transform: translate(calc(var(--u)*244), calc(var(--u)*237)); }
  99%, 100% { transform: translate(calc(var(--u)*298), calc(var(--u)*158)); }
}
@keyframes wc-press {
  0%, 12.5% { transform: scale(1); }
  13.4375% { transform: scale(.86); }
  15%, 39.375% { transform: scale(1); }
  40.3125% { transform: scale(.86); }
  41.875%, 51.25% { transform: scale(1); }
  52.1875% { transform: scale(.86); }
  53.75%, 100% { transform: scale(1); }
}
@keyframes wc-g1 { 0%, 12.5% { opacity: 0; transform: scale(.4); } 13.125% { opacity: .9; transform: scale(.55); } 18.75%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wc-g2 { 0%, 39.375% { opacity: 0; transform: scale(.4); } 40% { opacity: .9; transform: scale(.55); } 45.625%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wc-g3 { 0%, 51.25% { opacity: 0; transform: scale(.4); } 51.875% { opacity: .9; transform: scale(.55); } 57.5%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes wc-focus {
  0%, 13.125% { box-shadow: inset 0 0 0 0 rgba(28,141,94,0), 0 0 0 0 rgba(28,141,94,0); }
  15%, 32.5% { box-shadow: inset 0 0 0 calc(var(--u)*1) #1C8D5E, 0 0 0 calc(var(--u)*3) rgba(28,141,94,.18); }
  34.375%, 100% { box-shadow: inset 0 0 0 0 rgba(28,141,94,0), 0 0 0 0 rgba(28,141,94,0); }
}
@keyframes wc-eph { 0%, 18% { opacity: 1; } 18.125%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wc-t { 0%, 18.125% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(16, end); } 30.625%, 98% { clip-path: inset(0 0 0 0); } 99%, 100% { clip-path: inset(0 100% 0 0); } }
@keyframes wc-em { 0%, 18.125% { transform: translateX(-100%); animation-timing-function: steps(16, end); } 30.625%, 100% { transform: translateX(0); } }
@keyframes wc-eo { 0%, 14.375% { opacity: 0; } 15%, 32.5% { opacity: 1; } 33.125%, 100% { opacity: 0; } }
@keyframes wc-box {
  0%, 40% { background-color: #FFFFFF; box-shadow: inset 0 0 0 calc(var(--u)*1.5) #B9C3BC; }
  41.875%, 98% { background-color: #1C8D5E; box-shadow: inset 0 0 0 calc(var(--u)*1.5) #1C8D5E; }
  99%, 100% { background-color: #FFFFFF; box-shadow: inset 0 0 0 calc(var(--u)*1.5) #B9C3BC; }
}
@keyframes wc-boxck { 0%, 40.5% { opacity: 0; transform: scale(.5); } 42.5%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.5); } }
@keyframes wc-btn { 0%, 51.25% { background-color: #1C8D5E; } 52.1875% { background-color: #146B47; } 54.375%, 100% { background-color: #1C8D5E; } }
@keyframes wc-form { 0%, 55.625% { opacity: 1; transform: translateY(0); } 60%, 99% { opacity: 0; transform: translateY(calc(var(--u)*-6)); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes wc-done { 0%, 57.5% { opacity: 0; transform: translateY(calc(var(--u)*8)); } 61.25%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*8)); } }
@keyframes wc-dc { 0%, 58% { transform: scale(.6); animation-timing-function: cubic-bezier(.3,1.4,.5,1); } 61.875% { transform: scale(1.06); } 63.75%, 99% { transform: scale(1); } 100% { transform: scale(.6); } }
@keyframes wc-ver { 0%, 65% { opacity: 0; } 66.875%, 80% { opacity: 1; } 81.875%, 100% { opacity: 0; } }
@keyframes wc-hs1 { 0%, 72.5% { opacity: 1; } 73.75%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wc-hs2 { 0%, 73.125% { opacity: 0; } 74.375%, 98% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes wc-row1 { 0%, 3.125% { opacity: 0; transform: translateY(calc(var(--u)*5)); } 5.625%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*5)); } }
@keyframes wc-row2 { 0%, 15.625% { opacity: 0; transform: translateY(calc(var(--u)*5)); } 18.125%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*5)); } }
@keyframes wc-row3 { 0%, 31.875% { opacity: 0; transform: translateY(calc(var(--u)*5)); } 34.375%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*5)); } }
@keyframes wc-row4 { 0%, 43.125% { opacity: 0; transform: translateY(calc(var(--u)*5)); } 45.625%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*5)); } }
@keyframes wc-row5 { 0%, 58.125% { opacity: 0; transform: translateY(calc(var(--u)*5)); } 60.625%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*5)); } }
@keyframes wc-run1 { 0%, 14.375% { opacity: 1; } 15.625%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wc-run2 { 0%, 31.25% { opacity: 1; } 32.5%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wc-run3 { 0%, 41.875% { opacity: 1; } 43.125%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wc-run4 { 0%, 55.625% { opacity: 1; } 56.875%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wc-run5 { 0%, 71.875% { opacity: 1; } 73.125%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wc-ok1 { 0%, 14.375% { opacity: 0; transform: scale(.5); } 16.25%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.5); } }
@keyframes wc-ok2 { 0%, 31.25% { opacity: 0; transform: scale(.5); } 33.125%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.5); } }
@keyframes wc-ok3 { 0%, 41.875% { opacity: 0; transform: scale(.5); } 43.75%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.5); } }
@keyframes wc-ok4 { 0%, 55.625% { opacity: 0; transform: scale(.5); } 57.5%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.5); } }
@keyframes wc-ok5 { 0%, 71.875% { opacity: 0; transform: scale(.5); } 73.75%, 98% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(.5); } }
@keyframes wc-note { 0%, 73.75% { opacity: 0; transform: translateY(calc(var(--u)*8)); } 77.5%, 98% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(calc(var(--u)*8)); } }

/* ───────── scenes: git ───────── */
/* Git 창 장면 세 개(ga · gb · gc)가 함께 쓰는 프레임.
   실제 앱의 GitWindowBody · GitChangesPane · GitCommitList 구성과 색(app.css)을 따른다.
   세 장면은 같은 창(왼쪽 위 28·28, 504×372)이라 목록 항목을 바꿔도 창이 제자리에 있고,
   이야기도 이어진다: ga 끝(styles.css 선택) = gb 시작, gb 의 커밋 d4a82f1 = gc 의 맨 위 커밋. */

/* 장면 전체: 0–5% 등장, 94–99% 퇴장, 99–100% 보이지 않는 동안 상태를 되돌린다. */
.sc-ga .git-shot, .sc-gb .git-shot, .sc-gc .git-shot { position: absolute; inset: 0; animation: git-shot 8s cubic-bezier(.2,.7,.2,1) infinite both; }

/* 창 · 캡션 */
.sc-ga .git-win, .sc-gb .git-win, .sc-gc .git-win { left: calc(var(--u) * 28); top: calc(var(--u) * 28); width: calc(var(--u) * 504); height: calc(var(--u) * 372); }
.sc-ga .git-cap, .sc-gb .git-cap, .sc-gc .git-cap { flex: none; gap: calc(var(--u) * 8); }
.sc-ga .git-path, .sc-gb .git-path, .sc-gc .git-path { color: #838C99; font-size: calc(var(--u) * 11); white-space: nowrap; }

/* 툴바: Fetch · Pull ↓n · Push ↑n | 브랜치 알약 · 추적 문구 */
.sc-ga .git-bar, .sc-gb .git-bar, .sc-gc .git-bar { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 12); box-sizing: border-box; background: var(--ui-chrome); border-bottom: 1px solid var(--ui-border); }
.sc-ga .git-tool, .sc-gb .git-tool, .sc-gc .git-tool { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 6); box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 6); color: var(--ui-text); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-ga .git-w68, .sc-gb .git-w68, .sc-gc .git-w68 { width: calc(var(--u) * 68); }
.sc-ga .git-w78, .sc-gb .git-w78, .sc-gc .git-w78 { width: calc(var(--u) * 78); }
.sc-ga .git-w86, .sc-gb .git-w86, .sc-gc .git-w86 { width: calc(var(--u) * 86); }
.sc-ga .git-ico, .sc-gb .git-ico, .sc-gc .git-ico { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.sc-ga .git-cnt, .sc-gb .git-cnt, .sc-gc .git-cnt { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.sc-ga .git-mid, .sc-gb .git-mid, .sc-gc .git-mid { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 8); min-width: 0; }
.sc-ga .git-pill, .sc-gb .git-pill, .sc-gc .git-pill { flex: none; display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 9); box-sizing: border-box; border-radius: calc(var(--u) * 6); background: #2A303A; color: var(--ui-text); font-size: calc(var(--u) * 11.5); font-weight: 600; white-space: nowrap; }
.sc-ga .git-chev, .sc-gb .git-chev, .sc-gc .git-chev { flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10); color: var(--ui-muted); }
.sc-ga .git-track, .sc-gb .git-track, .sc-gc .git-track { width: calc(var(--u) * 122); overflow: hidden; color: #838C99; font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-ga .git-swap, .sc-gb .git-swap, .sc-gc .git-swap { display: inline-grid; }
.sc-ga .git-swap > span, .sc-gb .git-swap > span, .sc-gc .git-swap > span { grid-area: 1 / 1; }

/* 본문: 왼쪽 목록 열(224) + 오른쪽 상세(diff) */
.sc-ga .git-body, .sc-gb .git-body, .sc-gc .git-body { position: relative; flex: 1 1 auto; min-height: 0; }
.sc-ga .git-list, .sc-gb .git-list, .sc-gc .git-list { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 224); box-sizing: border-box; border-right: 1px solid var(--ui-border); }
.sc-ga .git-sec, .sc-gb .git-sec, .sc-gc .git-sec { position: absolute; left: 0; right: 0; }
.sc-ga .git-unst, .sc-gb .git-unst, .sc-gc .git-unst { top: 0; height: calc(var(--u) * 96); }
.sc-ga .git-stg, .sc-gb .git-stg, .sc-gc .git-stg { top: calc(var(--u) * 96); height: calc(var(--u) * 66); box-sizing: border-box; border-top: 1px solid var(--ui-border); }
.sc-ga .git-head, .sc-gb .git-head, .sc-gc .git-head { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 12); box-sizing: border-box; color: #838C99; font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-ga .git-npill, .sc-gb .git-npill, .sc-gc .git-npill { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 18); height: calc(var(--u) * 16); padding: 0 calc(var(--u) * 5); box-sizing: border-box; border-radius: calc(var(--u) * 8); background: #2A303A; color: var(--ui-muted); font-size: calc(var(--u) * 11); }
.sc-ga .git-npill > .git-swap, .sc-gb .git-npill > .git-swap, .sc-gc .git-npill > .git-swap { justify-items: center; }
.sc-ga .git-sbtn, .sc-gb .git-sbtn, .sc-gc .git-sbtn { margin-left: auto; display: inline-flex; align-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 7); box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 6); color: var(--ui-text); font-size: calc(var(--u) * 11); }
.sc-ga .git-off, .sc-gb .git-off, .sc-gc .git-off { opacity: .46; }
.sc-ga .git-sel, .sc-gb .git-sel, .sc-gc .git-sel { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: calc(var(--u) * 32); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 4); background: var(--ui-terminal); box-shadow: inset calc(var(--u) * 2) 0 0 var(--ui-text); }
.sc-ga .git-hov, .sc-gb .git-hov, .sc-gc .git-hov { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 4); background: rgba(232,235,239,.06); opacity: 0; }
.sc-ga .git-row, .sc-gb .git-row, .sc-gc .git-row { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); height: calc(var(--u) * 30); display: flex; align-items: center; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 8); box-sizing: border-box; border-radius: calc(var(--u) * 4); }
.sc-ga .git-r1, .sc-gb .git-r1, .sc-gc .git-r1 { top: calc(var(--u) * 32); }
.sc-ga .git-r2, .sc-gb .git-r2, .sc-gc .git-r2 { top: calc(var(--u) * 62); }
.sc-ga .git-m, .sc-gb .git-m, .sc-gc .git-m { flex: none; }
.sc-ga .git-fico, .sc-gb .git-fico, .sc-gc .git-fico { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: #838C99; }
.sc-ga .git-name, .sc-gb .git-name, .sc-gc .git-name { color: var(--ui-text); font-size: calc(var(--u) * 12.5); white-space: nowrap; }
.sc-ga .git-acts, .sc-gb .git-acts, .sc-gc .git-acts { margin-left: auto; display: flex; gap: calc(var(--u) * 2); }
.sc-ga .git-act, .sc-gb .git-act, .sc-gc .git-act { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 4); color: var(--ui-muted); font-size: calc(var(--u) * 13); line-height: 1; }

/* 커밋 상자 */
.sc-ga .git-cbox, .sc-gb .git-cbox, .sc-gc .git-cbox { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 110); box-sizing: border-box; background: var(--ui-chrome); border-top: 1px solid var(--ui-border); }
.sc-ga .git-msg, .sc-gb .git-msg, .sc-gc .git-msg { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 10); height: calc(var(--u) * 50); padding: calc(var(--u) * 7) calc(var(--u) * 8); box-sizing: border-box; overflow: hidden; background: var(--ui-terminal); border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 6); color: var(--ui-text); font-size: calc(var(--u) * 12); line-height: 1.5; white-space: nowrap; }
.sc-ga .git-ph, .sc-gb .git-ph, .sc-gc .git-ph { position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 7); color: #838C99; }
.sc-ga .git-foot, .sc-gb .git-foot, .sc-gc .git-foot { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 68); height: calc(var(--u) * 28); display: flex; align-items: center; gap: calc(var(--u) * 8); color: #838C99; font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-ga .git-kbd, .sc-gb .git-kbd, .sc-gc .git-kbd { font-family: var(--f-mono); font-size: calc(var(--u) * 10.5); }
.sc-ga .git-commit, .sc-gb .git-commit, .sc-gc .git-commit { margin-left: auto; display: inline-flex; align-items: center; height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 13); box-sizing: border-box; border-radius: calc(var(--u) * 6); background: #E8EBEF; color: #15181D; font-size: calc(var(--u) * 12.5); font-weight: 600; }

/* 상세: 머리 + unified diff */
.sc-ga .git-detail, .sc-gb .git-detail, .sc-gc .git-detail { position: absolute; left: calc(var(--u) * 224); right: 0; top: 0; bottom: 0; }
.sc-ga .git-dhead, .sc-gb .git-dhead, .sc-gc .git-dhead { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 40); box-sizing: border-box; background: var(--ui-chrome); border-bottom: 1px solid var(--ui-border); }
.sc-ga .git-dhc, .sc-gb .git-dhc, .sc-gc .git-dhc { position: absolute; inset: 0; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); white-space: nowrap; }
.sc-ga .git-dname, .sc-gb .git-dname, .sc-gc .git-dname { color: var(--ui-text); font-size: calc(var(--u) * 13); font-weight: 600; }
.sc-ga .git-dctx, .sc-gb .git-dctx, .sc-gc .git-dctx { color: #838C99; font-size: calc(var(--u) * 11.5); }
.sc-ga .git-delta, .sc-gb .git-delta, .sc-gc .git-delta { font-family: var(--f-mono); font-size: calc(var(--u) * 12); font-variant-numeric: tabular-nums; }
.sc-ga .git-add, .sc-gb .git-add, .sc-gc .git-add { color: var(--ui-ok); }
.sc-ga .git-del, .sc-gb .git-del, .sc-gc .git-del { color: var(--ui-danger); }
.sc-ga .git-diff, .sc-gb .git-diff, .sc-gc .git-diff { position: absolute; left: 0; right: 0; top: calc(var(--u) * 40); bottom: 0; overflow: hidden; background: var(--ui-terminal); }
.sc-ga .k-diff.git-dblk, .sc-gb .k-diff.git-dblk, .sc-gc .k-diff.git-dblk { position: absolute; left: 0; right: 0; top: calc(var(--u) * 6); margin: 0; padding: 0; font-family: var(--f-mono); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 22); }
.sc-ga .k-hunk.git-hunk, .sc-gb .k-hunk.git-hunk, .sc-gc .k-hunk.git-hunk { height: calc(var(--u) * 24); margin: 0; padding: 0 calc(var(--u) * 10); box-sizing: border-box; font-size: calc(var(--u) * 11.5); line-height: calc(var(--u) * 24); white-space: pre; }
.sc-ga .k-dl.git-dl, .sc-gb .k-dl.git-dl, .sc-gc .k-dl.git-dl { display: grid; grid-template-columns: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 10) minmax(0, 1fr); gap: 0 calc(var(--u) * 4); height: calc(var(--u) * 22); margin: 0; padding: 0 calc(var(--u) * 8); box-sizing: border-box; overflow: hidden; font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 22); white-space: pre; }
.sc-ga .git-dl > span:nth-child(-n+2), .sc-gb .git-dl > span:nth-child(-n+2), .sc-gc .git-dl > span:nth-child(-n+2) { color: #838C99; text-align: right; }
.sc-ga .git-dl > span:nth-child(3), .sc-gb .git-dl > span:nth-child(3), .sc-gc .git-dl > span:nth-child(3) { text-align: center; }

/* 상태 줄 */
.sc-ga .git-stat, .sc-gb .git-stat, .sc-gc .git-stat { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 12); box-sizing: border-box; background: var(--ui-chrome); border-top: 1px solid var(--ui-border); color: #838C99; font-size: calc(var(--u) * 11); white-space: nowrap; }
.sc-ga .git-statr, .sc-gb .git-statr, .sc-gc .git-statr { margin-left: auto; }

/* 공용 커서 · 주석 */
.sc-ga .git-cur, .sc-gb .git-cur, .sc-gc .git-cur { transform-origin: 10% 8%; }
.sc-ga .git-note, .sc-gb .git-note, .sc-gc .git-note { position: absolute; top: calc(var(--u) * 383); display: flex; align-items: center; white-space: nowrap; }

@keyframes git-shot {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 12)); }
  5%, 94% { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
}

/* ── ga · 변경 사항 검토 ──────────────────────────────────────────────
   0.0s 창 등장, index.html diff 가 한 줄씩 그려짐 → 0.9s 주석 → 2.4s 커서가 styles.css 로
   → 3.2s 클릭: 선택이 내려가고 diff 판이 styles.css 로 바뀜(+6 −0) → 7.5s 퇴장. */
.sc-ga .ga-hov { top: calc(var(--u) * 62); animation: ga-hov 8s linear infinite both; }
.sc-ga .ga-sel { transform: translateY(calc(var(--u) * 30)); animation: ga-sel 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-ga .ga-hca { opacity: 0; animation: ga-hca 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-ga .ga-hcb { animation: ga-hcb 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-ga .ga-a { opacity: 0; animation: ga-a 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-ga .ga-arows { animation: ga-arows 8s linear infinite both; }
.sc-ga .ga-b { animation: ga-b 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-ga .ga-brows { animation: ga-brows 8s linear infinite both; }
.sc-ga .ga-note { left: calc(var(--u) * 272); animation: ga-note 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-ga .ga-acts { animation: ga-acts 8s linear infinite both; }
.sc-ga .ga-cursor { transform: translate(calc(var(--u) * 158), calc(var(--u) * 179)) scale(1); animation: ga-cursor 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-ga .ga-ring { left: calc(var(--u) * 160); top: calc(var(--u) * 181); animation: ga-ring 8s ease-out infinite both; }

@keyframes ga-hov {
  0%, 37.5% { opacity: 0; }
  39.5%, 42.5% { opacity: 1; }
  44.5%, 100% { opacity: 0; }
}
@keyframes ga-sel {
  0%, 40.5% { transform: translateY(0); }
  43.5%, 99% { transform: translateY(calc(var(--u) * 30)); }
  100% { transform: translateY(0); }
}
@keyframes ga-hca {
  0%, 41% { opacity: 1; transform: translateY(0); }
  44%, 99% { opacity: 0; transform: translateY(calc(var(--u) * -6)); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ga-hcb {
  0%, 42% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  45%, 99% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
}
@keyframes ga-a {
  0%, 41% { opacity: 1; transform: translateX(0); }
  44%, 99% { opacity: 0; transform: translateX(calc(var(--u) * -12)); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes ga-arows {
  0%, 2% { clip-path: inset(0 0 100% 0); animation-timing-function: steps(8, jump-start); }
  8%, 99% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
@keyframes ga-b {
  0%, 42.5% { opacity: 0; transform: translateX(calc(var(--u) * 12)); }
  45%, 99% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(calc(var(--u) * 12)); }
}
@keyframes ga-brows {
  0%, 43% { clip-path: inset(0 0 100% 0); animation-timing-function: steps(9, jump-start); }
  49%, 99% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}
@keyframes ga-note {
  0%, 11% { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.92); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  15%, 99% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.92); }
}
@keyframes ga-acts {
  0%, 37.5% { opacity: 0; }
  39.5%, 99% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ga-cursor {
  0%, 30% { transform: translate(calc(var(--u) * 428), calc(var(--u) * 314)) scale(1); }
  39% { transform: translate(calc(var(--u) * 158), calc(var(--u) * 179)) scale(1); }
  40% { transform: translate(calc(var(--u) * 158), calc(var(--u) * 179)) scale(.86); }
  41.5%, 99% { transform: translate(calc(var(--u) * 158), calc(var(--u) * 179)) scale(1); }
  100% { transform: translate(calc(var(--u) * 428), calc(var(--u) * 314)) scale(1); }
}
@keyframes ga-ring {
  0%, 40% { opacity: 0; transform: scale(.5); }
  40.6% { opacity: .9; transform: scale(.62); }
  46%, 100% { opacity: 0; transform: scale(1.7); }
}

/* ── gb · 필요한 것만 스테이지하고 커밋 ─────────────────────────────────
   0.5s 커서가 index.html 행으로 → 1.0s 행 끝 ↑ 드러남 → 1.9s 클릭: 행이 스테이지됨으로(2/0 → 1/1)
   → 2.5s 메시지 상자 클릭, 2.7–4.6s 입력 → 5.3s 커밋 클릭 → 목록·상자가 비고 완료 알림, 툴바는 ↑1 → 7.5s 퇴장. */
.sc-gb .gb-r1 { z-index: 2; opacity: 0; transform: translateY(calc(var(--u) * 97)); animation: gb-r1 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gb .gb-acts { opacity: 0; animation: gb-acts 8s linear infinite both; }
.sc-gb .gb-up { color: var(--ui-text); background-color: rgba(232,235,239,.12); animation: gb-up 8s linear infinite both; }
.sc-gb .gb-mv { animation: gb-mv 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gb .gb-pre { opacity: 0; animation: gb-pre 8s linear infinite both; }
.sc-gb .gb-post { animation: gb-post 8s linear infinite both; }
.sc-gb .gb-n2 { opacity: 0; animation: gb-n2 8s linear infinite both; }
.sc-gb .gb-n1 { animation: gb-n1 8s linear infinite both; }
.sc-gb .gb-z0 { animation: gb-z0 8s linear infinite both; }
.sc-gb .gb-z1 { opacity: 0; animation: gb-z1 8s linear infinite both; }
.sc-gb .gb-unall { opacity: .46; animation: gb-unall 8s linear infinite both; }
.sc-gb .gb-commit { opacity: .46; animation: gb-commit 8s linear infinite both; }
.sc-gb .gb-msg { animation: gb-msg 8s linear infinite both; }
.sc-gb .gb-ph { animation: gb-ph 8s linear infinite both; }
.sc-gb .gb-tw { position: relative; display: inline-block; vertical-align: top; }
.sc-gb .gb-typed { display: inline-block; opacity: 0; animation: gb-typed 8s linear infinite both; }
.sc-gb .gb-trail { position: absolute; inset: 0; transform: translateX(100%); animation: gb-trail 8s linear infinite both; }
.sc-gb .gb-caret { position: absolute; left: 0; top: calc(var(--u) * 1.5); width: calc(var(--u) * 1.5); height: calc(var(--u) * 15); background: var(--ui-text); opacity: 0; animation: gb-caret 8s linear infinite both; }
.sc-gb .gb-toast { position: absolute; display: flex; align-items: center; left: calc(var(--u) * 300); top: calc(var(--u) * 368); white-space: nowrap; animation: gb-toast 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gb .gb-check { flex: none; }
.sc-gb .gb-tt { display: flex; flex-direction: column; gap: calc(var(--u) * 2); line-height: 1.35; }
.sc-gb .gb-t1 { display: flex; align-items: baseline; gap: calc(var(--u) * 8); }
.sc-gb .gb-t1 > b { color: var(--ui-text); font-size: calc(var(--u) * 13); font-weight: 600; }
.sc-gb .gb-tsha { color: var(--ui-muted); font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); }
.sc-gb .gb-t2 { color: var(--ui-muted); font-size: calc(var(--u) * 11.5); }
.sc-gb .gb-cursor { transform: translate(calc(var(--u) * 228), calc(var(--u) * 349)) scale(1); animation: gb-cursor 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gb .gb-ring1 { left: calc(var(--u) * 203); top: calc(var(--u) * 150); animation: gb-ring1 8s ease-out infinite both; }
.sc-gb .gb-ring2 { left: calc(var(--u) * 214); top: calc(var(--u) * 314); animation: gb-ring2 8s ease-out infinite both; }
.sc-gb .gb-ring3 { left: calc(var(--u) * 230); top: calc(var(--u) * 351); animation: gb-ring3 8s ease-out infinite both; }

/* index.html 행: 머무르면 밝아지고(호버) ↑ 클릭에 살짝 들려 스테이지됨 목록 자리(+97)로 내려앉는다. 커밋되면 사라진다. */
@keyframes gb-r1 {
  0%, 11% { opacity: 1; transform: translateY(0) scale(1); background-color: rgba(232,235,239,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  12.5%, 24.4% { opacity: 1; transform: translateY(0) scale(1); background-color: rgba(232,235,239,.06); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  25.4% { opacity: 1; transform: translateY(0) scale(1.02); background-color: rgba(38,44,53,1); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) 0 rgba(0,0,0,.45); }
  29.5% { opacity: 1; transform: translateY(calc(var(--u) * 97)) scale(1.02); background-color: rgba(38,44,53,1); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) 0 rgba(0,0,0,.45); }
  31%, 67.5% { opacity: 1; transform: translateY(calc(var(--u) * 97)) scale(1); background-color: rgba(38,44,53,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  70%, 99% { opacity: 0; transform: translateY(calc(var(--u) * 97)) scale(1); background-color: rgba(38,44,53,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  100% { opacity: 1; transform: translateY(0) scale(1); background-color: rgba(232,235,239,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
@keyframes gb-acts {
  0%, 11% { opacity: 0; }
  12.5%, 24.4% { opacity: 1; }
  25.2%, 100% { opacity: 0; }
}
@keyframes gb-up {
  0%, 12% { color: var(--ui-muted); background-color: rgba(232,235,239,0); }
  13%, 23.6% { color: var(--ui-text); background-color: rgba(232,235,239,.12); }
  24.1%, 25% { color: var(--ui-text); background-color: rgba(232,235,239,.24); }
  26%, 100% { color: var(--ui-text); background-color: rgba(232,235,239,.12); }
}
@keyframes gb-mv {
  0%, 25% { transform: translateY(calc(var(--u) * 30)); }
  29%, 99% { transform: translateY(0); }
  100% { transform: translateY(calc(var(--u) * 30)); }
}
@keyframes gb-n2 {
  0%, 25.5% { opacity: 1; }
  26.5%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes gb-n1 {
  0%, 25.5% { opacity: 0; }
  26.5%, 99% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gb-z0 {
  0%, 29% { opacity: 1; }
  30%, 67.5% { opacity: 0; }
  68.5%, 100% { opacity: 1; }
}
@keyframes gb-z1 {
  0%, 29% { opacity: 0; }
  30%, 67.5% { opacity: 1; }
  68.5%, 100% { opacity: 0; }
}
@keyframes gb-unall {
  0%, 29% { opacity: .46; }
  30%, 67.5% { opacity: 1; }
  68.5%, 100% { opacity: .46; }
}
/* 커밋 직후 툴바·상태 줄이 실제처럼 바뀐다: ↑0 → ↑1, "와 같음" → "보다 1 앞", 커밋 6개 → 7개 (gc 의 첫 장면과 같다). */
@keyframes gb-pre {
  0%, 68% { opacity: 1; }
  69.5%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes gb-post {
  0%, 68% { opacity: 0; }
  69.5%, 99% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gb-commit {
  0%, 29% { opacity: .46; background-color: #E8EBEF; transform: scale(1); }
  30%, 65% { opacity: 1; background-color: #E8EBEF; transform: scale(1); }
  65.6%, 66% { opacity: 1; background-color: #F6F7F8; transform: scale(1); }
  66.4% { opacity: 1; background-color: #D9DDE2; transform: scale(.96); }
  67.5% { opacity: 1; background-color: #E8EBEF; transform: scale(1); }
  68.5%, 100% { opacity: .46; background-color: #E8EBEF; transform: scale(1); }
}
@keyframes gb-msg {
  0%, 31.6% { box-shadow: 0 0 0 0 rgba(120,174,233,0); }
  32.6%, 66.4% { box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(120,174,233,.85); }
  67.4%, 100% { box-shadow: 0 0 0 0 rgba(120,174,233,0); }
}
@keyframes gb-ph {
  0%, 33.8% { opacity: 1; }
  34%, 68% { opacity: 0; }
  68.6%, 100% { opacity: 1; }
}
@keyframes gb-typed {
  0%, 34% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(30, jump-start); }
  57%, 67.5% { opacity: 1; clip-path: inset(0 0 0 0); }
  68.3%, 99% { opacity: 0; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; clip-path: inset(0 100% 0 0); }
}
@keyframes gb-trail {
  0%, 34% { transform: translateX(0); animation-timing-function: steps(30, jump-start); }
  57%, 99% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes gb-caret {
  0%, 32.4% { opacity: 0; }
  32.6%, 61% { opacity: 1; }
  61.3%, 64.3% { opacity: 0; }
  64.6%, 66.3% { opacity: 1; }
  66.5%, 100% { opacity: 0; }
}
@keyframes gb-toast {
  0%, 67.5% { opacity: 0; transform: translateY(calc(var(--u) * 12)) scale(.96); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  71.5%, 99% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * 12)) scale(.96); }
}
@keyframes gb-cursor {
  0%, 6% { transform: translate(calc(var(--u) * 450), calc(var(--u) * 246)) scale(1); }
  13%, 23.4% { transform: translate(calc(var(--u) * 201), calc(var(--u) * 148)) scale(1); }
  24% { transform: translate(calc(var(--u) * 201), calc(var(--u) * 148)) scale(.86); }
  25% { transform: translate(calc(var(--u) * 201), calc(var(--u) * 148)) scale(1); }
  31%, 31.1% { transform: translate(calc(var(--u) * 212), calc(var(--u) * 312)) scale(1); }
  31.6% { transform: translate(calc(var(--u) * 212), calc(var(--u) * 312)) scale(.86); }
  32.6%, 60% { transform: translate(calc(var(--u) * 212), calc(var(--u) * 312)) scale(1); }
  65%, 65.9% { transform: translate(calc(var(--u) * 228), calc(var(--u) * 349)) scale(1); }
  66.4% { transform: translate(calc(var(--u) * 228), calc(var(--u) * 349)) scale(.86); }
  67.5%, 99% { transform: translate(calc(var(--u) * 228), calc(var(--u) * 349)) scale(1); }
  100% { transform: translate(calc(var(--u) * 450), calc(var(--u) * 246)) scale(1); }
}
@keyframes gb-ring1 {
  0%, 23.9% { opacity: 0; transform: scale(.5); }
  24.4% { opacity: .9; transform: scale(.62); }
  29.5%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes gb-ring2 {
  0%, 31.5% { opacity: 0; transform: scale(.5); }
  32% { opacity: .9; transform: scale(.62); }
  37%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes gb-ring3 {
  0%, 66.3% { opacity: 0; transform: scale(.5); }
  66.8% { opacity: .9; transform: scale(.62); }
  72%, 100% { opacity: 0; transform: scale(1.7); }
}

/* ── gc · 브랜치와 원격 저장소까지 ──────────────────────────────────────
   0.5s Push ↑1 · "origin/master 보다 1 앞" 이 잠깐 밝아짐 → 1.4s 커서가 Push 로 → 2.1s 클릭, 1.5s 동안 Push 중
   → 3.8s origin/master 칩이 맨 위 커밋으로 올라오고 "origin/master 와 같음", ↑0 → 4.3s 주석 → 7.5s 퇴장. */
.sc-gc .gc-grid { position: absolute; inset: 0; background: #181C22; }
.sc-gc .gc-hrow { display: grid; grid-template-columns: calc(var(--u) * 26) minmax(0, 1fr) calc(var(--u) * 40) calc(var(--u) * 54); column-gap: calc(var(--u) * 10); align-items: center; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12); box-sizing: border-box; background: var(--ui-chrome); border-bottom: 1px solid var(--ui-border); color: #838C99; font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-gc .gc-rows { position: relative; height: calc(var(--u) * 238); }
.sc-gc .gc-row { display: grid; grid-template-columns: calc(var(--u) * 26) minmax(0, 1fr) calc(var(--u) * 40) calc(var(--u) * 54); column-gap: calc(var(--u) * 10); align-items: center; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 12); box-sizing: border-box; color: var(--ui-text); font-size: calc(var(--u) * 12); white-space: nowrap; }
.sc-gc .gc-on { background: var(--ui-terminal); box-shadow: inset calc(var(--u) * 2) 0 0 var(--ui-text); }
.sc-gc .gc-desc { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.sc-gc .gc-subj { flex: none; }
.sc-gc .gc-au { color: var(--ui-muted); }
.sc-gc .gc-sha { color: var(--ui-muted); font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); }
.sc-gc .gc-ref { flex: none; display: inline-flex; align-items: center; justify-content: center; height: calc(var(--u) * 20); margin-right: calc(var(--u) * 6); padding: 0 calc(var(--u) * 6); box-sizing: border-box; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 4); color: var(--ui-text); font-size: calc(var(--u) * 11); white-space: nowrap; }
.sc-gc .gc-head { width: calc(var(--u) * 52); margin-right: calc(var(--u) * 4); border-color: var(--ui-text); font-weight: 600; }
.sc-gc .gc-tag { border-style: dashed; }
.sc-gc .gc-slot { flex: none; width: calc(var(--u) * 84); margin-right: calc(var(--u) * 6); }
.sc-gc .gc-graph { position: absolute; left: calc(var(--u) * 12); top: 0; width: calc(var(--u) * 26); height: calc(var(--u) * 238); overflow: visible; }
.sc-gc .gc-fly { position: absolute; left: calc(var(--u) * 104); top: calc(var(--u) * 7); width: calc(var(--u) * 84); margin: 0; background: var(--ui-terminal); color: #838C99; animation: gc-fly 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gc .gc-s1 { animation: gc-s1 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gc .gc-s2 { animation: gc-s2 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gc .gc-ib { position: relative; flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.sc-gc .gc-ib > svg { position: absolute; left: 0; top: 0; }
.sc-gc .gc-push { background-color: rgba(232,235,239,.08); animation: gc-push 8s linear infinite both; }
.sc-gc .gc-picon { animation: gc-picon 8s linear infinite both; }
.sc-gc .gc-spin { opacity: 0; color: var(--ui-ok); animation: gc-spin 8s linear infinite both; }
.sc-gc .gc-dim { animation: gc-dim 8s linear infinite both; }
.sc-gc .gc-a1 { opacity: 0; animation: gc-a1 8s linear infinite both; }
.sc-gc .gc-a0 { animation: gc-a0 8s linear infinite both; }
.sc-gc .gc-t1 { opacity: 0; animation: gc-t1 8s linear infinite both; }
.sc-gc .gc-t0 { animation: gc-t0 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gc .gc-r { animation: gc-r 8s linear infinite both; }
.sc-gc .gc-busy { opacity: 0; animation: gc-busy 8s linear infinite both; }
.sc-gc .gc-note { left: calc(var(--u) * 256); animation: gc-note 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gc .gc-cursor { transform: translate(calc(var(--u) * 234), calc(var(--u) * 84)) scale(1); animation: gc-cursor 8s cubic-bezier(.2,.7,.2,1) infinite both; }
.sc-gc .gc-ring { left: calc(var(--u) * 236); top: calc(var(--u) * 86); animation: gc-ring 8s ease-out infinite both; }

@keyframes gc-fly {
  0%, 47% { transform: translate(calc(var(--u) * -56), calc(var(--u) * 34)); box-shadow: 0 0 0 0 rgba(232,235,239,0); }
  52.5% { transform: translate(0, 0); box-shadow: 0 0 0 0 rgba(232,235,239,.28); }
  58%, 99% { transform: translate(0, 0); box-shadow: 0 0 0 calc(var(--u) * 6) rgba(232,235,239,0); }
  100% { transform: translate(calc(var(--u) * -56), calc(var(--u) * 34)); box-shadow: 0 0 0 0 rgba(232,235,239,0); }
}
@keyframes gc-s1 {
  0%, 46% { transform: translateX(calc(var(--u) * -88)); }
  50.5%, 99% { transform: translateX(0); }
  100% { transform: translateX(calc(var(--u) * -88)); }
}
@keyframes gc-s2 {
  0%, 48% { transform: translateX(calc(var(--u) * 90)); }
  53%, 99% { transform: translateX(0); }
  100% { transform: translateX(calc(var(--u) * 90)); }
}
@keyframes gc-push {
  0%, 24% { background-color: rgba(232,235,239,0); }
  25% { background-color: rgba(232,235,239,.08); }
  25.8% { background-color: rgba(232,235,239,.16); }
  27%, 99% { background-color: rgba(232,235,239,.08); }
  100% { background-color: rgba(232,235,239,0); }
}
@keyframes gc-picon {
  0%, 26.6% { opacity: 1; }
  27.4%, 46% { opacity: 0; }
  46.8%, 100% { opacity: 1; }
}
@keyframes gc-spin {
  0%, 26.6% { opacity: 0; transform: rotate(0deg); }
  27.4% { opacity: 1; transform: rotate(60deg); }
  46% { opacity: 1; transform: rotate(1140deg); }
  46.8%, 100% { opacity: 0; transform: rotate(1200deg); }
}
@keyframes gc-dim {
  0%, 26.6% { opacity: 1; }
  27.4%, 46% { opacity: .46; }
  47%, 100% { opacity: 1; }
}
@keyframes gc-a1 {
  0%, 6% { opacity: 1; color: var(--ui-muted); }
  9%, 18% { opacity: 1; color: var(--ui-text); }
  22%, 46.5% { opacity: 1; color: var(--ui-muted); }
  48%, 99% { opacity: 0; color: var(--ui-muted); }
  100% { opacity: 1; color: var(--ui-muted); }
}
@keyframes gc-a0 {
  0%, 46.5% { opacity: 0; }
  48%, 99% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gc-t1 {
  0%, 6% { opacity: 1; color: #838C99; }
  9%, 18% { opacity: 1; color: var(--ui-text); }
  22%, 47% { opacity: 1; color: #838C99; }
  49.5%, 99% { opacity: 0; color: #838C99; }
  100% { opacity: 1; color: #838C99; }
}
@keyframes gc-t0 {
  0%, 47.5% { opacity: 0; transform: translateY(calc(var(--u) * 4)); }
  50.5%, 99% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * 4)); }
}
@keyframes gc-r {
  0%, 26.6% { opacity: 1; }
  27.4%, 46% { opacity: 0; }
  47%, 100% { opacity: 1; }
}
@keyframes gc-busy {
  0%, 26.6% { opacity: 0; }
  27.4%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}
@keyframes gc-note {
  0%, 54% { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.92); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  58%, 99% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.92); }
}
@keyframes gc-cursor {
  0%, 17% { transform: translate(calc(var(--u) * 344), calc(var(--u) * 278)) scale(1); }
  25% { transform: translate(calc(var(--u) * 234), calc(var(--u) * 84)) scale(1); }
  25.8% { transform: translate(calc(var(--u) * 234), calc(var(--u) * 84)) scale(.86); }
  27%, 99% { transform: translate(calc(var(--u) * 234), calc(var(--u) * 84)) scale(1); }
  100% { transform: translate(calc(var(--u) * 344), calc(var(--u) * 278)) scale(1); }
}
@keyframes gc-ring {
  0%, 25.7% { opacity: 0; transform: scale(.5); }
  26.2% { opacity: .9; transform: scale(.62); }
  31.5%, 100% { opacity: 0; transform: scale(1.7); }
}

/* ───────── scenes: ses ───────── */
/* ── ses: 세션 장면 공통 ───────────────────────────────────────── */
.sc-sa .ses-beat, .sc-sb .ses-beat, .sc-sc .ses-beat { position: relative; display: inline-flex; flex: none; width: calc(var(--u) * 8); height: calc(var(--u) * 8); }
.sc-sa .ses-beat::after, .sc-sb .ses-beat::after, .sc-sc .ses-beat::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; border: calc(var(--u) * 2) solid #FF9F0A; border-radius: 50%; opacity: 0; animation: ses-beat 8s ease-out infinite both; }
.sc-sa .ses-beat.ses-amber::after, .sc-sb .ses-beat.ses-amber::after, .sc-sc .ses-beat.ses-amber::after { border-color: #56D69A; }
.sc-sa .k-note.ses-note, .sc-sb .k-note.ses-note, .sc-sc .k-note.ses-note { position: absolute; z-index: 30; display: inline-flex; align-items: center; gap: calc(var(--u) * 8); white-space: nowrap; }
.sc-sa .k-cursor.ses-cur, .sc-sb .k-cursor.ses-cur, .sc-sc .k-cursor.ses-cur { transform-origin: calc(var(--u) * 2) calc(var(--u) * 2); }
.sc-sa .k-ring.ses-ring, .sc-sb .k-ring.ses-ring, .sc-sc .k-ring.ses-ring { z-index: 39; }
@keyframes ses-beat {
  0%, 20%, 40%, 60%, 80% { opacity: .7; transform: scale(1); }
  14%, 34%, 54%, 74%, 94% { opacity: 0; transform: scale(2.6); }
  19.9%, 39.9%, 59.9%, 79.9%, 100% { opacity: 0; transform: scale(1); }
}

/* ── sa: 닫아도 유지되는 세션 ─────────────────────────────────────
   0.0 창 등장 · 0.45/0.95 출력 두 줄 · 1.5 커서가 탭 × 도착 · 1.68 누름
   1.8–2.4 창이 오른쪽 위 세션 알약으로 줄어듦 · 2.4 카드(실시간 한 줄) · 2.6 노트
   2.4/3.6/4.6 실시간 줄 갱신 · 5.1 「열기」 도착 · 5.26 누름 · 5.35–5.95 창 복귀(출력이 더 늘어남)
   6.0 노트 둘째 · 7.44–8.0 정리 */
.sc-sa .sa-slot { position: absolute; left: calc(var(--u) * 28); top: calc(var(--u) * 76); z-index: 1; width: calc(var(--u) * 504); height: calc(var(--u) * 328); box-sizing: border-box; border: calc(var(--u) * 1.5) dashed rgba(255, 255, 255, .9); border-radius: calc(var(--u) * 12); background: rgba(255, 255, 255, .24); opacity: 0; animation: sa-slot 8s ease-out infinite both; }
.sc-sa .k-win.sa-win { left: calc(var(--u) * 28); top: calc(var(--u) * 76); z-index: 2; width: calc(var(--u) * 504); height: calc(var(--u) * 328); transform-origin: calc(var(--u) * 430) calc(var(--u) * -32); animation: sa-win 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sa .k-cap.sa-cap { align-items: center; gap: calc(var(--u) * 8); }
.sc-sa .k-tab.sa-tab { position: relative; flex: none; width: calc(var(--u) * 136); padding: 0 calc(var(--u) * 28) 0 calc(var(--u) * 8); box-sizing: border-box; gap: calc(var(--u) * 7); background: rgba(255, 255, 255, .09); color: var(--ui-text); }
.sc-sa .sa-tname { font-weight: 600; white-space: nowrap; }
.sc-sa .sa-x { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 3); display: grid; place-items: center; width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 5); color: var(--ui-muted); animation: sa-x 8s ease-out infinite both; }
.sc-sa .sa-x svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.sc-sa .k-svg.sa-plus { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--ui-muted); }
.sc-sa .k-term.sa-term { display: flex; flex-direction: column; font-size: calc(var(--u) * 12); white-space: normal; }
.sc-sa .sa-term p { white-space: pre; }
.sc-sa .sa-h { color: var(--ui-text); }
.sc-sa .sa-h b { font-weight: 600; }
.sc-sa .sa-q { margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: calc(var(--u) * 6); background: rgba(255, 255, 255, .06); color: var(--ui-text); }
.sc-sa .sa-l { margin-top: calc(var(--u) * 4); color: #C9D1DA; }
.sc-sa .sa-l b { color: var(--ui-text); font-weight: 600; }
.sc-sa .sa-l3 { margin-top: calc(var(--u) * 12); animation: sa-l3 8s ease-out infinite both; }
.sc-sa .sa-l4 { animation: sa-l4 8s ease-out infinite both; }
.sc-sa .sa-minus { color: var(--ui-danger); }
.sc-sa .sa-new { margin: calc(var(--u) * 8) 0 0 calc(var(--u) * -10); padding: calc(var(--u) * 3) calc(var(--u) * 8); border-left: calc(var(--u) * 2) solid var(--ui-ok); border-radius: 0 calc(var(--u) * 6) calc(var(--u) * 6) 0; background-color: rgba(111, 211, 160, .09); animation: sa-new 8s ease-out infinite both; }
.sc-sa .sa-new .sa-l { margin-top: 0; }
.sc-sa .sa-new .sa-ok { color: var(--ui-ok); }
.sc-sa .sa-stat { display: grid; margin-top: auto; color: #C9D1DA; }
.sc-sa .sa-stat > p { grid-area: 1 / 1; }
.sc-sa .sa-stat b { color: var(--ui-text); font-weight: 600; }
.sc-sa .sa-spin { color: var(--ui-ok); }
.sc-sa .sa-t1 { opacity: 0; animation: sa-t1 8s linear infinite both; }
.sc-sa .sa-t2 { animation: sa-t2 8s linear infinite both; }
.sc-sa .sa-comp { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 34); margin-top: calc(var(--u) * 8); padding: 0 calc(var(--u) * 12); box-sizing: border-box; border-radius: calc(var(--u) * 8); background: rgba(255, 255, 255, .05); color: var(--ui-muted); white-space: nowrap; }
.sc-sa .sa-comp b { color: var(--ui-text); font-weight: 600; }
.sc-sa .sa-pill { position: absolute; right: calc(var(--u) * 28); top: calc(var(--u) * 28); z-index: 3; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 9); width: calc(var(--u) * 148); height: calc(var(--u) * 32); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .12); border-radius: calc(var(--u) * 999); background: var(--ui-chrome); color: var(--ui-text); font-size: calc(var(--u) * 12); white-space: nowrap; box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(24, 40, 52, .22), 0 0 0 0 rgba(111, 211, 160, 0); animation: sa-pill 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sa .sa-pill b { font-size: calc(var(--u) * 12.5); font-weight: 600; }
.sc-sa .sa-sep { width: calc(var(--u) * 1); height: calc(var(--u) * 14); background: rgba(255, 255, 255, .16); }
.sc-sa .sa-card { position: absolute; right: calc(var(--u) * 28); top: calc(var(--u) * 72); z-index: 3; width: calc(var(--u) * 262); padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 14); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .12); border-radius: calc(var(--u) * 12); background: var(--ui-panel); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 40) rgba(24, 40, 52, .3); opacity: 0; transform-origin: calc(var(--u) * 188) 0; animation: sa-card 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sa .sa-row { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 26); }
.sc-sa .sa-id { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.sc-sa .k-ico.sa-ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.sc-sa .k-dot.sa-cdot { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * -2); box-shadow: 0 0 0 calc(var(--u) * 2) var(--ui-panel); }
.sc-sa .sa-name { color: var(--ui-text); font-size: calc(var(--u) * 12.5); font-weight: 600; white-space: nowrap; }
.sc-sa .sa-cst { color: #C2CBD5; font-size: calc(var(--u) * 11); white-space: nowrap; }
.sc-sa .k-btn.sa-open { position: absolute; right: calc(var(--u) * 12); top: calc(var(--u) * 12); display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 46); padding: 0; background-color: rgba(255, 255, 255, .08); color: var(--ui-text); font-size: calc(var(--u) * 12); animation: sa-open 8s ease-out infinite both; }
.sc-sa .sa-live { position: relative; height: calc(var(--u) * 18); margin: calc(var(--u) * 8) 0 0 calc(var(--u) * 34); overflow: hidden; color: #C9D1DA; font-family: var(--f-mono); font-size: calc(var(--u) * 11); line-height: calc(var(--u) * 18); }
.sc-sa .sa-lv { position: absolute; left: 0; top: 0; white-space: nowrap; }
.sc-sa .sa-lv1 { animation: sa-lv1 8s ease-out infinite both; }
.sc-sa .sa-lv2 { opacity: 0; animation: sa-lv2 8s ease-out infinite both; }
.sc-sa .sa-lv3 { color: var(--ui-ok); animation: sa-lv3 8s ease-out infinite both; }
.sc-sa .k-note.sa-n1 { left: 50%; top: calc(var(--u) * 240); opacity: 0; transform: translate(-50%, -50%); animation: sa-n1 8s ease-out infinite both; }
.sc-sa .k-note.sa-n2 { left: 50%; top: calc(var(--u) * 404); transform: translate(-50%, -50%); animation: sa-n2 8s ease-out infinite both; }
.sc-sa .k-cursor.sa-cur { transform: translate(calc(var(--u) * 468), calc(var(--u) * 298)); animation: sa-cur 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sa .k-ring.sa-r1 { left: calc(var(--u) * 163); top: calc(var(--u) * 93); animation: sa-r1 8s ease-out infinite both; }
.sc-sa .k-ring.sa-r2 { left: calc(var(--u) * 497); top: calc(var(--u) * 97); animation: sa-r2 8s ease-out infinite both; }
@keyframes sa-win {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 14)) scale(1); }
  5% { opacity: 1; transform: translateY(0) scale(1); }
  22.5% { opacity: 1; transform: translateY(0) scale(1); }
  26% { opacity: .85; }
  30% { opacity: 0; transform: translateY(0) scale(.06); }
  66.875% { opacity: 0; transform: translateY(0) scale(.06); }
  68.75% { opacity: .9; }
  74.375% { opacity: 1; transform: translateY(0) scale(1); }
  93% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(1); }
}
@keyframes sa-l3 {
  0%, 5.625% { opacity: 0; transform: translateY(calc(var(--u) * 5)); }
  8.125%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes sa-l4 {
  0%, 11.875% { opacity: 0; transform: translateY(calc(var(--u) * 5)); }
  14.375%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes sa-new {
  0%, 37.5% { opacity: 0; background-color: rgba(111, 211, 160, .24); }
  37.6%, 74.375% { opacity: 1; background-color: rgba(111, 211, 160, .24); }
  83%, 100% { opacity: 1; background-color: rgba(111, 211, 160, .09); }
}
@keyframes sa-t1 {
  0%, 37.5% { opacity: 1; }
  37.6%, 100% { opacity: 0; }
}
@keyframes sa-t2 {
  0%, 37.5% { opacity: 0; }
  37.6%, 100% { opacity: 1; }
}
@keyframes sa-x {
  0%, 17.5% { background-color: rgba(255, 255, 255, 0); color: var(--ui-muted); }
  18.75%, 23% { background-color: rgba(255, 255, 255, .16); color: var(--ui-text); }
  26%, 100% { background-color: rgba(255, 255, 255, 0); color: var(--ui-muted); }
}
@keyframes sa-pill {
  0% { opacity: 0; transform: translateY(calc(var(--u) * -6)) scale(1); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(24, 40, 52, .22), 0 0 0 0 rgba(111, 211, 160, 0); }
  5%, 28.75% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(24, 40, 52, .22), 0 0 0 0 rgba(111, 211, 160, 0); }
  30.75% { opacity: 1; transform: translateY(0) scale(1.08); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(24, 40, 52, .22), 0 0 0 calc(var(--u) * 4) rgba(111, 211, 160, .3); }
  33%, 64% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(24, 40, 52, .22), 0 0 0 calc(var(--u) * 4) rgba(111, 211, 160, .3); }
  70%, 93% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(24, 40, 52, .22), 0 0 0 0 rgba(111, 211, 160, 0); }
  100% { opacity: 0; transform: translateY(0) scale(1); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(24, 40, 52, .22), 0 0 0 0 rgba(111, 211, 160, 0); }
}
@keyframes sa-card {
  0%, 30% { opacity: 0; transform: translateY(calc(var(--u) * -10)) scale(.96); }
  34.375%, 66.5% { opacity: 1; transform: translateY(0) scale(1); }
  69.5%, 100% { opacity: 0; transform: translateY(calc(var(--u) * -8)) scale(.96); }
}
@keyframes sa-lv1 {
  0%, 43.75% { opacity: 1; transform: translateY(0); }
  45.25%, 100% { opacity: 0; transform: translateY(calc(var(--u) * -10)); }
}
@keyframes sa-lv2 {
  0%, 45% { opacity: 0; transform: translateY(calc(var(--u) * 10)); }
  46.5%, 55.5% { opacity: 1; transform: translateY(0); }
  57%, 100% { opacity: 0; transform: translateY(calc(var(--u) * -10)); }
}
@keyframes sa-lv3 {
  0%, 57% { opacity: 0; transform: translateY(calc(var(--u) * 10)); }
  58.5%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes sa-open {
  0%, 62.5% { background-color: rgba(255, 255, 255, .08); color: var(--ui-text); }
  63.75%, 100% { background-color: var(--ui-brand); color: #FFFFFF; }
}
@keyframes sa-slot {
  0%, 26.25% { opacity: 0; }
  31.25%, 68% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
@keyframes sa-n1 {
  0%, 32.5% { opacity: 0; transform: translate(-50%, -50%) scale(.9); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  35.5%, 62.5% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}
@keyframes sa-n2 {
  0%, 75% { opacity: 0; transform: translate(-50%, -50%) scale(.9); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  78.125%, 93% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  98%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sa-cur {
  0%, 2.5% { opacity: 0; transform: translate(calc(var(--u) * 330), calc(var(--u) * 302)) scale(1); }
  6.25% { opacity: 1; transform: translate(calc(var(--u) * 318), calc(var(--u) * 288)) scale(1); }
  18.75%, 20% { transform: translate(calc(var(--u) * 161), calc(var(--u) * 91)) scale(1); }
  21% { transform: translate(calc(var(--u) * 161), calc(var(--u) * 91)) scale(.86); }
  22.5%, 26% { transform: translate(calc(var(--u) * 161), calc(var(--u) * 91)) scale(1); }
  33%, 53.75% { transform: translate(calc(var(--u) * 214), calc(var(--u) * 170)) scale(1); }
  63.75%, 65% { transform: translate(calc(var(--u) * 495), calc(var(--u) * 95)) scale(1); }
  65.75% { transform: translate(calc(var(--u) * 495), calc(var(--u) * 95)) scale(.86); }
  67% { transform: translate(calc(var(--u) * 495), calc(var(--u) * 95)) scale(1); }
  77%, 93% { opacity: 1; transform: translate(calc(var(--u) * 468), calc(var(--u) * 298)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--u) * 468), calc(var(--u) * 298)) scale(1); }
}
@keyframes sa-r1 {
  0%, 20.4% { opacity: 0; transform: scale(.4); }
  20.5% { opacity: .9; transform: scale(.45); }
  26.5%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes sa-r2 {
  0%, 65.1% { opacity: 0; transform: scale(.4); }
  65.2% { opacity: .9; transform: scale(.45); }
  71.5%, 100% { opacity: 0; transform: scale(1.5); }
}

/* ── sb: 상태별로 한눈에 ─────────────────────────────────────────
   0.0 허브 등장 · 0–1.0 「홈페이지 개선」 초록 점이 뜀 · 1.0 점이 주황, 상태 「입력 대기」
   1.25–2.4 그 행이 들려 「확인 필요」로 올라감(개수 1→2, 1→0) · 2.2 노트
   2.3–3.2 커서가 검색 상자로 · 3.3 누름 · 3.44–3.74 「홈페이지」 입력 · 3.84–4.24 나머지 행이 흐려짐
   4.32–5.12 커서가 일치한 행의 「열기」로 · 7.44–8.0 정리 */
.sc-sb .sb-hub { position: absolute; left: calc(var(--u) * 70); top: calc(var(--u) * 28); width: calc(var(--u) * 420); height: calc(var(--u) * 392); box-sizing: border-box; overflow: hidden; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 12); background: var(--ui-panel); color: var(--ui-text); box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 56) rgba(24, 40, 52, .28), 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(24, 40, 52, .12); animation: sb-hub 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sb .sb-head { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 48); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 16); box-sizing: border-box; border-bottom: 1px solid var(--ui-border); }
.sc-sb .sb-head b { font-size: calc(var(--u) * 15); font-weight: 650; }
.sc-sb .sb-act { margin-right: auto; color: var(--ui-muted); font-size: calc(var(--u) * 11.5); }
.sc-sb .sb-close { display: grid; place-items: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28); color: var(--ui-muted); }
.sc-sb .sb-close svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.sc-sb .sb-search { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 58); display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 10); box-sizing: border-box; border: 1px solid rgba(142, 197, 255, .75); border-radius: calc(var(--u) * 6); background: var(--ui-terminal); color: var(--ui-muted); font-size: calc(var(--u) * 12); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(142, 197, 255, .16); animation: sb-search 8s ease-out infinite both; }
.sc-sb .k-svg.sb-mag { flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: #7D8A9B; }
.sc-sb .sb-field { display: grid; flex: 1; align-items: center; min-width: 0; }
.sc-sb .sb-ph, .sc-sb .sb-tw { grid-area: 1 / 1; white-space: nowrap; }
.sc-sb .sb-ph { color: #838C99; opacity: 0; animation: sb-ph 8s linear infinite both; }
.sc-sb .sb-tw { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); color: var(--ui-text); }
.sc-sb .sb-typed { display: inline-block; white-space: nowrap; clip-path: inset(0 0 0 0); animation: sb-type 8s linear infinite both; }
.sc-sb .sb-cw { display: inline-flex; animation: sb-cw 8s linear infinite both; }
.sc-sb .sb-kbd { flex: none; color: #838C99; font-size: calc(var(--u) * 10.5); }
.sc-sb .sb-g { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10); box-sizing: border-box; color: var(--ui-muted); font-size: calc(var(--u) * 11.5); font-weight: 650; letter-spacing: .02em; opacity: .2; animation: sb-dim 8s ease-out infinite both; }
.sc-sb .sb-g1 { top: calc(var(--u) * 98); color: var(--ui-text); }
.sc-sb .sb-g2 { top: calc(var(--u) * 236); animation-name: sb-shift; }
.sc-sb .sb-g3 { top: calc(var(--u) * 270); }
.sc-sb .sb-g4 { top: calc(var(--u) * 356); }
.sc-sb .sb-num { display: inline-grid; color: var(--ui-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.sc-sb .sb-num > span { grid-area: 1 / 1; }
.sc-sb .sb-old { opacity: 0; animation: sb-old 8s ease-out infinite both; }
.sc-sb .sb-new { animation: sb-new 8s ease-out infinite both; }
.sc-sb .k-svg.sb-chev { margin-left: auto; width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--ui-muted); }
.sc-sb .sb-row { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 10); box-sizing: border-box; border-radius: calc(var(--u) * 8); }
.sc-sb .sb-a { top: calc(var(--u) * 178); z-index: 1; opacity: .2; animation: sb-shift 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sb .sb-b { top: calc(var(--u) * 126); z-index: 3; background-color: rgba(111, 211, 160, .1); box-shadow: 0 0 0 0 rgba(10, 14, 18, 0), inset 0 0 0 calc(var(--u) * 1) rgba(111, 211, 160, .32); animation: sb-b 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sb .sb-c { top: calc(var(--u) * 298); opacity: .2; animation: sb-dim 8s ease-out infinite both; }
.sc-sb .sb-id { position: relative; display: grid; place-items: center; flex: none; width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.sc-sb .k-ico.sb-ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.sc-sb .k-dot.sb-dot { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * -2); box-shadow: 0 0 0 calc(var(--u) * 2) var(--ui-panel); }
.sc-sb .k-dot.sb-bdot { animation: sb-bdot 8s linear infinite both; }
.sc-sb .sb-bring { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * -2); width: calc(var(--u) * 8); height: calc(var(--u) * 8); box-sizing: border-box; border: calc(var(--u) * 2) solid #56D69A; border-radius: 50%; opacity: 0; animation: sb-bring 8s ease-out infinite both; }
.sc-sb .sb-lines { display: flex; flex: 1; flex-direction: column; gap: calc(var(--u) * 3); min-width: 0; }
.sc-sb .sb-l1 { display: flex; align-items: baseline; gap: calc(var(--u) * 8); white-space: nowrap; }
.sc-sb .sb-l1 b { color: var(--ui-text); font-size: calc(var(--u) * 13); font-weight: 650; }
.sc-sb .sb-st { display: inline-grid; font-size: calc(var(--u) * 11.5); }
.sc-sb .sb-st > span { grid-area: 1 / 1; }
.sc-sb .sb-need { color: #C2CBD5; }
.sc-sb .sb-work { color: #C2CBD5; }
.sc-sb .sb-idle { color: var(--ui-muted); }
.sc-sb .sb-so { opacity: 0; animation: sb-so 8s linear infinite both; }
.sc-sb .sb-sn { animation: sb-sn 8s linear infinite both; }
.sc-sb .sb-l2 { overflow: hidden; color: var(--ui-muted); font-size: calc(var(--u) * 11.5); text-overflow: ellipsis; white-space: nowrap; }
.sc-sb .k-btn.sb-open { display: inline-flex; flex: none; align-items: center; justify-content: center; width: calc(var(--u) * 48); padding: 0; background-color: rgba(255, 255, 255, .07); color: var(--ui-text); font-size: calc(var(--u) * 12); }
.sc-sb .sb-b .k-btn.sb-open { background-color: var(--ui-brand); color: #FFFFFF; animation: sb-open 8s ease-out infinite both; }
.sc-sb .k-note.sb-note { right: calc(var(--u) * 28); top: calc(var(--u) * 123); opacity: 0; animation: sb-note 8s ease-out infinite both; }
.sc-sb .k-cursor.sb-cur { transform: translate(calc(var(--u) * 448), calc(var(--u) * 178)); animation: sb-cur 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sb .k-ring.sb-ring { left: calc(var(--u) * 196); top: calc(var(--u) * 103); animation: sb-ring 8s ease-out infinite both; }
@keyframes sb-hub {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 14)); }
  5%, 93% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes sb-b {
  0%, 15.625% { transform: translateY(calc(var(--u) * 86)) scale(1); background-color: rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(10, 14, 18, 0), inset 0 0 0 calc(var(--u) * 1) rgba(111, 211, 160, 0); }
  18.125% { transform: translateY(calc(var(--u) * 86)) scale(1.025); background-color: #2B323C; box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 28) rgba(10, 14, 18, .5), inset 0 0 0 calc(var(--u) * 1) rgba(111, 211, 160, 0); }
  27.5% { transform: translateY(0) scale(1.025); background-color: #2B323C; box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 28) rgba(10, 14, 18, .5), inset 0 0 0 calc(var(--u) * 1) rgba(111, 211, 160, 0); }
  30%, 50% { transform: translateY(0) scale(1); background-color: rgba(255, 255, 255, .05); box-shadow: 0 0 0 0 rgba(10, 14, 18, 0), inset 0 0 0 calc(var(--u) * 1) rgba(111, 211, 160, 0); }
  54%, 100% { transform: translateY(0) scale(1); background-color: rgba(111, 211, 160, .1); box-shadow: 0 0 0 0 rgba(10, 14, 18, 0), inset 0 0 0 calc(var(--u) * 1) rgba(111, 211, 160, .32); }
}
@keyframes sb-shift {
  0%, 18.125% { opacity: 1; transform: translateY(calc(var(--u) * -52)); }
  27.5%, 48% { opacity: 1; transform: translateY(0); }
  53%, 100% { opacity: .2; transform: translateY(0); }
}
@keyframes sb-dim {
  0%, 48% { opacity: 1; }
  53%, 100% { opacity: .2; }
}
@keyframes sb-old {
  0%, 23.75% { opacity: 1; transform: translateY(0); }
  26.25%, 100% { opacity: 0; transform: translateY(calc(var(--u) * -6)); }
}
@keyframes sb-new {
  0%, 23.75% { opacity: 0; transform: translateY(calc(var(--u) * 6)); }
  26.25%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes sb-so {
  0%, 12.5% { opacity: 1; }
  15%, 100% { opacity: 0; }
}
@keyframes sb-sn {
  0%, 12.5% { opacity: 0; }
  15%, 100% { opacity: 1; }
}
@keyframes sb-bdot {
  0%, 12.5% { background-color: #FF9F0A; }
  15%, 100% { background-color: #56D69A; }
}
@keyframes sb-bring {
  0% { opacity: .75; transform: scale(1); border-color: #FF9F0A; }
  5.5% { opacity: 0; transform: scale(2.6); border-color: #FF9F0A; }
  5.6% { opacity: 0; transform: scale(1); border-color: #FF9F0A; }
  6.25% { opacity: .75; transform: scale(1); border-color: #FF9F0A; }
  11.75% { opacity: 0; transform: scale(2.6); border-color: #FF9F0A; }
  11.85%, 12.5% { opacity: 0; transform: scale(1); border-color: #56D69A; }
  12.6% { opacity: .85; transform: scale(1); border-color: #56D69A; }
  21% { opacity: 0; transform: scale(3); border-color: #56D69A; }
  21.1%, 100% { opacity: 0; transform: scale(1); border-color: #56D69A; }
}
@keyframes sb-search {
  0%, 41% { border-color: rgba(255, 255, 255, .1); box-shadow: 0 0 0 0 rgba(142, 197, 255, 0); }
  42%, 100% { border-color: rgba(142, 197, 255, .75); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(142, 197, 255, .16); }
}
@keyframes sb-ph {
  0%, 42.5% { opacity: 1; }
  43%, 100% { opacity: 0; }
}
@keyframes sb-type {
  0%, 43% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(4, end); }
  46.75%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes sb-cw {
  0%, 46.75% { opacity: 0; }
  47%, 100% { opacity: 1; }
}
@keyframes sb-open {
  0%, 63% { background-color: rgba(255, 255, 255, .07); color: var(--ui-text); }
  64.5%, 100% { background-color: var(--ui-brand); color: #FFFFFF; }
}
@keyframes sb-note {
  0%, 27.5% { opacity: 0; transform: translateX(calc(var(--u) * 10)) scale(.94); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  30%, 41.25% { opacity: 1; transform: translateX(0) scale(1); }
  43.75%, 100% { opacity: 0; transform: translateX(0) scale(.98); }
}
@keyframes sb-cur {
  0%, 28.75% { opacity: 0; transform: translate(calc(var(--u) * 300), calc(var(--u) * 396)) scale(1); }
  31.5% { opacity: 1; transform: translate(calc(var(--u) * 288), calc(var(--u) * 372)) scale(1); }
  40%, 40.625% { transform: translate(calc(var(--u) * 194), calc(var(--u) * 101)) scale(1); }
  41.5% { transform: translate(calc(var(--u) * 194), calc(var(--u) * 101)) scale(.86); }
  42.5%, 54% { transform: translate(calc(var(--u) * 194), calc(var(--u) * 101)) scale(1); }
  64%, 93% { opacity: 1; transform: translate(calc(var(--u) * 448), calc(var(--u) * 178)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--u) * 448), calc(var(--u) * 178)) scale(1); }
}
@keyframes sb-ring {
  0%, 40.9% { opacity: 0; transform: scale(.4); }
  41% { opacity: .9; transform: scale(.45); }
  47%, 100% { opacity: 0; transform: scale(1.5); }
}

/* ── sc: 알림에서 바로 복귀 ──────────────────────────────────────
   0.0 뒤로 물러나 어두운 창 · 0.4–1.0 오른쪽 아래 알림 카드가 미끄러져 들어옴
   1.5–2.75 커서가 카드로 · 2.98 누름 · 3.06–3.4 카드가 물러남
   3.15–3.85 창이 밝아지며 앞으로 · 3.8 대기 중인 질문이 강조 · 3.95 「확인 필요」 · 4.3 노트 · 7.44–8.0 정리 */
.sc-sc .k-win.sc-win { left: calc(var(--u) * 40); top: calc(var(--u) * 28); z-index: 2; width: calc(var(--u) * 480); height: calc(var(--u) * 332); animation: sc-win 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sc .k-cap.sc-cap { align-items: center; gap: calc(var(--u) * 8); }
.sc-sc .k-tab.sc-tab { flex: none; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 5) 0 calc(var(--u) * 8); background: rgba(255, 255, 255, .09); color: var(--ui-text); }
.sc-sc .sc-tab b { font-weight: 600; white-space: nowrap; }
.sc-sc .sc-tx { display: grid; place-items: center; width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--ui-muted); }
.sc-sc .sc-tx svg { width: calc(var(--u) * 9); height: calc(var(--u) * 9); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.sc-sc .k-svg.sc-plus { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--ui-muted); }
.sc-sc .k-term.sc-term { display: flex; flex-direction: column; font-size: calc(var(--u) * 12); white-space: normal; }
.sc-sc .sc-term p { white-space: pre; }
.sc-sc .sc-head { display: flex; align-items: center; align-self: flex-start; gap: calc(var(--u) * 8); padding: calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 10); border: 1px solid rgba(217, 119, 87, .55); border-radius: calc(var(--u) * 6); white-space: nowrap; }
.sc-sc .sc-head b { color: var(--ui-text); font-weight: 600; }
.sc-sc .sc-q { margin-top: calc(var(--u) * 10); color: var(--ui-text); }
.sc-sc .sc-l { margin-top: calc(var(--u) * 6); color: #C9D1DA; }
.sc-sc .sc-l b { color: var(--ui-text); font-weight: 600; }
.sc-sc .sc-r { margin-top: 0; padding-left: calc(var(--u) * 16); }
.sc-sc .k-diff.sc-diff { margin: calc(var(--u) * 4) 0 0 calc(var(--u) * 16); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: calc(var(--u) * 6); }
.sc-sc .sc-ask { display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 40); margin-top: auto; padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 12); box-sizing: border-box; border: 1px solid rgba(86, 214, 154, .7); border-radius: calc(var(--u) * 8); background-color: rgba(86, 214, 154, .08); color: var(--ui-text); white-space: nowrap; box-shadow: 0 0 0 calc(var(--u) * 3) rgba(86, 214, 154, .14); animation: sc-ask 8s ease-out infinite both; }
.sc-sc .sc-qm { color: #56D69A; font-weight: 700; }
.sc-sc .sc-tag { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 22); margin-left: auto; padding: 0 calc(var(--u) * 9); border-radius: calc(var(--u) * 999); background: rgba(86, 214, 154, .16); color: #56D69A; font-family: var(--f-ui); font-size: calc(var(--u) * 11); font-weight: 600; animation: sc-tag 8s ease-out infinite both; }
.sc-sc .sc-veil { position: absolute; inset: 0; z-index: 5; background: rgba(13, 17, 22, .5); opacity: 0; animation: sc-veil 8s ease-out infinite both; }
.sc-sc .sc-ntf { position: absolute; right: calc(var(--u) * 28); bottom: calc(var(--u) * 28); z-index: 6; display: flex; flex-direction: column; width: calc(var(--u) * 272); padding: calc(var(--u) * 14) calc(var(--u) * 16); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, .12); border-radius: calc(var(--u) * 12); background-color: #1F242B; box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 44) rgba(24, 40, 52, .34), 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(24, 40, 52, .16); opacity: 0; animation: sc-ntf 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sc .sc-nh { display: flex; align-items: center; gap: calc(var(--u) * 7); color: var(--ui-muted); font-size: calc(var(--u) * 11.5); }
.sc-sc .sc-nh b { color: var(--ui-text); font-weight: 600; }
.sc-sc .sc-nh span { margin-left: auto; }
.sc-sc .k-mark.sc-nmark { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.sc-sc .sc-nt { margin-top: calc(var(--u) * 9); color: var(--ui-text); font-size: calc(var(--u) * 13.5); font-weight: 650; }
.sc-sc .sc-nb { margin-top: calc(var(--u) * 3); color: var(--ui-muted); font-size: calc(var(--u) * 12); }
.sc-sc .k-note.sc-note { left: 50%; top: calc(var(--u) * 393); transform: translate(-50%, -50%); animation: sc-note 8s ease-out infinite both; }
.sc-sc .k-cursor.sc-cur { transform: translate(calc(var(--u) * 480), calc(var(--u) * 398)); animation: sc-cur 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-sc .k-ring.sc-ring { left: calc(var(--u) * 330); top: calc(var(--u) * 387); animation: sc-ring 8s ease-out infinite both; }
@keyframes sc-win {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 18)) scale(.94); }
  5%, 39.375% { opacity: .82; transform: translateY(calc(var(--u) * 8)) scale(.94); }
  48.125%, 93% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(0) scale(1); }
}
@keyframes sc-veil {
  0%, 39.375% { opacity: 1; }
  47%, 100% { opacity: 0; }
}
@keyframes sc-ntf {
  0%, 5% { opacity: 0; transform: translateX(calc(var(--u) * 48)) scale(1); background-color: #1F242B; }
  12.5%, 33.125% { opacity: 1; transform: translateX(0) scale(1); background-color: #1F242B; }
  35%, 36.25% { opacity: 1; transform: translateX(0) scale(1); background-color: #2A3038; }
  37.25% { opacity: 1; transform: translateX(0) scale(.98); background-color: #2A3038; }
  38.25% { opacity: 1; transform: translateX(0) scale(1); background-color: #2A3038; }
  42.5%, 100% { opacity: 0; transform: translateX(calc(var(--u) * 40)) scale(1); background-color: #2A3038; }
}
@keyframes sc-ask {
  0%, 47.5% { border-color: rgba(255, 255, 255, .14); background-color: rgba(255, 255, 255, .03); box-shadow: 0 0 0 0 rgba(86, 214, 154, 0); }
  51.25%, 100% { border-color: rgba(86, 214, 154, .7); background-color: rgba(86, 214, 154, .08); box-shadow: 0 0 0 calc(var(--u) * 3) rgba(86, 214, 154, .14); }
}
@keyframes sc-tag {
  0%, 49.375% { opacity: 0; transform: scale(.8); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  53.125%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes sc-note {
  0%, 53.75% { opacity: 0; transform: translate(-50%, -50%) scale(.9); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  57.5%, 93% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  98%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sc-cur {
  0%, 18.75% { opacity: 0; transform: translate(calc(var(--u) * 168), calc(var(--u) * 262)) scale(1); }
  22.5% { opacity: 1; transform: translate(calc(var(--u) * 182), calc(var(--u) * 276)) scale(1); }
  34.375%, 36.25% { transform: translate(calc(var(--u) * 328), calc(var(--u) * 385)) scale(1); }
  37.25% { transform: translate(calc(var(--u) * 328), calc(var(--u) * 385)) scale(.86); }
  38.25%, 40% { transform: translate(calc(var(--u) * 328), calc(var(--u) * 385)) scale(1); }
  50%, 93% { opacity: 1; transform: translate(calc(var(--u) * 480), calc(var(--u) * 398)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--u) * 480), calc(var(--u) * 398)) scale(1); }
}
@keyframes sc-ring {
  0%, 36.9% { opacity: 0; transform: scale(.4); }
  37% { opacity: .9; transform: scale(.45); }
  43.5%, 100% { opacity: 0; transform: scale(1.5); }
}

/* ───────── scenes: mob ───────── */
/* mob group: shared entrance/exit and the touch indicator */
@keyframes mob-enter {
  0% { opacity: 0; transform: translateY(calc(var(--u) * 14)); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  5.5% { opacity: 1; transform: translateY(0); }
  94% { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes mob-enter2 {
  0%, 1.5% { opacity: 0; transform: translateY(calc(var(--u) * 18)); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  7% { opacity: 1; transform: translateY(0); }
  94% { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes mob-enter-x {
  0%, 2% { opacity: 0; transform: translateX(calc(var(--u) * -16)); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  7.5% { opacity: 1; transform: translateX(0); }
  94% { opacity: 1; transform: translateX(0); }
  99%, 100% { opacity: 0; transform: translateX(0); }
}
.sc-mb .mob-tap, .sc-mc .mob-tap { position: absolute; width: calc(var(--u) * 28); height: calc(var(--u) * 28); margin: calc(var(--u) * -14) 0 0 calc(var(--u) * -14); border-radius: 50%; background: rgba(255, 255, 255, .26); box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(255, 255, 255, .88), 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(0, 0, 0, .38); opacity: 0; z-index: 6; pointer-events: none; }

/* ma: settings strip lights up, the address goes to the phone, the phone connects */
.sc-ma .ma-win { left: calc(var(--u) * 28); top: calc(var(--u) * 34); width: calc(var(--u) * 492); height: calc(var(--u) * 254); animation: mob-enter 8s infinite both; }
.sc-ma .ma-captitle { display: flex; align-items: center; gap: calc(var(--u) * 7); }
.sc-ma .ma-capico { flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.sc-ma .ma-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 16) calc(var(--u) * 18); box-sizing: border-box; }
.sc-ma .ma-head { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 9); height: calc(var(--u) * 24); font-size: calc(var(--u) * 16.5); font-weight: 650; color: var(--ui-text); white-space: nowrap; }
.sc-ma .ma-headico { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--ui-muted); }
.sc-ma .ma-desc { flex: none; margin-top: calc(var(--u) * 4); height: calc(var(--u) * 18); line-height: calc(var(--u) * 18); font-size: calc(var(--u) * 11.5); color: var(--ui-muted); white-space: nowrap; }
.sc-ma .ma-steps { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: calc(var(--u) * 12); height: calc(var(--u) * 38); border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 8); overflow: hidden; box-sizing: border-box; background: var(--ui-terminal); }
.sc-ma .ma-step { display: flex; align-items: center; gap: calc(var(--u) * 7); padding-left: calc(var(--u) * 10); border-left: 1px solid var(--ui-border); background-color: rgba(28, 141, 94, .16); color: var(--ui-text); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-ma .ma-step:first-child { border-left: 0; }
.sc-ma .ma-ind { position: relative; flex: none; width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.sc-ma .ma-ind::before { content: ""; position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 4); width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #6B7480; }
.sc-ma .ma-tick { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ui-ok); color: #0D1116; font-size: calc(var(--u) * 10); font-weight: 800; line-height: 1; }
.sc-ma .ma-p1 { animation: ma-cell1 8s infinite both; }
.sc-ma .ma-p2 { animation: ma-cell2 8s infinite both; }
.sc-ma .ma-p3 { animation: ma-cell3 8s infinite both; }
.sc-ma .ma-p4 { animation: ma-cell4 8s infinite both; }
.sc-ma .ma-p1 .ma-tick { animation: ma-tick1 8s infinite both; }
.sc-ma .ma-p2 .ma-tick { animation: ma-tick2 8s infinite both; }
.sc-ma .ma-p3 .ma-tick { animation: ma-tick3 8s infinite both; }
.sc-ma .ma-p4 .ma-tick { animation: ma-tick4 8s infinite both; }
.sc-ma .ma-card { flex: none; margin-top: calc(var(--u) * 12); width: calc(var(--u) * 340); padding: calc(var(--u) * 12) calc(var(--u) * 14); box-sizing: border-box; border-radius: calc(var(--u) * 8); background: var(--ui-terminal); box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(111, 211, 160, .45); animation: ma-card 8s infinite both; }
.sc-ma .ma-status { position: relative; height: calc(var(--u) * 18); font-size: calc(var(--u) * 12); font-weight: 600; }
.sc-ma .ma-st { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: calc(var(--u) * 7); white-space: nowrap; }
.sc-ma .ma-st i { flex: none; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; }
.sc-ma .ma-wait { color: var(--ui-muted); opacity: 0; animation: ma-wait 8s infinite both; }
.sc-ma .ma-wait i { background: var(--ui-warn); }
.sc-ma .ma-live { color: var(--ui-text); animation: ma-live 8s infinite both; }
.sc-ma .ma-live i { background: var(--ui-ok); }
.sc-ma .ma-addr { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 8); height: calc(var(--u) * 28); }
.sc-ma .ma-url { font-family: var(--f-mono); font-size: calc(var(--u) * 12); color: var(--ui-text); white-space: nowrap; animation: ma-url 8s infinite both; }
.sc-ma .ma-copy { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 74); height: calc(var(--u) * 26); padding: 0; font-size: calc(var(--u) * 12); white-space: nowrap; animation: ma-press 8s infinite both; }
.sc-ma .ma-ring { left: 50%; top: 50%; animation: ma-ring 8s infinite both; }
.sc-ma .ma-phone { left: calc(var(--u) * 404); top: calc(var(--u) * 194); width: calc(var(--u) * 124); height: calc(var(--u) * 238); padding: calc(var(--u) * 7); border-radius: calc(var(--u) * 26); box-sizing: border-box; animation: mob-enter2 8s infinite both; }
.sc-ma .ma-screen { position: relative; border-radius: calc(var(--u) * 19); color: var(--ui-text); }
.sc-ma .ma-app { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--u) * 14) calc(var(--u) * 10); box-sizing: border-box; }
.sc-ma .ma-brand { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 16); font-size: calc(var(--u) * 11.5); font-weight: 650; }
.sc-ma .ma-bmark { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.sc-ma .ma-ptitle { flex: none; margin-top: calc(var(--u) * 16); height: calc(var(--u) * 20); line-height: calc(var(--u) * 20); font-size: calc(var(--u) * 14.5); font-weight: 700; white-space: nowrap; }
.sc-ma .ma-plabel { flex: none; margin-top: calc(var(--u) * 12); height: calc(var(--u) * 14); line-height: calc(var(--u) * 14); font-size: calc(var(--u) * 10); color: var(--ui-muted); }
.sc-ma .ma-field { position: relative; flex: none; margin-top: calc(var(--u) * 5); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 7); background: var(--ui-panel); box-shadow: inset 0 0 0 calc(var(--u) * 1) var(--ui-border); }
.sc-ma .ma-ph, .sc-ma .ma-val { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); top: 0; line-height: calc(var(--u) * 26); font-family: var(--f-mono), var(--f-ui); font-size: calc(var(--u) * 10); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ma .ma-ph { color: #6F7884; opacity: 0; animation: ma-ph 8s infinite both; }
.sc-ma .ma-val { color: var(--ui-text); animation: ma-val 8s infinite both; }
.sc-ma .ma-connect { position: relative; flex: none; margin-top: auto; height: calc(var(--u) * 28); border-radius: calc(var(--u) * 7); background: var(--ui-brand); color: #FFFFFF; font-size: calc(var(--u) * 11.5); font-weight: 700; }
.sc-ma .ma-c { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); white-space: nowrap; }
.sc-ma .ma-c1 { opacity: 0; animation: ma-btn1 8s infinite both; }
.sc-ma .ma-c2 { animation: ma-btn2 8s infinite both; }
.sc-ma .ma-spin { flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; border: calc(var(--u) * 1.5) solid rgba(255, 255, 255, .35); border-top-color: #FFFFFF; box-sizing: border-box; animation: ma-spin 8s linear infinite both; }
.sc-ma .ma-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--u) * 30); box-sizing: border-box; background: var(--ui-ground); animation: ma-done 8s infinite both; }
.sc-ma .ma-big { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.sc-ma .ma-oktitle { margin-top: calc(var(--u) * 11); font-size: calc(var(--u) * 12.5); font-weight: 700; white-space: nowrap; }
.sc-ma .ma-list { margin-top: calc(var(--u) * 14); width: calc(var(--u) * 96); padding: calc(var(--u) * 3) 0; box-sizing: border-box; border-radius: calc(var(--u) * 8); background: var(--ui-panel); box-shadow: inset 0 0 0 calc(var(--u) * 1) var(--ui-border); }
.sc-ma .ma-row { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); color: #DCE3EB; white-space: nowrap; }
.sc-ma .ma-row i { flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #7E8997; }
.sc-ma .ma-row .ma-livedot { background: var(--ui-ok); }
.sc-ma .ma-glow { position: absolute; left: calc(var(--u) * 400); top: calc(var(--u) * 190); width: calc(var(--u) * 132); height: calc(var(--u) * 246); border-radius: calc(var(--u) * 30); box-shadow: 0 0 0 calc(var(--u) * 2) rgba(111, 211, 160, .6); opacity: 0; pointer-events: none; animation: ma-glow 8s infinite both; }
.sc-ma .ma-chip { position: absolute; left: calc(var(--u) * 246); top: calc(var(--u) * 233); width: calc(var(--u) * 180); height: calc(var(--u) * 24); display: flex; align-items: center; gap: calc(var(--u) * 5); padding: 0 calc(var(--u) * 10); box-sizing: border-box; border-radius: calc(var(--u) * 12); background: #FFFFFF; color: #14211B; font-family: var(--f-mono); font-size: calc(var(--u) * 10.5); white-space: nowrap; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(16, 32, 48, .25); z-index: 30; opacity: 0; transform: translate(calc(var(--u) * 130), calc(var(--u) * 66)) scale(.5); animation: ma-chip 8s infinite both; }
.sc-ma .ma-chip svg { flex: none; width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--ui-brand); }
.sc-ma .ma-cursor { transform: translate(calc(var(--u) * 332), calc(var(--u) * 243)); animation: ma-cursor 8s infinite both; }
.sc-ma .ma-note { position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 344); right: auto; bottom: auto; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 13); box-sizing: border-box; white-space: nowrap; animation: ma-note 8s infinite both; }
.sc-ma .ma-note svg { flex: none; width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--ui-brand); }
@keyframes ma-cell1 {
  0%, 6.5% { background-color: rgba(28, 141, 94, 0); color: var(--ui-muted); }
  9%, 100% { background-color: rgba(28, 141, 94, .16); color: var(--ui-text); }
}
@keyframes ma-cell2 {
  0%, 14.5% { background-color: rgba(28, 141, 94, 0); color: var(--ui-muted); }
  17%, 100% { background-color: rgba(28, 141, 94, .16); color: var(--ui-text); }
}
@keyframes ma-cell3 {
  0%, 53.5% { background-color: rgba(28, 141, 94, 0); color: var(--ui-muted); }
  56%, 100% { background-color: rgba(28, 141, 94, .16); color: var(--ui-text); }
}
@keyframes ma-cell4 {
  0%, 59.5% { background-color: rgba(28, 141, 94, 0); color: var(--ui-muted); }
  62%, 100% { background-color: rgba(28, 141, 94, .16); color: var(--ui-text); }
}
@keyframes ma-tick1 {
  0%, 6.5% { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  9.5%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ma-tick2 {
  0%, 14.5% { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  17.5%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ma-tick3 {
  0%, 53.5% { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  56.5%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ma-tick4 {
  0%, 59.5% { opacity: 0; transform: scale(.4); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  62.5%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ma-card {
  0%, 14.5% { box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, .10); }
  17%, 100% { box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(111, 211, 160, .45); }
}
@keyframes ma-wait {
  0%, 14.5% { opacity: 1; }
  16%, 100% { opacity: 0; }
}
@keyframes ma-live {
  0%, 14.5% { opacity: 0; }
  16%, 100% { opacity: 1; }
}
@keyframes ma-url {
  0%, 14.5% { color: var(--ui-muted); }
  16.5%, 100% { color: var(--ui-text); }
}
@keyframes ma-cursor {
  0%, 19% { opacity: 0; transform: translate(calc(var(--u) * 262), calc(var(--u) * 402)); }
  21.5% { opacity: 1; transform: translate(calc(var(--u) * 266), calc(var(--u) * 390)); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  31% { opacity: 1; transform: translate(calc(var(--u) * 332), calc(var(--u) * 243)); }
  33.9% { opacity: 1; transform: translate(calc(var(--u) * 332), calc(var(--u) * 243)); }
  34.6% { opacity: 1; transform: translate(calc(var(--u) * 333), calc(var(--u) * 244.5)); }
  36.2% { opacity: 1; transform: translate(calc(var(--u) * 332), calc(var(--u) * 243)); }
  37.5% { opacity: 1; transform: translate(calc(var(--u) * 332), calc(var(--u) * 243)); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  41.5%, 100% { opacity: 0; transform: translate(calc(var(--u) * 316), calc(var(--u) * 278)); }
}
@keyframes ma-press {
  0%, 33.8% { transform: scale(1); }
  34.6% { transform: scale(.94); }
  36.6%, 100% { transform: scale(1); }
}
@keyframes ma-ring {
  0%, 34.2% { opacity: 0; transform: scale(.35); }
  34.6% { opacity: .9; transform: scale(.45); }
  39.5%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes ma-chip {
  0%, 34.6% { opacity: 0; transform: translate(0, 0) scale(.7); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  36.6% { opacity: 1; transform: translate(0, calc(var(--u) * -8)) scale(1); }
  37.6% { opacity: 1; transform: translate(0, calc(var(--u) * -8)) scale(1); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  42.6% { opacity: 1; transform: translate(calc(var(--u) * 130), calc(var(--u) * 66)) scale(.5); }
  44.6%, 100% { opacity: 0; transform: translate(calc(var(--u) * 130), calc(var(--u) * 66)) scale(.5); }
}
@keyframes ma-ph {
  0%, 43% { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes ma-val {
  0%, 43.4% { opacity: 0; }
  45%, 100% { opacity: 1; }
}
@keyframes ma-btn1 {
  0%, 46.5% { opacity: 1; }
  47.5%, 100% { opacity: 0; }
}
@keyframes ma-btn2 {
  0%, 46.5% { opacity: 0; }
  47.5%, 100% { opacity: 1; }
}
@keyframes ma-spin {
  0%, 47% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(900deg); }
}
@keyframes ma-done {
  0%, 59% { opacity: 0; transform: scale(.97); }
  62%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes ma-glow {
  0%, 59.5% { opacity: 0; transform: scale(.98); }
  61.5% { opacity: 1; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.05); }
}
@keyframes ma-note {
  0%, 64.5% { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.96); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  67.5% { opacity: 1; transform: translateY(0) scale(1); }
  94% { opacity: 1; transform: translateY(0) scale(1); }
  99%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* mb: tap the prompt, type, send with the enter key; the session runs on the PC */
.sc-mb .mb-pc { position: absolute; left: calc(var(--u) * 28); top: calc(var(--u) * 160); width: calc(var(--u) * 210); height: calc(var(--u) * 84); padding: calc(var(--u) * 12) calc(var(--u) * 14); box-sizing: border-box; border-radius: calc(var(--u) * 12); background: var(--ui-ground); color: var(--ui-text); box-shadow: inset 0 0 0 calc(var(--u) * 1) var(--ui-border), 0 calc(var(--u) * 18) calc(var(--u) * 40) rgba(24, 34, 64, .22); animation: mob-enter-x 8s infinite both; }
.sc-mb .mb-pchead { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 16); font-size: calc(var(--u) * 11); font-weight: 600; color: var(--ui-muted); }
.sc-mb .mb-pchead svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.sc-mb .mb-pcrow { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 36); margin-top: calc(var(--u) * 8); }
.sc-mb .mb-pcico { flex: none; width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.sc-mb .mb-pctext { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.sc-mb .mb-pcname { font-size: calc(var(--u) * 13); font-weight: 650; line-height: calc(var(--u) * 18); white-space: nowrap; }
.sc-mb .mb-st { position: relative; display: block; height: calc(var(--u) * 16); font-size: calc(var(--u) * 11.5); font-weight: 400; color: var(--ui-muted); }
.sc-mb .mb-st > span { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: calc(var(--u) * 6); white-space: nowrap; }
.sc-mb .mb-idle { animation: mb-idle 8s infinite both; }
.sc-mb .mb-busy { opacity: 0; animation: mb-busy 8s infinite both; }
.sc-mb .mb-wire { position: absolute; left: calc(var(--u) * 244); top: calc(var(--u) * 201); width: calc(var(--u) * 50); height: calc(var(--u) * 2); background: repeating-linear-gradient(90deg, rgba(44, 58, 92, .4) 0 calc(var(--u) * 4), rgba(44, 58, 92, 0) calc(var(--u) * 4) calc(var(--u) * 8)); animation: mob-enter-x 8s infinite both; }
.sc-mb .mb-pkt { position: absolute; left: 0; top: 50%; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin: calc(var(--u) * -4) 0 0 calc(var(--u) * -4); border-radius: 50%; background: var(--ui-brand); box-shadow: 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .9); opacity: 0; }
.sc-mb .mb-pa { animation: mb-pa 8s infinite both; }
.sc-mb .mb-pb { animation: mb-pb 8s infinite both; }
.sc-mb .mb-pz { animation: mb-pz 8s infinite both; }
.sc-mb .mb-phone { left: calc(var(--u) * 300); top: calc(var(--u) * 28); width: calc(var(--u) * 216); height: calc(var(--u) * 404); box-sizing: border-box; animation: mob-enter 8s infinite both; }
.sc-mb .mb-screen { display: flex; flex-direction: column; color: var(--ui-text); }
.sc-mb .mb-bar { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 46); padding: calc(var(--u) * 8) calc(var(--u) * 15) 0; box-sizing: border-box; background: var(--ui-chrome); box-shadow: inset 0 calc(var(--u) * -1) 0 var(--ui-border); font-size: calc(var(--u) * 13.5); white-space: nowrap; }
.sc-mb .mb-bar b { font-weight: 700; }
.sc-mb .mb-burger { width: calc(var(--u) * 17); height: calc(var(--u) * 17); color: #B4BEC9; }
.sc-mb .mb-new { margin-left: auto; font-size: calc(var(--u) * 11.5); color: #B7C5D4; }
.sc-mb .mb-set { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.sc-mb .mb-head { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 13); box-sizing: border-box; background: var(--ui-chrome); box-shadow: inset 0 calc(var(--u) * -1) 0 var(--ui-border); font-size: calc(var(--u) * 12.5); font-weight: 600; white-space: nowrap; }
.sc-mb .mb-hico { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.sc-mb .mb-hst { margin-left: auto; width: calc(var(--u) * 60); font-size: calc(var(--u) * 11); }
.sc-mb .mb-hst > span { left: auto; right: 0; }
.sc-mb .mb-term { min-height: 0; padding: calc(var(--u) * 12) calc(var(--u) * 13); overflow: hidden; font-family: var(--f-mono), var(--f-ui); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 20); }
.sc-mb .mb-lines { white-space: normal; }
.sc-mb .mb-l { position: relative; height: calc(var(--u) * 20); white-space: pre; color: #B4BFCA; }
.sc-mb .mb-gap { margin-top: calc(var(--u) * 8); }
.sc-mb .mb-hdr, .sc-mb .mb-you { color: var(--ui-text); }
.sc-mb .mb-good { color: #A9D0B6; }
.sc-mb .mb-tw { position: relative; display: inline-block; vertical-align: top; }
.sc-mb .mb-typed { display: inline-block; white-space: nowrap; animation: mb-type 8s infinite both; }
.sc-mb .mb-track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: mb-track 8s infinite both; }
.sc-mb .mb-cw { position: absolute; left: calc(100% + var(--u) * 1); top: 0; height: 100%; display: flex; align-items: center; opacity: 0; animation: mb-cw 8s infinite both; }
.sc-mb .mb-cw2 { display: inline-flex; align-items: center; height: 100%; vertical-align: top; }
.sc-mb .mb-out { animation: mb-out 8s infinite both; }
.sc-mb .mb-wk { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: calc(var(--u) * 7); color: #A8B4C1; opacity: 0; animation: mb-wk 8s infinite both; }
.sc-mb .mb-spin { flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; border: calc(var(--u) * 1.5) solid #5D6877; border-top-color: #C7D3DE; box-sizing: border-box; animation: mb-spin 8s linear infinite both; }
.sc-mb .mb-res, .sc-mb .mb-res2 { color: var(--ui-ok); animation: mb-res 8s infinite both; }
.sc-mb .mb-res { display: inline-block; }
.sc-mb .mb-next { animation: mb-next 8s infinite both; }
.sc-mb .mb-keys { flex: none; display: flex; align-items: center; height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 3); box-sizing: border-box; background: var(--ui-ground); box-shadow: inset 0 calc(var(--u) * 1) 0 var(--ui-border); color: #B3BDC9; font-size: calc(var(--u) * 11.5); }
.sc-mb .mb-keys > span { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: calc(var(--u) * 32); border-radius: calc(var(--u) * 7); white-space: nowrap; }
.sc-mb .mb-kw { width: calc(var(--u) * 28); }
.sc-mb .mb-kx { width: calc(var(--u) * 34); }
.sc-mb .mb-ka { width: calc(var(--u) * 24); }
.sc-mb .mb-kent { width: calc(var(--u) * 26); font-size: calc(var(--u) * 13); animation: mb-key 8s infinite both; }
.sc-mb .mb-tap1, .sc-mb .mb-ring1 { left: calc(var(--u) * 92); top: 50%; }
.sc-mb .mb-tap2, .sc-mb .mb-ring2 { left: 50%; top: 50%; }
.sc-mb .mb-tap1 { animation: mb-tap1 8s infinite both; }
.sc-mb .mb-ring1 { animation: mb-ring1 8s infinite both; }
.sc-mb .mb-tap2 { animation: mb-tap2 8s infinite both; }
.sc-mb .mb-ring2 { animation: mb-ring2 8s infinite both; }
.sc-mb .mb-note { position: absolute; left: calc(var(--u) * 28); top: calc(var(--u) * 262); right: auto; bottom: auto; display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 12); box-sizing: border-box; white-space: nowrap; animation: mb-note 8s infinite both; }
.sc-mb .mb-noteico { flex: none; width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
@keyframes mb-idle {
  0%, 35.5% { opacity: 1; }
  37%, 66% { opacity: 0; }
  67.5%, 100% { opacity: 1; }
}
@keyframes mb-busy {
  0%, 35.5% { opacity: 0; }
  37%, 66% { opacity: 1; }
  67.5%, 100% { opacity: 0; }
}
@keyframes mb-pa {
  0%, 30.5% { opacity: 0; transform: translateX(calc(var(--u) * 50)); }
  31.5% { opacity: 1; transform: translateX(calc(var(--u) * 47)); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  35.5% { opacity: 1; transform: translateX(calc(var(--u) * 3)); }
  36.5%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes mb-pb {
  0%, 40% { opacity: 0; transform: translateX(0); }
  41% { opacity: 1; transform: translateX(calc(var(--u) * 3)); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  45% { opacity: 1; transform: translateX(calc(var(--u) * 47)); }
  46%, 100% { opacity: 0; transform: translateX(calc(var(--u) * 50)); }
}
@keyframes mb-pz {
  0%, 59.5% { opacity: 0; transform: translateX(0); }
  60.5% { opacity: 1; transform: translateX(calc(var(--u) * 3)); animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  64.5% { opacity: 1; transform: translateX(calc(var(--u) * 47)); }
  65.5%, 100% { opacity: 0; transform: translateX(calc(var(--u) * 50)); }
}
@keyframes mb-type {
  0%, 12.5% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(12, end); }
  24%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes mb-track {
  0%, 12.5% { transform: translateX(-100%); animation-timing-function: steps(12, end); }
  24%, 100% { transform: translateX(0); }
}
@keyframes mb-cw {
  0%, 30% { opacity: 1; }
  30.5%, 100% { opacity: 0; }
}
@keyframes mb-out {
  0%, 45% { opacity: 0; transform: translateY(calc(var(--u) * 4)); }
  47%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes mb-wk {
  0%, 47% { opacity: 0; }
  48.5%, 64.5% { opacity: 1; }
  65.5%, 100% { opacity: 0; }
}
@keyframes mb-spin {
  0%, 47% { transform: rotate(0deg); }
  66%, 100% { transform: rotate(1080deg); }
}
@keyframes mb-res {
  0%, 65% { opacity: 0; transform: translateY(calc(var(--u) * 4)); }
  67%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes mb-next {
  0%, 67.5% { opacity: 0; }
  69%, 100% { opacity: 1; }
}
@keyframes mb-key {
  0%, 29.6% { background-color: rgba(39, 118, 79, 0); color: #B3BDC9; }
  30.2%, 33% { background-color: #27764F; color: #EAFFF2; }
  35%, 100% { background-color: rgba(39, 118, 79, 0); color: #B3BDC9; }
}
@keyframes mb-tap1 {
  0%, 6% { opacity: 0; transform: scale(1.35); }
  7.5% { opacity: 1; transform: scale(1.1); }
  9% { opacity: 1; transform: scale(.82); }
  10.5% { opacity: 1; transform: scale(.95); }
  12.5%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes mb-ring1 {
  0%, 8.9% { opacity: 0; transform: scale(.4); }
  9.2% { opacity: .9; transform: scale(.5); }
  14%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes mb-tap2 {
  0%, 27.5% { opacity: 0; transform: scale(1.35); }
  29% { opacity: 1; transform: scale(1.1); }
  30% { opacity: 1; transform: scale(.82); }
  31.5% { opacity: 1; transform: scale(.95); }
  33.5%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes mb-ring2 {
  0%, 29.9% { opacity: 0; transform: scale(.4); }
  30.2% { opacity: .9; transform: scale(.5); }
  35%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes mb-note {
  0%, 37.5% { opacity: 0; transform: translateY(calc(var(--u) * 8)) scale(.96); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  40.5% { opacity: 1; transform: translateY(0) scale(1); }
  94% { opacity: 1; transform: translateY(0) scale(1); }
  99%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* mc: tablet split; commit on the right while the terminal on the left keeps printing */
.sc-mc .mc-tab { left: calc(var(--u) * 28); top: calc(var(--u) * 46); width: calc(var(--u) * 504); height: calc(var(--u) * 340); border-radius: calc(var(--u) * 30); box-sizing: border-box; animation: mob-enter 8s infinite both; }
.sc-mc .mc-screen { display: flex; flex-direction: column; border-radius: calc(var(--u) * 21); color: var(--ui-text); }
.sc-mc .mc-bar { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 12); height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 16); box-sizing: border-box; background: var(--ui-chrome); box-shadow: inset 0 calc(var(--u) * -1) 0 var(--ui-border); font-size: calc(var(--u) * 13); white-space: nowrap; }
.sc-mc .mc-bar b { font-weight: 700; }
.sc-mc .mc-burger { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: #B4BEC9; }
.sc-mc .mc-act { font-size: calc(var(--u) * 11.5); color: #B7C5D4; }
.sc-mc .mc-act1 { margin-left: auto; }
.sc-mc .mc-set { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.sc-mc .mc-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 240) minmax(0, 1fr); column-gap: calc(var(--u) * 5); background: var(--ui-terminal); }
.sc-mc .mc-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ui-ground); }
.sc-mc .mc-ph { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 12); box-sizing: border-box; background: var(--ui-chrome); box-shadow: inset 0 calc(var(--u) * -1) 0 var(--ui-border); font-size: calc(var(--u) * 12); font-weight: 600; white-space: nowrap; }
.sc-mc .mc-pico { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.sc-mc .mc-badge { font-size: calc(var(--u) * 10.5); font-weight: 400; color: #A8B3C0; }
.sc-mc .mc-pst, .sc-mc .mc-branch { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 11); font-weight: 400; color: var(--ui-muted); }
.sc-mc .mc-branch svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.sc-mc .mc-term { position: relative; min-height: 0; padding: 0; overflow: hidden; font-family: var(--f-mono), var(--f-ui); font-size: calc(var(--u) * 11); line-height: calc(var(--u) * 18); }
.sc-mc .mc-view { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 10); height: calc(var(--u) * 180); overflow: hidden; white-space: normal; }
.sc-mc .mc-lines { white-space: normal; transform: translateY(calc(var(--u) * -18)); animation: mc-scroll 8s infinite both; }
.sc-mc .mc-l { height: calc(var(--u) * 18); white-space: pre; color: #B4BFCA; }
.sc-mc .mc-hdr, .sc-mc .mc-you { color: var(--ui-text); }
.sc-mc .mc-n7 { animation: mc-n7 8s infinite both; }
.sc-mc .mc-n8 { animation: mc-n8 8s infinite both; }
.sc-mc .mc-n9 { animation: mc-n9 8s infinite both; }
.sc-mc .mc-n10 { animation: mc-n10 8s infinite both; }
.sc-mc .mc-n11 { animation: mc-n11 8s infinite both; }
.sc-mc .mc-work { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); top: calc(var(--u) * 190); height: calc(var(--u) * 18); display: flex; align-items: center; gap: calc(var(--u) * 7); white-space: nowrap; color: #A8B4C1; animation: mc-work 8s infinite both; }
.sc-mc .mc-work span { margin-left: auto; font-size: calc(var(--u) * 10.5); color: #768597; }
.sc-mc .mc-spin { flex: none; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; border: calc(var(--u) * 1.4) solid #5D6877; border-top-color: #C7D3DE; box-sizing: border-box; animation: mc-spin 8s linear infinite both; }
.sc-mc .mc-keys { flex: none; display: flex; align-items: center; justify-content: space-around; height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 6); box-sizing: border-box; background: var(--ui-ground); box-shadow: inset 0 calc(var(--u) * 1) 0 var(--ui-border); color: #B3BDC9; font-size: calc(var(--u) * 11); white-space: nowrap; }
.sc-mc .mc-git { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sc-mc .mc-sec { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 12); box-sizing: border-box; font-size: calc(var(--u) * 11.5); color: var(--ui-muted); white-space: nowrap; }
.sc-mc .mc-sec2 { margin-top: calc(var(--u) * 4); box-shadow: inset 0 calc(var(--u) * 1) 0 var(--ui-border); }
.sc-mc .mc-cnt { position: relative; flex: none; width: calc(var(--u) * 17); height: calc(var(--u) * 16); border-radius: calc(var(--u) * 8); background: rgba(255, 255, 255, .08); color: #B8C0CA; font-size: calc(var(--u) * 10); }
.sc-mc .mc-cnt b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 500; }
.sc-mc .mc-tool { margin-left: auto; display: flex; align-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 6); box-shadow: inset 0 0 0 calc(var(--u) * 1) var(--ui-border); color: #C9D1DA; font-size: calc(var(--u) * 10.5); }
.sc-mc .mc-slot { position: relative; flex: none; height: calc(var(--u) * 26); }
.sc-mc .mc-slot2 { height: calc(var(--u) * 52); }
.sc-mc .mc-empty { position: absolute; left: calc(var(--u) * 12); top: 0; line-height: calc(var(--u) * 26); font-size: calc(var(--u) * 11); color: #6F7884; }
.sc-mc .mc-file { position: absolute; left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: 0; height: calc(var(--u) * 26); display: flex; align-items: center; gap: calc(var(--u) * 7); padding: 0 calc(var(--u) * 6); box-sizing: border-box; border-radius: calc(var(--u) * 5); color: #DCE3EB; font-size: calc(var(--u) * 12); white-space: nowrap; }
.sc-mc .mc-f2 { top: calc(var(--u) * 26); }
.sc-mc .mc-fd { color: #7E8997; font-size: calc(var(--u) * 10.5); }
.sc-mc .mc-commit { flex: none; margin-top: auto; display: flex; flex-direction: column; gap: calc(var(--u) * 7); padding: calc(var(--u) * 8) calc(var(--u) * 10) calc(var(--u) * 9); box-sizing: border-box; background: var(--ui-chrome); box-shadow: inset 0 calc(var(--u) * 1) 0 var(--ui-border); }
.sc-mc .mc-msg { position: relative; display: flex; align-items: center; height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 9); box-sizing: border-box; border-radius: calc(var(--u) * 6); background: var(--ui-terminal); box-shadow: inset 0 0 0 calc(var(--u) * 1) var(--ui-border); font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-mc .mc-place { position: absolute; left: calc(var(--u) * 9); top: 0; line-height: calc(var(--u) * 34); font-family: var(--f-ui); color: #6F7884; animation: mc-place 8s infinite both; }
.sc-mc .mc-tw { position: relative; display: inline-block; line-height: calc(var(--u) * 34); }
.sc-mc .mc-typed { display: inline-block; opacity: 0; animation: mc-type 8s infinite both; }
.sc-mc .mc-track { position: absolute; left: 0; top: 0; width: 100%; height: 100%; animation: mc-track 8s infinite both; }
.sc-mc .mc-cw { position: absolute; left: calc(100% + var(--u) * 1); top: 0; height: 100%; display: flex; align-items: center; opacity: 0; animation: mc-cw 8s infinite both; }
.sc-mc .mc-foot { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 26); color: #7E8997; font-size: calc(var(--u) * 11); white-space: nowrap; }
.sc-mc .mc-fc { position: relative; flex: none; width: calc(var(--u) * 72); height: calc(var(--u) * 16); }
.sc-mc .mc-fc span { position: absolute; left: 0; top: 0; line-height: calc(var(--u) * 16); }
.sc-mc .mc-kbd { font-family: var(--f-mono); font-size: calc(var(--u) * 10.5); }
.sc-mc .mc-btn { position: relative; flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 54); height: calc(var(--u) * 26); padding: 0; font-size: calc(var(--u) * 12); opacity: .45; animation: mc-btn 8s infinite both; }
.sc-mc .mc-ca { opacity: 0; animation: mc-ca 8s infinite both; }
.sc-mc .mc-cb { animation: mc-cb 8s infinite both; }
.sc-mc .mc-ua { opacity: 0; animation: mc-ua 8s infinite both; }
.sc-mc .mc-ub { animation: mc-ub 8s infinite both; }
.sc-mc .mc-uf { animation: mc-uf 8s infinite both; }
.sc-mc .mc-sf { opacity: 0; animation: mc-sf 8s infinite both; }
.sc-mc .mc-se { animation: mc-se 8s infinite both; }
.sc-mc .mc-tap1, .sc-mc .mc-ring1 { left: calc(var(--u) * 70); top: 50%; }
.sc-mc .mc-tap2, .sc-mc .mc-ring2 { left: 50%; top: 50%; }
.sc-mc .mc-tap1 { animation: mc-tap1 8s infinite both; }
.sc-mc .mc-ring1 { animation: mc-ring1 8s infinite both; }
.sc-mc .mc-tap2 { animation: mc-tap2 8s infinite both; }
.sc-mc .mc-ring2 { animation: mc-ring2 8s infinite both; }
.sc-mc .mc-toast { position: absolute; left: calc(var(--u) * 318); top: calc(var(--u) * 382); right: auto; bottom: auto; display: flex; align-items: center; gap: calc(var(--u) * 10); white-space: nowrap; animation: mc-toast 8s infinite both; }
.sc-mc .mc-tt { font-size: calc(var(--u) * 12.5); font-weight: 650; color: var(--ui-text); }
.sc-mc .mc-sha { font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); color: var(--ui-muted); }
@keyframes mc-scroll {
  0%, 85% { transform: translateY(0); }
  87%, 100% { transform: translateY(calc(var(--u) * -18)); }
}
@keyframes mc-work {
  0%, 16% { transform: translateY(calc(var(--u) * -72)); }
  17.5%, 30% { transform: translateY(calc(var(--u) * -54)); }
  31.5%, 54% { transform: translateY(calc(var(--u) * -36)); }
  55.5%, 70% { transform: translateY(calc(var(--u) * -18)); }
  71.5%, 100% { transform: translateY(0); }
}
@keyframes mc-n7 {
  0%, 16.5% { opacity: 0; }
  18.5%, 100% { opacity: 1; }
}
@keyframes mc-n8 {
  0%, 30.5% { opacity: 0; }
  32.5%, 100% { opacity: 1; }
}
@keyframes mc-n9 {
  0%, 54.5% { opacity: 0; }
  56.5%, 100% { opacity: 1; }
}
@keyframes mc-n10 {
  0%, 70.5% { opacity: 0; }
  72.5%, 100% { opacity: 1; }
}
@keyframes mc-n11 {
  0%, 85% { opacity: 0; }
  87%, 100% { opacity: 1; }
}
@keyframes mc-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(2880deg); }
}
@keyframes mc-tap1 {
  0%, 6% { opacity: 0; transform: scale(1.35); }
  7.5% { opacity: 1; transform: scale(1.1); }
  9% { opacity: 1; transform: scale(.82); }
  10.5% { opacity: 1; transform: scale(.95); }
  12.5%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes mc-ring1 {
  0%, 8.9% { opacity: 0; transform: scale(.4); }
  9.2% { opacity: .9; transform: scale(.5); }
  14%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes mc-cw {
  0%, 8.8% { opacity: 0; }
  9.2%, 43.5% { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes mc-place {
  0%, 11.2% { opacity: 1; }
  11.7%, 45% { opacity: 0; }
  46.5%, 100% { opacity: 1; }
}
@keyframes mc-type {
  0%, 11.25% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: steps(27, end); }
  31.25%, 43.5% { opacity: 1; clip-path: inset(0 0 0 0); }
  45%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes mc-track {
  0%, 11.25% { transform: translateX(-100%); animation-timing-function: steps(27, end); }
  31.25%, 100% { transform: translateX(0); }
}
@keyframes mc-tap2 {
  0%, 39% { opacity: 0; transform: scale(1.35); }
  40.5% { opacity: 1; transform: scale(1.1); }
  42% { opacity: 1; transform: scale(.82); }
  43.5% { opacity: 1; transform: scale(.95); }
  45.5%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes mc-ring2 {
  0%, 41.9% { opacity: 0; transform: scale(.4); }
  42.2% { opacity: .9; transform: scale(.5); }
  47%, 100% { opacity: 0; transform: scale(1.9); }
}
@keyframes mc-btn {
  0%, 41.8% { opacity: 1; transform: scale(1); }
  42.5% { opacity: 1; transform: scale(.94); }
  44%, 45% { opacity: 1; transform: scale(1); }
  47%, 100% { opacity: .45; transform: scale(1); }
}
@keyframes mc-sf {
  0%, 43.5% { opacity: 1; transform: translateX(0); }
  45.5%, 100% { opacity: 0; transform: translateX(calc(var(--u) * 12)); }
}
@keyframes mc-se {
  0%, 45.5% { opacity: 0; }
  47%, 100% { opacity: 1; }
}
@keyframes mc-ca {
  0%, 44% { opacity: 1; }
  45%, 100% { opacity: 0; }
}
@keyframes mc-cb {
  0%, 44% { opacity: 0; }
  45%, 100% { opacity: 1; }
}
@keyframes mc-ua {
  0%, 57.5% { opacity: 1; }
  58.5%, 100% { opacity: 0; }
}
@keyframes mc-ub {
  0%, 57.5% { opacity: 0; }
  58.5%, 100% { opacity: 1; }
}
@keyframes mc-uf {
  0%, 57.5% { opacity: 0; transform: translateY(calc(var(--u) * 4)); }
  59.5%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes mc-toast {
  0%, 46% { opacity: 0; transform: translateY(calc(var(--u) * 12)) scale(.96); animation-timing-function: cubic-bezier(.3, 1.4, .5, 1); }
  49% { opacity: 1; transform: translateY(0) scale(1); }
  94% { opacity: 1; transform: translateY(0) scale(1); }
  99%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* ───────── scenes: cli ───────── */
/* 「orke 명령」 무대의 세 장면(Shared/HomeCliScenes.razor). 2026-10-11 디자인 캔버스(UZK4B72zhNriNcDSPMsFLY 의 Cli)에서 옮겼다.
   터미널 줄은 한 줄씩 잘라(말줄임) 나타나는 순서만 움직이고, 기본 스타일은 끝 화면(결과를 읽은 뒤)이다. */
.sc-ta .k-term, .sc-tb .k-term, .sc-tc .k-term { padding: calc(var(--u) * 12) calc(var(--u) * 14); font-size: calc(var(--u) * 10.5); line-height: 1.62; white-space: normal; }
.sc-ta .k-term p, .sc-tb .k-term p, .sc-tc .k-term p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 장면 1: 다른 세션에 일을 나눠 맡기기 */
.sc-ta .k-win.ta-win { left: calc(var(--u) * 22); top: calc(var(--u) * 22); width: calc(var(--u) * 452); height: calc(var(--u) * 262); }
.sc-ta .ta-head { display: flex; align-items: center; gap: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 5); font-family: var(--f-ui); font-size: calc(var(--u) * 11.5); }
.sc-ta .ta-head b { color: #FFFFFF; font-weight: 600; }
.sc-ta .ta-q { color: #FFFFFF; }
.sc-ta .ta-b { color: #FFFFFF; font-weight: 600; }
.sc-ta .ta-in { padding-left: calc(var(--u) * 14); }
.sc-ta .ta-l2 { animation: ta-l2 8s infinite both; }
.sc-ta .ta-l3 { animation: ta-l3 8s infinite both; }
.sc-ta .ta-l4 { animation: ta-l4 8s infinite both; }
.sc-ta .ta-l5 { animation: ta-l5 8s infinite both; }
.sc-ta .ta-l6 { animation: ta-l6 8s infinite both; }
.sc-ta .ta-l7 { display: grid; }
.sc-ta .ta-l7 > span { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; }
.sc-ta .ta-l7a { opacity: 0; animation: ta-l7a 8s infinite both; }
.sc-ta .ta-l7b { animation: ta-l7b 8s infinite both; }
.sc-ta .ta-l8 { animation: ta-l8 8s infinite both; }
.sc-ta .ta-spin { display: inline-block; width: calc(var(--u) * 9); height: calc(var(--u) * 9); margin-right: calc(var(--u) * 5); vertical-align: -1px; border: calc(var(--u) * 1.6) solid rgba(255, 255, 255, .2); border-top-color: #6FD3A0; border-radius: 50%; animation: orke-spin .8s linear infinite; }
.sc-ta .ta-card { position: absolute; right: calc(var(--u) * 20); top: calc(var(--u) * 252); z-index: 5; width: calc(var(--u) * 244); padding: calc(var(--u) * 12) calc(var(--u) * 14); border: 1px solid rgba(255, 255, 255, .12); border-radius: calc(var(--u) * 12); background: var(--ui-panel); box-shadow: 0 calc(var(--u) * 22) calc(var(--u) * 46) rgba(5, 12, 9, .36); animation: ta-card 8s infinite both; }
.sc-ta .ta-row { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.sc-ta .ta-id { position: relative; flex: none; }
.sc-ta .ta-id .k-dot { position: absolute; right: calc(var(--u) * -3); bottom: calc(var(--u) * -3); background: #56D69A; box-shadow: 0 0 0 calc(var(--u) * 2) var(--ui-panel); animation: ta-dot 8s infinite both; }
.sc-ta .ta-row b { color: #FFFFFF; font-size: calc(var(--u) * 12.5); font-weight: 600; }
.sc-ta .ta-st { display: grid; margin-left: auto; font-size: calc(var(--u) * 11); }
.sc-ta .ta-st span { grid-area: 1 / 1; justify-self: end; white-space: nowrap; }
.sc-ta .ta-work { opacity: 0; color: #FFB547; animation: ta-work 8s infinite both; }
.sc-ta .ta-need { color: #56D69A; animation: ta-need 8s infinite both; }
.sc-ta .ta-sub { margin-top: calc(var(--u) * 3); padding-left: calc(var(--u) * 24); color: var(--ui-muted); font-size: calc(var(--u) * 11); }
.sc-ta .ta-live { display: grid; margin-top: calc(var(--u) * 9); padding: calc(var(--u) * 7) calc(var(--u) * 10); border-radius: calc(var(--u) * 8); background: var(--ui-terminal); font-family: var(--f-mono); font-size: calc(var(--u) * 10.5); }
.sc-ta .ta-live span { grid-area: 1 / 1; white-space: nowrap; }
.sc-ta .ta-ran { opacity: 0; color: #D5DBE1; animation: ta-ran 8s infinite both; }
.sc-ta .ta-pass { color: var(--ui-ok); animation: ta-need 8s infinite both; }
.sc-ta .k-note.ta-n1 { left: 50%; top: calc(var(--u) * 390); opacity: 0; transform: translate(-50%, -50%); animation: ta-n1 8s infinite both; }
.sc-ta .k-note.ta-n2 { left: 50%; top: calc(var(--u) * 390); transform: translate(-50%, -50%); animation: ta-n2 8s infinite both; }
@keyframes ta-l2 { 0%, 7% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 10%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ta-l3 { 0%, 15% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 18%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ta-l4 { 0%, 25% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 28%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ta-l5 { 0%, 32% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 35%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ta-l6 { 0%, 41% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 44%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ta-l7a { 0%, 47% { opacity: 0; } 50%, 65% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes ta-l7b { 0%, 66% { opacity: 0; } 69%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ta-l8 { 0%, 73% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 77%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ta-card { 0%, 33% { opacity: 0; transform: translateY(calc(var(--u) * 10)) scale(.97); } 38%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ta-dot { 0%, 65% { background: #FF9F0A; } 67%, 100% { background: #56D69A; } }
@keyframes ta-work { 0%, 65% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes ta-need { 0%, 66% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes ta-ran { 0%, 35% { opacity: 0; } 38%, 65% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes ta-n1 { 0%, 21% { opacity: 0; transform: translate(-50%, -30%); } 25%, 48% { opacity: 1; transform: translate(-50%, -50%); } 52%, 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes ta-n2 { 0%, 71% { opacity: 0; transform: translate(-50%, -30%); } 75%, 96% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
/* 장면 2: 명령으로 만든 세션이 세션 목록에 — 사람이 골라 같은 세션을 연다 */
.sc-tb .tb-hub { position: absolute; left: calc(var(--u) * 36); top: calc(var(--u) * 20); width: calc(var(--u) * 412); height: calc(var(--u) * 336); overflow: hidden; border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 12); background: var(--ui-panel); box-shadow: 0 calc(var(--u) * 28) calc(var(--u) * 64) rgba(5, 12, 9, .34); }
.sc-tb .tb-head { display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 14); }
.sc-tb .tb-head b { color: #FFFFFF; font-size: calc(var(--u) * 14); font-weight: 700; }
.sc-tb .tb-head span { color: var(--ui-muted); font-size: calc(var(--u) * 11); }
.sc-tb .tb-x { width: calc(var(--u) * 10); height: calc(var(--u) * 10); margin-left: auto; fill: none; stroke: var(--ui-muted); stroke-width: 1.4; stroke-linecap: round; }
.sc-tb .tb-search { display: flex; align-items: center; height: calc(var(--u) * 30); margin: calc(var(--u) * 2) calc(var(--u) * 12) calc(var(--u) * 6); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 7); background: var(--ui-terminal); color: var(--ui-muted); font-size: calc(var(--u) * 11); }
.sc-tb .tb-kbd { margin-left: auto; font-size: calc(var(--u) * 10); }
.sc-tb .tb-g { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 14); color: var(--ui-text); font-size: calc(var(--u) * 11.5); font-weight: 700; }
.sc-tb .tb-num { display: grid; color: var(--ui-muted); font-weight: 500; }
.sc-tb .tb-num span { grid-area: 1 / 1; }
.sc-tb .tb-one { opacity: 0; animation: tb-one 8s infinite both; }
.sc-tb .tb-two { animation: tb-two 8s infinite both; }
.sc-tb .tb-row { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 48); margin: 0 calc(var(--u) * 6); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 8); }
.sc-tb .tb-new { background: rgba(255, 255, 255, .04); animation: tb-new 8s infinite both; }
.sc-tb .tb-id { position: relative; flex: none; }
.sc-tb .tb-id .k-ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.sc-tb .tb-id .k-dot { position: absolute; right: calc(var(--u) * -3); bottom: calc(var(--u) * -3); box-shadow: 0 0 0 calc(var(--u) * 2) var(--ui-panel); }
.sc-tb .tb-lines { display: grid; min-width: 0; }
.sc-tb .tb-l1 { display: flex; align-items: baseline; gap: calc(var(--u) * 7); white-space: nowrap; }
.sc-tb .tb-l1 b { color: #FFFFFF; font-size: calc(var(--u) * 12.5); font-weight: 600; }
.sc-tb .tb-l1 span { color: #FFB547; font-size: calc(var(--u) * 10.5); }
.sc-tb .tb-l2 { overflow: hidden; color: var(--ui-muted); font-size: calc(var(--u) * 10.5); white-space: nowrap; text-overflow: ellipsis; }
.sc-tb .k-btn.tb-open { width: calc(var(--u) * 46); margin-left: auto; padding: 0; }
.sc-tb .tb-new .k-btn.tb-open { border-color: transparent; background: var(--ui-brand); color: #FFFFFF; animation: tb-open 8s infinite both; }
.sc-tb .tb-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 14); border-top: 1px solid var(--ui-border); color: var(--ui-muted); font-size: calc(var(--u) * 10.5); }
.sc-tb .k-win.tb-win { left: calc(var(--u) * 196); top: calc(var(--u) * 176); z-index: 6; width: calc(var(--u) * 344); height: calc(var(--u) * 226); transform-origin: calc(var(--u) * 217) calc(var(--u) * 64); animation: tb-win 8s infinite both; }
.sc-tb .tb-b { color: #FFFFFF; font-weight: 600; }
.sc-tb .tb-q { color: #FFFFFF; }
.sc-tb .tb-w2 { animation: tb-w2 8s infinite both; }
.sc-tb .tb-w3 { animation: tb-w3 8s infinite both; }
.sc-tb .tb-w4 { animation: tb-w4 8s infinite both; }
.sc-tb .k-cursor.tb-cur { opacity: 0; transform: translate(calc(var(--u) * 409), calc(var(--u) * 232)); animation: tb-cur 8s cubic-bezier(.2, .7, .2, 1) infinite both; }
.sc-tb .k-ring.tb-ring { left: calc(var(--u) * 411); top: calc(var(--u) * 234); animation: tb-ring 8s ease-out infinite both; }
.sc-tb .k-note.tb-n1 { right: calc(var(--u) * 24); top: calc(var(--u) * 118); opacity: 0; animation: tb-n1 8s infinite both; }
.sc-tb .k-note.tb-n2 { left: 50%; top: calc(var(--u) * 432); transform: translate(-50%, -50%); animation: tb-n2 8s infinite both; }
@keyframes tb-one { 0%, 9% { opacity: 1; } 11%, 100% { opacity: 0; } }
@keyframes tb-two { 0%, 10% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes tb-new { 0%, 7% { opacity: 0; transform: translateX(calc(var(--u) * -10)); background: rgba(111, 211, 160, 0); } 12% { opacity: 1; transform: none; background: rgba(111, 211, 160, .16); } 40%, 100% { opacity: 1; transform: none; background: rgba(255, 255, 255, .04); } }
@keyframes tb-open { 0%, 40% { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .07); } 43%, 100% { border-color: transparent; background: #1C8D5E; } }
@keyframes tb-win { 0%, 47% { opacity: 0; transform: scale(.92); } 53%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tb-w2 { 0%, 55% { opacity: 0; } 58%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tb-w3 { 0%, 63% { opacity: 0; } 66%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tb-w4 { 0%, 71% { opacity: 0; } 74%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tb-cur {
  0%, 24% { opacity: 0; transform: translate(calc(var(--u) * 500), calc(var(--u) * 410)); }
  28% { opacity: 1; transform: translate(calc(var(--u) * 500), calc(var(--u) * 410)); }
  38% { opacity: 1; transform: translate(calc(var(--u) * 409), calc(var(--u) * 232)); }
  41% { opacity: 1; transform: translate(calc(var(--u) * 409), calc(var(--u) * 232)) scale(.86); }
  44%, 56% { opacity: 1; transform: translate(calc(var(--u) * 409), calc(var(--u) * 232)); }
  60%, 100% { opacity: 0; transform: translate(calc(var(--u) * 409), calc(var(--u) * 232)); }
}
@keyframes tb-ring { 0%, 40% { opacity: 0; transform: scale(.4); } 42% { opacity: 1; transform: scale(.6); } 52%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tb-n1 { 0%, 12% { opacity: 0; transform: translateY(calc(var(--u) * 6)); } 16%, 40% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; transform: none; } }
@keyframes tb-n2 { 0%, 61% { opacity: 0; transform: translate(-50%, -30%); } 65%, 96% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
/* 장면 3: 웹 창과 패키지도 명령으로 */
.sc-tc .k-win.tc-web { left: calc(var(--u) * 168); top: calc(var(--u) * 18); width: calc(var(--u) * 374); height: calc(var(--u) * 250); }
.sc-tc .tc-globe { width: calc(var(--u) * 13); height: calc(var(--u) * 13); fill: none; stroke: currentColor; stroke-width: 1.4; }
.sc-tc .tc-url { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 10); border-bottom: 1px solid var(--ui-border); background: var(--ui-chrome); color: var(--ui-muted); }
.sc-tc .tc-url svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-tc .tc-addr { flex: 1; height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 10); border-radius: 999px; background: var(--ui-terminal); color: var(--ui-text); font-size: calc(var(--u) * 10.5); line-height: calc(var(--u) * 20); white-space: nowrap; }
.sc-tc .k-page.tc-page { flex: 1; }
.sc-tc .tc-nav { display: flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 14); border-bottom: 1px solid #E3E8E4; font-size: calc(var(--u) * 11.5); }
.sc-tc .tc-logo { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 3); background: #1C8D5E; }
.sc-tc .tc-nav b { font-weight: 700; }
.sc-tc .tc-menu { margin-left: auto; color: #5B6862; font-size: calc(var(--u) * 10.5); }
.sc-tc .tc-img { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 42); width: calc(var(--u) * 150); height: calc(var(--u) * 124); border-radius: calc(var(--u) * 10); background: radial-gradient(60% 70% at 30% 30%, #BFE6D3 0%, rgba(191, 230, 211, 0) 70%), radial-gradient(60% 70% at 80% 80%, #C7D8F6 0%, rgba(199, 216, 246, 0) 70%), #E3EEEA; }
.sc-tc .tc-info { position: absolute; left: calc(var(--u) * 178); top: calc(var(--u) * 44); display: grid; gap: calc(var(--u) * 4); }
.sc-tc .tc-info b { font-size: calc(var(--u) * 14); font-weight: 700; }
.sc-tc .tc-price { color: #5B6862; font-size: calc(var(--u) * 11.5); }
.sc-tc .tc-btn { display: grid; margin-top: calc(var(--u) * 8); }
.sc-tc .tc-btn span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 94); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 7); font-size: calc(var(--u) * 12); font-weight: 650; }
.sc-tc .tc-order { opacity: 0; background: #1C8D5E; color: #FFFFFF; animation: tc-order 8s infinite both; }
.sc-tc .tc-done { background: #E4F2EA; color: #13744C; animation: tc-done 8s infinite both; }
.sc-tc .tc-link { color: #13744C; font-size: calc(var(--u) * 11); }
.sc-tc .k-sel.tc-sel { left: calc(var(--u) * 174); top: calc(var(--u) * 93); width: calc(var(--u) * 102); height: calc(var(--u) * 38); opacity: 0; animation: tc-sel 8s infinite both; }
.sc-tc .k-win.tc-term { left: calc(var(--u) * 18); top: calc(var(--u) * 214); z-index: 4; width: calc(var(--u) * 326); height: calc(var(--u) * 230); }
.sc-tc .tc-b { color: #FFFFFF; font-weight: 600; }
.sc-tc .tc-in { padding-left: calc(var(--u) * 14); }
.sc-tc .tc-t1 { animation: tc-t1 8s infinite both; }
.sc-tc .tc-t2 { animation: tc-t2 8s infinite both; }
.sc-tc .tc-t3 { animation: tc-t3 8s infinite both; }
.sc-tc .tc-t4 { animation: tc-t4 8s infinite both; }
.sc-tc .tc-t5 { animation: tc-t5 8s infinite both; }
.sc-tc .tc-t6 { animation: tc-t6 8s infinite both; }
.sc-tc .tc-pkg { position: absolute; right: calc(var(--u) * 18); top: calc(var(--u) * 296); z-index: 6; display: flex; align-items: center; gap: calc(var(--u) * 10); width: calc(var(--u) * 184); padding: calc(var(--u) * 10) calc(var(--u) * 12); border: 1px solid rgba(255, 159, 10, .35); border-radius: calc(var(--u) * 10); background: #20262E; box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(0, 0, 0, .38); animation: tc-pkg 8s infinite both; }
.sc-tc .tc-pkg img { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex: none; }
.sc-tc .tc-pkg b { display: block; color: #FFFFFF; font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); font-weight: 600; }
.sc-tc .tc-run { display: flex; align-items: center; gap: calc(var(--u) * 6); color: #FFB547; font-size: calc(var(--u) * 10.5); }
.sc-tc .k-ring.tc-ring { left: calc(var(--u) * 393); top: calc(var(--u) * 194); animation: tc-ring 8s ease-out infinite both; }
.sc-tc .k-note.tc-n1 { right: calc(var(--u) * 18); top: calc(var(--u) * 364); opacity: 0; animation: tc-n1 8s infinite both; }
.sc-tc .k-note.tc-n2 { right: calc(var(--u) * 18); top: calc(var(--u) * 364); animation: tc-n2 8s infinite both; }
@keyframes tc-order { 0%, 39% { opacity: 1; transform: none; } 41% { opacity: 1; transform: scale(.95); } 43% { opacity: 1; transform: none; } 45%, 100% { opacity: 0; transform: none; } }
@keyframes tc-done { 0%, 44% { opacity: 0; } 47%, 100% { opacity: 1; } }
@keyframes tc-sel { 0%, 19% { opacity: 0; transform: scale(1.06); } 23%, 44% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: none; } }
@keyframes tc-t1 { 0%, 5% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 8%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tc-t2 { 0%, 14% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 17%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tc-t3 { 0%, 30% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 33%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tc-t4 { 0%, 45% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 48%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tc-t5 { 0%, 56% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 59%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tc-t6 { 0%, 65% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 68%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tc-pkg { 0%, 68% { opacity: 0; transform: translateY(calc(var(--u) * 10)); } 73%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes tc-ring { 0%, 38% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; transform: scale(.6); } 50%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tc-n1 { 0%, 21% { opacity: 0; transform: translateY(calc(var(--u) * 6)); } 25%, 54% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: none; } }
@keyframes tc-n2 { 0%, 72% { opacity: 0; transform: translateY(calc(var(--u) * 6)); } 76%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* ───────── scenes: linux ───────── */
/* 「리눅스 서버」 무대의 세 장면(Shared/HomeLinuxScenes.razor). 2026-10-11 디자인 캔버스(UZK4B72zhNriNcDSPMsFLY 의 Linux)에서 옮겼다.
   설치 장면의 명령은 글자 단위로 드러나고(clip-path 의 steps), 기본 스타일은 끝 화면이다. */
.sc-la .k-term, .sc-lb .k-term, .sc-lc .k-term { font-size: calc(var(--u) * 10.5); line-height: 1.62; white-space: normal; }
.sc-la .k-term p, .sc-lb .k-term p, .sc-lc .k-term p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* 장면 1: 한 줄 설치와 자동 시작 */
.sc-la .k-win.la-win { left: calc(var(--u) * 22); top: calc(var(--u) * 26); width: calc(var(--u) * 516); height: calc(var(--u) * 322); }
.sc-la .k-term { padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 12); }
.sc-la .la-tabico { width: calc(var(--u) * 13); height: calc(var(--u) * 13); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-la .la-ps { color: #6FD3A0; }
.sc-la .la-type { display: inline-block; vertical-align: bottom; white-space: pre; }
.sc-la .la-c1 .la-type { animation: la-t1 8s steps(30, end) infinite both; }
.sc-la .la-c2 { animation: la-c2 8s infinite both; }
.sc-la .la-c2 .la-type { animation: la-t2 8s steps(16, end) infinite both; }
.sc-la .la-c3 { animation: la-c3 8s infinite both; }
.sc-la .la-ok { color: var(--ui-ok); }
.sc-la .la-sub { padding-left: calc(var(--u) * 14); color: var(--ui-muted); }
.sc-la .la-o1 { animation: la-o1 8s infinite both; }
.sc-la .la-o2 { animation: la-o2 8s infinite both; }
.sc-la .la-o3 { animation: la-o3 8s infinite both; }
.sc-la .la-o4 { animation: la-o4 8s infinite both; }
.sc-la .la-o5 { animation: la-o5 8s infinite both; }
.sc-la .la-o6 { animation: la-o6 8s infinite both; }
.sc-la .la-o7 { animation: la-o7 8s infinite both; }
.sc-la .k-note.la-n1 { left: 50%; top: calc(var(--u) * 402); opacity: 0; transform: translate(-50%, -50%); animation: la-n1 8s infinite both; }
.sc-la .k-note.la-n2 { left: 50%; top: calc(var(--u) * 402); transform: translate(-50%, -50%); animation: la-n2 8s infinite both; }
@keyframes la-t1 { 0%, 3% { clip-path: inset(0 100% 0 0); } 15%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes la-t2 { 0%, 46% { clip-path: inset(0 100% 0 0); } 53%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes la-c2 { 0%, 43% { opacity: 0; } 45%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes la-c3 { 0%, 75% { opacity: 0; } 77%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes la-o1 { 0%, 17% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } 19%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes la-o2 { 0%, 23% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } 25%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes la-o3 { 0%, 29% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } 31%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes la-o4 { 0%, 36% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } 38%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes la-o5 { 0%, 59% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } 61%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes la-o6 { 0%, 64% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } 66%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes la-o7 { 0%, 69% { opacity: 0; transform: translateY(calc(var(--u) * 3)); } 71%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes la-n1 { 0%, 15% { opacity: 0; transform: translate(-50%, -30%); } 19%, 44% { opacity: 1; transform: translate(-50%, -50%); } 48%, 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes la-n2 { 0%, 71% { opacity: 0; transform: translate(-50%, -30%); } 75%, 96% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
/* 장면 2: PC·휴대폰 브라우저로 관리 */
.sc-lb .k-win.lb-br { left: calc(var(--u) * 18); top: calc(var(--u) * 26); width: calc(var(--u) * 404); height: calc(var(--u) * 312); animation: lb-br 8s infinite both; }
.sc-lb .lb-url { flex: none; display: flex; align-items: center; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 10); border-bottom: 1px solid var(--ui-border); background: var(--ui-chrome); }
.sc-lb .lb-addr { display: flex; flex: 1; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 10); border-radius: 999px; background: var(--ui-terminal); color: var(--ui-text); font-size: calc(var(--u) * 10.5); white-space: nowrap; }
.sc-lb .lb-addr svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); fill: none; stroke: #6FD3A0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-lb .lb-app { position: relative; flex: 1; background: radial-gradient(70% 90% at 50% 0%, #161B21 0%, #0F1216 70%); }
.sc-lb .lb-top { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 10); border-bottom: 1px solid var(--ui-border); color: var(--ui-muted); font-size: calc(var(--u) * 10.5); }
.sc-lb .lb-top b { color: var(--ui-text); font-weight: 600; }
.sc-lb .lb-top .k-mark { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.sc-lb .lb-chip { margin-left: auto; padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 4); background: rgba(255, 255, 255, .07); }
.sc-lb .k-win.lb-tw { left: calc(var(--u) * 14); top: calc(var(--u) * 36); width: calc(var(--u) * 300); height: calc(var(--u) * 162); border-radius: calc(var(--u) * 9); }
.sc-lb .lb-tw .k-cap { height: calc(var(--u) * 28); }
.sc-lb .lb-tw .k-term { padding: calc(var(--u) * 9) calc(var(--u) * 11); font-size: calc(var(--u) * 9.5); }
.sc-lb .lb-q { color: #FFFFFF; }
.sc-lb .lb-t2 { animation: lb-t2 8s infinite both; }
.sc-lb .lb-t3 { animation: lb-t3 8s infinite both; }
.sc-lb .lb-t4 { animation: lb-t4 8s infinite both; }
.sc-lb .lb-dock { position: absolute; left: 50%; bottom: calc(var(--u) * 10); display: flex; gap: calc(var(--u) * 6); padding: calc(var(--u) * 5); border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 10); background: rgba(32, 37, 45, .9); transform: translateX(-50%); }
.sc-lb .lb-dock i { display: grid; place-items: center; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: calc(var(--u) * 6); background: rgba(255, 255, 255, .06); color: var(--ui-text); }
.sc-lb .lb-dock i.lb-on { background: rgba(255, 255, 255, .14); }
.sc-lb .lb-dock svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sc-lb .k-phone.lb-phone { right: calc(var(--u) * 24); top: calc(var(--u) * 58); z-index: 6; width: calc(var(--u) * 158); height: calc(var(--u) * 318); animation: lb-phone 8s infinite both; }
.sc-lb .lb-bar { display: flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 34); padding: calc(var(--u) * 8) calc(var(--u) * 10) 0; color: var(--ui-text); font-size: calc(var(--u) * 11); }
.sc-lb .lb-bar svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sc-lb .lb-bar b { font-weight: 700; }
.sc-lb .lb-bar span { margin-left: auto; padding: calc(var(--u) * 2) calc(var(--u) * 6); border-radius: calc(var(--u) * 5); background: var(--ui-brand); color: #FFFFFF; font-size: calc(var(--u) * 9); }
.sc-lb .lb-head { display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 8) calc(var(--u) * 10); border-bottom: 1px solid var(--ui-border); font-size: calc(var(--u) * 10.5); white-space: nowrap; }
.sc-lb .lb-head .k-ico { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.sc-lb .lb-head b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; }
.sc-lb .lb-work { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); margin-left: auto; color: #FFB547; font-size: calc(var(--u) * 9); }
.sc-lb .lb-pterm { height: 100%; padding: calc(var(--u) * 8) calc(var(--u) * 9); background: var(--ui-terminal); color: #D5DBE1; font-family: var(--f-mono); font-size: calc(var(--u) * 8.6); line-height: 1.6; }
.sc-lb .lb-pterm p { white-space: normal; }
.sc-lb .lb-p4 { animation: lb-p4 8s infinite both; }
.sc-lb .k-note.lb-n1 { left: 50%; top: calc(var(--u) * 402); opacity: 0; transform: translate(-50%, -50%); animation: lb-n1 8s infinite both; }
.sc-lb .k-note.lb-n2 { left: 50%; top: calc(var(--u) * 402); transform: translate(-50%, -50%); animation: lb-n2 8s infinite both; }
@keyframes lb-br { 0% { opacity: 0; transform: translateY(calc(var(--u) * 10)); } 6%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes lb-t2 { 0%, 10% { opacity: 0; } 13%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lb-t3 { 0%, 20% { opacity: 0; } 23%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lb-t4 { 0%, 32% { opacity: 0; } 35%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lb-phone { 0%, 46% { opacity: 0; transform: translateX(calc(var(--u) * 30)); } 54%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes lb-p4 { 0%, 62% { opacity: 0; } 66%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lb-n1 { 0%, 12% { opacity: 0; transform: translate(-50%, -30%); } 16%, 44% { opacity: 1; transform: translate(-50%, -50%); } 48%, 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes lb-n2 { 0%, 57% { opacity: 0; transform: translate(-50%, -30%); } 61%, 96% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }
/* 장면 3: 서버의 가상 화면 웹 창 — 보던 브라우저(.lc-view)가 사라져도 서버의 페이지는 계속 바뀐다 */
.sc-lc .lc-srv { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 22); width: calc(var(--u) * 516); height: calc(var(--u) * 338); border-radius: calc(var(--u) * 16); background: rgba(14, 27, 21, .06); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(14, 27, 21, .28); animation: lc-srv 8s infinite both; }
.sc-lc .lc-lab { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * -13); z-index: 8; display: inline-flex; align-items: center; gap: calc(var(--u) * 7); height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 11); border-radius: 999px; background: #0E1B15; color: #FFFFFF; font-size: calc(var(--u) * 11); font-weight: 600; white-space: nowrap; animation: lc-lab 8s infinite both; }
.sc-lc .lc-lab svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); fill: none; stroke: #6FD3A0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 페이지 창은 터미널 창(왼쪽 300)과 상태 칸이 겹치지 않는 폭이다 — 상태가 「배송 완료」로 바뀌는 순간이 보여야 한다. */
.sc-lc .k-win.lc-web { left: calc(var(--u) * 14); top: calc(var(--u) * 72); width: calc(var(--u) * 300); height: calc(var(--u) * 252); border-radius: calc(var(--u) * 10); }
.sc-lc .lc-web .k-cap { height: calc(var(--u) * 28); }
.sc-lc .lc-globe { width: calc(var(--u) * 13); height: calc(var(--u) * 13); fill: none; stroke: currentColor; stroke-width: 1.4; }
.sc-lc .k-page.lc-page { flex: 1; padding: calc(var(--u) * 10) calc(var(--u) * 12); font-size: calc(var(--u) * 10.5); }
.sc-lc .lc-ph { display: flex; align-items: center; gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 8); font-size: calc(var(--u) * 12); }
.sc-lc .lc-logo { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: calc(var(--u) * 3); background: #1C8D5E; }
.sc-lc .lc-ph b { font-weight: 700; }
.sc-lc .lc-ph span { margin-left: auto; color: #5B6862; font-size: calc(var(--u) * 10); }
.sc-lc .lc-tr { position: relative; display: grid; grid-template-columns: calc(var(--u) * 64) minmax(0, 1fr) calc(var(--u) * 64); align-items: center; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 8); border-bottom: 1px solid #E3E8E4; white-space: nowrap; }
.sc-lc .lc-th { height: calc(var(--u) * 24); color: #5B6862; font-size: calc(var(--u) * 9.5); }
.sc-lc .lc-right { text-align: right; }
.sc-lc .lc-tr code { font-family: var(--f-mono); font-size: calc(var(--u) * 10); }
.sc-lc .lc-st { display: grid; justify-items: end; }
.sc-lc .lc-st > span { grid-area: 1 / 1; padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 9.5); font-weight: 600; line-height: calc(var(--u) * 17); }
.sc-lc .lc-ship, .sc-lc .lc-prep { background: #E8EEF9; color: #2D4F8F; }
.sc-lc .lc-done, .sc-lc .lc-paid { background: #E4F2EA; color: #13744C; }
.sc-lc .lc-ship { opacity: 0; animation: lc-ship 8s infinite both; }
.sc-lc .lc-done { animation: lc-done 8s infinite both; }
.sc-lc .k-sel.lc-sel { inset: calc(var(--u) * -1) calc(var(--u) * -2); opacity: 0; animation: lc-sel 8s infinite both; }
.sc-lc .lc-sel .k-sel-label { left: auto; right: calc(var(--u) * -1.5); }
.sc-lc .k-win.lc-term { left: calc(var(--u) * 300); top: calc(var(--u) * 150); z-index: 4; width: calc(var(--u) * 204); height: calc(var(--u) * 174); border-radius: calc(var(--u) * 10); }
.sc-lc .lc-term .k-cap { height: calc(var(--u) * 28); }
.sc-lc .lc-term .k-term { padding: calc(var(--u) * 9) calc(var(--u) * 10); font-size: calc(var(--u) * 9.5); }
.sc-lc .lc-t1 { animation: lc-t1 8s infinite both; }
.sc-lc .lc-t2 { animation: lc-t2 8s infinite both; }
.sc-lc .lc-t3 { animation: lc-t3 8s infinite both; }
.sc-lc .lc-t4 { animation: lc-t4 8s infinite both; }
.sc-lc .lc-view { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 22); z-index: 7; width: calc(var(--u) * 516); height: calc(var(--u) * 338); border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 calc(var(--u) * 28) calc(var(--u) * 64) rgba(5, 12, 9, .3); opacity: 0; pointer-events: none; animation: lc-view 8s infinite both; }
.sc-lc .lc-chrome { display: flex; flex-direction: column; height: calc(var(--u) * 64); overflow: hidden; border-radius: calc(var(--u) * 12) calc(var(--u) * 12) 0 0; background: var(--ui-chrome); }
.sc-lc .lc-chrome .k-cap { border-bottom: 0; }
.sc-lc .lc-url { flex: none; display: flex; align-items: center; height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 10); border-bottom: 1px solid var(--ui-border); }
.sc-lc .lc-addr { display: flex; flex: 1; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 10); border-radius: 999px; background: var(--ui-terminal); color: var(--ui-text); font-size: calc(var(--u) * 10.5); white-space: nowrap; }
.sc-lc .lc-addr svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); fill: none; stroke: #6FD3A0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-lc .lc-frame { position: absolute; left: 0; right: 0; top: calc(var(--u) * 64); bottom: 0; border: 1px solid rgba(255, 255, 255, .14); border-top: 0; border-radius: 0 0 calc(var(--u) * 12) calc(var(--u) * 12); }
.sc-lc .k-note.lc-n1 { left: 50%; top: calc(var(--u) * 402); opacity: 0; transform: translate(-50%, -50%); animation: lc-n1 8s infinite both; }
.sc-lc .k-note.lc-n2 { left: 50%; top: calc(var(--u) * 402); transform: translate(-50%, -50%); animation: lc-n2 8s infinite both; }
@keyframes lc-srv { 0%, 50% { box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(14, 27, 21, 0); } 56%, 100% { box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(14, 27, 21, .28); } }
@keyframes lc-lab { 0%, 52% { opacity: 0; transform: translateY(calc(var(--u) * 6)); } 57%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes lc-ship { 0%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes lc-done { 0%, 70% { opacity: 0; } 73%, 100% { opacity: 1; } }
@keyframes lc-sel { 0%, 30% { opacity: 0; } 34%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes lc-t1 { 0%, 10% { opacity: 0; } 13%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lc-t2 { 0%, 22% { opacity: 0; } 25%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lc-t3 { 0%, 34% { opacity: 0; } 37%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lc-t4 { 0%, 70% { opacity: 0; } 73%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lc-view { 0%, 46% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: scale(1.03); } }
@keyframes lc-n1 { 0%, 12% { opacity: 0; transform: translate(-50%, -30%); } 16%, 44% { opacity: 1; transform: translate(-50%, -50%); } 48%, 100% { opacity: 0; transform: translate(-50%, -50%); } }
@keyframes lc-n2 { 0%, 57% { opacity: 0; transform: translate(-50%, -30%); } 61%, 96% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -50%); } }

/* ───────── scenes: support ───────── */
/* orke support 띠의 흐름 장면(Shared/HomeSupportScene.razor): 내 서비스의 질문 → orke support 창 → JSON 답, 10초 한 바퀴.
   기능 목록 무대가 아니라 띠의 무대(home.css 의 .sup-stage)가 크기 컨테이너이고, 높이는 내용이 정한다(절대 배치가 아니다).
   좁은 무대에서는 세 덩어리를 위아래로 쌓고 연결선을 세운다. 기본 스타일은 끝 화면(답을 받은 뒤)이다. */
.sc-su { position: relative; color: var(--ui-text); font-family: var(--f-ui); letter-spacing: 0; word-break: keep-all; -webkit-font-smoothing: antialiased; }
.sc-su p, .sc-su pre { margin: 0; }
.sc-su svg { display: block; }
.sc-su .su-flow { --u: calc(100cqw / 1200); display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * 44) calc(var(--u) * 12); font-size: calc(var(--u) * 12); line-height: 1.5; }
/* 카드 폭은 Authorization 머리글 한 줄(38자)이 접히지 않는 만큼이다 — 카드 둘·연결선 둘·창의 합이 1176(=1200−좌우 여백)이다. */
.sc-su .su-card { position: relative; flex: none; width: calc(var(--u) * 286); padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 18); border-radius: calc(var(--u) * 16); background: #FFFFFF; color: #0E1B15; box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(0, 0, 0, .45); }
.sc-su .su-ch { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 12); padding-bottom: calc(var(--u) * 12); border-bottom: 1px solid #E2E5E9; font-size: calc(var(--u) * 13); white-space: nowrap; }
.sc-su .su-ch b { font-weight: 680; }
.sc-su .su-ch span { color: #5B6862; }
.sc-su .su-ch .su-took { margin-left: auto; }
.sc-su .su-cico { display: grid; place-items: center; width: calc(var(--u) * 26); height: calc(var(--u) * 26); flex: none; border-radius: calc(var(--u) * 8); background: #E4F2EA; color: #13744C; }
.sc-su .su-cico svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-su .su-code { color: #2F3B35; font-family: var(--f-mono); font-size: calc(var(--u) * 10.8); line-height: 1.7; white-space: pre-wrap; word-break: break-all; }
.sc-su .su-ln { display: block; animation: su-ln 10s infinite both; }
.sc-su .su-ln2 { animation-delay: .25s; }
.sc-su .su-ln3 { animation-delay: .5s; }
.sc-su .su-m { color: #13744C; font-weight: 700; }
.sc-su .su-d { color: #5B6862; }
.sc-su .su-k { color: #0E1B15; font-weight: 600; }
.sc-su .su-s { color: #9A4A08; }
.sc-su .su-send { display: grid; margin-top: calc(var(--u) * 14); }
.sc-su .su-send > span { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12); border-radius: 999px; font-size: calc(var(--u) * 12); font-weight: 620; white-space: nowrap; }
.sc-su .su-s1 { opacity: 0; background: #0E1B15; color: #FFFFFF; animation: su-s1 10s infinite both; }
.sc-su .su-s1 i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: #6FD3A0; animation: su-blink 1s ease-in-out infinite; }
.sc-su .su-s2 { background: #E4F2EA; color: #13744C; animation: su-s2 10s infinite both; }
.sc-su .su-link { position: relative; flex: none; width: calc(var(--u) * 58); height: calc(var(--u) * 58); }
.sc-su .su-line { position: absolute; left: calc(var(--u) * 4); right: calc(var(--u) * 4); top: 50%; height: calc(var(--u) * 2); margin-top: calc(var(--u) * -1); background: repeating-linear-gradient(90deg, rgba(111, 211, 160, .6) 0 calc(var(--u) * 6), transparent calc(var(--u) * 6) calc(var(--u) * 11)); }
.sc-su .su-pkt { position: absolute; top: 50%; left: calc(var(--u) * 4); width: calc(var(--u) * 11); height: calc(var(--u) * 11); margin-top: calc(var(--u) * -5.5); border-radius: 50%; background: #6FD3A0; box-shadow: 0 0 calc(var(--u) * 14) #6FD3A0; opacity: 0; }
.sc-su .su-l1 .su-pkt { animation: su-p1 10s infinite both; }
.sc-su .su-l2 .su-pkt { animation: su-p2 10s infinite both; }
.sc-su .su-lab { position: absolute; left: 50%; top: calc(50% + var(--u) * 9); color: #9FE3BF; font-family: var(--f-mono); font-size: calc(var(--u) * 10.5); letter-spacing: .06em; white-space: nowrap; transform: translateX(-50%); }
.sc-su .su-win { position: relative; flex: none; display: flex; flex-direction: column; width: calc(var(--u) * 488); height: calc(var(--u) * 400); overflow: hidden; border-radius: calc(var(--u) * 12); background: var(--ui-ground); box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12); animation: su-glow 10s infinite both; }
.sc-su .sw-cap { flex: none; display: flex; align-items: center; height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 12); border-bottom: 1px solid var(--ui-border); background: var(--ui-chrome); color: var(--ui-text); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-su .sw-ctl { display: flex; align-items: center; gap: calc(var(--u) * 16); margin-left: auto; color: var(--ui-muted); }
.sc-su .sw-ctl svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.sc-su .sw-head { flex: none; padding: calc(var(--u) * 14) calc(var(--u) * 18) 0; border-bottom: 1px solid var(--ui-border); }
.sc-su .sw-title { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.sc-su .sw-title b { color: #FFFFFF; font-size: calc(var(--u) * 16); font-weight: 700; letter-spacing: -.01em; }
.sc-su .sw-chip { display: inline-flex; align-items: center; height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 7); border-radius: calc(var(--u) * 5); background: rgba(120, 174, 233, .16); color: var(--ui-info); font-size: calc(var(--u) * 11); font-weight: 600; }
.sc-su .sw-tog { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); margin-left: auto; color: var(--ui-text); font-size: calc(var(--u) * 11.5); white-space: nowrap; }
.sc-su .sw-tog i { position: relative; width: calc(var(--u) * 26); height: calc(var(--u) * 15); border-radius: 999px; background: #E8EBEF; }
.sc-su .sw-tog i::after { content: ""; position: absolute; top: calc(var(--u) * 2); right: calc(var(--u) * 2); width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: #15181D; }
.sc-su .sw-sub { margin-top: calc(var(--u) * 4); color: var(--ui-muted); font-size: calc(var(--u) * 11.5); }
.sc-su .sw-tabs { display: flex; align-items: flex-end; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 12); }
.sc-su .sw-tabs span { padding-bottom: calc(var(--u) * 7); color: var(--ui-muted); }
.sc-su .sw-tabs .sw-on { color: #FFFFFF; box-shadow: inset 0 calc(var(--u) * -2) 0 #FFFFFF; }
.sc-su .sw-tabs em { margin-left: auto; padding-bottom: calc(var(--u) * 7); color: var(--ui-muted); font-size: calc(var(--u) * 10.5); font-style: normal; white-space: nowrap; }
.sc-su .sw-room { flex: 1; min-height: 0; padding: calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 16); background: #12151A; }
.sc-su .sw-rid { display: flex; align-items: center; gap: calc(var(--u) * 8); color: #FFFFFF; font-family: var(--f-mono); font-size: calc(var(--u) * 12); font-weight: 700; white-space: nowrap; }
.sc-su .sw-rid span { margin-left: auto; color: var(--ui-muted); font-family: var(--f-ui); font-size: calc(var(--u) * 11); font-weight: 500; }
.sc-su .sw-rsub { margin-top: calc(var(--u) * 4); color: var(--ui-muted); font-size: calc(var(--u) * 11); }
.sc-su .sw-rsub b { color: var(--ui-text); font-weight: 600; }
.sc-su .sw-rows { display: grid; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); }
.sc-su .sw-row { display: grid; grid-template-columns: calc(var(--u) * 58) calc(var(--u) * 34) minmax(0, 1fr); align-items: start; gap: 0 calc(var(--u) * 4); }
.sc-su .sw-time { color: var(--ui-muted); font-family: var(--f-mono); font-size: calc(var(--u) * 10.5); line-height: calc(var(--u) * 20); }
.sc-su .sw-k { color: var(--ui-muted); font-size: calc(var(--u) * 11); line-height: calc(var(--u) * 20); }
.sc-su .sw-v { color: #FFFFFF; font-size: calc(var(--u) * 12.5); line-height: calc(var(--u) * 20); }
.sc-su .sw-tool { display: flex; align-items: center; gap: calc(var(--u) * 6); overflow: hidden; font-family: var(--f-mono); font-size: calc(var(--u) * 11); white-space: nowrap; }
.sc-su .sw-tool b { font-weight: 600; }
.sc-su .sw-arg { overflow: hidden; color: var(--ui-muted); text-overflow: ellipsis; }
.sc-su .sw-ms { display: grid; flex: none; margin-left: auto; }
.sc-su .sw-ms > span { grid-area: 1 / 1; justify-self: end; }
.sc-su .sw-spin { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border: calc(var(--u) * 2) solid rgba(255, 255, 255, .18); border-top-color: #6FD3A0; border-radius: 50%; opacity: 0; animation: sw-spin 10s infinite both, orke-spin .8s linear infinite; }
.sc-su .sw-dur { color: var(--ui-muted); font-family: var(--f-ui); font-size: calc(var(--u) * 11); animation: sw-dur 10s infinite both; }
.sc-su .sw-ans { padding: calc(var(--u) * 9) calc(var(--u) * 12); border: 1px solid var(--ui-border); border-radius: calc(var(--u) * 7); background: var(--ui-terminal); color: #D5DBE1; font-family: var(--f-mono); font-size: calc(var(--u) * 11); line-height: 1.65; white-space: pre-wrap; }
.sc-su .sw-key { color: #FFFFFF; }
.sc-su .sw-meta { padding-left: calc(var(--u) * 96); color: var(--ui-muted); font-size: calc(var(--u) * 10.5); animation: sw-r4 10s infinite both; }
.sc-su .sw-r1 { animation: sw-r1 10s infinite both; }
.sc-su .sw-r2 { animation: sw-r2 10s infinite both; }
.sc-su .sw-r3 { animation: sw-r3 10s infinite both; }
.sc-su .su-res { animation: su-res 10s infinite both; }
.sc-su .su-ch .su-ok { display: inline-flex; align-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 6); background: #1C8D5E; color: #FFFFFF; font-family: var(--f-mono); font-size: calc(var(--u) * 11.5); font-weight: 700; animation: su-ok 10s infinite both; }
@container (max-width: 780px) {
  .sc-su .su-flow { --u: calc(100cqw / 380); flex-direction: column; padding: calc(var(--u) * 18) calc(var(--u) * 12); }
  .sc-su .su-card, .sc-su .su-win { width: 100%; }
  .sc-su .su-win { height: auto; }
  .sc-su .su-link { width: calc(var(--u) * 46); height: calc(var(--u) * 46); transform: rotate(90deg); }
  .sc-su .su-lab { display: none; }
  .sc-su .sw-row { grid-template-columns: calc(var(--u) * 34) minmax(0, 1fr); }
  .sc-su .sw-time { display: none; }
  .sc-su .sw-meta { padding-left: calc(var(--u) * 38); }
  .sc-su .sw-tabs em { display: none; }
}
@keyframes su-ln { 0%, 3% { opacity: 0; transform: translateY(calc(var(--u) * 4)); } 8%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes su-s1 { 0%, 10% { opacity: 0; } 13%, 21% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes su-s2 { 0%, 22% { opacity: 0; } 25%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes su-blink { 50% { opacity: .25; } }
@keyframes su-p1 { 0%, 13% { left: calc(var(--u) * 4); opacity: 0; } 14% { opacity: 1; } 21% { left: calc(100% - var(--u) * 15); opacity: 1; } 23%, 100% { left: calc(100% - var(--u) * 15); opacity: 0; } }
@keyframes su-p2 { 0%, 52% { left: calc(var(--u) * 4); opacity: 0; } 53% { opacity: 1; } 60% { left: calc(100% - var(--u) * 15); opacity: 1; } 62%, 100% { left: calc(100% - var(--u) * 15); opacity: 0; } }
@keyframes su-glow {
  0%, 21%, 56%, 100% { box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12); }
  25%, 50% { box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 70) rgba(0, 0, 0, .55), 0 0 0 1px rgba(111, 211, 160, .6), 0 0 calc(var(--u) * 46) rgba(111, 211, 160, .22); }
}
@keyframes sw-spin { 0%, 30% { opacity: 0; } 32%, 39% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes sw-dur { 0%, 40% { opacity: 0; } 43%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes sw-r1 { 0%, 21% { opacity: 0; transform: translateY(calc(var(--u) * 6)); } 25%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes sw-r2 { 0%, 29% { opacity: 0; transform: translateY(calc(var(--u) * 6)); } 33%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes sw-r3 { 0%, 43% { opacity: 0; transform: translateY(calc(var(--u) * 6)); } 48%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes sw-r4 { 0%, 49% { opacity: 0; } 52%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes su-res { 0%, 59% { opacity: 0; transform: translateY(calc(var(--u) * 10)) scale(.97); } 64%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes su-ok { 0%, 63% { box-shadow: 0 0 0 0 rgba(28, 141, 94, .5); } 70% { box-shadow: 0 0 0 calc(var(--u) * 8) rgba(28, 141, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(28, 141, 94, 0); } }

}