/* source: faerdighed\geometri\arealer.htm style block 1 */
:root{ --gap:10px; --pad:12px; }
  body{
    font-family: Arial, sans-serif;
    margin:0; padding:24px 16px; background:#f0f8ff; color:#111; text-align:center;
  }
  h1{ margin:0 0 10px; color:#333366; }

  .container{
    max-width: 880px; margin: 0 auto; background:#fff; border-radius:10px;
    box-shadow: 2px 2px 10px rgba(0,0,0,.2); padding:16px;
  }

  .button-bar{
    display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin:10px 0 4px;
  }
  .button-bar > button{
    display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  }
  button{
    padding:10px 16px; font-size:1rem; background:#333366; color:#fff; border:none; border-radius:8px; cursor:pointer;
  }
  button.secondary{ background:#fff; color:#333; border:1px solid #cfd3d8; }
  button:hover{ filter:brightness(1.08); }

  .board{
    display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:10px; text-align:left;
  }
  @media (max-width: 900px){ .board{ grid-template-columns: 1fr; } }

  .card{
    background:#fff; border:1px solid #e2e6ef; border-radius:10px; padding:var(--pad);
  }

  svg{ width:100%; height:360px; background:#fff; border:1px solid #ccd5e3; border-radius:8px; }
  .dim{ font-size:14px; fill:#111; }
  .figure{ stroke:#111; stroke-width:2; fill:rgba(26,115,232,0.08); }
  .guide{ stroke:#999; stroke-width:1.5; stroke-dasharray:5 4; fill:none; }

  #info{ font-size:1.05rem; }
  #formula{ font-size:1.05rem; }
  #answer{ display:none; margin-top:10px; padding:10px; background:#e6f7ff; border-radius:8px; }

  .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }