@layer base, layout, components;
@layer base {
  :root { color-scheme: dark; --bg:#10151c; --panel:#18212b; --raised:#202c38; --line:#3c4b5c; --text:#edf2f7; --muted:#b5c3d1; --mint:#8de6bf; --gold:#f1c57a; --red:#ffb7b7; --focus:#f6d994; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui, sans-serif; }
  a { color:var(--mint); text-underline-offset:4px; }
  a:hover { text-decoration-thickness:2px; }
  h1,h2,h3,p { margin:0 0 1rem; }
  h1 { font-size:clamp(2rem,3.8vw,3.75rem); line-height:1.12; letter-spacing:-.045em; max-width:21ch; }
  h2 { font-size:1.5rem; letter-spacing:-.025em; line-height:1.3; }
  h3 { font-size:1.05rem; line-height:1.4; }
  p,li { overflow-wrap:anywhere; }
  button,select,textarea { font:inherit; }
  button,select,input { accent-color:var(--mint); }
  button,select { color:var(--text); background:var(--raised); border:1px solid var(--line); border-radius:7px; padding:.65rem .9rem; min-height:44px; max-width:100%; }
  button { cursor:pointer; }
  button:hover:not(:disabled) { border-color:var(--mint); }
  button:disabled { opacity:.55; cursor:default; }
  :focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
  :target { scroll-margin-top:1rem; }
  code,pre,textarea,.mono { font-family:ui-monospace,Consolas,monospace; }
  pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; font-size:.85rem; line-height:1.8; }
  ul,ol { padding-left:1.4rem; }
  li+li { margin-top:.5rem; }
  details { border-top:1px solid var(--line); padding:1rem 0; }
  summary { cursor:pointer; font-weight:650; min-height:32px; }
  details[open]>summary { margin-bottom:1rem; }
  fieldset { border:1px solid var(--line); border-radius:10px; padding:1rem; margin:1rem 0; min-width:0; }
  legend { font-weight:650; padding:0 .35rem; }
  input { width:18px; height:18px; flex-shrink:0; }
}
@layer layout {
  .topbar { padding:1.25rem 3.5vw; display:flex; gap:2rem; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
  .brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; color:var(--text); line-height:1.3; }
  .brand strong { color:var(--mint); }
  .brand small { display:block; color:var(--muted); font-size:.6rem; letter-spacing:.17em; margin-top:.35rem; }
  .brand-mark { width:45px; height:45px; display:grid; place-content:center; border:1px solid var(--mint); color:var(--mint); font:bold 1.1rem ui-monospace,monospace; border-radius:11px 2px; }
  nav { display:flex; gap:1.6rem; flex-wrap:wrap; }
  nav a { color:var(--muted); text-decoration:none; font-size:.9rem; }
  nav a[aria-current] { color:var(--mint); }
  main { max-width:1440px; margin:auto; padding:3rem 3.5vw 4rem; min-height:70vh; }
  main.narrow { max-width:950px; }
  .hero { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr); gap:4rem; padding:1rem 0 3rem; align-items:center; }
  .hero p { color:var(--muted); max-width:62ch; }
  .workspace { display:grid; grid-template-columns:260px minmax(0,1fr); gap:2rem; }
  .workspace>* { min-width:0; }
  .desk { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.5rem; align-items:start; }
  .stack>*+* { margin-top:1.25rem; }
  .cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
  .row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
  .between { justify-content:space-between; }
  footer { border-top:1px solid var(--line); color:var(--muted); padding:1.5rem 3.5vw; font-size:.75rem; }
  footer span { display:block; margin-top:.35rem; }
  @media(max-width:1180px) { .desk { grid-template-columns:1fr; } .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media(max-width:850px) { .hero { grid-template-columns:1fr; gap:1rem; } .workspace { grid-template-columns:1fr; } .sidebar ol { display:flex; overflow:auto; gap:.5rem; padding:0; list-style:none; } .sidebar li { flex:0 0 220px; margin:0; } .topbar { flex-wrap:wrap; gap:1.5rem; } .local-badge { display:none; } }
  @media(max-width:540px) { main { padding:2rem 1rem; } .cards { grid-template-columns:1fr; } .topbar { padding:1rem; } nav { gap:1.1rem; } .panel { padding:1rem; } .composer-controls { display:grid; grid-template-columns:1fr; } .composer-controls label { width:100%; } .composer-controls select { width:100%; } }
}
@layer components {
  .eyebrow { color:var(--mint); font:700 .7rem/1.4 ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1rem; }
  .muted { color:var(--muted); }
  .small { font-size:.85rem; }
  .local-badge,.tag { font:650 .65rem/1.5 ui-monospace,monospace; letter-spacing:.04em; padding:.4rem .6rem; color:var(--mint); border:1px solid var(--line); border-radius:4px; }
  .tag { display:inline-block; margin-bottom:1rem; color:var(--muted); }
  .panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.5rem; min-width:0; }
  .card { display:flex; flex-direction:column; gap:.4rem; min-width:0; padding:1.5rem; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
  .card p { color:var(--muted); font-size:.9rem; flex:1; }
  .card .number { color:var(--mint); font:500 1.6rem ui-monospace,monospace; }
  .card a { align-self:flex-start; font-weight:650; }
  .primary { background:var(--mint); color:#12241d; border-color:var(--mint); font-weight:700; }
  a.primary { display:inline-block; text-decoration:none; padding:.7rem 1.1rem; border-radius:7px; }
  .button-link { display:inline-block; min-height:44px; padding:.65rem .9rem; border:1px solid var(--line); border-radius:7px; }
  .notice { border-left:3px solid var(--gold); padding:.85rem 1rem; background:#292820; color:#f6dfb3; font-size:.9rem; }
  .good { color:var(--mint); }
  .bad { color:var(--red); }
  .progress-big { font:500 3.5rem/1.15 ui-monospace,monospace; color:var(--mint); }
  .metric { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:.75rem 0; gap:1rem; }
  .sidebar nav { display:block; min-width:0; }
  .sidebar ol { list-style:none; padding:0; margin:1rem 0; max-width:100%; }
  .sidebar a { display:block; padding:.75rem; border:1px solid transparent; color:var(--muted); text-decoration:none; border-radius:7px; font-size:.85rem; }
  .sidebar a[aria-current] { border-color:var(--mint); background:var(--panel); color:var(--text); }
  .sidebar a small { display:block; color:var(--mint); font:600 .65rem ui-monospace,monospace; margin-bottom:.35rem; }
  .query-preview { color:#c8f3dc; border:1px solid var(--line); border-radius:7px; padding:1.25rem; background:#0c1218; min-height:110px; user-select:text; }
  textarea { display:block; width:100%; min-height:150px; resize:vertical; color:var(--text); background:#0c1218; border:1px solid var(--line); border-radius:7px; padding:1rem; line-height:1.8; font-size:.9rem; margin:.5rem 0; }
  .breakdown { margin:1.25rem 0; }
  .breakdown dt { color:var(--mint); font-family:ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
  .breakdown dd { margin:.2rem 0 1rem; font-size:.95rem; }
  .memory-hook { border-left:3px solid var(--mint); padding:.5rem 1rem; color:var(--mint); }
  .case-story { max-width:80ch; color:var(--muted); border-left:3px solid var(--line); padding-left:1rem; }
  .mission-question { font-size:1.1rem; max-width:80ch; }
  .mission-trail { margin:1.5rem 0; gap:.6rem; }
  .mission-trail a { min-width:44px; min-height:44px; padding:.6rem; text-align:center; border:1px solid var(--line); border-radius:50%; }
  .mission-trail a[aria-current] { background:var(--mint); color:#12241d; }
  .mission-next { margin-top:2rem; }
  #feedback-root { position:fixed; bottom:1rem; right:1rem; z-index:10; }
  #feedback-open { border-color:var(--mint); box-shadow:0 2px 12px #0008; }
  .feedback-dialog { width:min(800px,calc(100vw - 2rem)); max-height:90dvh; overflow:auto; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1.5rem; }
  .feedback-dialog::backdrop { background:#000b; }
  .feedback-dialog label { display:block; margin-top:1rem; }
  .feedback-dialog .row h2 { margin:0; }
  .feedback-images { display:flex; flex-wrap:wrap; gap:1rem; }
  .feedback-images figure { margin:0 0 1rem; max-width:100%; }
  .feedback-dialog img { display:block; width:auto; max-width:100%; max-height:260px; height:auto; object-fit:contain; border:1px solid var(--line); margin-bottom:.75rem; }
  .feedback-entry { border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem; overflow-wrap:anywhere; }
  .feedback-note { white-space:pre-wrap; }
  #feedback-status { margin:1rem 0; color:var(--mint); }
  .composer-controls { margin:1.25rem 0; }
  label.control { display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; color:var(--muted); }
  label.choice { display:flex; align-items:start; gap:.65rem; padding:.6rem; border:1px solid transparent; border-radius:5px; cursor:pointer; }
  label.choice:has(input:checked) { background:var(--raised); border-color:var(--line); }
  .tokens { list-style:none; padding:0; max-height:340px; overflow:auto; }
  .tokens li { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; border-bottom:1px solid var(--line); padding:.5rem 0; }
  .tokens code { flex:1 1 180px; overflow-wrap:anywhere; font-size:.8rem; }
  .tokens button { padding:.35rem .6rem; min-width:44px; font-size:.8rem; }
  .rubric { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; margin:1rem 0; }
  .rubric div { background:var(--raised); padding:.8rem; border-radius:6px; }
  .rubric strong { display:block; color:var(--mint); font:500 1.4rem ui-monospace,monospace; }
  .rubric span { font-size:.7rem; color:var(--muted); }
  .result { margin:1rem 0; padding:1rem; background:var(--raised); border-radius:7px; }
  .result p:last-child { margin-bottom:0; }
  .checklist { list-style:none; padding:0; }
  .checklist li::before { content:'↳'; color:var(--mint); margin-right:.6rem; }
  .skip { position:absolute; top:-100px; left:1rem; z-index:10; padding:.75rem; background:var(--text); color:var(--bg); }
  .skip:focus { top:1rem; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  @media(forced-colors:active) { button,a,select,textarea,.panel,.card,.query-preview { border:1px solid ButtonText; } .good,.bad { color:CanvasText; } }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }
}