:root{--theme-color:oklch(75% .2 30);--color-bg:#000;--color-bg-elevated:#111;--color-text:#fff;--color-text-muted:#ffffff80;--color-border:#ffffff1a;--color-hover-bg:#ffffff14;--color-play-icon:#000;--font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", sans-serif;--font-size-base:24px;--font-size-dropdown:16px;--font-size-sup:12px;--font-weight-medium:500;--space-xs:2px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:48px;--radius-dropdown:8px;--btn-size:80px;--icon-size:20px;--line-width:1px;--dropdown-max-height:300px;--pos-btn:12%;--pos-arc:61.8%}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;overflow:hidden}#app{width:100vw;height:100vh;position:relative;overflow:hidden}.shader-bg{z-index:-1;position:absolute;inset:0}.scroll-container{position:absolute;inset:0;overflow:hidden}.scroll-track{top:50%;left:var(--pos-arc);margin-left:calc(var(--radius) * -1px);width:0;height:0;animation:spin var(--spin-duration,90s) linear infinite;position:absolute}.scroll-track.paused{animation-play-state:paused}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scroll-item{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text);white-space:nowrap;cursor:pointer;transform-origin:0;border:none;outline:none;text-decoration:none;position:absolute;top:-12px;left:0}.scroll-item:hover{color:#fff9}.scroll-item.selected{color:var(--theme-color)}.filter-panel{z-index:20;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.random-btn{left:var(--pos-btn);width:var(--btn-size);height:var(--btn-size);background:var(--theme-color);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.random-btn:after{content:"";border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--color-play-icon);width:0;height:0;margin-left:4px;display:block}.random-btn:hover{opacity:.8}.random-btn:active{transition:transform .1s;transform:translate(-50%,-50%)scale(.88)}.filter-line{left:calc(var(--pos-btn) + var(--btn-size) / 2 + var(--space-sm));right:calc(100% - var(--pos-arc) + var(--space-sm));height:var(--line-width);background:var(--theme-color);position:absolute;top:50%}.filter-selects{left:calc(var(--pos-btn) + var(--btn-size) / 2);right:calc(100% - var(--pos-arc));justify-content:space-evenly;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.custom-select{cursor:pointer;position:relative}.select-display{padding:var(--space-sm) var(--space-lg);background-color:var(--color-bg);color:var(--theme-color);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);white-space:nowrap;border:var(--line-width) solid var(--theme-color);border-radius:999px;align-items:baseline;display:flex}.select-count{font-size:var(--font-size-sup);font-weight:var(--font-weight-medium);color:var(--theme-color);margin-left:var(--space-xs);vertical-align:super;position:relative;top:-8px}.select-dropdown{background:var(--color-bg-elevated);border:var(--line-width) solid var(--color-border);border-radius:var(--radius-dropdown);padding:var(--space-sm) 0;max-height:var(--dropdown-max-height);z-index:30;min-width:100%;display:none;position:absolute;top:100%;left:0;overflow-y:auto}.custom-select.open .select-dropdown{display:block}.select-option{padding:var(--space-sm) var(--space-lg);font-size:var(--font-size-dropdown);color:var(--color-text);white-space:nowrap;cursor:pointer}.select-option:hover{background:var(--color-hover-bg)}.select-option.active{color:var(--theme-color)}.select-option .option-count{font-size:var(--font-size-sup);color:var(--color-text-muted);margin-left:6px}@media (width<=768px){:root{--btn-size:72px;--font-size-base:20px}.scroll-track{margin-left:0;top:100%;left:50%}.filter-panel{inset:0;transform:none}.random-btn{position:absolute;top:auto;bottom:14%;left:50%;transform:translate(-50%)}.random-btn:active{transform:translate(-50%)scale(.88)}.filter-line{top:40%;left:50%;right:auto;bottom:calc(14% + var(--btn-size) + var(--space-sm));width:var(--line-width);background:var(--theme-color);height:auto;position:absolute;transform:translate(-50%)}.filter-selects{top:auto;left:50%;right:auto;bottom:calc(14% + var(--btn-size) + var(--space-sm) + var(--space-2xl));align-items:center;gap:var(--space-xl);flex-direction:column-reverse;position:absolute;transform:translate(-50%)}.select-display{background-color:var(--color-bg)}.select-dropdown{max-height:40vh;top:auto;bottom:100%;left:50%;transform:translate(-50%)}}