:root{--hue:250;--grain-ink:var(--lightningcss-light,oklch(.25 .06 var(--hue) / .1))var(--lightningcss-dark,oklch(.95 .03 var(--hue) / .06));--grain-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--header-opacity:92%;--page:var(--lightningcss-light,oklch(.961 .005 var(--hue)))var(--lightningcss-dark,oklch(.178 .005 var(--hue)));--surface:var(--lightningcss-light,oklch(.995 .002 var(--hue)))var(--lightningcss-dark,oklch(.218 .006 var(--hue)));--soft:var(--lightningcss-light,oklch(.925 .007 var(--hue)))var(--lightningcss-dark,oklch(.289 .008 var(--hue)));--text:var(--lightningcss-light,oklch(.178 .012 var(--hue)))var(--lightningcss-dark,oklch(.961 .008 var(--hue)));--muted:var(--lightningcss-light,oklch(.45 .02 var(--hue)))var(--lightningcss-dark,oklch(.767 .02 var(--hue)));--border:var(--lightningcss-light,oklch(.566 .03 var(--hue)))var(--lightningcss-dark,oklch(.65 .03 var(--hue)));--rule:var(--lightningcss-light,oklch(.87 .008 var(--hue)))var(--lightningcss-dark,oklch(.348 .008 var(--hue)));--accent:var(--lightningcss-light,oklch(.42 .14 var(--hue)))var(--lightningcss-dark,oklch(.8 .13 var(--hue)));--accent-hover:var(--lightningcss-light,oklch(.34 .12 var(--hue)))var(--lightningcss-dark,oklch(.88 .1 var(--hue)));--fs-xs:.8125rem;--fs-sm:.875rem;--fs-lg:1.25rem;--fs-xl:1.5rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--border-w:1px;--radius:.5rem;--radius-sm:.25rem;--target:2.75rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-padding-top:8rem}@media (width<=800px){html{scroll-padding-top:13rem}}body{background:var(--page);min-height:100dvh;color:var(--text);flex-direction:column;margin:0;display:flex;position:relative}body:after,#header:after,.modal:after{content:"";z-index:1000;pointer-events:none;background:var(--grain-ink);-webkit-mask-image:var(--grain-image);-webkit-mask-image:var(--grain-image);mask-image:var(--grain-image);border-radius:inherit;position:absolute;inset:0}body:after{z-index:5}#header:after{z-index:1}@media (forced-colors:active){body:after,#header:after,.modal:after{display:none}}a{color:var(--text);text-underline-offset:.15em;text-decoration:underline}:focus-visible{outline:2px solid var(--text);outline-offset:2px}#header{z-index:10;border-bottom:var(--border-w) solid var(--rule);background:color-mix(in srgb, var(--surface) var(--header-opacity), transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:sticky;top:0}#bar{justify-content:space-between;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-3) var(--space-4);flex-wrap:wrap;display:flex}#player{padding:0 var(--space-4) var(--space-3)}#player[hidden]{display:none}#header nav{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.brand{font-weight:700;font-size:var(--fs-lg);color:var(--text);text-decoration:none}.brand span{color:var(--accent)}.who{color:var(--muted)}button.glyph{min-height:0;padding:var(--space-2);color:var(--muted);background:0 0;border:none;line-height:0}button.glyph:hover:not(:disabled){color:var(--text);background:0 0}button.glyph svg{width:1rem;height:1rem}main{width:100%;max-width:1100px;padding:var(--space-4);flex:1 0 auto;margin:0 auto}h1{font-size:var(--fs-xl);margin:var(--space-1) 0 var(--space-2);line-height:1.25}h2{font-size:var(--fs-lg);margin:0 0 var(--space-3);font-weight:600}.card{background:var(--surface);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:var(--space-4);margin-bottom:var(--space-4);overflow-x:auto}.narrow{max-width:24rem;margin:var(--space-5) auto}.muted{color:var(--muted)}.error{padding-left:var(--space-2);border-left:.3rem solid var(--text);margin:0;font-weight:600}.error:empty,.notice:empty{display:none}.notice{background:var(--soft);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin:0 0 var(--space-3)}form label{gap:var(--space-1);margin-bottom:var(--space-3);font-size:var(--fs-sm);flex-direction:column;flex:1;display:flex}form label.check{align-items:center;gap:var(--space-2);min-height:var(--target);flex-direction:row;flex:none}label[hidden]{display:none}input,textarea,button{font:inherit;color:inherit}input:not([type=checkbox]):not([type=radio]),textarea{width:100%;min-height:var(--target);padding:var(--space-2) var(--space-3);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}::placeholder{color:var(--muted);opacity:1}input[type=checkbox],input[type=radio]{width:1.25rem;height:1.25rem;accent-color:var(--text);flex:none;margin:0}.row{gap:var(--space-3);flex-wrap:wrap;align-items:flex-end;display:flex}button,.button{min-height:var(--target);padding:var(--space-2) var(--space-3);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);cursor:pointer;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}button:hover:not(:disabled){background:var(--soft)}button:disabled{color:var(--muted);cursor:default;border-style:dashed}button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:600}button.primary:hover:not(:disabled),.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}button.danger{font-weight:600}button.link{min-height:0;color:var(--text);text-underline-offset:.15em;background:0 0;border:none;padding:0;text-decoration:underline}button.link:hover:not(:disabled){background:0 0}button.icon{min-width:var(--target);padding:var(--space-2)}button.small{padding:var(--space-1) var(--space-2);font-size:var(--fs-sm)}button.finished{background:var(--soft);font-weight:600}.badge{padding:0 var(--space-2);border:var(--border-w) solid var(--border);font-size:var(--fs-xs);background:var(--surface);color:var(--text);margin-right:var(--space-1);border-radius:999px;line-height:1.6;display:inline-block}.badge.open{background:var(--accent);border-color:var(--accent);color:var(--surface)}.badge.mine{background:var(--soft);font-weight:600}.badge.grab-failed{border-style:dashed;font-weight:700}ul.rounds,ul.plain{margin:0;padding:0;list-style:none}ul.plain li{padding:var(--space-1) 0}ul.plain li button{margin-left:var(--space-1)}.round-card{color:inherit;border-color:var(--border);margin-bottom:var(--space-3);text-decoration:none;display:block}.round-card:hover{background:var(--soft)}.description{white-space:pre-wrap}.tabs{gap:var(--space-1);border-bottom:var(--border-w) solid var(--rule);margin:var(--space-4) 0;flex-wrap:wrap;display:flex}.tabs button{background:0 0;border:none;border-radius:0}.tabs button:hover:not(:disabled){background:0 0;text-decoration:underline}.tabs button.active{text-underline-offset:.5em;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.player{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.now{flex:16rem;min-width:0}.now p{text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.transport{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.status{min-width:7ch;font-size:var(--fs-sm);text-align:right}.prefer-copy{font-size:var(--fs-sm);gap:var(--space-1);align-items:center;display:flex}.player-host{min-width:0;height:var(--target);flex:0 22rem;align-items:center;display:flex}.player-host:empty{display:none}.player-host>*{width:100%;min-width:0}.player-host audio{height:var(--target)}.player-host .embed{align-items:center;height:100%;display:flex}.player-host iframe{border:0;width:100%;height:100%}.player-host iframe.mini{height:20px}#float{right:var(--space-4);bottom:var(--space-4);z-index:20;box-sizing:content-box;border:var(--border-w) solid var(--border);border-radius:var(--radius);background:var(--surface);width:200px;position:fixed;overflow:hidden}#float:has([data-kind=spotify]:not(:empty)){width:256px}#float[hidden]{display:none}.float-bar{border-bottom:var(--border-w) solid var(--rule)}button.float-handle{width:100%;min-height:0;padding:var(--space-1) var(--space-2);color:var(--muted);font-size:var(--fs-xs);text-align:left;cursor:grab;touch-action:none;background:0 0;border:none;border-radius:0;display:block}button.float-handle:hover:not(:disabled){background:var(--soft)}.float-host{height:200px}.float-host[data-kind=spotify]{height:152px}.float-host .embed,.float-host iframe{border:0;width:100%;height:100%}.external{align-items:center;gap:var(--space-2);min-width:0;display:flex}.external p{display:none}.external .button{white-space:nowrap}.player-note{top:100%;left:var(--space-4);z-index:1;align-items:center;gap:var(--space-2);max-width:min(36rem, calc(100vw - 2 * var(--space-4)));padding:var(--space-2) var(--space-3);border:var(--border-w) solid var(--border);border-radius:0 0 var(--radius) var(--radius);background:var(--surface);border-top:none;display:flex;position:absolute}.player-note[hidden]{display:none}.player-note p{margin:0}#footer{align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4);border-top:var(--border-w) solid var(--rule);font-size:var(--fs-sm);flex-wrap:wrap;display:flex}.hue-tool{align-items:center;gap:var(--space-2);display:flex}.hue-tool input{width:min(24rem,60vw);accent-color:var(--accent)}.hue-value{font-variant-numeric:tabular-nums;min-width:3ch}.sort-bar{gap:var(--space-1);margin-bottom:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}ol.songs{margin:0;padding:0;list-style:none}li.song{gap:var(--space-3);padding:var(--space-3);border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--surface);margin-bottom:var(--space-2);align-items:flex-start;display:flex;position:relative}li.song.current{border-left-width:.3rem;border-left-color:var(--text)}li.song.current .title{font-weight:700}li.song.dragging{opacity:.4}li.song.drop-before:before,li.song.drop-after:after{content:"";border-top:3px solid var(--text);pointer-events:none;height:0;position:absolute;left:0;right:0}li.song.drop-before:before{top:-.3rem}li.song.drop-after:after{bottom:-.3rem}.handle{cursor:grab;color:var(--muted);padding-top:var(--space-1);-webkit-user-select:none;user-select:none}.info{flex:1;min-width:0}.meta{font-size:var(--fs-xs);margin-top:var(--space-1);gap:var(--space-1) var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.comment{font-size:var(--fs-sm);margin-top:var(--space-1);white-space:pre-wrap}.actions{gap:var(--space-1);flex-wrap:wrap;justify-content:flex-end;align-items:center;display:flex}button.like.liked{background:var(--accent);border-color:var(--accent);color:var(--surface);font-weight:600}.likes{font-weight:600}.copy-toggle{align-items:center;gap:var(--space-2);font-size:var(--fs-xs);color:var(--muted);margin-top:var(--space-1);display:flex}table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:var(--space-2);border-bottom:var(--border-w) solid var(--rule);vertical-align:top}td.actions{justify-content:flex-start}@media (width<=480px){th,td{padding:var(--space-1)}td.actions button{min-width:0;padding:var(--space-1) var(--space-2)}li.song{flex-wrap:wrap}li.song .info{flex:10rem}li.song .actions{flex-basis:100%;justify-content:flex-start}}.ranking .rank{font-weight:700;font-size:var(--fs-lg)}.ranking tr.winner td{background:var(--soft);font-weight:600}.ranking .count{font-weight:600}.invite-code{font-size:var(--fs-lg)}.round-actions{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.round-actions .error{margin:0}fieldset{border:var(--border-w) solid var(--rule);border-radius:var(--radius-sm);margin:0 0 var(--space-3);padding:var(--space-2) var(--space-3) 0}legend{font-size:var(--fs-sm);padding:0 var(--space-1)}.toggled{padding-left:var(--space-5)}.hint{font-size:var(--fs-sm);margin-top:0}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}body:has(>dialog.modal[open]){overflow:hidden}.modal{border:var(--border-w) solid var(--border);border-radius:var(--radius);background:var(--surface);width:min(40rem,100vw - 2rem);max-width:none;max-height:calc(100dvh - 2rem);color:var(--text);padding:0;overflow:auto}.modal::backdrop{background:color-mix(in srgb, var(--page) 70%, transparent)}.modal-body{padding:var(--space-4)}.modal-head{justify-content:space-between;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.modal-head h2{margin:0}.modal .song-form{margin:0 0 var(--space-4);background:0 0;border:none;padding:0;overflow:visible}.modal button{min-width:var(--target);min-height:var(--target)}.modal .modal-close{background:0 0;border:none;padding:0;font-size:1.6rem;line-height:1}.modal label.check{min-height:var(--target)}.modal input[type=checkbox],.modal input[type=radio]{flex:none;width:1.25rem;height:1.25rem;margin:0}.modal input:not([type=checkbox]):not([type=radio]),.round-actions .hand-in{min-height:var(--target)}.submitted{margin:0}.submitted:not(:empty){margin:var(--space-2) 0 var(--space-4);padding:var(--space-2) var(--space-3);border:var(--border-w) solid var(--border);border-radius:var(--radius-sm);background:var(--soft)}.modal .suggest-btn{margin-bottom:var(--space-3);flex:none}.modal .suggest-btn[hidden]{display:none}