:root{--bg:#0a0a0a;--fg:#fff;--fg-dim:#ccc;--accent:#fc0;--accent-dim:#ffcc0014;--border:#282828;--error:#f44;--marker:#f80;--font:"Berkeley Mono", "JetBrains Mono", "Fira Code", "SF Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.6}::selection{background:var(--accent);color:var(--bg)}a{color:var(--accent);text-decoration:none}.dots:after{content:"";text-align:left;width:1.2em;animation:1.4s steps(4,end) infinite dots;display:inline-block}@keyframes dots{0%,to{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.app-container{width:100%;max-width:880px;margin:0 auto}.ascii-fit{width:100%;min-width:0;overflow:hidden;container-type:inline-size}.pixel-art{-webkit-user-select:none;user-select:none;display:block}.logo-wide,.logo-stacked{color:var(--accent)}.logo-stacked{display:none}@media (width<=560px){.logo-wide{display:none}.logo-stacked{display:block}}.ascii-title{color:var(--accent);animation:14s ease-in-out infinite alternate ascii-drift}@keyframes ascii-drift{0%{transform:translate(0)}to{transform:translate(min(0px,100cqw - 100%))}}@media (prefers-reduced-motion:reduce){.ascii-title{animation:none}.ascii-fit-title{overflow-x:auto}}.row-title-btn{min-width:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;background:0 0;border:none;flex:1;margin:0;padding:0;overflow:hidden}.row-title-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.box{border:1px solid var(--border);padding:1rem}.box-header{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem;font-size:11px}input,select,textarea{outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)!important}input::placeholder,textarea::placeholder{color:var(--fg-dim);opacity:.6}button{outline:none}button:hover{opacity:.8}button:active{opacity:.6}.tui-btn{border:1px solid var(--border);color:var(--accent);font-family:var(--font);cursor:pointer;white-space:nowrap;background:0 0;flex:none;padding:.4rem .75rem;font-size:13px}.share-actions{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.share-label-input{background:var(--bg);border:1px solid var(--border);color:var(--fg);font-family:var(--font);flex:none;width:20ch;padding:.2rem .4rem;font-size:12px}.share-perm{color:var(--fg-dim);white-space:nowrap;flex:none;align-items:center;gap:.3rem;font-size:12px;display:flex}.comment{border-bottom:1px solid var(--border);padding:.5rem 0}.comment-meta{align-items:center;gap:.6rem;display:flex}.comment-author{color:var(--fg);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:12px;overflow:hidden}.comment-actions{flex:none;align-items:center;gap:.6rem;margin-left:auto;display:flex}.comment-body{overflow-wrap:anywhere;margin-top:.25rem;margin-left:calc(22px + .6rem)}.comment-body.is-clamped{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.comment-more{color:var(--accent);font-family:var(--font);cursor:pointer;background:0 0;border:none;margin-top:.15rem;margin-left:calc(22px + .6rem);padding:0;font-size:12px}.comment-replies{margin-top:.25rem;margin-left:calc(22px + .6rem)}.comment-reply{color:var(--fg-dim);padding:.25rem 0}.comment-reply-meta{align-items:center;gap:.5rem;font-size:12px;display:flex}.comment-reply .comment-body,.comment-reply .comment-more{margin-left:1rem}@media (width<=560px){.hide-narrow{display:none}.comment-body,.comment-more,.comment-replies{margin-left:0}.comment-reply .comment-body,.comment-reply .comment-more{margin-left:.9rem}}.player-key{color:var(--fg-dim);font-family:var(--font);cursor:pointer;white-space:pre;background:0 0;border:none;padding:6px 2px;font-size:14px}.player-key:hover{opacity:1;color:var(--accent)}.player-key:active{opacity:1;color:var(--accent);text-shadow:0 0 6px var(--accent)}.player-key-primary{color:var(--accent);font-size:15px}.player-key-primary:hover{color:var(--fg)}.player-inner{align-items:center;gap:1.25rem;max-width:880px;margin:0 auto;padding:1.25rem 1.5rem 1.5rem;display:flex}.player-inner-min{padding:.5rem 1.5rem .6rem}.player-inner-min .player-controls-row{margin-bottom:0}.player-artwork{border:1px solid var(--border);background:var(--bg);flex:none;width:96px;height:96px;overflow:hidden}.player-controls-row{align-items:center;gap:.6rem;margin-bottom:.75rem;display:flex}.player-title{color:var(--fg);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;margin-left:.75rem;overflow:hidden}.player-time{color:var(--fg-dim);font-variant-numeric:tabular-nums;white-space:nowrap}.player-marker{transition:transform .1s,box-shadow .1s}.player-marker:hover{z-index:3;transform:scale(1.18);box-shadow:0 2px 8px #000c}.player-marker-group:hover .player-marker-line{opacity:.75}.page-header{flex-direction:column;align-items:stretch;gap:.75rem;margin-bottom:1.5rem;display:flex}.page-header-logo{width:100%;min-width:0}.page-header-actions{flex-flow:wrap;justify-content:flex-end;align-items:center;gap:.5rem;display:flex}.page-header-identity{color:var(--fg-dim);text-overflow:ellipsis;white-space:nowrap;min-width:0;margin-right:.5rem;overflow:hidden}.rename-input{background:var(--bg);border:1px solid var(--border);min-width:0;color:var(--fg);font-family:var(--font);flex:1;padding:.3rem .4rem;font-size:16px}.rename-input:disabled{color:var(--fg-dim);-webkit-text-fill-color:var(--fg-dim);opacity:1;cursor:not-allowed}.playlist-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;display:flex}@media (width<=560px){.playlist-header{flex-direction:column;align-items:stretch;gap:.75rem}}@media (width<=640px){.player-inner{gap:.75rem;padding:.9rem 1rem 1rem}.player-inner-min{padding:.45rem 1rem .55rem}.player-artwork{width:56px;height:56px}.player-title{margin-left:.25rem;font-size:12px}.player-time{font-size:11px}}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:1px}@supports (padding-bottom:env(safe-area-inset-bottom)){body{padding-bottom:env(safe-area-inset-bottom)}}
