:root { --bg:#f2e8de; --ink:#514a46; --strong:#282522; --muted:#817568; --faint:#ad9f92; --line:#ded4c9; --accent:#b65436; --accent-soft:#e8d1c1; --error:#c74740; --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; --ease:cubic-bezier(.22,.61,.36,1); color-scheme:light; }
[data-theme="dark"] { --bg:#242320; --ink:#ded4c9; --strong:#f0e8df; --muted:#ae9f90; --faint:#796f64; --line:#403a34; --accent:#df986f; --accent-soft:#4c392c; --error:#f08173; color-scheme:dark; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:13px/1.65 var(--mono); -webkit-font-smoothing:antialiased; transition:background .2s ease,color .2s ease; }
button,input,select,textarea { font:inherit; color:inherit; }
button { border:0; background:transparent; cursor:pointer; padding:7px 9px; transition:color .16s ease,opacity .2s ease,transform .18s var(--ease); }
button:hover:not(:disabled) { color:var(--accent); } button:active:not(:disabled) { transform:translateY(1px); } button:disabled { opacity:.45; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:1.5px solid var(--accent); outline-offset:4px; }
a { color:var(--accent); text-underline-offset:4px; }
.education-header { width:calc(100% - 56px); max-width:1200px; min-height:64px; margin:auto; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:8px; color:var(--strong); font-size:18px; text-decoration:none; margin-right:auto; } .brand em { color:var(--accent); font-style:normal; } .brand small { color:var(--faint); font-size:9px; letter-spacing:.12em; } .brand-mark svg { width:20px; height:20px; }
.header-tools { display:flex; align-items:center; gap:12px; color:var(--muted); } select,input,textarea { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:8px 2px; } select { color:var(--muted); } input:focus,textarea:focus,select:focus { border-color:var(--accent); outline:none; }
main { width:calc(100% - 56px); max-width:920px; min-height:calc(100vh - 120px); margin:auto; padding:48px 0 72px; } .view { animation:fade-in .25s var(--ease) both; } @keyframes fade-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.wide-view { max-width:920px; } .eyebrow { color:var(--accent); font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 10px; } h1 { color:var(--strong); font-size:clamp(26px,5vw,44px); font-weight:400; line-height:1.15; letter-spacing:-.05em; margin:0 0 18px; } .lede { max-width:630px; color:var(--muted); margin:0 0 28px; }
.start-actions { display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 10px; } .primary-button,.secondary-button { border:1px solid var(--accent); min-height:38px; } .primary-button { background:var(--accent); color:var(--bg); } .primary-button:hover:not(:disabled) { background:var(--strong); color:var(--bg); } .secondary-button { color:var(--accent); } .text-button,.back-link { color:var(--accent); padding-left:0; padding-right:0; } .danger-text { color:var(--error); } .privacy-note { color:var(--faint); font-size:11px; max-width:620px; margin-top:42px; }
.back-link { display:inline-block; margin-bottom:36px; text-decoration:none; } .quiet-form { max-width:680px; display:grid; gap:26px; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 36px; } label { display:grid; gap:6px; color:var(--muted); font-size:11px; } label input,label select { width:100%; color:var(--strong); } .info-details { color:var(--muted); border-top:1px solid var(--line); padding-top:12px; max-width:680px; } .info-details summary { cursor:pointer; color:var(--accent); } .info-details p { max-width:650px; font-size:11px; }
.notice { border-left:2px solid var(--accent); color:var(--strong); padding:9px 12px; margin-bottom:24px; } .notice.error { border-color:var(--error); color:var(--error); }
.view-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; } .status-label,.label { color:var(--faint); font-size:10px; text-transform:uppercase; letter-spacing:.08em; } .invite-line { display:flex; gap:42px; margin:10px 0 24px; } .invite-line div { display:grid; gap:4px; } .invite-line strong { color:var(--strong); font-size:18px; font-weight:400; letter-spacing:.08em; } .invite-tools { display:flex; align-items:center; gap:26px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .qr-code { width:142px; min-height:142px; color:var(--strong); } .qr-code svg { display:block; width:142px; height:142px; } .invite-copy { min-width:0; } .invite-copy p { color:var(--muted); margin-top:0; } .copy-row { display:flex; gap:10px; max-width:620px; } .copy-row input { flex:1; min-width:0; color:var(--strong); } .teacher-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:22px 0; } .teacher-actions .danger-text { margin-left:auto; }
.roster-wrap { margin:4px 0 26px; overflow-x:auto; } .roster { width:100%; border-collapse:collapse; font-size:12px; } .roster th,.roster td { border-bottom:1px solid var(--line); padding:13px 8px; text-align:left; white-space:nowrap; } .roster th { color:var(--faint); font-size:10px; font-weight:400; text-transform:uppercase; letter-spacing:.06em; } .roster td { color:var(--strong); } .roster td:nth-child(n+2) { color:var(--muted); } .roster button { color:var(--accent); padding:2px 0; font-size:11px; } .empty-state { color:var(--faint); font-size:11px; }
.exercise-summary { display:grid; grid-template-columns:auto 1fr; gap:8px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; margin:26px 0; max-width:500px; } .exercise-summary span { color:var(--faint); font-size:11px; } .exercise-summary strong { color:var(--strong); font-weight:400; } .student-typing { max-width:820px; } .live-line { color:var(--muted); display:flex; gap:12px; margin-bottom:22px; } .student-prompt { min-height:100px; color:var(--strong); font-size:clamp(20px,4vw,30px); line-height:1.6; white-space:pre-wrap; word-break:break-word; border-bottom:1px solid var(--line); padding-bottom:18px; } .student-input { width:100%; min-height:72px; resize:vertical; border:1px solid var(--line); padding:12px; color:var(--strong); } .student-result { border-top:1px solid var(--line); padding-top:22px; max-width:600px; } .result-grid { display:grid; grid-template-columns:auto auto; gap:0 14px; align-items:baseline; margin:12px 0 20px; } .result-grid strong { color:var(--accent); font-size:32px; font-weight:400; } .result-grid span { color:var(--muted); font-size:11px; } .import-summary { border-top:1px solid var(--line); padding-top:18px; color:var(--muted); }
footer { width:calc(100% - 56px); max-width:920px; margin:auto; padding:0 0 30px; font-size:11px; } footer a { color:var(--faint); text-decoration:none; } footer a:hover { color:var(--accent); } .sr-only { position:absolute; clip:rect(0,0,0,0); clip-path:inset(50%); width:1px; height:1px; margin:-1px; overflow:hidden; white-space:nowrap; }
@media (max-width:600px) { .education-header,main,footer { width:calc(100% - 32px); } main { padding-top:30px; } .form-grid { grid-template-columns:1fr; } .invite-tools { align-items:flex-start; flex-direction:column; } .teacher-actions .danger-text { margin-left:0; width:100%; text-align:left; } .invite-line { gap:24px; } .copy-row { flex-direction:column; align-items:flex-start; } .copy-row input { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } }
.advanced-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 28px; margin-top:18px; }
.check-label { display:flex; align-items:center; gap:8px; }
.check-label input { width:auto; accent-color:var(--accent); }
.student-guide,.next-step { color:var(--accent); font-size:11px; min-height:1.65em; }
@media (max-width:600px) { .advanced-grid { grid-template-columns:1fr; } }

