html,body{background:#000;height:100%;margin:0}#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}.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;text-align:center;opacity:1;filter:brightness();border:1px solid #333;border-radius:12px;flex:none;justify-content:center;align-items:center;font-family:system-ui,sans-serif;font-size:clamp(1.5rem,5vw,3rem);transition:opacity .15s,filter .4s;display:flex}.card.side{opacity:.35;filter:brightness(.5)}.card.flash{opacity:0}.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;cursor:pointer;background:0 0;border:1px solid #555;border-radius:8px;justify-content:center;align-items:center;width:100%;padding:.75em;font-family:system-ui,sans-serif;font-size:1rem;transition:background .15s,border-color .15s;display:flex}.sidebar-btn:hover{background:#1a1a1a;border-color:#888}.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;background:#111;border:1px solid #333;border-radius:12px;width:min(320px,90vw);padding:24px;font-family:system-ui,sans-serif}.modal h2{margin:0 0 16px;font-size:1.1rem;font-weight:600}.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}@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))))}}