:root{--bg:#14121c;--fg:#f2ead8;--muted:#b9ae96}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--fg);margin:0;font:18px/1.5 system-ui,sans-serif}.title{text-align:center;place-content:center;min-height:100vh;padding:16px;display:grid}.title h1{margin:0 0 .5rem;font-size:clamp(2rem,6vw,3.5rem)}.title p{color:var(--muted);margin:0}.title .narrator,.screen .narrator{max-width:36rem;margin:1.5rem auto;font-style:italic}.screen{max-width:40rem;min-height:100vh;margin:0 auto;padding:32px 16px}.button{font:inherit;border:2px solid var(--fg);background:var(--fg);color:var(--bg);cursor:pointer;border-radius:6px;padding:.6rem 1.2rem;font-size:1rem}.button:disabled{opacity:.5;cursor:not-allowed}.button.secondary{color:var(--fg);background:0 0}input[type=email],.hero-form input[type=text],#hero-name{font:inherit;border:2px solid var(--muted);color:var(--fg);background:#1e1b28;border-radius:6px;width:100%;padding:.5rem .75rem;font-size:1rem}.sign-in{text-align:left;gap:.75rem;width:min(24rem,100%);margin:0 auto;display:grid}.notice{color:#ffd27a}.muted{color:var(--muted)}.small{font-size:.875rem}.hero-form{gap:.75rem;display:grid}.hero-form .hint{color:var(--muted);margin:0;font-size:.875rem}.hero-form fieldset{border:0;margin:1rem 0;padding:0}.hero-form legend{margin-bottom:.75rem}.classes{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem;display:grid}.class-card{cursor:pointer;border:2px solid #3a3550;border-radius:8px;gap:.25rem;padding:.75rem 1rem;display:grid}.class-card.chosen{border-color:#ffd27a}.class-card input{opacity:0;position:absolute}.class-card span{color:var(--muted);font-size:1rem}.hero-card{border:2px solid #ffd27a;border-radius:10px;padding:1.5rem}.hero-card h1{margin:0}.hero-card dl{grid-template-columns:max-content 1fr;gap:.25rem 1rem;display:grid}.hero-card dd{margin:0}.class-card:focus-within{outline-offset:2px;outline:2px solid #ffd27a}