:root{--gray-25: #fcfcfd;--gray-50: #f9fafb;--gray-100: #f2f4f7;--gray-200: #eaecf0;--gray-300: #d0d5dd;--gray-400: #98a2b3;--gray-500: #667085;--gray-600: #475467;--gray-700: #344054;--gray-900: #101828;--brand-50: #f9f5ff;--brand-100: #f4ebff;--brand-200: #e9d7fe;--brand-500: #9e77ed;--brand-600: #7f56d9;--brand-700: #6941c6;--paper: #ffffff;--card: #ffffff;--ink: var(--gray-900);--ink-soft: var(--gray-600);--ink-faint: var(--gray-400);--line: var(--gray-300);--line-2: var(--gray-200);--soft: var(--gray-100);--brand: var(--brand-600);--shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);--shadow-sm: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);--shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .18);--ring: 0 0 0 4px var(--brand-100);--r-btn: 10px;--r-card: 14px;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;font-family:var(--font-ui);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}button{font-family:inherit;cursor:pointer}input{font-family:inherit}@media(min-width:480px){body{background:var(--gray-100)}}.shell{position:relative;width:100%;max-width:440px;height:100dvh;margin:0 auto;background:var(--paper);display:flex;flex-direction:column;overflow:hidden}@media(min-width:480px){.shell{height:min(920px,96dvh);margin:2dvh auto;border-radius:40px;box-shadow:var(--shadow-lg),0 0 0 1px var(--gray-200)}}.grain{display:none}.app-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-top:max(16px,env(safe-area-inset-top));scrollbar-width:none;display:flex;flex-direction:column}.app-scroll::-webkit-scrollbar{display:none}.screen{flex:1;display:flex;flex-direction:column;padding:4px 20px 0;animation:rise .3s cubic-bezier(.2,.7,.2,1)}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.big-title{font-size:clamp(22px,6vw,28px);font-weight:600;letter-spacing:-.03em;margin:2px 0 14px;color:var(--gray-900)}.big-title.center{text-align:center}.link-back{border:0;background:none;color:var(--gray-600);font-size:14px;font-weight:600;padding:4px 0}.link-back:hover{color:var(--gray-900)}.btn{border:1px solid transparent;background:none;font-weight:600;font-size:15px;padding:11px 18px;border-radius:var(--r-btn);color:var(--ink);transition:transform .08s,background .15s,box-shadow .15s,border-color .15s}.btn:active{transform:scale(.985)}.btn:focus-visible{outline:none;box-shadow:var(--ring)}.btn.block{width:100%;padding:14px;font-size:16px}.btn.primary{background:var(--gray-900);color:#fff;box-shadow:var(--shadow-xs)}.btn.primary:hover{background:var(--gray-700)}.btn.primary:disabled{background:var(--gray-200);color:var(--gray-400);box-shadow:none}.btn.ghost{background:var(--card);border-color:var(--gray-300);color:var(--gray-700);box-shadow:var(--shadow-xs);flex:1}.btn.ghost:hover{background:var(--gray-50)}.btn.soft{background:var(--brand-50);color:var(--brand-700)}.btn.soft:hover{background:var(--brand-100)}.btn.link{background:none;color:var(--gray-600);width:100%;font-weight:600}.btn.link:hover{color:var(--gray-900)}.btn.add-btn{background:var(--gray-900);color:#fff;width:44px;padding:0;font-size:20px;flex:none;border-radius:var(--r-btn);box-shadow:var(--shadow-xs)}.btn.add-btn:disabled{background:var(--gray-200);color:var(--gray-400);box-shadow:none}.cta-bar{position:sticky;bottom:0;margin-top:auto;padding:14px 0 max(16px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--paper) 68%,transparent)}.mix-meta{text-align:center;padding:6px 0}.mix-title{border:0;background:none;text-align:center;width:100%;font-size:26px;font-weight:700;letter-spacing:-.01em;color:var(--ink);padding:4px}.mix-title::placeholder{color:var(--gray-400)}.mix-title:focus{outline:none}.mix-for{display:flex;align-items:center;justify-content:center;gap:5px;font-size:15px;color:var(--gray-500)}.mix-for input{border:0;background:none;font-size:15px;color:var(--ink);text-align:center;width:160px;border-bottom:1px dashed var(--gray-300);padding:0 2px 3px}.mix-for input:focus{outline:none;border-bottom-color:var(--brand)}.disc-stage{position:relative;display:grid;place-items:center;padding:12px 0 16px}.disc-stage:before{content:"";position:absolute;bottom:14px;left:50%;transform:translate(-50%);width:56%;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(16,24,40,.14),transparent);filter:blur(6px)}.disc-stage canvas{position:relative;z-index:2}.dock{background:var(--card);border:1px solid var(--gray-200);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-xs)}.dock-row{display:flex;align-items:center;gap:10px}.dock-row.wrap{flex-wrap:wrap;row-gap:12px}.dock-row.between{justify-content:space-between}.dock-undo{display:flex;gap:6px}.dock-undo button{border:1px solid var(--gray-300);background:var(--card);border-radius:8px;width:34px;height:32px;font-size:14px;color:var(--gray-600);box-shadow:var(--shadow-xs)}.dock-undo button:hover:not(:disabled){background:var(--gray-50)}.dock-undo button:disabled{opacity:.4;box-shadow:none}.seg{display:flex;gap:3px;background:var(--gray-100);padding:3px;border-radius:10px}.seg-btn{border:0;background:none;padding:7px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--gray-500);white-space:nowrap;transition:background .12s,color .12s}.seg-btn.on{background:var(--card);color:var(--gray-900);box-shadow:var(--shadow-sm)}.seg.tiny .seg-btn{padding:7px 11px;min-width:30px}.font-row{display:flex;gap:7px}.font-btn{flex:1;border:1px solid var(--gray-300);background:var(--card);border-radius:9px;padding:8px 0;font-size:17px;color:var(--gray-500);line-height:1;box-shadow:var(--shadow-xs);transition:border-color .12s,color .12s,box-shadow .12s}.font-btn.on{border-color:var(--brand);color:var(--gray-900);box-shadow:var(--ring)}.swatches{display:flex;gap:8px;flex:1 1 auto;justify-content:space-between}.swatch{width:26px;height:26px;border-radius:999px;background:var(--sw);border:2px solid var(--card);box-shadow:0 0 0 1px var(--gray-300);transition:transform .1s,box-shadow .1s;flex:none}.swatch:active{transform:scale(.9)}.swatch.on{box-shadow:0 0 0 2px var(--brand);transform:scale(1.12)}.doodle-block{display:flex;flex-direction:column;gap:10px}.doodle-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;border:1px solid var(--gray-300);background:var(--card);border-radius:var(--r-btn);padding:11px 14px;font-size:14px;font-weight:600;color:var(--gray-700);box-shadow:var(--shadow-xs)}.doodle-toggle:hover{background:var(--gray-50)}.doodle-toggle.open{border-color:var(--brand);box-shadow:var(--ring)}.doodle-toggle .chev{color:var(--gray-400);font-size:11px}.doodle-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;animation:rise .2s ease}.doodle-btn{aspect-ratio:1;border:1px solid var(--gray-200);background:var(--gray-50);border-radius:12px;padding:12px;display:grid;place-items:center;color:var(--ink);transition:transform .08s,box-shadow .12s,border-color .12s,background .12s}.doodle-btn:hover{background:var(--card)}.doodle-btn:active{transform:scale(.94)}.doodle-btn.on{border-color:currentColor;background:var(--card);box-shadow:inset 0 0 0 1.5px currentColor}.doodle-svg{width:100%;height:100%;display:block}.dock-hint{font-size:12.5px;color:var(--brand-700);margin:2px 0 0;font-weight:500}.songs-top{display:flex;align-items:center;justify-content:space-between}.songs-count{font-size:13px;color:var(--gray-500);font-variant-numeric:tabular-nums;font-weight:500}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}.chip{display:inline-flex;align-items:center;gap:5px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:999px;padding:5px 8px 5px 12px;font-size:13px;font-weight:500;color:var(--gray-700);max-width:100%;white-space:nowrap;overflow:hidden}.chip-x{color:var(--gray-400);font-size:16px;font-weight:400}.add-song{display:flex;gap:8px;margin-bottom:20px}.add-song input{flex:1;border:1px solid var(--gray-300);background:var(--card);border-radius:var(--r-btn);padding:11px 14px;font-size:14px;color:var(--ink);min-width:0;box-shadow:var(--shadow-xs)}.add-song input::placeholder{color:var(--gray-400)}.add-song input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}.section-label{font-size:14px;font-weight:600;margin:0 0 10px;color:var(--gray-900);letter-spacing:-.01em}.section-label span{color:var(--gray-400);font-weight:500;font-size:12.5px}.rec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}.rec-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--gray-200);border-radius:12px;padding:10px 12px;cursor:pointer;box-shadow:var(--shadow-xs);transition:background .14s,border-color .14s,transform .06s}.rec-row:hover{background:var(--gray-50)}.rec-row:active{transform:scale(.99)}.rec-row.on{background:var(--brand-50);border-color:var(--brand-200)}.rec-info{flex:1;display:flex;flex-direction:column;min-width:0}.rec-t{font-size:14px;font-weight:600;color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rec-a{font-size:12px;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rec-add{flex:none;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;font-size:15px;font-weight:600;border:1.5px solid var(--gray-300);color:var(--gray-500);background:var(--card)}.rec-add.on{background:var(--brand);border-color:var(--brand);color:#fff;font-size:13px}.share{align-items:center;position:relative}.share-burst{position:absolute;top:6px;left:50%;transform:translate(-50%);width:300px;height:190px;pointer-events:none;background:radial-gradient(closest-side,rgba(127,86,217,.14),transparent 70%)}.share-kicker{font-size:13px;color:var(--brand-700);margin:8px 0 0;font-weight:600}.share .big-title{margin:3px 0 8px}.share-disc{margin:6px 0 18px}.mini-list{width:100%;background:var(--card);border:1px solid var(--gray-200);border-radius:var(--r-card);padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-xs)}.mini-row{display:flex;align-items:baseline;gap:10px;font-size:13.5px}.mini-n{color:var(--gray-400);font-size:11px;width:14px;flex:none;font-variant-numeric:tabular-nums}.mini-t{flex:1;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-t em{color:var(--gray-500);font-style:normal}.mini-more{font-size:12px;color:var(--gray-400);padding-top:2px;font-weight:500}.share-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-bottom:8px}.share-row{display:flex;gap:10px}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%);background:var(--gray-900);color:#fff;font-size:13px;font-weight:500;padding:10px 16px;border-radius:999px;z-index:30;white-space:nowrap;box-shadow:var(--shadow-lg);animation:rise .2s ease}