:root{color-scheme:dark}
*{box-sizing:border-box}
/* kill double-tap zoom delay on controls without breaking page scroll */
button,select,input,textarea,label{ touch-action:manipulation; }
body{margin:0;background:#0b0a0e;color:#f4f4f5;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:#fbbf24}
.wrap{max-width:48rem;margin:0 auto;padding:0 1rem}
header.top{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(251,191,36,.22);background:rgba(11,10,14,.92);backdrop-filter:blur(8px);box-shadow:0 1px 28px rgba(251,191,36,.07)}
.top-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;max-width:48rem;margin:0 auto}
.brand{display:flex;gap:.7rem;align-items:center}
.logo{width:2.75rem;height:2.75rem;border-radius:.9rem;background:#1c1917;border:1px solid rgba(251,191,36,.35);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;box-shadow:0 4px 16px rgba(251,191,36,.25);overflow:hidden}
.logo svg{width:100%;height:100%;display:block}
.brand h1{font-size:1.35rem;margin:0;line-height:1.1;font-weight:800;letter-spacing:.03em;font-family:ui-rounded,"SF Pro Rounded","Segoe UI",ui-sans-serif,system-ui,sans-serif;background:linear-gradient(180deg,#fff8e1 20%,#fbbf24 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 12px rgba(251,191,36,.3))}
.brand small{color:#fcd34d;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.avatar{width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fcd34d;font-weight:700;cursor:pointer;flex-shrink:0}
/* icons */
.ic{width:1.15em;height:1.15em;vertical-align:-.2em;flex-shrink:0}
.btn,.tabs button,.fab,.stepper button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:1rem;overflow:hidden;cursor:pointer}
.card:hover{border-color:rgba(251,191,36,.35)}
.card .meta{padding:.7rem .8rem;display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.card h3{margin:0;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card p{margin:.15rem 0 0;font-size:11px;color:#71717a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{display:inline-flex;align-items:center;gap:.25rem;background:rgba(0,0,0,.6);border-radius:999px;padding:.15rem .5rem;font-size:10px;color:#d4d4d8}
.btn{border:1px solid rgba(255,255,255,.15);background:#fbbf24;color:#000;border-radius:.7rem;padding:.6rem 1rem;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:#e4e4e7}
.btn.danger{background:transparent;color:#f87171;border-color:rgba(248,113,113,.4)}
.btn:disabled{opacity:.4;cursor:default}
input,select,textarea{width:100%;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:.6rem;padding:.6rem .7rem}
label{font-size:.8rem;color:#a1a1aa}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;background:rgba(0,0,0,.4);border-radius:.8rem;padding:.25rem;max-width:20rem}
.tabs button{border:0;border-radius:.6rem;padding:.55rem;background:transparent;color:#a1a1aa;cursor:pointer;font-weight:600}
.tabs button.on{background:#fbbf24;color:#000}
.grid2{display:grid;gap:.75rem}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.fab{position:fixed;right:max(1.25rem,env(safe-area-inset-right));bottom:max(1.25rem,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:.5rem;background:#fbbf24;color:#000;border:0;border-radius:999px;padding:.9rem 1.2rem;font-weight:700;cursor:pointer;box-shadow:0 10px 30px rgba(251,191,36,.25)}
.auth{max-width:24rem;margin:4rem auto;padding:0 1.2rem}
.hero{text-align:center;margin-bottom:1.5rem}
.hero .logo{width:5rem;height:5rem;font-size:2.4rem;margin:0 auto 1rem;box-shadow:0 12px 40px rgba(251,191,36,.35)}
.hero-art{width:100%;max-width:22rem;height:auto;display:block;margin:0 auto 1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.08)}
.hero h1{margin:0;font-size:2.6rem;font-weight:800;letter-spacing:.02em;font-family:ui-rounded,"SF Pro Rounded","Segoe UI",ui-sans-serif,system-ui,sans-serif;background:linear-gradient(180deg,#fff8e1 20%,#fbbf24 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(251,191,36,.35))}
.hero p{color:#a1a1aa;font-size:.95rem;margin:.6rem 0 0}
.chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:1rem;text-align:center;font-size:11px;color:#a1a1aa}
.chips div{border:1px solid rgba(255,255,255,.1);border-radius:.8rem;padding:.7rem .4rem;background:rgba(255,255,255,.03)}
form.panel{border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:1.2rem;background:rgba(255,255,255,.03);display:grid;gap:.8rem}
.editor{display:flex;height:100vh;height:100dvh;flex-direction:column}
.ed-head{display:flex;gap:.5rem;align-items:center;padding:.5rem .6rem;border-bottom:1px solid rgba(255,255,255,.1)}
.ed-head input{flex:1}
#roll{flex:1;min-height:0;display:block;touch-action:none;background:#101014;border-radius:.8rem}
/* canvas handles its own pan (see rollEdit) so the browser must not steal the gesture */
.rollwrap{border-radius:.8rem;overscroll-behavior:contain}
.rollwrap{border-radius:.8rem}
.rollwrap canvas{display:block}
.ed-foot{border-top:1px solid rgba(255,255,255,.1);padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom));display:grid;gap:.5rem}
.row{display:flex;gap:.5rem;align-items:center}
.play{width:2.75rem;height:2.75rem;border-radius:999px;border:0;background:#fbbf24;font-size:1.2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.play.stop{background:#ef4444}
.stepper{display:flex;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:.6rem;background:rgba(0,0,0,.4)}
.stepper button{background:none;border:0;color:#a1a1aa;font-size:1.2rem;padding:.55rem .9rem;cursor:pointer;min-height:44px}
.stepper span{min-width:64px;text-align:center;font-size:.75rem;font-weight:700}
dialog{background:#18181b;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:1rem;max-width:26rem;width:calc(100vw - 2rem)}
dialog::backdrop{background:rgba(0,0,0,.6)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:2rem;background:#27272a;border:1px solid rgba(255,255,255,.12);padding:.6rem 1rem;border-radius:.7rem;z-index:99}
.hint{font-size:.75rem;color:#71717a}
.demo{border:1px solid rgba(251,191,36,.25);background:rgba(251,191,36,.06);color:#fde68a;border-radius:.6rem;padding:.5rem .7rem;font-size:.75rem;text-align:center}
/* brand mark */
.logo svg{width:62%;height:62%;display:block}
/* editor controls must shrink/wrap instead of crushing each other */
.ed-head input,.ed-foot input,.ed-foot select{min-width:0}
.ed-foot .row{flex-wrap:wrap}
.touch-hint{display:none}
@media(max-width:640px){
  .keys-hint{display:none}
  .touch-hint{display:inline}
  .stepper span{min-width:52px;font-size:.7rem}
  .stepper button{padding:.55rem .7rem}
  .row{gap:.4rem}
  /* the foot can exceed short viewports: keep every row reachable */
  .ed-foot{max-height:46vh;overflow-y:auto}
}
/* page-level sideways scroll: never (the piano roll has its own scroller).
   overflow-x:clip preserves the sticky header; hidden is the fallback. */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
/* grid/flex children default to min-width:auto, letting wide intrinsic
   content (preview canvases) force columns off-screen */
.grid2>*{min-width:0}
.card canvas{max-width:100%}
.card .meta{flex-wrap:wrap;row-gap:.5rem}
/* ---- polish: motion + feedback (all cheap CSS, no behavior change) ---- */
.btn,.fab,.play,.tabs button,.stepper button{transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease}
.btn:active,.fab:active,.play:active{transform:scale(.96)}
.btn:focus-visible,.fab:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid #fbbf24;outline-offset:2px}
.card{transition:transform .18s ease,border-color .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.fab:hover{box-shadow:0 14px 36px rgba(251,191,36,.35)}
.play.stop{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
dialog{animation:pop .16s ease}
dialog::backdrop{animation:fade .16s ease}
@keyframes pop{from{transform:scale(.96) translateY(6px);opacity:0}}
@keyframes fade{from{opacity:0}}
.toast{animation:rise .2s ease}
@keyframes rise{from{transform:translate(-50%,8px);opacity:0}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(prefers-reduced-motion:no-preference){
  .hero-art{animation:drift 14s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translateY(0)}to{transform:translateY(-6px)}}
  .hero-art .flow{animation:flow 9s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-280}}
}