@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
  :root{
    --bg:#f0ece4;--s1:#e8e3d9;--s2:#ddd7cb;--s3:#d2cbbe;
    --brd:#c4bba8;--brd2:#b0a691;
    --tx:#1a1a1a;--tx2:#5c5647;--tx3:#8a8276;--tx4:#b0a898;
    --or:#ff6600;--or2:#e55a00;--or-lo:rgba(255,102,0,0.06);--or-md:rgba(255,102,0,0.12);--or-hi:rgba(255,102,0,0.22);
    --vi:#5544cc;--vi-lo:rgba(85,68,204,0.06);--vi-brd:rgba(85,68,204,0.25);
    --am:var(--or);--am2:var(--or2);--am3:#ff8833;--am-lo:var(--or-lo);--am-md:var(--or-md);--am-hi:var(--or-hi)
  }
  *{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}
  body{font-family:'IBM Plex Sans',-apple-system,sans-serif;background:var(--bg);color:var(--tx);display:flex;align-items:center;justify-content:center;overflow:hidden}
  /* TE grid texture */
  body::before{content:'';position:fixed;inset:0;background-image:
    linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px),
    linear-gradient(0deg,rgba(0,0,0,0.03) 1px,transparent 1px);
    background-size:20px 20px;pointer-events:none;z-index:0}
  body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,transparent 40%,rgba(220,215,204,0.5) 100%);pointer-events:none;z-index:0}

  .app{position:relative;z-index:1;width:100%;max-width:480px;padding:20px;display:flex;flex-direction:column;height:100vh;max-height:820px}

  /* ═══ DEVICE FRAME ═══ */
  .device{background:var(--s1);border:2px solid var(--brd);border-radius:16px;padding:16px;flex:1;display:flex;flex-direction:column;min-height:0;position:relative;
    box-shadow:0 1px 0 var(--brd2),0 4px 12px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.5)}
  /* corner screws */
  .device::before,.device::after{content:'⊕';position:absolute;font-size:8px;color:var(--brd2);line-height:1}
  .device::before{top:8px;left:10px}
  .device::after{top:8px;right:10px}
  .screw-bl,.screw-br{position:absolute;font-size:8px;color:var(--brd2);line-height:1;bottom:8px}
  .screw-bl{left:10px}.screw-br{right:10px}

  /* ═══ HEADER ═══ */
  .hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;flex-shrink:0;padding:0 2px}
  .logo{font-family:'Space Mono',monospace;font-size:0.85rem;font-weight:700;color:var(--tx);letter-spacing:0.5px;text-transform:uppercase}
  .logo em{font-weight:400;font-style:normal;color:var(--tx3);font-size:0.65rem;margin-left:6px;letter-spacing:2px;text-transform:uppercase;vertical-align:1px}
  .hdr-r{display:flex;align-items:center;gap:10px}
  .fc{font-family:'Space Mono',monospace;font-size:0.55rem;color:var(--tx3);letter-spacing:0.5px}.fc b{color:var(--or)}
  .pro{padding:5px 14px;border-radius:6px;border:1.5px solid var(--or);background:transparent;color:var(--or);font-family:'Space Mono',monospace;font-size:0.5rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all 0.2s}
  .pro:hover{background:var(--or);color:var(--bg)}

  /* ═══ TAGLINE ═══ */
  .tag{font-family:'Space Mono',monospace;font-size:0.5rem;color:var(--tx4);margin-bottom:12px;flex-shrink:0;letter-spacing:2px;text-transform:uppercase;padding:0 2px}

  /* ═══ SCREEN / WHEEL ═══ */
  .wheel{position:relative;flex:1;min-height:0;overflow:hidden;margin-bottom:12px;border-radius:8px;border:2px solid var(--brd);background:var(--bg);
    box-shadow:inset 0 2px 6px rgba(0,0,0,0.06),inset 0 0 0 1px rgba(255,255,255,0.3)}
  .wt{position:absolute;left:0;right:0;top:0;will-change:transform}
  .wi{height:50px;display:flex;align-items:center;padding:0 24px;font-family:'Space Mono',monospace;font-size:0.75rem;font-weight:400;color:var(--tx3);border-bottom:1px solid rgba(180,172,158,0.3);opacity:0.2;user-select:none;letter-spacing:1px;text-transform:uppercase}
  .ww{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:52px;border-top:2px solid var(--or);border-bottom:2px solid var(--or);background:linear-gradient(90deg,rgba(255,102,0,0.06),rgba(255,102,0,0.02));pointer-events:none;z-index:2}
  .ww::before{content:'';position:absolute;left:0;top:-2px;bottom:-2px;width:4px;background:var(--or);border-radius:0 2px 2px 0}
  .ww::after{content:'▸';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--or);opacity:0.5}
  .wft{position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(var(--bg) 5%,transparent);pointer-events:none;z-index:3}
  .wfb{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to top,var(--bg) 5%,transparent);pointer-events:none;z-index:3}

  /* ═══ MINE BUTTON ═══ */
  .gen-area{flex-shrink:0;margin-bottom:10px}
  .gen{width:100%;padding:14px;background:var(--or);border:none;border-radius:8px;color:#fff;font-family:'Space Mono',monospace;font-size:0.7rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;
    box-shadow:0 2px 0 var(--or2),0 4px 12px rgba(255,102,0,0.2)}
  .gen:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--or2),0 6px 16px rgba(255,102,0,0.25)}
  .gen:active{transform:translateY(1px);box-shadow:0 1px 0 var(--or2),0 2px 6px rgba(255,102,0,0.15)}
  .gen.sp{opacity:0.8}
  .gen .gb{position:absolute;left:0;bottom:0;height:3px;background:rgba(255,255,255,0.4);width:0;border-radius:0 2px 2px 0}
  .ghint{text-align:center;font-family:'Space Mono',monospace;font-size:0.48rem;color:var(--tx4);margin-top:6px;letter-spacing:1px;text-transform:uppercase}

  /* ═══ RESULT PANEL ═══ */
  .res{flex-shrink:0;display:none;animation:warmUp 0.45s cubic-bezier(0.22,1,0.36,1)}.res.on{display:block}
  @keyframes warmUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  .rg{text-align:center;margin-bottom:2px}
  .rgn{font-family:'Space Mono',monospace;font-size:1.1rem;font-weight:700;color:var(--tx);letter-spacing:1px;text-transform:uppercase}
  .rgo{font-family:'Space Mono',monospace;font-size:0.5rem;color:var(--tx3);letter-spacing:2px;margin-top:2px;text-transform:uppercase}
  .rgf{font-size:0.6rem;color:var(--tx3);text-align:center;margin-bottom:12px;line-height:1.5;font-family:'Space Mono',monospace;letter-spacing:0.5px}

  /* ═══ CHORD STRIP ═══ */
  .strip{display:flex;gap:4px;margin-bottom:10px}
  .cb{flex:1;background:var(--bg);border:1.5px solid var(--brd);border-radius:8px;padding:12px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;position:relative;
    box-shadow:0 1px 0 var(--brd2)}
  .cb:hover{border-color:var(--or);background:var(--or-lo);transform:translateY(-1px);box-shadow:0 2px 0 var(--brd2)}
  .cb:active{transform:translateY(0);box-shadow:none}
  .cb.pl{border-color:var(--or)!important;background:var(--or-lo)!important;box-shadow:0 0 0 2px var(--or-md)!important}
  .cb.lk{border-color:var(--vi-brd)!important;background:var(--vi-lo)!important}
  .cb.lk::after{content:'';position:absolute;top:4px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--vi)}
  .cb-n{font-family:'Space Mono',monospace;font-size:0.4rem;color:var(--tx4);margin-bottom:3px;letter-spacing:1px}
  .cb-c{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:1rem;color:var(--tx);letter-spacing:-0.3px}
  .cb-r{font-family:'Space Mono',monospace;font-size:0.45rem;color:var(--tx3);margin-top:4px;letter-spacing:0.5px}

  /* ═══ TRANSPORT ═══ */
  .tp{display:flex;gap:3px}
  .tb{height:38px;border:1.5px solid var(--brd);border-radius:8px;background:var(--bg);color:var(--tx2);font-family:'Space Mono',monospace;font-size:0.55rem;font-weight:700;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;letter-spacing:1px;text-transform:uppercase;
    box-shadow:0 1px 0 var(--brd2)}
  .tb:hover{border-color:var(--or);color:var(--or);background:var(--or-lo)}
  .tb:active{transform:translateY(1px);box-shadow:none}
  .tb.on{border-color:var(--or);color:var(--or)}
  .tp-play{flex:0 0 40px;padding:0}
  .ptri{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:9px solid var(--tx2);transition:all 0.15s}
  .tp-play:hover .ptri,.tp-play.on .ptri{border-left-color:var(--or)}
  .ssq{width:8px;height:8px;background:var(--or);border-radius:1px;display:none}
  .tp-play.on .ptri{display:none}.tp-play.on .ssq{display:block}
  .tp-bpm{padding:0 8px;gap:3px;cursor:default}.tp-bl{font-size:0.4rem;color:var(--tx4);letter-spacing:1.5px}
  .tp-bv{font-size:0.7rem;font-weight:700;color:var(--tx);min-width:26px;text-align:center}
  .tp-ba{display:flex;flex-direction:column}.tp-aa{background:none;border:none;color:var(--tx3);font-size:0.45rem;cursor:pointer;padding:0 2px;line-height:1}.tp-aa:hover{color:var(--or)}
  .tp-key{padding:0 8px;gap:2px;cursor:default}.tp-kl{font-size:0.4rem;color:var(--tx4);letter-spacing:1.5px}
  .tp-key select{background:transparent;border:none;color:var(--tx);font-family:'Space Mono',monospace;font-size:0.65rem;font-weight:700;cursor:pointer;outline:none;appearance:none}
  .tp-key select option{background:var(--s1)}
  .tp-midi{flex:1;letter-spacing:2px}.tp-new{flex:0 0 auto}

  /* ═══ PAYWALL ═══ */
  .pw{display:none;position:fixed;inset:0;z-index:100;background:rgba(240,236,228,0.96);align-items:center;justify-content:center;backdrop-filter:blur(8px)}.pw.on{display:flex}
  .pwb{background:var(--s1);border:2px solid var(--brd);border-radius:16px;padding:36px 32px;max-width:380px;width:90%;text-align:center;
    box-shadow:0 1px 0 var(--brd2),0 8px 32px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.5)}
  .pwt{font-family:'Space Mono',monospace;font-size:1.1rem;font-weight:700;margin-bottom:6px;letter-spacing:0.5px;text-transform:uppercase}
  .pws{font-size:0.7rem;color:var(--tx2);margin-bottom:24px;line-height:1.7}
  .pwf{text-align:left;margin-bottom:24px;font-size:0.65rem;color:var(--tx2);line-height:2.2;font-family:'Space Mono',monospace;letter-spacing:0.3px}.pwf span{color:var(--or)}
  .pwop{text-align:center;margin-bottom:4px}.pwos{font-size:0.9rem;color:var(--tx4);text-decoration:line-through;font-weight:500}
  .pwla{font-family:'Space Mono',monospace;font-size:0.45rem;letter-spacing:4px;color:var(--or);text-align:center;margin-bottom:2px;font-weight:700;text-transform:uppercase}
  .pwp{font-family:'Space Mono',monospace;font-size:1.8rem;font-weight:700;color:var(--or);margin-bottom:2px}
  .pwpp{font-family:'Space Mono',monospace;font-size:0.5rem;color:var(--tx4);margin-bottom:4px;letter-spacing:1px}
  .pwsv{font-family:'Space Mono',monospace;font-size:0.5rem;color:#5a8a3a;text-align:center;margin-bottom:18px;letter-spacing:0.5px}
  .pwei{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
  .pwin{width:100%;padding:12px 14px;border:1.5px solid var(--brd);border-radius:8px;background:var(--bg);color:var(--tx);font-family:'Space Mono',monospace;font-size:0.7rem;outline:none;transition:border-color 0.2s}.pwin:focus{border-color:var(--or)}.pwin::placeholder{color:var(--tx4)}
  .pwin.err{border-color:#c04030;animation:shake 0.4s ease}
  @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
  .pwc{width:100%;padding:13px;border:none;border-radius:8px;background:var(--or);color:#fff;font-family:'Space Mono',monospace;font-size:0.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;margin-bottom:8px;transition:all 0.2s;
    box-shadow:0 2px 0 var(--or2),0 4px 12px rgba(255,102,0,0.2)}.pwc:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--or2),0 6px 16px rgba(255,102,0,0.25)}.pwc:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}
  .pwmn{font-size:0.5rem;color:var(--tx4);text-align:center;margin-bottom:12px;font-family:'Space Mono',monospace;letter-spacing:0.3px}
  .pwx{background:none;border:none;color:var(--tx3);font-family:'Space Mono',monospace;font-size:0.55rem;cursor:pointer;letter-spacing:1px;text-transform:uppercase}.pwx:hover{color:var(--tx)}
  .pwd-icon{font-size:2rem;color:var(--or);margin-bottom:14px}
  .pwd-price{font-family:'Space Mono',monospace;font-size:0.6rem;color:var(--or);margin-top:14px;padding:8px 18px;border:1.5px solid var(--or);border-radius:8px;display:inline-block;letter-spacing:0.5px}.pwd-price b{color:var(--or2)}

  /* ═══ MODEL LABEL ═══ */
  .model-label{font-family:'Space Mono',monospace;font-size:0.4rem;color:var(--tx4);text-align:center;letter-spacing:3px;text-transform:uppercase;margin-top:8px;padding:4px 0}

  @media(max-width:520px){body{align-items:flex-start}.app{max-height:none;padding:12px}.cb-c{font-size:0.85rem}.tp{flex-wrap:wrap}.tp-midi{min-width:calc(50% - 2px)}}