:root{color:#24190f;font-synthesis:none;text-rendering:optimizelegibility;background:#eadfca;font-family:Alegreya,Iowan Old Style,Palatino Linotype,serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 15%,#b3462942,#0000 28rem) 20% 15%/120% 120%,linear-gradient(135deg,#f5ead7 0%,#e4d1af 44%,#b9c0a1 100%) 0%/180% 180%;min-width:320px;min-height:100vh;margin:0;transition:background-position .42s}body.is-playing{animation:9s ease-in-out infinite alternate playback-background-flow}button,input,select{font:inherit}button{color:#fff8ed;cursor:pointer;background:#3c2b1e;border:0;border-radius:999px;padding:.85rem 1.25rem}button:disabled{cursor:wait;opacity:.64}button.secondary{color:#3c2b1e;background:#fff8eda3;border:1px solid #3c2b1e38}input,select{color:#24190f;background:#fffaefd1;border:1px solid #3c2b1e42;border-radius:999px;width:100%;min-width:0;padding:.8rem 1rem}.shell{width:min(68rem,100% - 2rem);margin:0 auto;padding:4rem 0}.hero{gap:.9rem;max-width:45rem;animation:.58s ease-out both rise;display:grid}.eyebrow{color:#8a3f27;letter-spacing:0;text-transform:uppercase;margin:0;font-size:.82rem;font-weight:700}h1{letter-spacing:0;margin:0;font-size:8.5rem;font-weight:900;line-height:.9}.lede{color:#5b4937;max-width:34rem;margin:0;font-size:1.5rem;line-height:1.25}.control-card,.generation-card,.score-card,.notices-card,.visualizer-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fff8eda3;border:1px solid #3c2b1e26;border-radius:1.6rem;box-shadow:0 1.5rem 4rem #3f2d1c29}.control-card{max-width:64rem;margin:3rem 0 1rem;padding:1.3rem;animation:.58s ease-out 80ms both rise}.control-card label,.metric-label{color:#6f5136;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;font-weight:700;display:block}.seed-row{grid-template-columns:repeat(4,minmax(10rem,1fr));gap:.7rem;margin-top:.65rem;display:grid}.seed-row input{grid-area:1/1/auto/3}#random-seed{grid-area:1/3}.seed-row button[type=submit]{grid-area:1/4}.seed-row button{white-space:nowrap}.hint{color:#6b5a47;margin:.8rem 0 0}.score-card,.generation-card,.transport-card{gap:.8rem;max-width:64rem;padding:1rem;animation:.58s ease-out .16s both rise;display:grid}.notices-card{overflow-wrap:anywhere;max-width:64rem;margin-top:1rem;padding:1rem;animation:.58s ease-out .36s both rise}.notices-card h2,.notices-card h3{letter-spacing:0;margin:0}.notices-card h2{font-size:1.45rem}.notices-card h3{color:#6f5136;text-transform:uppercase;font-size:.95rem}.notices-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin-top:1rem;display:grid}.notices-grid section{min-width:0}.notices-grid ul{color:#5b4937;margin:.65rem 0 0;padding-left:1.1rem;line-height:1.35}.app-footer{text-align:right;max-width:64rem;margin-top:1rem}.app-footer a{color:#5b4937;font-weight:700}.score-card,.generation-card{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-top:1rem}.transport-card{background:linear-gradient(135deg,#3c2b1e14,#fff8edb8),#fff8ed8f;border:1px solid #3c2b1e26;border-radius:1.6rem;grid-template-columns:1fr auto;align-items:center;margin-top:1rem;animation-delay:.22s;box-shadow:0 1.5rem 4rem #3f2d1c21}.score-card>div,.generation-card>div{background:#ffffff5c;border-radius:1rem;padding:1rem}.score-card strong,.generation-card strong,.transport-card strong{font-variant-numeric:tabular-nums;margin-top:.35rem;font-size:1.35rem;line-height:1.15;display:block}.transport-summary{min-width:0}.playback-position{color:#5f4630;font-variant-numeric:tabular-nums;margin-top:.45rem;font-size:.96rem;line-height:1.2;display:block}.score-card strong,.generation-card strong{white-space:nowrap}.transport-actions{flex-wrap:wrap;justify-content:flex-end;gap:.7rem;display:flex}.visualizer-card{margin-top:1rem;padding:.8rem;animation:.58s ease-out .3s both rise}#piano-roll{border-radius:1.1rem;width:100%;height:clamp(17rem,48vw,25rem);display:block}@keyframes rise{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes playback-background-flow{0%{background-position:18% 12%,0%}to{background-position:72% 34%,100%}}@media (prefers-reduced-motion:reduce){body.is-playing{background-position:58% 26%,70%;animation:none}}@media (width<=760px){.shell{padding:2.5rem 0}h1{font-size:3.65rem}.lede{font-size:1.2rem}.score-card strong,.generation-card strong{white-space:normal}.seed-row,.generation-card,.score-card,.notices-grid,.transport-card{grid-template-columns:1fr}.seed-row input,#random-seed,.seed-row button[type=submit]{grid-area:auto/1}.transport-actions{justify-content:stretch}.transport-actions button{flex:9rem}}