:root,[data-theme=dark]{--bg:#110d24;--surface:#1a1533;--surface-raised:#251e42;--line:#3a3160;--line-strong:#7a70a3;--ink:#f4f1ff;--ink-muted:#b3abd3;--primary:#a98bff;--primary-hover:#c0a9ff;--on-primary:#140b33;--brand-blue:#3b6cff;--brand-violet:#8b5cf6;--brand-pink:#ec4899;--brand-orange:#ff7a2f;--coin:#ffc24d;--success:#5fd39a;--warning:#f2b35b;--danger:#ff8a9e;--focus:#fff;--scrim:rgba(5,3,14,.72);--elevation-1:0 1px 2px rgba(0,0,0,.4);--elevation-2:0 8px 24px rgba(0,0,0,.5)}[data-theme=light]{--bg:#f7f6fb;--surface:#fff;--surface-raised:#f0eef7;--line:#d9d4e6;--line-strong:#7d7596;--ink:#16112b;--ink-muted:#5a5374;--primary:#6236e0;--primary-hover:#4f25c4;--on-primary:#fff;--coin:#9a5b00;--success:#0f7b4b;--warning:#985200;--danger:#c2263d;--focus:#16112b;--scrim:rgba(22,17,43,.48);--elevation-1:0 1px 2px rgba(22,17,43,.08);--elevation-2:0 8px 24px rgba(22,17,43,.14)}:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-pill:999px;--bp-compact:0px;--bp-medium:600px;--bp-expanded:840px;--bp-max:1200px;--tap-min:48px;--control-h:52px;--player-h:72px;--font-display:"Prompt","IBM Plex Sans Thai",system-ui,sans-serif;--font-body:"IBM Plex Sans Thai","Sarabun",system-ui,sans-serif}.vv{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased}.vv *,.vv :before,.vv :after{box-sizing:border-box}.vv :focus-visible{outline:2px solid var(--focus);outline-offset:2px}.vv-btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:0 var(--space-5);border-radius:var(--radius-md);font:600 15px/20px var(--font-body);cursor:pointer;border:0;text-decoration:none;transition:background .15s;display:inline-flex}.vv-btn--primary{background:var(--primary);color:var(--on-primary)}.vv-btn--primary:hover{background:var(--primary-hover)}.vv-btn--secondary{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong);background:0 0}.vv-btn--secondary:hover{background:var(--surface-raised)}.vv-btn--ghost{color:var(--primary);padding:0 var(--space-3);background:0 0}.vv-btn--sm{min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-sm)}.vv-btn--block{width:100%}.vv-btn[disabled]{opacity:.45;cursor:not-allowed}.vv-btn .vv-price{font-variant-numeric:tabular-nums;opacity:.9}.vv-chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.vv-chip{align-items:center;gap:var(--space-1);min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);font:600 14px/20px var(--font-body);cursor:pointer;border:0;display:inline-flex}.vv-chip[aria-pressed=true]{background:var(--primary);color:var(--on-primary);box-shadow:none}.vv-field{gap:var(--space-1);display:grid}.vv-field label{font:600 15px/20px var(--font-body)}.vv-field textarea,.vv-field input{width:100%;min-height:var(--control-h);padding:var(--space-3)var(--space-4);border-radius:var(--radius-sm);border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);font:400 17px/28px var(--font-body);resize:vertical}.vv-field small{font:500 13px/18px var(--font-body);color:var(--ink-muted)}.vv-song{gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--elevation-1);grid-template-columns:64px 1fr auto;align-items:center;display:grid}.vv-cover{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--surface-raised);object-fit:cover;width:64px;display:block}.vv-disc{background:var(--surface-raised);position:relative;overflow:hidden}.vv-disc:before{content:"";background:conic-gradient(from 20deg,rgba(255,255,255,.16),rgba(255,255,255,0) 14%,rgba(255,255,255,0) 48%,rgba(255,255,255,.1) 58%,rgba(255,255,255,0) 72%),repeating-radial-gradient(circle,#0b0816 0,#0b0816 1.2px,#1c1633 1.2px,#1c1633 2.6px);border-radius:50%;position:absolute;top:9%;bottom:9%;left:9%;right:9%;box-shadow:0 4px 12px rgba(0,0,0,.35)}.vv-disc:after{content:"";background:radial-gradient(circle at center,var(--surface-raised)0 12%,transparent 13%),linear-gradient(135deg,var(--brand-blue),var(--brand-violet)35%,var(--brand-pink)70%,var(--brand-orange));border-radius:50%;position:absolute;top:36%;bottom:36%;left:36%;right:36%}.vv-disc--spin:before,.vv-disc--spin:after{animation:6s linear infinite vv-spin}@keyframes vv-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.vv-disc--spin:before,.vv-disc--spin:after{animation:none}}.vv-song h4{font:600 15px/22px var(--font-body);text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.vv-song p{font:500 13px/18px var(--font-body);color:var(--ink-muted);margin:0}.vv-iconbtn{width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-pill);background:var(--primary);color:var(--on-primary);cursor:pointer;border:0;place-items:center;display:grid}.vv-iconbtn--quiet{color:var(--ink);background:0 0}.vv-player{gap:var(--space-3);min-height:var(--player-h);padding:var(--space-2)var(--space-3);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--elevation-2);grid-template-columns:48px 1fr auto;align-items:center;display:grid;position:relative;overflow:hidden}.vv-player .vv-cover{width:48px}.vv-player h4{font:600 15px/20px var(--font-body);margin:0}.vv-player p{font:500 13px/18px var(--font-body);color:var(--ink-muted);margin:0}.vv-progress{background:var(--line);height:3px;position:absolute;bottom:0;left:0;right:0}.vv-progress>i{background:var(--primary);height:100%;display:block}.vv-packs{gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.vv-pack{gap:var(--space-1);padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);text-align:left;cursor:pointer;color:var(--ink);border:0;display:grid}.vv-pack[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--primary)}.vv-pack b{font:600 15px/20px var(--font-body)}.vv-pack .vv-amount{font:600 20px/24px var(--font-body);font-variant-numeric:tabular-nums}.vv-pack small{font:500 13px/18px var(--font-body);color:var(--ink-muted)}.vv-badge{width:-moz-fit-content;width:fit-content;padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--coin);font:600 12px/16px var(--font-body);display:inline-block}.vv-notes{gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface);display:grid}.vv-notes-head{justify-content:space-between;align-items:baseline;gap:var(--space-2);display:flex}.vv-notes-count{font:600 20px/24px var(--font-body);color:var(--coin);font-variant-numeric:tabular-nums}.vv-meter{border-radius:var(--radius-pill);background:var(--surface-raised);height:10px;overflow:hidden}.vv-meter>i{background:var(--coin);border-radius:inherit;height:100%;display:block}.vv-nav{background:var(--surface);border-top:1px solid var(--line);justify-content:space-around;display:flex}.vv-nav a{min-height:64px;padding:var(--space-2)0;color:var(--ink-muted);font:600 12px/16px var(--font-body);flex:1;justify-items:center;gap:2px;text-decoration:none;display:grid}.vv-nav a[aria-current=page]{color:var(--primary)}.vv-nav svg{width:24px;height:24px}@media (min-width:840px){.vv-nav--adaptive{border-top:0;border-right:1px solid var(--line);width:88px;padding-top:var(--space-4);justify-content:flex-start;gap:var(--space-2);flex-direction:column}.vv-nav--adaptive a{flex:0}}html,body{background:var(--bg);color:var(--ink);margin:0}body{font-family:var(--font-body)}a{color:var(--primary)}.vv-screen{flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;display:flex}.vv-chip[aria-checked=true]{background:var(--primary);color:var(--on-primary);box-shadow:none}.vv-screen{box-sizing:border-box;width:100%}.vv-occasions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.vv-cards{grid-template-columns:repeat(auto-fill,minmax(var(--card-min,104px),1fr));gap:8px;display:grid}.vv-cards--market{--card-min:150px;gap:12px}.vv-genre-card{height:76px}.vv-cards--genre{grid-template-columns:repeat(3,minmax(0,1fr))}.vv-split{flex-direction:column;gap:16px;display:flex}.vv-split>*{flex-direction:column;gap:14px;min-width:0;display:flex}.vv-hero h1{font-size:28px;line-height:36px}@media (min-width:600px){.vv-screen{max-width:720px}.vv-occasions{grid-template-columns:repeat(6,minmax(0,1fr))}.vv-cards{--card-min:140px}.vv-genre-card{height:96px}.vv-cards--genre{grid-template-columns:repeat(4,minmax(0,1fr))}.vv-hero{flex-direction:column;justify-content:flex-end;min-height:360px;display:flex}.vv-hero h1{font-size:40px;line-height:50px}}@media (min-width:840px){.vv-screen{max-width:1120px;padding-left:32px!important;padding-right:32px!important}.vv-cards--market{--card-min:200px}.vv-genre-card{height:120px}.vv-cards--genre{grid-template-columns:repeat(6,minmax(0,1fr))}.vv-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:40px;display:grid}.vv-hero{border-radius:0 0 32px 32px;min-height:440px}.vv-hero-content{max-width:560px}.vv-hero h1{font-size:52px;line-height:64px}.vv-screen>.vv-btn--block{align-self:flex-end;max-width:420px}.vv-split .vv-btn--block{max-width:none}}@keyframes vv-shimmer{0%{opacity:.55}50%{opacity:1}to{opacity:.55}}.vv-skel{background:var(--surface-raised);border-radius:14px;animation:1.4s ease-in-out infinite vv-shimmer}@media (prefers-reduced-motion:reduce){.vv-skel{animation:none}}.vv-sample{opacity:.72;position:relative}.vv-sample-tag{z-index:1;color:#f4f1ff;font:600 11px/16px var(--font-body);background:rgba(17,13,36,.8);border-radius:999px;padding:2px 8px;position:absolute;top:8px;left:8px}.vv-note{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:500 14px/20px var(--font-body);color:var(--ink-muted);border-radius:14px;padding:12px 14px}.vv-btn--cta{color:#fff;background:linear-gradient(135deg,#3b6cff,#8b5cf6 45%,#ec4899);box-shadow:0 8px 24px rgba(139,92,246,.35)}.vv-btn--cta:hover{filter:brightness(1.08)}.vv-btn--cta:disabled{background:var(--surface-raised);color:var(--ink-muted);box-shadow:none}@media (min-width:840px){.vv-screen>.vv-btn--cta{align-self:center}}