html { min-height:100%; scrollbar-gutter:stable; overflow-x:hidden; }
body { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; overflow-x:hidden; transition:background-color .24s ease,color .2s ease; }
.education-header { width:calc(100% - 112px); max-width:1500px; height:64px; min-height:64px; }
.brand { gap:9px; color:var(--muted); font:14px/1.4 var(--mono); letter-spacing:.05em; padding:6px 0; }
.brand-mark svg { width:16px; height:16px; }
.header-tools { gap:4px; }
.header-tools select,.header-tools button { min-height:30px; padding:6px 7px; font-size:11px; }
.header-tools select { border-bottom:0; }
main { flex:1; width:100%; max-width:none; min-height:0; margin:0; padding:29px 28px 64px; }
.view { max-width:920px; margin:0 auto; }
.wide-view { max-width:920px; }
.primary-button,.secondary-button { border:0; min-height:32px; padding:6px 3px; background:none; }
.primary-button { border-bottom:1px solid var(--accent); color:var(--accent); }
.primary-button:hover:not(:disabled) { background:none; color:var(--strong); }
.secondary-button { border-bottom:1px solid transparent; color:var(--muted); }
.secondary-button:hover:not(:disabled) { border-bottom-color:var(--accent); color:var(--accent); }
.start-actions { gap:16px; margin:30px 0 10px; }
.teacher-actions { gap:16px; padding:22px 0; }
footer { width:calc(100% - 112px); max-width:1200px; margin:auto; padding:12px 0 17px; border-top:1px solid var(--line); font-size:9px; color:var(--muted); }
footer a { color:inherit; }

@media (max-width:900px) {
  .education-header,footer { width:calc(100% - 48px); }
  main { padding:28px 24px 49px; }
}

@media (max-width:600px) {
  .education-header,footer { width:calc(100% - 36px); }
  .education-header { height:60px; min-height:60px; gap:13px; }
  .brand { font-size:12px; gap:6px; }
  .brand-mark svg { width:15px; height:15px; }
  main { padding:22px 18px 44px; }
  footer { padding-bottom:14px; }
}