:root{--paper:#faf3ea;--card:#fffdf9;--card-border:#f0e6da;--hairline:#f4ece1;--ink:#3a3230;--muted:#a08c7d;--muted-2:#8a807a;--terracotta:#cf7a53;--terracotta-tint:#f7e7dd;--terracotta-deep:#c06a45;--teal:#3f8f86;--teal-tint:#dcecea;--mustard:#c69a3f;--mustard-tint:#f4ecd6;--chip-track:#f2e8dd;--danger:#b4452e;--video-well:#3a2f28;--shadow-card:0 8px 22px -14px #50321e47;--serif:"Instrument Serif", Georgia, "Times New Roman", serif;--sans:"Hanken Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input{-webkit-user-select:text;user-select:text}button,input{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;background:0 0;border:none}#root{max-width:430px;margin:0 auto}.screen{min-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));flex-direction:column;display:flex}.topbar{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.link{color:var(--terracotta-deep);padding:6px 0;font-size:13px;font-weight:700}.screen-header{margin-bottom:16px}.screen-caption{color:var(--muted);margin-bottom:2px;font-size:13px;font-weight:600}.screen-title{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.1}.badge{background:var(--card);border:1px solid var(--card-border);color:var(--muted-2);border-radius:20px;padding:7px 14px;font-size:12px;font-weight:700}.badge-connected{background:var(--teal-tint);border-color:var(--teal-tint);color:var(--teal)}.badge-waiting{background:var(--mustard-tint);border-color:var(--mustard-tint);color:var(--mustard)}.badge-error{background:var(--terracotta-tint);border-color:var(--terracotta-tint);color:var(--danger)}.card{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);border-radius:22px;flex-direction:column;gap:12px;margin-bottom:16px;padding:18px;display:flex}.card p{font-size:14px;line-height:1.4}.error-card{color:var(--danger);font-weight:600}.error-text{color:var(--danger);font-size:13px;font-weight:600}.hint{color:var(--muted);font-size:13px;line-height:1.45}.role-picker{justify-content:center;gap:14px}.brand{text-align:center;margin-bottom:14px}.brand-mark{margin-bottom:6px;font-size:54px}.brand h1{font-family:var(--serif);margin-bottom:6px;font-size:40px;font-weight:400;line-height:1.1}.brand p{color:var(--muted);font-size:14px;font-weight:600}.role-card{text-align:left;background:var(--card);border:1px solid var(--card-border);box-shadow:var(--shadow-card);border-radius:22px;flex-direction:column;gap:6px;padding:20px;transition:transform .1s;display:flex}.role-card:active{transform:scale(.98)}.role-emoji{font-size:30px}.role-title{font-family:var(--serif);font-size:24px;font-weight:400}.role-desc{color:var(--muted);font-size:14px;font-weight:500;line-height:1.4}.video-frame{background:var(--video-well);aspect-ratio:4/3;box-shadow:var(--shadow-card);border-radius:22px;margin-bottom:16px;position:relative;overflow:hidden}.video-frame[hidden]{display:none}.video-frame video{object-fit:cover;width:100%;height:100%;display:block}.tap-overlay{color:#fff;background:#3a2f28b8;place-items:center;font-size:17px;font-weight:700;display:grid;position:absolute;inset:0}.code-card,.join-card{text-align:center}.code-card p,.join-card p{color:var(--muted);font-weight:600}.pair-code{font-family:var(--serif);letter-spacing:8px;padding-left:8px;font-size:52px;line-height:1.1}.code-input{font-family:var(--sans);letter-spacing:8px;text-align:center;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1px solid var(--card-border);border-radius:14px;outline:none;width:100%;padding:12px;font-size:26px;font-weight:700}.code-input:focus{border-color:var(--terracotta)}.code-input::placeholder{color:var(--muted);opacity:.6}.primary{background:var(--terracotta);color:#fff;border-radius:18px;padding:13px 0;font-size:14px;font-weight:700;box-shadow:0 10px 20px -10px #cf7a53b3}.primary:disabled{opacity:.5}.meter-row,.slider-row{flex-direction:column;gap:8px;display:flex}.meter-label{color:var(--muted);font-size:12px;font-weight:700}.level-meter{background:var(--chip-track);border-radius:999px;height:14px;position:relative;overflow:hidden}.level-fill{background:var(--teal);border-radius:999px;height:100%;transition:width .1s linear}.level-loud{background:var(--danger)}.level-threshold{background:var(--mustard);width:2px;position:absolute;top:0;bottom:0}input[type=range]{width:100%;accent-color:var(--terracotta)}.toggle-row{align-items:center;gap:10px;font-size:14px;font-weight:600;display:flex}.toggle-row input{width:20px;height:20px;accent-color:var(--terracotta)}.alert-banner{background:var(--terracotta);color:#fff;text-align:center;border-radius:18px;margin-bottom:16px;padding:14px 16px;font-weight:700;animation:1s ease-in-out infinite alternate alert-pulse}@keyframes alert-pulse{0%{box-shadow:0 0 #cf7a5380}to{box-shadow:0 0 0 9px #cf7a5300}}