/* source: detbasale\labyrint.html style block 1 */
/* Modern, frisk palet */
  :root{
    --gap: 120;            /* afstand mellem noder (px) */
    --node: 60;            /* node-størrelse (px) */
    --accent: #2563eb;     /* blå (knapper/rammer) */
    --accentHover:#1d4ed8; /* mørkere blå */
    --ring: #06b6d4;       /* cyan til ledetrådsring */
    --bg:   #f6f8fc;       /* lys neutral baggrund */
    --panel:#ffffff;       /* panelbaggrund */
    --ink:  #0f172a;       /* mørk tekst */
    --muted:#64748b;       /* grå til pile */
    --mutedText:#475569;   /* grå til labels */
    --ok:#16a34a;          /* grøn ok */
    --bad:#dc2626;         /* rød fejl */
  }
  body{font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif; margin:20px; color:var(--ink); background:var(--bg)}
  h1{font-size:clamp(22px,3.2vw,34px); margin:0 0 12px; text-align:center; font-weight:800; letter-spacing:.3px}
  .controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; justify-content:center}
  button{padding:10px 14px; border:0; background:var(--accent); color:#fff; border-radius:12px; cursor:pointer; box-shadow:0 2px 6px rgba(37,99,235,.25); font-weight:700}
  button:hover{background:var(--accentHover)}
  .controls label{display:flex; align-items:center; gap:6px; font-size:14px; padding:6px 10px; border:1px solid #e6eaf2; border-radius:10px; background:var(--panel)}
  input[type=number]{width:4.8rem; padding:8px 10px; border:2px solid var(--accent); border-radius:10px; outline:none}
  input[type=number]:focus{box-shadow:0 0 0 3px rgba(37,99,235,.2)}
  #wrap{position:relative; overflow:auto; border:1px solid #e6eaf2; border-radius:16px; padding:16px; background:var(--panel); box-shadow:0 4px 18px rgba(0,0,0,.05)}
  svg{display:block; max-width:100%}
  .edge{font-size:14px; fill:var(--mutedText); user-select:none}
  .arrow{stroke:var(--muted); marker-end:url(#arrowhead)}
  .node-sq{fill:#fff; stroke:var(--accent); stroke-width:3}
  .node-ci{fill:#fff; stroke:var(--ring); stroke-width:3}
  .given{font-weight:800; fill:var(--ink); font-size:18px}
  .fo-input{width:100%; height:100%; display:flex; align-items:center; justify-content:center}
  .fo-input input{width:100%; height:100%; border:0; outline:none; text-align:center; font-size:18px; background:transparent}
  .fo-input input::-webkit-outer-spin-button,
  .fo-input input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
  .ok{stroke:var(--ok) !important}
  .bad{stroke:var(--bad) !important}
  /* Facit indikator */
  .badge{position:absolute; top:10px; right:10px; padding:6px 10px; background:#dc2626; color:#fff; border-radius:9999px; font-weight:800; font-size:12px; letter-spacing:.6px; display:none; z-index:5}
  .watermark{position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-weight:900; font-size:72px; color:rgba(220,38,38,.15); pointer-events:none; transform:rotate(-18deg); z-index:4}
  .facit .badge{display:block}
  .facit .watermark{display:flex}
  @media print{ .controls{display:none} body{margin:0} #wrap{border:none; padding:0; box-shadow:none} }