:root{color-scheme:dark;font:100%/1.5 system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,Hiragino Sans,Noto Sans JP,sans-serif;--bg: #09090b;--bg-deep: #050506;--surface: rgba(25, 25, 29, .74);--surface-raised: rgba(38, 38, 43, .74);--surface-solid: #1c1c1e;--surface-control: rgba(118, 118, 128, .18);--surface-sheen: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018));--text: #f5f5f7;--secondary: #a1a1a6;--tertiary: #74747a;--blue: #0a84ff;--blue-hover: #409cff;--blue-soft: rgba(10, 132, 255, .16);--green: #30d158;--yellow: #ffd60a;--red: #ff453a;--separator: rgba(255, 255, 255, .09);--stroke: rgba(255, 255, 255, .12);--stroke-strong: rgba(255, 255, 255, .2);--shadow-card: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 70px rgba(0, 0, 0, .24);--shadow-device: 0 40px 90px rgba(0, 0, 0, .55), 0 6px 20px rgba(0, 0, 0, .4);--radius-card: 26px;--radius-control: 14px;--spring: cubic-bezier(.2, .8, .2, 1)}*{box-sizing:border-box}[hidden]{display:none!important}html{min-width:320px;background:var(--bg-deep);scroll-behavior:smooth}body{min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(900px 620px at 83% -5%,rgba(64,122,255,.17),transparent 62%),radial-gradient(720px 540px at -8% 18%,rgba(175,82,222,.1),transparent 68%),linear-gradient(180deg,var(--bg),var(--bg-deep));color:var(--text);font-family:inherit;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body:before{position:fixed;z-index:-1;top:0;right:0;bottom:0;left:0;content:"";pointer-events:none;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.38),transparent 72%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.38),transparent 72%)}::selection{color:#fff;background:var(--blue)}button,input,output{font:inherit}button,[role=button],summary,label[for]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button,a,summary,[role=button]{outline:none}:where(button,a,summary,[role=button],input):focus-visible{outline:3px solid rgba(10,132,255,.58);outline-offset:3px}svg{display:block}.site-header{width:min(1180px,100%);margin:0 auto;padding:max(22px,env(safe-area-inset-top)) 24px 42px}.header-bar{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:16px}.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;color:var(--text);text-decoration:none}.brand-mark{display:grid;width:38px;height:38px;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:linear-gradient(145deg,#5ac8fa,#0a84ff 46%,#5e5ce6);box-shadow:0 8px 24px #0a84ff38,0 1px #ffffff52 inset;color:#fff}.brand-mark svg{width:23px;height:23px;fill:currentColor}.logo{font-size:1.08rem;font-weight:700;letter-spacing:-.025em}.privacy-note{display:inline-flex;align-items:center;gap:7px;min-height:34px;margin:0;padding:7px 12px;border:1px solid var(--stroke);border-radius:999px;background:#1c1c1e94;color:var(--secondary);font-size:.76rem;font-weight:600;letter-spacing:.015em;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 1px #ffffff0d inset}.privacy-note svg{width:15px;height:15px;fill:none;stroke:var(--green);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}.hero-copy{max-width:820px;padding:clamp(64px,9vw,116px) 0 clamp(20px,4vw,42px);animation:hero-in .58s var(--spring) both}.eyebrow,.step-kicker,.preview-kicker{margin:0;color:var(--blue-hover);font-size:.7rem;font-weight:750;letter-spacing:.12em;line-height:1.2}.hero-copy h1{max-width:760px;margin:12px 0 18px;font-size:clamp(2.65rem,7vw,5.7rem);font-weight:730;letter-spacing:-.055em;line-height:.98;text-wrap:balance}.hero-copy h1 span{color:var(--secondary)}.tagline{max-width:650px;margin:0;color:var(--secondary);font-size:clamp(1rem,2vw,1.28rem);font-weight:450;letter-spacing:-.015em;line-height:1.55}.privacy-detail{margin:12px 0 0;color:var(--tertiary);font-size:.8rem}#app{width:min(1180px,100%);margin:0 auto;padding:0 24px 80px}.columns{display:flex;flex-direction:column;gap:22px}.flow{display:flex;min-width:0;flex:1;flex-direction:column;gap:22px}.step,.preview-pane{position:relative;overflow:hidden;border:1px solid var(--stroke);border-radius:var(--radius-card);background:var(--surface-sheen),var(--surface);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%);box-shadow:var(--shadow-card)}.step:before,.preview-pane:before{position:absolute;inset:0 0 auto;height:1px;content:"";pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent)}.step{padding:clamp(20px,4vw,32px);animation:materialize .52s var(--spring) both}.step:nth-child(2){animation-delay:60ms}.step:nth-child(3){animation-delay:.12s}.step-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:8px}.step h2{margin:5px 0 0;font-size:clamp(1.42rem,3vw,1.75rem);font-weight:690;letter-spacing:-.035em;line-height:1.18}.step-meta{flex:none;min-height:29px;padding:5px 10px;border:1px solid var(--stroke);border-radius:999px;background:var(--surface-control);color:var(--secondary);font-size:.72rem;font-weight:620}.hint{margin:0 0 18px;color:var(--secondary);font-size:.84rem;line-height:1.55}.setting-group{padding-top:24px}.setting-group+.setting-group{margin-top:24px;border-top:1px solid var(--separator)}.setting-heading{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}.setting-heading h3{margin:0;font-size:.98rem;font-weight:650;letter-spacing:-.015em}.setting-heading span{color:var(--tertiary);font-size:.72rem;text-align:right}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.setting-row .setting-heading{margin:0}.dropzone{position:relative;min-height:196px;padding:28px 16px;overflow:hidden;border:1px solid var(--stroke);border-radius:20px;background:radial-gradient(380px 180px at 50% 0%,var(--blue-soft),transparent 78%),var(--surface-control);cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;transition:transform .18s var(--spring),border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.dropzone:after{position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:1px dashed rgba(255,255,255,.13);border-radius:15px;content:"";pointer-events:none}.dropzone.drag{transform:scale(1.01);border-color:var(--blue);background-color:var(--blue-soft);box-shadow:0 0 0 4px #0a84ff1a}.dropzone:active{transform:scale(.992);transition-duration:80ms}.dropzone.loading{cursor:progress;opacity:.58;pointer-events:none}.dz-inner{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column}.dz-icon{display:grid;width:52px;height:52px;margin-bottom:13px;place-items:center;border:1px solid rgba(10,132,255,.3);border-radius:50%;background:var(--blue-soft);color:var(--blue-hover);box-shadow:0 8px 22px #0a84ff1f}.dz-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.dz-inner strong{font-size:1rem;font-weight:650;letter-spacing:-.015em}.dz-copy{margin-top:3px;color:var(--secondary);font-size:.78rem}.dz-sub{margin-top:12px;color:var(--tertiary);font-size:.72rem}.dz-sub b{color:var(--blue-hover)}.clip-list{display:flex;flex-direction:column;gap:9px;margin:12px 0 0;padding:0;list-style:none}.clip-item{display:flex;align-items:center;gap:12px;min-height:72px;padding:8px;border:1px solid var(--separator);border-radius:16px;background:var(--surface-control);transition:transform .16s var(--spring),opacity .16s ease,border-color .16s ease}.clip-item.dragging{transform:scale(.98);opacity:.5}.clip-thumb{width:38px;height:56px;flex:none;border-radius:9px;background:#000;box-shadow:0 0 0 1px var(--stroke);object-fit:cover}.clip-meta{display:flex;min-width:0;flex:1;flex-direction:column}.clip-name{overflow:hidden;font-size:.82rem;font-weight:550;text-overflow:ellipsis;white-space:nowrap}.clip-dur{color:var(--tertiary);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.7rem}.clip-actions{display:flex;gap:5px}.track-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.track-card,.theme-chip{position:relative;min-width:0;overflow:hidden;border:1px solid var(--separator);background:var(--surface-control);color:var(--text);cursor:pointer;text-align:left;transition:transform .18s var(--spring),border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.track-card{display:flex;min-height:112px;padding:14px 38px 13px 14px;border-radius:17px;flex-direction:column;gap:2px}.track-card:after,.theme-chip:after{position:absolute;display:grid;width:20px;height:20px;place-items:center;border:1px solid var(--stroke-strong);border-radius:50%;content:"";color:#fff;font-size:.68rem;font-weight:800;line-height:1;transition:transform .18s var(--spring),background-color .18s ease,border-color .18s ease}.track-card:after{top:13px;right:13px}.track-card>b{overflow:hidden;font-size:.86rem;font-weight:650;letter-spacing:-.012em;text-overflow:ellipsis;white-space:nowrap}.track-card span{overflow:hidden;color:var(--secondary);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.track-card .tc-bpm{margin-top:auto;color:var(--blue-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.7rem}.track-card .tc-badge{width:fit-content;margin:2px 0;padding:2px 7px;border-radius:999px;background:var(--blue-soft);color:var(--blue-hover);font-size:.62rem;font-weight:700}.track-card.active,.theme-chip.active{border-color:#0a84ffb8;background:var(--blue-soft);box-shadow:0 0 0 1px #0a84ff26 inset,0 10px 24px #0a84ff14}.track-card.active:after,.theme-chip.active:after{transform:scale(1.02);border-color:var(--blue);background:var(--blue);content:"✓"}.track-card:active,.theme-chip:active,.btn:not(:disabled):active,.icon-btn:not(:disabled):active,.seg-btn:active,.play-big:active{transform:scale(.97);transition-duration:80ms}.upload-row{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap}.beat-panel{margin-top:18px;padding:14px;border:1px solid var(--stroke);border-radius:18px;background:#0000002e}.beat-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.track-title{overflow:hidden;font-size:.82rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.bpm-badge{color:var(--blue-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.72rem;white-space:nowrap}.bpm-badge b{font-size:1rem}.waveform{display:block;width:100%;height:68px;margin-top:9px;border:1px solid var(--separator);border-radius:12px;background:#00000057}#tempo-fix{margin-top:10px;color:var(--secondary);font-size:.76rem}#tempo-fix summary{width:fit-content;cursor:pointer}.tempo-tools{display:flex;flex-direction:column;gap:10px;padding:12px 0 2px}.tempo-tools label{display:flex;align-items:center;gap:9px;font-size:.76rem}.tempo-tools input[type=number]{width:86px;min-height:38px;padding:7px 9px;border:1px solid var(--stroke);border-radius:10px;background:var(--surface-control);color:var(--text);font-family:ui-monospace,SFMono-Regular,monospace}.control-row{flex:none}.seg{display:inline-flex;min-height:42px;padding:3px;border:1px solid var(--stroke);border-radius:12px;background:var(--surface-control)}.seg-btn{min-width:78px;min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--secondary);cursor:pointer;font-size:.8rem;font-weight:560;transition:transform .12s var(--spring),background-color .18s ease,color .18s ease,box-shadow .18s ease}.seg-btn.active{background:var(--surface-raised);color:var(--text);box-shadow:0 3px 10px #0003,0 1px #ffffff14 inset}.theme-row{display:grid;grid-template-columns:1fr;gap:8px}.theme-chip{display:flex;min-height:70px;padding:13px 46px 13px 14px;border-radius:16px;flex-direction:column;justify-content:center;gap:2px}.theme-chip:after{top:50%;right:14px;transform:translateY(-50%)}.theme-chip.active:after{transform:translateY(-50%) scale(1.02)}.theme-chip b{font-size:.84rem;font-weight:630}.theme-chip span{color:var(--secondary);font-size:.69rem;line-height:1.4}.intensity{display:grid;align-items:center;grid-template-columns:auto minmax(80px,1fr) 44px;gap:12px;margin-top:14px;color:var(--secondary);font-size:.75rem}.intensity input{width:100%}#intensity-label{color:var(--blue-hover);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.72rem;text-align:right}input[type=range]{height:20px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--blue),rgba(118,118,128,.35))}input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px #00000052}input[type=range]::-moz-range-track{height:4px;border:0;border-radius:999px;background:#76768059}input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--blue)}input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px #00000052}.preview-pane{display:flex;align-items:stretch;padding:17px;flex-direction:column;gap:14px;animation:materialize .56s 90ms var(--spring) both}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 0}.preview-heading>div{display:flex;flex-direction:column;gap:4px}.preview-heading strong{font-size:1rem;font-weight:650;letter-spacing:-.02em}.preview-status{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:4px 9px;border-radius:999px;background:var(--surface-control);color:var(--tertiary);font-size:.66rem;font-weight:650}.preview-status:before{width:6px;height:6px;border-radius:50%;background:currentColor;content:""}.preview-status.ready{background:#30d1581f;color:var(--green)}.preview-status.playing{background:var(--blue-soft);color:var(--blue-hover)}.device-stage{display:grid;min-height:420px;padding:20px 12px;place-items:center;border:1px solid var(--separator);border-radius:22px;background:radial-gradient(300px 360px at 50% 42%,rgba(10,132,255,.12),transparent 72%),#0000002e}.phone{position:relative;width:min(68vw,244px);padding:7px;border:1px solid rgba(255,255,255,.28);border-radius:36px;background:linear-gradient(145deg,#48484a,#111113 14%,#050505 88%,#3a3a3c);box-shadow:var(--shadow-device),0 0 0 2px #050505 inset,0 1px #ffffff59}.phone:after{position:absolute;top:3px;right:3px;bottom:3px;left:3px;border:1px solid rgba(255,255,255,.08);border-radius:32px;content:"";pointer-events:none}.phone-notch{position:absolute;z-index:3;top:14px;left:50%;width:32%;height:17px;transform:translate(-50%);border:1px solid rgba(255,255,255,.05);border-radius:999px;background:#000;box-shadow:0 2px 5px #00000080}#preview-canvas{display:block;width:100%;aspect-ratio:9 / 16;border-radius:29px;background:radial-gradient(circle at 50% 42%,#202126,#0e0f12 72%),#0e0f12}.phone-overlay{position:absolute;display:flex;align-items:center;justify-content:center;top:7px;right:7px;bottom:7px;left:7px;border-radius:29px;background:#0003;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:1;transition:opacity .22s ease,backdrop-filter .22s ease}.phone-overlay.hidden{opacity:0;pointer-events:none}.play-big{display:grid;width:58px;height:58px;padding:0;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:#ffffffe6;color:#111113;cursor:pointer;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 10px 30px #00000047,0 1px #ffffffe6 inset;transition:transform .16s var(--spring),background-color .16s ease}.play-big svg{width:25px;height:25px;margin-left:2px;fill:currentColor;stroke:none}.play-big:disabled{cursor:not-allowed;opacity:.42}.preview-controls{display:flex;align-items:center;gap:9px}.preview-icon{flex:none}.timebar{height:4px;overflow:hidden;flex:1;border-radius:999px;background:var(--surface-control)}.timebar-fill{width:0;height:100%;border-radius:inherit;background:var(--blue)}.preview-note{margin:-2px 0 1px;color:var(--tertiary);font-size:.7rem;text-align:center}.btn,.icon-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--stroke);background:var(--surface-control);color:var(--text);cursor:pointer;font-weight:580;text-decoration:none;transition:transform .16s var(--spring),background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.btn{min-height:44px;padding:10px 15px;border-radius:var(--radius-control);gap:7px;font-size:.8rem}.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.65}.btn.primary{border-color:var(--blue);background:var(--blue);color:#fff;box-shadow:0 10px 28px #0a84ff2e,0 1px #fff3 inset}.btn:disabled{cursor:not-allowed;opacity:.38}.btn.primary:disabled{border-color:transparent;background:var(--surface-control);box-shadow:none;color:var(--tertiary);cursor:not-allowed;opacity:.78}.btn.ghost{background:transparent}.btn.small{min-height:44px;padding:7px 11px;border-radius:11px;font-size:.72rem}.btn.big{width:100%;min-height:54px;border-radius:16px;font-size:.94rem;font-weight:680}.icon-btn{width:44px;height:44px;flex:none;padding:0;border-radius:11px}.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.icon-btn:disabled{cursor:default;opacity:.28}.icon-btn.danger{color:var(--red)}.export-box{display:flex;padding-top:18px;flex-direction:column;gap:12px}.warn{position:relative;margin:0;padding:11px 13px 11px 35px;border:1px solid rgba(255,214,10,.2);border-radius:14px;background:#ffd60a12;color:#f3d75b;font-size:.73rem;line-height:1.5}.warn:before{position:absolute;top:12px;left:13px;display:grid;width:14px;height:14px;place-items:center;border:1px solid currentColor;border-radius:50%;content:"!";font-size:.6rem;font-weight:800;line-height:1}.warn.danger{border-color:#ff453a3d;background:#ff453a14;color:#ff7b72}.progress{position:relative;display:flex;align-items:center;height:36px;overflow:hidden;border:1px solid var(--stroke);border-radius:12px;background:var(--surface-control)}.progress-bar{position:absolute;width:0;top:0;right:0;bottom:0;left:0;border-right:1px solid rgba(255,255,255,.24);background:var(--blue-soft);transition:width .24s var(--spring)}#progress-label{position:relative;margin:0 auto;color:var(--secondary);font-family:ui-monospace,SFMono-Regular,monospace;font-size:.7rem}.export-done{display:flex;gap:9px;flex-wrap:wrap}.error{margin:10px 0 0;color:#ff7b72;font-size:.76rem}.muted{color:var(--secondary);font-size:.73rem}.site-footer{width:min(1180px,100%);margin:0 auto;padding:28px 24px max(34px,env(safe-area-inset-bottom));color:var(--tertiary);font-size:.72rem;text-align:center}.site-footer p{margin:0}.site-footer strong{color:var(--secondary);font-weight:650}@media(hover:hover){.brand:hover .brand-mark{transform:translateY(-1px);box-shadow:0 11px 28px #0a84ff47,0 1px #ffffff52 inset}.dropzone:hover{border-color:#0a84ff85;background-color:#0a84ff14}.track-card:hover,.theme-chip:hover{transform:translateY(-1px);border-color:var(--stroke-strong);background-color:#7676803d}.track-card.active:hover,.theme-chip.active:hover{border-color:var(--blue);background-color:#0a84ff33}.btn:not(:disabled):hover,.icon-btn:not(:disabled):hover{border-color:var(--stroke-strong);background-color:#76768045}.btn.primary:not(:disabled):hover{border-color:var(--blue-hover);background:var(--blue-hover)}.play-big:hover{transform:scale(1.035);background:#fff}}@media(min-width:560px){.theme-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:760px){.track-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:940px){.columns{align-items:flex-start;flex-direction:row;gap:24px}.flow{gap:24px}.preview-pane{position:sticky;top:20px;width:344px;flex:0 0 344px}.phone{width:224px}}@media(min-width:1120px){.preview-pane{width:364px;flex-basis:364px}.phone{width:236px}}@media(max-width:640px){.site-header{padding-right:16px;padding-left:16px}.privacy-note{font-size:.68rem}.hero-copy{padding-top:58px}.hero-copy h1{margin-top:10px}#app{padding-right:12px;padding-bottom:54px;padding-left:12px}.step,.preview-pane{border-radius:23px}.step{padding:20px 17px}.step-heading{gap:12px}.setting-heading{display:block}.setting-heading span{display:block;margin-top:2px;text-align:left}.setting-row{align-items:flex-start}.setting-row .setting-heading{display:block}.dropzone{min-height:184px}.track-card{min-height:106px;padding-right:33px}.track-card:after{top:11px;right:10px}.clip-item{gap:9px}.clip-actions{gap:3px}.device-stage{min-height:0;padding:22px 12px}.phone{width:min(64vw,244px)}}@media(max-width:370px){.header-bar{align-items:flex-start}.privacy-note{max-width:120px;line-height:1.25}.track-grid,.theme-row{grid-template-columns:1fr}.setting-row{flex-direction:column}.intensity{grid-template-columns:1fr 44px}.intensity>span{grid-column:1 / -1}}@media(prefers-color-scheme:light){:root{color-scheme:light;--bg: #f5f5f7;--bg-deep: #e9eaf0;--surface: rgba(255, 255, 255, .7);--surface-raised: rgba(255, 255, 255, .92);--surface-solid: #fff;--surface-control: rgba(118, 118, 128, .1);--surface-sheen: linear-gradient(145deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .2));--text: #1d1d1f;--secondary: #6e6e73;--tertiary: #86868b;--blue: #007aff;--blue-hover: #0071e3;--blue-soft: rgba(0, 122, 255, .1);--green: #248a3d;--yellow: #a66a00;--red: #d70015;--separator: rgba(60, 60, 67, .12);--stroke: rgba(60, 60, 67, .14);--stroke-strong: rgba(60, 60, 67, .24);--shadow-card: 0 1px 0 rgba(255, 255, 255, .82) inset, 0 22px 60px rgba(57, 57, 71, .1)}body{background:radial-gradient(900px 620px at 83% -5%,rgba(0,122,255,.12),transparent 62%),radial-gradient(720px 540px at -8% 18%,rgba(175,82,222,.08),transparent 68%),linear-gradient(180deg,var(--bg),var(--bg-deep))}body:before{background:linear-gradient(rgba(60,60,67,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(60,60,67,.022) 1px,transparent 1px)}.privacy-note{background:#ffffff9e}.dropzone:after{border-color:#3c3c4329}.beat-panel,.device-stage{background-color:#7676800f}.seg-btn.active{box-shadow:0 2px 8px #3c3c4324,0 1px #fffc inset}.warn{color:#8a6500}.warn.danger,.error{color:#d70015}}@media(prefers-reduced-transparency:reduce){.step,.preview-pane,.privacy-note,.phone-overlay,.play-big{backdrop-filter:none;-webkit-backdrop-filter:none}.step,.preview-pane,.privacy-note{background:var(--surface-solid)}}@media(prefers-contrast:more){:root{--stroke: rgba(255, 255, 255, .34);--stroke-strong: rgba(255, 255, 255, .54);--separator: rgba(255, 255, 255, .24)}.step,.preview-pane,.track-card,.theme-chip,.dropzone,.btn,.icon-btn{border-width:2px}}@media(prefers-color-scheme:light)and (prefers-contrast:more){:root{--stroke: rgba(0, 0, 0, .38);--stroke-strong: rgba(0, 0, 0, .6);--separator: rgba(0, 0, 0, .25)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.track-card:hover,.theme-chip:hover,.play-big:hover,.brand:hover .brand-mark{transform:none}}@keyframes hero-in{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes materialize{0%{transform:translateY(12px) scale(.992);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}