:root { color-scheme: dark; --ink:#eaf7f5; --muted:#93b3bb; --accent:#57d9cb; --panel:#0c2635; --line:rgba(170,231,224,.16); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 15% 10%,#154a5a 0,transparent 32rem),linear-gradient(145deg,#061722,#091f30 65%,#0b2933); }
button,a,input,select,textarea { font:inherit; }
button { color:inherit; }
main { width:min(1220px,calc(100% - 2rem)); margin:auto; padding:1.2rem 0 2rem; }
.lab-header { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; margin-bottom:1rem; }
.lab-header a { color:var(--accent); text-decoration:none; font-weight:750; }
.lab-header p,.control-heading p { margin:0; color:var(--accent); font-size:.66rem; font-weight:850; letter-spacing:.16em; }
.lab-header h1,.control-heading h2 { margin:.18rem 0; font-size:clamp(1.25rem,3vw,2rem); }
.lab-header span { color:var(--muted); font-size:.74rem; }
.privacy-pill { padding:.45rem .7rem; border:1px solid rgba(87,217,203,.3); border-radius:99px; background:rgba(87,217,203,.08); color:var(--accent)!important; font-weight:800; }
.lab-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(320px,.85fr); gap:1rem; align-items:start; }
.stage-card,.effects-card { padding:.85rem; border:1px solid var(--line); border-radius:1.25rem; background:rgba(8,31,44,.82); box-shadow:0 22px 60px rgba(0,0,0,.22); backdrop-filter:blur(18px); }
.stage { position:relative; overflow:hidden; aspect-ratio:16/10; border-radius:.9rem; background:#02090e; }
.stage video,.stage canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.stage canvas { z-index:2; }
.stage.is-mirrored video,.stage.is-mirrored canvas { transform:scaleX(-1); }
#cameraPlaceholder { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.45rem; text-align:center; color:var(--muted); }
#cameraPlaceholder i { width:4rem; height:4rem; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--accent); font-size:1.7rem; font-style:normal; }
#cameraPlaceholder strong { color:var(--ink); font-size:1.1rem; }
.stage-top { position:absolute; z-index:3; inset:.7rem .7rem auto; display:flex; justify-content:space-between; pointer-events:none; }
.stage-top span { padding:.35rem .55rem; border-radius:99px; background:rgba(2,12,18,.68); color:#d8f7f1; font-size:.64rem; font-weight:850; letter-spacing:.08em; backdrop-filter:blur(8px); }
.stage-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.7rem; }
.stage-actions button,.control-heading button,.category-tabs button { min-height:2.6rem; padding:.55rem .8rem; border:1px solid var(--line); border-radius:.7rem; background:#102f40; cursor:pointer; }
.stage-actions .primary { border-color:transparent; background:var(--accent); color:#052028; font-weight:850; }
button:disabled { opacity:.42; cursor:not-allowed; }
#status { margin:.65rem .2rem 0; color:var(--muted); font-size:.7rem; }
#status.is-error { padding:.65rem .75rem; border:1px solid rgba(255,190,95,.35); border-radius:.7rem; color:#ffe0a3; background:rgba(255,153,51,.09); line-height:1.45; }
.control-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.control-heading button { min-height:2.2rem; padding:.35rem .65rem; color:var(--accent); }
.category-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; margin:.8rem 0; }
.category-tabs button { min-height:2.3rem; padding:.4rem; font-size:.66rem; }
.category-tabs button[aria-pressed="true"] { border-color:var(--accent); background:rgba(87,217,203,.15); color:var(--accent); }
.custom-mask-studio { margin:0 0 .75rem; border:1px solid rgba(87,217,203,.2); border-radius:.8rem; background:rgba(87,217,203,.055); }
.custom-mask-studio summary { padding:.65rem .75rem; color:var(--accent); font-size:.7rem; font-weight:850; cursor:pointer; }
.custom-mask-studio>div { padding:0 .75rem .75rem; display:grid; gap:.55rem; }
.custom-mask-studio label { display:grid; gap:.25rem; color:var(--muted); font-size:.62rem; }
.custom-mask-studio input[type="text"],.custom-mask-studio input[type="file"],.custom-mask-studio select,.custom-mask-studio textarea { width:100%; min-width:0; padding:.55rem; border:1px solid var(--line); border-radius:.55rem; color:var(--ink); background:#0b2230; }
.custom-mask-studio textarea { resize:vertical; line-height:1.4; }
.voice-instruction { display:grid; grid-template-columns:1fr auto; gap:.55rem; align-items:center; }
.voice-instruction span { color:var(--muted); font-size:.58rem; }
.custom-mask-studio button.secondary { border:1px solid rgba(87,217,203,.32); color:var(--accent); background:#102f40; }
.custom-mask-studio button.is-recording { border-color:#ff7088; color:#ff9aae; box-shadow:0 0 0 3px rgba(255,60,100,.12); }
.custom-mask-studio .custom-mask-rights { grid-template-columns:auto 1fr; align-items:start; line-height:1.35; }
.custom-mask-studio button { min-height:2.45rem; border:0; border-radius:.65rem; color:#052028; background:var(--accent); font-weight:850; cursor:pointer; }
.custom-mask-studio button:disabled { opacity:.4; cursor:not-allowed; }
.custom-mask-studio small { color:var(--muted); font-size:.58rem; line-height:1.35; }
.effect-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; max-height:42vh; overflow:auto; padding-right:.15rem; }
.effect-option { min-height:4.5rem; padding:.65rem; display:grid; grid-template-columns:2.6rem 1fr; gap:.55rem; align-items:center; text-align:left; border:1px solid var(--line); border-radius:.8rem; background:#0d2a39; cursor:pointer; }
.effect-option[aria-pressed="true"] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.effect-option i { width:2.6rem; height:2.6rem; display:grid; place-items:center; border-radius:.7rem; background:linear-gradient(145deg,#1b5360,#162c4b); background-size:cover; background-position:center; color:#a9fff3; font-size:.72rem; font-weight:900; letter-spacing:-.04em; font-style:normal; box-shadow:inset 0 0 18px rgba(87,217,203,.18); }
.effect-option span { display:grid; gap:.1rem; }
.effect-option b { font-size:.72rem; }
.effect-option small { color:var(--muted); font-size:.6rem; line-height:1.25; }
.intensity-control { display:grid; gap:.5rem; margin-top:.85rem; }
.intensity-control span { display:flex; justify-content:space-between; color:var(--muted); font-size:.7rem; }
.intensity-control b { color:var(--ink); }
.intensity-control input { width:100%; accent-color:var(--accent); }
.mask-calibration { margin-top:.75rem; padding:.7rem; border:1px solid rgba(87,217,203,.2); border-radius:.8rem; background:rgba(87,217,203,.055); }
.mask-calibration header,.mask-calibration label>span { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.mask-calibration header { margin-bottom:.55rem; color:var(--accent); font-size:.7rem; }
.mask-calibration header button { padding:.25rem .45rem; border:1px solid var(--line); border-radius:.5rem; color:var(--muted); background:#102f40; font-size:.58rem; cursor:pointer; }
.mask-calibration label { display:grid; gap:.25rem; margin-top:.45rem; color:var(--muted); font-size:.65rem; }
.mask-calibration input { width:100%; accent-color:var(--accent); }
.lab-note { margin:.8rem 0 0; padding:.65rem; border-radius:.7rem; background:rgba(87,217,203,.07); color:var(--muted); font-size:.65rem; line-height:1.45; }
.lab-note strong { color:var(--accent); }
@media (max-width:850px) { main{width:min(100% - 1rem,700px)} .lab-layout{grid-template-columns:1fr}.lab-header{grid-template-columns:1fr auto}.lab-header>a{grid-column:1/-1}.effect-grid{max-height:none}.stage{aspect-ratio:3/4}.category-tabs{grid-template-columns:repeat(2,1fr)} }