:root{color-scheme:light;--paper: #f5f0e4;--panel: #efe8d7;--line: #d8ccb4;--line-strong: #c3b79c;--ink: #2b2926;--muted: #857b6b;--amber: #e5892b;--amber-deep: #b25e12;--peri: #929fdd;--paper-glass: rgba(245, 240, 228, .72);--shadow-1: 0 1px 2px rgba(43, 41, 38, .05), 0 4px 12px -6px rgba(43, 41, 38, .1);--shadow-2: 0 2px 6px rgba(43, 41, 38, .07), 0 14px 30px -12px rgba(43, 41, 38, .16);--shadow-amber: 0 2px 6px rgba(178, 94, 18, .12), 0 16px 34px -12px rgba(178, 94, 18, .26);--ease-out: cubic-bezier(.22, .61, .36, 1);--ease-spring: cubic-bezier(.34, 1.3, .5, 1);--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}main{max-width:720px;margin:0 auto;padding:24px 18px 120px}.site-head{position:sticky;top:0;z-index:20;background:var(--paper-glass);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line);box-shadow:0 6px 20px -18px #2b292680}.site-head-inner{display:flex;align-items:center;justify-content:space-between;max-width:720px;margin:0 auto;padding:13px 18px}.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:600;font-size:19px;letter-spacing:.16em;color:var(--ink);text-decoration:none;transition:transform .18s var(--ease-out)}.brand:active{transform:scale(.96)}.brand:after{content:"";width:7px;height:7px;background:var(--amber);transition:transform .4s var(--ease-spring)}.brand:hover:after{transform:scale(1.25)}.auth{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}.auth a{color:var(--amber-deep);text-decoration:none;transition:opacity .15s var(--ease-out)}.auth a:hover{text-decoration:underline}.auth a:active{opacity:.6}.who{color:var(--muted)}.link-btn{background:none;border:0;color:var(--amber-deep);cursor:pointer;font:inherit;letter-spacing:inherit;padding:0;transition:opacity .15s var(--ease-out)}.link-btn:hover{text-decoration:underline}.link-btn:active{opacity:.6}.card{position:relative;background:var(--panel);border:1px solid var(--line);padding:18px 18px 16px 20px;margin:14px 0;box-shadow:var(--shadow-1);transition:box-shadow .35s var(--ease-out),border-color .35s var(--ease-out)}.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-strong);transition:background .35s var(--ease-out)}.card:hover{box-shadow:var(--shadow-2)}.card.focused{border-color:var(--peri);box-shadow:var(--shadow-2)}.card.focused:before{background:var(--peri)}.card.playing{border-color:var(--amber);box-shadow:var(--shadow-amber)}.card.playing:before{background:var(--amber)}.card-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}.play{flex:none;width:52px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--ink);border:1px solid var(--line-strong);cursor:pointer;transition:background .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out),transform .16s var(--ease-out)}.play:hover{border-color:var(--amber)}.play:active{transform:scale(.93)}.card.playing .play{background:var(--amber);color:var(--paper);border-color:var(--amber)}.play .icon{display:block}.play .icon.play{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent currentColor}.play .icon.stop{width:14px;height:14px;background:currentColor}.meta{min-width:0;flex:1}.meta .title{display:block;color:var(--ink);font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.25;letter-spacing:-.01em;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s var(--ease-out)}.meta .title:hover{color:var(--amber-deep)}.readout{margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}.readout .sep{opacity:.55;margin:0 7px}.plays{color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.06em}.wave{width:100%;background:linear-gradient(var(--line),var(--line)) center / 100% 1px no-repeat}.desc{color:var(--muted);font-family:var(--sans);font-size:14px;line-height:1.6;letter-spacing:0;margin:12px 0 0}.status,.error{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--muted)}.error{color:var(--amber-deep)}.error:before{content:"! ";font-weight:700}.admin>h2{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line);margin:32px 0 14px}.admin-form{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);padding:18px;margin-bottom:8px;box-shadow:var(--shadow-1)}.admin-form input[type=text],.admin-form input:not([type]),.admin-form textarea{background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);padding:11px;font:inherit;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}.admin-form input:focus,.admin-form textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px #e5892b29}.admin-form input[type=file]{color:var(--muted);font-size:13px}.admin-form input:disabled,.admin-form textarea:disabled{opacity:.55;cursor:not-allowed}.admin-form .play:disabled{opacity:.45;cursor:not-allowed}.file-hint{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted);margin-top:-4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-form .play{width:auto;height:auto;padding:11px 22px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink)}.admin-form .check{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}.admin-form .check input{accent-color:var(--peri)}.admin-row{display:flex;flex-direction:column;gap:10px;padding:16px 4px;border-bottom:1px solid var(--line)}.admin-row-head{display:flex;align-items:center;gap:16px}.admin-row-head .edit-title{flex:1;min-width:0;font-weight:600}.admin-row .edit-title,.admin-row .edit-desc{background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);padding:9px 11px;font:inherit;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}.admin-row .edit-desc{width:100%;min-height:64px;resize:vertical}.admin-row .edit-title:focus,.admin-row .edit-desc:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px #e5892b29}.admin-row .plays{text-transform:uppercase}.palette-lead{color:var(--muted);font-family:var(--sans);font-size:14px;line-height:1.6;margin:0 0 24px}.palette-group>h2{display:flex;align-items:baseline;gap:12px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line);margin:32px 0 14px}.palette-group-note{font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:none;opacity:.8}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.swatch{display:flex;flex-direction:column;justify-content:space-between;min-height:118px;padding:12px 13px;border:1px solid var(--line-strong);cursor:pointer;text-align:left;color:var(--ink);font:inherit;box-shadow:var(--shadow-1);transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-out)}.swatch.on-dark{color:var(--paper)}.swatch:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}.swatch:active{transform:translateY(-1px) scale(.98)}.swatch-hex{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.9}.swatch-meta{display:flex;flex-direction:column;gap:2px}.swatch-label{font-family:var(--sans);font-weight:600;font-size:14px}.swatch-var{font-family:var(--mono);font-size:11px;letter-spacing:.04em;opacity:.85}.swatch-note{font-family:var(--sans);font-size:11px;line-height:1.4;opacity:.8}.admin-row-actions{display:flex;align-items:center;gap:12px}.admin-row-actions .play{width:auto;height:auto;padding:8px 20px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ink)}.admin-row-actions .play:disabled{opacity:.5}.upload-status{--accent: var(--peri);position:relative;display:flex;align-items:flex-start;gap:14px;background:var(--panel);border:1px solid var(--line);padding:15px 16px 15px 19px;margin:12px 0 4px;box-shadow:var(--shadow-1);animation:us-in .4s var(--ease-spring) both}.upload-status:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}.us-uploading,.us-processing{--accent: var(--peri)}.us-success{--accent: var(--amber);box-shadow:var(--shadow-amber)}.us-neutral{--accent: var(--muted)}.us-error{--accent: var(--amber-deep)}.us-icon{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}.us-check,.us-bang{color:var(--paper);background:var(--accent)}.us-check{animation:us-pop .45s var(--ease-spring) both}.us-bang{font-family:var(--mono);font-weight:700;font-size:18px;line-height:1}.us-info{border:1px solid var(--line-strong)}.us-info .us-dot{width:8px;height:8px;background:var(--muted)}.us-spin .us-ring{width:18px;height:18px;border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:us-rotate .8s linear infinite}.us-body{flex:1;min-width:0}.us-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.us-title{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:-.005em;color:var(--ink)}.us-pct{flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--accent)}.us-detail{margin:3px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted)}.us-bar{position:relative;overflow:hidden;height:4px;margin-top:10px;background:var(--line)}.us-bar-fill{display:block;height:100%;background:var(--accent);transition:width .25s var(--ease-out)}.us-bar-indeterminate .us-bar-fill{width:38%;animation:us-slide 1.3s var(--ease-out) infinite}.us-dismiss{flex:none;font-size:18px;line-height:1;color:var(--muted);margin:-2px -2px 0 0}.us-dismiss:hover{color:var(--ink);text-decoration:none}@keyframes us-in{0%{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}@keyframes us-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes us-rotate{to{transform:rotate(360deg)}}@keyframes us-slide{0%{transform:translate(-110%)}to{transform:translate(370%)}}.status-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);white-space:nowrap}.status-badge .dot{width:8px;height:8px;flex:none;background:var(--line-strong)}.status-badge.is-processing .dot{background:var(--peri);animation:us-pulse 1.4s var(--ease-out) infinite}.status-badge.is-ready .dot{background:var(--amber)}.status-badge.is-failed{color:var(--amber-deep)}.status-badge.is-failed .dot{background:var(--amber-deep)}@keyframes us-pulse{0%,to{opacity:1}50%{opacity:.35}}:focus-visible{outline:2px solid var(--amber);outline-offset:2px}@media(max-width:520px){.meta .title{font-size:15px}.card{padding:16px 14px 14px 16px}.site-head-inner{flex-wrap:wrap;gap:6px 12px;padding:12px 14px}.brand{font-size:17px;letter-spacing:.12em}.auth{flex:1 1 100%;gap:12px;flex-wrap:wrap;justify-content:flex-start;font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.swatch:hover,.card:hover{transform:none}}@media(prefers-reduced-transparency:reduce){.site-head{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}}@media(prefers-contrast:more){.site-head{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:var(--ink)}.card,.admin-form{border-color:var(--line-strong)}}