.classroom{--u:min(1vh, .5625vw);--screen-bg:#fff;--screen-ink:#1b1f3b;--screen-muted:#4b5175;--screen-line:#eceef5;--accent-coral:#ff5a5f;--accent-sun:#ffc93c;--accent-sky:#2ea8ff;--accent-grass:#2bc48a;--accent-violet:#6d4aff;--accent-pink:#ff6fb5;--character-body:#ff9f43;--character-belly:#ffe0b8;--character-cheek:#ff6b8a;--character-ink:#2b2340;--shadow-soft:0 calc(var(--u) * 1.2) calc(var(--u) * 4) #1b1f3b1a, 0 0 0 1px #1b1f3b0a;--panel-bg:#fffffff0;--panel-ink:#1b1f3b;--panel-button:#f2f3f8;--panel-button-hover:#e8eaf3;--panel-pressed:#efeaff;--panel-pressed-ink:#3d22c4;--panel-primary:#6d4aff;--panel-primary-ink:#fff;--ease-out:cubic-bezier(.23, 1, .32, 1);box-sizing:border-box;gap:calc(var(--u) * 4);height:100dvh;padding:calc(var(--u) * 6);background:var(--screen-bg);color:var(--screen-ink);display:grid;position:relative;overflow:hidden}.classroom *,.classroom :before,.classroom :after{box-sizing:inherit}.classroom[data-layout=side]{grid-template-columns:3fr 2fr;grid-template-areas:"character info"}.classroom[data-layout=stacked]{grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"character""info"}.classroom[data-layout=stacked] .classroom__info{grid-template-columns:1fr 1fr;align-items:end}.classroom[data-panel=hidden]{cursor:none}.classroom p{margin:0}.classroom__character{grid-area:character;place-items:center;min-height:0;display:grid}.classroom__info{align-content:center;gap:calc(var(--u) * 7);grid-area:info;min-width:0;display:grid}.classroom__status{top:calc(var(--u) * 2.5);right:calc(var(--u) * 3);gap:calc(var(--u) * 1.5);margin:0;padding:0;list-style:none;display:flex;position:absolute}.chip{align-items:center;gap:calc(var(--u) * 1.2);padding:calc(var(--u) * .9) calc(var(--u) * 2.2);box-shadow:var(--shadow-soft);font-size:calc(var(--u) * 3.2);background:#fff;border-radius:999px;font-weight:700;display:flex}.chip:before{content:"";width:calc(var(--u) * 1.6);height:calc(var(--u) * 1.6);background:var(--accent-coral);border-radius:50%}.character{justify-items:center;margin:0;display:grid}.character__art{height:calc(var(--u) * 64);width:auto}.classroom[data-layout=stacked] .character__art{height:calc(var(--u) * 42)}.classroom__character{isolation:isolate;position:relative}.classroom__character:before{content:"";z-index:-1;width:calc(var(--u) * 60);height:calc(var(--u) * 60);background:#fff1d1;border-radius:50%;position:absolute}.classroom[data-layout=stacked] .classroom__character:before{width:calc(var(--u) * 40);height:calc(var(--u) * 40)}.creature__body{fill:var(--character-body);stroke:var(--character-ink)}.creature__belly{fill:var(--character-belly)}.creature__ink{fill:var(--character-ink)}.creature__cheek{fill:var(--character-cheek)}.creature__mouth{fill:none;stroke:var(--character-ink)}.timer{justify-items:center;gap:calc(var(--u) * 1.5);display:grid}.timer__label{padding:calc(var(--u) * .8) calc(var(--u) * 3.5);font-size:calc(var(--u) * 5);background:var(--accent-sky);color:var(--screen-ink);border-radius:999px;font-weight:800}.timer[data-phase=running] .timer__label{background:var(--accent-violet);color:#fff}.timer[data-phase=paused] .timer__label{background:var(--accent-sun)}.timer[data-phase=finished] .timer__label{background:var(--accent-grass)}.timer__digits{font-size:calc(var(--u) * 22);font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-weight:800;line-height:1}.timer[data-phase=finished] .timer__digits{color:#0e8a5f}.progress{gap:calc(var(--u) * 1.8);justify-items:center;display:grid}.progress__label{font-size:calc(var(--u) * 4.5);color:var(--screen-muted);font-weight:700}.progress__value{font-size:calc(var(--u) * 8);font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-weight:800;line-height:1}.bar{width:100%;height:calc(var(--u) * 4.5);background:var(--screen-line);border-radius:999px;overflow:hidden}.bar__fill{border-radius:inherit;background:linear-gradient(90deg, var(--accent-pink), var(--accent-violet));transform-origin:0;height:100%;transition:transform .6s var(--ease-out)}.stars{gap:calc(var(--u) * 1.5);display:flex}.star{width:calc(var(--u) * 10);height:calc(var(--u) * 10);fill:var(--screen-line)}.star--on{fill:var(--accent-sun);stroke:var(--screen-ink);stroke-width:1px}.panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(16px)saturate(1.6);backdrop-filter:blur(16px)saturate(1.6);width:max-content;max-width:calc(100% - 32px);color:var(--panel-ink);transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);border-radius:18px;flex-wrap:wrap;align-items:center;gap:12px;padding:10px;font-size:16px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #1b1f3b0f,0 12px 40px #1b1f3b24,0 2px 8px #1b1f3b0f}.classroom[data-panel=hidden] .panel{opacity:0;pointer-events:none;transform:translate(-50%,12px)}.panel__group{flex-wrap:wrap;gap:6px;display:flex}.panel__group--end{align-items:center;gap:10px}.panel__group-label{color:var(--screen-muted);align-self:center;margin-right:2px;font-size:14px}.panel__button--narrow{min-width:44px;padding:0 10px}.panel__button{background:var(--panel-button);min-height:44px;color:inherit;font:inherit;cursor:pointer;transition:background-color .15s ease, transform .12s var(--ease-out);border:0;border-radius:12px;padding:0 12px;font-weight:600}.panel__button:active:not(:disabled){transform:scale(.97)}.panel__button:focus-visible{outline:3px solid var(--accent-violet);outline-offset:2px}.panel__button:disabled{opacity:.45;cursor:default}.panel__button[aria-pressed=true]{background:var(--panel-pressed);color:var(--panel-pressed-ink);box-shadow:inset 0 0 0 2px var(--accent-violet)}.panel__button--primary{background:var(--panel-primary);color:var(--panel-primary-ink)}@media (hover:hover) and (pointer:fine){.panel__button:hover:not(:disabled,[aria-pressed=true],.panel__button--primary){background:var(--panel-button-hover)}}.panel kbd{font:inherit;background:#1b1f3b12;border-radius:6px;margin-left:6px;padding:1px 6px;font-size:13px;font-weight:500}.panel__button--primary kbd{background:#fff3}.health{background:#b8bdd1;border-radius:50%;width:12px;height:12px}.health--ok{background:var(--accent-grass)}.health--degraded,.health--offline{background:var(--accent-sun)}@media (prefers-reduced-transparency:reduce){.panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}}@media (prefers-reduced-motion:reduce){.panel,.classroom[data-panel=hidden] .panel{transition:opacity .15s linear;transform:translate(-50%)}.bar__fill,.panel__button{transition:none}}:root{color:#1b1f3b;background:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{margin:0}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}