:root{--kapi-leaf:#216e4f;--kapi-water:#145c4f;--kapi-clay:#8f422b;--kapi-canvas:#f0f5e6;--kapi-surface:#fcf7e6;--kapi-raised:#e6f0d4;--kapi-bark:#332114;--kapi-bark-muted:#63573d;--kapi-source:#145c4f;--kapi-correct:#2b7d47;--kapi-incorrect:#8f422b;--kapi-hint:#17707d;--kapi-quiet:#8f8063;--kapi-border:#c9bfa3;--kapi-focus:#0d7a7a;--kapi-fur:#c78344;--kapi-muzzle:#f4d99a;--kapi-feature:#291c12;--kapi-flower-red:#c95a57;--kapi-flower-gold:#e0b84c;--kapi-flower-orange:#d8793d;--kapi-flower-blue:#5b8fc7;--kapi-flower-lavender:#8b79b8;--kapi-moss:#4f662f;--kapi-canopy:#143d34;--kapi-canopy-soft:#1c4c41;--surface-canvas:var(--kapi-canvas);--surface-card:var(--kapi-surface);--surface-raised:var(--kapi-raised);--surface-deep:var(--kapi-canopy);--text-on-deep:var(--kapi-surface);--text-primary:var(--kapi-bark);--text-secondary:var(--kapi-bark-muted);--text-source:var(--kapi-source);--text-on-leaf:var(--kapi-surface);--text-quiet:var(--kapi-quiet);--action-primary:var(--kapi-leaf);--action-primary-text:var(--kapi-surface);--action-secondary:var(--kapi-raised);--action-secondary-text:var(--kapi-leaf);--state-correct:var(--kapi-correct);--state-incorrect:var(--kapi-incorrect);--state-hint:var(--kapi-hint);--border-subtle:var(--kapi-border);--focus-ring:var(--kapi-focus);--kapi-primary:var(--kapi-leaf);--kapi-secondary:var(--kapi-water);--kapi-neutral:var(--kapi-canvas);--kapi-text:var(--kapi-bark);--kapi-muted:var(--kapi-bark-muted);--font-rounded:"SF Pro Rounded", ui-rounded, "Nunito", system-ui, sans-serif;--font-body:"SF Pro Text", -apple-system, "Nunito Sans", system-ui, sans-serif;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-heavy:800;--type-display-size:34px;--type-display-lh:1.08;--type-display-wt:800;--type-h1-size:28px;--type-h1-lh:1.12;--type-h1-wt:800;--type-h2-size:20px;--type-h2-lh:1.18;--type-h2-wt:700;--type-body-lg-size:18px;--type-body-lg-lh:1.45;--type-body-lg-wt:400;--type-body-size:16px;--type-body-lh:1.45;--type-body-wt:400;--type-label-size:14px;--type-label-lh:1.2;--type-label-wt:600;--type-label-sm-size:12px;--type-label-sm-lh:1.2;--type-label-sm-wt:600;--letter-spacing:0;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:18px;--space-2xl:24px;--screen-margin:18px;--section-gap:18px;--card-inset:16px;--card-gap:14px;--answer-gap:10px;--kapi-gap:12px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--hit-target:44px;--control-height:46px;--kapi-head:64px;--groundcover-h:28px;--border-hairline:1px solid var(--border-subtle);--shadow-card:0 1px 2px #3321140d;--shadow-active:0 6px 18px #3321141a;--shadow-kapi:0 10px 24px #33211429;--focus-outline:3px solid var(--focus-ring);--focus-offset:3px;--ease-standard:cubic-bezier(.4, 0, .2, 1);--ease-gentle:cubic-bezier(.33, 0, .2, 1);--dur-fast:.12s;--dur-base:.2s;--dur-calm:.32s}
*{box-sizing:border-box}html,body{background:var(--surface-canvas);min-height:100%;color:var(--text-primary);font-family:var(--font-body);margin:0}a{color:inherit}.shell{min-height:100vh;padding:32px clamp(18px,4vw,56px)}.topbar,.hero,.steps{max-width:1040px;margin-left:auto;margin-right:auto}.topbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:42px;display:flex}.brand{font-family:var(--font-rounded);align-items:center;gap:12px;font-weight:800;display:flex}.klh-kapi{flex:none;display:inline-block;position:relative}.klh-kapi-img{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.hero{background:var(--kapi-surface);border:1px solid var(--kapi-border);border-radius:8px;padding:clamp(22px,5vw,48px);position:relative}h1{letter-spacing:0;max-width:820px;margin:0 0 20px;font-size:clamp(40px,8vw,78px);line-height:.96}h2{margin:0 0 10px;font-size:22px}p{color:var(--kapi-muted);font-family:var(--font-body);max-width:720px;margin:0;font-size:17px;line-height:1.55}.actions{flex-wrap:wrap;gap:10px;margin-top:28px;display:flex}.join-box{gap:10px;max-width:440px;margin-top:28px;display:flex}.join-box input{min-width:0;font:inherit;letter-spacing:.12em;text-transform:uppercase;color:var(--kapi-ink,#332114);background:var(--kapi-surface,#fff);border:1.5px solid var(--kapi-border,#3321142e);border-radius:8px;outline:none;flex:1;padding:12px 14px;font-size:17px;font-weight:700}.join-box input:focus{border-color:var(--kapi-primary);outline:3px solid var(--kapi-focus,#0d7a7a);outline-offset:2px}.join-box .button{cursor:pointer;font:inherit;border:0;flex:none;font-weight:800}.signin-link{color:var(--kapi-muted);border-radius:8px;padding:10px 14px;font-weight:700;text-decoration:none}.signin-link:hover,.signin-link:focus-visible{background:var(--kapi-raised);color:var(--kapi-text)}.hero .sub{margin-top:0;font-size:18px}.join-label{font-family:var(--font-rounded);margin:26px 0 8px;font-size:14px;font-weight:800;display:block}.join-entry .join-box{margin-top:0}.join-box-landing input{letter-spacing:.14em;min-height:52px;font-size:21px}.join-box-landing .button{min-height:52px;padding:13px 22px;font-size:17px}.join-box-landing input:disabled,.join-box-landing .button:disabled{opacity:.6;cursor:default}.join-error{color:var(--kapi-clay);align-items:center;gap:7px;min-height:0;margin:8px 0 0;font-size:14px;font-weight:600;display:flex}.join-error:empty{display:none}.classroom-shell .topbar{margin-bottom:24px}.classroom-hero{min-height:min(680px,100vh - 140px)}.classroom-code-label{color:var(--kapi-muted);font-family:var(--font-rounded);letter-spacing:0;margin-bottom:20px;font-size:14px;font-weight:800}.classroom-state,.classroom-board{gap:18px;display:grid}.classroom-state h1,.classroom-board h1{margin-bottom:0;font-size:clamp(38px,7vw,70px)}.classroom-class-name{color:var(--kapi-text);font-family:var(--font-rounded);font-weight:800}.classroom-spinner{animation:.9s linear infinite classroom-spin}@keyframes classroom-spin{to{transform:rotate(360deg)}}.classroom-name-list{gap:10px;max-width:520px;display:grid}.classroom-name-button{background:var(--kapi-surface);border:1.5px solid var(--kapi-border);color:var(--kapi-text);cursor:pointer;font:inherit;font-family:var(--font-rounded);text-align:left;border-radius:8px;justify-content:space-between;align-items:center;width:100%;min-height:58px;padding:14px 16px;font-size:20px;font-weight:800;display:flex}.classroom-name-button:hover,.classroom-name-button:focus-visible{border-color:var(--kapi-primary);outline:3px solid var(--kapi-focus);outline-offset:2px}.classroom-name-button:disabled{cursor:default;opacity:.62}.classroom-typed-claim{gap:8px;max-width:620px;display:grid}.classroom-typed-claim label{color:var(--kapi-muted);font-family:var(--font-rounded);font-size:14px;font-weight:800}.classroom-typed-row{gap:10px;display:flex}.classroom-typed-row input{background:var(--kapi-surface);border:1.5px solid var(--kapi-border);color:var(--kapi-text);font:inherit;border-radius:8px;outline:none;flex:240px;min-width:0;min-height:48px;padding:12px 14px;font-size:17px}.classroom-typed-row input:focus{border-color:var(--kapi-primary);outline:3px solid var(--kapi-focus);outline-offset:2px}.join-hints{color:var(--kapi-muted);gap:4px;margin-top:16px;font-size:14px;display:grid}.join-hints .no-code{font-size:13px}.returning{flex-direction:column;align-items:flex-start;gap:6px;max-width:1040px;margin:16px auto 0;display:flex}.returning-btn{background:var(--kapi-surface);border:1.5px solid var(--kapi-border);color:var(--kapi-text);border-radius:8px;align-items:center;gap:10px;min-height:48px;padding:11px 18px;font-weight:800;text-decoration:none;display:inline-flex}.returning-btn:hover,.returning-btn:focus-visible{border-color:var(--kapi-primary)}.google-g{flex:none;width:18px;height:18px}.returning-note{color:var(--kapi-muted);padding-left:2px;font-size:13px}.live-study{background:var(--surface-canvas);min-height:100vh}.live-study-context{flex-wrap:wrap;align-items:center;gap:8px;max-width:980px;margin:0 auto;padding:18px 18px 0;display:flex}.live-study-context span{background:var(--kapi-surface);border:1.5px solid var(--kapi-border);color:var(--kapi-muted);font-family:var(--font-rounded);border-radius:8px;padding:6px 9px;font-size:12.5px;font-weight:850}.live-study-context span:first-child{color:var(--kapi-text)}.live-media-rail{grid-template-columns:minmax(168px,.36fr) minmax(0,1fr);align-items:stretch;gap:12px;max-width:980px;margin:0 auto;padding:10px 18px 0;display:grid}.live-study[data-live-face-first="1"] .live-study-context,.live-study[data-live-face-first="1"] .live-media-rail{max-width:1100px}.live-study[data-live-face-first="1"] .live-media-rail{grid-template-columns:minmax(260px,.54fr) minmax(0,.46fr)}.live-media-frame{background:color-mix(in srgb, var(--kapi-raised) 64%, var(--kapi-surface));border:1.5px solid var(--kapi-border);color:var(--kapi-muted);font-family:var(--font-rounded);text-align:center;border-radius:8px;place-items:center;min-height:112px;padding:12px;font-size:13px;font-weight:800;display:grid;overflow:hidden}.live-study[data-live-face-first="1"] .live-media-frame{min-height:178px}.live-media-frame video{object-fit:cover;width:100%;height:100%;min-height:112px;display:block}.live-study[data-live-face-first="1"] .live-media-frame video{min-height:178px}.live-media-frame[data-empty="1"] video{display:none}.live-media-status{background:var(--kapi-surface);border:1.5px solid var(--kapi-border);border-radius:8px;align-content:center;gap:5px;min-width:0;padding:14px 16px;display:grid}.live-media-status strong{color:var(--kapi-text);font-family:var(--font-rounded);font-size:15px;font-weight:900}.live-media-status p{margin:0;font-size:13.5px}.live-media-status em{color:var(--kapi-muted);font-size:12.5px;font-style:normal;font-weight:700}.live-media-actions{flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px;display:flex}.live-media-local-preview{aspect-ratio:16/9;background:color-mix(in srgb, var(--kapi-raised) 68%, var(--kapi-surface));border:1.5px solid var(--kapi-border);color:var(--kapi-muted);border-radius:8px;flex:0 0 132px;place-items:center;min-height:72px;display:grid;overflow:hidden}.live-media-local-preview[data-active="0"] video{display:none}.live-media-local-preview video{object-fit:cover;width:100%;height:100%;display:block}.live-media-icon-group{grid-template-columns:repeat(2,44px);gap:8px;display:inline-grid}.live-media-icon-button{background:var(--kapi-surface);border:1.5px solid var(--kapi-border);color:var(--kapi-primary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:inline-flex}.live-media-icon-button[data-active="1"]{background:var(--kapi-raised);border-color:color-mix(in srgb, var(--kapi-primary) 40%, var(--kapi-border))}.live-media-icon-button:focus-visible{outline:3px solid var(--kapi-focus,#0d7a7a);outline-offset:2px}.live-media-icon-button:disabled{cursor:not-allowed;opacity:.55}.live-media-rail[data-state=connected] .live-media-frame,.live-media-rail[data-state=connected] .live-media-status{border-color:color-mix(in srgb, var(--kapi-primary) 34%, var(--kapi-border))}.live-media-rail[data-state=error] .live-media-frame,.live-media-rail[data-state=error] .live-media-status,.live-media-rail[data-state=unavailable] .live-media-frame,.live-media-rail[data-state=unavailable] .live-media-status{border-color:color-mix(in srgb, var(--kapi-clay) 34%, var(--kapi-border))}.live-lobby-shell{align-items:center;display:grid}.live-lobby-panel{background:var(--kapi-surface);border:1.5px solid var(--kapi-border);box-shadow:var(--shadow-soft,0 18px 50px #32211414);border-radius:8px;gap:18px;width:min(100%,760px);max-width:760px;margin:0 auto;padding:clamp(22px,5vw,44px);display:grid}.live-lobby-kicker{flex-wrap:wrap;gap:8px;display:flex}.live-lobby-kicker span{background:var(--kapi-raised);border:1px solid var(--kapi-border);color:var(--kapi-primary);text-transform:uppercase;border-radius:8px;padding:6px 9px;font-size:12px;font-weight:850}.live-lobby-panel h1{overflow-wrap:anywhere;margin-bottom:0;font-size:clamp(34px,7vw,58px)}.live-lobby-readiness{border:1.5px solid var(--kapi-border);border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px;display:grid}.live-lobby-readiness span,.live-lobby-readiness strong{background:var(--kapi-raised);color:var(--kapi-muted);overflow-wrap:anywhere;text-align:center;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-width:0;min-height:44px;padding:8px;display:flex}.live-lobby-readiness strong{color:var(--kapi-text);font-weight:900}.live-lobby-readiness[data-live-lobby-readiness=ready]{border-color:color-mix(in srgb, var(--kapi-primary) 42%, var(--kapi-border))}.live-lobby-readiness[data-live-lobby-readiness=blocked]{border-color:color-mix(in srgb, var(--kapi-clay) 42%, var(--kapi-border))}.live-lobby-panel .button{cursor:pointer;font:inherit;border:0;justify-self:start}.live-lobby-panel .button:disabled{cursor:not-allowed;opacity:.6}.live-lobby-notice,.live-lobby-error{max-width:100%;font-size:14px;font-weight:750}.live-lobby-error{color:var(--kapi-clay)}.tile-icon{color:var(--kapi-primary);margin-bottom:10px;display:block}.trust-band{border-top:1px solid var(--kapi-border);max-width:1040px;margin:30px auto 0;padding:20px 0 0}.trust-band .kicker{color:var(--kapi-secondary);font-family:var(--font-rounded);letter-spacing:0;margin-bottom:10px;font-size:13px;font-weight:800}.trust-band ul{gap:6px;margin:0 0 10px;padding:0;list-style:none;display:grid}.trust-band li{align-items:center;gap:8px;font-size:15px;display:flex}.trust-band li svg{color:var(--kapi-primary);flex:none}.trust-band .studio-note{color:var(--kapi-muted);font-size:14px}.site-footer{border-top:1px solid var(--kapi-border);color:var(--kapi-muted);gap:18px;max-width:1040px;margin:26px auto 0;padding:14px 0 4px;font-size:13.5px;display:flex}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover,.site-footer a:focus-visible{color:var(--kapi-text)}.button{background:var(--kapi-primary);color:var(--kapi-surface);border-radius:8px;justify-content:center;padding:13px 16px;font-weight:800;text-decoration:none;display:inline-flex}.button.secondary{background:var(--kapi-raised);color:var(--kapi-primary)}.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px;display:grid}.tile{border:1px solid var(--kapi-border);background:#fcf7e6b8;border-radius:8px;padding:18px}.invite{color:var(--kapi-secondary);word-break:break-word;font-weight:800}@media (max-width:760px){.topbar{flex-direction:row;align-items:center}.steps,.live-media-rail,.live-study[data-live-face-first="1"] .live-media-rail{grid-template-columns:1fr}}@media (max-width:560px){.join-box-landing{flex-direction:column;max-width:none}.join-box-landing .button,.returning,.returning-btn{width:100%}.returning-btn{justify-content:center}}