:root{
    --paper:#faf6ee; --ink:#20303a; --line:#dcd3c2;
    --chalk:#2f6f5e; --chalk-d:#245243; --sun:#e8a13a; --coral:#d96b52;
    --sky:#4a7fb0; --muted:#5f6a72; --good:#2f8f5b; --bad:#c0563f;
    --shadow:0 2px 0 rgba(32,48,58,.08);
    --font:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--font);background:var(--paper);color:var(--ink);
    line-height:1.5;min-height:100vh;
    background-image:radial-gradient(var(--line) 1px,transparent 1px);
    background-size:26px 26px;}
  .wrap{max-width:780px;margin:0 auto;padding:20px 16px 60px}
  .card{background:#fff;border:2px solid var(--line);border-radius:18px;
    padding:22px;box-shadow:var(--shadow);margin-bottom:16px}
  h1{font-size:1.9rem;color:var(--chalk-d);letter-spacing:-.5px}
  .brand{font-family:"Fredoka","Trebuchet MS",sans-serif;font-weight:700;font-size:clamp(1.7rem,8vw,2.6rem);
    letter-spacing:0;line-height:1.05;text-align:center;margin:2px 0 2px}
  .brand .em{color:var(--sun)}
  .brand .dot{color:var(--coral)}
  /* ---------- LANDINGSSIDE ---------- */
  .landing{max-width:960px;margin:0 auto}
  .hero{text-align:center;padding:14px 10px 6px}
  .hero .brand{font-size:clamp(2rem,9.5vw,3.4rem);margin-bottom:6px}
  .hero-tag{font-size:1.25rem;color:var(--chalk-d);font-weight:bold;margin-bottom:8px}
  .hero-sub{font-size:1.02rem;color:var(--muted);max-width:560px;margin:0 auto 18px}
  .hero-cta{display:inline-block;font-family:var(--font);font-weight:bold;font-size:1.15rem;
    background:var(--chalk);color:#fff;border:none;border-radius:14px;padding:14px 34px;cursor:pointer;
    box-shadow:0 4px 0 var(--chalk-d);transition:transform .05s}
  .hero-cta:active{transform:translateY(2px);box-shadow:0 2px 0 var(--chalk-d)}
  .hero-note{font-size:.85rem;color:var(--muted);margin-top:10px}
  .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:26px 0 10px}
  .shot{background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow);text-align:center}
  .shot img{width:100%;border-radius:10px;display:block;border:1px solid var(--line)}
  .shot .cap{font-weight:bold;color:var(--chalk-d);margin-top:10px;font-size:.95rem}
  .shot .cap small{display:block;color:var(--muted);font-weight:normal;font-size:.82rem;margin-top:2px}
  .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0}
  .feat{background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px 18px}
  .feat h3{color:var(--chalk-d);font-size:1.05rem;margin-bottom:4px;display:flex;align-items:center;gap:8px}
  .feat p{color:var(--muted);font-size:.92rem}
  .feat .fic{width:30px;height:30px;flex:0 0 auto}
  .landing-foot{text-align:center;margin:24px 0 10px}
  .band{background:#fff;border:2px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow);margin:18px 0}
  .band h2{text-align:center}
  h1 .em{color:var(--sun)}
  h2{font-size:1.25rem;color:var(--chalk-d);margin-bottom:10px}
  p.sub{color:var(--muted);margin-bottom:16px}
  label{display:block;font-weight:bold;margin:12px 0 4px;font-size:.95rem}
  input,select{width:100%;padding:12px;border:2px solid var(--line);
    border-radius:12px;font-size:1rem;font-family:var(--font);background:#fff}
  input:focus,select:focus{outline:none;border-color:var(--chalk)}
  button{font-family:var(--font);cursor:pointer;border:none;border-radius:12px;
    font-weight:bold;font-size:1rem;padding:12px 18px;transition:transform .05s}
  button:active{transform:translateY(1px)}
  .btn{background:var(--chalk);color:#fff;width:100%;box-shadow:0 3px 0 var(--chalk-d)}
  .btn:active{box-shadow:0 1px 0 var(--chalk-d)}
  .btn-2{background:var(--sun);color:#3a2a08;box-shadow:0 3px 0 #b47c22}
  .btn-ghost{background:transparent;color:var(--chalk-d);text-decoration:underline;
    box-shadow:none;width:auto;padding:6px 0;font-size:.9rem}
  /* fuldbredde-outline-knap til sekundære elevhandlinger */
  .btn-outline{background:#fff;color:var(--chalk-d);width:100%;border:2px solid var(--line);
    box-shadow:0 3px 0 var(--line);transition:border-color .12s}
  .btn-outline:hover{border-color:var(--chalk)}
  .btn-outline:active{box-shadow:0 1px 0 var(--line)}
  /* diskret adskiller med tekst */
  .auth-div{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem;margin:16px 0 12px}
  .auth-div::before,.auth-div::after{content:"";flex:1;height:1px;background:var(--line)}
  .auth-staff{display:flex;gap:8px;justify-content:center}
  /* blødt afrundet "knap-link" til børnesiderne */
  .btn-soft{background:var(--paper);color:var(--chalk-d);border:2px solid var(--line);
    box-shadow:none;width:auto;padding:8px 16px;font-size:.9rem;border-radius:999px;
    text-decoration:none;transition:border-color .12s,background .12s}
  .btn-soft:hover{border-color:var(--sun);background:#fff}
  @keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  /* guide-animationer */
  @keyframes gPop{0%{opacity:0;transform:scale(0.2)}60%{transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
  @keyframes gDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
  @keyframes gFly{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}
  @keyframes gFade{from{opacity:0}to{opacity:1}}
  .gstep-anim .gpop>*{opacity:0;animation:gPop .32s ease forwards}
  .gstep-anim .gfly{animation:gFly .5s ease forwards}
  .gstep-anim .gfade{animation:gFade .5s ease forwards}
  @media (prefers-reduced-motion:reduce){.gstep-anim .gpop>*,.gstep-anim .gfly,.gstep-anim .gfade{animation:none;opacity:1}}
  .card:not(.hidden){animation:cardIn .22s ease}
  @media (prefers-reduced-motion:reduce){.card:not(.hidden){animation:none}}
  .row{display:flex;gap:10px;flex-wrap:wrap}
  .row>*{flex:1}
  .msg{padding:10px 14px;border-radius:10px;margin-top:12px;font-size:.92rem;font-weight:bold}
  .msg.err{background:#fbe8e3;color:var(--bad)}
  .msg.ok{background:#e4f3ea;color:var(--good)}
  .hidden{display:none!important}
  .diffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-top:6px}
  .diff{border:2px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;
    cursor:pointer;font-weight:bold;font-size:.85rem;background:#fff;color:var(--ink)}
  .diff[data-on="1"]{border-color:var(--chalk);background:var(--chalk);color:#fff}
  .diff small{display:block;font-weight:normal;font-size:.72rem;opacity:.85}
  .topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:6px}
  .topic{border:2px solid var(--line);border-radius:14px;padding:16px 8px;text-align:center;
    cursor:pointer;background:#fff;font-weight:bold;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
  .topic:hover{border-color:var(--sun);transform:translateY(-3px);box-shadow:0 5px 0 rgba(232,161,58,.18)}
  .topic:active{transform:translateY(0);box-shadow:0 1px 0 rgba(232,161,58,.18)}
  .topic .ic{display:block;margin:0 auto 6px}
  /* quiz */
  .qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}
  .pill{background:var(--paper);border:2px solid var(--line);border-radius:999px;
    padding:4px 12px;font-weight:bold;font-size:.85rem;white-space:nowrap}
  .streak{background:#fff3dd;border-color:#f0cd8a;color:#a9741a}
  .streak.hot{background:#ffe0d6;border-color:var(--coral);color:#b6472f}
  .qbox{text-align:center;padding:18px 10px}
  .qtext{font-size:3.1rem;font-weight:bold;color:var(--chalk-d);margin-bottom:6px;line-height:1.12}
  .qhint{font-size:.95rem;color:var(--muted);font-weight:normal;margin-top:2px}
  .frac{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;
    margin:0 3px;line-height:1.05}
  .frac .top{border-bottom:3px solid currentColor;padding:0 7px}
  .frac .bot{padding:0 7px}
  .clock{margin:6px auto;display:block}
  .figbox{margin:6px auto 2px;display:block}
  .ans-in{max-width:240px;margin:14px auto 0;text-align:center;font-size:1.8rem;font-weight:bold}
  .feedback{font-size:1.15rem;font-weight:bold;margin-top:12px;min-height:1.4em}
  .feedback.good{color:var(--good)}
  .feedback.bad{color:var(--bad)}
  .shake{animation:shake .35s}
  @keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
  .prog{height:12px;background:var(--paper);border:2px solid var(--line);border-radius:999px;overflow:hidden;margin-bottom:14px}
  .prog>div{height:100%;background:var(--sun);width:0;transition:width .3s}
  /* multiple-choice buttons (klokken) */
  .choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:8px}
  .choice{border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;
    padding:10px;font-size:1.3rem;font-weight:bold;color:var(--chalk-d)}
  .choice:hover{border-color:var(--sun)}
  .choice[data-state="right"]{border-color:var(--good);background:#e4f3ea}
  .choice[data-state="wrong"]{border-color:var(--bad);background:#fbe8e3}
  /* on-screen numpad */
  .numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:260px;margin:14px auto 0}
  .numpad button{background:#fff;border:2px solid var(--line);color:var(--ink);
    font-size:1.4rem;padding:14px 0;box-shadow:0 2px 0 var(--line)}
  .numpad button:active{box-shadow:0 0 0 var(--line);transform:translateY(2px)}
  .numpad .np-act{background:var(--paper)}
  table{width:100%;border-collapse:collapse;font-size:.9rem}
  th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
  th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}
  tr:hover td{background:var(--paper)}
  .tag{display:inline-block;background:var(--paper);border-radius:8px;padding:2px 8px;font-size:.8rem;margin:2px 2px 0 0}
  .big{font-size:2rem;font-weight:bold;color:var(--chalk-d)}
  .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin-bottom:8px}
  .kpi{background:var(--paper);border-radius:12px;padding:12px 6px}
  .kpi small{display:block;color:var(--muted);font-size:.75rem}
  .topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
  .who{font-weight:bold;color:var(--chalk-d)}
  .foot{text-align:center;color:var(--muted);font-size:.8rem;margin-top:8px}
  .setup{background:#fff6e6;border:2px dashed var(--sun);border-radius:14px;padding:16px;font-size:.9rem}
  .setup code{background:#fff;padding:1px 5px;border-radius:5px;border:1px solid var(--line)}
  .stars{font-size:2rem;letter-spacing:4px;text-align:center;margin:6px 0}
  /* confetti */
  #confetti{position:fixed;inset:0;pointer-events:none;z-index:99}
  .conf{position:absolute;width:9px;height:14px;top:-20px;opacity:.95;border-radius:2px;
    animation:fall linear forwards}
  @keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:1}}
  @media (prefers-reduced-motion:reduce){.conf{display:none}.shake{animation:none}}