.glass-page{min-height:100dvh;color:var(--ink);background:radial-gradient(60% 40% at 50% 12%, var(--brand-glow), transparent 70%), linear-gradient(#f2f0ff, #fff 70%)}html[data-theme=dark] .glass-page,.dark .glass-page{background:radial-gradient(60% 40% at 50% 12%,#20ffff38,#0000 70%),radial-gradient(80% 60% at 50% 100%,#0d1a26,#0000 70%),#0b1220}.glass-card{--a:var(--brand-deep);background:color-mix(in srgb, var(--surface) 55%, transparent);-webkit-backdrop-filter:blur(18px)saturate(160%);box-shadow:0 0 0 1.5px color-mix(in srgb, var(--a) 55%, white 45%), 0 0 28px color-mix(in srgb, var(--a) 45%, transparent), 0 18px 32px -14px #0a0e2873;border:none;border-radius:26px;position:relative;overflow:hidden}.glass-card[data-role=student]{--a:var(--student-bar)}.glass-card[data-role=teacher]{--a:var(--teacher-bar)}.glass-card[data-role=parent]{--a:var(--parent-bar)}.glass-card[data-role=principal]{--a:var(--principal-bar)}.glass-card:before{content:"";pointer-events:none;background:linear-gradient(#ffffff73,#0000 38%);position:absolute;inset:0}.glass-pill{--a:var(--brand-deep);min-height:var(--tap);border-radius:var(--r-full);font-family:var(--font-display);color:var(--white);background:linear-gradient(color-mix(in srgb, var(--a) 70%, white), var(--a), color-mix(in srgb, var(--a) 75%, black));box-shadow:inset 0 2px 0 var(--clay-edge), inset 0 -3px 6px var(--clay-inner-shade);border:none;justify-content:center;align-items:center;padding:0 20px;font-size:clamp(16px,4.3vw,20px);font-weight:800;display:inline-flex}.glass-logo{filter:drop-shadow(0 0 18px var(--brand-glow))}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-card{background:color-mix(in srgb, var(--surface) 92%, transparent)}}.glass-card-in{animation:glassCardIn .32s var(--ease-out) both;animation-delay:calc(var(--i,0) * 60ms)}@keyframes glassCardIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.brand-mark{align-items:center;gap:.35em;display:inline-flex}.brand-mark__name{font-family:var(--font-display);letter-spacing:.02em;background:linear-gradient(100deg,#1d4ed8 0%,#4f46e5 55%,#7e22ce 100%);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:800;line-height:1}html[data-theme=dark] .brand-mark__name{background-image:linear-gradient(100deg,#67e8f9 0%,#93c5fd 50%,#c4b5fd 100%)}.landing-page{box-sizing:border-box;min-height:100dvh;padding:calc(12px + var(--inset-top)) calc(16px + var(--inset-right)) calc(16px + var(--inset-bottom)) calc(16px + var(--inset-left));color:var(--ink);font-family:var(--font-body,inherit);flex-direction:column;justify-content:flex-start;gap:12px;display:flex}.landing-top{justify-content:space-between;gap:8px;display:flex}.landing-lang{min-height:48px;color:var(--ink-soft);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 10px;font-weight:700;text-decoration:underline}.landing-main{text-align:center;flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.landing-logo-wrap{justify-content:center;width:100%;display:flex}.landing-logo{object-fit:contain;width:auto;max-width:min(78%,400px);max-height:160px;margin:0 auto;display:block}.landing-tagline{font-family:var(--font-display,inherit);max-width:24ch;margin:0;font-size:28px;line-height:1.2}.landing-tagline__sentence{display:inline-block}@media (width<=480px){.landing-main{gap:10px}.landing-logo{max-height:110px}.landing-tagline{font-size:24px}}.landing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:380px;margin-top:6px;display:grid}@media (width>=1024px){.landing-main{flex:1;justify-content:center;gap:16px}.landing-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1082px}}.landing-card{--pill-zone:calc(var(--tap) + 24px);aspect-ratio:3/4;color:inherit;text-decoration:none;display:block}.landing-card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.landing-card picture{width:100%;height:calc(100% - var(--pill-zone));display:block}.landing-card img{object-fit:cover;object-position:50% 0%;width:100%;height:100%;display:block}.landing-card .glass-pill{z-index:1;text-align:center;line-height:1.2;position:absolute;bottom:12px;left:12px;right:12px}.landing-card[data-role=student] .glass-pill{--a:var(--student-bar)}.landing-card[data-role=teacher] .glass-pill{--a:var(--teacher-bar)}.landing-card[data-role=parent] .glass-pill{--a:var(--parent-bar)}.landing-card[data-role=principal] .glass-pill{--a:var(--principal-bar)}@media (width<=359.98px){.landing-grid{gap:10px}.landing-card .glass-pill{padding-inline:8px;left:8px;right:8px}}.landing-footer{max-width:60ch;font-size:var(--fs-small);text-align:center;color:var(--ink-soft);margin:0 auto;line-height:1.5}.login-main{flex-direction:column;gap:16px;width:100%;max-width:480px;margin:0 auto;display:flex}.login-header{align-items:center;gap:14px;padding:12px 16px 12px 12px;display:flex}.login-thumb{border-radius:18px;flex:0 0 64px;width:64px;height:64px;overflow:hidden}.login-thumb img{object-fit:cover;object-position:50% 25%;width:100%;height:100%}.login-title{font-family:var(--font-display,inherit);margin:0;font-size:24px;line-height:1.2}.login-choose-another{min-height:48px;color:var(--brand-ink);margin-top:4px;font-weight:700;line-height:48px;text-decoration:underline;display:inline-block}.login-choose-another:focus-visible,.login-persona:focus-visible,.landing-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.login-form{flex-direction:column;gap:12px;display:flex}.login-note,.login-status{color:var(--ink-soft);margin:0;font-size:16px;line-height:1.5}.login-error{color:var(--warn-ink);margin:0;font-size:16px;font-weight:700;line-height:1.5}.login-divider{background:var(--line);border:0;height:1px;margin:4px 0}.login-demo-title{font-family:var(--font-display,inherit);margin:0;font-size:20px}.login-demo-hint{color:var(--ink-soft);margin:4px 0 12px;font-size:16px}.login-personas{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.login-persona{width:100%;min-height:56px;font:inherit;color:var(--ink);background:var(--surface-2);cursor:pointer;text-align:left;border:0;border-radius:18px;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;font-size:17px;display:flex}.login-persona[aria-current=true]{background:var(--a-soft);color:var(--a-deep);box-shadow:0 0 0 2px var(--a)}.login-persona[data-role=student]{--a:var(--student-bar);--a-soft:var(--student-soft);--a-deep:var(--student-deep)}.login-persona[data-role=teacher]{--a:var(--teacher-bar);--a-soft:var(--teacher-soft);--a-deep:var(--teacher-deep)}.login-persona[data-role=parent]{--a:var(--parent-bar);--a-soft:var(--parent-soft);--a-deep:var(--parent-deep)}.login-persona[data-role=principal]{--a:var(--principal-bar);--a-soft:var(--principal-soft);--a-deep:var(--principal-deep)}.login-persona:disabled{cursor:progress}.login-persona-name{font-weight:800}.login-persona-role{color:var(--ink-soft);font-size:16px}.login-persona[aria-current=true] .login-persona-role{color:inherit}.landing-status{flex-direction:column;align-items:center;gap:14px;padding:48px 0;font-size:17px;display:flex}.landing-spinner{border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;width:32px;height:32px;animation:.9s linear infinite landing-spin}@keyframes landing-spin{to{transform:rotate(360deg)}}.landing-actions{justify-content:center;margin-top:16px;display:flex}.landing-actions--stack{flex-direction:column;align-items:stretch;gap:12px}.landing-logo-wrap.brand-mark{gap:16px}.landing-logo-wrap .landing-logo{max-width:180px}.landing-logo-name{font-size:96px}@media (width<=480px){.landing-logo-name{font-size:64px}}