@font-face { font-family: "Silkscreen"; src: url("../fonts/Silkscreen-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/Silkscreen-700.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fusion Pixel"; src: url("../fonts/FusionPixel12-subset.woff2") format("woff2"); font-display: block; } /* OFL, fonts/OFL-FusionPixel.txt */
@font-face { font-family: "Noto Sans SC"; src: url("../fonts/NotoSansSC-subset.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --page: #eef2f2; --ink: #25231f; --dim: rgba(37, 35, 31, 0.55); --line: rgba(37, 35, 31, 0.16); --panel: rgba(250, 249, 245, 0.86); --accent: #e5603d;
  --pix: "Silkscreen", "Fusion Pixel", ui-monospace, monospace; /* 8 / 16 px: Latin display, CJK falls through to Fusion Pixel */
  --pixel: "Fusion Pixel", "Silkscreen", ui-monospace, monospace; /* 12 / 24 px: titles and labels, CJK + Latin */
  --rec: #e5403d;
  --body: "Geist", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  --pad: clamp(14px, 2.6vw, 32px);
}
html[data-theme="dark"] { --page: #0b0b0b; --ink: #f2f0ea; --dim: rgba(242, 240, 234, 0.55); --line: rgba(242, 240, 234, 0.16); --panel: rgba(20, 20, 20, 0.82); --accent: #e0b25a; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--page); color: var(--ink); transition: background 1.2s, color 1.2s; }
body { font: 400 14px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
.title .tag, .title h1, .slate, .rail .h, .rail .badge, .lcd, .toggles, .card .no, .card h2, .card .meta, .card .stat b, .card .acts > *, .index li, .hint, .rec, .reticle, .film .close, .film .exit, .how-panel h3, .veil, .sketch text { -webkit-font-smoothing: none; font-smooth: never; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; touch-action: none; }
html.point #gl { cursor: pointer; }
html.drag #gl { cursor: grabbing; }

.title { position: fixed; z-index: 3; left: var(--pad); top: var(--pad); max-width: 360px; pointer-events: none; }
.title .tag { font: 400 10px/1 var(--pix); letter-spacing: 0.08em; color: var(--dim); }
.title .tag span { font-family: var(--body); letter-spacing: 0.1em; }
.title h1 { font: 700 44px/1 var(--pix); letter-spacing: 0.02em; margin-top: 8px; }
.title .line { margin-top: 10px; color: var(--dim); text-wrap: balance; }

.slate { position: fixed; z-index: 3; left: 50%; top: var(--pad); transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 0 0 0 14px; height: 32px; font: 400 8px/1 var(--pix); letter-spacing: 0.04em; background: var(--ink); color: var(--page); border-radius: 2px; box-shadow: 4px 4px 0 var(--accent); white-space: nowrap; }
.slate b { font-weight: 700; font-size: 8px; }
#shot-kind { font: 400 12px/1 var(--pixel); }
#shot-what { font: 400 12px/1 var(--pixel); }
.slate .action { align-self: stretch; display: flex; align-items: center; gap: 7px; padding: 0 12px; margin-left: 2px; font: 400 12px/1 var(--pixel); color: var(--page); background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255, 255, 255, 0.08) 6px 12px); border-left: 1px solid rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] .slate .action { background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0, 0, 0, 0.08) 6px 12px); border-left-color: rgba(0, 0, 0, 0.2); }
.slate .action i { width: 8px; height: 8px; background: var(--rec); border-radius: 50%; }
.slate .action:hover i, html.rolling .slate .action i { animation: blink 1s steps(1) infinite; }
html.rolling .slate .action i { border-radius: 0; }
@keyframes blink { 50% { opacity: 0.15; } }

