/* app/web/style.css */
@font-face{font-family:IRLotus;src:url('/static/IRLotus.woff') format('woff');font-display:swap}
:root{
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;
  --ink:#1c3733;--muted:#677a73;--teal:#206351;--deep:#163e36;--mint:#edf4ec;--lime:#d6e7b5;--paper:#f6f7f2;--white:#fff;--amber:#f3e6c9;--danger:#a33838;
  --line:#dfe5dd;--border:1px solid var(--line);--radius:.9rem;--radius-small:.55rem;--radius-large:1.6rem;--pill:5rem;
  --font-tiny:.85rem;--font-small:1rem;--font-body:1.2rem;--font-subheading:1.45rem;--font-heading:1.9rem;--font-display:2.6rem;--font-hero:4rem;--font-art:7rem;
  --sidebar:16rem;--measure:90rem;--input-height:3rem;--logo:2.9rem;--orb:7rem;--avatar:2.5rem;--transcript:22rem;--card-height:15rem;--login-width:27rem;--art-height:40rem;
  --stroke:2px;--shadow:0 .3rem 1.5rem #17392b05;--shadow-raised:0 .7rem 2rem #17392b0b;--transition:.18s;--ring:0 0 0 var(--space-1) #20635122;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:IRLotus,serif;font-size:var(--font-body);line-height:1.7}
button,input,select,textarea{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{border:var(--border);border-radius:var(--radius-small);background:var(--white);color:var(--ink);padding:var(--space-2) var(--space-4);cursor:pointer;min-height:var(--input-height);transition:background var(--transition),border-color var(--transition),box-shadow var(--transition)}
button:hover{background:var(--mint);border-color:#b1c7b8}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:var(--stroke) solid var(--teal);outline-offset:var(--space-1)}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0 0 var(--space-3)}
h1{font-size:var(--font-display);line-height:1.5;font-weight:700;letter-spacing:-.025em}
h2{font-size:var(--font-heading);line-height:1.5}
h3{font-size:var(--font-subheading)}
p,small,.subtle{color:var(--muted)}
small,.subtle{font-size:var(--font-small)}
label{display:block;margin-bottom:var(--space-2);font-size:var(--font-small);font-weight:700}
input:not([type=checkbox],[type=range],[type=radio]),select,textarea{width:100%;min-width:0;border:var(--border);border-radius:var(--radius-small);padding:var(--space-2) var(--space-3);background:var(--white);color:var(--ink);min-height:var(--input-height)}
input[type=range]{width:100%;accent-color:var(--teal)}
input[type=radio]{width:var(--space-4);height:var(--space-4);accent-color:var(--teal);flex-shrink:0}
input[type=checkbox]{accent-color:var(--teal);flex-shrink:0;width:var(--space-4);height:var(--space-4)}
textarea{resize:vertical}
form>button{margin-top:var(--space-4)}
.primary{background:var(--teal);border-color:var(--teal);color:var(--white)}
.primary:hover{background:var(--deep);border-color:var(--deep)}
.light-button{background:var(--lime);border-color:var(--lime);color:var(--deep);font-weight:700}
.light-button:hover{background:var(--white)}
.full-width{width:100%}
.text-button,.text-link{color:var(--teal);background:transparent;border-color:transparent;font-weight:700}
.text-button:hover{background:var(--mint)}
.danger{color:var(--danger);background:#fff9f7}
.icon-button{font-size:var(--font-small);padding:var(--space-1) var(--space-2);min-height:auto}
.brand{display:flex;gap:var(--space-3);align-items:center}
.brand img{width:var(--logo);height:var(--logo)}
.brand strong{display:block;font-size:var(--font-heading);line-height:1.2}
.brand small{display:block;font-size:var(--font-tiny);margin-top:var(--space-1)}
.overline,.eyebrow{display:block;color:var(--teal);font-size:var(--font-small);margin-bottom:var(--space-2)}
.overline:before{content:"";display:inline-block;width:var(--space-5);height:var(--stroke);background:currentColor;vertical-align:middle;margin-inline-end:var(--space-2)}
.pill{display:inline-flex;align-items:center;gap:var(--space-1);border:var(--border);padding:var(--space-1) var(--space-3);border-radius:var(--pill);font-size:var(--font-small);white-space:nowrap;background:var(--white)}
.pill.soft{border-color:transparent;background:var(--mint);color:var(--teal)}
.dot{display:inline-block;width:var(--space-2);height:var(--space-2);border-radius:50%;background:#75a37b;margin-inline-end:var(--space-1)}
.panel{border:var(--border);border-radius:var(--radius);background:var(--white);padding:var(--space-5);box-shadow:var(--shadow);margin-bottom:var(--space-5);min-width:0}
.icon-tile{display:inline-grid;place-items:center;width:var(--space-7);height:var(--space-7);border-radius:var(--radius-small);background:var(--mint);color:var(--teal);font-size:var(--font-heading);flex-shrink:0}
.icon-tile.amber{background:var(--amber);color:#876734}
.icon-tile.large{width:var(--space-8);height:var(--space-8);margin-bottom:var(--space-5)}
.controls{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.launch-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;background:var(--mint);border:var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-5);margin-top:var(--space-5)}
.launch-bar small{display:block}
#setup{scroll-margin-block:var(--space-5)}
.centered{justify-content:center}
.student-speech{border:var(--border);border-radius:var(--radius);padding:var(--space-4);background:var(--mint);margin-block:var(--space-4)}
.student-speech[data-speaking=true]{border-color:var(--teal);box-shadow:var(--ring)}
.student-speech[data-speaking=true] .pill{background:var(--teal);color:var(--white)}
.live-caption{min-height:var(--space-8);max-height:var(--transcript);overflow:auto;white-space:pre-wrap;color:var(--ink);font-size:var(--font-subheading);padding-block:var(--space-3);overflow-wrap:anywhere}
.instructor-director{border-color:var(--teal);background:var(--mint)}
#interventionHistory{max-height:var(--transcript);overflow:auto;margin-top:var(--space-4);overflow-wrap:anywhere}
.section-heading,.page-heading,.session-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.section-heading{margin-bottom:var(--space-4)}
.section-heading h2,.section-heading h3{margin:0}
.page-heading{margin:var(--space-6) 0}
.page-heading p{margin:0}
.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}
.skip-link{position:fixed;top:var(--space-2);inset-inline-start:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--deep);color:var(--white);z-index:20;transform:translateY(-200%)}
.skip-link:focus{transform:none}
footer{text-align:center;color:var(--muted);font-size:var(--font-small);padding:var(--space-6) var(--space-4)}
.portal-nav{display:flex;justify-content:space-between;align-items:center;max-width:var(--measure);margin:auto;padding:var(--space-6) var(--space-7)}
.portal-layout{max-width:var(--measure);margin:auto;padding:var(--space-5) var(--space-7);display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-9);align-items:center}
.portal-copy h1{font-size:var(--font-hero);max-width:12ch;line-height:1.4;margin:var(--space-5) 0}
.lead{font-size:var(--font-subheading);max-width:42ch;line-height:1.9}
.role-cards{display:grid;gap:var(--space-3);margin-top:var(--space-6)}
.role-card{display:flex;align-items:center;gap:var(--space-4);border:var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-5);background:var(--white);transition:box-shadow var(--transition),border-color var(--transition)}
.role-card:hover{border-color:var(--teal);box-shadow:var(--shadow-raised)}
.role-card h2{font-size:var(--font-subheading);margin:0}
.role-card p{font-size:var(--font-small);margin:var(--space-1) 0 0}
.role-card>span:last-child{margin-inline-start:auto;color:var(--teal)}
.portal-footnotes{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-5);color:var(--muted);font-size:var(--font-small)}
.portal-footnotes span:before{content:"✓";margin-inline-end:var(--space-2);color:var(--teal)}
.portal-art{height:var(--art-height);background:var(--deep);border-radius:var(--radius-large);position:relative;overflow:hidden;isolation:isolate;color:var(--white)}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:var(--space-7) var(--space-7)}
.art-orbit{position:absolute;border:1px solid #ffffff16;aspect-ratio:1;border-radius:50%;width:90%;left:5%;top:5%}
.orbit-two{width:64%;left:18%;top:15%;border-color:#ffffff21}
.art-core{position:absolute;inset-inline:0;top:24%;display:grid;place-items:center}
.art-core img{width:var(--space-9);height:var(--space-9);box-shadow:0 0 var(--space-9) #d3f0a52a;border-radius:var(--space-6);transform:rotate(-8deg)}
.art-caption{position:absolute;bottom:var(--space-7);inset-inline:var(--space-7);text-align:center}
.art-caption strong{display:block;font-size:var(--font-display);margin:var(--space-2) 0}
.art-caption span,.art-caption small{color:#c3d7c7}
.art-caption svg{width:100%;height:var(--space-9);margin:var(--space-4) 0}
svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art-caption svg{color:var(--lime)}
.art-label{position:absolute;top:var(--space-6);inset-inline-start:var(--space-6);font-size:var(--font-small);border:1px solid #ffffff25;border-radius:var(--pill);padding:var(--space-1) var(--space-3);color:var(--lime)}
.sidebar{width:var(--sidebar);position:fixed;inset-block:0;inset-inline-start:0;background:var(--white);border-inline-end:var(--border);padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;z-index:4;overflow:auto}
.workspace-label{margin:var(--space-6) 0 var(--space-5);background:var(--mint);font-size:var(--font-small);color:var(--teal);padding:var(--space-2) var(--space-3);border-radius:var(--radius-small)}
.side-caption{font-size:var(--font-tiny);color:var(--muted);padding-inline:var(--space-3);margin-bottom:var(--space-2)}
.nav-button{display:flex;align-items:center;gap:var(--space-3);border:0;background:transparent;width:100%;text-align:start;margin-bottom:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--font-body)}
.nav-button .nav-symbol{font-family:system-ui,sans-serif;width:var(--space-5);text-align:center;font-size:var(--font-small);color:var(--muted)}
.nav-button.active{background:var(--mint);color:var(--teal);font-weight:700}
.nav-button.active .nav-symbol{color:var(--teal)}
.sidebar-callout{margin-top:auto;padding:var(--space-5) var(--space-3) var(--space-6)}
.sidebar-callout .icon-tile{margin-bottom:var(--space-3)}
.sidebar-callout strong{display:block}
.sidebar-callout p{font-size:var(--font-small);margin-top:var(--space-2)}
.sidebar-footer{border-top:var(--border);padding-top:var(--space-4);display:flex;gap:var(--space-2);align-items:center;font-size:var(--font-small)}
.sidebar-footer small{display:block;font-size:var(--font-tiny)}
.sidebar-footer button{margin-inline-start:auto}
.avatar{display:grid;place-items:center;width:var(--avatar);height:var(--avatar);background:var(--amber);color:#735728;border-radius:50%;font-weight:700;flex-shrink:0}
main{margin-inline-start:var(--sidebar);padding:0 var(--space-7);max-width:calc(var(--measure) + var(--sidebar))}
.topbar{min-height:var(--space-9);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);border-bottom:var(--border)}
.breadcrumb,.topbar-meta{display:flex;gap:var(--space-3);align-items:center;font-size:var(--font-small)}
.breadcrumb>span,.topbar-meta>span:first-child{color:var(--muted)}
.login-layout{display:grid;grid-template-columns:1fr minmax(0,var(--login-width));gap:var(--space-7);align-items:center;min-height:calc(100vh - 12rem)}
.login-intro h1{max-width:15ch;font-size:var(--font-hero);line-height:1.4}
.login-panel{padding:var(--space-7)}
.privacy-note{font-size:var(--font-small);border-top:var(--border);padding-top:var(--space-4);margin-top:var(--space-5)}
.login-steps{padding:0;list-style:none;margin:var(--space-6) 0}
.login-steps li{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-3);color:var(--muted)}
.login-steps li>span{border:var(--border);border-radius:50%;width:var(--space-6);height:var(--space-6);display:grid;place-items:center;color:var(--teal);font-size:var(--font-small)}
.welcome{background:var(--deep);color:var(--white);border-radius:var(--radius);padding:var(--space-6) var(--space-7);margin-bottom:var(--space-5);display:grid;grid-template-columns:1.7fr 1fr;gap:var(--space-5);overflow:hidden}
.welcome h2{font-size:var(--font-display);max-width:25ch}
.welcome p{color:#c5d9cc;max-width:55ch;margin-bottom:var(--space-5)}
.hero-kicker{color:var(--lime);display:block;font-size:var(--font-small);margin-bottom:var(--space-3)}
.hero-symbol{display:grid;place-items:center;position:relative;align-content:center;min-height:var(--card-height);color:var(--lime)}
.hero-symbol svg{width:100%;max-width:var(--card-height);position:relative}
.hero-symbol span{position:relative;font-size:var(--font-small);color:#b6d1bf;margin-top:var(--space-3)}
.symbol-ring{position:absolute;width:var(--card-height);height:var(--card-height);border:1px solid #ffffff14;border-radius:50%;box-shadow:0 0 0 var(--space-5) #ffffff04,0 0 0 var(--space-7) #ffffff03}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-7)}
.stat-card{background:var(--white);border:var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-5);display:flex;align-items:center;gap:var(--space-4);min-width:0}
.stat-card strong{font-size:var(--font-display);display:block;line-height:1.2}
.stat-card small{font-size:var(--font-small)}
.stat-card .icon-tile{margin-inline-start:auto}
.scenario-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.scenario-card{position:relative;min-height:var(--card-height);padding:var(--space-5);border-radius:var(--radius);display:flex;flex-direction:column;align-items:stretch;text-align:start;gap:var(--space-3);background:var(--white);box-shadow:var(--shadow)}
.scenario-card:hover{box-shadow:var(--shadow-raised)}
.scenario-card.selected{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:#f3f8ef}
.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.card-bottom{margin-top:auto;border-top:var(--border);padding-top:var(--space-3);font-size:var(--font-small);color:var(--teal)}
.scenario-number{color:var(--muted);font-size:var(--font-small)}
.scenario-card strong{font-size:var(--font-subheading)}
.scenario-card p{font-size:var(--font-small);margin:0}
.card-tag{font-size:var(--font-tiny);background:var(--mint);padding:0 var(--space-2);border-radius:var(--radius-small);color:var(--teal)}
.dashboard-bottom,.admin-overview-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:var(--space-5)}
.learning-note{background:#f3efe2}
.learning-note .icon-tile{margin-bottom:var(--space-3)}
.learning-note p{font-size:var(--font-small)}
.empty-state{text-align:center;padding:var(--space-7) var(--space-5)}
.empty-state>span{display:block;font-size:var(--font-display);color:#9faf9d}
.empty-state h2,.empty-state h3{font-size:var(--font-subheading)}
.empty-state p{font-size:var(--font-small);max-width:45ch;margin-inline:auto}
.preflight{display:flex;flex-wrap:wrap;gap:var(--space-5);border-bottom:var(--border);padding-bottom:var(--space-4);margin-bottom:var(--space-5);font-size:var(--font-small);color:var(--muted)}
.preflight span:before{content:"✓";color:var(--teal);margin-inline-end:var(--space-2)}
.setup-form{display:grid;grid-template-columns:1fr 1.8fr auto;gap:var(--space-5);align-items:center}
.setup-form button{margin:0}
.consent{display:flex;align-items:flex-start;gap:var(--space-2);font-weight:400;color:var(--muted)}
.session-toolbar{margin-top:var(--space-6)}
.session-toolbar h1{font-size:var(--font-heading);margin:0}
.session-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:var(--space-5)}
.voice-stage{background:var(--paper);border-radius:var(--radius);padding:var(--space-6) var(--space-4);text-align:center}
.voice-orb{width:var(--orb);height:var(--orb);border-radius:50%;background:radial-gradient(circle at 30% 30%,#dfeac2,#63987b);color:var(--deep);margin:var(--space-3) auto var(--space-6);display:grid;place-items:center;box-shadow:0 0 0 var(--space-3) #e5edde,0 0 0 var(--space-5) #eef2e7}
.voice-orb span{font-size:var(--font-hero)}
.voice-stage[data-state=speaking] .voice-orb{animation:breathe 1.7s ease-in-out infinite}
.voice-hint,.ambient-control{font-size:var(--font-small)}
.ambient-control{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-4) 0 0;color:var(--muted);font-weight:400}
.transcript-heading{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-5)}
.transcript-heading h3{font-size:var(--font-body);margin:0}
#transcript{height:var(--transcript);overflow:auto;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-3);scrollbar-width:thin}
.bubble{padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:var(--paper);max-width:90%;overflow-wrap:anywhere}
.bubble.student{background:var(--mint);align-self:flex-start}
.bubble.agent{align-self:flex-end}
.bubble.system{border:var(--border);background:#fffdf4;align-self:center}
.bubble small{display:block;font-size:var(--font-tiny)}
.bubble p{color:var(--ink);margin:0}
.text-form{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
.text-form button{margin:0}
#latency{display:block;text-align:center;margin-top:var(--space-3);font-size:var(--font-tiny)}
.monitor{background:#15342f;color:#dfecdc;border-color:#15342f}
.monitor small{color:#b2c7b9}
.monitor-wave{color:#acdd9f;opacity:.7}
.monitor-wave svg{width:100%;height:var(--space-8)}
.monitor-wave[data-idle=true]{opacity:.2}
.vital{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);border-bottom:1px solid #ffffff18;padding:var(--space-3) 0}
.vital strong{font-size:var(--font-heading);color:#c4eaa9;font-variant-numeric:tabular-nums}
.inquiry-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0}
.inquiry-buttons button{font-size:var(--font-small)}
#facts p{font-size:var(--font-small);border-bottom:var(--border);padding-bottom:var(--space-2)}
.safety-note{background:#f5f1e5}
.safety-note p{font-size:var(--font-small);margin:var(--space-2) 0 0}
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.guide-grid .panel{margin:0 0 var(--space-3)}
.guide-grid .icon-tile{margin-bottom:var(--space-4)}
.dark-panel{background:var(--deep);color:var(--white);position:relative;overflow:hidden}
.dark-panel .overline{color:var(--lime)}
.dark-panel p{color:#c4d3c5;position:relative;z-index:1}
.dark-panel button{position:relative;z-index:1}
.dark-panel-mark{position:absolute;bottom:0;left:var(--space-4);font-size:var(--font-art);color:#ffffff0c;line-height:1}
.performance-row{padding:var(--space-4) 0;border-bottom:var(--border)}
.performance-row:last-child{border:0}
.performance-label{display:flex;justify-content:space-between;gap:var(--space-3)}
progress{width:100%;height:var(--space-2);border:0;border-radius:var(--pill);overflow:hidden;accent-color:var(--teal);background:var(--mint)}
progress::-webkit-progress-bar{background:var(--mint);border-radius:var(--pill)}
progress::-webkit-progress-value{background:var(--teal);border-radius:var(--pill)}
.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:var(--space-5)}
#profileForm label{margin-top:var(--space-3)}
.range-label{display:flex;align-items:center;justify-content:space-between}
.range-label output{color:var(--teal);font-size:var(--font-small)}
#definition{font-family:monospace;font-size:var(--font-tiny);line-height:1.8}
.summary-row{border-bottom:var(--border);padding:var(--space-3) 0}
.summary-row strong{display:block;margin-bottom:var(--space-1)}
.summary-row p{margin:0;font-size:var(--font-small)}
.advanced-editor{margin-top:var(--space-5)}
.advanced-editor p{font-size:var(--font-small);margin-top:var(--space-3)}
.filter-bar{display:grid;grid-template-columns:2fr 1fr auto;gap:var(--space-4);align-items:end;padding-bottom:var(--space-5);border-bottom:var(--border);margin-bottom:var(--space-3)}
.session-table{width:100%;border-collapse:collapse;text-align:start}
.table-scroll{overflow:auto}
.session-table th{color:var(--muted);font-size:var(--font-small);font-weight:400;background:var(--paper);white-space:nowrap}
.session-table td,.session-table th{padding:var(--space-3) var(--space-4);border-bottom:var(--border);text-align:start}
.session-table td{font-size:var(--font-small)}
.session-table .student-code{font-family:system-ui,sans-serif;font-size:var(--font-tiny)}
.status-tag{display:inline-block;border-radius:var(--pill);padding:var(--space-1) var(--space-3);font-size:var(--font-tiny);background:var(--mint);color:var(--teal);white-space:nowrap}
.status-tag.pending{background:#f8eed9;color:#876734}
.history-detail{padding:var(--space-4);background:var(--paper)}
.history-detail .bubble{margin-bottom:var(--space-3)}
.history-meta{display:flex;flex-wrap:wrap;gap:var(--space-4);padding-bottom:var(--space-3);font-size:var(--font-small)}
.history-detail .controls{margin-bottom:var(--space-4)}
.score-heading{font-size:var(--font-hero);color:var(--teal)}
.criterion{padding:var(--space-4) 0;border-bottom:var(--border)}
.criterion p{margin:var(--space-2) 0;font-size:var(--font-small)}
details{border-bottom:var(--border);padding:var(--space-3) 0}
summary{cursor:pointer}
#notice{padding:var(--space-4);background:#fff2de;border:1px solid #ecd3a9;border-radius:var(--radius);margin-top:var(--space-4)}
#notice[data-success=true]{background:var(--mint);border-color:#b7d0ba}
#audioTracks{display:none}
.booting #workspaceShell,.booting #portal{opacity:0}
@keyframes breathe{50%{transform:scale(1.035);filter:brightness(1.08)}}
@media(min-width:100rem){main{padding-inline:var(--space-8)}.portal-layout{gap:var(--space-9)}}
@media(max-width:80rem){.stat-card{gap:var(--space-2);padding:var(--space-4)}.stat-card .icon-tile{display:none}.portal-layout{gap:var(--space-7)}.portal-copy h1,.login-intro h1{font-size:var(--font-display)}.setup-form{grid-template-columns:1fr 2fr}.setup-form button{grid-column:1/-1}.login-layout{gap:var(--space-5)}}
@media(max-width:64rem){.sidebar{position:static;width:auto;padding:var(--space-4) var(--space-5);border-inline-end:0;border-bottom:var(--border)}.sidebar .brand small,.sidebar-callout,.sidebar-footer,.workspace-label,.side-caption{display:none}.sidebar .brand{margin-bottom:var(--space-3)}.sidebar nav{display:flex;gap:var(--space-2);overflow:auto}.nav-button{width:auto;white-space:nowrap;margin:0;flex-shrink:0}.nav-button .nav-symbol{display:none}main{margin:0;padding-inline:var(--space-5)}.login-layout{min-height:auto;margin-top:var(--space-7)}.portal-layout{gap:var(--space-5);padding-inline:var(--space-5)}.portal-art{height:calc(var(--art-height) - var(--space-9))}.portal-nav{padding:var(--space-5)}.session-grid{grid-template-columns:minmax(0,1fr)}.monitor-column{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}.monitor-column .safety-note{grid-column:1/-1}.admin-grid{grid-template-columns:1fr 1.3fr}.sidebar-footer:has(button:not([hidden])){display:flex;position:absolute;top:var(--space-4);inset-inline-end:var(--space-5);border:0;padding:0}.sidebar-footer>div{display:none}}
@media(max-width:48rem){.portal-layout{grid-template-columns:1fr}.portal-art{height:26rem;order:2}.portal-copy h1{max-width:18ch;font-size:var(--font-hero)}.portal-copy .lead{max-width:unset}.art-orbit{width:70%;left:15%;top:-25%}.orbit-two{width:50%;left:25%;top:-5%}.art-core{top:13%}.art-core img{width:var(--space-8);height:var(--space-8)}.art-caption{bottom:var(--space-5)}.art-caption strong{font-size:var(--font-heading)}.art-caption svg{height:var(--space-7);margin:var(--space-2) 0}.portal-nav .pill{font-size:var(--font-tiny)}.login-layout{grid-template-columns:1fr}.login-intro .lead{max-width:none}.login-intro h1{max-width:none;font-size:var(--font-display)}.login-steps{display:none}.login-panel{max-width:none}.scenario-grid{grid-template-columns:1fr}.scenario-card{min-height:auto}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.dashboard-bottom,.admin-overview-grid,.admin-grid,.guide-grid{grid-template-columns:1fr}.welcome{grid-template-columns:1fr;padding:var(--space-5)}.hero-symbol{display:none}.welcome h2{font-size:var(--font-heading)}.topbar-meta>span:first-child{display:none}.page-heading{align-items:flex-start;flex-direction:column}.filter-bar{grid-template-columns:1fr 1fr}.filter-bar button{grid-column:1/-1}.setup-form{grid-template-columns:1fr}.monitor-column{grid-template-columns:1fr}.session-toolbar{align-items:flex-start;flex-direction:column}h1{font-size:var(--font-heading)}}
@media(max-width:30rem){main{padding-inline:var(--space-4)}.portal-copy h1{font-size:var(--font-display)}.portal-nav .brand small{display:none}.portal-nav,.portal-layout{padding-inline:var(--space-4)}.portal-nav .pill{max-width:50%;white-space:normal}.portal-footnotes{gap:var(--space-2)}.login-panel{padding:var(--space-5)}.role-card{padding:var(--space-4);gap:var(--space-3)}.section-heading{flex-wrap:wrap}.stat-card strong{font-size:var(--font-heading)}.voice-stage{padding-inline:var(--space-3)}}
:root{--help-width:24rem;--popover-layer:30}
.help{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.help-trigger{border:0;border-radius:var(--pill);min-height:var(--space-6);min-width:var(--space-6);padding:var(--space-1);color:var(--teal);background:var(--mint);font-size:var(--font-body)}
.help-popup{position:absolute;inset-inline-end:0;top:100%;width:var(--help-width);max-width:calc(100vw - var(--space-8));padding:var(--space-4);border:var(--border);border-radius:var(--radius);background:var(--white);color:var(--ink);box-shadow:var(--shadow-raised);font-size:var(--font-small);font-weight:400;z-index:var(--popover-layer);visibility:hidden;opacity:0;white-space:normal;text-align:start}
.help-popup strong,.help-popup>span{display:block}.help-popup strong{margin-bottom:var(--space-2)}
.help:hover .help-popup,.help:focus-within .help-popup,.help[data-open=true] .help-popup{visibility:visible;opacity:1}
.help[data-dismissed=true] .help-popup{visibility:hidden;opacity:0}
.student-identity,.file-session,.saved-file{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.student-identity strong{font-size:var(--font-heading)}
.student-identity small,.session-table td small,.saved-file small,#roomStudentIdentity{display:block;color:var(--muted)}
.identity-form,.instructor-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);align-items:end}
.identity-form>button,.instructor-form>button{margin:0}.full-span{grid-column:1/-1}
.path-control{display:flex;gap:var(--space-3);align-items:center}.path-control input{flex:1;min-width:0}
.local-folder-setup{display:grid;gap:var(--space-2);align-content:center}
.storage-choice{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-5);padding:var(--space-4);border:var(--border);border-radius:var(--radius)}
.storage-choice legend{padding:0 var(--space-2);font-weight:700}
.storage-choice label{display:flex;align-items:center;gap:var(--space-2);margin:0;cursor:pointer}
.storage-choice small{grid-column:1/-1}
.saved-file{padding-block:var(--space-4);border-bottom:var(--border)}
.saved-file strong{overflow-wrap:anywhere}#savedAudioPlayer{margin-top:var(--space-4)}#savedAudioPlayer audio{display:block;width:100%;margin-top:var(--space-3)}
#storageDirectory,#sessionDirectory{font-size:var(--font-tiny)}
.setup-form{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-form .consent{grid-column:1/-1}
@media(max-width:48rem){.identity-form,.instructor-form,.setup-form{grid-template-columns:1fr}.path-control{flex-wrap:wrap}.help-popup{width:min(var(--help-width),calc(100vw - var(--space-8)))}}
@media(max-width:48rem){.storage-choice{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}