:root{--bg:#fff;--label:#000;--label-2:#3c3c4399;--label-3:#3c3c434d;--separator:#3c3c434a;--fill:#78788029;--fill-2:#7676801f;--hover:#0000000a;--pressed:#0000001a;--tint:#00766f;--on-tint:#fff;--green:#34c759;--red:#ff3b30;--red-text:#d70015;--yellow:#fc0;--ink:#1d1d1f;--art-empty:linear-gradient(160deg, #e5e5ea, #c7c7cc);--art-empty-glyph:#8e8e93;--bar:#fafafacc;--float:#fafafcd9;--float-solid:#f9f9f9;--float-edge:#00000014;--menu:#f7f7f7e0;--menu-solid:#f7f7f7;--blur:saturate(180%) blur(20px);--raised:#fff;--segment:#fff;--sheet:#f2f2f7;--cell:#fff;--scrim:#00000059;--shadow:0 8px 28px #00000024;--art-shadow:0 10px 28px #00000029;--art-edge:#0000001a;--focus:var(--tint);--font:-apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--rounded:ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;--ease:cubic-bezier(.32, .72, 0, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--bg:#000;--label:#fff;--label-2:#ebebf599;--label-3:#ebebf54d;--separator:#545458a6;--fill:#78788052;--fill-2:#7676803d;--hover:#ffffff0f;--pressed:#ffffff24;--tint:#63e6e2;--on-tint:#000;--green:#30d158;--red:#ff453a;--red-text:#ff6961;--yellow:#ffd60a;--art-empty:linear-gradient(160deg, #3a3a3c, #2c2c2e);--art-empty-glyph:#8e8e93;--bar:#161617cc;--float:#2c2c2ed1;--float-solid:#2c2c2e;--float-edge:#ffffff1a;--menu:#252526e0;--menu-solid:#252526;--raised:#1c1c1e;--segment:#636366;--sheet:#1c1c1e;--cell:#2c2c2e;--scrim:#00000080;--shadow:0 8px 28px #00000080;--art-shadow:0 10px 28px #00000073;--art-edge:#ffffff1f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);margin:0}body{color:var(--label);font:400 17px/1.29 var(--font);letter-spacing:-.022em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}button,input{font:inherit;color:inherit;letter-spacing:inherit}button{cursor:pointer}button:disabled{cursor:default}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.app{min-height:100dvh}.page{max-width:760px;padding:0 max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));margin:0 auto}.icon-button{width:44px;height:44px;color:inherit;background:0 0;border:none;border-radius:50%;flex-shrink:0;place-items:center;padding:0;display:inline-grid}.nav-button{min-height:44px;color:var(--tint);font:400 17px/1 var(--font);background:0 0;border:none;padding:0 12px}.nav-button.strong{font-weight:600}.text-button{color:var(--tint);font:inherit;background:0 0;border:none;align-items:center;gap:6px;padding:0;display:inline-flex}.button{min-height:44px;font:600 15px/1.2 var(--font);letter-spacing:-.016em;white-space:nowrap;border:none;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;gap:6px;padding:0 16px;display:inline-flex}.button.filled{background:var(--tint);color:var(--on-tint)}.button.gray{background:var(--fill);color:var(--tint)}.button.plain{color:var(--tint);background:0 0;font-weight:400}.button.large{letter-spacing:-.022em;border-radius:12px;width:100%;min-height:50px;font-size:17px}.icon-button,.nav-button,.text-button,.button,.action,.add,.delete-toggle,.delete{transition:opacity .25s}.icon-button:not(:disabled):active,.nav-button:active,.text-button:active,.button:active,.action:not(:disabled):active,.add:active,.delete-toggle:active,.delete:active{opacity:.5;transition:none}@media (hover:hover){.icon-button:not(:disabled):hover{background:var(--hover)}}.glyph-circle path{stroke:#fff}.navbar{z-index:10;padding-top:env(safe-area-inset-top);background:var(--bar);box-shadow:inset 0 -.5px 0 var(--separator);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);position:sticky;top:0}.navbar-inner{max-width:760px;height:44px;padding:0 max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));grid-template-columns:1fr auto 1fr;align-items:center;margin:0 auto;display:grid}.nav-side{align-items:center;min-width:0;display:flex}.nav-side.end{justify-content:flex-end}.navbar .icon-button{color:var(--tint)}.nav-title{font:600 17px/1.2 var(--font);white-space:nowrap;text-overflow:ellipsis;opacity:0;margin:0;overflow:hidden}@supports (animation-timeline:scroll()){.navbar{animation:linear both bar-frost;animation-timeline:scroll(root);animation-range:0 24px}@keyframes bar-frost{0%{background:0 0;box-shadow:inset 0 -.5px #0000}to{background:var(--bar);box-shadow:inset 0 -.5px 0 var(--separator)}}}@supports (animation-timeline:view()) and (timeline-scope:--title){.app{timeline-scope:--title}.hero h1{view-timeline:--title block;view-timeline-inset:calc(44px + env(safe-area-inset-top)) 0px}.nav-title{animation:linear both title-in;animation-timeline:--title;animation-range:exit}@keyframes title-in{0%{opacity:0}to{opacity:1}}}.hero{text-align:center;flex-direction:column;align-items:center;padding:8px 0 24px;display:flex}.artwork{aspect-ratio:1;box-shadow:var(--art-shadow);border-radius:10px;flex-shrink:0;grid-template:minmax(0,1fr)/minmax(0,1fr);display:grid;position:relative;overflow:hidden;container-type:inline-size}.hero .artwork{width:min(62vw,240px);height:min(62vw,240px)}.artwork.tiles-4{grid-template:repeat(2,minmax(0,1fr))/repeat(2,minmax(0,1fr))}.tile.fill{min-width:0;min-height:0;font-size:24cqi}.tiles-1 .tile.fill{font-size:46cqi}.art-empty{background:var(--art-empty);color:var(--art-empty-glyph);place-items:center;display:grid}.art-empty svg{stroke-width:1.3px;width:36cqi;height:36cqi}.tile{background:var(--piece);color:var(--ink);font-family:var(--rounded);letter-spacing:0;-webkit-user-select:none;user-select:none;flex-shrink:0;place-items:center;font-weight:700;line-height:1;display:inline-grid;position:relative;overflow:hidden}@supports (background:color-mix(in srgb, red, blue)){.tile:not(.icon){background:linear-gradient(160deg, color-mix(in srgb, var(--piece), #fff 30%), var(--piece) 55%, color-mix(in srgb, var(--piece), #000 6%))}}.tile.icon{background:var(--plate,#fff)}.tile.icon img{object-fit:contain;margin:auto;display:block;position:absolute;inset:0}.tile:not(.fill):after,.artwork:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 .5px var(--art-edge);pointer-events:none;position:absolute;inset:0}.hero-text{width:100%;margin-top:20px}.hero h1{font:700 24px/1.2 var(--font);letter-spacing:.01em;margin:0}.hero h1 .rename{width:40px;height:40px;color:var(--tint);vertical-align:middle;margin:-8px -8px -8px 2px}.name-field{background:var(--fill-2);width:100%;color:var(--label);font:inherit;letter-spacing:inherit;text-align:inherit;border:none;border-radius:10px;outline:none;margin:0;padding:4px 10px}.name-field:focus-visible{box-shadow:0 0 0 2px var(--tint)}.meta{color:var(--label-2);font:600 12px/1.35 var(--font);letter-spacing:.02em;text-transform:uppercase;margin:8px 0 0}.hero-actions{grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;display:grid}.action{background:var(--fill);height:48px;color:var(--tint);font:600 17px/1 var(--font);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:0 12px;transition:opacity .25s,background-color .2s,color .2s;display:inline-flex}.action[aria-pressed=true]{background:var(--tint);color:var(--on-tint)}.action:disabled{color:var(--label-2)}@media (width>=700px){.hero{text-align:left;flex-direction:row;align-items:flex-end;gap:32px;padding:24px 0 28px}.hero .artwork{width:232px;height:232px}.hero-text{margin-top:0;padding-bottom:2px}.hero h1{font-size:34px;line-height:1.12}.hero-actions{grid-template-columns:repeat(2,160px);margin-top:22px}}.rows{margin:0 -8px;padding:0;list-style:none}.row{border-radius:10px;align-items:center;display:flex;position:relative}.row:after{content:"";background:var(--separator);transform-origin:bottom;height:1px;position:absolute;bottom:0;left:68px;right:8px;transform:scaleY(.5)}.row:last-child:after{display:none}@media (hover:hover){.rows:not(.editing) .row:hover{background:var(--hover)}.rows:not(.editing) .row:hover:after{opacity:0}.rows:not(.editing) .row:has(+.row:hover):after{opacity:0}}.row:has(.row-main:active){background:var(--pressed)}.row-main{border-radius:inherit;min-width:0;min-height:64px;color:inherit;text-align:left;background:0 0;border:none;flex:1;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 4px 8px 8px;display:grid}.row-art{display:grid;position:relative}.row.current .tile{color:#0000}.now{color:#fff;background:#00000073;border-radius:6px;place-items:center;display:grid;position:absolute;inset:0}.title{flex-direction:column;min-width:0;display:flex}.name,.by{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.name{font:400 17px/1.29 var(--font)}.by{color:var(--label-2);font:400 14px/1.35 var(--font);letter-spacing:-.01em}.row.current .name{color:var(--tint);font-weight:600}.done-mark{color:var(--green);align-items:center;gap:8px;display:inline-flex}.score{max-width:8em;color:var(--label-2);font:400 15px/1.2 var(--font);letter-spacing:-.016em;font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.row.skipped .tile{opacity:.35}.row.skipped .name{color:var(--label-2)}.list-foot{color:var(--label-2);font:400 15px/1.3 var(--font);letter-spacing:-.016em;margin:14px 0 0}.row-menu{flex-shrink:0;position:relative}.menu{z-index:5;background:var(--menu);-webkit-backdrop-filter:saturate(180%)blur(40px);backdrop-filter:saturate(180%)blur(40px);width:240px;box-shadow:0 10px 38px #0003, 0 0 0 .5px var(--float-edge);transform-origin:100% 0;animation:pop .25s var(--ease);border-radius:13px;position:absolute;top:calc(100% - 4px);right:4px;overflow:hidden}.menu.up{transform-origin:100% 100%;top:auto;bottom:calc(100% - 4px)}.menu button{width:100%;min-height:44px;color:var(--label);font:400 17px/1.29 var(--font);text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;display:flex;position:relative}.menu button+button:before{content:"";background:var(--separator);transform-origin:top;height:1px;position:absolute;top:0;left:0;right:0;transform:scaleY(.5)}.menu button:hover,.menu button:focus-visible{background:var(--pressed);outline:none}.menu svg{flex-shrink:0}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.rows.editing{position:relative}.edit-row{background:var(--bg);grid-template-columns:44px 44px minmax(0,1fr) auto;align-items:center;column-gap:12px;height:64px;padding-right:4px;transition:transform .2s;display:grid;position:absolute;left:0;right:0}.edit-row:after{left:112px}.edit-row.dragging{z-index:2;background:var(--raised);transition:none;box-shadow:0 10px 30px #0003}.edit-row.dragging:after{display:none}.delete-toggle{width:44px;height:44px;color:var(--red);background:0 0;border:none;border-radius:50%;place-items:center;padding:0;display:grid}.delete-toggle svg{transition:transform .2s var(--ease)}.confirming .delete-toggle svg{transform:rotate(-90deg)}.delete{background:var(--red);color:#fff;min-height:44px;font:400 17px/1 var(--font);border:none;border-radius:10px;padding:0 18px}.grip{width:44px;height:44px;color:var(--label-3);touch-action:none;cursor:grab;background:0 0;border:none;border-radius:10px;place-items:center;padding:0;display:grid}.dragging .grip{cursor:grabbing}.finder{margin-top:40px}.finder.prominent{margin-top:4px}.section-title{font:700 22px/1.27 var(--font);letter-spacing:.01em;margin:0 0 12px}.finder-sub{color:var(--label-2);font:400 15px/1.35 var(--font);letter-spacing:-.016em;margin:-6px 0 14px}.search{background:var(--fill-2);height:40px;color:var(--label-2);border-radius:10px;align-items:center;gap:6px;padding:0 4px 0 10px;display:flex}.search:focus-within{box-shadow:0 0 0 2px var(--tint)}.search input{min-width:0;height:100%;color:var(--label);font:400 17px/1 var(--font);background:0 0;border:none;outline:none;flex:1;padding:0}.search input::placeholder{color:var(--label-2)}.search input::-webkit-search-cancel-button{display:none}.clear{width:32px;height:32px;color:var(--label-3);background:0 0;border:none;place-items:center;padding:0;display:grid}.results{margin:6px -8px 0;padding:0;list-style:none}.result{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-height:60px;padding:6px 0 6px 8px;display:grid;position:relative}.result:after{content:"";background:var(--separator);transform-origin:bottom;height:1px;position:absolute;bottom:0;left:64px;right:8px;transform:scaleY(.5)}.result:last-child:after{display:none}.add,.added{place-items:center;width:44px;height:44px;display:grid}.add{color:var(--tint);background:0 0;border:none;padding:0}.add .glyph-circle path{stroke:var(--on-tint)}.added{color:var(--label-2)}.list-header{color:var(--label-2);font:400 13px/1.3 var(--font);letter-spacing:-.006em;text-transform:uppercase;margin:24px 0 2px}.nothing{color:var(--label-2);font:400 15px/1.4 var(--font);letter-spacing:-.016em;margin:14px 0 0}.nothing .text-button{display:inline}.by-link{min-height:44px;margin-top:10px}.link-form{margin-top:16px}.fields{background:var(--fill-2);border-radius:10px;overflow:hidden}.fields input{width:100%;height:44px;color:var(--label);font:400 17px/1 var(--font);background:0 0;border:none;outline:none;padding:0 14px;display:block}.fields input+input{border-top:.5px solid var(--separator)}.fields input::placeholder{color:var(--label-2)}.fields input:focus-visible{box-shadow:inset 0 0 0 2px var(--tint)}.fields input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--red)}.error{color:var(--red-text);font:400 13px/1.3 var(--font);letter-spacing:-.006em;margin:8px 0 0}.link-actions{justify-content:flex-end;gap:8px;margin-top:12px;display:flex}.page.with-player{padding-bottom:calc(112px + env(safe-area-inset-bottom))}.player{z-index:10;padding:0 max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));pointer-events:none;position:fixed;bottom:0;left:0;right:0}.player-inner{background:var(--float);max-width:620px;min-height:64px;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow), 0 0 0 .5px var(--float-edge);pointer-events:auto;border-radius:18px;align-items:center;gap:12px;margin:0 auto;padding:10px;display:flex}.np{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.np-line{min-width:0;color:var(--green);align-items:center;gap:5px;display:flex}.np-line svg{flex-shrink:0}.np-name{min-width:0;color:var(--label);font:600 15px/1.3 var(--font);letter-spacing:-.016em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.np-sub{color:var(--label-2);font:400 13px/1.3 var(--font);letter-spacing:-.006em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.np-sub svg{vertical-align:-2px;margin-right:4px}.np-sub b{color:var(--label);font-weight:600}.np-sub .grade{color:var(--label)}.np-star{place-items:center;width:44px;height:44px;display:grid}.player .text-button{min-height:44px;font:400 15px/1 var(--font);letter-spacing:-.016em;flex-shrink:0;padding:0 6px}@media (width<=430px){.player-inner.back>.tile{display:none}.player-inner.back{gap:10px;padding-left:14px}}.sheet-backdrop{z-index:20;background:var(--scrim);place-items:end center;animation:.3s fade;display:grid;position:fixed;inset:0}.sheet{width:100%;max-width:560px;max-height:calc(100dvh - max(20px, env(safe-area-inset-top)) - 20px);overscroll-behavior:contain;background:var(--sheet);color:var(--label);box-shadow:var(--shadow);animation:sheet-up .45s var(--ease);border-radius:14px 14px 0 0;overflow:auto}.sheet-nav{z-index:1;min-height:56px;padding:0 max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));background:var(--sheet);grid-template-columns:1fr auto 1fr;align-items:center;display:grid;position:sticky;top:0}.sheet-nav h2{font:600 17px/1.2 var(--font);text-align:center;margin:0}.sheet-nav-end{justify-self:end}.sheet-body{padding:4px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}@media (width>=600px){.sheet-backdrop{align-items:center}.sheet{max-height:min(760px,90dvh);animation:sheet-in .35s var(--ease);border-radius:14px}}@keyframes fade{0%{opacity:0}}@keyframes sheet-up{0%{transform:translateY(100%)}}@keyframes sheet-in{0%{opacity:0;transform:scale(.95)}}.group{background:var(--cell);border-radius:10px;margin:0 0 24px;padding:0;list-style:none;position:relative;overflow:hidden}.group>li,.group>.cell{font:400 15px/1.45 var(--font);letter-spacing:-.016em;margin:0;padding:11px 16px;position:relative}.group>li+li:after,.group>.cell+.cell:after{content:"";background:var(--separator);transform-origin:top;height:1px;position:absolute;top:0;left:16px;right:0;transform:scaleY(.5)}.group-header{color:var(--label-2);font:400 13px/1.3 var(--font);letter-spacing:-.006em;text-transform:uppercase;margin:0 16px 7px}.group-footer{color:var(--label-2);font:400 13px/1.45 var(--font);letter-spacing:-.006em;margin:-16px 16px 24px}.sheet-intro{text-align:center;flex-direction:column;align-items:center;margin:0 0 20px;display:flex}.sheet-intro .artwork{border-radius:8px;width:128px;height:128px}.sheet-intro h3{font:700 22px/1.25 var(--font);letter-spacing:.01em;margin:16px 0 0}.sheet-sub{color:var(--label-2);font:400 15px/1.35 var(--font);letter-spacing:-.016em;margin:4px 0 0}.group.sheet-list>li{align-items:center;gap:12px;padding:8px 16px;display:flex}.group.sheet-list>li+li:after{left:64px}.sheet-actions{gap:10px;display:grid}.setting-row{letter-spacing:-.022em;cursor:pointer;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding-top:6px;padding-bottom:6px;font-size:17px;display:flex}.setting-note{color:var(--label-2);white-space:nowrap}.switch{background:var(--fill);border:none;border-radius:999px;flex-shrink:0;width:51px;height:31px;padding:0;transition:background-color .2s;position:relative}.switch:after{content:"";width:27px;height:27px;transition:transform .25s var(--ease);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 3px 8px #00000026,0 1px 1px #00000029}.switch[aria-checked=true]{background:var(--green)}.switch[aria-checked=true]:after{transform:translate(20px)}.segmented{background:var(--fill-2);border-radius:9px;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding:2px;display:grid}.segmented button{min-height:34px;color:var(--label);font:500 14px/1 var(--font);letter-spacing:-.01em;background:0 0;border:none;border-radius:7px;padding:0 8px}.segmented button[aria-checked=true]{background:var(--segment);font-weight:600;box-shadow:0 3px 8px #0000001f,0 3px 1px #0000000a}.bookmarklet-setup{line-height:2.1}kbd{background:var(--fill-2);min-width:1.7em;box-shadow:inset 0 -1px 0 var(--separator);color:var(--label);font:500 12px/1.7 var(--font);letter-spacing:0;text-align:center;border-radius:5px;margin:0 1px;padding:0 5px;display:inline-block}.bookmarklet{background:var(--tint);color:var(--on-tint);font:600 15px/1.2 var(--font);vertical-align:middle;cursor:grab;border-radius:999px;align-items:center;gap:5px;padding:6px 13px 6px 10px;text-decoration:none;display:inline-flex}.toast{left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:30;background:var(--float);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow), 0 0 0 .5px var(--float-edge);color:var(--label);font:600 15px/1.2 var(--font);letter-spacing:-.016em;white-space:nowrap;animation:toast-in .35s var(--ease);border-radius:999px;margin:0;padding:12px 20px;position:fixed;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)scale(.96)}}@media (prefers-reduced-motion:reduce){.sheet,.sheet-backdrop,.menu,.toast{animation:none}*,:before,:after{transition:none!important}}@media (prefers-reduced-transparency:reduce){.navbar{background:var(--bg)!important}.player-inner,.toast{background:var(--float-solid)}.menu{background:var(--menu-solid)}.navbar,.player-inner,.toast,.menu{-webkit-backdrop-filter:none;backdrop-filter:none}}
