:root { --ink: #181b22; --paper: #fcfcfa; }
.evolution-page { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.evolution-page .logo-container { padding: 14px 40px; }
.evolution-page .logo-img { width: 48px; }
.evolution-page .logo-text { display: block; }
.evolution-back { color: #555; font-size: .9rem; text-decoration: none; }
.evolution-back:hover { color: #111; }
.evolution-intro { box-sizing: border-box; max-width: 700px; margin: 0 auto; min-height: 38vh; padding: clamp(64px, 10vh, 120px) 24px 64px; text-align: center; }
.eyebrow { margin: 0 0 13px; color: #70747b; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.evolution-intro h1, .editorial h2 { margin: 0; font-family: Cardo, Georgia, serif; font-size: clamp(2.25rem, 6vw, 4.25rem); font-weight: 400; line-height: 1.05; }
.evolution-intro > p:last-child { max-width: 410px; margin: 22px auto 0; color: #595d64; font-size: 1.1rem; line-height: 1.5; }
.evolution-scroll { height: 440vh; }
.evolution-stage { position: sticky; top: 0; box-sizing: border-box; display: grid; place-items: center; height: 100vh; min-height: 570px; overflow: hidden; padding: 64px 20px 42px; }
.app-viewport { --env: 0; --old-copy: 1; --new-copy: 0; position: relative; width: min(52vw, 330px); aspect-ratio: var(--menu-aspect, .6667) / 1; overflow: hidden; border: 1px solid rgba(5, 20, 26, .16); border-radius: clamp(18px, 3vw, 28px); background: #e7f1e8; box-shadow: 0 22px 55px rgba(22, 35, 42, .2); isolation: isolate; container-type: inline-size; }
.evolution-stage { --menu-device-x: .70; --menu-device-y: .66; --menu-aspect: .6667; }.app-viewport { position: absolute; top: max(106px, 13vh); left: 50%; transform: translateX(-50%) scale(var(--menu-device-x), var(--menu-device-y)); transform-origin: top center; will-change: transform; }
.app-sky { position: absolute; inset: 0; background: linear-gradient(125deg, #c9ddc4 0 55%, #e9dca8); opacity: calc(1 - var(--env)); transition: none; }
.fridge { position: absolute; z-index: 1; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center top; box-shadow: 5px 12px 20px rgba(18,35,34,.22); }
.old-fridge { opacity: calc(1 - var(--env)); }
.new-fridge { opacity: var(--env); transform: scale(calc(.985 + var(--env) * .015)); }
.old-copy, .new-copy { position: absolute; z-index: 2; top: 7%; width: 100%; text-align: center; }
.old-copy { top: calc(7% + 8px); opacity: var(--old-copy); font-family: Arial, Helvetica, sans-serif; }
.old-copy strong { display: block; color: #111; font-size: clamp(1rem, 3vw, 1.35rem); font-weight: 400; letter-spacing: -.025em; }.old-copy span { display: block; margin-top: 8px; color: #fff; font-size: clamp(.8rem, 2.4vw, 1.08rem); font-weight: 400; letter-spacing: -.02em; }
.new-copy { display: grid; place-items: center; gap: 14px; top: 16%; opacity: var(--new-copy); }
.new-copy .new-speller-name { width: 62%; height: auto;  }
.new-copy .new-speller-logo { width: 50%; height: auto; border-radius: 15px; transform: translateY(calc((1 - var(--new-copy)) * -5px)) rotate(calc((1 - var(--new-copy)) * -3deg)); }
.old-extra { position: absolute; z-index: 3; border: 1px solid #9a9a9a; border-radius: 5px; padding: 4px 8px; background: linear-gradient(#fff, #d5d5d5); color: #424242; font-size: .52rem; box-shadow: 0 1px 1px #999; }
.extra-signin { left: 12%; top: 25%; }.extra-puzzles { right: 9%; top: 27%; }
.control { --x: 0px; --y: 0px; --scale: 1; --rot: 0deg; --old-alpha: 1; --new-alpha: 0; position: absolute; z-index: 4; transform: translate(var(--x), var(--y)) scale(var(--scale)) rotate(var(--rot)); transform-origin: center; will-change: transform; }
.old-button, .magnet { display: grid; place-items: center; box-sizing: border-box; width: 72px; height: 27px; }
.old-button { border: 0; border-radius: 5px; background: url("assets/icanread-word-tile.png") center / 100% 100% no-repeat; color: #0787f5; font: 600 .62rem Arial, Helvetica, sans-serif; filter: drop-shadow(0 1px 1px #777); opacity: var(--old-alpha); white-space: nowrap; }
.control-play, .control-bank, .control-store { width: 31.5%; }
.control-play .old-button, .control-bank .old-button, .control-store .old-button { width: 100%; height: auto; aspect-ratio: 3 / 1; font-size: clamp(.65rem, 2.2vw, .9rem); }
.magnet { position: absolute; inset: 50% auto auto 50%; width: 24cqw; aspect-ratio: 1 / 1; border-radius: 0; opacity: var(--new-alpha); transform: translate(-50%, -50%); }
.magnet img { display: block; width: 100%; height: 100%; object-fit: contain; }
.control-play { left: 10.5%; top: 22%; }.control-bank { left: 10.5%; top: 32%; }.control-store { left: 10.5%; top: 42%; }.control-tutorial { left: 8%; bottom: 10%; }.control-credits { right: 8%; bottom: 10%; }
.control-tutorial .old-button, .control-credits .old-button { width: 86px; height: 31px; border: 1px solid rgba(255,255,255,.3); border-radius: 18px; background: linear-gradient(115deg, #356d31, #17431c); color: #fff; font-weight: 400; box-shadow: inset 0 1px rgba(255,255,255,.17), 0 1px 2px rgba(0,0,0,.45); }
.stage-label { position: absolute; top: max(18px, 3vh); font-size: .73rem; color: #666b73; opacity: .8; }.stage-label span { color: #292d34; font-weight: 700; }.stage-label small { display: block; margin-top: 3px; color: #85898f; font-size: .61rem; font-weight: 500; letter-spacing: .01em; }.stage-label-old { left: max(22px, calc(50% - 310px)); }.stage-label-new { right: max(22px, calc(50% - 310px)); opacity: 0; text-align: right; }
.timeline { position: absolute; bottom: max(17px, 2.5vh); display: flex; align-items: center; gap: 10px; color: #777b80; font-size: .68rem; font-weight: 650; letter-spacing: .04em; }.timeline i { display: block; position: relative; width: clamp(130px, 25vw, 240px); height: 1px; background: #c7c9c7; }.timeline b { position: absolute; top: 50%; left: calc(var(--progress, 0) * 100%); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #4e8bb2; box-shadow: 0 1px 3px rgba(0,0,0,.25); transform: translate(-50%, -50%); }
.final-message { position: absolute; bottom: max(44px, 5vh); display: grid; gap: 3px; text-align: center; opacity: 0; transform: translateY(8px); }.final-message strong { font-family: Cardo, Georgia, serif; font-size: 1.3rem; font-weight: 400; }.final-message span { color: #656a70; font-size: .73rem; }
.game-evolution-scroll { height: 380vh; }
.game-evolution-stage { --game-progress: 0; --dog: 0; --name: 0; --interaction: 0; --fridge: 0; --accessories: 0; --device-x: .70; --device-y: .66; --game-aspect: .6667; position: sticky; top: 0; box-sizing: border-box; display: grid; place-items: center; height: 100vh; min-height: 570px; overflow: hidden; padding: 96px 20px 78px; }
.game-viewport { position: absolute; top: max(106px, 13vh); left: 50%; width: min(48vw, 310px); aspect-ratio: var(--game-aspect) / 1; overflow: hidden; border: 1px solid rgba(5,20,26,.2); border-radius: clamp(17px, 2.4vw, 25px); background: #4b9a42; box-shadow: 0 22px 55px rgba(22,35,42,.2); isolation: isolate; transform: translateX(-50%) scale(var(--device-x), var(--device-y)); transform-origin: top center; will-change: transform; }
.game-fridge { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center top; will-change: transform, opacity; }
.game-fridge-old { opacity: calc(1 - var(--fridge)); }.game-fridge-new { opacity: var(--fridge); transform: scale(calc(.985 + var(--fridge) * .015)); }
.game-prompt { position: absolute; z-index: 2; overflow: hidden; left: 21%; top: 20%; width: 60%; aspect-ratio: 1; box-sizing: border-box; }.game-prompt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-prompt-old { border: 4px solid #2d2f29; background: #b7b4aa; opacity: calc(1 - var(--dog)); transform: translateY(-30px); }.game-prompt-old img { filter: grayscale(1) contrast(1.2); }.game-icanread-name { position: absolute; z-index: 3; top: calc(20% - 42px); left: 18%; width: 64%; height: auto; opacity: calc(1 - var(--name)); }
.game-prompt-new { padding: 0; border-radius: 0; background: transparent; opacity: var(--dog); transform: scale(calc(.96 + var(--dog) * .04)); }.game-prompt-new img { object-fit: contain; }
.game-new-speller { position: absolute; z-index: 3; top: 18%; left: 20%; width: 60%; height: auto; opacity: var(--name); filter: drop-shadow(0 2px 1px rgba(0,0,0,.18)); }.game-drop-zones { position: absolute; z-index: 4; top: 49%; left: 23%; display: grid; width: 54%; grid-template-columns: repeat(3, 1fr); gap: 3%; opacity: var(--interaction); }.game-drop-zones i { display: grid; aspect-ratio: 1; place-items: center; border: 3px solid rgba(255,255,255,.58); border-radius: 13%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); color: rgba(255,255,255,.21); font: 800 clamp(1.15rem, 4vw, 1.85rem)/1 Arial, sans-serif; }
.answer-slots-old { position: absolute; z-index: 4; top: 49%; left: 23%; display: grid; width: 54%; grid-template-columns: repeat(3, 1fr); gap: 3%; opacity: calc(1 - var(--interaction)); }.answer-slots-old b { display: grid; aspect-ratio: 1; place-items: center; border-radius: 11%; background: url("assets/icanread-answer-slot.png") center / 100% 100% no-repeat; color: rgba(84,84,84,.43); font: 800 clamp(1.2rem, 4.3vw, 2rem)/1 Arial, sans-serif; text-shadow: 0 1px rgba(255,255,255,.28); }
.silver-tiles { position: absolute; z-index: 3; inset: 0; opacity: calc(1 - var(--interaction)); transition: none; }.silver-tiles b { position: absolute; display: grid; width: 15.5%; aspect-ratio: 1; place-items: center; border: 0; border-radius: 10%; background: url("assets/icanread-letter-tile.png") center / 100% 100% no-repeat; color: white; font: 500 clamp(1rem, 3.5vw, 1.6rem)/1 Arial, sans-serif; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }.silver-tiles b:nth-child(1) { left: 15%; top: 59%; transform: translate(16px, 16px); }.silver-tiles b:nth-child(2) { left: 37%; top: 63%; transform: translate(-18px, 34px); }.silver-tiles b:nth-child(3) { left: 56%; top: 65%; transform: translate(11px, 6px); }.silver-tiles b:nth-child(4) { left: 37%; top: 77%; transform: translate(-10px, 54px); }.silver-tiles b:nth-child(5) { left: 55%; top: 78%; transform: translate(21px, 31px); }.silver-tiles b:nth-child(6) { left: 18%; top: 71%; transform: translate(-12px, 18px); }
.game-utility { position: absolute; z-index: 2; opacity: calc(1 - var(--interaction)); transition: none; }.game-coin { bottom: 2%; left: 5%; width: 10.1%; }.game-trash { right: 5%; bottom: 3%; width: 12%; }
.magnet-letters { position: absolute; z-index: 5; inset: 0; opacity: var(--interaction); }.game-magnet { position: absolute; width: 18%; height: auto; filter: drop-shadow(0 4px 3px rgba(0,0,0,.28)); transform: translate(var(--mx), calc(var(--my) + (1 - var(--interaction)) * 88px)) rotate(var(--rot)); will-change: transform, opacity; }.magnet-y { --mx: 16px; --my: 16px; --rot: -8deg; left: 15%; top: 59%; }.magnet-e { --mx: -18px; --my: 34px; --rot: 6deg; left: 37%; top: 63%; }.magnet-h { --mx: 11px; --my: 6px; --rot: -2deg; left: 56%; top: 65%; }.magnet-d { --mx: -10px; --my: 54px; --rot: 5deg; left: 37%; top: 77%; }.magnet-g { --mx: 21px; --my: 31px; --rot: -5deg; left: 55%; top: 78%; }.magnet-o { --mx: -12px; --my: 18px; --rot: 8deg; left: 18%; top: 71%; }
.game-final-object, .game-freezer-control { position: absolute; z-index: 6; height: auto; opacity: var(--accessories); will-change: transform, opacity; }.game-final-object { transform: translateY(calc((1 - var(--accessories)) * 32px)); }.game-album { bottom: -8px; left: -8px; width: 30%; transform: translateY(calc((1 - var(--accessories)) * 32px)) scaleX(-1); }.game-toybox { right: -8px; bottom: -8px; width: 37%; transform: translateY(calc((1 - var(--accessories)) * 32px)) scaleX(-1); }.game-freezer-control { top: 7%; width: 10%; transform: translateY(calc((1 - var(--accessories)) * -16px)); }.game-back { left: calc(12% + 16px); }.game-hint { right: 12%; }
.game-stage-label { position: absolute; top: max(18px, 3vh); color: #666b73; font-size: .73rem; }.game-stage-label span { color: #292d34; font-weight: 700; }.game-stage-label small { display: block; margin-top: 3px; color: #85898f; font-size: .61rem; font-weight: 500; letter-spacing: .01em; }.game-stage-label-old { left: max(22px, calc(50% - 310px)); }.game-stage-label-new { right: max(22px, calc(50% - 310px)); opacity: 0; text-align: right; }
.game-copy { position: absolute; left: 50%; bottom: max(44px, 5vh); width: min(90vw, 480px); text-align: center; opacity: var(--accessories); transform: translateX(-50%); pointer-events: none; }.game-copy h2 { margin: 0; font-family: Cardo, Georgia, serif; font-size: clamp(1.25rem, 2.8vw, 1.8rem); font-weight: 400; line-height: 1.1; }
.game-timeline { position: absolute; bottom: max(17px, 2.5vh); display: flex; align-items: center; gap: 10px; color: #777b80; font-size: .68rem; font-weight: 650; letter-spacing: .04em; }.game-timeline i { position: relative; display: block; width: clamp(130px, 25vw, 240px); height: 1px; background: #c7c9c7; }.game-timeline b { position: absolute; top: 50%; left: calc(var(--game-progress) * 100%); width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #4e8bb2; box-shadow: 0 1px 3px rgba(0,0,0,.25); transform: translate(-50%, -50%); }
.timeline i, .game-timeline i { cursor: pointer; touch-action: none; }.timeline i::before, .game-timeline i::before { content: ""; position: absolute; inset: -14px -8px; }.timeline b, .game-timeline b { cursor: grab; transition: width .15s, height .15s; }.timeline i:hover b, .game-timeline i:hover b, .scrubbing b { width: 11px; height: 11px; }.scrubbing b { cursor: grabbing; }
.editorial { max-width: 960px; margin: 0 auto; padding: 100px 24px 120px; }.editorial-copy { max-width: 680px; margin: 0 auto 56px; text-align: center; }.editorial h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }.screen-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 5vw, 64px); max-width: 720px; margin: 0 auto 68px; }.screen-comparison figure { margin: 0; }.screen-comparison figcaption { margin-top: 12px; color: #72767c; font-size: .78rem; text-align: center; }.comparison-screen { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 14; overflow: hidden; border-radius: 18px; box-shadow: 0 12px 29px rgba(0,0,0,.13); text-align: center; }.comparison-old { background: #dbe7cf; color: #416443; }.comparison-new { background: #b9e0ec; color: #fff; }.comparison-screen .mini-fridge { position: absolute; bottom: -11%; width: 68%; height: 75%; border-radius: 13% 13% 4% 4%; opacity: .92; }.comparison-old .mini-fridge { background: #7fa65b; }.comparison-new .mini-fridge { background: #3c9dcc; }.comparison-screen b, .comparison-screen img, .comparison-screen span { position: relative; z-index: 1; }.comparison-screen b { align-self: start; margin-top: 17%; font-family: Georgia, serif; }.comparison-screen img { align-self: start; width: 74px; margin-top: 12%; border-radius: 15px; }.comparison-screen span { align-self: end; margin-bottom: 22%; border-radius: 4px; padding: 5px 6px; background: rgba(255,255,255,.8); color: #414141; font-size: clamp(.44rem, 1.4vw, .65rem); }.editorial-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 8vw, 100px); max-width: 720px; margin: auto; }.editorial-notes h3 { margin: 0 0 10px; font-family: Cardo, Georgia, serif; font-size: 1.55rem; font-weight: 400; }.editorial-notes p { margin: 0; color: #555b61; line-height: 1.6; }
.audience-note { max-width: 580px; margin: 76px auto 0; padding: 28px 0 0; border-top: 1px solid #e1e2de; }.audience-note h3 { margin: 0 0 14px; font-family: Cardo, Georgia, serif; font-size: 1.8rem; font-weight: 400; }.audience-note p:not(.eyebrow) { margin: 0 0 1rem; color: #555b61; line-height: 1.65; }.audience-note p:last-child { margin-bottom: 0; color: #30353a; }
@media (prefers-reduced-motion: reduce) { .evolution-scroll, .game-evolution-scroll { height: auto; }.evolution-stage, .game-evolution-stage { position: relative; min-height: 650px; }.app-viewport { --env: 1 !important; --old-copy: 0 !important; --new-copy: 1 !important; }.evolution-stage { --menu-device-x: 1 !important; --menu-device-y: 1 !important; --menu-aspect: .4605 !important; }.old-fridge, .old-copy, .old-extra, .old-button { opacity: 0 !important; }.new-fridge, .magnet { opacity: 1 !important; }.control { transform: var(--final-transform) !important; }.control-play { --final-transform: translate(0px, 38px) scale(1) rotate(-5deg); }.control-bank { --final-transform: translate(42px, 58px) scale(1) rotate(4deg); }.control-store { --final-transform: translate(-42px, 78px) scale(1) rotate(-3deg); }.control-tutorial { --final-transform: translate(102px, -105px) scale(1) rotate(5deg); }.control-credits { --final-transform: translate(-102px, -105px) scale(1) rotate(-4deg); }.timeline b, .game-timeline b { left: 100%; }.stage-label-old, .game-stage-label-old { opacity: 0; }.stage-label-new, .final-message, .game-stage-label-new { opacity: 1; }.final-message { transform: none; }.game-evolution-stage { --interaction: 1 !important; --fridge: 1 !important; --accessories: 1 !important; --device-x: 1 !important; --device-y: 1 !important; --game-aspect: .4605 !important; }.game-fridge-old, .game-prompt-old, .silver-tiles, .magnet-letters { opacity: 0 !important; }.game-fridge-new, .game-prompt-new { opacity: 1 !important; } }
@media (prefers-reduced-motion: reduce) { .game-icanread-name { opacity: 0 !important; }.game-new-speller { opacity: 1 !important; } }
@media (max-width: 600px) { .evolution-page .logo-container { flex-direction: row; padding: 12px 18px; }.evolution-page .logo-img { width: 40px; }.evolution-page .logo-text { font-size: 17px; }.evolution-page .domain { font-size: 11px; }.app-viewport { top: 88px; width: min(74vw, 330px); }.stage-label, .game-stage-label { top: 14px; }.stage-label-old, .game-stage-label-old { left: 18px; }.stage-label-new, .game-stage-label-new { right: 18px; }.evolution-stage { min-height: 520px; padding-top: 48px; }.game-evolution-stage { min-height: 610px; padding: 62px 16px 102px; }.game-viewport { top: 88px; width: min(69vw, 310px); }.game-copy { bottom: 44px; }.game-copy h2 { font-size: 1.18rem; }.final-message { bottom: 42px; }.editorial { padding: 75px 20px; }.editorial-notes { grid-template-columns: 1fr; }.screen-comparison { gap: 16px; } }