/* source: faerdighed\funktioner\toubekendte.htm style block 1 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
    :root{
      --c1:#007acc;
      --c2:#005a99;
      --bg:#e6f7ff;
      --b:#b3e0ff;
    }
    *{box-sizing:border-box}
    body{font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;margin:0;padding:24px;background:#fff;color:#111}
    .container{
      max-width: 900px; margin: 0 auto;
      background: var(--bg); border:2px solid var(--b); border-radius:12px; padding:20px;
      text-align:center;
    }
    h1{margin:0 0 8px 0; font-size:clamp(20px,3vw,28px)}
    p.lead{margin:4px 0 14px 0}
    .canvas-wrap{display:flex; gap:16px; align-items:flex-start; justify-content:center; flex-wrap:wrap}
    canvas{background:#fff; border:1px solid #000; border-radius:6px}
    .equations, .legend{
      background:#fff; border:2px solid var(--b); border-radius:10px; padding:12px; text-align:left; min-width:260px;
    }
    .equations b{display:inline-block; min-width:1ch}
    .legend .red{color:#d62828; font-weight:700}
    .legend .blue{color:#1d4ed8; font-weight:700}
    .buttons{margin-top:10px}
    button{
      font-size:15px; padding:10px 18px; margin:6px; cursor:pointer;
      border-radius:6px; border:1px solid var(--c1); background:var(--c1); color:#fff;
    }
    button:hover{background:var(--c2)}
    .solution{
      display:none; margin-top:14px; text-align:left;
      background:#fff; border:2px solid var(--b); border-radius:10px; padding:14px;
    }
    .step{margin:6px 0}
    .grid-note{font-size:12px; opacity:.8; margin-top:6px}
    .small{font-size:13px; opacity:.9}
    @media print{
      .buttons{display:none}
      body{padding:0}
      .container{border:none}
    }