:root{color-scheme:light;--paper:#f9edf3;--ink:#352c48;--berry:#ad315e;--muted:#776b7e;--line:#e9d8e2;--green:#307569}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--berry);outline-offset:4px}[hidden]{display:none!important}.topbar{max-width:1200px;margin:auto;padding:32px 44px;display:flex;justify-content:space-between;align-items:center}.brand{font-weight:700;color:var(--ink);text-decoration:none;font-size:18px;display:flex;gap:12px;align-items:center}.brand-mark{display:grid;place-items:center;background:var(--berry);color:white;width:34px;height:34px;border-radius:12px 12px 4px 12px}.edition{font-size:13px;color:var(--muted)}main{max-width:1200px;margin:auto;padding:35px 44px 20px}.home-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:76px;align-items:center}.eyebrow{font-size:14px;color:var(--berry);font-weight:700;margin:0 0 18px}h1{font-size:clamp(38px,4.6vw,60px);line-height:1.25;letter-spacing:-2px;margin:0 0 24px;font-weight:800}.lede{font-size:16px;line-height:1.9;color:var(--muted);margin:0 0 24px}.number-art{position:relative;width:350px;max-width:100%;padding:26px 14px 16px;margin:34px 0 22px;transform:rotate(-3deg)}.paper-note{font-size:12px;color:var(--berry);margin:0 0 12px 8px}.digits{display:flex;gap:12px}.digits span{height:72px;flex:1;display:grid;place-items:center;background:white;border:1px solid var(--line);border-bottom:4px solid #e9d4df;border-radius:12px;font-size:40px;font-weight:700;font-family:Georgia,serif}.guessed{margin-top:12px;transform:translateX(16px)}.guessed span{background:transparent;border:1px dashed #cbb9c9;color:#8a788e}.guessed .matched{background:#d9eee6;color:var(--green);border:2px solid var(--green)}.art-caption{font-size:13px;text-align:right;margin-top:18px;color:var(--muted)}.art-caption strong{color:var(--green)}.collection-note{font-size:13px;margin-top:30px}.collection-note span{display:block;margin-top:8px;color:var(--muted);font-size:12px}.play-panel{background:#fff;border-radius:28px 28px 8px 28px;padding:36px;box-shadow:0 16px 45px #67344d09}.panel-heading h2{font-size:24px;margin:12px 0}.panel-heading p{font-size:14px;color:var(--muted);margin:0 0 28px}.small-heart{color:var(--berry);font-size:32px}.digit-choice{padding:0;border:0;margin:0 0 24px;display:flex;gap:12px}.digit-choice legend{font-size:13px;margin-bottom:12px}.digit-choice label{flex:1;position:relative;cursor:pointer}.digit-choice input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.digit-choice span{display:block;border:1px solid var(--line);border-radius:12px;padding:16px}.digit-choice input:checked+span{border:2px solid var(--berry);background:#fff5f8;padding:15px}.digit-choice input:focus-visible+span{outline:3px solid var(--berry);outline-offset:3px}.digit-choice b{display:block;font-size:20px}.digit-choice small{display:block;font-size:12px;color:var(--muted);margin-top:6px}.primary,.secondary{border:0;border-radius:10px;font-weight:700;min-height:48px;padding:12px 18px}.primary{background:var(--berry);color:white;width:100%}.primary:hover{background:#93244e}.secondary{background:#f1eaf0;color:var(--ink);white-space:nowrap}.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:26px 0 18px}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.join-row{display:flex;gap:10px}input{min-width:0;background:white;border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink)}.join-row input{width:100%;font-size:14px}.text-button{border:0;background:transparent;color:var(--berry);padding:12px 0;font-size:13px}.rules{border-top:1px solid var(--line);margin-top:26px;padding-top:20px;color:var(--muted);font-size:13px;line-height:1.8}.rules summary{cursor:pointer}.rules p:last-child{margin-bottom:0}footer{text-align:center;color:var(--muted);font-size:12px;padding:40px 20px}.game-top{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:36px;font-size:14px}.game-top .secondary{font-size:13px;min-height:40px}.game-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px}.game-main h1{font-size:38px;letter-spacing:-1px}.players{display:flex;gap:12px;margin:24px 0}.player{flex:1;border:1px solid var(--line);border-radius:14px;padding:16px}.player.active{border-color:var(--berry);background:#fff7fa}.player strong{display:block;margin-bottom:8px}.player small{color:var(--muted)}#number-form label{display:block;font-size:14px;margin-bottom:12px}#number{width:100%;text-align:center;font-size:32px;letter-spacing:14px;height:72px;padding-left:24px}.input-tip,.game-rule{font-size:12px;line-height:1.7;color:var(--muted);margin:12px 0 20px}.game-rule{text-align:center;margin-top:24px}.history-panel{background:white;border-radius:20px;padding:28px;align-self:start}.history-heading{display:flex;justify-content:space-between;align-items:center}.history-heading h2{font-size:20px;margin:0}.history-heading span{font-size:12px;color:var(--muted)}.history-note{font-size:13px;color:var(--muted);line-height:1.7}#history{max-height:450px;overflow:auto}.history-row{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}.history-row:last-child{border-bottom:0}.history-row small{font-size:12px;color:var(--muted)}.history-row strong{font-size:22px;letter-spacing:5px;font-variant-numeric:tabular-nums}.result{color:var(--green);font-size:12px;background:#edf7f2;padding:7px;border-radius:6px}.empty{padding:45px 0;text-align:center;color:var(--muted);font-size:14px;line-height:2}.waiting-note{padding:24px;background:#f0e5ef;border-radius:12px;line-height:1.8}.notice{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:90vw;width:max-content;padding:14px 20px;background:var(--ink);color:white;border-radius:12px;font-size:14px;box-shadow:0 6px 24px #352c4826;z-index:5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:760px){.topbar{padding:22px}.edition{font-size:11px}main{padding:18px 22px}.home-layout{grid-template-columns:1fr;gap:26px}.intro h1{font-size:42px}.number-art{width:260px;margin:12px 0;position:absolute;right:8px;top:100px;opacity:.3;z-index:-1}.intro{position:relative}.intro .lede{font-size:14px}.digits span{height:55px;font-size:30px}.collection-note{margin:20px 0 0}.collection-note span{display:inline;margin-left:8px}.play-panel{padding:26px}.game-layout{grid-template-columns:1fr;gap:20px}.game-top{flex-wrap:wrap;margin-bottom:24px;gap:8px}.game-main h1{font-size:32px}.history-panel{padding:22px}.history-row{gap:8px}footer{padding:26px 20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Keep the worked example in normal flow on phones so it never covers the introduction. */
@media(max-width:760px){.intro .number-art{position:relative;top:auto;right:auto;z-index:auto;opacity:1;width:260px;margin:20px 0}.intro .collection-note{margin-top:24px}}