:root{color-scheme:light;--ink:#153d3a;--muted:#5b706e;--teal:#0f766e;--line:#dce7e4}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 100% 0%,#dff2ec80,transparent 40%),radial-gradient(ellipse at 0% 100%,#e6eff980,transparent 40%),#f6f9f8;color:var(--ink);font-family:Modam,Tahoma,Arial,sans-serif;font-size:16px;line-height:1.7}a{color:inherit;text-decoration:none}svg{display:block;width:24px;height:24px}a:focus-visible,summary:focus-visible{outline:3px solid #0f766e;outline-offset:5px;border-radius:10px}.skip-link{position:fixed;top:12px;right:16px;z-index:10;background:#fff;padding:10px 16px;transform:translateY(-160%)}.skip-link:focus{transform:none}.portal{min-height:100vh;min-height:100svh;max-width:1100px;margin:auto;padding:26px 32px 20px;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;background:var(--teal);color:#fff;display:grid;place-items:center;border-radius:10px}.brand-mark svg{width:28px;height:28px}.brand strong{display:block;font-size:23px;font-weight:700;line-height:1.35}.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.portal-label{font-size:13px;color:#496663;border:1px solid var(--line);padding:5px 13px;border-radius:8px;background:#ffffff80}main{width:100%;max-width:780px;margin:auto; padding:36px 0 28px}.intro{text-align:center;margin-bottom:28px}.eyebrow{color:var(--teal);font-size:14px;font-weight:500}.intro h1{font-size:clamp(25px,3.2vw,34px);line-height:1.55;letter-spacing:-.5px;margin:8px 0}.intro p{margin:0;color:var(--muted);font-size:15px}.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.role-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 24px;position:relative;display:grid;grid-template-columns:42px 1fr;column-gap:16px;align-items:start;box-shadow:0 3px 12px #1c514504;transition:border-color .18s,box-shadow .18s,transform .18s}.role-card:hover{border-color:#91c7bd;box-shadow:0 8px 24px #174e4310;transform:translateY(-2px)}.role-icon{grid-row:1/3;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:#eaf5f1;color:#167465}.teacher{background:#edf3fb;color:#426b9b}.school{background:#f4f1e9;color:#8a6d30}.admin{background:#f1eff8;color:#71628e}.role-card h2{font-size:20px;line-height:1.5;margin:0 0 4px}.role-card p{font-size:14px;color:var(--muted);margin:0 0 14px}.card-action{color:var(--teal);font-size:14px;font-weight:600;display:flex;align-items:center;gap:9px;grid-column:2;margin-top:0}.card-action svg{width:17px;height:17px;transition:transform .18s}.role-card:hover .card-action svg{transform:translateX(-3px)}.class-note{display:flex;justify-content:center;align-items:center;gap:7px;color:var(--muted);font-size:12px;margin:20px 0 0}.class-note svg{width:16px;height:16px;flex-shrink:0}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:15px;color:var(--muted);font-size:12px}.footer-help{display:flex;gap:24px;align-items:flex-start}.footer-help details{position:relative}summary{cursor:pointer;list-style:none;font-size:13px;min-height:32px;display:flex;align-items:center}summary::-webkit-details-marker{display:none}summary:hover{color:var(--teal)}.help-content{position:absolute;bottom:calc(100% + 12px);right:0;width:min(340px,calc(100vw - 48px));padding:18px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 40px #1b49451a;z-index:3;font-size:13px}.help-content strong{color:var(--ink)}.help-content p{margin:8px 0 0}.version{white-space:nowrap}@media(max-width:600px){.portal{padding:20px}.portal-label{font-size:12px}main{padding:28px 0 24px}.intro{margin-bottom:22px}.intro h1{font-size:25px}.intro p{font-size:13px}.roles{grid-template-columns:1fr;gap:12px}.role-card{padding:18px 20px;display:grid;grid-template-columns:42px 1fr;column-gap:14px}.role-icon{grid-row:1/4}.role-card h2{margin:0 0 2px;font-size:18px}.role-card p{font-size:12px;margin:0 0 8px}.card-action{font-size:13px;grid-column:2}.class-note{font-size:11px;align-items:flex-start;text-align:center}footer{gap:12px;flex-wrap:wrap}.footer-help{gap:20px}.version{font-size:11px}.help-content{position:static;margin-top:8px;width:min(300px,calc(100vw - 40px))}.footer-help:has(details[open]){flex-wrap:wrap;width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.role-card:hover,.role-card:hover .card-action svg{transform:none}}