:root{--ink:#292a29;--muted:#72736c;--paper:#fff;--canvas:#f7f7f2;--line:#ddded5;--green:#69c629;--gray:#696d72;--red:#fa2725;--blue:#139cd4;--yellow:#efaf10;--purple:#70218b;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--canvas);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #139cd4;outline-offset:5px}a{color:inherit}button{touch-action:manipulation}.color-stripe{height:5px;flex-shrink:0;background:linear-gradient(to right,var(--green) 0 16.666%,var(--gray) 16.666% 33.333%,var(--red) 33.333% 50%,var(--blue) 50% 66.666%,var(--yellow) 66.666% 83.333%,var(--purple) 83.333% 100%)}
.header{width:min(1240px,100%);padding:28px 40px;display:flex;align-items:center;justify-content:space-between;margin:auto auto 0;gap:24px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none}.brand>span{font-family:Georgia,serif;font-size:37px;letter-spacing:-2px;font-style:italic;font-weight:bold;line-height:.95}.brand small{font:9px Arial,sans-serif;letter-spacing:1.8px;display:block;margin:10px 0 0 3px}.spark{width:33px;height:33px;color:var(--purple);transform:rotate(12deg)}.header-right{display:flex;align-items:center;gap:35px}.help-link,.text-button{border:0;background:none;padding:10px 0;color:#62645d;font-size:13px}.help-link span{margin-left:8px}.logo{width:165px;height:28px;overflow:hidden;position:relative}.logo img{position:absolute;width:176px;height:176px;max-width:none;left:-5.67px;top:-74.85px}
main{width:100%;margin:auto;flex:1;display:flex;align-items:center;justify-content:center;padding:28px 40px 44px}footer{border-top:1px solid var(--line);width:min(1160px,calc(100% - 80px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:20px 0 24px;font-size:11px;color:#77796f;gap:16px}.footer-colors{display:flex;gap:6px}.footer-colors i{width:8px;height:8px;border-radius:2px;background:var(--green)}.footer-colors i:nth-child(2){background:var(--gray)}.footer-colors i:nth-child(3){background:var(--red)}.footer-colors i:nth-child(4){background:var(--blue)}.footer-colors i:nth-child(5){background:var(--yellow)}.footer-colors i:nth-child(6){background:var(--purple)}
.eyebrow{font-size:10px;font-weight:bold;letter-spacing:2px;text-transform:uppercase;margin:0 0 22px;color:#72766b}.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:center;max-width:1160px;width:100%;padding:40px 0 70px}.intro h1{font-size:clamp(42px,4.6vw,64px);font-weight:500;letter-spacing:-3px;line-height:1.08;margin:0 0 24px}.intro h1 em{font-family:Georgia,serif;font-weight:normal;color:var(--purple)}.intro-copy>p:not(.eyebrow){font-size:17px;color:#72736c;line-height:1.65;max-width:340px;margin:0 0 30px}.intro-copy strong{color:var(--ink);font-weight:500}.button{min-height:54px;border:1px solid var(--ink);border-radius:8px;padding:15px 26px;font-weight:600;font-size:15px;display:inline-flex;gap:24px;align-items:center;justify-content:center;transition:background .15s,transform .15s}.button:hover{transform:translateY(-2px)}.primary{background:var(--ink);color:white}.primary:hover{background:#454741}.secondary{color:var(--ink);background:white;border-color:#d3d5cc}.secondary:hover{background:#eeeFE9}.intro-hint{display:block;font-size:11px;color:#85877c;margin-top:17px}.intro-art{position:relative;padding:24px 5px 42px}.deck-shadow{position:absolute;left:20px;right:12px;top:35px;bottom:45px;background:#fff;border:1px solid #cfd0c6;border-radius:7px;transform:rotate(5deg)}.deck-shadow:before{content:'';position:absolute;inset:5px -6px -7px 0;background:#fff;border:1px solid #cfd0c6;border-bottom:9px solid var(--yellow);border-radius:7px;transform:rotate(-9deg)}.sheet{position:relative;background:var(--paper);padding:18px;border:1px solid #bfc2b6;border-radius:6px;box-shadow:0 8px 20px #252c1b08}.sheet-header{display:flex;justify-content:space-between;align-items:center;min-height:43px;margin-bottom:13px}.sheet-wordmark{font-family:Georgia,serif;font-size:26px;font-style:italic;font-weight:bold;letter-spacing:-1px}.sheet-label{font-size:9px;font-weight:bold;letter-spacing:1.7px;color:#818578;display:flex;align-items:center;gap:8px}.sheet-label:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--card-color)}.number-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;padding:6px;background:var(--card-color);border-radius:7px;margin:0;list-style:none}.number-cell{background:white;border-radius:4px;display:flex;align-items:center;justify-content:center;aspect-ratio:1.02;min-width:0;color:#535151}.digits{display:inline-flex;align-items:center;justify-content:center;height:43px}.digit{height:100%;width:auto;aspect-ratio:20/28;display:block}.intro-art .digits{height:31px}.intro-art .number-grid{gap:5px;padding:5px}.intro-art .sheet{transform:rotate(-2deg)}.deck-caption{font-size:11px;text-align:center;color:#7b7e72;position:absolute;bottom:0;left:0;right:0;letter-spacing:.4px}
.game{width:100%;max-width:800px;animation:arrive .25s ease-out}.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.progress{display:flex;gap:9px;align-items:center}.progress-dot{height:9px;width:26px;border-radius:3px;background:#e1e3da;position:relative}.progress-dot.complete{background:var(--dot-color)}.progress-dot.current{background:var(--dot-color)}.progress-dot.current:after{content:'';position:absolute;inset:-4px;border:1px solid var(--dot-color);border-radius:6px}.progress-label{font-size:12px;color:#6e7266;margin-left:10px}.game h1{font-size:30px;font-weight:500;letter-spacing:-.8px;text-align:center;margin:0 0 8px}.game-description{text-align:center;color:#7b7f71;font-size:13px;margin:0 0 25px}.game .sheet{padding:16px 18px 18px}.game .sheet-header{min-height:26px;margin-bottom:12px}.game .sheet-wordmark{font-size:23px}.game .number-cell{aspect-ratio:1.18}.actions{display:flex;gap:12px;justify-content:center;margin:24px 0 0}.actions .button{width:220px}.answer-icon{font-size:20px;font-weight:400}.game-bottom{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;margin-top:15px;min-height:36px}.game-bottom .text-button{justify-self:start}.keyboard-note{font-size:10px;color:#898d81;text-align:center;grid-column:2}kbd{font:10px Arial,sans-serif;background:#eeefe7;border:1px solid #d7dacd;border-bottom-width:2px;padding:2px 5px;border-radius:3px}.result{max-width:760px;width:100%;text-align:center;padding:25px 0 40px;animation:arrive .45s ease-out}.result .eyebrow{margin-bottom:17px}.result h1{font-weight:400;font-size:31px;letter-spacing:-.8px;margin:0}.reveal-number{position:relative;padding:25px 70px;display:inline-block;margin:20px auto 12px}.reveal-number .digits{height:166px;color:var(--ink)}.result-spark{position:absolute;width:24px;height:24px;color:var(--yellow);top:16px;right:28px}.result-spark.second{width:16px;height:16px;color:var(--purple);top:auto;bottom:20px;right:auto;left:25px}.result-subtitle{color:#73766c;line-height:1.6;font-size:15px;margin:4px 0 27px}.answer-history{display:flex;justify-content:center;gap:8px;margin:0 0 30px}.answer-chip{border:1px solid var(--chip);color:var(--chip);border-radius:5px;padding:4px 11px;font-size:12px;font-weight:bold}.answer-chip.is-yes{background:var(--chip);color:white}.answer-chip.is-yes.yellow,.answer-chip.is-yes.green{color:#242a1d}.result .actions{margin-bottom:15px}.explanation{margin:30px auto 0;max-width:480px;border-top:1px solid var(--line);text-align:left;padding-top:19px;color:#686d60;font-size:14px;line-height:1.6}.explanation summary{cursor:pointer;list-style:none;text-align:center}.explanation summary::after{content:' +';font-size:18px;margin-left:8px}.explanation[open] summary::after{content:' −'}.explanation p{margin:15px 0 0}.sum{color:var(--ink);font-size:22px;text-align:center;font-variant-numeric:tabular-nums}.invalid{max-width:480px}.invalid h1{line-height:1.2;font-size:36px}.thinking{padding:100px 0;text-align:center}.thinking .spark{margin-bottom:20px;animation:turn 1s ease-in-out infinite}.thinking h1{font-size:26px;font-weight:400}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{border:1px solid #d7dace;border-radius:12px;padding:42px;max-width:480px;width:calc(100% - 32px);color:var(--ink);background:var(--canvas)}dialog::backdrop{background:#20241c80;backdrop-filter:blur(3px)}dialog h2{font-size:30px;font-weight:500;letter-spacing:-1px;margin:0 0 25px}dialog ol{padding-left:20px;font-size:15px;color:#64695d;line-height:1.6}dialog li{padding:0 0 16px 6px}dialog .eyebrow{margin-bottom:13px}dialog .button{width:100%;margin-top:10px}.close{position:absolute;right:15px;top:9px;background:none;border:0;font-size:28px;color:#6a6d62;width:36px;height:36px}.help-note{font-size:12px;color:#72786a;line-height:1.6}.game h1:focus,.result h1:focus,.intro h1:focus{outline:none}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes turn{to{transform:rotate(192deg)}}
@media(min-width:1500px){main{padding-top:60px;padding-bottom:60px}.intro{gap:90px}.intro-art .digits{height:35px}}
@media(max-width:850px){.header{padding:23px 25px}.header-right{gap:22px}.intro{gap:30px}.intro h1{font-size:44px;letter-spacing:-2px}.intro-art{padding-left:0;padding-right:0}.intro-art .sheet{padding:12px}.intro-art .digits{height:25px}.intro-art .sheet-header{min-height:30px}.sheet-label{font-size:8px;letter-spacing:1px}.intro-copy>p:not(.eyebrow){font-size:15px}.logo{width:145px;height:24px}.logo img{width:155px;height:155px;left:-5px;top:-66px}.game .digits{height:38px}}
@media(max-width:620px){.header{padding:23px 20px;gap:12px}.brand>span{font-size:30px}.brand small{font-size:7px;letter-spacing:1.3px;margin-top:8px}.spark{width:25px;height:25px}.brand{gap:8px}.header-right{gap:0}.help-link{font-size:0;width:36px;height:36px;border:1px solid #d5d8cc;border-radius:50%;margin-right:15px}.help-link span{font-size:0;margin:0}.help-link:after{content:'?';font-size:15px}.logo{width:108px;height:19px}.logo img{width:115px;height:115px;left:-3.7px;top:-48.9px}main{padding:22px 20px 28px;align-items:flex-start}.intro{grid-template-columns:1fr;padding:10px 0 20px;gap:24px}.intro-copy{text-align:center}.eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:17px}.intro h1{font-size:45px;line-height:1.06;margin-bottom:17px}.intro-copy>p:not(.eyebrow){margin:0 auto 23px;max-width:310px;line-height:1.5;font-size:15px}.intro-copy .button{min-width:220px;min-height:52px}.intro-hint{margin-top:12px}.intro-art{max-width:440px;width:100%;margin:0 auto;padding:12px 8px 30px}.intro-art .digits{height:25px}.intro-art .number-grid{gap:4px;padding:4px}.intro-art .sheet-header{margin-bottom:8px;min-height:24px}.intro-art .sheet-wordmark{font-size:22px}.intro-art .sheet-label{font-size:8px}.deck-shadow{top:20px;bottom:35px}.deck-caption{font-size:10px}footer{width:calc(100% - 40px);font-size:9px;padding:17px 0 20px;line-height:1.5}footer>span:first-child{max-width:230px}.footer-colors{gap:4px}.footer-colors i{width:6px;height:6px}.game-top{margin-bottom:23px}.progress{gap:7px}.progress-dot{width:20px;height:7px}.progress-label{font-size:10px;margin-left:7px}.game h1{font-size:25px;line-height:1.18;max-width:300px;margin:0 auto 10px}.game-description{font-size:12px;margin-bottom:21px}.game .sheet{padding:10px}.game .sheet-header{min-height:24px;margin-bottom:8px}.game .sheet-wordmark{font-size:23px}.game .number-grid{gap:4px;padding:4px;border-radius:5px}.game .number-cell{aspect-ratio:.78;border-radius:3px}.game .digits{height:26px}.actions{gap:10px;margin-top:22px}.actions .button{padding:14px 12px;gap:12px;min-height:54px;width:50%;font-size:14px}.keyboard-note{display:none}.game-bottom{margin-top:10px;display:flex;justify-content:space-between}.text-button{font-size:12px;min-height:40px}.result{padding:25px 0}.result h1{font-size:27px}.reveal-number{padding:20px 50px}.reveal-number .digits{height:140px}.result-subtitle{font-size:14px}.answer-history{gap:6px}.answer-chip{padding:4px 9px}.result .actions{flex-direction:column;align-items:center}.result .actions .button{width:240px}.explanation{font-size:13px}.invalid h1{font-size:31px}dialog{padding:35px 27px}dialog h2{font-size:28px}}
@media(max-width:360px){.logo{display:none}.help-link{margin:0}.game .digits{height:22px}.intro h1{font-size:39px}.progress-dot{width:16px}.progress-label{margin-left:3px}.game .sheet{padding:7px}.game .number-grid{gap:3px;padding:3px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.button:hover{transform:none}}
@media(max-width:620px){.intro-art .digits{height:21px}.game .digits{height:22px}}
@media(max-width:360px){.intro-art .digits,.game .digits{height:19px}}

.help-links{display:flex;align-items:center;gap:24px}.help-link{white-space:nowrap}
.secret-invitation{margin:30px auto 0;max-width:480px;border-top:1px solid var(--line);padding-top:20px}
.secret-link{border:0;background:none;font-size:14px;color:#686d60;line-height:1.7;padding:4px 12px;max-width:100%}.secret-link span{color:var(--purple);text-decoration:underline;text-underline-offset:4px}.secret-link:hover span{color:var(--ink)}
.how-copy{color:#64695d;font-size:15px;line-height:1.65}.how-copy p{margin:0 0 17px}.how-example{background:#eeefe7;border-radius:7px;padding:17px;margin:20px 0}.how-example p{margin:0;text-align:center;font-size:12px}.how-example .sum{font-size:24px;margin-top:8px}.how-copy strong{color:var(--ink)}
@media(max-width:850px){.help-links{gap:16px}.header-right{gap:22px}}
@media(max-width:620px){.header{flex-wrap:wrap;row-gap:15px}.header-right{display:contents}.header .logo{margin-left:auto}.help-links{order:3;width:100%;justify-content:center;gap:28px}.help-links .help-link{font-size:12px;width:auto;height:auto;min-height:36px;border:0;border-radius:0;margin:0;padding:8px 0}.help-links .help-link span{font-size:12px;margin-left:5px}.help-links .help-link:after{content:none}.secret-link{font-size:13px}.how-copy{font-size:14px}}

/* Track the card, preserve snapshot proportions and overlap the controls. */
main{view-transition-name:game-stage}
.intro-art > .sheet{view-transition-name:magic-deck}
.game.is-entering,.game.has-entered{animation:none}
.game.is-entering > .sheet{view-transition-name:magic-deck}
::view-transition-group(magic-deck){animation-duration:740ms;animation-timing-function:cubic-bezier(.32,0,.18,1);z-index:2}
::view-transition-old(magic-deck){animation:deck-old 740ms linear both;mix-blend-mode:normal;height:auto;object-fit:contain;object-position:top left}
::view-transition-new(magic-deck){animation:deck-new 740ms linear both;mix-blend-mode:normal;height:auto;object-fit:contain;object-position:top left}
::view-transition-group(game-stage){animation:none}
::view-transition-old(game-stage){animation:stage-out 180ms ease both}
::view-transition-new(game-stage){animation:stage-in 300ms 280ms ease-out both}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@keyframes deck-old{0%,45%{opacity:1}70%,100%{opacity:0}}
@keyframes deck-new{0%,45%{opacity:0}70%,100%{opacity:1}}
@keyframes stage-out{to{opacity:0}}
@keyframes stage-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}