@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; font-family: 'DM Sans', system-ui, sans-serif; background:#0b1020; color:#f4f7ff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(ellipse at 75% 0%, #1d2154 0, transparent 33rem), #0b1020; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { width:min(100% - 24px, 960px); margin:auto; padding:18px 0 calc(52px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:10px; align-items:center; color:#f4f7ff; font-size:1.05rem; text-decoration:none; letter-spacing:-.03em; }
.brand b { color:#a7ff63; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:28px; height:28px; border:1px solid #6d77a3; border-radius:50%; color:#a7ff63; font-size:1.4rem; line-height:1; }
.install-button,.secondary-button { background:transparent; color:#e8ebfa; border:1px solid #4c547a; border-radius:999px; padding:.66rem 1rem; font-weight:500; }
.install-button:hover,.secondary-button:hover { border-color:#a7ff63; color:#a7ff63; }
.intro { padding:58px 4px 42px; max-width:620px; }
.eyebrow { color:#a7ff63; font:500 .7rem/1 'DM Mono',monospace; letter-spacing:.13em; margin:0 0 12px; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(3.25rem,14vw,6.4rem); letter-spacing:-.075em; line-height:.82; margin:0 0 22px; } h1 em { color:#a7ff63; font-family:'Instrument Serif', Georgia,serif; font-weight:400; letter-spacing:-.055em; }
.lede { max-width:480px; color:#b9c0dd; font-size:1.06rem; line-height:1.55; }
.workspace { background:#151b33; border:1px solid #30395e; border-radius:16px; padding:20px 16px; box-shadow:0 24px 80px #04061260; }
.workspace-heading { display:flex; gap:16px; justify-content:space-between; align-items:start; margin-bottom:26px; } h2 { font-size:1.65rem; letter-spacing:-.045em; margin-bottom:0; }.quality-badge { font:500 .66rem 'DM Mono',monospace; color:#cfff9c; border:1px solid #517535; background:#152414; padding:8px 10px; border-radius:999px; white-space:nowrap; }
.source-grid { display:grid; grid-template-columns:1fr; gap:12px; }.drop-zone { min-height:168px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; border:1px dashed #68739e; border-radius:12px; color:#c7cde5; transition:.2s; text-align:center; padding:18px; }.drop-zone:hover,.drop-zone.dragging { background:#20284a; border-color:#a7ff63; }.drop-zone input { position:absolute; opacity:0; pointer-events:none; }.drop-zone strong { color:#f4f7ff; }.drop-zone span:not(.drop-icon) { font-size:.84rem; }.drop-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#293052; color:#a7ff63; font-size:1.4rem; }.direct-card { display:flex; gap:12px; padding:16px; background:#1c2340; border-radius:12px; color:#aeb6d5; font-size:.82rem; line-height:1.48; }.direct-card strong{color:#f0f3ff;font-size:.9rem}.direct-card p{margin:.35rem 0 0}.note-icon { color:#a7ff63; font-size:1rem; padding-top:1px; }.direct-url-row{display:flex;gap:7px;margin-top:13px}.direct-url-row input{min-width:0;flex:1;border:1px solid #4c5680;background:#111832;color:#f2f5ff;border-radius:8px;padding:.63rem .7rem;font-size:.82rem;outline:0}.direct-url-row input:focus{border-color:#a7ff63}.direct-url-row button{flex:none;border:0;border-radius:8px;background:#e9edf8;color:#172038;font-weight:700;padding:.55rem .75rem}.direct-help{min-height:1.2em;color:#b7ff7a;margin-top:9px!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.editor { padding-top:34px; }.track-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }.track-name { display:flex; gap:10px; align-items:center; }.track-name strong,.track-name small { display:block; }.track-name small { color:#9da7c9; font:.72rem 'DM Mono',monospace; margin-top:3px; }.track-dot { width:9px;height:9px;border-radius:50%;background:#a7ff63; box-shadow:0 0 0 4px #a7ff6321; }.track-meta output { color:#a7ff63; font:500 .82rem 'DM Mono',monospace; }
.wave-shell { position:relative; height:148px; border-radius:12px; overflow:hidden; background:#0e1430; border:1px solid #343e67; touch-action:none; user-select:none; }.wave-shell canvas { display:block; width:100%; height:100%; }.selection { position:absolute; inset:0; left:0; right:0; background:linear-gradient(90deg,#a7ff6310,#a7ff631f); border-inline:2px solid #a7ff63; pointer-events:none; }.handle { pointer-events:auto; position:absolute; top:50%; width:44px;height:48px; transform:translate(-50%,-50%); background:#a7ff63; border-radius:11px; box-shadow:0 2px 8px #0006; cursor:ew-resize; }.handle::before { content:'⋮'; position:absolute; top:10px; left:17px; color:#182113; font-weight:700; }.start-handle{left:0}.end-handle{left:100%}.wave-times { pointer-events:none; position:absolute; inset:auto 12px 9px; display:flex; justify-content:space-between; color:#aab4d5; font:.68rem 'DM Mono',monospace; }
.time-controls { display:flex; align-items:center; justify-content:center; gap:7px; padding:22px 0 19px; }.time-controls label { color:#aeb6d5; font-size:.76rem; }.time-controls input { margin-left:4px; width:62px; min-height:34px; background:transparent; border:0; border-bottom:1px solid #56618c; color:#f4f7ff; padding:3px 0; outline:0; }.time-controls input:focus { border-color:#a7ff63; }.range-arrow { color:#a7ff63; }.actions { display:flex; flex-direction:column; gap:10px; align-items:stretch; justify-content:center; }.actions button { width:100%; min-height:48px; }.primary-button { border:0; background:#a7ff63; color:#152010; border-radius:999px; padding:.76rem 1.3rem; font-weight:700; }.primary-button:hover { background:#c1ff91; }.primary-button:disabled { opacity:.55; cursor:wait; }.hint { text-align:center; color:#8f99bd; font-size:.78rem; margin:16px 0 0; }
.ios-guide { margin-top:24px; border:1px solid #343e67; background:linear-gradient(145deg,#1e294b,#141b35); border-radius:20px; padding:clamp(22px,4vw,38px); }.ios-guide>p:not(.eyebrow) { color:#bdc5e0; line-height:1.5; }.ios-guide ol { padding:0; margin:26px 0 20px; list-style:none; display:grid; gap:18px; }.ios-guide li { display:flex; gap:14px; align-items:flex-start; }.ios-guide li span { flex:0 0 auto; display:grid; place-items:center; width:26px;height:26px;border-radius:50%;background:#a7ff63;color:#172113;font:500 .75rem 'DM Mono',monospace; }.ios-guide li p { margin:2px 0 0; color:#d6dcf0; line-height:1.48; }.guide-foot { border-top:1px solid #3b466f; padding-top:18px; margin-bottom:0; font-size:.84rem; }.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,16px); background:#f4f7ff; color:#10152c; border-radius:999px; font-weight:500; padding:.72rem 1.05rem; opacity:0; transition:.22s; pointer-events:none; box-shadow:0 12px 28px #0006; }.toast.visible { opacity:1; transform:translate(-50%,0); }
@media (min-width:641px) { .shell{width:min(100% - 32px,960px);padding:28px 0 72px}.intro{padding:78px 0 56px}.workspace{border-radius:20px;padding:clamp(20px,4vw,38px)}.source-grid{grid-template-columns:1.18fr .82fr;gap:14px}.drop-zone{min-height:180px}.wave-shell{height:178px}.handle{width:30px;height:40px;border-radius:8px}.handle::before{top:8px;left:11px}.time-controls{gap:16px}.time-controls label{font-size:.81rem}.time-controls input{margin-left:6px;width:70px;min-height:auto}.actions{flex-direction:row;align-items:center}.actions button{width:auto;min-height:auto}.ios-guide{border-radius:20px;padding:clamp(22px,4vw,38px)} }
.social-card{display:flex;gap:12px;padding:16px;background:linear-gradient(110deg,#1c2340,#18203a);border:1px solid #334066;border-radius:12px;color:#aeb6d5;font-size:.82rem;line-height:1.48}.social-card strong{color:#f0f3ff;font-size:.9rem}.social-card p{margin:.35rem 0 0}@media (min-width:641px){.social-card{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}