Editing Openai/68fceef0-7248-8013-bf5d-581461dec5bc (section)

=== Assistant: THEMS Drum–Pinion Calculator — index.html PART 1/10 ===
THEMS Drum–Pinion Calculator — <code>index.html</code> (PART 1/10)
(copy–paste; I’ll send the next chunk on your cue)

<syntaxhighlight lang="html"><!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>THEMS — Drum–Pinion Calculator (Single Pair of Arms)</title>
  <style>
    :root{
      --bg:#0f172a;          /'' slate-900 ''/
      --panel:#0b1225cc;     /'' translucent dark ''/
      --text:#e5e7eb;        /'' zinc-200 ''/
      --muted:#9ca3af;       /'' gray-400 ''/
      --accent:#38bdf8;      /'' sky-400 ''/
      --accent-2:#22d3ee;    /'' cyan-400 ''/
      --ok:#22c55e;          /'' green-500 ''/
      --warn:#f97316;        /'' orange-500 ''/
      --bad:#ef4444;         /'' red-500 ''/
      --card:#111827;        /'' gray-900 ''/
      --border:#1f2937;      /'' gray-800 ''/
      --shadow:0 10px 30px hsl(210 40% 2% /.6);
      --radius:14px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
      background:
        radial-gradient(1200px 800px at 100% -20%,#0ea5e9 0%,transparent 60%),
        radial-gradient(1000px 700px at -10% 120%,#22d3ee 0%,transparent 60%),
        var(--bg);
      color:var(--text)
    }
    .wrap{max-width:1200px;margin:auto;padding:24px}
    header{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:16px}
    h1{font-size:clamp(1.4rem,2.6vw,2rem);margin:0;letter-spacing:.3px}
    .note{color:var(--muted);font-size:.95rem}
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
    .panel{
      grid-column:span 12;
      background:var(--panel);
      backdrop-filter:blur(6px);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow)
    }
    .panel .inner{padding:18px}
    .subgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
    .field{grid-column:span 6}
    .field label{display:block;margin-bottom:6px;font-weight:600;color:#cbd5e1}
    .field input,.field select{
      width:100%;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid var(--border);
      background:#0b1225;
      color:var(--text)
    }
    .field small{display:block;color:var(--muted);margin-top:6px}
    .row{display:flex;gap:10px;flex-wrap:wrap}
    .btn{
      appearance:none;border:0;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      color:#001018;font-weight:800;
      padding:12px 16px;border-radius:12px;cursor:pointer;
      box-shadow:0 10px 20px rgba(34,211,238,.25);
      transition:transform .05s ease
    }
    .btn:active{transform:translateY(1px)}
    .btn.secondary{
      background:#0b1225;color:var(--text);
      border:1px solid var(--border);box-shadow:none
    }
    .cards{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
    .card{
      grid-column:span 6;background:var(--card);
      border:1px solid var(--border);border-radius:12px;padding:14px
    }
    .card h3{margin:0 0 8px 0;font-size:1.05rem;color:#cbd5e1}
    .kv{display:grid;grid-template-columns:1fr auto;gap:8px;
        font-family:ui-monospace,Consolas,Menlo,monospace;font-size:.98rem}
    .pill{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:700}
    .ok{background:color-mix(in oklab, var(--ok), transparent 80%);color:#10b981}
    .bad{background:color-mix(in oklab, var(--bad), transparent 85%);color:#ef4444}
    .muted{color:var(--muted)}
    .tabs{display:flex;gap:6px;margin:10px 0 0}
    .tab{
      padding:10px 12px;border-radius:10px;background:#0b1225;
      border:1px solid var(--border);cursor:pointer;color:#cbd5e1
    }
    .tab.active{
      background:linear-gradient(135deg,#0ea5e9,#06b6d4);
      color:#05222a;font-weight:800
    }
    .hidden{display:none}
    details{border:1px dashed var(--border);border-radius:12px;padding:10px;background:#0b1225}
    details > summary{cursor:pointer;font-weight:700;color:#cbd5e1}
    a{color:#7dd3fc}
    footer{margin:24px 0;color:var(--muted);text-align:center}
    @media (max-width:900px){.card{grid-column:span 12}.field{grid-column:span 12}}
  </style>
</head>
<body>
  <div class="wrap">
    <header>
      <h1>THEMS — Drum–Pinion Calculator (Single Top–Bottom Arm Pair)</h1>
      <div class="note">Imperial units only. Results shown after clicking <strong>Calculate</strong>. No live updates.</div>
    </header>

    <!-- Tabs -->
    <div class="tabs" role="tablist">
      <button class="tab active" data-tab="calc" aria-selected="true">Calculator</button>
      <button class="tab" data-tab="info" aria-selected="false">Detailed Information</button>
    </div>

    <!-- Calculator Panel -->
    <section id="calc" class="panel" role="tabpanel" aria-labelledby="Calculator">
      <div class="inner subgrid">
        <!-- Left: Inputs -->
        <div class="field" style="grid-column:span 6">
          <label>Arm Angle θ (degrees from horizontal)</label>
          <input id="angle" type="number" min="0" max="90" value="35" />
          <small>Applies to both arms: top = θ down; bottom = θ up.</small>
        </div>
        <div class="field" style="grid-column:span 6">
          <label>Arm (Rack) Length L (inches)</label>
          <input id="length" type="number" min="12" max="48" step="1" value="24" />
          <small>Both arms always identical length.</small>
        </div>

</syntaxhighlight>

Say “NEXT” when you want PART 2/10.