:root{--font-display: "Bricolage Grotesque", system-ui, sans-serif;--font-body: "Public Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--text-xs: 12px;--text-sm: 13px;--text-base: 14.5px;--text-md: 16px;--text-lg: 18px;--text-xl: 22px;--text-2xl: 26px;--text-3xl: 32px;--text-4xl: 42px;--tracking-tight: -.02em;--bg: #F6F8FC;--surface: #FFFFFF;--surface-2: #EFF3FA;--border: #E1E8F2;--border-strong: #CBD6E6;--ink: #141E2E;--ink-2: #3C4A5F;--ink-muted: #697A93;--ink-faint: #9AA8BD;--primary: #2A6FD6;--primary-hover: #2159B0;--primary-soft: #E7F0FD;--success: #12946A;--success-soft: #E1F4EC;--accent: #C77F16;--accent-soft: #FBF0DC;--violet: #7E4FBE;--violet-soft: #F1EAFA;--danger: #CF3E3E;--danger-soft: #FBE7E7;--rail: #0D1522;--rail-2: #111C2E;--rail-line: #22314A;--rail-ink: #C4D0E2;--rail-ink-muted:#647696;--editor-bg: #0E1726;--editor-panel: #0A121F;--editor-line: #1B2740;--editor-text: #CFDAEA;--editor-gutter: #4A5C79;--syn-keyword: #5AA0F5;--syn-string: #3CC58C;--syn-func: #E0A445;--syn-num: #B98BE6;--syn-comment: #5E7093;--syn-punc: #8FA0BC;--radius-sm: 10px;--radius: 14px;--radius-lg: 20px;--radius-pill: 999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--shadow-sm: 0 1px 2px rgba(20,30,46,.06);--shadow: 0 1px 2px rgba(20,30,46,.04), 0 10px 30px -12px rgba(20,30,46,.16);--shadow-lg: 0 24px 60px -30px rgba(20,30,46,.35);--ease: cubic-bezier(.2,.7,.3,1);--dur: .15s}:root{--brand: var(--primary);--font-sans: var(--font-body);--font-code: var(--font-mono)}.caret{display:inline-block;width:.5ch;height:.95em;transform:translateY(.1em);background:var(--syn-keyword);border-radius:1px;animation:caret-blink 1.05s steps(1) infinite;margin-left:2px}@keyframes caret-blink{50%{opacity:0}}@media (prefers-reduced-motion: reduce){.caret{animation:none}}.caret-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:var(--tracking-tight);color:#fff}.caret-logo .mk{width:28px;height:28px;border-radius:8px;background:linear-gradient(150deg,var(--syn-keyword),var(--primary));display:grid;place-items:center;color:#fff;font-family:var(--font-mono);font-weight:700;font-size:17px}a.caret-logo{text-decoration:none;color:#fff;cursor:pointer}.btn{font-family:var(--font-body);font-weight:600;font-size:var(--text-base);border:none;border-radius:var(--radius-sm);padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);line-height:1}.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn[disabled]{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-hover)}.btn-run{background:var(--success);color:#fff}.btn-run:hover{filter:brightness(1.05)}.btn-ghost{background:var(--surface-2);color:var(--ink-2)}.btn-ghost:hover{background:var(--border)}.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--border-strong)}.btn-outline:hover{border-color:var(--primary);background:var(--primary-soft)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(1.05)}.btn-lg{padding:13px 20px;font-size:15px;border-radius:var(--radius)}a.btn{text-decoration:none}a.btn-primary,a.btn-primary:visited{color:#fff}a.btn-outline,a.btn-outline:visited{color:var(--primary)}.tag{font-family:var(--font-mono);font-size:var(--text-xs);padding:4px 10px;border-radius:var(--radius-pill);font-weight:500;display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--ink-2)}.tag-blue{background:var(--primary-soft);color:var(--primary)}.tag-green{background:var(--success-soft);color:var(--success)}.tag-amber{background:var(--accent-soft);color:var(--accent)}.tag-violet{background:var(--violet-soft);color:var(--violet)}.tag-red{background:var(--danger-soft);color:var(--danger)}.field{margin-bottom:var(--space-4)}.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}.field .inwrap{position:relative}.field input,.field select,.field textarea{width:100%;font-family:var(--font-body);font-size:var(--text-base);padding:12px 13px;border:1.5px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--ink);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.field input::placeholder{color:var(--ink-faint)}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}.hint{font-size:12px;color:var(--ink-muted);margin-top:6px;line-height:1.6}.field .hint{font-size:12px;color:var(--ink-muted);margin-top:6px}.field .error{font-size:12px;color:var(--danger);margin-top:6px}.field.has-error input{border-color:var(--danger)}.field.has-error input:focus{box-shadow:0 0 0 3px var(--danger-soft)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.card-hd{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.card-hd b{font-size:15px}.card-body{padding:20px}.prog{height:8px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden}.prog>i{display:block;height:100%;background:var(--primary);border-radius:var(--radius-pill)}.prog.success>i{background:var(--success)}.seg{display:flex;background:var(--surface-2);border-radius:11px;padding:4px}.seg button{flex:1;font-family:var(--font-body);font-weight:600;font-size:var(--text-base);border:none;background:transparent;color:var(--ink-muted);padding:9px 12px;border-radius:8px;cursor:pointer;transition:var(--dur) var(--ease)}.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:11px;font-family:var(--font-body);font-weight:600;font-size:var(--text-base);background:var(--surface);color:var(--ink);border:1.5px solid var(--border-strong);border-radius:11px;padding:12px;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}.gbtn:hover{background:var(--surface-2);border-color:var(--ink-faint)}.gbtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.divider{display:flex;align-items:center;gap:14px;color:var(--ink-faint);font-size:12.5px;margin:22px 0;font-family:var(--font-mono)}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.rail{background:var(--rail);color:var(--rail-ink);padding:18px 14px;display:flex;flex-direction:column;gap:4px;min-height:100%}.rail .caret-logo{font-size:17px;margin-bottom:0;padding:0 8px}.rail .caret-logo .mk{width:26px;height:26px;font-size:15px;border-radius:7px}.rail-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px}.rail-hide{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--rail-ink);background:var(--rail-2);border:1px solid var(--rail-line);border-radius:8px;padding:6px 10px;cursor:pointer}.rail-hide:hover{color:#fff;border-color:var(--rail-ink-muted)}.rail-hide:focus-visible{outline:2px solid var(--syn-keyword);outline-offset:2px}.rail .navlbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-ink-muted);padding:14px 10px 6px}.navitem{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;color:var(--rail-ink);font-size:var(--text-base);font-weight:500;cursor:pointer;text-decoration:none;background:none;border:none;width:100%;text-align:left;font-family:var(--font-body)}.navitem svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;opacity:.8}.navitem:hover{background:var(--rail-2)}.navitem.active{background:linear-gradient(90deg,#5aa0f533,#5aa0f50d);color:#fff;box-shadow:inset 2px 0 0 var(--syn-keyword)}.navitem.active svg{opacity:1;stroke:var(--syn-keyword)}.navitem:visited{color:var(--rail-ink)}.navitem.active:visited{color:#fff}.rail .rail-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--rail-line)}.rail .rail-user .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(150deg,var(--accent),#C77F16);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#231a08;font-size:14px}.rail .rail-user b{font-size:13px;font-weight:600;color:#fff;display:block}.rail .rail-user small{color:var(--rail-ink-muted);font-size:11.5px}.app-frame{display:grid;grid-template-columns:224px 1fr;min-height:100vh}.app-frame.rail-collapsed{grid-template-columns:1fr}.app-content{background:var(--bg);padding:26px 28px;overflow:auto}@media (max-width: 900px){.app-frame{grid-template-columns:1fr}.rail{flex-direction:row;overflow-x:auto;padding:10px;align-items:center}.rail-brand,.rail .caret-logo{margin-bottom:0}.rail .navlbl,.rail .rail-user,.navitem span{display:none}}body{margin:0}.caret-auth-root{height:100vh;overflow:auto}.page,.page *,.page *:before,.page *:after{box-sizing:border-box}.page{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}.page h1,.page h2,.page h3{font-family:var(--font-display);letter-spacing:var(--tracking-tight);margin:0;line-height:1.1}.page{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}.formpane{background:var(--bg)}.brandpane{background:var(--rail);color:var(--rail-ink);padding:var(--space-12) var(--space-16);position:relative;overflow:hidden;display:flex;flex-direction:column}.brandpane:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(760px 380px at 78% -8%,color-mix(in srgb,var(--syn-keyword) 18%,transparent),transparent 60%)}.brandpane .brand-top{position:relative;z-index:1}.brandpane .brand-sub{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--syn-keyword);margin-top:var(--space-3)}.brandpane .mid{margin-top:auto;position:relative;z-index:1}.brandpane h1{color:#fff;font-size:clamp(var(--text-3xl),3.4vw,var(--text-4xl));font-weight:800;max-width:15ch}.brandpane .sub{color:var(--rail-ink);margin-top:var(--space-4);max-width:40ch;font-size:var(--text-md)}.codeblock{margin-top:var(--space-8);background:var(--editor-bg);border:1px solid var(--editor-line);border-radius:var(--radius);padding:var(--space-5) var(--space-5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.95;max-width:420px;box-shadow:var(--shadow-lg)}.codeblock .ln{color:var(--editor-gutter);display:inline-block;width:1.4ch;margin-right:var(--space-4);-webkit-user-select:none;user-select:none}.codeblock .kw{color:var(--syn-keyword)}.codeblock .str{color:var(--syn-string)}.codeblock .fn{color:var(--syn-func)}.codeblock .num{color:var(--syn-num)}.codeblock .cm{color:var(--syn-comment)}.codeblock .pn{color:var(--syn-punc)}.codeblock .tx{color:var(--editor-text)}.codeblock .cursorline{border-left:2px solid var(--syn-keyword);animation:caret-blink 1.05s steps(1) infinite;padding-left:2px}.ticks{display:flex;gap:var(--space-6);margin-top:var(--space-8);flex-wrap:wrap;position:relative;z-index:1}.tick{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--rail-ink)}.tick .d{width:8px;height:8px;border-radius:2px}.formpane{display:flex;align-items:center;justify-content:center;padding:var(--space-10) var(--space-6)}.authcard{width:100%;max-width:400px}.authcard .mlogo{display:none;color:var(--ink)}.authcard .seg{margin-bottom:var(--space-6)}.authcard h2{font-size:var(--text-2xl);font-weight:700}.authcard .intro{color:var(--ink-muted);font-size:var(--text-base);margin-top:var(--space-2);margin-bottom:var(--space-6)}.field .inwrap input{padding-right:64px}.reveal{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--ink-muted);font-family:var(--font-mono);font-size:var(--text-xs);padding:6px 8px;border-radius:7px}.reveal:hover{background:var(--surface-2);color:var(--ink-2)}.reveal:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.roles{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4)}.role{border:1.5px solid var(--border-strong);border-radius:11px;padding:var(--space-3) var(--space-4);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);background:var(--surface)}.role:hover{border-color:var(--primary)}.role.sel{border-color:var(--primary);background:var(--primary-soft)}.role:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.role .rt{display:flex;align-items:center;gap:var(--space-2);font-weight:600;font-size:var(--text-base)}.role .rt .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-strong);flex:none;position:relative}.role.sel .rt .dot{border-color:var(--primary)}.role.sel .rt .dot:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:var(--primary)}.role small{color:var(--ink-muted);font-size:var(--text-xs);display:block;margin-top:3px;padding-left:24px}.rowbetween{display:flex;justify-content:flex-end;margin:-4px 0 var(--space-4)}.link{color:var(--primary);font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer;background:none;border:none;font-family:var(--font-body);padding:0}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}.submit-btn{width:100%;justify-content:center}.ide-open{width:100%;justify-content:center;text-decoration:none;margin-top:var(--space-5)}.fineprint{color:var(--ink-muted);font-size:var(--text-xs);margin-top:var(--space-4);text-align:center;line-height:1.6}.fineprint a{color:var(--ink-2);text-decoration:underline}.swap{text-align:center;margin-top:var(--space-5);font-size:var(--text-base);color:var(--ink-muted)}.signup-only,.student-only{display:none}.page.mode-signup .signup-only{display:block}.page.mode-signup .roles.signup-only{display:grid}.page.mode-signup .login-only{display:none}.page.mode-student .student-only{display:block}.page.mode-student .login-only,.page.mode-student .signup-only,.page.mode-student .teacher-only,.page.mode-login .student-only,.page.mode-signup .student-only{display:none}@media (max-width: 860px){.page{grid-template-columns:1fr}.brandpane{display:none}.formpane{padding:var(--space-8) var(--space-5)}.authcard .mlogo{display:flex;margin-bottom:var(--space-8);justify-content:center}}
