:root{--bg-base: #f3ece1;--surface: #fffdf8;--accent-signal: #c1683c;--accent-dial: #a87c1f;--caramel: #c99a5b;--text-primary: #3f3128;--text-muted: #94867a;--border-subtle: rgba(63, 49, 40, .14);--shadow-card: 0 2px 10px rgba(63, 49, 40, .07);--font-display: "Lora", "Zen Maru Gothic", serif;--font-body: "Zen Maru Gothic", sans-serif;--font-mono: "Courier Prime", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg-base);color:var(--text-primary);font-family:var(--font-body);font-size:15px;line-height:1.7;min-height:100%}#root{max-width:720px;margin:0 auto;padding:24px 16px 120px}h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.35}a{color:var(--accent-signal)}button{font-family:var(--font-body);cursor:pointer}input,textarea{font-family:var(--font-body)}.card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:14px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow-card)}.muted{color:var(--text-muted);font-size:13px}.mono{font-family:var(--font-mono)}.error-text{color:var(--accent-signal);font-size:13px;margin-top:8px}.btn{display:inline-block;border:1px solid var(--border-subtle);border-radius:12px;background:var(--surface);color:var(--text-primary);padding:10px 20px;font-size:15px;transition:background .15s,transform .1s}.btn:hover{background:#f7efe2}.btn:focus-visible,input:focus-visible,textarea:focus-visible,.genre-tag:focus-visible{outline:2px solid var(--accent-dial);outline-offset:2px}.btn-primary{background:var(--accent-signal);border-color:var(--accent-signal);color:#fffdf8;font-weight:700}.btn-primary:hover{background:#cf7a4e}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-large{width:100%;padding:16px;font-size:17px;border-radius:14px}.btn-ghost{border:none;background:none;color:var(--text-muted);font-size:13px;text-decoration:underline}.name-link{border:none;background:none;padding:0;font:inherit;font-weight:700;color:var(--accent-signal);text-decoration:underline;cursor:pointer}.field{margin-bottom:20px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}.field .hint{font-weight:400;color:var(--text-muted);margin-left:6px}input[type=text],input[type=url],textarea{width:100%;background:#faf5ec;border:1px solid var(--border-subtle);border-radius:10px;color:var(--text-primary);padding:10px 12px;font-size:15px}textarea{resize:vertical;min-height:72px}.app-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:28px}.app-title{font-size:24px;letter-spacing:.02em;font-style:italic}.app-title .dot{color:var(--accent-signal)}.app-title-link{border:none;background:none;color:inherit;font:inherit;padding:0;cursor:pointer}.genre-tags{display:flex;flex-wrap:wrap;gap:8px}.genre-tag{border:1px solid var(--border-subtle);border-radius:999px;background:var(--surface);color:var(--text-muted);padding:6px 14px;font-size:13px;transition:all .15s}.genre-tag.selected{border-color:var(--accent-dial);color:#7a5a14;background:#a87c1f1f;font-weight:700}.genre-chip{display:inline-block;border:1px solid rgba(168,124,31,.45);border-radius:999px;color:#7a5a14;background:#a87c1f14;padding:2px 10px;font-size:12px;margin:0 6px 6px 0}.track-row{display:flex;gap:8px;margin-bottom:8px}.track-row input{flex:1}.remove-btn{border:none;background:none;color:var(--text-muted);font-size:16px;padding:0 6px}.remove-btn:hover{color:var(--accent-signal)}.waveform{position:fixed;left:0;right:0;bottom:0;height:88px;background:linear-gradient(transparent,#f3ece1f5 35%);display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:0 16px 14px;pointer-events:none;z-index:10}.waveform .bar{width:5px;border-radius:3px;background:var(--caramel);height:30%;transform-origin:bottom;animation:pulse 1.6s ease-in-out infinite}.waveform.idle .bar{animation-duration:3.2s;opacity:.4}.waveform.waiting .bar{animation-duration:2.2s;opacity:.65}.waveform.active .bar{animation-duration:1.2s}.waveform .bar.off{animation:none;height:12%!important;opacity:.18;background:var(--text-muted)}.waveform.burst .bar{animation:burst .7s ease-out}@keyframes pulse{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}@keyframes burst{0%{transform:scaleY(1);background:var(--accent-signal)}40%{transform:scaleY(2.4);background:var(--accent-signal)}to{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.waveform .bar{animation:none!important;transform:scaleY(.7)}}.timer-pill{position:fixed;bottom:96px;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid var(--border-subtle);border-radius:999px;padding:6px 18px;font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--accent-dial);z-index:11;box-shadow:0 4px 18px #3f31282e}.timer-pill.urgent{color:var(--accent-signal);border-color:#c1683c73}.waiting-screen{text-align:center;padding-top:10vh}.waiting-screen h2{font-size:24px;margin-bottom:12px}.waiting-screen .status-line{color:var(--text-muted);margin-bottom:32px}.blink{animation:blink 2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.blink{animation:none}}.partner-card h2{font-size:20px;margin-bottom:4px}.section-label{font-size:12px;font-weight:700;color:var(--text-muted);letter-spacing:.08em;margin:14px 0 6px}.fav-track-list{list-style:none}.fav-track-list li{padding:4px 0;border-bottom:1px dashed var(--border-subtle);font-size:14px}.fav-track-list li:last-child{border-bottom:none}.shared-track{background:#faf5ec;border:1px solid var(--border-subtle);border-radius:12px;padding:12px;margin-bottom:12px}.shared-track .track-title{font-weight:700}.shared-track .track-artist{color:var(--text-muted);font-size:13px;margin-bottom:8px}.shared-track iframe{width:100%;border:none;border-radius:8px}.presence{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--text-muted)}.presence.online{background:#7ba05b}.star-display{position:relative;display:inline-block;font-size:22px;line-height:1;color:#3f31282e;letter-spacing:2px}.star-display .fill{position:absolute;top:0;left:0;overflow:hidden;white-space:nowrap;color:var(--accent-dial)}.star-score{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--accent-dial);margin-left:10px;vertical-align:2px}input[type=range].star-slider{width:100%;margin:10px 0;accent-color:var(--accent-dial)}.rate-badge{display:inline-block;margin-left:10px;padding:2px 10px;border:1px solid rgba(168,124,31,.45);border-radius:999px;color:#7a5a14;background:#a87c1f14;font-size:12px;font-weight:700;vertical-align:3px}.rate-delta{margin-left:10px;font-size:13px;font-weight:700}.rate-delta.up{color:#5f8b3f}.rate-delta.down{color:var(--accent-signal)}.ranking-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;border-bottom:1px solid var(--border-subtle);background:none;color:var(--text-primary);font-size:14px;text-align:left}.ranking-row:hover{background:#3f31280a}.ranking-row.is-me{background:#a87c1f14}.ranking-row .rank-no{width:28px;color:var(--text-muted);font-weight:700}.ranking-row .rank-name{flex:1}.ranking-row .rank-rate{color:var(--accent-dial);font-weight:700}.peek-panel{background:#faf5ec;border:1px solid var(--border-subtle);border-radius:12px;padding:14px;margin-top:8px}.result-track{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border-subtle)}.result-track:last-child{border-bottom:none}.result-comment{font-size:13px;color:var(--text-muted);font-style:italic}.ad-poster{position:relative;background:linear-gradient(180deg,#fffef9,#faf4e6);border:1px solid rgba(63,49,40,.1);box-shadow:0 4px 14px #3f312829;padding:34px 18px 18px;text-align:center;margin:30px auto;max-width:320px}.ad-content{position:relative}.ad-mark{font-family:var(--font-display);font-style:italic;font-size:26px;color:#3f312859;letter-spacing:.2em}.ad-note{font-size:11px;color:var(--text-muted);margin-top:4px}.ad-poster.tape:before,.ad-poster.tape:after{content:"";position:absolute;width:72px;height:22px;top:-10px;background:linear-gradient(105deg,#ffffff59,#fffcebbf 55%,#fff6);border:1px solid rgba(255,255,255,.65);box-shadow:0 1px 3px #3f31282e}.ad-poster.tape:before{left:-24px;transform:rotate(-38deg)}.ad-poster.tape:after{right:-24px;transform:rotate(38deg)}.ad-poster.pin:before{content:"";position:absolute;top:-10px;left:50%;width:20px;height:20px;border-radius:50%;transform:translate(-50%);background:radial-gradient(circle at 34% 30%,#e9976b,#b25226 62%,#8e3d18);box-shadow:0 4px 5px #3f312859,inset -2px -3px 5px #00000038}.ad-poster.pin:after{content:"";position:absolute;top:9px;left:50%;width:9px;height:4px;transform:translate(-50%);background:#3f312833;border-radius:50%;filter:blur(1px)}.side-ad{display:none}@media(min-width:1150px){.side-ad{display:block;position:fixed;top:42%;width:175px;z-index:5}.side-ad .ad-poster{margin:0;padding:30px 12px 14px}.side-ad.left{left:calc(50% - 575px)}.side-ad.right{right:calc(50% - 575px)}}@media(max-width:480px){#root{padding:16px 12px 120px}.card{padding:16px}}