:root{--bg:#070a18;--panel:rgba(12,16,38,.86);--line:rgba(255,255,255,.14);--ink:#f3f5ff;--mute:#a4abcb;--cyan:#6ee7f9;--pink:#ff5fa2;--blue:#3a6bff;--ok:#5ef2b0;--warn:#ffc857;--bad:#ff6b6b;
--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overscroll-behavior:none}
[hidden]{display:none!important}
.page{max-width:560px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 20px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}
.page.narrow{max-width:400px;min-height:100dvh;justify-content:center}
h1{font-size:clamp(26px,7.4vw,38px);line-height:1.12;letter-spacing:-.02em;margin:0;font-weight:750}
.lead{color:var(--mute);margin:0}.stack{display:flex;flex-direction:column;gap:14px}
.eyebrow{font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin:0}
.field{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--mute)}
textarea,input[type=password]{width:100%;background:#0f1430;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px;font:16px/1.45 var(--sans);resize:vertical}
textarea:focus,input:focus{outline:2px solid var(--blue);outline-offset:1px}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--mute);font-size:15px;line-height:1.35}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);flex:none}
.btn{min-height:54px;border:0;border-radius:16px;font:650 17px/1.2 var(--sans);padding:12px 18px;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.1)}
.btn.primary{background:linear-gradient(100deg,var(--blue),var(--pink));color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn:disabled{opacity:.55}
.btn.rec{background:var(--bad);color:#fff}
.err{color:var(--bad);margin:0}.note{color:var(--warn);margin:0}
.shots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.shots li{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.shots b{font-size:15px}.shots em{font-style:normal;color:var(--mute);font-size:15px}
.shots small{font:600 11px/1.3 var(--mono);color:var(--cyan);letter-spacing:.06em;text-transform:uppercase}

.orb{width:112px;height:112px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#ffd2e6 18%,var(--pink) 38%,var(--blue) 66%,transparent 72%);box-shadow:0 0 60px rgba(255,95,162,.5);animation:breathe 3.6s ease-in-out infinite}
.orb.small{width:52px;height:52px;flex:none;box-shadow:0 0 24px rgba(255,95,162,.55)}
.orb.speaking{animation-duration:.8s}.orb.thinking{animation:spin 1.4s linear infinite;background:conic-gradient(from 0deg,var(--blue),var(--pink),var(--cyan),var(--blue))}
@keyframes breathe{50%{transform:scale(1.1)}}@keyframes spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}

#shoot{position:fixed;inset:0;background:#000;overflow:hidden}
#cam,#guide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#cam.mirror{transform:scaleX(-1)}#guide{pointer-events:none}
.hud{position:absolute;inset:0 0 auto;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.dots{display:flex;gap:5px}.dots i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.dots i.done{background:var(--ok)}.dots i.now{background:#fff}
.hudRow{display:flex;gap:8px;align-items:center}.hudRow .tag{margin-right:auto}
.tag{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cyan)}
.rec{font:700 13px/1 var(--mono);color:#fff;background:var(--bad);padding:6px 9px;border-radius:999px}
.icon{min-height:36px;min-width:44px;padding:0 11px;border-radius:10px;border:1px solid var(--line);background:rgba(0,0,0,.4);color:#fff;font:600 13px var(--sans)}
.icon[aria-pressed=true]{opacity:.55;text-decoration:line-through}
.overlayLine{margin:6px 0 0;text-align:center;font:750 clamp(19px,5.4vw,26px)/1.2 var(--sans);text-shadow:0 2px 12px rgba(0,0,0,.75)}
.count{position:absolute;inset:0;display:grid;place-items:center;font:800 120px/1 var(--sans);text-shadow:0 4px 30px rgba(0,0,0,.8);pointer-events:none}
.sheet{position:absolute;inset:auto 0 0;max-height:62dvh;overflow:auto;padding:14px 14px calc(14px + env(safe-area-inset-bottom));background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:20px 20px 0 0;display:flex;flex-direction:column;gap:10px}
.directorRow{display:flex;gap:12px;align-items:center}
.say{margin:3px 0 0;font:600 17px/1.32 var(--sans)}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:6px}
.chip{border:1px solid var(--line);border-radius:10px;padding:6px 8px;min-width:0}
.chip small{display:block;font:600 10px/1.2 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.chip b{display:block;font:650 13px/1.2 var(--sans);margin-top:2px;color:var(--ok)}
.chip.warn b{color:var(--warn)}.chip.bad b{color:var(--bad)}
.actions{display:flex;gap:8px}.actions .btn{flex:1;min-height:50px;font-size:16px}

.formats{border:0;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.formats legend{font-size:15px;color:var(--mute);padding:0;margin-bottom:8px}
.formats label{cursor:pointer;display:block}
.formats input{position:absolute;opacity:0}
.formats span{display:flex;flex-direction:column;gap:3px;height:100%;padding:12px;border:1px solid var(--line);border-radius:14px}
.formats input:checked+span{border-color:var(--cyan);background:rgba(110,231,249,.09)}
.formats input:focus-visible+span{outline:2px solid var(--blue)}
.formats b{font-size:16px}.formats small{color:var(--mute);font-size:13px;line-height:1.3}
.shape{display:block;height:34px;margin-bottom:6px}
.shape::before{content:"";display:block;border:2px solid var(--cyan);border-radius:4px;height:34px;width:20px}
.shape.h::before{width:48px;height:27px;margin-top:7px}
@media (orientation:landscape) and (max-height:520px){
  .sheet{inset:0 0 0 auto;width:min(44vw,340px);max-height:none;border-radius:20px 0 0 20px;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) 12px;justify-content:flex-end}
  .hud{right:min(44vw,340px)}
  #cam,#guide{width:calc(100vw - min(44vw,340px));object-fit:contain}
  .say{font-size:15px}.overlayLine{font-size:18px;margin-top:0}
  .orb.small{width:38px;height:38px}
  .actions .btn{min-height:44px;font-size:15px}
}
.act[data-format=horizontal] .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.act[data-format=horizontal] .clip video{aspect-ratio:16/9}
.act{margin:8px 0}.act h2{font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin:0 0 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.clip{border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.clip video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;display:block}
.clip p{margin:0;padding:8px 10px;font-size:14px;line-height:1.3;flex:1}
.clip .btn{min-height:42px;border-radius:0;font-size:14px}