html,body{background:#000;height:100%;margin:0}:focus-visible{outline-offset:2px;outline:2px dashed #fff}#app{justify-content:center;align-items:center;height:100vh;display:flex}:root{--card-w:clamp(160px, 32vw, 280px);--card-h:calc(var(--card-w) * 5 / 4);--gap:16px;--font-sans:"Inter", system-ui, sans-serif}.stage{width:calc(3 * var(--card-w) + 2 * var(--gap));max-width:100%;overflow:hidden}.track{gap:var(--gap);transition:transform .1s;display:flex}.track.sliding{transform:translateX(calc(-1 * (var(--card-w) + var(--gap))))}.track.no-transition{transition:none}.card{width:var(--card-w);box-sizing:border-box;aspect-ratio:4/5;color:#fff;font-family:var(--font-sans);text-align:center;opacity:1;filter:brightness();border:1px solid #333;border-radius:12px;flex:none;justify-content:center;align-items:center;padding:1rem;font-size:clamp(1.5rem,5vw,3rem);transition:opacity .15s,filter .4s;display:flex}.card.side{opacity:.35;filter:brightness(.5)}.sidebar{box-sizing:border-box;z-index:10;background:#0d0d0d;border-right:1px solid #333;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1rem;transition:transform .3s;display:flex;position:fixed;inset:0 auto 0 0}.sidebar.hidden{pointer-events:none;transform:translate(-100%)}.sidebar-btn{color:#fff;width:100%;font-family:var(--font-sans);cursor:pointer;background:0 0;border:1px solid #555;border-radius:8px;justify-content:center;align-items:center;padding:.75em;font-size:1rem;transition:background .15s,border-color .15s;display:flex}.sidebar-btn:hover{background:#1a1a1a;border-color:#888}.sidebar-btn.active{color:#000;background:#fff;border-color:#fff}.sidebar-btn.active:hover{background:#ddd;border-color:#ddd}.icon{width:20px;height:20px;display:block}.icon.hidden{display:none}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.modal-overlay{z-index:100;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay.hidden{display:none}.modal{box-sizing:border-box;color:#fff;width:min(320px,90vw);font-family:var(--font-sans);background:#111;border:1px solid #333;border-radius:12px;padding:1.5rem}.modal-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;gap:16px;margin:-24px -24px 16px;padding:1rem 1.5rem;display:flex}.modal h2{margin:0;font-size:1.1rem;font-weight:600}.modal-close-btn{color:#aaa;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;flex:none;justify-content:center;align-items:center;width:2em;height:2em;padding:0;transition:background .15s,border-color .15s,color .15s;display:flex}.modal-close-btn .icon{width:16px;height:16px}.modal-close-btn:hover{color:#fff;background:#1a1a1a;border-color:#888}.modal-input{box-sizing:border-box;color:#fff;background:#000;border:1px solid #555;border-radius:6px;width:100%;margin-bottom:16px;padding:.6em .8em;font-family:inherit;font-size:1rem}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.modal-btn{color:#fff;cursor:pointer;background:0 0;border:1px solid #555;border-radius:6px;padding:.5em 1.2em;font-family:inherit;font-size:.95rem;transition:background .15s,border-color .15s}.modal-btn:hover{background:#1a1a1a;border-color:#888}.modal-btn-primary{color:#000;background:#fff;border-color:#fff}.modal-btn-primary:hover{background:#ddd;border-color:#ddd}.saved-list{flex-direction:column;gap:8px;max-height:280px;margin:0 0 16px;padding:0;list-style:none;display:flex;overflow-y:auto}.saved-list-item{align-items:center;gap:8px;display:flex}.saved-list-name{color:#fff;text-align:left;cursor:pointer;background:0 0;border:1px solid #333;border-radius:6px;flex:1;padding:.6em .8em;font-family:inherit;font-size:.95rem;transition:background .15s,border-color .15s}.saved-list-name:hover{background:#1a1a1a;border-color:#888}.saved-list-delete{color:#888;cursor:pointer;background:0 0;border:1px solid #333;border-radius:6px;width:2em;height:2em;padding:0;font-size:1rem;line-height:1;transition:color .15s,border-color .15s}.saved-list-delete:hover{color:#fff;border-color:#888}.saved-list-empty{color:#888;font-style:italic}.settings-field{margin-bottom:16px}.settings-label{color:#aaa;margin-bottom:8px;font-size:.85rem;display:block}.settings-field-row{gap:8px;display:flex}.modal-input-inline{flex:none;width:5em;margin-bottom:0}.settings-field-row .segmented-control{flex:1}.segmented-control{border:1px solid #555;border-radius:6px;display:flex;overflow:hidden}.segmented-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-right:1px solid #555;flex:1;padding:.5em .8em;font-family:inherit;font-size:.95rem;transition:background .15s,color .15s}.segmented-btn:last-child{border-right:none}.segmented-btn:hover{background:#1a1a1a}.segmented-btn[aria-checked=true]{color:#000;background:#fff}.footer{color:#555;font-family:var(--font-sans);z-index:5;font-size:.75rem;position:fixed;bottom:8px;right:12px}.footer-link{color:inherit;text-decoration:none}.footer-link:hover{color:#999;text-decoration:underline}@media (orientation:portrait){.stage{width:var(--card-w);height:calc(3 * var(--card-h) + 2 * var(--gap));max-width:100%;max-height:100%}.track{flex-direction:column}.track.sliding{transform:translateY(calc(-1 * (var(--card-h) + var(--gap))))}}