:root { --bg:#eaf0f2; --surface:#fff; --surface-2:#f2f6f7; --ink:#14262d; --ink-2:#4a5d66; --line:#d3dde1; --accent:#0b7a85; --accent-ink:#fff; --danger:#b3261e; --warn-bg:#fdf0d5; --warn:#7a4b00; --skin:#DCA67E; --hair:#1f2d33; --shirt:#0b7a85; }
@media (prefers-color-scheme: dark){ :root{ --bg:#0f1a1e; --surface:#16252b; --surface-2:#1c2e35; --ink:#e8f1f3; --ink-2:#a3b6bd; --line:#2c424a; --accent:#3cc0cd; --accent-ink:#06242a; --danger:#ff8a80; --warn-bg:#3a2d10; --warn:#f2c36b; --shirt:#1f8f9b; } }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1080px;margin:0 auto;padding:20px 16px 48px} h1,h2,h3{margin:0;line-height:1.2} h1{font-size:2rem} h2{font-size:1.3rem}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px} .brand{font-weight:700}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px} .muted{color:var(--ink-2)} .stack>*+*{margin-top:14px}
button{font:inherit;font-weight:600;border:0;border-radius:10px;padding:11px 18px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed} button.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)} button.danger{background:var(--danger);color:#fff}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
input,textarea,select{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;width:100%}
.grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start} @media(max-width:820px){.grid{grid-template-columns:1fr}}
.stage{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;position:relative;padding:18px 12px 0;overflow:hidden}
.stage svg{display:block;width:100%;max-width:280px;margin:0 auto;height:auto} .tag{position:absolute;left:12px;top:12px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:3px 12px;font-size:.82rem;font-weight:600}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.08)}}
.mouth{transform-box:fill-box;transform-origin:center;transform:scaleY(.2);transition:transform .09s linear;opacity:0}.speaking .mouth{opacity:1}.speaking .smile{opacity:0}
.cap{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px} .cap small{display:block;color:var(--ink-2);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
video.me{width:100%;aspect-ratio:4/3;background:#000;border-radius:12px;object-fit:cover;transform:scaleX(-1);display:block}
.meter{height:10px;background:var(--surface-2);border-radius:6px;overflow:hidden;border:1px solid var(--line)} .meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .06s}
.rec{display:inline-flex;gap:8px;align-items:center;font-weight:600;color:var(--danger)} .rec::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--danger);animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.25}}
.clock{font:600 2.2rem ui-monospace,Menlo,Consolas,monospace} .progress{display:flex;gap:6px;margin-bottom:12px}.progress i{flex:1;height:6px;border-radius:3px;background:var(--line)}.progress i.done{background:var(--accent)}.progress i.now{background:var(--ink-2)}
.note{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:10px 14px;font-size:.95rem} .err{color:var(--danger);font-weight:600}
ul.clean{margin:8px 0;padding-left:20px} .check{display:flex;gap:10px;align-items:flex-start;cursor:pointer} .check input{width:20px;height:20px;margin-top:3px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} [hidden]{display:none!important}
.tabs button{background:var(--surface-2);color:var(--ink)} table{width:100%;border-collapse:collapse} td,th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
.q-rev{border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px;background:var(--surface)} video.rv{width:100%;max-width:560px;border-radius:10px;background:#000}
.tr{border-left:3px solid var(--line);padding:6px 12px;color:var(--ink-2);margin:10px 0}
#ph{display:block;width:100%;max-width:280px;aspect-ratio:1;object-fit:cover;object-position:center top;border-radius:50%;margin:6px auto 16px;border:4px solid var(--accent)}
.speaking #ph{animation:ring 1.2s infinite}@keyframes ring{0%{box-shadow:0 0 0 0 rgba(11,122,133,.55)}100%{box-shadow:0 0 0 20px rgba(11,122,133,0)}}
@media(prefers-reduced-motion:reduce){.eyes,.rec::before{animation:none}.mouth{transition:none}}