:root{--glow:#3d82ff;--glow-ray:#5594ff;--on-glow:var(--ink);--pop-1:#ff7652;--pop-1-ink:#c2401c;--pop-2:#ffd04d;--pop-2-ink:#8a5d00;--pop-3:#ff8fb1;--pop-3-ink:#c42a5e;--deep:#0c2366;--shelf:#fff;--on-shelf:var(--glow);--ink:#0b1640;--paper:#fffaf0;--line:3px solid var(--ink);--font-ui:"Chiron GoRound TC", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;--font-groove:"Shrikhand", "Cooper Black", Georgia, serif;--gutter:clamp(16px, 4vw, 48px);--bounce:cubic-bezier(.3, 1.6, .5, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--glow);color:var(--on-glow);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;margin:0;font-size:17px;font-weight:500;line-height:1.7}.lede,.card,.howto{color:var(--ink)}img{max-width:100%;display:block}a{color:inherit}:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.button{border:var(--line);background:var(--pop-2);min-width:9em;box-shadow:5px 5px 0 var(--ink);color:var(--ink);font:inherit;letter-spacing:.08em;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:12px 30px;font-size:19px;font-weight:900;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-flex}.button:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}.button:active{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.hero{isolation:isolate;--tide-h:clamp(72px, 8vw, 112px);padding:clamp(56px, 7vw, 84px) var(--gutter) calc(var(--tide-h) + clamp(8px, 1.5vw, 20px));background:var(--glow);text-align:center;flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.hero-nav{top:max(14px, env(safe-area-inset-top));right:max(var(--gutter), env(safe-area-inset-right));z-index:1;gap:10px;display:flex;position:absolute}.rays{z-index:-1;width:300vmax;height:300vmax;fill:var(--glow-ray);pointer-events:none;position:absolute;top:31%;left:50%;transform:translate(-50%,-50%)}.hero-mark{font-size:clamp(72px,14vw,170px);position:relative}.wordmark{font-family:var(--font-groove);color:var(--paper);margin:0;font-size:1em;font-weight:400;line-height:1.05}.wordmark-letter{--r:-5deg;--y:-.03em;-webkit-text-stroke:.028em var(--ink);paint-order:stroke fill;text-shadow:.04em .04em 0 var(--pop-2), .08em .08em 0 var(--pop-1), .12em .12em 0 var(--pop-3), .16em .16em 0 var(--ink);transform:translateY(var(--y)) rotate(var(--r));animation:drop .7s var(--bounce) both;animation-delay:calc(var(--i) * 70ms);display:inline-block}.wordmark-letter:nth-child(2n){--r:4deg;--y:.05em}.wordmark-letter:nth-child(3n){--r:-2deg;--y:-.08em}@keyframes drop{0%{opacity:0;transform:translateY(-.5em) rotate(calc(var(--r) * -3))}to{opacity:1;transform:translateY(var(--y)) rotate(var(--r))}}.burst{--star:polygon(50% 0%, 56.4% 9.5%, 65.5% 2.4%, 68.6% 13.5%, 79.4% 9.5%, 79% 21%, 90.5% 20.6%, 86.5% 31.4%, 97.6% 34.5%, 90.5% 43.6%, 100% 50%, 90.5% 56.4%, 97.6% 65.5%, 86.5% 68.6%, 90.5% 79.4%, 79% 79%, 79.4% 90.5%, 68.6% 86.5%, 65.5% 97.6%, 56.4% 90.5%, 50% 100%, 43.6% 90.5%, 34.5% 97.6%, 31.4% 86.5%, 20.6% 90.5%, 21% 79%, 9.5% 79.4%, 13.5% 68.6%, 2.4% 65.5%, 9.5% 56.4%, 0% 50%, 9.5% 43.6%, 2.4% 34.5%, 13.5% 31.4%, 9.5% 20.6%, 21% 21%, 20.6% 9.5%, 31.4% 13.5%, 34.5% 2.4%, 43.6% 9.5%);isolation:isolate;aspect-ratio:1;width:max(70px,.6em);color:var(--paper);animation:pop .5s var(--bounce) .55s both;place-content:center;margin:0;font-weight:900;line-height:1.25;display:grid;position:absolute;top:-.42em;right:-.22em;transform:rotate(14deg)}.burst span{font-size:max(12px,.078em)}.burst:before,.burst:after{content:"";z-index:-1;clip-path:var(--star);position:absolute;inset:0}.burst:before{background:var(--ink)}.burst:after{background:var(--deep);inset:6%}@keyframes pop{0%{opacity:0;transform:rotate(-40deg)scale(.2)}to{opacity:1;transform:rotate(14deg)scale(1)}}.lede{border:var(--line);background:var(--paper);border-radius:999px;margin:clamp(18px,2.4vw,28px) 0 clamp(18px,2.2vw,24px);padding:8px 24px;font-size:clamp(16px,2vw,20px);font-weight:700;transform:rotate(-1.5deg)}.tides{width:100%;height:var(--tide-h);display:block;position:absolute;bottom:-1px;left:0}.tide-1{fill:color-mix(in oklch, var(--glow), var(--shelf) 32%)}.tide-2{fill:color-mix(in oklch, var(--glow), var(--shelf) 64%)}.tide-3{fill:var(--shelf)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wordmark-letter,.burst{animation:none}.button,.card,.chip{transition:none}}.home{flex-direction:column;min-height:100dvh;display:flex}.shelf-wrap{padding:0 var(--gutter) clamp(64px, 9vw, 112px);background:var(--shelf);flex:1}.shelf-heading{color:var(--on-shelf);letter-spacing:.08em;text-align:center;margin:0;font-size:clamp(26px,3.6vw,38px);font-weight:900}.shelf{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(32px,4.5vw,48px);max-width:1120px;margin:clamp(22px,3vw,34px) auto 0;padding:0;list-style:none;display:grid}.card{--accent:var(--pop-1);--accent-ink:var(--pop-1-ink);--tilt:-2deg;border:var(--line);background:var(--paper);box-shadow:9px 9px 0 var(--accent);text-align:center;transform:rotate(var(--tilt));transition:transform .25s var(--bounce), box-shadow .25s ease;border-radius:24px;flex-direction:column;align-items:center;gap:10px;padding:16px 16px 26px;display:flex;position:relative}.card:nth-child(3n+2){--accent:var(--pop-2);--accent-ink:var(--pop-2-ink);--tilt:1.5deg}.card:nth-child(3n){--accent:var(--pop-3);--accent-ink:var(--pop-3-ink);--tilt:-1deg}.card:hover{box-shadow:12px 14px 0 var(--accent);transform:translateY(-6px)rotate(0)}.card:has(.card-link:focus-visible){box-shadow:12px 14px 0 var(--accent);transform:translateY(-6px)rotate(0)}.card:has(.card-link:focus-visible){outline:3px solid var(--glow);outline-offset:7px}.screen{aspect-ratio:16/10;border:var(--line);background:var(--ink);border-radius:18px/22px;align-self:stretch;display:block;overflow:hidden}.screen img{object-fit:cover;width:100%;height:100%}.card-title{margin:6px 0 0;font-weight:400;line-height:1.15}.card-link{flex-direction:column;align-items:center;gap:2px;text-decoration:none;display:flex}.card-link:focus-visible{outline:none}.card-link:after{content:"";z-index:1;border-radius:24px;position:absolute;inset:0}.title-main{font-size:30px}.title-sub{color:var(--accent-ink,var(--deep));font-size:22px}.title-han{letter-spacing:.04em;font-weight:900}.title-sub .title-han{letter-spacing:.12em;font-size:.8em}.title-latin{font-family:var(--font-groove);font-weight:400}.card-tagline{text-wrap:pretty;max-width:18em;margin:0}.card-facts{flex-wrap:wrap;justify-content:center;gap:6px;margin:4px 0 12px;font-size:14px;display:flex}.card-facts div{border:2px solid var(--ink);border-radius:999px;gap:6px;padding:1px 12px;display:flex}.card-facts dt{font-weight:900}.card-facts dd{margin:0}.button-small{background:var(--accent);min-width:8em;box-shadow:4px 4px 0 var(--ink);margin-top:auto;padding:7px 22px;font-size:16px}.card:hover .button-small{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.site-footer{background:var(--shelf);color:var(--ink);text-align:center;font-size:14px}.footer-nav{padding:28px var(--gutter) 6px;border-top:2.5px dashed var(--ink);flex-wrap:wrap;justify-content:center;gap:4px 22px;font-weight:700;display:flex}.footer-nav a{text-decoration:none}.footer-nav a:hover{text-underline-offset:4px;text-decoration:underline;text-decoration-thickness:2px}.site-footer p{padding:0 var(--gutter) 28px;margin:0}.site-footer:after{content:"";background:linear-gradient(var(--pop-1) 0 33.4%, var(--pop-2) 33.4% 66.7%, var(--pop-3) 66.7%);height:18px;display:block}.player{background:var(--deep);grid-template-rows:auto 1fr;height:100dvh;display:grid}.player-bar,.site-bar{z-index:1;min-height:58px;padding:8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));border-bottom:var(--line);background:var(--glow);box-shadow:0 6px 0 var(--pop-1), 0 12px 0 var(--pop-2), 0 18px 0 var(--pop-3);align-items:center;gap:8px 18px;display:flex;position:relative}.player-home{font-family:var(--font-groove);font-size:26px;line-height:1;text-decoration:none}.player-title{white-space:nowrap;align-items:baseline;gap:10px;min-width:0;margin:0;font-weight:400;line-height:1.2;display:flex}.player-title .title-main{font-size:21px}.player-title .title-sub{font-size:17px}.player-actions{gap:10px;margin-left:auto;display:flex}.chip{border:2.5px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);color:var(--ink);font:inherit;white-space:nowrap;cursor:pointer;border-radius:999px;align-items:center;padding:3px 14px;font-size:15px;font-weight:700;line-height:1.6;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.chip:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}.chip[aria-expanded=true]{background:var(--pop-2);box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.player-stage{border:var(--line);background:var(--game-ground,var(--paper));min-height:0;box-shadow:8px 8px 0 var(--glow);border-radius:20px;margin:34px 26px 26px 18px;position:relative;overflow:hidden}.player-stage iframe{background:var(--game-ground,var(--paper));border:0;width:100%;height:100%;position:absolute;inset:0}.howto{border:var(--line);background:var(--paper);width:min(400px,100% - 36px);max-height:calc(100% - 36px);box-shadow:7px 7px 0 var(--ink);border-radius:20px;padding:22px 24px;font-size:15px;position:absolute;top:14px;right:14px;overflow:auto}.howto p{margin:0 0 10px}.controls{border-top:2.5px dashed var(--ink);gap:6px;margin:16px 0 22px;padding-top:14px;display:grid}.controls div{grid-template-columns:minmax(6.5em,auto) 1fr;gap:12px;display:grid}.controls dt{color:var(--deep);font-weight:900}.controls dd{margin:0}@media (width<=640px){.burst{top:-.62em}.site-nav-link,.chip-newtab{display:none}.hero{padding-top:96px}.player-title{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.player-bar{gap:8px 12px}.player-home{font-size:21px}.chip{box-shadow:2px 2px 0 var(--ink);padding:2px 10px}.player-stage{box-shadow:none;border:0;border-radius:0;margin:18px 0 0}}.notes-section{max-width:1120px;margin:clamp(72px,9vw,112px) auto 0}.notes-intro{max-width:30em;color:var(--ink);text-align:center;text-wrap:pretty;margin:8px auto 0}.notes-more{--accent:var(--pop-2);text-align:center;margin:36px 0 0}.note-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:22px;margin:28px 0 0;padding:0;list-style:none;display:grid}.note{--accent:var(--pop-1);border:var(--line);background:var(--paper);box-shadow:inset 10px 0 0 var(--accent);color:var(--ink);border-radius:18px;flex-direction:column;gap:6px;padding:18px 20px 16px 26px;transition:transform .15s,box-shadow .15s;display:flex;position:relative}.note:nth-child(3n+2){--accent:var(--pop-2)}.note:nth-child(3n){--accent:var(--pop-3)}.note:hover{box-shadow:inset 10px 0 0 var(--accent), 5px 5px 0 var(--ink);transform:translate(-2px,-2px)}.note:has(.note-link:focus-visible){box-shadow:inset 10px 0 0 var(--accent), 5px 5px 0 var(--ink);transform:translate(-2px,-2px)}.note:has(.note-link:focus-visible){outline:3px solid var(--glow);outline-offset:5px}.note-title{text-wrap:pretty;margin:0;font-size:19px;font-weight:900;line-height:1.4}.note-link{text-decoration:none}.note-link:focus-visible{outline:none}.note-link:after{content:"";border-radius:18px;position:absolute;inset:0}.note-description{margin:0;font-size:15px;line-height:1.65}.note-date{color:var(--deep);margin:auto 0 0;font-size:13px;font-weight:700}.page{background:var(--shelf);min-height:100dvh;color:var(--ink);flex-direction:column;display:flex}.site-nav{gap:18px;margin-left:auto;font-weight:700;display:flex}.site-nav-link{text-decoration:none}.site-nav-link:hover,.site-nav-link[aria-current=page]{text-underline-offset:6px;text-decoration:underline;text-decoration-thickness:3px}@media (width<=640px){.site-bar .chip{margin-left:auto}}.page-body{width:100%;max-width:calc(720px + 2 * var(--gutter));padding:clamp(56px, 7vw, 88px) var(--gutter) clamp(64px, 9vw, 112px);flex:1;margin:0 auto}.page-head{margin-bottom:36px}.page-title{letter-spacing:.02em;text-wrap:pretty;margin:0;font-size:clamp(30px,4.6vw,44px);font-weight:900;line-height:1.3}.page-lede{margin:14px 0 10px;font-size:19px;line-height:1.7}.prose{font-size:17px;line-height:1.9}.prose>:first-child{margin-top:0}.prose h2{color:var(--on-shelf);margin:2.2em 0 .6em;font-size:26px;font-weight:900;line-height:1.4}.prose h3{margin:1.8em 0 .4em;font-size:20px;font-weight:900;line-height:1.5}.prose p,.prose ul,.prose ol,.prose pre,.prose blockquote,.prose table{margin:0 0 1.1em}.prose ul,.prose ol{padding-left:1.4em}.prose li+li{margin-top:.3em}.prose strong{font-weight:900}.prose a{color:var(--deep);-webkit-text-decoration-color:var(--pop-1);text-decoration-color:var(--pop-1);text-underline-offset:4px;text-decoration-thickness:2px}.prose a:hover{-webkit-text-decoration-color:var(--deep);text-decoration-color:var(--deep)}.prose code{background:color-mix(in oklch, var(--glow) 12%, white);border-radius:6px;padding:.1em .35em;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.88em}.prose pre{border:var(--line);background:var(--deep);box-shadow:6px 6px 0 var(--pop-2);color:var(--paper);border-radius:16px;padding:18px 20px;font-size:14px;line-height:1.65;overflow-x:auto}.prose pre code{font-size:inherit;background:0 0;padding:0}.prose blockquote{border-left:6px solid var(--pop-2);padding:2px 0 2px 18px}.prose table{border-collapse:collapse;width:100%;font-size:15px}.prose th,.prose td{border:2px solid var(--ink);text-align:left;vertical-align:top;padding:8px 12px}.prose th{background:color-mix(in oklch, var(--pop-2) 40%, white);font-weight:900}.prose hr{border:0;border-top:2.5px dashed var(--ink);margin:2.4em 0}.article-games{gap:22px;margin-top:56px;display:grid}.article-game{--accent:var(--pop-1);--accent-ink:var(--pop-1-ink);border:var(--line);background:var(--paper);box-shadow:8px 8px 0 var(--accent);transition:transform .2s var(--bounce);border-radius:22px;justify-items:start;gap:8px;padding:20px 24px 24px;text-decoration:none;display:grid}.article-game:nth-child(2){--accent:var(--pop-3);--accent-ink:var(--pop-3-ink)}.article-game:nth-child(3){--accent:var(--pop-2);--accent-ink:var(--pop-2-ink)}.article-game:hover{transform:translateY(-4px)}.article-game-title{flex-wrap:wrap;align-items:baseline;gap:4px 12px;line-height:1.2;display:flex}.article-game-title .title-main{font-size:26px}.article-game-title .title-sub{font-size:19px}.article-game-tagline{margin-bottom:6px;font-size:15px}.more-notes{margin-top:72px}.about-heading{color:var(--on-shelf);margin:0;font-size:26px;font-weight:900;line-height:1.4}.about{padding:clamp(56px, 7vw, 88px) var(--gutter) clamp(48px, 7vw, 80px);background:var(--shelf);color:var(--ink)}.about-section{max-width:720px;margin:0 auto}.about-section+.about-section{margin-top:64px}.about-tagline{margin:8px 0 16px;font-size:19px;font-weight:700}.about-section>p{margin:0 0 10px}@media (prefers-reduced-motion:reduce){.note,.article-game{transition:none}.note:hover,.article-game:hover{transform:none}}.notice{max-width:32em;min-height:100dvh;padding:32px var(--gutter);text-align:center;place-content:center;justify-items:center;gap:10px;margin:0 auto;display:grid}.notice h1{margin:0;font-size:34px;font-weight:900;line-height:1.3}.notice p{margin:0 0 24px}
