/* Shared visual language with the lesson library; the classroom stays isolated. */
@font-face{font-family:'Library Sans';src:url('/fonts/dm-sans-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Library Sans';src:url('/fonts/dm-sans-semibold.ttf') format('truetype');font-weight:500 800;font-display:swap}
@font-face{font-family:'Library Serif';src:url('/fonts/newsreader-regular.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'Library Serif';src:url('/fonts/newsreader-italic.ttf') format('truetype');font-weight:400 700;font-style:italic;font-display:swap}
:root{
 --trial-paper:#f7f4ee;--trial-panel:#fffcf6;--trial-raised:#eee8ef;--trial-ink:#362d39;--trial-muted:#736975;--trial-line:#ded7d2;--trial-accent:#59465e;--trial-on-accent:#fffaf5;--trial-soft:#e9e0eb;--trial-focus:#956747;
 --trial-good:#406452;--trial-good-soft:#e3ece3;--trial-bad:#995141;--trial-bad-soft:#f4e5dc;
 --font-sans:'Library Sans',sans-serif;--ease:cubic-bezier(.2,.7,.2,1);
 --color-slate-50:var(--trial-paper);--color-slate-100:var(--trial-raised);--color-slate-200:var(--trial-line);--color-slate-300:var(--trial-line);--color-slate-400:var(--trial-muted);--color-slate-500:var(--trial-muted);--color-slate-600:var(--trial-muted);--color-slate-700:var(--trial-ink);--color-slate-800:var(--trial-ink);--color-slate-900:var(--trial-accent);
 --color-indigo-50:var(--trial-soft);--color-indigo-100:var(--trial-soft);--color-indigo-200:var(--trial-line);--color-indigo-300:var(--trial-line);--color-indigo-400:var(--trial-accent);--color-indigo-500:var(--trial-accent);--color-indigo-600:var(--trial-accent);--color-indigo-700:var(--trial-accent);--color-indigo-900:var(--trial-accent);--color-cyan-500:var(--trial-accent);--color-violet-600:var(--trial-accent);
 --color-green-50:var(--trial-good-soft);--color-green-100:var(--trial-good-soft);--color-green-200:var(--trial-good);--color-green-600:var(--trial-good);--color-green-700:var(--trial-good);--color-green-800:var(--trial-good);
 --color-red-50:var(--trial-bad-soft);--color-red-100:var(--trial-bad-soft);--color-red-200:var(--trial-bad);--color-red-600:var(--trial-bad);--color-red-700:var(--trial-bad);
}
:root[data-theme="dark"]{--trial-paper:#19171b;--trial-panel:#242127;--trial-raised:#302a34;--trial-ink:#eee8e3;--trial-muted:#c1b4c2;--trial-line:#514657;--trial-accent:#d7bfd4;--trial-on-accent:#29232b;--trial-soft:#39303f;--trial-focus:#dfba9b;--trial-good:#b4d4bb;--trial-good-soft:#2a3a30;--trial-bad:#edb7a5;--trial-bad-soft:#44302e}
html,body{margin:0;min-height:100%;background:var(--trial-paper);color:var(--trial-ink);font-family:'Library Sans',sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--trial-soft);color:var(--trial-ink)}
#root .trial-studio{background:var(--trial-paper);color:var(--trial-ink);min-height:100dvh;padding-top:12px}
#root .trial-tabs{position:relative;top:0;width:calc(100% - 80px);max-width:1160px;margin:0 auto 30px;padding:0;border:0;border-bottom:1px solid var(--trial-line);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;animation:none}
#root .trial-tabs>div{justify-content:space-between;gap:20px;padding:0;overflow:visible}
#root .trial-tabs button{border-radius:0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:15px 0;background:none!important;color:var(--trial-muted);box-shadow:none;font-size:12px;font-weight:500;gap:8px}
#root .trial-tabs button svg{width:16px;height:16px;stroke-width:1.5}
#root .trial-tabs button[aria-current="page"]{color:var(--trial-accent);border-color:var(--trial-accent);font-weight:600}
#root .trial-tabs button:hover{color:var(--trial-ink)}
#root .trial-content{max-width:1160px;padding:0 0 48px;margin:auto}
#root h1,#root h2,#root h3{font-family:'Library Serif',Georgia,serif;font-weight:400;letter-spacing:-.025em;text-wrap:balance;color:var(--trial-ink)}
#root h2{font-size:clamp(34px,3.5vw,48px);line-height:1.08}#root h3{font-size:clamp(25px,2.8vw,35px);line-height:1.2}
#root h2 span{font-style:italic;color:var(--trial-accent)}#root p{line-height:1.65;text-wrap:pretty}
#root button,#root input,#root textarea,#root select{font-family:'Library Sans',sans-serif}
#root button{font-weight:500;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);cursor:pointer}
#root button:active:not(:disabled){transform:translateY(1px)}#root button:disabled{cursor:default}
#root :is(button,input,textarea,select,audio):focus-visible{outline:2px solid var(--trial-focus);outline-offset:4px}
#root :is(input,textarea,select){background:var(--trial-panel);color:var(--trial-ink);border-color:var(--trial-line);font-size:14px}
#root :is(input,textarea)::placeholder{color:var(--trial-muted);opacity:1}
#root .text-white{color:var(--trial-on-accent)}
#root [class*="bg-white"]{background:var(--trial-panel);border-color:var(--trial-line)}
#root [class*="shadow"]{box-shadow:none}
#root [class*="bg-gradient"],#root [class*="bg-[radial"]{background-image:none}
#root [class*="bg-clip-text"]{background-image:none;color:var(--trial-ink);background-clip:border-box}
#root [class*="backdrop-blur"]{backdrop-filter:none}
#root [class*="blur"]:not([class*="backdrop-blur"]){display:none}
#root [class*="animate-"]{animation:none}
#root button[class*="bg-gradient"],#root button.bg-slate-900{background:var(--trial-accent);color:var(--trial-on-accent)}
#root button[class*="bg-gradient"]:hover,#root button.bg-slate-900:hover,#root button.bg-indigo-600:hover{background:var(--trial-accent);filter:brightness(1.1)}
#root [class*="rounded-[3"],#root [class*="rounded-[2.5"]{border-radius:20px}
#root [class*="border-white"]{border-color:var(--trial-line)}
#root .absolute[class*="bg-gradient"]{display:none}
#root .trial-discovery,#root .trial-check,#root .trial-speaking,#root .trial-listening,#root .trial-goals{padding:8px 0 20px;animation:none}
#root :is(.trial-discovery,.trial-check,.trial-speaking)>.text-center{margin-bottom:24px}
#root :is(.trial-discovery,.trial-check,.trial-speaking)>.text-center p{font-size:14px;max-width:65ch;margin:12px auto}
#root .trial-discovery .min-h-\[400px\]{min-height:300px;padding:40px 55px;background:var(--trial-panel)}
#root .trial-discovery .min-h-\[400px\] h3{max-width:36ch;margin:0 auto;font-size:clamp(29px,3.2vw,42px)}
#root .trial-discovery .min-h-\[400px\] .mt-14{margin-top:28px}
#root .trial-discovery .min-h-\[400px\] .text-indigo-100{color:var(--trial-accent);opacity:.4}
#root .trial-speaking .flex-1{background:var(--trial-panel)}
#root .trial-speaking .md\:w-80{background:var(--trial-soft);color:var(--trial-ink);border-color:var(--trial-line);border-radius:20px}
#root .trial-speaking .md\:w-80 :is(.text-indigo-200,.text-yellow-400){color:var(--trial-accent);fill:none}
#root .trial-speaking .md\:w-80 li{background:var(--trial-panel);border-color:var(--trial-line);color:var(--trial-ink)}
#root .trial-listening{max-width:850px}
#root .trial-listening h2{margin:0 0 14px}#root .trial-listening audio{width:100%;border-radius:10px}
#root .trial-goals>header{margin:0 0 24px;text-align:left}#root .trial-goals>header h2{margin:6px 0 12px}
#root .trial-goals>header p{font-size:14px;max-width:70ch}
#root .bubble-pool{padding:22px 12px;background:var(--trial-panel);border:1px solid var(--trial-line);border-radius:20px;gap:8px 12px}
#root .bubble-slot{--goal-bg:#d5e1d1;--goal-ink:#425e47;width:218px;height:204px}
#root .bubble-slot:nth-child(2){--goal-bg:#e2d5e5;--goal-ink:#64516c}#root .bubble-slot:nth-child(3){--goal-bg:#ecdcc3;--goal-ink:#755934}#root .bubble-slot:nth-child(4){--goal-bg:#d4e3e0;--goal-ink:#3f625b}#root .bubble-slot:nth-child(5){--goal-bg:#ead1cf;--goal-ink:#7d504c}#root .bubble-slot:nth-child(6){--goal-bg:#d6dce9;--goal-ink:#4f5c7b}#root .bubble-slot:nth-child(7){--goal-bg:#e9d6c6;--goal-ink:#7c593f}
#root .goal-bubble{background:var(--goal-bg);color:var(--goal-ink);border:1px solid color-mix(in srgb,var(--goal-ink) 18%,transparent);box-shadow:inset 0 1px 0 #ffffff50;transition:width .32s var(--ease),height .32s var(--ease),outline-color .2s var(--ease);padding:12px;text-align:center}
#root .goal-bubble[data-selected="true"]{outline:2px solid var(--goal-ink);outline-offset:5px}
#root .goal-bubble-label{font-family:'Library Serif',Georgia,serif;font-size:22px;font-weight:400;letter-spacing:-.02em}
#root .goal-bubble-level{font-family:'Library Sans',sans-serif;font-size:11px;font-weight:500;background:color-mix(in srgb,var(--goal-ink) 9%,transparent)}
#root .bubble-control{border-color:var(--trial-line);background:var(--trial-panel);color:var(--trial-accent)}
:root[data-theme="dark"] #root .bubble-slot{--goal-bg:#303e32;--goal-ink:#c6d9b6}
:root[data-theme="dark"] #root .bubble-slot:nth-child(2){--goal-bg:#403347;--goal-ink:#dcc3e3}:root[data-theme="dark"] #root .bubble-slot:nth-child(3){--goal-bg:#443b29;--goal-ink:#ead6a9}:root[data-theme="dark"] #root .bubble-slot:nth-child(4){--goal-bg:#2d403c;--goal-ink:#b8d8cc}:root[data-theme="dark"] #root .bubble-slot:nth-child(5){--goal-bg:#463332;--goal-ink:#e8beb5}:root[data-theme="dark"] #root .bubble-slot:nth-child(6){--goal-bg:#333b4a;--goal-ink:#c6d0e5}:root[data-theme="dark"] #root .bubble-slot:nth-child(7){--goal-bg:#46392f;--goal-ink:#e9c7a8}
.trial-welcome{display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:20px 70px;min-height:540px;padding:26px 0 0}
.trial-eyebrow{font-size:10px;letter-spacing:.17em;color:var(--trial-muted);margin:0 0 22px}
#root .trial-welcome h1{font-size:clamp(52px,5.8vw,78px);line-height:.98;letter-spacing:-.045em;margin:0 0 24px}
.trial-welcome h1 em{color:var(--trial-accent);font-weight:400}
.trial-welcome-lead{font-size:15px;max-width:49ch;color:var(--trial-muted);margin:0 0 28px}
#root .trial-primary{display:inline-flex;align-items:center;gap:27px;background:var(--trial-accent);color:var(--trial-on-accent);padding:8px 8px 8px 24px;font-size:14px;border-radius:100px;border:1px solid var(--trial-accent)}
.trial-primary>span{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;background:var(--trial-panel);color:var(--trial-accent);font-size:19px;transition:transform .2s var(--ease)}.trial-primary:hover>span{transform:translate(1px,-1px)}
.trial-welcome-art{height:350px;position:relative;width:330px;max-width:100%;justify-self:center}
.welcome-orbit{position:absolute;display:grid;place-items:center;border-radius:50%;font-family:'Library Serif',Georgia,serif;box-shadow:inset 0 1px 0 #ffffff70}
.orbit-speak{width:190px;height:190px;background:#d5e1d1;color:#425e47;left:0;top:0;font-size:40px}.orbit-listen{width:142px;height:142px;right:0;top:32px;background:#e2d5e5;color:#64516c;font-size:31px}.orbit-grow{width:110px;height:110px;left:165px;top:172px;background:#e9d6c6;color:#7c593f;font-size:27px}
.trial-welcome-art>p{position:absolute;bottom:0;left:5px;font:24px/1.2 'Library Serif',Georgia,serif;color:var(--trial-muted);margin:0}
.trial-agenda{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;border-top:1px solid var(--trial-line);padding-top:22px;margin-top:24px}
.trial-agenda>div{display:flex;gap:12px;align-items:baseline}.trial-agenda>div>span{font-size:10px;color:var(--trial-muted);font-variant-numeric:tabular-nums}.trial-agenda p{font-size:12px;color:var(--trial-ink);margin:0}.trial-agenda small{display:block;color:var(--trial-muted);font-size:10px;margin-top:3px}
:root[data-theme="dark"] .orbit-speak{background:#303e32;color:#c6d9b6}:root[data-theme="dark"] .orbit-listen{background:#403347;color:#dcc3e3}:root[data-theme="dark"] .orbit-grow{background:#46392f;color:#e9c7a8}
@media(max-width:900px){#root .trial-tabs{width:calc(100% - 40px)}#root .trial-content{padding:0 24px 36px}.trial-welcome{gap:24px;grid-template-columns:1.4fr 1fr}.trial-welcome-art{transform:scale(.8);transform-origin:center}.trial-agenda{gap:12px}}
@media(max-width:650px){#root .trial-tabs>div{gap:10px;overflow-x:auto}#root .trial-tabs button{padding:13px 7px}.trial-welcome{grid-template-columns:1fr;padding-top:10px;min-height:0}.trial-welcome-art{display:none}.trial-agenda{grid-template-columns:repeat(3,1fr);gap:18px}.trial-welcome-lead{font-size:14px}#root .trial-discovery .min-h-\[400px\]{padding:28px 20px}.trial-welcome h1{font-size:52px}#root .bubble-slot{width:150px;height:204px}}
@media(prefers-reduced-motion:reduce){#root *,#root *::before,#root *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#root nav.trial-tabs{background:transparent}
#root [role="progressbar"]>div{background:var(--trial-accent)}
#root .goal-bubble-label{font-size:clamp(16px,calc(var(--bubble-size) * .115),22px)}
#root .trial-check>div[class*="backdrop-blur"]{padding:24px 30px;border-radius:20px}
#root .trial-check>div[class*="backdrop-blur"] h3{font-size:28px;line-height:1.25;margin-bottom:20px}
#root .trial-check>div[class*="backdrop-blur"] .space-y-4>button{padding:12px 18px;border-width:1px;font-size:16px;border-radius:12px}
#root .trial-check>div[class*="backdrop-blur"] .space-y-4>:not(:last-child){margin-bottom:10px}
#root .trial-check>div[class*="backdrop-blur"] .mb-6{margin-bottom:18px}
/* An embedded classroom participates in the page scroll, rather than trapping it. */
html[data-embedded="true"],html[data-embedded="true"] body{min-height:0;height:auto;overflow:hidden}
html[data-embedded="true"] #root .trial-studio{min-height:0}
#root .trial-tabs{position:static}
#root .goal-universe{position:relative;width:100%;height:500px;isolation:isolate;background:var(--trial-panel);border:1px solid var(--trial-line);border-radius:24px;overflow:hidden;contain:layout paint}
#root .goal-universe .bubble-slot{position:static;width:0;height:0;margin:0;padding:0}
#root .goal-universe .goal-bubble{position:absolute;left:0;top:0;margin:0;will-change:transform;width:96px;height:96px;min-width:0;transition:background-color .2s var(--ease),outline-color .2s var(--ease);touch-action:manipulation}
#root .goal-universe .goal-bubble:hover{filter:brightness(1.06)}
#root .goal-universe .goal-bubble:active{transform:none}
#root .goal-universe .goal-bubble-label{font-size:clamp(16px,calc(var(--bubble-size,96px) * .14),36px);max-width:100%;line-height:1.15}
#root .goal-universe .goal-bubble-level{font-size:clamp(10px,calc(var(--bubble-size,96px) * .065),16px)}
#root .trial-goals>header{margin-bottom:20px}
@media(max-width:650px){#root .goal-universe{height:550px}}
#root .goal-universe .goal-bubble{border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;flex-shrink:0;color:var(--goal-ink);border:1px solid color-mix(in srgb,var(--goal-ink) 18%,transparent)}
#root .goal-bubble-level{padding:3px 9px;border-radius:20px}
#root .bubble-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#root .bubble-control{width:38px;height:38px;border:1px solid var(--trial-line);border-radius:50%;font-size:21px;background:var(--trial-panel);color:var(--trial-accent)}
#root .bubble-control:disabled{opacity:.3;cursor:default}
/* Planning belongs to the conversation, alongside the existing class activities. */
#root .trial-availability{max-width:1120px;margin:auto;padding:8px 0 20px}
#root .trial-availability>header{margin:0 0 26px}
#root .availability-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px;align-items:start}
#root .availability-week,#root .availability-questions{background:var(--trial-panel);border:1px solid var(--trial-line);border-radius:20px;padding:26px}
#root .trial-availability h3{font-size:28px;line-height:1.15;margin:0 0 20px}
#root .availability-grid{display:grid;grid-template-columns:84px repeat(7,minmax(0,1fr));gap:8px;align-items:center;margin:24px 0}
#root .availability-day{text-align:center;font-size:11px;color:var(--trial-muted);padding-bottom:6px}
#root .availability-period{font-size:11px;color:var(--trial-muted)}
#root .availability-slot{display:grid;place-items:center;min-width:0;height:42px;border:1px solid var(--trial-line);border-radius:10px;background:var(--trial-paper);color:var(--trial-muted);font-size:20px;line-height:1}
#root .availability-slot:hover{border-color:var(--trial-accent)}
#root .availability-slot[aria-pressed="true"]{background:var(--trial-soft);border-color:var(--trial-accent);color:var(--trial-accent)}
#root .trial-availability label{display:block;font-size:12px;color:var(--trial-muted)}
#root .trial-availability :is(input,textarea){display:block;width:100%;margin-top:9px;padding:12px 14px;border:1px solid var(--trial-line);border-radius:10px;background:var(--trial-paper);color:var(--trial-ink);font-size:13px;line-height:1.5;resize:vertical}
#root .availability-frequency{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:26px;padding-top:24px;border-top:1px solid var(--trial-line)}
#root .availability-frequency h3{font-size:24px;margin-bottom:8px;max-width:20ch}
#root .availability-frequency p{font-size:12px;color:var(--trial-muted);margin:0}
#root .frequency-stepper{display:flex;align-items:center;gap:12px;flex-shrink:0}
#root .frequency-stepper button{display:grid;place-items:center;width:34px;height:34px;background:var(--trial-paper);border:1px solid var(--trial-line);border-radius:50%;color:var(--trial-accent);font-size:20px;line-height:1}
#root .frequency-stepper button:disabled{opacity:.3}
#root .frequency-stepper output{font-size:24px;font-family:'Library Serif',Georgia,serif;min-width:1.5ch;text-align:center;font-variant-numeric:tabular-nums}
#root .availability-topics{display:flex;flex-wrap:wrap;gap:8px}
#root .availability-topics button{border:1px solid var(--trial-line);background:var(--trial-paper);color:var(--trial-muted);padding:8px 12px;font-size:11px;border-radius:100px}
#root .availability-topics button[aria-pressed="true"]{background:var(--trial-soft);border-color:var(--trial-accent);color:var(--trial-accent)}
#root .availability-prompt{font:26px/1.3 'Library Serif',Georgia,serif;margin:28px 0;color:var(--trial-ink);min-height:100px}
#root .availability-summary{margin-top:22px;padding:18px 24px;border-left:2px solid var(--trial-accent);background:var(--trial-soft);border-radius:0 12px 12px 0}
#root .availability-summary>span{font-size:10px;color:var(--trial-muted);letter-spacing:.06em}
#root .availability-summary p{font-size:13px;margin:6px 0 0;color:var(--trial-ink)}
@media(max-width:900px){#root .availability-layout{grid-template-columns:1fr}#root .availability-prompt{min-height:0}#root .trial-tabs>div{gap:10px}#root .trial-tabs button{font-size:11px}}
@media(max-width:650px){#root .availability-grid{grid-template-columns:65px repeat(7,minmax(0,1fr));gap:4px}#root .availability-period,#root .availability-day{font-size:9px}#root .availability-week,#root .availability-questions{padding:18px}#root .availability-frequency{flex-wrap:wrap}}
