:root{--ink:#14312a;--muted:#66766f;--cream:#f7f4eb;--mint:#dfeee5;--sage:#a9cbb8;--orange:#ef875f;--red:#bf4c44;--card:#fffdf8;--line:#d7e2d9;--bg1:#eef5ee;--bg2:#f8f3e9;--bg3:#dcece3;--panel-bg:rgb(255 253 248/.83);--panel-border:rgb(255 255 255/.9);--shadow:#24453614;--eyebrow:#578171;--notice-bg:#fff5e6;--notice-border:#f5d9ae;--notice-ink:#76521c;--badge-bg:#e5f2e8;--badge-ink:#356853;--input-bg:#fff;--btn-primary-bg:#14312a;--btn-primary-ink:#fff;--danger-bg:#ffe8e5;--danger-ink:#993d36;--capability-bg:#f3f7f2;--capability-ink:#456158;--chip-bg:#edf5ef;--chip-ink:#355a4a;--waiting-bg:#f1f7f2;--waiting-ink:#4e6c5c;--alert-bg:#fff1ed;--alert-ink:#9c493d}
[data-theme="dark"]{--ink:#e6f1e9;--muted:#9fb3a8;--mint:#1d3b30;--sage:#3f6653;--card:#132921;--line:#28453a;--bg1:#0b1713;--bg2:#0e1d17;--bg3:#10241c;--panel-bg:rgb(19 41 33/.85);--panel-border:rgb(255 255 255/.08);--shadow:#00000059;--eyebrow:#8fc0a9;--notice-bg:#2e2717;--notice-border:#4a3d20;--notice-ink:#e8c98a;--badge-bg:#1d3b30;--badge-ink:#a9d8bf;--input-bg:#0f211a;--btn-primary-bg:#dfeee5;--btn-primary-ink:#10261e;--danger-bg:#3a1f1c;--danger-ink:#ff9d92;--capability-bg:#163026;--capability-ink:#a7c4b6;--chip-bg:#1a352b;--chip-ink:#b9d8c7;--waiting-bg:#163026;--waiting-ink:#a7c4b6;--alert-bg:#3a201b;--alert-ink:#ffb3a6}*{box-sizing:border-box}body{margin:0;background:linear-gradient(145deg,var(--bg1),var(--bg2) 58%,var(--bg3));color:var(--ink);font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;border:0;color:inherit}.shell{width:min(1120px,calc(100% - 32px));margin:auto;padding:30px 0 48px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.18rem;letter-spacing:-.04em}.brand-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;background:var(--ink);color:#dff6e8}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:var(--eyebrow)}.hero{padding:56px 0 28px;max-width:760px}.hero h1{font-size:clamp(2.6rem,7vw,5rem);line-height:.97;letter-spacing:-.075em;margin:12px 0 18px}.hero p{font-size:1.1rem;color:var(--muted);max-width:610px}.role-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.role-card,.panel{background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:0 18px 50px var(--shadow);border-radius:26px}.role-card{padding:28px;text-align:left;min-height:260px;transition:transform .2s,box-shadow .2s}.role-card:hover{transform:translateY(-4px);box-shadow:0 20px 45px var(--shadow)}.role-icon{font-size:2rem;display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:var(--mint);margin-bottom:48px}.role-card h2{font-size:1.45rem;margin:0}.role-card p{color:var(--muted);margin:.35rem 0 0}.notice{display:flex;gap:10px;align-items:flex-start;background:var(--notice-bg);border:1px solid var(--notice-border);border-radius:14px;padding:13px 15px;color:var(--notice-ink);font-size:.88rem;margin-top:25px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.back{background:transparent;color:var(--ink);padding:8px 0;font-weight:700}.badge{background:var(--badge-bg);color:var(--badge-ink);border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:800}.setup{max-width:720px;margin:34px auto}.setup h1{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.06em;line-height:1;margin:10px 0}.panel{padding:26px}.stack{display:grid;gap:16px}.field label{display:block;font-size:.82rem;font-weight:800;margin-bottom:7px}.field input,.field select{width:100%;border:1px solid var(--line);background:var(--input-bg);border-radius:12px;padding:12px 13px;color:var(--ink)}.primary,.secondary,.danger{padding:13px 17px;border-radius:13px;font-weight:800;transition:filter .2s,transform .2s}.primary{background:var(--btn-primary-bg);color:var(--btn-primary-ink)}.primary:hover{filter:brightness(1.15)}.secondary{background:var(--mint);color:var(--ink)}.danger{background:var(--danger-bg);color:var(--danger-ink)}.primary:disabled{opacity:.5;cursor:not-allowed}.capability{padding:12px;border-radius:12px;background:var(--capability-bg);color:var(--capability-ink);font-size:.88rem}.live{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.72fr);gap:20px}.video-card{background:#10261e;border-radius:25px;min-height:510px;position:relative;overflow:hidden}.video-card video{width:100%;height:100%;object-fit:cover;position:absolute}.video-empty{min-height:510px;display:grid;place-items:center;color:#d5e6db;text-align:center;padding:25px;background:radial-gradient(circle at 50% 40%,#315749,#10261e 65%)}.video-empty strong{display:block;font-size:1.4rem}.live-pill{position:absolute;z-index:2;top:18px;left:18px;background:#fff;color:#23483a;padding:7px 10px;border-radius:999px;font-size:.75rem;font-weight:900}.live-pill:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#e95e55;margin-right:6px}.side{display:grid;gap:15px;align-content:start}.control-group h3{margin:0 0 12px;font-size:.91rem}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.button-row{display:flex;gap:8px;flex-wrap:wrap}.chip{background:var(--chip-bg);color:var(--chip-ink);border-radius:10px;padding:9px 11px;font-size:.84rem;font-weight:750}.chip.active{background:var(--btn-primary-bg);color:var(--btn-primary-ink)}.range{width:100%;accent-color:var(--ink)}.status{font-size:.85rem;color:var(--muted)}.code{font:800 clamp(2.3rem,8vw,4rem)/1 ui-monospace,monospace;letter-spacing:.16em;color:var(--ink);margin:22px 0}.pair{text-align:center;padding:35px}.waiting{padding:15px;background:var(--waiting-bg);border-radius:13px;color:var(--waiting-ink)}.alert{padding:12px;border-radius:12px;background:var(--alert-bg);color:var(--alert-ink);font-size:.88rem}.hidden{display:none!important}@media(max-width:760px){.shell{width:min(100% - 24px,1120px);padding-top:18px}.theme-toggle{top:auto;bottom:20px}.hero{padding-top:38px}.role-grid,.live{grid-template-columns:1fr}.video-card,.video-empty{min-height:360px}.role-card{min-height:190px}.role-icon{margin-bottom:30px}}

.video-card video{transition:transform .3s ease}
.modal-overlay{position:fixed;inset:0;background:rgb(16 38 30/.45);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:50;padding:20px}
.modal{background:var(--card);border:1px solid var(--panel-border);border-radius:22px;padding:30px 28px;max-width:380px;width:100%;text-align:center;box-shadow:0 24px 70px #10261e4d;display:grid;gap:16px;justify-items:center}
.modal p{margin:0;font-weight:650;color:var(--ink)}
.modal .primary{min-width:120px}
body,.role-card,.panel,.chip,.badge,.notice,.field input,.field select,.primary,.secondary,.danger,.modal{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.theme-toggle{position:fixed;right:20px;top:20px;z-index:60;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--panel-bg);border:1px solid var(--panel-border);box-shadow:0 12px 34px var(--shadow);color:var(--ink);backdrop-filter:blur(8px);transition:transform .2s ease,background-color .35s ease,color .35s ease}
.theme-toggle:hover{transform:scale(1.1) rotate(12deg)}
.theme-toggle svg{display:block}
@media(min-width:761px) and (max-width:1320px){.topbar{padding-right:62px}}