@font-face{font-family:CapCutFont0;src:url('/static/fonts/Inter-Bold.otf');font-weight:100 900;font-display:block}
:root{color-scheme:dark;--canvas:#263027;--olive:#65765e;--ink:#f3f5ed;--muted:#bdc9b8;--line:#71816b}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;min-height:100dvh}
main{max-width:1360px;margin:auto;padding:calc(24px + env(safe-area-inset-top)) 32px calc(32px + env(safe-area-inset-bottom))}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:20px}
.brand{font-weight:650}.tag{font-size:13px;color:var(--muted)}
.intro{padding:30px 0 22px}h1{font-size:clamp(24px,3vw,42px);letter-spacing:-.035em;margin:0 0 8px}.intro p,.hint{color:var(--muted);font-size:15px;line-height:1.5;margin:0}
.player{overflow:hidden;border-radius:20px;background:#121812;border:1px solid var(--line)}
.screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#354332,#20291f)}
.canvas{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:top left;background:#000}
video,.overlays{position:absolute;inset:0;width:1920px;height:1080px;object-fit:fill}
.overlays{pointer-events:none;overflow:hidden}
.placement{position:absolute;transform-origin:center}
.copy{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;font-synthesis:none;margin:0;background:transparent!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important}
.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:rgba(32,42,31,.7);backdrop-filter:blur(10px)}
.gate p{max-width:420px;font-size:clamp(16px,2.4vw,24px);line-height:1.4;margin:0}.lock{font-size:34px;color:#dce3d4}
.button,button{border:1px solid #a5b39b;background:var(--olive);border-radius:12px;color:#fff;font:inherit;text-decoration:none;cursor:pointer;padding:12px 20px}
.controls{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#263027}.controls button{padding:8px 12px;white-space:nowrap}
.scrubber{flex:1;min-width:40px;display:flex;align-items:center}input[type=range]{width:100%;accent-color:#dce3d4;cursor:pointer}#clock{font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.hint{margin-top:14px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
[hidden]{display:none!important}:focus-visible{outline:3px solid #e9eddd;outline-offset:4px}
.player:fullscreen{border:0;border-radius:0;background:#000;display:flex;flex-direction:column;justify-content:center}.player:fullscreen .screen{width:100%;max-height:calc(100dvh - 56px);flex:none}.player:fullscreen .controls{flex:none}
@media(max-width:640px){main{padding:calc(18px + env(safe-area-inset-top)) 12px 24px}.tag{font-size:11px}.intro{padding-top:24px}.intro p{font-size:14px}.player{border-radius:14px}.controls{gap:8px;padding:10px}.controls button{font-size:12px;padding:9px}#clock{font-size:10px}.gate{gap:10px;padding:16px}.lock{font-size:22px}.button{font-size:13px;padding:10px 14px}.hint{font-size:12px}}
@media(orientation:landscape) and (max-height:520px){main{padding:8px 12px}.intro,header,.hint{display:none}.player{max-width:calc((100dvh - 68px)*16/9);margin:auto}}