/* viewfinder */
.vf i { position: fixed; z-index: 2; width: 22px; height: 22px; border: 0 solid var(--ink); opacity: 0.4; pointer-events: none; }
.vf .tl { left: 10px; top: 10px; border-width: 2px 0 0 2px; }
.vf .tr { right: 10px; top: 10px; border-width: 2px 2px 0 0; }
.vf .bl { left: 10px; bottom: 10px; border-width: 0 0 2px 2px; }
.vf .br { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; }
html.rolling .vf i { opacity: 0.8; border-color: var(--rec); }
.rec { position: fixed; z-index: 2; right: calc(var(--pad) + 4px); bottom: 24px; display: flex; gap: 10px; align-items: center; font: 400 8px/1 var(--pix); letter-spacing: 0.06em; color: var(--dim); pointer-events: none; white-space: nowrap; }
.rec #lut { font: 400 12px/1 var(--pixel); letter-spacing: 0; }
.rec .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; }
html.rolling .rec { color: var(--ink); }
html.rolling .rec .dot { background: var(--rec); border-color: var(--rec); animation: blink 1s steps(1) infinite; }
.reticle { position: fixed; z-index: 5; left: 0; top: 0; pointer-events: none; display: none; }
.reticle.on { display: block; }
.reticle::before { content: ""; position: absolute; left: -15px; top: -11px; width: 30px; height: 22px; border: 2px solid var(--ink); clip-path: polygon(0 0, 30% 0, 30% 2px, 70% 2px, 70% 0, 100% 0, 100% 100%, 70% 100%, 70% calc(100% - 2px), 30% calc(100% - 2px), 30% 100%, 0 100%); }
.reticle span { position: absolute; left: 22px; top: 8px; padding: 4px 6px; font: 400 12px/1 var(--pixel); background: var(--ink); color: var(--page); white-space: nowrap; }
.sketch { position: fixed; inset: 0; z-index: 2; width: 100vw; height: 100vh; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.sketch.on { opacity: 1; }
.sketch path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sketch text { font: 400 12px var(--pixel); fill: var(--accent); stroke: var(--page); stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
html.rolling .hint { visibility: hidden; }

.rail { position: fixed; z-index: 3; right: var(--pad); top: var(--pad); width: 208px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; }
.rail .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
/* camera body: a dark shell with a small screen, preset buttons and switches */
.rail .body { --b: #1d1c1a; --bt: #e8e5dd; padding: 10px 10px 12px; background: var(--b); color: var(--bt); border-radius: 6px 6px 3px 3px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 0 rgba(0, 0, 0, 0.4), 3px 3px 0 var(--accent); }
.rail .badge { display: flex; justify-content: space-between; font: 400 8px/1 var(--pix); letter-spacing: 0.1em; color: rgba(232, 229, 221, 0.5); }
.rail .badge b { color: var(--accent); font-weight: 700; }
.lcd { display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; align-items: center; margin-top: 8px; padding: 8px 9px; background: #b7c29a; color: #1f2a17; border-radius: 2px; box-shadow: inset 0 0 0 2px #2a2c24, inset 2px 2px 0 2px rgba(0, 0, 0, 0.25); }
html[data-theme="dark"] .lcd { background: #c9a35c; color: #241a0c; }
.lcd span { font: 400 8px/1 var(--pix); letter-spacing: 0.06em; opacity: 0.7; }
.lcd b { font: 400 12px/1 var(--pixel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail .as { font: 400 9px/1 var(--pix); text-decoration: none; padding: 5px 7px; border: 1px solid var(--line); border-radius: 999px; }
.lang span { opacity: 0.4; font: 400 11px/1 var(--pix); }
.lang span + span::before { content: "/"; margin: 0 4px; }
html[lang="zh"] .lang [data-l="zh"], html[lang="en"] .lang [data-l="en"] { opacity: 1; }
.rail .h { display: flex; gap: 6px; align-items: baseline; margin: 11px 0 6px; color: rgba(232, 229, 221, 0.6); }
.rail .h b { font: 700 8px/1 var(--pix); letter-spacing: 0.08em; color: var(--bt); }
.rail .h span { font: 400 12px/1 var(--pixel); }
.rail .h em { margin-left: auto; font: 400 8px/1 var(--pix); font-style: normal; color: var(--bt); }
.rail .h em span { font: inherit; }
.moods { display: grid; grid-template-columns: 1fr; gap: 3px; }
.moods button, .row button { padding: 6px 8px; text-align: left; font: 400 12px/1 var(--pixel); background: #2b2a27; border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07); transition: background 0.2s; }
.moods button.on { background: var(--accent); color: #1d1c1a; }
.moods button.on::before { content: "● "; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.row button { text-align: center; font: 400 8px/1 var(--pix); padding: 8px; }
.moods button:hover, .row button:hover { background: #3a3935; }
.moods button.on:hover { background: var(--accent); }
.body input[type="range"] { width: 100%; height: 14px; appearance: none; -webkit-appearance: none; background: transparent; }
.body input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #3a3935; border-radius: 0; }
.body input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 14px; margin-top: -5px; background: var(--bt); border-radius: 1px; box-shadow: inset 0 -3px 0 #9d978c; }
.body input[type="range"]::-moz-range-track { height: 4px; background: #3a3935; }
.body input[type="range"]::-moz-range-thumb { width: 10px; height: 14px; background: var(--bt); border: 0; border-radius: 1px; }
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 8px; margin-top: 12px; }
.toggles label { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; row-gap: 3px; align-items: center; cursor: pointer; }
.toggles input { position: absolute; opacity: 0; pointer-events: none; }
.toggles i { grid-row: span 2; width: 12px; height: 20px; background: #2b2a27; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); position: relative; }
.toggles i::after { content: ""; position: absolute; left: 2px; right: 2px; height: 8px; bottom: 2px; background: #6e6a62; border-radius: 1px; transition: bottom 0.12s, background 0.12s; }
.toggles input:checked + i::after { bottom: 10px; background: var(--accent); }
.toggles input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 1px; }
.toggles b { font: 700 8px/1 var(--pix); letter-spacing: 0.06em; }
.toggles span { font: 400 12px/1 var(--pixel); color: rgba(232, 229, 221, 0.6); }
.rail-toggle { display: none; position: fixed; z-index: 4; right: 12px; top: 12px; width: 40px; height: 40px; place-items: center; font-size: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.how { margin-top: 10px; width: 100%; padding: 8px; font: 400 12px/1 var(--pixel); border: 1px dashed var(--line); border-radius: 2px; }

.card { position: fixed; z-index: 4; left: var(--pad); bottom: 70px; width: min(380px, calc(100vw - 2 * var(--pad))); padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 4px 4px 0 var(--ink); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.35s, transform 0.35s; }
.card.on { opacity: 1; transform: none; pointer-events: auto; }
.card .no { font: 400 12px/1 var(--pixel); color: var(--dim); }
.card h2 { font: 400 24px/1.25 var(--pixel); margin-top: 10px; letter-spacing: 0.01em; }
.card .meta { margin-top: 8px; font: 400 12px/1.4 var(--pixel); color: var(--dim); }
.card .body { margin-top: 10px; }
.card .stat { margin-top: 8px; font-size: 12px; }
.card .stat b { font: 700 16px/1 var(--pix); margin-right: 6px; color: var(--accent); }
.card .rank { list-style: none; margin-top: 10px; display: grid; gap: 5px; }
.card .rank li { display: grid; grid-template-columns: 7.5em 1fr auto; gap: 8px; align-items: center; font: 400 12px/1 var(--pixel); }
.card .rank span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .rank i { height: 6px; width: var(--w); min-width: 2px; background: var(--accent); background-image: repeating-linear-gradient(90deg, transparent 0 5px, var(--panel) 5px 6px); }
.card .rank b { font: 400 8px/1 var(--pix); }
.card.board #c-play, .card.board #c-link { display: none; }
.card .spec { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.card .spec:empty { display: none; }
.card .spec dt { font: 400 12px/1.4 var(--pixel); color: var(--dim); }
.card .spec dd { font-size: 13px; line-height: 1.4; }
.card .tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.card .tabs button { padding: 5px 10px; font: 400 12px/1 var(--pixel); border: 1px solid var(--ink); border-radius: 2px; }
.card .tabs button.on { background: var(--ink); color: var(--page); }
.card .insight, .sheet .insight { margin-top: 8px; font: 400 12px/1.5 var(--pixel); color: var(--accent); }
.index li.x { color: var(--dim); }
.index li.x:first-of-type { margin-left: 6px; border-left: 1px solid var(--line); border-radius: 0 2px 2px 0; }
.index li.x .n { color: var(--accent); }

/* call sheet: a printed production sheet, built from content */
.sheet { position: fixed; inset: 0; z-index: 7; display: none; overflow: auto; padding: 4vh 3vw; background: rgba(20, 18, 16, 0.42); }
.sheet.on { display: block; }
.sheet .paper { position: relative; width: min(1000px, 100%); margin: 0 auto; padding: 26px 28px 22px; background: var(--page); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--accent); }
.sheet-close { position: fixed; right: 3vw; top: 3vh; z-index: 8; padding: 8px 12px; font: 400 12px/1 var(--pixel); background: var(--ink); color: var(--page); border-radius: 2px; }
.sheet header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px; padding-bottom: 14px; border-bottom: 3px double var(--ink); }
.sheet .kick { grid-column: 1 / -1; font: 400 8px/1 var(--pix); letter-spacing: 0.12em; color: var(--dim); -webkit-font-smoothing: none; }
.sheet h2 { font: 400 24px/1 var(--pixel); -webkit-font-smoothing: none; }
.sheet .who { display: flex; gap: 12px; align-items: baseline; font: 400 12px/1 var(--pixel); -webkit-font-smoothing: none; }
.sheet .who span { color: var(--dim); }
.sheet .who b { font: 700 16px/1 var(--pix); }
.sheet .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; grid-template-areas: "note kit" "skills mouth" "strip strip" "contact contact"; }
.sheet section { padding: 16px 0 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.sheet h3 { margin-bottom: 10px; font: 400 12px/1 var(--pixel); color: var(--dim); -webkit-font-smoothing: none; }
.sheet h3::before { content: "■ "; color: var(--accent); }
.s-note { grid-area: note; } .s-kit { grid-area: kit; } .s-skills { grid-area: skills; } .s-mouth { grid-area: mouth; } .s-strip { grid-area: strip; } .s-contact { grid-area: contact; border-bottom: 0 !important; }
.s-note p { font-size: 15px; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chips li { padding: 6px 9px; font: 400 12px/1 var(--pixel); border: 1px solid var(--ink); border-radius: 2px; -webkit-font-smoothing: none; }
.matrix { width: 100%; border-collapse: collapse; font: 400 12px/1 var(--pixel); -webkit-font-smoothing: none; }
.matrix th { padding: 0 4px 8px; font-weight: 400; color: var(--dim); text-align: center; vertical-align: bottom; }
.matrix td { padding: 6px 4px; text-align: center; border-top: 1px solid var(--line); }
.matrix td.w { text-align: left; white-space: nowrap; }
.matrix td.w b { font: 400 8px/1 var(--pix); color: var(--dim); margin-right: 6px; }
.matrix td i { display: inline-block; width: 10px; height: 10px; background: var(--accent); }
.matrix tfoot td { color: var(--dim); border-top: 2px solid var(--ink); }
.s-strip .ticks { position: relative; height: 16px; margin: 0 6.5em 4px 9.5em; font: 400 12px/1 var(--pixel); color: var(--dim); -webkit-font-smoothing: none; }
.s-strip .ticks span { position: absolute; top: 0; padding-left: 4px; border-left: 1px solid var(--line); }
.strips { list-style: none; display: grid; gap: 4px; }
.strips li { display: grid; grid-template-columns: 9.5em 1fr 6.5em; align-items: center; font: 400 12px/1 var(--pixel); -webkit-font-smoothing: none; }
.strips .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strips .lab b { font: 400 8px/1 var(--pix); color: var(--dim); margin-right: 6px; }
.strips .track { position: relative; height: 22px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%); border-top: 1px solid var(--line); }
.strips .strip { position: absolute; top: 3px; height: 16px; width: 12px; margin-left: -6px; background: var(--c); }
.strips .strip em { position: absolute; left: 16px; top: 2px; font: 400 12px/1 var(--pixel); font-style: normal; color: var(--dim); white-space: nowrap; }
.strips .v { position: relative; text-align: right; padding-left: 8px; }
.strips .v .bar { position: absolute; left: 8px; bottom: -4px; height: 2px; max-width: calc(100% - 8px); background: var(--c); }
.undated { margin-top: 8px; font: 400 12px/1 var(--pixel); color: var(--dim); -webkit-font-smoothing: none; }
.scatter { display: block; max-width: 100%; }
.scatter .grid line { stroke: var(--line); stroke-width: 1; }
.scatter text { font: 400 12px var(--pixel); fill: var(--dim); -webkit-font-smoothing: none; }
.scatter text.p { fill: var(--ink); }
.scatter text.ax { fill: var(--ink); }
.s-mouth .howto { margin-top: 6px; font-size: 12px; color: var(--dim); }
.contact { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.contact li { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px; }
.contact li > span { font: 400 12px/1 var(--pixel); color: var(--dim); -webkit-font-smoothing: none; }
.contact a, .contact button { justify-self: start; font-size: 14px; text-decoration: none; text-align: left; }
.contact button span { margin-left: 6px; font: 400 12px/1 var(--pixel); color: var(--accent); }
.studio { margin-top: 12px; font-size: 13px; color: var(--dim); }
.studio a { color: var(--ink); }
.sheet-acts { margin-top: 14px; text-align: right; }
.sheet-acts button { padding: 9px 14px; font: 400 12px/1 var(--pixel); background: var(--ink); color: var(--page); border-radius: 2px; box-shadow: 3px 3px 0 var(--accent); }

/* end credits: rolls up, holds on the contact card */
.credits { position: fixed; inset: 0; z-index: 8; display: none; overflow: hidden; background: rgba(8, 8, 8, 0.93); color: #f2f0ea; cursor: pointer; }
.credits.on { display: block; }
.credits .skip { position: absolute; right: var(--pad); bottom: 20px; font: 400 12px/1 var(--pixel); color: rgba(242, 240, 234, 0.45); }
.roll-in { position: absolute; left: 50%; top: 0; width: min(560px, 90vw); transform: translate(-50%, var(--from, 100vh)); text-align: center; cursor: auto; }
.roll-in.go { animation: roll var(--dur, 20s) linear forwards; }
@keyframes roll { from { transform: translate(-50%, var(--from)); } to { transform: translate(-50%, var(--to)); } }
.roll-in h2 { font: 400 24px/1.3 var(--pixel); letter-spacing: 0.04em; margin-bottom: 48px; }
.roll-in section { margin: 0 0 40px; }
.roll-in h4 { margin-bottom: 12px; font: 400 12px/1 var(--pixel); letter-spacing: 0.12em; color: #e0b25a; text-transform: uppercase; }
.roll-in p { margin: 6px 0; font-size: 15px; line-height: 1.5; }
.roll-in p span { display: block; font: 400 12px/1.4 var(--pixel); color: rgba(242, 240, 234, 0.55); }
.roll-in p b { font: 400 8px/1 var(--pix); color: #e0b25a; margin-right: 6px; }
.roll-in .big { font: 700 32px/1.1 var(--pix); }
.roll-in .end { padding: 24px; border: 1px solid rgba(242, 240, 234, 0.25); }
.roll-in .end section { margin-bottom: 16px; }
.roll-in .contact { text-align: left; }
.roll-in .contact li { border-color: rgba(242, 240, 234, 0.2); }
.roll-in .contact li > span { color: rgba(242, 240, 234, 0.55); }
.roll-in .studio { color: rgba(242, 240, 234, 0.6); }
.roll-in .studio a { color: #f2f0ea; }
.roll-in .thanks { margin-top: 18px; font: 400 12px/1 var(--pixel); color: #e0b25a; }
.roll-in, .sheet .paper { -webkit-font-smoothing: antialiased; }
.roll-in h2, .roll-in h4, .roll-in .big, .roll-in p span, .roll-in p b, .roll-in .thanks { -webkit-font-smoothing: none; }
@media (max-width: 760px) {
  .sheet { padding: 0; }
  .sheet .paper { min-height: 100%; padding: 56px 16px 20px; border: 0; box-shadow: none; }
  .sheet-close { right: 12px; top: 12px; }
  .sheet .cols { grid-template-columns: 1fr; grid-template-areas: "note" "kit" "skills" "mouth" "strip" "contact"; }
  .sheet header { grid-template-columns: 1fr; }
  .strips li { grid-template-columns: 6.5em 1fr 4.8em; }
  .s-strip .ticks { margin: 0 4.8em 4px 6.5em; }
  .strips .strip em { display: none; }
}
.card .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.card .acts > * { padding: 7px 10px; font: 400 12px/1 var(--pixel); border: 1px solid var(--ink); border-radius: 2px; text-decoration: none; }
.card #c-play { background: var(--ink); color: var(--page); }

.index { position: fixed; z-index: 3; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.index ol { display: flex; gap: 4px; list-style: none; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.index li { padding: 7px 10px; white-space: nowrap; cursor: pointer; border-radius: 2px; font: 400 12px/1 var(--pixel); }
.index li .n { font: 400 8px/1 var(--pix); color: var(--dim); margin-right: 6px; }
.index li.on { background: var(--ink); color: var(--page); }
.index li.on .n { color: var(--accent); }
.hint { position: fixed; z-index: 2; left: var(--pad); bottom: 24px; font: 400 12px/1 var(--pixel); color: var(--dim); }

.film { position: fixed; inset: 0; z-index: 6; background: #000; opacity: 0; visibility: hidden; }
.film.on { visibility: visible; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.film .close { position: absolute; left: var(--pad); top: var(--pad); padding: 8px 12px; font: 400 12px/1 var(--pixel); color: #f2f0ea; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; }
.film .exit { position: absolute; right: var(--pad); top: calc(var(--pad) + 8px); font: 400 12px/1 var(--pixel); color: rgba(255, 255, 255, 0.55); }

.how-panel { position: fixed; inset: 0; z-index: 7; display: none; place-items: center; background: rgba(0, 0, 0, 0.35); }
.how-panel.on { display: grid; }
.how-panel > div { width: min(520px, 92vw); padding: 22px 24px; background: var(--page); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--accent); }
.how-panel h3 { font: 400 24px/1 var(--pixel); }
.how-panel ol { margin: 14px 0 16px 18px; display: grid; gap: 8px; }
.how-panel button { padding: 7px 12px; font: 400 12px/1 var(--pixel); border: 1px solid var(--ink); }

.veil { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: var(--page); font: 400 8px/1 var(--pix); letter-spacing: 0.2em; transition: opacity 0.5s; }
.veil.off { opacity: 0; pointer-events: none; }
html.capture * { transition: none !important; }

@media (max-width: 760px) {
  .title h1 { font-size: 30px; }
  .title { max-width: 60vw; }
  .slate { top: auto; bottom: 64px; max-width: calc(100vw - 24px); }
  #shot-kind { display: none; }
  .rec { right: 62px; top: 26px; bottom: auto; }
  .rec #focal, .rec #lut, .rec #rec-s { display: none; }
  .vf i { width: 16px; height: 16px; }
  .rail { top: 60px; bottom: auto; right: 8px; width: 196px; padding: 10px; font-size: 11px; max-height: calc(100vh - 200px); overflow: auto; display: none; }
  .rail.open { display: block; }
  .rail-toggle { display: grid !important; }
  .card { bottom: 108px; width: calc(100vw - 2 * var(--pad)); }
  .title { max-width: 52vw; }
  .hint { display: none; }
}