:root{color:#e7eef6;background:#070a0f;font-family:Segoe UI,PingFang SC,Noto Sans SC,Microsoft YaHei,sans-serif;line-height:1.5;--bg: #070a0f;--panel: #101820;--stage: #0b1118;--line: rgba(125, 211, 252, .28);--line-strong: rgba(34, 211, 238, .72);--text: #e7eef6;--muted: #b7c4d4;--faint: #8ea0b5;--accent: #22d3ee;--accent-strong: #67e8f9;--ink: #041016;--danger: #fecdd3;font-synthesis:none;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(900px 420px at 8% -10%,rgba(34,211,238,.14),transparent 55%),radial-gradient(700px 380px at 100% 0%,rgba(56,189,248,.08),transparent 50%),var(--bg)}button,input,summary{font:inherit;font-size:16px}button,.file-link{touch-action:manipulation}h1,h2,p{margin:0}:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}.page{width:min(1180px,100%);margin:0 auto;padding:16px 16px calc(108px + env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;margin-bottom:14px}.brand{display:flex;align-items:center;gap:12px;min-width:0}.logo{display:block;height:46px;width:auto;flex:none}.brand-copy{min-width:0;padding-top:2px}h1{color:#f5f8fc;font-family:PingFang SC,Hiragino Sans GB,Noto Sans SC,Microsoft YaHei,sans-serif;font-size:22px;font-weight:700;letter-spacing:.14em;line-height:1.2}.studio{display:flex;flex-direction:column;gap:14px}.side{display:contents}.stage{position:relative;width:100%;aspect-ratio:3 / 4;max-height:68dvh;min-height:280px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--stage);box-shadow:0 0 0 1px #080c12cc,0 24px 60px #00000059,inset 0 0 80px #22d3ee0d}.stage video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:#05080c}.stage-empty{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:28px 22px 72px;text-align:center;background:linear-gradient(rgba(34,211,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.05) 1px,transparent 1px),radial-gradient(circle at 50% 38%,rgba(34,211,238,.16),transparent 42%),#0b1118;background-size:28px 28px,28px 28px,auto,auto}.stage-empty h2{max-width:16em;font-size:22px;font-weight:680;letter-spacing:-.02em;line-height:1.3}.stage-empty p,.hint,.meter-sub,.stage-tip{color:var(--muted);font-size:14px}.stage-tip{max-width:18em}.reticle{position:relative;width:112px;height:112px;margin-bottom:6px}.reticle span{position:absolute;width:22px;height:22px;border:2px solid var(--accent);filter:drop-shadow(0 0 6px rgba(34,211,238,.65))}.reticle span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}.reticle span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}.reticle span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}.reticle span:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}.scan{position:absolute;left:14px;right:14px;height:2px;background:linear-gradient(90deg,transparent,var(--accent-strong),transparent);animation:scan 3.6s ease-in-out infinite}@keyframes scan{0%,to{top:22%;opacity:0}18%{opacity:1}50%{top:74%;opacity:1}82%{opacity:0}}.stage-meta{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;align-items:end;padding:28px 14px 12px;background:linear-gradient(180deg,transparent,rgba(5,8,12,.88));pointer-events:none}.stage.is-replay .stage-meta{top:0;bottom:auto;align-items:start;padding-top:12px;background:linear-gradient(180deg,rgba(5,8,12,.88),transparent)}.stage-status,.stage-clock{font-size:13px}.stage-clock{flex:none;color:var(--accent-strong);font-variant-numeric:tabular-nums}.danmaku{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:28px;pointer-events:none}.danmaku-line{margin:0;padding:14px 22px;border-radius:999px;border:1px solid rgba(103,232,249,.75);background:#050a10d6;color:#f5f8fc;font-family:PingFang SC,Hiragino Sans GB,Noto Sans SC,Microsoft YaHei,sans-serif;font-size:22px;font-weight:700;letter-spacing:.14em;line-height:1.35;text-align:center;text-shadow:0 0 16px rgba(34,211,238,.4);box-shadow:0 12px 32px #00000061,0 0 18px #22d3ee33;animation:danmaku-in .4s ease,danmaku-breathe 1.8s ease-in-out .4s infinite}.danmaku-line.is-leaving{animation:danmaku-out .52s ease forwards}@keyframes danmaku-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes danmaku-breathe{0%,to{box-shadow:0 12px 32px #00000061,0 0 10px #22d3ee29}50%{box-shadow:0 12px 32px #00000061,0 0 28px #22d3ee8c}}@keyframes danmaku-out{to{opacity:0;transform:translateY(-14px)}}@media(min-width:960px){.danmaku-line{padding:16px 28px;font-size:30px;letter-spacing:.16em}}@media(prefers-reduced-motion:reduce){.danmaku-line,.danmaku-line.is-leaving{animation:none}}.rec-pill{position:absolute;z-index:5;top:12px;left:12px;margin:0;padding:6px 10px 6px 22px;border-radius:999px;background:#05080cb8;border:1px solid rgba(251,113,133,.7);color:#ffe4e6;font-size:13px}.rec-pill:before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;border-radius:50%;background:#fb7185;transform:translateY(-50%);box-shadow:0 0 8px #fb7185}.panel,.dock{background:#101820eb;border:1px solid var(--line);border-radius:20px}.panel{display:flex;flex-direction:column;gap:12px;padding:16px}.panel>*{flex-shrink:0}.meter{display:flex;justify-content:space-between;align-items:end;gap:12px}.meter-label{color:var(--faint);font-size:13px;letter-spacing:.04em}.meter-value{color:var(--accent-strong);font-size:32px;font-weight:680;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(34,211,238,.28)}.meter-value span{font-size:14px;font-weight:600}.meter-track{height:4px;min-height:4px;border-radius:999px;background:#7dd3fc1f;overflow:hidden}.meter-track span{display:block;height:100%;background:linear-gradient(90deg,#0891b2,var(--accent-strong));box-shadow:0 0 12px #22d3eea6}.error{padding:12px 14px;color:var(--danger);background:#fb71851a;border:1px solid rgba(251,113,133,.4);border-radius:12px}.dropzone{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center;min-height:112px;padding:12px;border:1px dashed rgba(125,211,252,.45);border-radius:16px;background:#081018a6}.dropzone.is-over{border-color:var(--accent-strong);box-shadow:inset 0 0 0 1px var(--accent),0 0 24px #22d3ee2e}.dropzone img,.drop-placeholder{width:76px;height:96px;border-radius:12px;object-fit:cover;background:#0a121a}.drop-placeholder{border:1px solid rgba(125,211,252,.2);background:linear-gradient(rgba(34,211,238,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.08) 1px,transparent 1px),#0a121a;background-size:12px 12px,12px 12px,auto}.drop-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}.drop-copy h2,.record-block h2{font-size:16px;font-weight:680}.drop-copy p{color:var(--muted);font-size:13px;overflow-wrap:anywhere}.file-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;color:var(--accent-strong);cursor:pointer}.file-link input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.url-block{border-top:1px solid rgba(125,211,252,.16);padding-top:8px}.url-block summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--muted);list-style:none}.url-block summary::-webkit-details-marker{display:none}.url-block summary:before{content:"▸";margin-right:8px;color:var(--accent)}.url-block[open] summary:before{content:"▾"}.url-block form{display:flex;gap:8px;padding-bottom:4px}.url-block input,.duration input{min-height:48px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#0a121a;color:var(--text)}.url-block input{flex:1;min-width:0}.url-block button{flex:none;min-width:84px}.duration{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted)}.duration input{width:112px;text-align:right;font-variant-numeric:tabular-nums}.duration input:disabled,button:disabled{cursor:not-allowed;opacity:.42}.record-block{display:flex;flex-direction:column;gap:8px;padding-top:4px;border-top:1px solid rgba(125,211,252,.16)}.record-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.record-actions button,.record-actions .file-link-block{min-height:44px}.file-link-block{grid-column:1 / -1;border:1px solid var(--line-strong);border-radius:14px;color:var(--text)}button,.file-link-block{min-height:48px}button{display:inline-flex;justify-content:center;align-items:center;padding:12px 16px;border-radius:14px;border:1px solid #a5f3fc;background:linear-gradient(180deg,#67e8f9,#06b6d4);color:var(--ink);font-weight:700;cursor:pointer;box-shadow:0 0 22px #22d3ee38}button.secondary,.dock button.secondary{background:transparent;color:var(--text);border-color:var(--line-strong);box-shadow:none;font-weight:620}.dock{position:fixed;z-index:20;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:0;border-left:0;border-right:0;border-bottom:0;background:#070a0feb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -16px 40px #00000059}.dock button{min-height:52px}@media(max-height:520px){.stage{aspect-ratio:16 / 10;max-height:42dvh;min-height:160px}}@media(min-width:960px){.page{padding:20px 24px 16px}.topbar{margin-bottom:18px}.brand{gap:16px}.logo{height:64px}h1{font-size:30px;letter-spacing:.18em}.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);grid-template-areas:"stage side";align-items:stretch;gap:18px;height:min(820px,calc(100dvh - 120px));min-height:min(560px,calc(100dvh - 140px))}.stage{grid-area:stage;height:auto;max-height:none;min-height:0;aspect-ratio:auto}.side{display:flex;flex-direction:column;grid-area:side;min-height:0;max-height:100%}.panel{flex:1 1 auto;min-height:0;overflow:auto;border-radius:20px 20px 0 0;border-bottom:0;gap:8px;padding:14px 16px 8px}.url-block summary,.duration input,.record-actions button,.record-actions .file-link-block{min-height:40px}.dock{position:static;flex:none;border-radius:0 0 20px 20px;border:1px solid var(--line);border-top:1px solid rgba(125,211,252,.16);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px 16px 16px;margin-top:-1px;background:#101820eb}}@media(prefers-reduced-motion:reduce){.scan{animation:none;top:48%;opacity:.8}}@media(max-width:380px){.logo{height:40px}h1{font-size:18px;letter-spacing:.08em}.dropzone{grid-template-columns:72px minmax(0,1fr)}.dropzone img,.drop-placeholder{width:72px;height:92px}.dock{grid-template-columns:minmax(0,1fr) 88px}}