:root{--bg:#0f1115;--surface:#171a21;--surface-2:#1e222b;--border:#2a2f3a;--text:#eceef3;--muted:#b3bac8;--accent:#f5b14c;--accent-ink:#1a1306;--focus:#8cc8ff;--danger:#ff8a85;--warn:#f5c56b;--ok:#6fd3a0;--radius:10px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{scroll-padding-top:calc(var(--header-h,3.5rem) + var(--toolbar-h,3rem))}html,body{background:var(--bg);color:var(--text);font:15px/1.5 var(--font);margin:0}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.skip-link{z-index:100;background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:.5rem .75rem;position:absolute;top:-3rem;left:.5rem}.skip-link:focus{top:.5rem}.muted{color:var(--muted)}.help{color:var(--muted);margin:.25rem 0 0;font-size:.85rem;display:block}.help.inline{margin-left:.5rem;display:inline}.notice,.warn-text{color:var(--warn)}.error-text{color:var(--danger)}.spacer{flex:1}kbd{border:1px solid var(--border);background:var(--surface-2);border-bottom-width:2px;border-radius:4px;padding:.05em .35em;font:.8em ui-monospace,Menlo,monospace}.btn{border:1px solid var(--border);background:var(--surface-2);min-height:2.5rem;color:var(--text);font:inherit;cursor:pointer;border-radius:8px;align-items:center;gap:.4rem;padding:.45rem .9rem;font-weight:600;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){background:#252a35;border-color:#3b4252}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn.primary:hover:not(:disabled){background:#ffc46a}.btn.ghost{background:0 0}.btn.danger{color:var(--danger)}.btn.small{min-height:2rem;padding:.25rem .6rem;font-size:.85rem}button.link{color:var(--focus);cursor:pointer;font:inherit;background:0 0;border:0;padding:0;text-decoration:underline}select,input[type=text],input:not([type]){font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;min-height:2.5rem;padding:.4rem .6rem}input[type=range]{width:100%;accent-color:var(--accent)}input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:1.1rem;height:1.1rem}.app-header{z-index:10;backdrop-filter:blur(8px);border-bottom:1px solid var(--border);background:#0f1115eb;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.6rem 1rem;display:flex;position:sticky;top:0}.brand{color:var(--text);align-items:center;gap:.5rem;font-weight:700;text-decoration:none;display:inline-flex}.collection-switch{align-items:center;gap:.5rem;display:flex}.net-status{color:var(--muted);align-items:center;gap:.4rem;font-size:.85rem;display:inline-flex}.net-status .dot{background:var(--ok);border-radius:50%;width:.55rem;height:.55rem}.net-status.offline .dot{background:var(--warn)}.storage-meter{flex-direction:column;min-width:8rem;font-size:.75rem;display:flex}.storage-meter meter{width:100%;height:.5rem}.app-body{grid-template-columns:minmax(0,1fr) 20rem;gap:1.25rem;max-width:110rem;margin:0 auto;padding:1rem;display:grid}.app-main{min-width:0}.app-main:focus{outline:none}.app-side{top:calc(var(--header-h,3.5rem) + 1rem);max-height:calc(100dvh - var(--header-h,3.5rem) - 2rem);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-self:start;padding:1rem;position:sticky;overflow:hidden auto}.app-side select,.app-side input[type=text],.app-side input:not([type]){width:100%;min-width:0}.app-side fieldset{min-inline-size:0}.app-side h2{margin:0 0 .75rem;font-size:1.1rem}.btn.play{justify-content:center;width:100%;min-height:3rem;margin-top:1rem;font-size:1.05rem}@media (width<=60rem){.app-body{grid-template-columns:1fr}.app-side{order:-1;max-height:none;position:static;overflow:visible}}.toolbar{top:var(--header-h,3.5rem);z-index:5;background:var(--bg);padding:.5rem 0;position:sticky}.collection-head,.toolbar{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.collection-name{max-width:100%;font-weight:700;background:0 0!important;border-color:#0000!important;padding-left:.25rem!important;font-size:1.35rem!important}.collection-name:hover,.collection-name:focus{border-color:var(--border)!important}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-width:50rem;margin:1rem auto 0;padding:1rem 1.25rem}.panel-head{justify-content:space-between;align-items:center;display:flex}.panel-head h2{margin:0}.settings-form{gap:.9rem;display:grid}.field{border:0;gap:.3rem;margin:0;padding:0;display:grid}.field label,.field legend{font-weight:600}.field-title{margin:0;font-size:1rem}.field-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;display:grid}.field-inline{align-items:center;gap:.5rem;display:flex}.field-inline label{font-weight:600}.field output{float:right;color:var(--muted);font-weight:400}.radio{align-items:flex-start;gap:.5rem;margin-top:.4rem;display:flex}.radio input{margin-top:.25rem}.radio label{font-weight:600}.format-options summary{cursor:pointer;padding:.25rem 0;font-weight:600}.format-options[open]{gap:.75rem;display:grid}.callout{border:1px solid var(--border);background:var(--surface-2);border-radius:8px;padding:.6rem .8rem}.callout p{margin:0 0 .5rem}.callout.warn{border-color:#6b5520}.callout.error{border-color:#7a2e2b}.actions{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex}.import-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem;padding:.75rem 1rem}.import-panel.warn{border-color:#6b5520}.import-panel.error{border-color:#7a2e2b}.import-panel p{margin:.35rem 0}.import-head{justify-content:space-between;align-items:center;gap:1rem;display:flex}.import-panel progress{width:100%;height:.5rem;accent-color:var(--accent)}.import-active{max-height:7.5rem;margin:.25rem 0 0;padding:0;font-size:.85rem;list-style:none;overflow:hidden}.stage{min-width:5.5rem;color:var(--muted);font-variant:small-caps;display:inline-block}.import-failed{font-size:.85rem}.google{flex-direction:column;gap:.25rem;display:inline-flex}.google-status{max-width:34rem;font-size:.9rem}.google-status p{margin:.25rem 0}.empty{text-align:center;color:var(--muted);border:2px dashed var(--border);border-radius:var(--radius);padding:3rem 1rem}.empty h2{color:var(--text)}.library{width:100%;position:relative}.library-row{display:grid;position:absolute;top:0;left:0}.tile{background:var(--surface-2);border-radius:6px;position:relative;overflow:hidden}.tile-select{cursor:pointer;width:100%;height:100%;display:block}.tile img,.tile-placeholder{object-fit:cover;width:100%;height:100%;display:block}.tile-check{opacity:0;background:#00000059;border:2px solid #ffffffd9;border-radius:50%;width:1.3rem;height:1.3rem;transition:opacity .12s;position:absolute;top:.4rem;left:.4rem}.tile:hover .tile-check,.tile:focus-within .tile-check,.tile.is-selected .tile-check{opacity:1}.tile.is-selected .tile-check{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--accent-ink)}.tile.is-selected img{outline:3px solid var(--accent);outline-offset:-3px}.tile:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:1px}.tile-expand{color:#fff;cursor:pointer;opacity:0;background:#0009;border:0;border-radius:50%;place-items:center;width:2.2rem;height:2.2rem;transition:opacity .12s;display:grid;position:absolute;bottom:.35rem;right:.35rem}.tile-expand svg{fill:currentColor;width:1.2rem;height:1.2rem}.tile:hover .tile-expand,.tile-expand:focus-visible{opacity:1}@media (hover:none){.tile-expand,.tile-check{opacity:1}}.drop-overlay{z-index:50;border:4px dashed var(--accent);pointer-events:none;background:#0f1115cc;place-items:center;font-size:1.5rem;font-weight:700;display:grid;position:fixed;inset:0}.dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);max-width:32rem;padding:1.25rem 1.5rem}.dialog::backdrop{background:#0009}.dialog h2{margin-top:0}.dialog.preview{width:min(96vw,90rem);max-width:none;height:min(94dvh,70rem);max-height:none;padding:.75rem}.dialog.preview[open]{grid-template-rows:auto minmax(0,1fr) auto;gap:.6rem;display:grid}.preview-head,.preview-actions{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex}.preview-actions{justify-content:center}.preview-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:700;overflow:hidden}.preview-stage{background:#000;border-radius:6px;min-height:0;position:relative;overflow:hidden}.preview-stage img,.preview-stage .tile-placeholder{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.preview-select{cursor:pointer;gap:.45rem}.preview-select.is-selected{background:var(--accent);color:var(--accent-ink)}.preview-select:focus-within{outline:3px solid var(--focus);outline-offset:2px}.toast{z-index:60;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:.75rem;padding:.6rem .9rem;display:flex;position:fixed;bottom:1rem;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0006}.noscript{padding:2rem}.player{z-index:1000;color:#fff;touch-action:none;user-select:none;background:#000;position:fixed;inset:0;overflow:hidden}.player-canvas{width:100%;height:100%;display:block}.player.is-idle{cursor:none}.player-controls{left:50%;bottom:max(1.25rem, env(safe-area-inset-bottom));backdrop-filter:blur(10px);background:#0a0a0cb8;border-radius:999px;align-items:center;gap:.35rem;min-width:min(28rem,100vw - 2rem);padding:.4rem .6rem;transition:opacity .25s;display:flex;position:absolute;transform:translate(-50%)}.player.is-idle .player-controls:not(:focus-within){opacity:0;pointer-events:none}.player-controls button{color:#fff;cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;width:2.75rem;height:2.75rem;display:grid}.player-controls button:hover{background:#ffffff1f}.player-counter{font-variant-numeric:tabular-nums;opacity:.85;padding:0 .5rem;font-size:.9rem}.player-hint,.player-loading,.player-error{text-align:center;background:#0a0a0ccc;border-radius:8px;max-width:calc(100vw - 2rem);margin:0;padding:.5rem .9rem;position:absolute;top:1.25rem;left:50%;transform:translate(-50%)}.player-loading,.player-error{top:50%;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.graphics-panel{border-top:1px solid var(--border);margin-top:1rem;padding-top:.75rem}.graphics-panel>summary{cursor:pointer;font-size:1rem;font-weight:700}.graphics-panel .upload{cursor:pointer;margin:.5rem 0}.graphics-panel .upload:focus-within{outline:3px solid var(--focus);outline-offset:2px}.graphics-list{gap:.75rem;margin:.5rem 0;padding:0;list-style:none;display:grid}.graphic-row{border:1px solid var(--border);background:var(--surface-2);border-radius:8px;grid-template-columns:4.5rem 1fr;gap:.6rem;padding:.6rem;display:grid}.graphic-preview{border:1px solid var(--border);border-radius:6px;place-items:center;width:4.5rem;height:4.5rem;display:grid;overflow:hidden}.graphic-preview img{object-fit:contain;width:100%;height:100%}.graphic-fields{gap:.4rem;min-width:0;display:grid}.graphic-name{font-weight:600;min-height:2rem!important;padding:.2rem .4rem!important}.graphic-inline{flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.85rem;display:flex}.color-field{align-items:center;gap:.35rem;display:inline-flex}.color-field input[type=color]{border:1px solid var(--border);background:0 0;border-radius:4px;width:2rem;height:1.6rem;padding:0}.corner-logo-settings{gap:.5rem;margin-top:.75rem;display:grid}.corner-logo{z-index:1;pointer-events:none;border-radius:1vmin;line-height:0;position:absolute}.corner-logo.has-plate{padding:1vmin 1.4vmin}.corner-logo img{height:auto;display:block}.player-controls,.player-hint,.player-error,.player-loading{z-index:2}.section-title{border-top:1px solid var(--border);padding-top:1rem;margin-top:1.25rem!important}.backup-panel fieldset{border:0;margin:0;padding:0}.backup-list{gap:.3rem;margin:.25rem 0;padding:0;list-style:none;display:grid}.backup-progress{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.backup-progress progress{min-width:10rem;accent-color:var(--accent);flex:1}