:root{
    --bg:#0e0e0c;
    --ink:#f3efe4;
    --muted:#8a8578;
    --line:#23221e;
    --panel:#15140f;
    --accent:#e8ff3a;       /* tonic I */
    --c-ii:#ff7ab6;
    --c-iii:#9b8cff;
    --c-iv:#46e3c1;
    --c-v:#ff8c42;
    --c-vi:#ffd166;
    --c-vii:#7ab8ff;
    --c-borrowed:#d0d0c4;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"JetBrains Mono",monospace;overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{
    min-height:100vh;
    background-image:
      radial-gradient(1200px 600px at 80% -10%, rgba(232,255,58,.06), transparent 60%),
      radial-gradient(800px 500px at -10% 110%, rgba(122,184,255,.05), transparent 60%);
  }

  /* form controls — normalize Safari/iOS rendering */
  button, select, input{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    font-family:inherit;
    border-radius:0;
  }
  select, input[type=number]{
    background-color:var(--panel);
    color:var(--ink);
    border:1px solid var(--line);
    padding:6px 10px;
    font-size:12px;
  }
  select{
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                      linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right:24px;
  }
  /* option is rendered by native picker on iOS; ensure dark styling where supported */
  option{ background-color:var(--panel); color:var(--ink); }

  /* ---------- header ---------- */
  header{
    display:flex;align-items:flex-end;justify-content:space-between;
    padding:28px 32px 18px;border-bottom:1px solid var(--line);
  }
  .brand{display:flex;align-items:baseline;gap:14px}
  .brand h1{
    font-family:"Fraunces",serif;font-weight:700;font-style:italic;
    font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;margin:0;
  }
  .brand .tag{color:var(--muted);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
  .meta{display:flex;gap:20px;align-items:center;font-size:11px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase}
  .meta span b{color:var(--ink);font-weight:500}

  /* ---------- controls ---------- */
  .controls{
    display:flex;gap:8px;flex-wrap:wrap;align-items:center;
    padding:14px 32px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  }
  .ctrl{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  button{
    background:transparent;color:var(--ink);border:1px solid var(--ink);
    padding:8px 14px;font-family:inherit;font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;cursor:pointer;transition:all .15s ease;
  }
  button:hover{background:var(--ink);color:var(--bg)}
  button.primary{background:var(--accent);color:#0a0a08;border-color:var(--accent);font-weight:700}
  button.primary:hover{background:#f5ff6a;border-color:#f5ff6a;color:#0a0a08}
  button.ghost{border-color:var(--line);color:var(--muted)}
  button.ghost:hover{color:var(--ink);border-color:var(--ink);background:transparent}

  /* ---------- main layout ---------- */
  main{
    display:grid;grid-template-columns:380px 1fr;gap:0;
    min-height:calc(100vh - 130px);
  }
  @media (max-width:900px){main{grid-template-columns:1fr}}

  /* ---------- palette ---------- */
  .palette{
    border-right:1px solid var(--line);padding:22px 24px;
  }
  .palette h2{
    font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
    margin:0 0 14px;font-weight:500;
  }
  .chord-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:22px}
  .chip{
    --c:var(--ink);
    position:relative;cursor:grab;user-select:none;
    background:var(--panel);border:1px solid var(--line);
    padding:14px 14px 12px 18px;display:flex;flex-direction:column;gap:3px;
    transition:transform .12s ease, border-color .12s ease, background .12s ease;
    overflow:hidden;
  }
  .chip:hover{border-color:var(--c);transform:translateY(-1px);background:#1c1b15}
  .chip:active{cursor:grabbing}
  .chip .roman{font-size:10px;letter-spacing:.24em;color:var(--c);font-weight:700;text-shadow:0 0 12px color-mix(in srgb, var(--c) 30%, transparent)}
  .chip .name{font-family:"Fraunces",serif;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
  .chip .notes{font-size:9px;color:var(--muted);letter-spacing:.12em;margin-top:3px;font-family:"JetBrains Mono",monospace}
  .chip::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);
    box-shadow:0 0 12px color-mix(in srgb, var(--c) 40%, transparent);
  }
  .chip::after{
    content:"";position:absolute;right:-30px;top:-30px;width:60px;height:60px;
    background:var(--c);opacity:.06;border-radius:50%;pointer-events:none;
  }

  /* ---------- bars ---------- */
  .stage{padding:22px 28px 60px;overflow-x:auto}
  .stage h2{
    font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
    margin:0 0 6px;font-weight:500;
  }
  .stage .hint{color:var(--muted);font-size:11px;margin-bottom:18px}

  .timeline{
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;
  }
  @media (max-width:700px){.timeline{grid-template-columns:repeat(2,1fr)}}

  .bar{
    position:relative;background:var(--panel);border:1px dashed var(--line);
    min-height:170px;padding:30px 10px 10px;display:grid;gap:6px;
    transition:border-color .15s ease, background .15s ease;
  }
  .bar.div-1{grid-template-columns:1fr}
  .bar.div-2{grid-template-columns:1fr 1fr}
  .bar.div-4{grid-template-columns:1fr 1fr 1fr 1fr}
  .bar.drop{border-color:var(--accent);background:rgba(232,255,58,.04)}
  .bar.playing{border-color:var(--accent);border-style:solid;box-shadow:inset 0 0 0 1px var(--accent), 0 0 20px rgba(232,255,58,.1)}
  .bar .bar-num{
    position:absolute;top:8px;left:10px;font-size:9px;color:var(--muted);letter-spacing:.2em;
  }
  .bar .bar-beats{
    position:absolute;top:8px;right:44px;font-size:9px;color:var(--muted);letter-spacing:.2em;
  }
  .bar .bar-div{
    position:absolute;top:4px;right:6px;border:1px solid var(--line);background:transparent;
    color:var(--muted);font-size:10px;letter-spacing:.12em;padding:2px 6px;cursor:pointer;
    font-family:inherit;
  }
  .bar .bar-div:hover{color:var(--ink);border-color:var(--ink);background:transparent}
  .bar-slot{
    position:relative;background:transparent;border:1px dashed transparent;
    min-height:96px;display:flex;
  }
  .bar-slot.empty{border-color:var(--line)}
  .bar-slot.drop{border-color:var(--accent);background:rgba(232,255,58,.05)}
  .slot{
    --c:var(--ink);
    position:relative;background:#1b1a15;border:1px solid var(--line);
    padding:12px 12px 10px 16px;display:flex;flex-direction:column;gap:3px;
    cursor:grab;flex:1;min-width:0;overflow:hidden;
  }
  .slot::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);
    box-shadow:0 0 10px color-mix(in srgb, var(--c) 35%, transparent);
  }
  .slot .roman{font-size:9px;letter-spacing:.22em;color:var(--c);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slot .name{font-family:"Fraunces",serif;font-size:20px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
  .slot.compact .name{font-size:15px}
  .slot .rm{
    position:absolute;top:4px;right:6px;border:none;background:transparent;color:var(--muted);
    font-size:14px;padding:2px 6px;cursor:pointer;letter-spacing:0;
  }
  .slot .rm:hover{color:var(--ink);background:transparent}
  .slot.playing{background:#26251d;box-shadow:inset 0 0 0 1px var(--c)}
  .bar-slot.playing .slot{background:#26251d;box-shadow:inset 0 0 0 1px var(--c)}

  /* ---------- circle of fifths ---------- */
  .circle-wrap{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
  .circle-wrap h2{margin-bottom:14px}
  .circle-svg{width:100%;height:auto;display:block;user-select:none;max-width:340px;margin:0 auto}
  .circle-svg .wedge{cursor:pointer;transition:opacity .15s ease;opacity:.4}
  .circle-svg .wedge.in-key{opacity:1}
  .circle-svg .wedge:hover{opacity:1}
  .circle-svg .wedge-bg{fill:var(--panel);stroke:var(--line);stroke-width:1}
  .circle-svg .wedge.in-key .wedge-bg{fill:#1e1d17}
  .circle-svg .wedge.tonic .wedge-bg{fill:rgba(232,255,58,.18);stroke:var(--accent);stroke-width:1.5}
  .circle-svg text{fill:var(--ink);font-family:"Fraunces",serif;font-size:16px;pointer-events:none}
  .circle-svg .roman-lbl{fill:var(--muted);font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.15em}
  .circle-svg .inner-lbl{fill:var(--muted)}

  /* ---------- footer info ---------- */
  .roman-readout{
    padding:14px 32px;border-top:1px solid var(--line);
    display:flex;gap:18px;align-items:center;flex-wrap:wrap;
    font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;
  }
  .roman-readout .seq{color:var(--ink);font-family:"Fraunces",serif;font-style:italic;font-size:18px;letter-spacing:0;text-transform:none}

  .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--muted)}
  .dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}