:root { --ink:#172526; --paper:#f4f0e8; --muted:#6b716c; --lime:#d7ff45; --line:#cdd0c8; --orange:#ff7043; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:Inter,Arial,sans-serif; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.19; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }
.shell { width:min(1080px,calc(100% - 40px)); margin:auto; position:relative; }
.masthead { padding:26px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.04em; }.site-nav { display:flex; gap:23px; font:500 11px ui-monospace,Consolas,monospace; text-transform:uppercase; }.site-nav a { color:var(--muted); text-decoration:none; }.site-nav a:hover,.site-nav a.active { color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.brand { color:inherit; text-decoration:none; font-weight:800; line-height:1.13; display:flex; align-items:center; gap:10px; text-transform:uppercase; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; background:var(--ink); color:var(--lime); font-size:17px; border-radius:50%; }
.status { font-family:ui-monospace,Consolas,monospace; color:var(--muted); }.status i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#7ea900; margin-right:6px; }
.quiz-hero { padding:60px 7% 54px; }.home-hero { min-height:450px; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:75px 7% 62px; }
.eyebrow,.question-label { font:500 11px ui-monospace,Consolas,monospace; letter-spacing:.09em; text-transform:uppercase; color:#6c743d; }
h1 { max-width:760px; margin:13px 0 16px; font-size:clamp(2.5rem,5.5vw,4.8rem); line-height:1.04; letter-spacing:-.07em; font-weight:800; } h1 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.09em; }
.intro { max-width:510px; color:var(--muted); font-size:16px; line-height:1.65; }.hero-button { display:inline-block; margin-top:18px; padding:15px 19px; background:var(--ink); color:white; text-decoration:none; font-size:13px; font-weight:800; }.hero-button span { margin-left:13px; color:var(--lime); font-size:18px; }.idea-orb { width:210px; height:210px; flex:none; position:relative; display:grid; place-content:center; border-radius:50%; background:var(--lime); border:1px solid var(--ink); transform:rotate(-8deg); box-shadow:7px 7px 0 var(--ink); text-align:center; }.idea-orb div { width:92px; height:92px; display:grid; place-items:center; color:var(--lime); background:var(--ink); border-radius:50%; font:60px Georgia,serif; }.idea-orb small { position:absolute; bottom:29px; right:-16px; transform:rotate(8deg); font:700 10px ui-monospace,Consolas,monospace; text-transform:uppercase; }.spark { position:absolute; color:var(--orange); font-size:29px; }.spark-one { left:-14px; top:20px; }.spark-two { right:-17px; top:51px; }
.activities { border-top:1px solid var(--line); padding:70px 7%; }.activities-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }.activities-heading h2 { margin:0; font-size:clamp(2rem,4vw,3.6rem); }.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.feature-card { min-height:310px; padding:24px; display:flex; flex-direction:column; background:var(--ink); color:white; text-decoration:none; box-shadow:6px 6px 0 var(--lime); transition:transform .2s ease; }.feature-card:hover { transform:translate(-3px,-3px); }.card-number { color:#a4aaa6; font:11px ui-monospace,Consolas,monospace; }.card-icon { color:var(--lime); font-size:35px; margin:19px 0 auto; font-weight:800; letter-spacing:-.1em; }.feature-card strong { font-size:28px; line-height:1.05; letter-spacing:-.05em; }.card-description { margin-top:10px; color:#c4cac5; font-size:13px; line-height:1.45; }.card-arrow { margin-top:20px; color:var(--lime); font:11px ui-monospace,Consolas,monospace; text-transform:uppercase; }.sprint-card { background:#314143; box-shadow:6px 6px 0 var(--orange); }.sprint-card .card-icon { color:#ffcc4c; }.sprint-card .card-arrow { color:#ffcc4c; }.number-card { background:var(--lime); color:var(--ink); box-shadow:6px 6px 0 var(--ink); }.number-card .card-number,.number-card .card-description { color:#52614e; }.number-card .card-icon,.number-card .card-arrow { color:var(--ink); }.manifesto { padding:88px 14% 93px; text-align:center; border-top:1px solid var(--line); }.manifesto > p:last-child { max-width:730px; margin:14px auto 0; font:clamp(1.8rem,4vw,3.3rem)/1.15 Georgia,serif; letter-spacing:-.05em; }
.assessment { background:#fffefa; border:1px solid var(--ink); box-shadow:8px 8px 0 var(--ink); }.assessment-top,.assessment-footer { min-height:60px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; font:10px ui-monospace,Consolas,monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }.assessment-top { border-bottom:1px solid var(--line); }.assessment-top b { color:var(--ink); }.progress { width:180px; height:4px; background:#e3e4de; }.progress span { display:block; height:100%; width:20%; background:var(--lime); transition:width .25s ease; }
#quiz-panel,.result-panel { padding:46px 11% 40px; min-height:330px; }.question-label { margin:0 0 13px; } h2 { font-size:clamp(1.8rem,3.8vw,3rem); letter-spacing:-.06em; line-height:1.08; margin:0; }.question-note { margin:13px 0 26px; color:var(--muted); font-size:14px; }.answers { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.answer { background:#f8f6ef; border:1px solid var(--line); padding:16px; text-align:left; color:var(--ink); font:600 14px Inter,Arial,sans-serif; cursor:pointer; transition:.17s ease; }.answer:hover { border-color:var(--ink); transform:translateY(-2px); }.answer.selected { background:var(--lime); border-color:var(--ink); box-shadow:3px 3px 0 var(--ink); }.selection-note { font:11px ui-monospace,Consolas,monospace; color:var(--muted); margin:25px 0 0; }.assessment-footer { border-top:1px solid var(--line); }.text-button { padding:8px 0; border:0; background:none; color:var(--muted); font:500 11px ui-monospace,Consolas,monospace; text-transform:uppercase; cursor:pointer; }.text-button:disabled { opacity:.35; cursor:not-allowed; }.continue { padding:13px 19px; border:1px solid var(--ink); background:var(--ink); color:#fff; font:700 12px Inter,Arial,sans-serif; cursor:pointer; }.continue span { margin-left:12px; color:var(--lime); font-size:18px; }.continue:disabled { opacity:.35; cursor:not-allowed; }.continue:not(:disabled):hover { background:#314143; }
.result-panel { text-align:center; display:grid; place-content:center; }.result-panel .stamp { width:110px; height:110px; border:3px solid var(--orange); border-radius:50%; color:var(--orange); margin:0 auto 24px; display:grid; place-content:center; transform:rotate(-8deg); font:800 18px ui-monospace,Consolas,monospace; line-height:1.05; }.result-panel h2 { font-size:clamp(2.2rem,5vw,4rem); }.result-panel p { max-width:500px; margin:16px auto 0; line-height:1.65; color:var(--muted); }.result-panel .fineprint { margin-top:24px; font:10px ui-monospace,Consolas,monospace; color:#8a8d88; }.restart { margin:25px auto 0; padding:13px 18px; border:1px solid var(--ink); background:var(--lime); color:var(--ink); font-weight:800; cursor:pointer; box-shadow:3px 3px 0 var(--ink); }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:52px 0 30px; color:var(--muted); font:10px ui-monospace,Consolas,monospace; }.site-footer a,.privacy-copy a,.back-link { color:var(--ink); }.privacy-page { min-height:100vh; }.back-link { font:11px ui-monospace,Consolas,monospace; text-transform:uppercase; text-decoration:none; }.privacy-copy { width:min(760px,100%); padding:76px 7% 100px; }.privacy-copy h1 { font-size:clamp(3rem,7vw,5.6rem); margin:10px 0 8px; }.privacy-copy h2 { margin:38px 0 9px; font-size:21px; letter-spacing:-.04em; }.privacy-copy .updated { margin:0 0 42px; color:var(--muted); font:11px ui-monospace,Consolas,monospace; }.privacy-copy > p:not(.eyebrow):not(.updated):not(.fineprint) { font-size:16px; line-height:1.8; margin:0 0 18px; }.privacy-copy .fineprint { margin-top:46px; font:11px ui-monospace,Consolas,monospace; color:var(--muted); }
.game-hero { padding:60px 7% 47px; }.game-hero h1 { margin-bottom:15px; }.sprint-game { background:#fffefa; border:1px solid var(--ink); box-shadow:8px 8px 0 var(--ink); }.sprint-top { min-height:58px; padding:0 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); color:var(--muted); font:10px ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.06em; }.sprint-content { padding:42px 11% 37px; }.letters { margin:10px 0 31px; display:flex; flex-wrap:wrap; gap:2px; font:700 clamp(1.55rem,3.5vw,2.6rem) ui-monospace,Consolas,monospace; letter-spacing:-.08em; }.letters span { padding:1px 2px; color:#c5c8c2; }.letters span.correct { color:var(--ink); background:var(--lime); }.letters span.wrong { color:white; background:var(--orange); }.sprint-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); margin-bottom:24px; }.sprint-stats div { padding:14px; border-right:1px solid var(--line); }.sprint-stats div:last-child { border-right:0; }.sprint-stats span,.typing-label,.game-footnote { display:block; color:var(--muted); font:10px ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.05em; }.sprint-stats strong { display:block; margin-top:5px; font-size:17px; letter-spacing:-.04em; }.typing-label { margin-bottom:8px; color:var(--ink); }.sprint-content input { width:100%; padding:16px; border:1px solid var(--ink); outline:0; background:#f8f6ef; color:var(--ink); font:600 18px ui-monospace,Consolas,monospace; }.sprint-content input:focus { box-shadow:4px 4px 0 var(--lime); }.game-result { margin-top:24px; padding:16px 18px; background:var(--lime); border:1px solid var(--ink); }.game-result strong,.game-result span { display:block; }.game-result strong { font-size:16px; }.game-result span { margin-top:4px; font-size:13px; }.game-footnote { text-align:right; }
.number-hero { padding-bottom:38px; }.number-game { min-height:390px; padding:47px 8% 42px; text-align:center; display:flex; align-items:center; flex-direction:column; justify-content:center; border:1px solid var(--ink); background:#fffefa; box-shadow:8px 8px 0 var(--ink); }.big-number { display:block; margin:9px 0 22px; font-size:clamp(5rem,16vw,11rem); line-height:.9; letter-spacing:-.1em; }.number-button { padding:18px 27px; border:1px solid var(--ink); background:var(--lime); color:var(--ink); font:800 16px Inter,Arial,sans-serif; cursor:pointer; box-shadow:5px 5px 0 var(--ink); transition:transform .08s ease,box-shadow .08s ease; }.number-button:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }.number-button.pressed { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink); }.number-button span { margin-left:11px; font-size:21px; }.number-message { min-height:24px; margin:27px 0 8px; color:var(--muted); }.number-reset { margin-top:5px; }
@media(max-width:650px) { .shell { width:min(100% - 28px,1080px); }.masthead { padding:18px 0; }.site-nav { gap:10px; font-size:9px; }.home-hero { padding:55px 7px 60px; min-height:0; }.idea-orb { display:none; }.quiz-hero,.game-hero { padding:47px 7px 40px; }.activities { padding:52px 7px; }.activities-heading { display:block; }.activities-heading h2 { margin-top:11px; }.activity-grid { grid-template-columns:1fr; }.feature-card { min-height:235px; }.manifesto { padding:65px 7px; }.sprint-top { padding:0 15px; }.sprint-content { padding:35px 22px 30px; }.letters { font-size:1.3rem; }.sprint-stats div { padding:11px 8px; }.sprint-stats strong { font-size:14px; }.game-footnote { display:none; } .assessment-top { padding:0 15px; }.assessment-top > span:last-child { display:none; }.progress { flex:1; }.answers { grid-template-columns:1fr; } #quiz-panel,.result-panel { padding:36px 24px 32px; }.assessment-footer { padding:0 18px; }.site-footer { padding:42px 0 22px; display:block; line-height:2; } }