:root{--ink: #120b24;--acrylic: #231a45;--acrylic-deep: #170f31;--edge: #07040f;--magenta: #ff3d8b;--cyan: #3fe3ff;--jade: #40e0a4;--amber: #ffb347;--ice: #d9e4ff;--text: #e9e3ff;--muted: #9a90c4;--cjk: "Noto Sans TC", "PingFang TC", "Hiragino Sans", sans-serif;--ui: "IBM Plex Sans Condensed", system-ui, sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;font-family:var(--ui);color:var(--text);background:radial-gradient(ellipse 60% 40% at 8% 100%,rgb(255 61 139 / .18),transparent 70%),radial-gradient(ellipse 50% 35% at 95% 0%,rgb(63 227 255 / .12),transparent 70%),var(--ink);background-attachment:fixed}body:before,body:after{content:"";position:fixed;inset:-50% 0 0;pointer-events:none;background-image:repeating-linear-gradient(97deg,transparent 0 31px,rgb(190 210 255 / .05) 31px 32px);background-size:100% 180px;animation:rain .9s linear infinite;z-index:0}body:after{background-image:repeating-linear-gradient(97deg,transparent 0 53px,rgb(190 210 255 / .035) 53px 54px);background-size:100% 260px;animation-duration:1.6s}@keyframes rain{to{transform:translateY(180px)}}body>:not(dialog){position:relative;z-index:1}.wordmark{display:flex;align-items:center;gap:10px;margin:0;font-family:"Bungee",var(--ui);font-weight:400;font-size:1.5rem;letter-spacing:.02em;color:#ffd6e7;text-shadow:0 0 4px var(--magenta),0 0 14px var(--magenta),0 0 32px rgb(255 61 139 / .5)}.kanji{writing-mode:vertical-rl;font-family:var(--cjk);font-weight:900;font-size:.72rem;line-height:1;padding:4px 3px;border:1.5px solid var(--cyan);border-radius:3px;color:#d8fbff;text-shadow:0 0 6px var(--cyan);box-shadow:0 0 10px #3fe3ff66,inset 0 0 8px #3fe3ff4d}button,.button{display:inline-block;font:600 .95rem/1 var(--ui);color:var(--text);text-decoration:none;text-align:center;background:#231a45bf;border:1px solid rgb(154 144 196 / .4);border-radius:6px;padding:9px 14px;white-space:nowrap;cursor:pointer}button:hover:not(:disabled),.button:hover{border-color:var(--cyan);color:#fff}button:disabled{opacity:.4;cursor:default}button.primary{border-color:var(--magenta);box-shadow:0 0 12px #ff3d8b59,inset 0 0 10px #ff3d8b33}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(prefers-reduced-motion:reduce){body:before,body:after{animation:none}}.tile{--tone: var(--ice);--face: color-mix(in oklab, #5a4aa6 calc(var(--z, 0) * 9%), var(--acrylic));position:relative;width:var(--w);height:calc(var(--w) * 1.3);padding:0;display:grid;place-items:center;border-radius:calc(var(--w) * .13);border:1px solid rgb(154 144 196 / .22);background:linear-gradient(155deg,var(--face),var(--acrylic-deep));box-shadow:calc(var(--d) * .5) calc(var(--d) * .5) 0 #1a1133,var(--d) var(--d) 0 var(--edge),calc(var(--d) + 3px) calc(var(--d) + 3px) 6px #00000073;color:color-mix(in oklab,var(--tone) 28%,#3b3163)}.tile[data-tone=magenta]{--tone: var(--magenta)}.tile[data-tone=cyan]{--tone: var(--cyan)}.tile[data-tone=jade]{--tone: var(--jade)}.tile[data-tone=amber]{--tone: var(--amber)}.tile.lit{color:var(--tone);border-color:color-mix(in oklab,var(--tone) 40%,transparent)}.tile.lit .glyph,.tile.lit .sub{text-shadow:0 0 3px var(--tone),0 0 12px var(--tone);color:color-mix(in oklab,var(--tone) 55%,white)}.tile.lit svg{filter:drop-shadow(0 0 2px var(--tone))}.tile.lit .frame{box-shadow:0 0 8px var(--tone),inset 0 0 6px var(--tone)}.glyph{font-family:var(--cjk);font-weight:900;font-size:calc(var(--w) * .6);line-height:1}.tile:has(.sub){grid-template-rows:1fr auto;padding-block:calc(var(--w) * .1)}.tile:has(.sub) .glyph{align-self:end;font-size:calc(var(--w) * .5)}.sub{font-family:var(--cjk);font-weight:900;font-size:calc(var(--w) * .34);line-height:1}.corner{position:absolute;top:7%;left:12%;font:600 calc(var(--w) * .2) / 1 var(--ui)}.tile svg{width:80%;height:80%;fill:none;stroke:currentColor;stroke-width:1.7}.tile svg .core{fill:currentColor;stroke:none}.frame{width:56%;height:66%;border:calc(var(--w) * .05) double currentColor;border-radius:calc(var(--w) * .06)}