:root{--paper:#fcf6e8;--paper-2:#f4e8cc;--ink:#2d3527;--ink-soft:#5f6653;--moss:#5f8a3a;--vermilion:#d9603a;--vermilion-deep:#a8452a;--sky:#3b7fc4;--gold:#d99a2b;--line:#2d352729;--display:"Shippori Mincho B1", "Hiragino Mincho ProN", Georgia, serif;--body:"Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;--gutter:clamp(16px, 3vw, 32px)}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background:#cfe6ef;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--vermilion);outline-offset:3px}#scene{touch-action:pan-y;width:100%;height:100%;display:block;position:fixed;inset:0}.veil{pointer-events:none;background:radial-gradient(at 50% 45%,#0000 55%,#283c4638 100%);position:fixed;inset:0}.veil:after{content:"";opacity:.13;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}body[data-time=night]{background:#1d2f5e}body[data-time=night] .veil{background:radial-gradient(at 50% 45%,#0000 50%,#050a1e73 100%)}body[data-time=night] .veil:after{opacity:.09;mix-blend-mode:soft-light}body[data-time=night] .intro{background:linear-gradient(#0b1433 0%,#3d5283 100%)}body[data-time=night] .intro-kicker{color:#fcf6e899}body[data-time=night] .brand{color:var(--paper)}body[data-time=night] .brand strong,body[data-time=night] .brand em{text-shadow:0 1px 14px #050a1eb3}body[data-time=night] .brand em{color:#fcf6e8bf}body[data-time=night] .brand-mark{stroke:none;filter:drop-shadow(0 0 10px #fff0c873)}body[data-time=night] .hint{color:#fcf6e8cc}body[data-time=night] .card{box-shadow:inset 0 1px #fffc,0 0 50px -10px #ffd68c59,0 30px 60px -28px #000000b3}.intro{z-index:20;text-align:center;pointer-events:none;background:linear-gradient(#8ec5e8 0%,#e9f0e2 100%);place-content:center;transition:opacity 1.2s .9s,visibility 0s linear 2.1s;display:grid;position:fixed;inset:0}.intro p{margin:0}.intro-kicker{font-family:var(--body);letter-spacing:.3em;text-transform:uppercase;color:#2d352799;font-size:13px;animation:.9s both rise}.intro-title{font-family:var(--display);color:var(--paper);text-shadow:0 2px 30px #285a8c59;font-size:clamp(44px,8vw,96px);font-weight:800;animation:1s .25s both rise}body.ready .intro{opacity:0;visibility:hidden}.top{z-index:5;padding:var(--gutter);padding-top:max(var(--gutter), env(safe-area-inset-top));pointer-events:none;justify-content:space-between;align-items:flex-start;gap:16px;display:flex;position:fixed;top:0;left:0;right:0}.top>*{pointer-events:auto}.brand{color:var(--ink);align-items:center;gap:12px;text-decoration:none;display:flex}.brand-mark{width:44px;height:30px;fill:var(--paper);stroke:var(--ink);stroke-width:2px;filter:drop-shadow(0 2px 8px #1e466e40);flex:none}.brand strong{font-family:var(--display);letter-spacing:.01em;text-shadow:0 0 18px #ffffffb3;font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.1;display:block}.brand em{color:var(--ink-soft);text-shadow:0 0 12px #fffc;margin-top:3px;font-size:13px;font-style:normal;display:block}.top-right{align-items:center;gap:8px;display:flex}.sound{border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#fcf6e8e0;border-radius:50%;place-items:center;width:40px;height:40px;padding:0;transition:transform .2s;display:grid;box-shadow:0 8px 24px -12px #28321e73}.sound:hover{transform:translateY(-1px)}.eq{align-items:flex-end;gap:2.5px;height:14px;display:flex}.eq i{background:var(--ink-soft);opacity:.45;border-radius:2px;width:3px;height:4px;transition:height .3s,opacity .3s,background .3s}.sound[aria-pressed=true] .eq i{opacity:1;background:var(--moss);animation:1.2s ease-in-out infinite eq}.sound[aria-pressed=true] .eq i:nth-child(2){background:var(--gold);animation-delay:-.4s}.sound[aria-pressed=true] .eq i:nth-child(3){background:var(--vermilion);animation-delay:-.8s}.sound[aria-pressed=true] .eq i:nth-child(4){animation-delay:-.2s}@keyframes eq{0%,to{height:4px}50%{height:14px}}.filters{z-index:5;top:calc(var(--gutter) + 4px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);background:#fcf6e8b8;border-radius:999px;align-items:center;gap:4px;padding:5px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 8px 24px -14px #28321e80}.filters-label{color:var(--ink-soft);white-space:nowrap;padding:0 8px 0 10px;font-size:12px}.filters button{color:var(--ink-soft);white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:500;transition:background .2s,color .2s}.filters button:hover{color:var(--ink);background:#2d35270f}.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.card{z-index:6;left:var(--gutter);bottom:var(--gutter);width:min(450px, calc(100vw - 2 * var(--gutter)));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;background:linear-gradient(170deg,#fcf6e8f2,#f4e8ccf2);border-radius:22px;padding:26px 28px 24px;transition:opacity .8s 1.6s,transform .8s cubic-bezier(.2,.8,.2,1) 1.6s;position:fixed;transform:translateY(24px);box-shadow:inset 0 1px #fffc,0 30px 60px -28px #28321e99,0 6px 18px -8px #28321e40}body.ready .card{opacity:1;transform:none}.card:before{content:"";border:1.5px dashed var(--line);pointer-events:none;border-radius:16px;position:absolute;inset:7px}.view-doing,.card[data-mode=doing] .view-browse{display:none}.card[data-mode=doing] .view-doing{animation:.5s both rise;display:block}.meta{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.count{font-family:var(--display);letter-spacing:.12em;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}.chip{color:#fff;background:var(--sky);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700}.chip[data-kind=short]{background:var(--gold)}.chip[data-kind=long]{background:var(--moss)}.title{font-family:var(--display);letter-spacing:-.005em;text-wrap:balance;margin:0;font-size:clamp(28px,3vw,38px);font-weight:800;line-height:1.12}.blurb{color:var(--ink-soft);text-wrap:pretty;min-height:3.2em;margin:10px 0 20px;font-size:15.5px;line-height:1.6}.card.swap .title,.card.swap .blurb,.card.swap .chip{animation:.45s cubic-bezier(.2,.8,.2,1) both rise}.card.swap .blurb{animation-delay:60ms}.card.swap-quick .title{animation:.18s both flick}.card.spinning .blurb{opacity:.35;transition:opacity .2s}.controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.round{border:1.5px solid var(--line);background:#ffffff8c;border-radius:50%;place-items:center;width:44px;height:44px;transition:transform .15s,background .2s;display:grid}.round svg,.ghost svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.round:hover{background:#fff;transform:translateY(-1px)}.round:active{transform:translateY(1px)}.ghost{border:1.5px solid var(--line);background:0 0;border-radius:999px;align-items:center;gap:7px;height:44px;padding:0 16px;font-size:14px;font-weight:500;transition:background .2s;display:inline-flex}.ghost:hover{background:#fff9}.ghost:hover svg{animation:.6s turn}.primary{background:var(--vermilion);color:#fff;height:46px;box-shadow:0 3px 0 var(--vermilion-deep), 0 10px 20px -10px #a8452acc;border:0;border-radius:999px;margin-left:auto;padding:0 22px;font-size:15px;font-weight:700;transition:transform .12s,box-shadow .12s,background .2s}.primary:hover{box-shadow:0 4px 0 var(--vermilion-deep), 0 14px 24px -10px #a8452acc;background:#e36a43;transform:translateY(-1px)}.primary:active{box-shadow:0 0 0 var(--vermilion-deep);transform:translateY(3px)}.link{color:var(--ink-soft);text-underline-offset:4px;text-decoration:underline;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line);background:0 0;border:0;padding:6px 4px;font-size:14px}.link:hover{color:var(--ink)}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--vermilion);margin-bottom:8px;font-size:12px;font-weight:700;display:inline-block}.tip{color:var(--ink);font-size:16.5px}.away{color:var(--ink-soft);align-items:baseline;gap:10px;margin:-4px 0 20px;font-size:13px;display:flex}.away b{font-family:var(--display);color:var(--ink);font-variant-numeric:tabular-nums;font-size:34px;font-weight:800}.view-doing .primary{margin-left:0}.hint{z-index:4;right:var(--gutter);bottom:calc(var(--gutter) + 4px);color:#fffffff2;text-shadow:0 1px 8px #1e3c5a99;opacity:0;font-size:12.5px;transition:opacity 1s 2.4s;position:fixed}body.ready .hint{opacity:1}kbd{min-width:22px;font:600 11.5px var(--body);text-align:center;color:var(--ink);background:#fcf6e8e6;border-radius:6px;margin:0 2px;padding:1px 6px;display:inline-block;box-shadow:0 2px #2d352740}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}@keyframes flick{0%{opacity:.2;transform:translateY(-6px)}}@keyframes turn{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media (width<=900px){.filters{top:auto;bottom:calc(var(--card-h,300px) + var(--gutter) + 10px);max-width:calc(100vw - 2 * var(--gutter))}.filters-label,.hint{display:none}}@media (width<=640px){.card{left:12px;right:12px;bottom:max(12px, env(safe-area-inset-bottom));width:auto;padding:20px 20px 18px}.title{font-size:26px}.blurb{margin-bottom:16px;font-size:14.5px}.brand em{display:none}.brand-mark{width:34px;height:24px}.filters{justify-content:space-between;max-width:none;left:12px;right:12px;transform:none}.filters button{padding:7px 10px;font-size:12.5px}.ghost{padding:0 14px}}