*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--surface:#141414;--surface-2:#101010;--line:#272727;--line-soft:#ffffff0e;--text:#e8e8e8;--muted:#8b8b8b;--accent:#6eb6ff;--radius:14px;--dur:.46s;--ease:cubic-bezier(.32, .72, 0, 1);--dur-title:.3s;--delay-title:80ms;--title-shift:14px;--dur-fade:.24s;--panel-shift:34px;--dur-panel:.31s;--delay-panel:.15s;--delay-back-scroll:.14s}body{background:var(--bg);min-height:100dvh;color:var(--text);-webkit-font-smoothing:antialiased;justify-content:center;padding:3rem 1rem 4rem;font-family:system-ui,-apple-system,sans-serif;display:flex}.stage{width:min(420px,100%)}.intro{margin-bottom:1.5rem}.intro h1{margin-bottom:.4rem;font-family:ui-monospace,monospace;font-size:1.05rem;font-weight:600}.intro p{color:var(--muted);font-size:.8rem;line-height:1.5}code{color:var(--accent);font-family:ui-monospace,monospace;font-size:.95em}.note{color:#f0c27b;background:#1d1408;border:1px solid #5a3a12;border-radius:10px;margin-top:1rem;padding:.75rem .875rem;font-size:.75rem;line-height:1.5}.note[hidden]{display:none}.legend{color:#6f6f6f;flex-direction:column;gap:.4rem;margin-top:1.5rem;font-size:.72rem;line-height:1.5;list-style:none;display:flex}.legend b{color:#a9a9a9;font-weight:600}.legend em{color:var(--accent);font-style:normal}.card{width:100%}.card-head{view-transition-name:head;view-transition-group:contain;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;border-bottom:0;align-items:center;gap:.5rem;min-height:64px;padding:.75rem 1rem;display:flex;position:sticky;top:0}.back{view-transition-name:back-btn;border:1px solid var(--line);width:30px;height:30px;color:var(--text);cursor:pointer;background:#1c1c1c;border-radius:8px;flex:none;place-items:center;display:grid}.back:hover{background:#252525}.back[hidden]{display:none}.titles{view-transition-group:nearest;flex:1;min-width:0}.crumb{color:#6a6a6a;white-space:nowrap;text-overflow:ellipsis;margin-bottom:.15rem;font-family:ui-monospace,monospace;font-size:.65rem;overflow:hidden}.title{white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.viewport{view-transition-name:viewport;view-transition-group:contain;background:var(--surface);border-inline:1px solid var(--line)}.panel{view-transition-group:nearest;background:var(--surface);list-style:none}.row{border:0;border-bottom:1px solid var(--line-soft);width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;align-items:center;gap:.75rem;padding:.6rem 1rem;display:flex}.row:hover{background:#1a1a1a}.ico{border-radius:8px;flex:none;place-items:center;width:28px;height:28px;font-size:.7rem;font-weight:700;display:grid}.tick{border:1px solid var(--line);color:#0000;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;display:grid}.row.is-checked .tick{background:var(--accent);border-color:var(--accent);color:#06121f}.row-label{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:.82rem;overflow:hidden}.row-meta{color:#6f6f6f;flex:none;font-family:ui-monospace,monospace;font-size:.7rem}.chev{color:#5a5a5a;flex:none}.bottom-bar{view-transition-name:bottombar;z-index:2;background:var(--surface-2);border:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);align-items:center;gap:.6rem;padding:.7rem .75rem .7rem 1rem;display:flex;position:sticky;bottom:0}.bb-count{color:#9a9a9a;font-size:.72rem}.bb-scroll{color:#5f5f5f;margin-left:auto;font-family:ui-monospace,monospace;font-size:.68rem}.cta{border:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer;background:#1c1c1c;border-radius:8px;padding:.4rem .7rem;font-size:.72rem}.cta:hover{background:#252525}::view-transition-group(*){animation-duration:var(--dur);animation-timing-function:var(--ease)}::view-transition-old(*){animation-duration:var(--dur);animation-timing-function:var(--ease)}::view-transition-new(*){animation-duration:var(--dur);animation-timing-function:var(--ease)}::view-transition-group(viewport){z-index:1;background:var(--surface);border-inline:1px solid var(--line)}::view-transition-old(viewport){opacity:0;animation:none}::view-transition-new(viewport){opacity:0;animation:none}::view-transition-group-children(viewport){overflow:clip}::view-transition-group(head){z-index:3;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;border-bottom:0}::view-transition-old(head){opacity:0;animation:none}::view-transition-new(head){opacity:0;animation:none}::view-transition-group-children(head){border-radius:var(--radius) var(--radius) 0 0;overflow:clip}::view-transition-group(bottombar){z-index:3}::view-transition-group(back-btn){z-index:5}::view-transition-group(hero){z-index:4}::view-transition-old(rest-out){mix-blend-mode:normal;animation-name:fade-out;animation-duration:var(--dur-fade)}::view-transition-old(title-fade){mix-blend-mode:normal;animation-name:fade-out;animation-duration:var(--dur-fade)}@keyframes fade-out{to{opacity:0}}::view-transition-old(panel-out){mix-blend-mode:normal;animation-fill-mode:both}::view-transition-new(panel-in){mix-blend-mode:normal;animation-fill-mode:both}::view-transition-new(panel-in){box-shadow:0 0 40px 10px #0009}::view-transition-old(title-out){mix-blend-mode:normal;animation-fill-mode:both;animation-duration:var(--dur-title);animation-delay:var(--delay-title)}::view-transition-new(title-in){mix-blend-mode:normal;animation-fill-mode:both;animation-duration:var(--dur-title);animation-delay:var(--delay-title)}@keyframes title-out-left{0%{opacity:1;transform:translate(0)}60%{opacity:0}to{transform:translateX(calc(-1 * var(--title-shift)));opacity:0}}@keyframes title-in-right{0%{transform:translateX(var(--title-shift));opacity:0}45%{opacity:1}to{opacity:1;transform:translate(0)}}@keyframes title-out-right{0%{opacity:1;transform:translate(0)}60%{opacity:0}to{transform:translateX(var(--title-shift));opacity:0}}@keyframes title-in-left{0%{transform:translateX(calc(-1 * var(--title-shift)));opacity:0}45%{opacity:1}to{opacity:1;transform:translate(0)}}@keyframes turn-out-left{to{opacity:.35;transform:translate(-30%)}}@keyframes turn-in-right{0%{transform:translateX(var(--panel-shift));opacity:0}to{opacity:1;transform:translate(0)}}@keyframes turn-out-right{to{transform:translate(100%)}}@keyframes turn-in-left{0%{opacity:.35;transform:translate(-30%)}}html:active-view-transition-type(forward)::view-transition-old(panel-out){animation-name:turn-out-left}html:active-view-transition-type(forward)::view-transition-new(panel-in){animation-name:turn-in-right;animation-duration:var(--dur-panel);animation-delay:var(--delay-panel)}html:active-view-transition-type(forward)::view-transition-group(panel-in){z-index:2}html:active-view-transition-type(forward)::view-transition-old(title-out){animation-name:title-out-left}html:active-view-transition-type(forward)::view-transition-new(title-in){animation-name:title-in-right}html:active-view-transition-type(forward)::view-transition-group(title-in){z-index:2}html:active-view-transition-type(back)::view-transition-old(panel-out){animation-name:turn-out-right}html:active-view-transition-type(back)::view-transition-new(panel-in){animation-name:turn-in-left}html:active-view-transition-type(back)::view-transition-group(panel-out){z-index:2}html:active-view-transition-type(back)::view-transition-old(title-out){animation-name:title-out-right}html:active-view-transition-type(back)::view-transition-new(title-in){animation-name:title-in-left}html:active-view-transition-type(back)::view-transition-group(title-out){z-index:2}@media (prefers-reduced-motion:reduce){::view-transition-group(*){animation:none!important}::view-transition-old(*){animation:none!important}::view-transition-new(*){animation:none!important}}
