/* Shared visual system: graphite, emerald, acid green. */
:root {
  --bg:#0c1110; --card:#151e1a; --card-2:#1b2821; --card2:#1b2821;
  --bg-card:#151e1a; --bg-card-2:#1b2821; --border:#2a3b30;
  --text:#f0f5ec; --dim:#a9b8ae; --text-dim:#a9b8ae; --muted:#93a59a;
  --green:#3cc977; --green-bright:#b9f66b; --mint:#b9f66b; --cyan:#74dba6;
  --violet:#b9f66b; --warn:#ebca7c; --danger:#ff9a94; --ok:#92e5ae;
  --grad:linear-gradient(110deg,#b9f66b,#98e953);
  --accent-gradient:linear-gradient(110deg,#b9f66b,#98e953); --radius:16px;
}
* { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; }
body { margin:0; min-height:100vh; font:16px/1.6 'Segoe UI','Helvetica Neue',Arial,sans-serif; color:var(--text); background:var(--bg)!important; -webkit-font-smoothing:antialiased; }
body::before { display:none; }
a { color:var(--mint); }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--mint); outline-offset:5px; }
input,textarea,select { color:var(--text)!important; background:#0f1713!important; border:1px solid #3b5142!important; border-radius:10px; }
input::placeholder,textarea::placeholder { color:#93a59a; }
input:focus,textarea:focus,select:focus { border-color:var(--mint)!important; box-shadow:0 0 0 3px #b9f66b15; }
[hidden] { display:none!important; }
::selection { background:#b9f66b; color:#0c1110; }
nav,.topnav { background:#0c1110f5!important; border-bottom:1px solid var(--border)!important; backdrop-filter:blur(12px); }
.topnav { position:sticky; top:0; z-index:50; }
.topnav-in { max-width:1200px; margin:auto; padding:18px 28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.topnav .brand { display:inline-flex; align-items:center; gap:12px; margin-right:auto; color:var(--text); text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--mint); color:#101b12; font-weight:800; font-size:13px; transform:rotate(-5deg); }
.brand-name { font-weight:700; letter-spacing:-.025em; }
.topnav .links { display:flex; gap:5px; }
.topnav .links a,.topnav .logout { text-decoration:none; font-size:13px; padding:8px 13px; border-radius:7px; color:var(--dim); }
.topnav .links a.on { background:#233025; color:var(--mint); }
.topnav .links a:hover,.topnav .logout:hover { color:var(--text); background:#1b2821; }
.topnav .logout { border:1px solid var(--border); }
.card,.week,.place,.board,.answers,.notice,.table-wrap,.login-card,.hero-card { background:var(--card)!important; border:1px solid var(--border)!important; box-shadow:none; backdrop-filter:none; }
.btn,.cta,.submit,button.primary { border-radius:9px; transition:background .2s,transform .2s; }
.btn-primary,.btn.primary,.submit,button.primary,.cta:not(.quiet) { background:var(--grad)!important; color:#12200d!important; border:0!important; box-shadow:none!important; }
.btn-ghost,.btn.ghost,.cta.quiet { color:var(--text)!important; background:#172119!important; border:1px solid #3c5040!important; }
.btn:hover,.cta:hover,.submit:hover { transform:translateY(-2px); text-decoration:none; }
.btn[aria-disabled=true],.cta[aria-disabled=true] { transform:none; }
.gradient-text { color:var(--mint); background:none; -webkit-text-fill-color:currentColor; }
.logo span,.logo b { color:var(--mint); }
.tech-badge,.hero-badge { display:inline-flex; align-items:center; gap:9px; background:transparent; border:0; padding:0; color:var(--dim); font:11px/1.5 Consolas,monospace; letter-spacing:.07em; text-transform:uppercase; }
.tech-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--mint); }
table,th,td { border-color:var(--border)!important; } th { background:#19241d!important; color:var(--dim)!important; }
.site-footer,footer.site-footer { margin-top:36px; padding:20px 20px 28px; border:0; background:none; color:var(--muted); }
.site-footer-in { text-align:center; font-size:12px; line-height:1.7; }
.site-footer-in span { display:block; }
.site-footer-in b { color:var(--dim); }

/* Mascot scenes use the same three assets throughout the participant journey. */
.mascot-scene { position:relative; isolation:isolate; margin:0; min-width:0; perspective:900px; }
.mascot-tilt { position:relative; z-index:2; transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .22s ease-out; }
.mascot-img { display:block; width:100%; height:auto; object-fit:contain; animation:mascot-breathe 5s ease-in-out infinite; animation-play-state:paused; }
.mascot-scene.is-visible .mascot-img { animation-play-state:running; }
.mascot-scene::before { content:''; position:absolute; inset:12% 7% 6%; border:1px solid #40523b; border-radius:50%; transform:rotate(-22deg) scaleY(.85); z-index:-1; }
.mascot-scene::after { content:''; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--mint); right:18%; top:16%; box-shadow:0 0 0 6px #b9f66b0c; }
.scene-label { position:absolute; z-index:3; padding:9px 13px; border:1px solid #42563b; border-radius:7px; background:#141e17; color:#d4e3cc; font:11px/1.5 Consolas,monospace; box-shadow:0 12px 24px #0003; }
.scene-label.code { top:13%; left:-2%; transform:rotate(-5deg); }.scene-label.note { bottom:12%; right:0; transform:rotate(4deg); }
.scene-label i { color:var(--mint); font-style:normal; }
.mascot-scene figcaption { position:relative; z-index:3; text-align:center; font:10px/1.6 Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.motion-toggle { display:block; margin:24px auto 0; background:transparent!important; color:var(--muted)!important; border:1px solid var(--border)!important; padding:6px 10px; border-radius:6px; font-size:11px; cursor:pointer; width:auto; box-shadow:none!important; }
.motion-toggle:hover { color:var(--text)!important; border-color:#6f875d!important; }
.motion-toggle:disabled { cursor:default; opacity:.7; }
.motion-off .mascot-img { animation:none!important; }.motion-off .mascot-tilt { transform:none!important; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@keyframes mascot-breathe { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-10px) rotate(1deg); } }
@keyframes title-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

/* Authentication: the same campaign, with an uninterrupted working form. */
body.auth-page { display:grid; grid-template-columns:minmax(0,570px) minmax(300px,420px); align-content:center; justify-content:center; align-items:center; column-gap:80px; row-gap:16px; padding:45px 40px 20px; }
.auth-story { min-width:0; }.auth-story .eyebrow { font:11px Consolas,monospace; text-transform:uppercase; letter-spacing:.14em; color:var(--mint); }
.auth-story h2 { font-size:clamp(36px,4.5vw,62px); line-height:1.05; letter-spacing:-.055em; font-weight:650; margin:18px 0; }
.auth-story h2 span { color:var(--mint); }.auth-story>p { color:var(--dim); font-size:14px; margin:0; }
.auth-story .mascot-scene { width:min(350px,85%); margin:12px auto 0; }
.auth-page .auth,.auth-page>main.card { width:100%; max-width:420px; text-align:left; padding:32px; background:#141d17!important; border:1px solid var(--border)!important; border-radius:20px; box-shadow:none; }
.auth-page .mark { width:42px; height:42px; margin:0 0 25px; border-radius:10px; background:var(--mint); color:#12200d; box-shadow:none; font-size:14px; }
.auth-page h1 { font-size:26px; letter-spacing:-.035em; line-height:1.2; margin:0 0 12px; }
.auth-page .lead { font-size:14px; margin:0 0 22px; }.auth-page .panel { padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; }.auth-page .panel::before{display:none}
.auth-page input { border-radius:9px; }.auth-page .submit,.auth-page button[type=submit] { background:var(--grad); color:#12200d; border-radius:9px; box-shadow:none; }
.auth-page .site-footer { grid-column:1/-1; margin-top:10px; padding-bottom:0; }.auth-page .foot { font-size:13px; }.auth-page .logo { font-size:13px; margin-bottom:24px; }

/* Compact scenes on functional pages never overlap fields or controls. */
.page-hero { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:24px; align-items:center; }
.page-hero .mascot-scene { width:100%; }.page-hero h1 { line-height:1.12; letter-spacing:-.04em; }
.page-hero .mascot-img { max-height:230px; }.page-hero .scene-label { font-size:10px; padding:5px 9px; }
.task-page .page-hero { grid-template-columns:minmax(0,1fr) 150px; }.task-page .page-hero .mascot-img { max-height:165px; }
.current::after { display:none; }.current { border-radius:16px!important; }
@media(max-width:900px) {
  body.auth-page { column-gap:32px; padding:30px 24px; grid-template-columns:minmax(0,1fr) minmax(300px,380px); }
  .auth-story h2 { font-size:39px; }.auth-story .mascot-scene { width:260px; max-width:100%; }
}
@media(max-width:640px) {
  .topnav-in { padding:12px 16px; gap:8px; }.brand-name { display:none; }.topnav .links { gap:0; }.topnav .links a,.topnav .logout { padding:7px 8px; font-size:12px; }
  .brand-mark { width:30px; height:30px; font-size:11px; }
  body.auth-page { display:flex; flex-direction:column; padding:24px 18px; gap:24px; }.auth-story { width:100%; max-width:420px; display:grid; grid-template-columns:1fr 115px; align-items:center; column-gap:8px; }.auth-story .eyebrow { grid-column:1; font-size:9px; }.auth-story h2 { grid-column:1; font-size:29px; margin:10px 0; }.auth-story>p { grid-column:1; font-size:12px; }.auth-story .mascot-scene { grid-column:2; grid-row:1/4; width:115px; margin:0; }.auth-story .scene-label { display:none; }.auth-page .auth,.auth-page>main.card { padding:25px; }.auth-page .site-footer { margin:0; }
  .page-hero { grid-template-columns:minmax(0,1fr) 120px; gap:10px; }.page-hero .mascot-img { max-height:145px; }.page-hero .scene-label { display:none; }.page-hero h1 { font-size:26px; }.page-hero .lead,.page-hero .sub { font-size:13px; }
  .task-page .page-hero { grid-template-columns:minmax(0,1fr) 90px; }.task-page .page-hero .mascot-img { max-height:115px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }.mascot-tilt { transform:none!important; } body.js .reveal { opacity:1; translate:none; }
}