/* Separate experiences for a phone, a projector, and a presenter. */
:root{--mint:#00f2aa;--mint-soft:#a2ffdf;--readable-muted:#b6c7d5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body[data-mode="audience"],body[data-mode="presenter"],body[data-mode="screen"]{--cyan:var(--mint);--muted:var(--readable-muted);background-color:#08131f;background-image:radial-gradient(ellipse at 50% 0,#12392f40,transparent 48%);background-attachment:fixed}
body[data-mode="audience"] .site-header{height:74px;padding:0 28px;max-width:1000px;border-bottom-color:#263b4b}
body[data-mode="audience"] .brand{font-size:12px;gap:10px;letter-spacing:.7px}
body[data-mode="audience"] .brand img{width:33px;height:33px}
body[data-mode="audience"] .brand small{font-size:7px;letter-spacing:1.5px;margin-top:5px}
body[data-mode="audience"] .header-links{gap:22px;font-size:12px}
.header-share{background:#10283a;color:#defaf1;border:1px solid #3d5969;border-radius:6px;padding:7px 12px;min-height:40px;font-size:12px;display:flex;align-items:center;gap:7px}
.header-share>span{font-size:20px;line-height:1;color:var(--mint)}
.header-share:hover{border-color:var(--mint);background:#15372f}
.participant-shell{max-width:760px;padding:0 24px 100px}
.participant-status{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px 18px}
.participant-status .live-label{font-size:10px;letter-spacing:1px;line-height:1.5;color:#d3e8e3}
.participant-privacy{font-size:11px;color:#bdcfdb;white-space:nowrap}
.participant-progress{margin:0 0 18px}
.progress-caption{display:flex;justify-content:space-between;margin-bottom:9px;font-size:10px;line-height:1.4;text-transform:uppercase;letter-spacing:1.3px;font-family:var(--mono);color:#91b1be}
.progress-caption>span:last-child{color:#c1cfd8;letter-spacing:.3px;text-transform:none}
.participant-progress #activity-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:0;overflow:visible}
.participant-progress .nav-activity{min-width:0;width:auto;margin:0;min-height:61px;padding:9px 5px;gap:5px;justify-content:center;flex-direction:column;border:1px solid #344c5d;background:#0e1f2e;border-radius:6px;position:relative}
.participant-progress .nav-activity.selected{border-color:var(--mint);background:#11372e;color:#c0ffe7;box-shadow:inset 0 1px #00f2aa15}
.participant-progress .nav-number{border:0;background:none;height:18px;width:auto;font-size:12px;line-height:1}
.participant-progress .nav-title{font-size:10px;flex:none;text-align:center;line-height:1.2;white-space:nowrap}
.participant-progress .nav-status{display:none}
.participant-progress .nav-check{display:block;position:absolute;top:4px;right:5px;font-size:9px;line-height:1}
body[data-mode="audience"] .activity-panel{overflow:visible;border-color:#385063;background:linear-gradient(155deg,#142536,#0e1d2b 70%);border-radius:12px;box-shadow:0 16px 70px #00000026}
body[data-mode="audience"] .activity-topline{border-radius:12px 12px 0 0;padding:13px 23px;min-height:46px;font-size:10px;letter-spacing:1px;background:#112131b8}
body[data-mode="audience"] .badge{font-size:10px;letter-spacing:.25px}
body[data-mode="audience"] .activity-body{padding:25px 26px 28px}
body[data-mode="audience"] .activity-body>.eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:10px}
body[data-mode="audience"] .activity-body h2{font-size:clamp(27px,4.5vw,34px);line-height:1.14;margin-bottom:12px;max-width:590px;letter-spacing:-1px}
body[data-mode="audience"] .activity-description{font-size:14px;line-height:1.65;margin-bottom:23px;color:#bbcfdb}
body[data-mode="audience"] .activity-question{font-size:16px;line-height:1.5;margin-bottom:13px;color:#f1f8fa}
body[data-mode="audience"] .choice-list{gap:10px}
body[data-mode="audience"] .choice{min-height:60px;padding:15px 17px;border:1px solid #50677a;border-radius:8px;background:#102131;gap:14px;transition:border-color .18s,background .18s,box-shadow .18s}
body[data-mode="audience"] .choice:hover{background:#183343;border-color:#83a8b4}
body[data-mode="audience"] .choice:has(input:checked){border-color:var(--mint);background:#123a32;box-shadow:0 0 0 1px #00f2aa24,0 0 20px #00f2aa09}
body[data-mode="audience"] .choice:has(input:focus-visible){outline:3px solid #00f2aab3;outline-offset:3px}
body[data-mode="audience"] .choice input{height:20px;width:20px;accent-color:var(--mint);flex:none}
body[data-mode="audience"] .choice-text{font-size:15px;line-height:1.5;font-weight:500;color:#f0f6fa}
body[data-mode="audience"] .choice-text small{font-size:13px;line-height:1.6;color:#b6cbd6;margin-top:3px}
body[data-mode="audience"] .choice:has(input:checked) .choice-text small{color:#c8e9df}
.selection-hint{font-size:12px;color:#bce7d9;line-height:1.5;margin:0 0 13px}
body[data-mode="audience"] .form-hint{font-size:12px;line-height:1.5;max-width:260px;color:#bdcedb}
body[data-mode="audience"] .form-bottom{margin-top:22px}
body[data-mode="audience"] .button{font-size:14px;min-height:49px;border-radius:7px;padding:13px 19px;gap:15px}
body[data-mode="audience"] .activity-bottom{font-size:10px;border-radius:0 0 12px 12px;padding:13px 23px;line-height:1.5;background:#0c1b28}
body[data-mode="audience"] .submit-dock{position:fixed;z-index:35;bottom:18px;left:50%;transform:translateX(-50%);width:min(700px,calc(100% - 40px));display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0;padding:14px 17px;border:1px solid #426456;border-radius:10px;background:#102c28f5;box-shadow:0 10px 40px #0009;backdrop-filter:blur(16px)}
body[data-mode="audience"] .submit-dock .button{flex:none;min-width:195px}
body[data-mode="audience"] .submit-dock .form-hint{color:#d1e9e1;max-width:290px}
.participant-room{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 22px;font-size:11px;margin:20px 0 0;color:#b6c8d5}
.participant-room strong{color:#dffaf2;font-family:var(--mono);font-weight:500}
.participant-room a{color:#b0c7d5;font-size:10px;text-decoration:underline;text-underline-offset:3px}
.participant-signoff{text-align:center;margin:17px 0 0;font-size:12px;letter-spacing:.2px;color:#7da497}
body[data-mode="audience"] .site-footer{max-width:712px;margin:0 auto;padding:21px 0;font-size:9px}
body[data-mode="audience"] .site-footer>span:nth-child(2){display:none}
.submission-confirmation{padding:34px 12px;text-align:center}
.confirmation-mark{display:grid;place-items:center;height:64px;width:64px;margin:0 auto 25px;font-size:27px;color:var(--mint);border:1px solid var(--mint);border-radius:50%;background:#00f2aa0f;box-shadow:0 0 0 12px #00f2aa04}
.submission-confirmation .confirmation-title{font-size:25px;margin:0 0 13px;letter-spacing:-.5px}
.submission-confirmation .confirmation-summary{font-size:15px;line-height:1.65;max-width:410px;margin:0 auto 21px;color:#bfd6de}
.submission-confirmation .button{margin-top:8px}
.submission-confirmation .text-button{font-size:13px;text-align:center}
body[data-mode="audience"] .scenario{border-radius:0 7px 7px 0;padding:17px 19px}
body[data-mode="audience"] .scenario p{font-size:17px;color:#f7ead4}
body[data-mode="audience"] .invoice-header{padding:17px 20px}
body[data-mode="audience"] .invoice-sender{font-size:14px}
body[data-mode="audience"] .invoice-sender small{font-size:11px}
body[data-mode="audience"] .invoice-body{padding:17px}
body[data-mode="audience"] .invoice-body>p{font-size:14px}
body[data-mode="audience"] .invoice-flag{font-size:14px;min-height:48px;padding:10px;line-height:1.6;border-color:#9fb1bc;align-items:center;margin:7px 0}
body[data-mode="audience"] .invoice-flag[aria-pressed=true]{border-color:#a77b13;background:#ffedba;box-shadow:inset 0 0 0 1px #bc9220}
body[data-mode="audience"] .invoice .invoice-instruction{font-size:12px;color:#4b616e;line-height:1.6}
body[data-mode="audience"] .date-field label,body[data-mode="audience"] .question-label{font-size:15px}
body[data-mode="audience"] .date-field small{font-size:12px}
body[data-mode="audience"] .date-field input{font-size:16px;min-height:49px;border-radius:7px;border-color:#506e81}
body[data-mode="audience"] textarea{font-size:16px;min-height:160px;border-radius:7px;border-color:#506e81}
body[data-mode="audience"] .textarea-count{font-size:11px;margin-top:4px}
body[data-mode="audience"] .locked-state{padding:20px 3px}
body[data-mode="audience"] .locked-state p{font-size:15px;line-height:1.7}
body[data-mode="audience"] .locked-symbol{color:#65baa2;margin-bottom:17px}
body[data-mode="audience"] .chart-row-head{font-size:14px;line-height:1.5;margin-bottom:9px;gap:14px}
body[data-mode="audience"] .chart-numbers{font-size:12px}
body[data-mode="audience"] .chart-track{height:11px;border-radius:3px;background:#294254}
body[data-mode="audience"] .chart-fill{background:#6b9cba;border-radius:3px}
body[data-mode="audience"] .chart-row.correct .chart-fill{background:var(--mint)}
body[data-mode="audience"] .debrief p{font-size:15px;line-height:1.7;color:#d0e6e1}
body[data-mode="audience"] .debrief .eyebrow{font-size:10px}
body[data-mode="audience"] .result-intro span,body[data-mode="audience"] .chart-footnote{font-size:12px;line-height:1.6}
.join-dialog{max-width:440px;padding:24px 30px 30px;text-align:center;border-color:#4a756b;border-radius:12px;background:linear-gradient(155deg,#152e38,#0e1c2a)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}
.dialog-heading .eyebrow{font-size:10px}
.dialog-close{min-width:40px;min-height:40px;border:1px solid #466170;background:transparent;border-radius:50%;font-size:25px;line-height:1;color:#dceef0}
.join-dialog h2{font-size:27px;margin:0 0 12px}
.join-dialog p{font-size:14px;line-height:1.7}
.join-dialog .qr-image{width:240px;height:240px;max-width:100%;margin:25px auto 17px;padding:4px}
.join-dialog .join-url{font-size:16px;display:block;margin-bottom:21px;color:#a0ffdb}
.join-dialog .button{width:100%}
/* The stage uses a compact masthead and a separate join rail for projection. */
body[data-mode="screen"] .site-header{height:65px;max-width:1920px;padding:0 3%;border-bottom:1px solid #2b4454}
body[data-mode="screen"] .brand{font-size:14px}
body[data-mode="screen"] .brand img{width:33px;height:33px}
body[data-mode="screen"] .brand small{font-size:7px;letter-spacing:2px;margin-top:4px}
.stage-header-label{display:flex;align-items:center;gap:10px;font-family:var(--mono);letter-spacing:1.7px;font-size:11px;color:#c1dbd5}
body[data-mode="screen"] .stage-shell{max-width:1920px;padding:16px 3% 18px;min-height:0}
body[data-mode="screen"] .stage-top{margin:0 0 16px;min-height:35px;gap:15px}
.stage-session-label{font-family:var(--mono);font-size:10px;color:#b1c6d1;letter-spacing:1.5px;display:flex;gap:13px;align-items:center}
.stage-slash{font-size:22px;line-height:1;color:var(--mint)}
body[data-mode="screen"] .stage-top .button{font-size:11px;min-height:34px;padding:7px 11px;opacity:.8;gap:12px}
body[data-mode="screen"] .stage-grid{display:grid;grid-template-columns:clamp(245px,23vw,340px) minmax(0,1fr);gap:24px;margin:0;align-items:stretch;min-height:calc(100dvh - 216px)}
body[data-mode="screen"] .stage-join{padding:23px 18px 20px;background:linear-gradient(160deg,#15383288,#10233199);border:1px solid #36564f;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;position:relative;overflow:hidden}
body[data-mode="screen"] .stage-join:before{content:'';position:absolute;top:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,#00f2aa,transparent)}
body[data-mode="screen"] .stage-join>.eyebrow{font-size:10px;letter-spacing:1.5px;line-height:1.4;color:#a9d7cc}
body[data-mode="screen"] .stage-join h1{font-size:clamp(27px,2.5vw,39px);letter-spacing:-1px;margin:8px 0 20px;line-height:1.1;white-space:nowrap;font-weight:600}
.stage-join h1>span{color:var(--mint)}
.stage-qr-frame{width:clamp(180px,29vh,295px);max-width:100%;padding:7px;border:1px solid #83af9e55;border-radius:10px;background:#a5e9cd08}
body[data-mode="screen"] .stage-join .qr-image{width:100%;margin:0;border-radius:4px;padding:3px}
body[data-mode="screen"] .stage-join .join-url{font-size:clamp(15px,1.4vw,23px);font-weight:600;letter-spacing:-.6px;margin-top:15px;line-height:1.5;color:#a1ffdc;white-space:nowrap;overflow-wrap:normal}
body[data-mode="screen"] .stage-join .stage-join-note{font-size:12px;line-height:1.6;margin:10px 0 0;color:#bfd9d1}
.stage-live-metrics{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:15px;margin-top:18px;border-top:1px solid #3b5a58}
body[data-mode="screen"] .stage-count{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;line-height:1.3;align-items:center;font-size:11px;color:#c0d4dc}
body[data-mode="screen"] .stage-count strong{font-size:clamp(26px,2.5vw,36px);font-weight:500;color:#e9fcf5}
.stage-clock{width:100%;border-top:1px solid #3b5a58;margin-top:15px;padding-top:13px;display:flex;justify-content:space-between;align-items:center;gap:15px}
.stage-clock>span{font-size:8px;letter-spacing:1px;color:#c2d6d4;font-family:var(--mono);text-align:left}
body[data-mode="screen"] .timer-display{font-size:28px;line-height:1;margin:0;font-weight:500;color:#a1ffdc}
.stage-wifi{width:100%;margin-top:14px;border-top:1px solid #3b5a58;padding-top:12px;font-size:12px;text-align:left;color:#d4e6df}
.stage-wifi .eyebrow{font-size:8px;color:#a4c9ba;margin-bottom:3px}
.stage-wifi>strong,.stage-wifi>span{display:block;overflow-wrap:anywhere}
body[data-mode="screen"] .stage-wifi p{font-size:11px;margin:4px 0 0;line-height:1.5}
body[data-mode="screen"] .stage-panel{min-height:0;background:linear-gradient(130deg,#142b3a,#0f1d2c);border:1px solid #3e5868;border-radius:10px;display:flex;flex-direction:column}
body[data-mode="screen"] .activity-topline{padding:14px 25px;min-height:48px;font-size:11px;background:#0b182680;color:#c0d5dd;border-color:#354b5b}
body[data-mode="screen"] .badge{font-size:11px;letter-spacing:.5px}
body[data-mode="screen"] .activity-body{padding:25px 29px;flex:1;display:flex;flex-direction:column}
body[data-mode="screen"] .activity-body>.eyebrow{font-size:11px;letter-spacing:1.6px;margin-bottom:10px}
body[data-mode="screen"] .activity-body h2{font-size:clamp(30px,3.2vw,49px);letter-spacing:-1.2px;line-height:1.1;margin:0 0 12px;max-width:1000px}
body[data-mode="screen"] .activity-description{font-size:clamp(15px,1.45vw,22px);line-height:1.5;margin-bottom:20px;color:#c3d6e2;max-width:1050px}
body[data-mode="screen"] .activity-bottom{padding:12px 25px;font-size:11px;border-color:#354b5b;background:#0b182666;min-height:42px}
body[data-mode="screen"] .stage-voting{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:220px}
body[data-mode="screen"] .stage-prompt{font-size:clamp(22px,2vw,33px);line-height:1.35;color:#f0f7fa;letter-spacing:-.6px;margin:0 0 18px;font-weight:500}
.stage-context{color:#d0dce5;font-size:17px;line-height:1.6;border-left:2px solid var(--amber);padding:13px 18px;background:#3c352233;border-radius:0 6px 6px 0;margin:0 0 17px}
body[data-mode="screen"] .vote-pulse{--pulse-size:clamp(115px,14vw,190px);display:grid;grid-template-columns:var(--pulse-size) minmax(160px,auto);grid-template-rows:var(--pulse-size);align-items:center;justify-content:center;gap:30px;padding:20px 15px;position:relative;background:radial-gradient(ellipse,#00f2aa08,transparent 70%);text-align:center}
body[data-mode="screen"] .pulse-ring{grid-column:1;grid-row:1;width:100%;height:100%;border:1px solid #00f2aa60;border-radius:50%;box-shadow:0 0 0 15px #00f2aa04,0 0 0 31px #00f2aa02;position:relative;animation:pulse-border 3s ease-in-out infinite}
body[data-mode="screen"] .vote-pulse .pulse-count{grid-column:1;grid-row:1;font-family:var(--mono);font-size:clamp(65px,7vw,110px);font-weight:400;line-height:1;letter-spacing:-6px;color:#aeffe0;display:block;font-variant-numeric:tabular-nums;position:relative;left:-3px}
body[data-mode="screen"] .vote-pulse>span{grid-column:2;font-size:clamp(20px,2vw,30px);line-height:1.4;color:#dbede9;max-width:210px;text-align:left;letter-spacing:-.4px}
body[data-mode="screen"] .vote-pulse p{font-size:clamp(17px,1.55vw,24px);line-height:1.5;margin:0;color:#cadde1;max-width:470px;text-align:left}
body[data-mode="screen"] .vote-pulse strong{color:#f1fcf8}
body[data-mode="screen"] .stage-voting .eyebrow{justify-content:center;margin:20px 0 0;color:#a3dfcd;font-size:11px}
body[data-mode="screen"] .vote-pulse .eyebrow{margin:0 0 8px;justify-content:flex-start}
.vote-state-hint{font-size:clamp(17px,1.5vw,23px);line-height:1.5;text-align:center;color:#bfd4dd;margin:16px auto 0;max-width:720px}
body[data-mode="screen"] .result-intro{margin:0 0 16px;line-height:1.3}
body[data-mode="screen"] .result-intro strong{font-size:30px;color:#a3ffdf}
body[data-mode="screen"] .result-intro span{font-size:14px;color:#c1d1dc}
body[data-mode="screen"] .chart{gap:clamp(12px,1.3vh,19px);margin-bottom:15px}
body[data-mode="screen"] .chart-row-head{font-size:clamp(17px,1.6vw,24px);line-height:1.35;margin-bottom:7px;gap:18px}
body[data-mode="screen"] .chart-label{color:#f1f7fb}
body[data-mode="screen"] .chart-numbers{font-size:clamp(16px,1.4vw,23px);color:#b8cedb}
body[data-mode="screen"] .chart-numbers strong{color:#f1f9fb;margin-left:12px;font-weight:600}
body[data-mode="screen"] .chart-track{height:clamp(10px,1.5vh,16px);border-radius:3px;background:#2c4354}
body[data-mode="screen"] .chart-fill{background:#7da7c3;border-radius:3px;transition:transform .7s cubic-bezier(.22,.65,.25,1)}
body[data-mode="screen"] .chart-row.correct .chart-fill{background:var(--mint)}
body[data-mode="screen"] .chart-row.correct .chart-label{color:#b3ffdc}
body[data-mode="screen"] .chart-footnote{font-size:12px;line-height:1.5;margin:2px 0 12px;color:#c4d4df}
.result-chart-grid:has(.result-chart-section:nth-child(2)){display:grid;grid-template-columns:1fr 1fr;gap:25px}
.result-chart-section{min-width:0}
body[data-mode="screen"] .result-chart-grid:has(.result-chart-section:nth-child(2)) .chart-row-head{font-size:clamp(15px,1.25vw,20px)}
body[data-mode="screen"] .result-chart-grid:has(.result-chart-section:nth-child(2)) .chart-numbers{font-size:clamp(14px,1.2vw,18px)}
body[data-mode="screen"] .chart-subtitle{font-size:16px;margin:0 0 18px;color:#c2dbdf;letter-spacing:0}
body[data-mode="screen"] .debrief{padding:16px 19px;border:1px solid #477764;border-left:3px solid var(--mint);border-radius:5px;background:#143b3080;margin-top:15px}
body[data-mode="screen"] .debrief .eyebrow{font-size:10px;letter-spacing:1.2px;margin-bottom:7px;color:#a0ffdc}
body[data-mode="screen"] .debrief p{font-size:clamp(16px,1.6vw,24px);line-height:1.5;color:#e1f8ed}
body[data-mode="screen"] .question-card{border-color:#456274;background:#163141;margin:0 0 14px;padding:20px 23px}
body[data-mode="screen"] .question-card p{font-size:clamp(23px,2.5vw,36px);line-height:1.45}
body[data-mode="screen"] .question-card .eyebrow{font-size:10px}
body[data-mode="screen"] .locked-state p{font-size:23px;color:#d0e3e8}
body[data-mode="screen"] .empty-results{font-size:17px;border-color:#59788a;color:#d2e3ea}
.stage-bottom{display:flex;align-items:center;gap:25px;margin-top:17px;min-height:40px}
.stage-bottom>.eyebrow{font-size:9px;letter-spacing:1px;white-space:nowrap;color:#c1d4dd}
#stage-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;flex:1;min-width:0}
.stage-progress-step{min-width:0;color:#91aebc;border-top:2px solid #395162;padding-top:7px;font-size:10px;font-family:var(--mono);line-height:1.4;display:flex;align-items:center;gap:9px}
.stage-progress-step.active{border-color:var(--mint);color:#b0ffdf}
.stage-progress-step.complete{border-color:#4aa78c;color:#c3ddd4}
.stage-progress-step>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-bottom-habit{font-family:var(--mono);font-size:9px;letter-spacing:.6px;white-space:nowrap;color:#9dbaa9}
.stage-bottom-habit>span{margin:0 6px;color:#5f9781}
body[data-mode="screen"] .site-footer{display:none}
body[data-mode="screen"] .toast{font-size:16px}
@keyframes pulse-border{0%,100%{box-shadow:0 0 0 15px #00f2aa04,0 0 0 31px #00f2aa02}50%{box-shadow:0 0 0 18px #00f2aa08,0 0 0 37px #00f2aa03}}
/* Live controls remain available while the presenter reviews analytics. */
body[data-mode="presenter"] .site-header{height:74px;max-width:1540px;padding:0 4%;border-color:#304958}
body[data-mode="presenter"] .presenter-shell{max-width:1540px;padding:0 4%}
body[data-mode="presenter"] .page-heading{padding:28px 0 22px}
body[data-mode="presenter"] .page-heading h1{font-size:36px;margin:11px 0 9px}
body[data-mode="presenter"] .page-heading p{font-size:14px;color:#b8cfdc}
body[data-mode="presenter"] .stats-grid{margin:0 0 20px;border-color:#365063;border-radius:8px;background:#112333}
body[data-mode="presenter"] .stat{padding:17px 22px;border-color:#365063}
body[data-mode="presenter"] .stat>span{font-size:10px;color:#b1cbd8}
body[data-mode="presenter"] .stat strong{font-size:30px;margin:5px 0 2px;font-weight:500}
body[data-mode="presenter"] .stat small{font-size:11px;color:#afc3d0}
.presenter-command-bar{position:sticky;top:12px;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border:1px solid #427361;border-radius:8px;background:#112c27f5;box-shadow:0 10px 30px #0005;backdrop-filter:blur(15px);margin-bottom:24px;flex-wrap:wrap}
.presenter-step-controls,.presenter-display-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.presenter-display-options{gap:8px 18px}
body[data-mode="presenter"] .button{font-size:13px;min-height:45px;border-radius:6px;padding:11px 16px;gap:12px}
body[data-mode="presenter"] .text-button{font-size:12px}
.presenter-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.presenter-toolbar:empty{display:none}
.auto-close-option{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5;cursor:pointer;color:#d2e9e1;min-height:40px}
.auto-close-option input{width:18px;height:18px;accent-color:var(--mint);flex:none}
body[data-mode="presenter"] .presenter-grid{grid-template-columns:225px minmax(0,1fr);gap:25px;margin-bottom:60px}
body[data-mode="presenter"] .activity-sidebar{position:sticky;top:110px;padding:0}
body[data-mode="presenter"] .activity-sidebar>.eyebrow{font-size:10px;margin-left:10px;color:#a2bdca}
body[data-mode="presenter"] .nav-activity{padding:13px 12px;border:1px solid #2e4658;margin:6px 0;border-radius:7px;min-height:64px;background:#102231}
body[data-mode="presenter"] .nav-activity.selected{background:#153a31;border-color:#00f2aa80;color:#bcffe4}
body[data-mode="presenter"] .nav-number{width:28px;height:28px;border-color:#537183;font-size:11px}
body[data-mode="presenter"] .nav-title{font-size:13px}
body[data-mode="presenter"] .nav-status{font-size:10px;opacity:1;color:#a1becc}
body[data-mode="presenter"] .selected .nav-status{color:#a2e4ce}
body[data-mode="presenter"] .activity-panel{background:linear-gradient(135deg,#142b3a,#101f2e);border-color:#39566a;border-radius:9px}
body[data-mode="presenter"] .activity-topline{font-size:11px;padding:15px 26px;background:#0b182660}
body[data-mode="presenter"] .badge{font-size:11px;letter-spacing:.3px}
body[data-mode="presenter"] .activity-body{padding:26px 29px}
body[data-mode="presenter"] .activity-body h2{font-size:32px;margin-bottom:10px}
body[data-mode="presenter"] .activity-description{font-size:14px;line-height:1.7;margin-bottom:20px}
body[data-mode="presenter"] .activity-body>.eyebrow{font-size:10px}
body[data-mode="presenter"] .presenter-controls{background:#0c1c28;border-color:#416376;border-radius:7px;padding:18px;margin-bottom:23px}
body[data-mode="presenter"] .control-label{font-size:10px;color:#b6d1df}
body[data-mode="presenter"] .presenter-controls .button-row{gap:9px;margin:12px 0}
body[data-mode="presenter"] .timer-controls{border-color:#39586b;gap:10px}
body[data-mode="presenter"] .timer-controls .button{font-size:12px;min-height:40px}
body[data-mode="presenter"] .presenter-note{border-left:2px solid #f2c380;border-radius:0 6px 6px 0;background:#273d465e;padding:17px 19px;margin-bottom:21px}
body[data-mode="presenter"] .presenter-note .eyebrow{font-size:10px}
body[data-mode="presenter"] .presenter-note p{font-size:14px;line-height:1.7;color:#d2e2e9}
body[data-mode="presenter"] .chart-row-head{font-size:15px;line-height:1.5}
body[data-mode="presenter"] .chart-numbers{font-size:13px}
body[data-mode="presenter"] .chart-track{height:12px;border-radius:3px}
body[data-mode="presenter"] .chart-fill{border-radius:3px}
body[data-mode="presenter"] .debrief p{font-size:14px;line-height:1.7}
body[data-mode="presenter"] .debrief .eyebrow{font-size:10px}
body[data-mode="presenter"] .result-intro span,body[data-mode="presenter"] .chart-footnote{font-size:12px}
body[data-mode="presenter"] .activity-bottom{font-size:11px;padding:13px 26px}
.presenter-session-tools{margin-top:20px;padding-top:18px;border-top:1px solid #344e60}
body[data-mode="presenter"] .export-button{width:100%;margin:0;font-size:11px;gap:9px}
.presenter-session-tools>#new-session{margin:9px 8px 0;min-height:42px}
body[data-mode="presenter"] .history{margin:9px 8px 0;padding-top:16px;font-size:12px}
body[data-mode="presenter"] .history a{font-size:12px;line-height:1.6}
body[data-mode="presenter"] dialog{border-color:#517b6b;border-radius:10px;padding:30px}
body[data-mode="presenter"] dialog p{font-size:14px;line-height:1.7}
@media(min-width:1500px){
 body[data-mode="screen"] .stage-shell{padding-top:21px}
 body[data-mode="screen"] .stage-grid{gap:30px;min-height:calc(100dvh - 236px)}
 body[data-mode="screen"] .activity-body{padding:30px 39px}
 body[data-mode="screen"] .activity-topline{padding:17px 38px}
 body[data-mode="screen"] .activity-bottom{padding:15px 38px}
 body[data-mode="screen"] .stage-join{padding:28px 22px}
 body[data-mode="screen"] .stage-join .stage-join-note{font-size:15px}
 .stage-progress-step{font-size:12px}.stage-bottom{margin-top:22px}
 .stage-bottom>.eyebrow,.stage-bottom-habit{font-size:11px}.stage-clock>span{font-size:10px}
 body[data-mode="screen"] .timer-display{font-size:38px}
 body[data-mode="screen"] .stage-count{font-size:14px}
 .stage-wifi{font-size:15px}body[data-mode="screen"] .stage-wifi p{font-size:13px}
}
@media(max-height:800px) and (min-width:900px){
 body[data-mode="screen"] .site-header{height:56px}
 body[data-mode="screen"] .brand img{width:29px;height:29px}
 body[data-mode="screen"] .brand small{display:none}
 body[data-mode="screen"] .stage-shell{padding-top:10px;padding-bottom:4px}
 body[data-mode="screen"] .stage-top{min-height:28px;margin-bottom:8px}
 body[data-mode="screen"] .stage-top .button{min-height:28px;padding:5px 10px;font-size:10px}
 body[data-mode="screen"] .stage-grid{min-height:calc(100dvh - 177px);gap:20px}
 body[data-mode="screen"] .stage-join{padding:43px 16px 18px;justify-content:center}
 body[data-mode="screen"] .stage-join>.eyebrow{position:absolute;top:18px;left:18px;font-size:9px;letter-spacing:.9px}
 body[data-mode="screen"] .stage-join h1{display:none}.stage-qr-frame{width:200px}
 body[data-mode="screen"] .stage-join .join-url{margin-top:11px}
 body[data-mode="screen"] .stage-join .stage-join-note{display:none}
 .stage-live-metrics{margin-top:13px;padding-top:10px}
 .stage-clock{position:absolute;top:16px;right:18px;width:auto;border:0;padding:0;margin:0}
 .stage-clock>span{display:none}body[data-mode="screen"] .stage-clock .timer-display{font-size:21px}
 body[data-mode="screen"] .activity-body{padding:18px 24px}
 body[data-mode="screen"] .activity-body>.eyebrow{display:none}
 body[data-mode="screen"] .activity-body h2{font-size:30px;margin-bottom:10px}
 body[data-mode="screen"] .activity-description{font-size:16px;margin-bottom:15px}
 body[data-mode="screen"] .stage-panel:has(.debrief) .activity-description{display:none}
 body[data-mode="screen"] .activity-topline{min-height:36px;padding:8px 24px;font-size:10px}
 body[data-mode="screen"] .badge{font-size:10px}
 body[data-mode="screen"] .activity-bottom{min-height:32px;padding:8px 24px;font-size:10px}
 body[data-mode="screen"] .chart{gap:9px;margin-bottom:10px}
 body[data-mode="screen"] .chart-row-head{font-size:16px;margin-bottom:6px;line-height:1.35}
 body[data-mode="screen"] .chart-numbers{font-size:15px}
 body[data-mode="screen"] .chart-track{height:9px}
 body[data-mode="screen"] .result-intro{margin-bottom:10px}
 body[data-mode="screen"] .result-intro strong{font-size:26px}
 body[data-mode="screen"] .result-intro span{font-size:12px}
 body[data-mode="screen"] .chart-subtitle{font-size:15px;margin-bottom:13px}
 body[data-mode="screen"] .result-chart-grid:has(.result-chart-section:nth-child(2)) .chart-row-head{font-size:15px}
 body[data-mode="screen"] .result-chart-grid:has(.result-chart-section:nth-child(2)) .chart-numbers{font-size:15px}
 body[data-mode="screen"] .debrief{padding:11px 14px;margin-top:10px}
 body[data-mode="screen"] .debrief .eyebrow{font-size:9px;margin-bottom:5px}
 body[data-mode="screen"] .debrief p{font-size:16px;line-height:1.5}
 body[data-mode="screen"] .chart-footnote{font-size:11px;margin-bottom:6px}
 .stage-bottom{margin-top:8px;min-height:32px}
 .stage-progress-step{padding-top:5px;font-size:10px}
 .stage-wifi{margin-top:10px;padding-top:8px}
}
@media(max-width:1050px){
 .presenter-command-bar{gap:10px}.auto-close-option{font-size:11px}
 body[data-mode="presenter"] .presenter-grid{grid-template-columns:195px minmax(0,1fr);gap:20px}
 body[data-mode="presenter"] .stat{padding:16px}body[data-mode="presenter"] .stat small{font-size:10px}
 body[data-mode="presenter"] .activity-body{padding:24px}
 .stage-bottom-habit{display:none}.stage-bottom{gap:18px}.stage-progress-step{gap:5px;font-size:9px}
}
@media(max-width:760px){
 body[data-mode="audience"] .site-header{height:61px;padding:0 17px;gap:10px}
 body[data-mode="audience"] .brand{font-size:10px;gap:7px;letter-spacing:.1px;min-width:0}
 body[data-mode="audience"] .brand img{width:27px;height:27px}
 body[data-mode="audience"] .brand small{display:none}
 body[data-mode="audience"] .header-links{font-size:11px;gap:12px;flex:none}
 .header-share{font-size:11px;min-height:37px;padding:5px 8px}.header-share>span{font-size:17px}
 .participant-shell{padding:0 17px 100px}.participant-status{padding:13px 2px 12px;gap:10px}
 .participant-status .live-label{font-size:9px;letter-spacing:.6px}.participant-privacy{font-size:10px}
 .participant-progress{margin-bottom:14px}.progress-caption{font-size:9px;margin-bottom:7px}
 .participant-progress #activity-nav{gap:5px}
 .participant-progress .nav-activity{padding:8px 3px;min-height:40px;gap:0}
 .participant-progress .nav-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 .participant-progress .nav-number{font-size:12px}
 .participant-progress .nav-check{top:4px;right:4px;font-size:8px}
 body[data-mode="audience"] .activity-topline{padding:12px 17px;font-size:9px;min-height:42px}
 body[data-mode="audience"] .badge{font-size:9px}
 body[data-mode="audience"] .activity-body{padding:21px 18px 25px}
 body[data-mode="audience"] .activity-body>.eyebrow{display:none}
 body[data-mode="audience"] .activity-body h2{font-size:29px;letter-spacing:-.9px;margin-bottom:11px}
 body[data-mode="audience"] .activity-description{font-size:14px;line-height:1.6;margin-bottom:20px}
 body[data-mode="audience"] .activity-question{font-size:15px;line-height:1.5;margin-bottom:12px}
 body[data-mode="audience"] .choice{min-height:60px;padding:14px 13px;gap:12px}
 body[data-mode="audience"] .choice-text{font-size:14px}
 body[data-mode="audience"] .choice-text small{font-size:12px}
 body[data-mode="audience"] .choice input{width:19px;height:19px}
 body[data-mode="audience"] .activity-bottom{padding:12px 17px;font-size:9px;gap:8px}
 body[data-mode="audience"] .submit-dock{left:0;right:0;bottom:0;transform:none;width:100%;padding:13px 20px calc(13px + env(safe-area-inset-bottom));border-radius:12px 12px 0 0;border-width:1px 0 0;gap:15px;box-shadow:0 -6px 35px #0006;flex-wrap:nowrap}
 body[data-mode="audience"] .submit-dock .button{min-width:172px;min-height:51px;padding:12px 17px;font-size:14px}
 body[data-mode="audience"] .submit-dock .form-hint{max-width:180px;font-size:11px;line-height:1.5}
 body[data-mode="audience"] .form-hint{font-size:12px;max-width:unset}
 body[data-mode="audience"] .site-footer{margin:0 19px;padding:20px 0;font-size:8px}
 body[data-mode="audience"] .toast{bottom:100px;font-size:13px;width:max-content;max-width:calc(100% - 32px)}
 .participant-room{font-size:10px;gap:9px 17px;margin-top:17px}.participant-room a{font-size:9px}
 .participant-signoff{font-size:11px;margin-top:14px}.join-dialog{padding:21px 24px 25px}.join-dialog h2{font-size:26px}
 .submission-confirmation{padding:30px 4px}.submission-confirmation .confirmation-summary{font-size:14px}
 body[data-mode="audience"] .invoice-header{padding:15px 14px;flex-wrap:wrap;gap:7px}
 body[data-mode="audience"] .invoice-body{padding:14px}body[data-mode="audience"] .invoice-flag{font-size:13px}
 body[data-mode="audience"] .invoice-sender{font-size:13px}body[data-mode="audience"] .invoice-sender small{font-size:10px}
 body[data-mode="audience"] .chart-row-head{font-size:13px}body[data-mode="audience"] .chart-numbers{font-size:12px}
 body[data-mode="audience"] .debrief p{font-size:14px}
 body[data-mode="presenter"] .site-header{height:67px;padding:0 5%}
 body[data-mode="presenter"] .header-links{font-size:10px;gap:12px}body[data-mode="presenter"] .header-links>a:first-child{display:none}
 body[data-mode="presenter"] .presenter-shell{padding:0 5%}
 body[data-mode="presenter"] .page-heading{padding:24px 0 20px}
 body[data-mode="presenter"] .page-heading h1{font-size:29px}
 body[data-mode="presenter"] .page-heading p{font-size:12px;line-height:1.7}
 body[data-mode="presenter"] .page-heading .eyebrow{font-size:8px}
 body[data-mode="presenter"] .page-heading .button{font-size:11px;min-height:40px;white-space:nowrap}
 body[data-mode="presenter"] .stat{padding:13px 16px}body[data-mode="presenter"] .stat>span{font-size:9px}
 body[data-mode="presenter"] .stat strong{font-size:28px}body[data-mode="presenter"] .stat small{font-size:10px}
 .presenter-command-bar{position:sticky;top:0;margin:0 -5.6% 20px;padding:12px 5.6%;border-width:1px 0;border-radius:0;gap:9px}
 .presenter-step-controls{gap:8px}.presenter-step-controls .button{font-size:12px;min-height:42px;padding:10px 12px}
 .presenter-step-controls .text-button{font-size:11px}.auto-close-option{min-height:34px;font-size:11px}
 body[data-mode="presenter"] .presenter-grid{display:flex;gap:17px}body[data-mode="presenter"] .activity-sidebar{position:static}
 .presenter-grid #activity-nav{padding:0 1px 7px;gap:7px}
 body[data-mode="presenter"] .nav-activity{min-width:156px;width:156px;margin:0;padding:10px;gap:9px;min-height:58px}
 body[data-mode="presenter"] .nav-title{font-size:11px}body[data-mode="presenter"] .nav-status{font-size:9px}
 .presenter-session-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 0;padding:11px 0 0}
 body[data-mode="presenter"] .export-button{width:auto;font-size:10px;min-height:37px;padding:8px 12px}
 .presenter-session-tools>#new-session{margin:0;font-size:10px;min-height:37px}
 body[data-mode="presenter"] .history{width:100%;border:0;margin:0;padding:0;font-size:11px}
 body[data-mode="presenter"] .activity-body{padding:22px 20px}
 body[data-mode="presenter"] .activity-topline{padding:13px 20px;font-size:10px}body[data-mode="presenter"] .badge{font-size:10px}
 body[data-mode="presenter"] .activity-body h2{font-size:28px}body[data-mode="presenter"] .activity-description{font-size:13px}
 body[data-mode="presenter"] .presenter-note{padding:15px}body[data-mode="presenter"] .presenter-note p{font-size:13px}
 body[data-mode="presenter"] .presenter-controls{padding:15px}
 body[data-mode="presenter"] .presenter-controls .button{font-size:11px;min-height:42px;padding:10px 12px}
 body[data-mode="presenter"] .chart-row-head{font-size:13px}body[data-mode="presenter"] .chart-numbers{font-size:12px}
 body[data-mode="presenter"] .activity-bottom{padding:12px 20px;font-size:9px}
 .result-chart-grid:has(.result-chart-section:nth-child(2)){grid-template-columns:1fr;gap:20px}
}
@media(max-width:380px){
 body[data-mode="audience"] .site-header{padding:0 15px}body[data-mode="audience"] .header-links{gap:10px}
 body[data-mode="audience"] .brand img{width:27px;height:27px}body[data-mode="audience"] .brand{font-size:9px;gap:6px}
 body[data-mode="audience"] .brand small{letter-spacing:.7px}.participant-shell{padding:0 13px 100px}
 .participant-privacy{display:none}.participant-progress .nav-title{font-size:7px}
 body[data-mode="audience"] .activity-body{padding:21px 15px 23px}
 body[data-mode="audience"] .submit-dock{padding-left:16px;padding-right:16px;gap:12px}
 body[data-mode="audience"] .submit-dock .button{min-width:162px}body[data-mode="audience"] .submit-dock .form-hint{font-size:10px}
}
@media(max-width:899px){
 body[data-mode="screen"] .site-header{height:64px;padding:0 4%}
 body[data-mode="screen"] .brand{font-size:11px}.stage-header-label{font-size:9px;letter-spacing:.8px}
 body[data-mode="screen"] .stage-shell{padding:14px 4% 25px}.stage-session-label{font-size:8px;letter-spacing:.8px}
 body[data-mode="screen"] .stage-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-height:0}
 body[data-mode="screen"] .stage-panel{grid-row:1}
 body[data-mode="screen"] .stage-join{grid-row:2;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;align-items:center;justify-items:center}
 .stage-qr-frame{grid-column:1;grid-row:1/7;width:200px;max-width:100%}
 body[data-mode="screen"] .stage-join>.eyebrow,body[data-mode="screen"] .stage-join>h1,body[data-mode="screen"] .stage-join>.join-url,body[data-mode="screen"] .stage-join>.stage-join-note,.stage-live-metrics,.stage-clock,.stage-wifi{grid-column:2}
 body[data-mode="screen"] .stage-join h1{font-size:28px;margin:0}
 body[data-mode="screen"] .stage-join .join-url{font-size:14px;margin:0}
 body[data-mode="screen"] .stage-join .stage-join-note{font-size:11px;margin:0}
 .stage-live-metrics{padding-top:10px;margin-top:3px;gap:5px}.stage-clock{padding-top:10px;margin-top:3px;gap:8px}
 body[data-mode="screen"] .stage-count{font-size:9px;gap:0}body[data-mode="screen"] .stage-count strong{font-size:25px}
 body[data-mode="screen"] .timer-display{font-size:24px}.stage-clock>span{font-size:7px}
 .stage-bottom{gap:12px;flex-wrap:wrap;margin-top:18px}.stage-bottom>.eyebrow{font-size:8px}
 #stage-progress{gap:6px}.stage-progress-step{font-size:8px;padding-top:6px;display:block}
 .stage-progress-step>span:first-child{font-size:9px}.stage-progress-step>span:last-child{display:none}
 body[data-mode="screen"] .activity-body{padding:23px}body[data-mode="screen"] .activity-body h2{font-size:32px}
 body[data-mode="screen"] .activity-description{font-size:15px}body[data-mode="screen"] .chart-row-head{font-size:16px}
 body[data-mode="screen"] .chart-numbers{font-size:15px}body[data-mode="screen"] .debrief p{font-size:16px}
 body[data-mode="screen"] .stage-voting{min-height:235px}body[data-mode="screen"] .vote-pulse{gap:24px;--pulse-size:110px}
 body[data-mode="screen"] .vote-pulse .pulse-count{font-size:65px;letter-spacing:-4px}body[data-mode="screen"] .vote-pulse p{font-size:17px}
 body[data-mode="screen"] .stage-prompt{font-size:24px}body[data-mode="screen"] .activity-bottom{font-size:10px}
 .stage-wifi{font-size:11px}.stage-context{font-size:15px}
}
@media(max-width:480px){
 .stage-header-label{font-size:8px}.stage-header-label .signal-dot{display:none}
 body[data-mode="screen"] .stage-top .button{font-size:10px;padding:7px 8px}
 .stage-session-label{font-size:7px;max-width:200px}.stage-session-label .stage-slash{display:none}
 body[data-mode="screen"] .stage-join{padding:19px 15px;gap:8px 17px}.stage-qr-frame{width:155px}
 body[data-mode="screen"] .stage-join h1{font-size:23px}body[data-mode="screen"] .stage-join>.eyebrow{font-size:8px}
 body[data-mode="screen"] .stage-join .join-url{font-size:11px}
 body[data-mode="screen"] .stage-join .stage-join-note{font-size:10px}.stage-clock{display:none}
 body[data-mode="screen"] .stage-join .stage-count{font-size:8px}body[data-mode="screen"] .stage-count strong{font-size:23px}
 body[data-mode="screen"] .activity-body{padding:21px 18px}body[data-mode="screen"] .activity-body h2{font-size:29px}
 body[data-mode="screen"] .activity-topline{padding:12px 18px;font-size:9px}body[data-mode="screen"] .badge{font-size:9px}
 body[data-mode="screen"] .vote-pulse{gap:22px;padding-left:0;padding-right:0;--pulse-size:90px;grid-template-columns:90px minmax(0,160px)}
 body[data-mode="screen"] .vote-pulse .pulse-count{font-size:53px}body[data-mode="screen"] .vote-pulse>span{font-size:21px}
 body[data-mode="screen"] .vote-pulse p{font-size:15px}.vote-state-hint{font-size:15px}
 body[data-mode="screen"] .activity-bottom{padding:12px 18px;font-size:9px}
 body[data-mode="screen"] .chart-row-head{font-size:14px}body[data-mode="screen"] .chart-numbers{font-size:13px}
 body[data-mode="screen"] .debrief p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){body[data-mode] .pulse-ring{animation:none}body[data-mode] .chart-fill,body[data-mode] .choice{transition:none}}