:root { color-scheme: light; --green:#176b46; --deep:#123d2e; --yellow:#f2cf4a; --muted:#53684f; --paper:#f3f7ee; --line:#d9e4d2; }
* { box-sizing:border-box; } body { margin:0; color:var(--deep); background:var(--paper); font:15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } [hidden] { display:none!important; }
button,input,select { font:inherit; } a { color:var(--green); } button,a,input,select,summary { -webkit-tap-highlight-color:transparent; } :focus-visible { outline:3px solid var(--green); outline-offset:4px; } button { min-height:46px; border:0; border-radius:9px; padding:11px 18px; background:var(--green); color:white; cursor:pointer; font-weight:700; } button:hover:not(:disabled) { background:var(--deep); } button:disabled { opacity:.45; cursor:not-allowed; } .subtle { background:#e8f0e0; color:var(--deep); } .subtle:hover:not(:disabled) { color:white; } .danger { background:#962f26; } .danger:hover:not(:disabled) { background:#70221c; }
.recovery { background:var(--yellow); color:var(--deep); } .recovery:hover:not(:disabled) { background:#d9b52f; }
label:not(.consent) { display:block; margin:18px 0 6px; color:var(--muted); font-weight:650; font-size:13px; } input:not([type=checkbox]),select { width:100%; min-height:46px; padding:10px 12px; border:1px solid #aabca3; border-radius:8px; color:var(--deep); background:white; } input[type=checkbox] { width:20px; height:20px; accent-color:var(--green); flex:0 0 20px; } .consent { display:flex; align-items:flex-start; gap:10px; padding:17px 0; font-size:13px; }
h1,h2,h3 { line-height:1.1; margin:0 0 14px; } h1 { font:700 clamp(34px,4vw,55px)/1.05 Georgia,serif; color:var(--green); } h2 { font:700 27px/1.1 Georgia,serif; } p { margin:0 0 14px; } .eyebrow { margin:20px 0 10px; color:var(--green); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; } .small { font-size:12px; color:var(--muted); line-height:1.75; } .text-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; font-weight:700; }
.brand { display:flex; align-items:center; gap:12px; color:var(--deep); text-decoration:none; font-weight:750; line-height:1.3; } .brand small { display:block; color:var(--muted); font-size:11px; font-weight:500; margin-top:3px; } .mark { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--green); color:var(--yellow); font:700 23px Georgia,serif; flex-shrink:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px clamp(18px,4vw,60px); background:white; border-bottom:1px solid var(--line); } .top-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:12px; } .workspace { max-width:1480px; padding:25px clamp(18px,4vw,60px); margin:auto; } .intro { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:12px; } .intro p:not(.eyebrow) { color:var(--muted); font-size:14px; } .badge { padding:8px 15px; border-radius:99px; background:#e0ecd5; font-size:12px; font-weight:750; white-space:nowrap; } .badge.is-live { color:white; background:#962f26; } .notice { padding:12px 16px; border:1px solid #e6d998; border-radius:9px; background:#fff8d9; color:var(--deep); font-size:13px; } .notice:empty { display:none; }
.studio-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr); gap:22px; align-items:start; } .preview-card,.settings-card,.mail-card { padding:23px; border:1px solid var(--line); border-radius:16px; background:white; min-width:0; } .card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .card-heading span { font-size:11px; color:var(--muted); } .video-stage { position:relative; display:grid; place-items:center; aspect-ratio:16/9; background:#103a2b; border-radius:12px; overflow:hidden; color:white; } #preview { width:100%; height:100%; object-fit:contain; position:absolute; } #preview-placeholder { position:relative; text-align:center; padding:20px; max-width:430px; } #preview-placeholder p { color:#d9e8d6; font-size:13px; margin:0; } .play-mark { display:block; color:var(--yellow); font-size:42px; line-height:1.2; margin-bottom:15px; } .live-tag { position:absolute; top:12px; left:12px; background:#962f26; color:white; font-size:11px; font-weight:800; padding:5px 9px; border-radius:5px; letter-spacing:.08em; }
.preview-controls { display:flex; flex-wrap:wrap; gap:9px; margin:16px 0; } .preview-controls button { font-size:12px; } .audio-level { display:flex; align-items:center; flex-wrap:wrap; gap:8px 13px; margin:12px 0 15px; } .audio-level label:not(.consent) { margin:0; font-size:12px; } .audio-level meter { flex:1; min-width:90px; height:14px; } .audio-level span { min-width:60px; font-size:11px; color:var(--muted); } .settings-card .eyebrow { margin-top:0; } .settings-card > button { width:100%; margin-bottom:10px; } .settings-card > .small { margin-top:5px; }
.mobile-guard { display:grid; gap:2px; margin:12px 0 14px; padding:11px 13px; border:1px solid #c6d9b9; border-radius:9px; background:#edf5e8; font-size:12px; line-height:1.45; } .mobile-guard strong { color:var(--green); } .mobile-guard.is-recovering { border-color:#e6d998; background:#fff8d9; } .mobile-guard.is-live strong { color:#962f26; }
.mail-card { margin-top:22px; } .mail-card summary { display:flex; align-items:center; justify-content:space-between; gap:15px; cursor:pointer; font-weight:750; min-height:42px; } .mail-card summary span { color:var(--muted); font-size:12px; } .mail-card > p { margin-top:15px; font-size:13px; } .mail-card form { max-width:550px; } .mail-card form .small { margin-top:9px; } .mail-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; } .mail-actions button { font-size:12px; } .panel-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:24px 0 8px; color:var(--muted); font-size:11px; }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at top left,#e3edd7,transparent 70%),var(--paper); } .login-card { width:100%; max-width:480px; padding:34px; border:1px solid var(--line); background:white; border-radius:20px; box-shadow:0 20px 65px #163c2c10; } .login-card .brand { margin-bottom:35px; } .login-card > p:not(.eyebrow) { color:var(--muted); } .login-card form button { width:100%; margin:22px 0 12px; } .login-card .small { margin-top:18px; }
@media(max-width:800px) { .studio-grid { grid-template-columns:1fr; } .topbar { align-items:flex-start; flex-wrap:wrap; } .intro { align-items:flex-start; flex-direction:column; gap:5px; } .preview-card,.settings-card,.mail-card { padding:18px; } .preview-controls > button { flex:1 1 150px; } .login-card { padding:25px; } .workspace { padding-top:10px; } }