/* Shared interactive-tool chrome extracted from the live tool template. */
    :root {
      --blue: #149bd7;
      --ink: #102131;
      --line: #d8e2ea;
      --muted: #5c6b78;
      --touch: 48px;
      --radius: 8px;
    }

    * { box-sizing: border-box; }

    html,
    body { min-height: 100%; }

    body {
      margin: 0;
      color: var(--ink);
      background: #edf5f9;
      font-family: Arial, Helvetica, sans-serif;
    }

    button,
    input,
    select { font: inherit; }

    button { min-height: var(--touch); }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
    }

    .topbar {
      display: grid;
      grid-template-columns: minmax(190px, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 12px 18px;
      background: #071018;
      color: #ffffff;
    }

    .brand {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .brand-logo {
      display: inline-flex;
      border-radius: 6px;
    }

    .brand-logo:focus-visible {
      outline: 4px solid rgba(20, 155, 215, 0.35);
      outline-offset: 3px;
    }

    .brand img {
      width: 142px;
      height: auto;
      display: block;
      object-fit: contain;
    }

    .brand h1 {
      margin: 0;
      font-size: clamp(1.35rem, 2vw, 2.05rem);
      line-height: 1.05;
    }

    .top-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    .icon-button {
      width: var(--touch);
      min-width: var(--touch);
      min-height: var(--touch);
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 2px solid #263d51;
      border-radius: var(--radius);
      background: #122436;
      color: #ffffff;
      cursor: pointer;
    }

    .icon-button:hover,
    .icon-button:focus-visible {
      border-color: #8fd8f3;
      background: var(--blue);
      color: #06111a;
    }

    .icon {
      width: 24px;
      height: 24px;
      display: block;
      pointer-events: none;
    }

    .home-button {
      min-height: var(--touch);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      border: 2px solid #263d51;
      border-radius: var(--radius);
      background: #122436;
      color: #ffffff;
      text-decoration: none;
      font-weight: 800;
      white-space: nowrap;
    }

    .home-button:hover,
    .home-button:focus-visible {
      border-color: #8fd8f3;
      background: var(--blue);
      color: #06111a;
    }

    .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 64px;
      padding: 8px 14px;
      background: #ffffff;
      border-bottom: 1px solid var(--line);
      overflow: visible;
    }

    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .toolbar-group.questions { margin-left: auto; }

    .toolbar button,
    .toolbar summary {
      min-height: 48px;
      padding: 0 16px;
      border: 1px solid #b9c9d5;
      border-radius: 8px;
      background: #ffffff;
      color: var(--ink);
      font-weight: 800;
      cursor: pointer;
    }

    .toolbar button.primary {
      border-color: var(--blue);
      background: var(--blue);
      color: #ffffff;
    }

    .toolbar details { position: relative; }

    .toolbar summary {
      display: flex;
      align-items: center;
      list-style: none;
    }

    .toolbar summary::-webkit-details-marker { display: none; }

    .menu-panel {
      position: absolute;
      z-index: 20;
      top: calc(100% + 8px);
      left: 0;
      width: min(300px, calc(100vw - 28px));
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 14px 32px rgba(7, 16, 24, 0.18);
    }

    .instructions-dialog {
      width: min(680px, calc(100vw - 32px));
      max-height: min(760px, calc(100vh - 32px));
      padding: 0;
      border: 0;
      border-radius: 8px;
      color: var(--ink);
      box-shadow: 0 24px 64px rgba(7, 16, 24, 0.35);
    }

    .instructions-dialog::backdrop { background: rgba(7, 16, 24, 0.58); }

    .instructions-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 18px;
      color: #ffffff;
      background: #071018;
    }

    .instructions-header h2 { margin: 0; }

    .instructions-body {
      padding: 18px;
      line-height: 1.55;
      overflow: auto;
    }


button { padding: 8px 14px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 800; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 4px solid rgba(20,155,215,.35); outline-offset: 2px; }
input, select { min-height: var(--touch); max-width: 100%; padding: 0 12px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 800; }
input[type=checkbox], input[type=radio] { width: 22px; min-height: 22px; accent-color: var(--blue); }
button[aria-pressed=true], button.primary { background: var(--blue); border-color: #0f80b3; color: #06111a; }
button:hover:not(:disabled), .tool-menu[open]>summary, .tool-menu>summary:hover { border-color: var(--blue); background: #e5f6fc; }
[hidden] { display: none!important; }
.tool-menu>summary { white-space: nowrap; }
.tool-workspace { background: linear-gradient(#dce8f0 1px,transparent 1px),linear-gradient(90deg,#dce8f0 1px,transparent 1px); background-size: 34px 34px; }
.tool-surface, .tool-control-panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 12px 32px rgba(15,33,49,.12); }
@media(max-width:860px) { .topbar { grid-template-columns: 1fr; } .top-actions { justify-content:flex-start; flex-wrap:wrap; } }
@media print { .topbar,.toolbar,.instructions-dialog { display:none!important; } .tool-workspace { background:white; } .tool-surface,.tool-control-panel { box-shadow:none; } }