:root{--blue:#254edb;--ink:#172448;--yellow:#ffcd4b;--paper:#fffefa;--line:#dce7f3;--green:#269965;--orange:#e95b35;font-family: 'Trebuchet MS',Arial,sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#e9eef8}button,a{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:5px}button{border:0}button:hover{filter:brightness(.96)}button:active{transform:translateY(2px)}[hidden]{display:none!important}.topbar{height:76px;padding:0 4.5%;background:var(--blue);color:white;display:flex;align-items:center;justify-content:space-between;gap:12px}.wordmark{background:transparent;color:white;display:flex;align-items:center;gap:12px;font-size:30px}.wordmark span{font-weight:800;letter-spacing:1.4px;font-size:14px}.top-actions{display:flex;gap:10px}.icon-button{background:#ffffff18;border:1px solid #ffffff45;border-radius:12px;color:white;padding:10px 14px;font-size:14px;min-height:44px}#fullscreen{font-size:23px;padding:4px 12px}.screen{animation:appear .3s ease}@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.menu-screen{padding:45px 5% 20px}.notebook{max-width:1250px;min-height:615px;margin:auto;background:var(--paper);border-radius:8px 25px 25px 8px;box-shadow:8px 10px 0 #cad4e9,0 20px 50px #142b5920;position:relative;display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;border:1px solid #d4dbe7}.notebook:before{content:'';position:absolute;left:39px;top:0;bottom:0;width:2px;background:#ff998c55}.binding{position:absolute;left:8px;top:28px;bottom:28px;width:20px;background:radial-gradient(ellipse,#52617f 26%,transparent 32%) 0 0/20px 36px}.menu-copy{padding:64px 15px 45px 80px;position:relative;z-index:2}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.8px;color:#526381}h1{font-size:clamp(44px,6.5vw,85px);font-weight:900;letter-spacing:-4px;line-height:1.02;margin:27px 0 22px}h1 span{color:var(--blue);text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:10px;text-decoration-thickness:9px}.menu-copy>p{font-size:18px;line-height:1.6;color:#56617a}.primary{background:var(--blue);color:white;padding:19px 28px;border:2px solid var(--ink);border-radius:13px;box-shadow:4px 4px 0 var(--ink);font-weight:800;font-size:20px;display:inline-flex;align-items:center;justify-content:center;gap:40px;min-height:58px}.play{margin:18px 0 25px}.menu-links{display:flex;gap:20px;flex-wrap:wrap}.menu-links button{padding:6px 0;background:none;border-bottom:1px solid #adb8ca;font-size:14px;font-weight:700}.menu-copy .menu-note{font-size:12px;margin:26px 0 0}.cover-art{position:relative;background:repeating-linear-gradient(transparent 0 33px,var(--line) 33px 34px);border-left:1px solid #dfdbe2;display:flex;justify-content:center;align-items:center}.cover-hero{width:59%;max-height:405px;object-fit:contain;mix-blend-mode:multiply;transform:rotate(-7deg);margin:10px 60px 0 0;animation:bob 4s ease-in-out infinite}.cover-flag{width:125px;position:absolute;right:30px;top:80px;transform:rotate(10deg);mix-blend-mode:multiply}.hello{font-size:32px;font-weight:900;font-style:italic;line-height:1;position:absolute;right:30px;bottom:125px;transform:rotate(-8deg);color:var(--blue)}.paper-label{position:absolute;font-size:11px;font-weight:800;letter-spacing:1.4px;padding:10px 16px;background:var(--yellow);color:var(--ink);transform:rotate(-3deg)}.label-top{top:25px;left:22px}.label-bottom{bottom:40px;right:30px;background:#d6ecd9;transform:rotate(3deg)}.below-notebook{display:flex;justify-content:space-between;max-width:1250px;margin:25px auto;color:#5c6c89;font-size:13px}@keyframes bob{50%{transform:rotate(-4deg) translateY(-10px)}}
.content-screen{max-width:1250px;margin:auto;padding:45px 35px 65px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.section-heading h1{font-size:44px;letter-spacing:-1.8px;margin:12px 0}.small-button{display:inline-block;background:white;border:1.5px solid #bac5d9;border-radius:10px;padding:12px 18px;font-size:14px;font-weight:700;text-decoration:none;color:var(--ink);min-height:44px}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.level-card{text-align:left;border:2px solid var(--ink);border-radius:16px;background:var(--paper);overflow:hidden;box-shadow:4px 4px 0 #b8c7de;padding:0;position:relative}.level-card img{width:100%;height:190px;object-fit:cover;object-position:center 40%;display:block;background:white;border-bottom:1px solid #d2ddeb}.level-card .card-text{padding:20px;display:block}.level-card h2{font-size:22px;margin:10px 0}.level-card p{font-size:14px;line-height:1.5;margin-bottom:0;color:#5d6982}.level-card .number{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--blue)}.level-card .badge{position:absolute;right:12px;top:12px;background:var(--yellow);padding:7px 11px;border-radius:20px;font-size:12px;font-weight:800}.section-intro{max-width:750px;line-height:1.7;color:#52617b}.gallery-filters{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}.gallery-filters button{background:white;padding:11px 18px;border:1px solid #bdc9db;border-radius:30px;min-height:44px}.gallery-filters button.active{background:var(--blue);color:white}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.art-card{background:white;border:1px solid #cbd5e5;padding:18px;border-radius:12px}.art-card button{width:100%;background:white}.art-card img{width:100%;height:250px;object-fit:contain}.art-card h3{font-size:18px}.art-card p{line-height:1.6;font-size:14px;color:#52617b}.art-card small{font-size:12px;overflow-wrap:anywhere;color:#6b7790}.art-card .tag{font-size:11px;text-transform:uppercase;color:var(--blue);font-weight:800;letter-spacing:1px}.story-paper{background:var(--paper);padding:45px 55px;max-width:900px;margin:auto;border-radius:12px;border:1px solid #cbd5e5;line-height:1.9;font-size:18px}.story-guide{width:100px;float:right;margin:5px 0 20px 30px;mix-blend-mode:multiply}.story-paper h2{font-size:23px;margin-top:35px;line-height:1.4}.story-end{font-weight:800;border-top:2px dashed #bac5d9;padding-top:25px}
.game-screen{height:calc(100dvh - 76px);display:flex;flex-direction:column;max-width:1600px;margin:auto;padding:0 24px}.game-hud{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;gap:8px}.game-hud h2{margin:5px 0 0;font-size:23px;letter-spacing:-.5px}.hud-actions{display:flex;gap:18px;align-items:center}.color-count{font-weight:800;font-size:18px;background:var(--yellow);padding:10px 18px;border-radius:22px;white-space:nowrap}.canvas-wrap{position:relative;flex:1;min-height:180px;border:2px solid var(--ink);border-radius:18px;overflow:hidden;background:var(--paper)}canvas{width:100%;height:100%;display:block;touch-action:none}.stage-corner{position:absolute;bottom:14px;right:20px;font-size:11px;letter-spacing:1.5px;font-weight:800;pointer-events:none;color:#536587}#toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);max-width:90%;padding:12px 22px;background:var(--ink);border-radius:25px;color:white;font-size:14px;white-space:normal;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}#toast.visible{opacity:1}.controls{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 6px max(15px,env(safe-area-inset-bottom));user-select:none;touch-action:none}.direction-controls{display:flex;gap:12px}.controls button{width:72px;height:62px;background:white;border:2px solid var(--ink);box-shadow:0 4px 0 #b1bfd5;border-radius:15px;font-size:26px;touch-action:none;user-select:none;-webkit-user-select:none}.controls button.pressed{transform:translateY(4px);box-shadow:none;background:#dce5ff}.controls .jump-button{width:124px;background:var(--yellow);display:flex;align-items:center;justify-content:center;gap:12px}.jump-button span{font-size:13px;font-weight:800}.control-tip{font-size:13px;line-height:1.5;color:#596b86;text-align:center}dialog{max-width:480px;width:calc(100% - 32px);border:2px solid var(--ink);border-radius:20px;padding:0;box-shadow:8px 8px 0 #17244844;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#142341aa;backdrop-filter:blur(5px)}.dialog-inner{padding:36px}.dialog-inner h2{font-size:33px;letter-spacing:-1px;line-height:1.1;margin:18px 0}.dialog-inner p{font-size:17px;line-height:1.6;color:#52617b}#dialog-actions{display:flex;flex-direction:column;gap:14px;margin-top:25px}#dialog-actions .primary{font-size:18px}#art-dialog{max-width:680px;padding:20px;max-height:94dvh}#art-image{display:block;max-width:100%;max-height:70dvh;margin:auto}#art-caption{font-size:14px;line-height:1.5}body:has(dialog[open]){overflow:hidden}
@media(min-width:1500px){.menu-screen{padding-top:65px}.notebook{min-height:680px}.menu-copy{padding-top:85px}}
@media(max-width:800px){.topbar{height:64px;padding:0 20px}.wordmark span{font-size:11px;letter-spacing:.7px}.icon-button{font-size:12px;padding:8px 10px}.menu-screen{padding:25px 18px}.notebook{min-height:540px}.menu-copy{padding:45px 5px 35px 52px}h1{font-size:61px;letter-spacing:-3px}.menu-copy>p{font-size:16px}.eyebrow{font-size:10px;letter-spacing:1px}.cover-flag{width:90px;right:12px;top:100px}.hello{font-size:26px;right:18px;bottom:130px}.cover-hero{width:80%;margin:25px 10px 0 0}.paper-label{font-size:9px;letter-spacing:.5px;max-width:90%;text-align:center;padding:9px}.label-top{left:10px;top:25px}.label-bottom{right:10px}.menu-links{gap:12px}.menu-links button{font-size:12px}.level-grid,.gallery-grid{grid-template-columns:repeat(2,1fr)}.game-screen{height:calc(100dvh - 64px);padding:0 12px}.game-hud h2{font-size:19px}.game-hud .eyebrow{font-size:10px}.story-paper{padding:30px}.section-heading h1{font-size:36px}}
@media(max-width:560px){.topbar{padding:0 12px}.wordmark{gap:6px}.wordmark span{max-width:108px;line-height:1.35;text-align:left}.top-actions{gap:6px}.menu-screen{padding:18px 13px}.notebook{display:block;min-height:690px;border-radius:7px 18px 18px 7px}.menu-copy{padding:36px 20px 28px 47px}.menu-copy h1{font-size:61px;margin-top:20px}.menu-copy>p{font-size:15px;max-width:200px}.play{position:relative;z-index:3;margin:150px 0 22px;width:100%;padding:17px 20px}.cover-art{position:absolute;top:195px;right:10px;width:175px;height:275px;border:0;background:none}.cover-hero{width:140px;max-height:230px;margin:0}.cover-flag{width:70px;top:-25px;right:0}.hello{font-size:23px;right:115px;bottom:16px;white-space:nowrap}.paper-label{display:none}.menu-copy .menu-note{font-size:11px;margin:18px 0 0}.menu-links{justify-content:space-between;gap:6px}.menu-links button{font-size:12px}.below-notebook{font-size:12px;justify-content:center;margin-top:20px}.below-notebook span:first-child{display:none}.content-screen{padding:30px 18px}.section-heading{align-items:flex-start}.section-heading h1{font-size:32px}.section-heading .small-button{padding:10px}.level-grid{gap:18px;grid-template-columns:1fr}.level-card img{height:180px}.gallery-grid{grid-template-columns:1fr}.game-hud{padding:12px 0}.game-hud h2{font-size:16px;max-width:190px}.hud-actions{gap:7px}.color-count{font-size:14px;padding:9px 10px}.hud-actions .small-button{padding:8px 12px}.hud-actions .small-button span{display:none}.controls button{width:66px;height:62px}.controls .jump-button{width:97px;gap:6px}.control-tip{font-size:10px}.direction-controls{gap:9px}.story-paper{font-size:16px;padding:24px}.story-guide{width:75px}.dialog-inner{padding:28px}.dialog-inner h2{font-size:29px}}
@media(max-height:540px) and (orientation:landscape){.topbar{height:48px}.game-screen{height:calc(100dvh - 48px);padding:0 14px}.game-hud{padding:6px 0}.game-hud h2{font-size:16px;margin:2px 0}.controls{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:28px;right:28px;z-index:3;padding:0;pointer-events:none}.controls button{pointer-events:auto;opacity:.86;height:52px}.control-tip{display:none}.canvas-wrap{margin-bottom:10px}.stage-corner{bottom:76px}.color-count{padding:6px 15px}.hud-actions .small-button{padding:7px 12px;min-height:35px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Two distinct games share the notebook's visual identity. */
.collection-screen{max-width:1240px;margin:auto;padding:42px 35px 30px}.collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.collection-heading h1{font-size:56px;letter-spacing:-2.5px;line-height:1.06;margin:15px 0 0}.collection-heading>p{font-size:18px;line-height:1.6;color:#586a85;margin-bottom:0}.game-library{display:grid;grid-template-columns:1fr 1fr;gap:26px}.game-box{background:var(--paper);border:2px solid var(--ink);border-radius:18px;box-shadow:5px 6px 0 #c3d0e6;overflow:hidden}.game-cover{position:relative;height:225px;border-bottom:2px solid var(--ink);background:repeating-linear-gradient(#fffefa 0 31px,#e2e9f2 31px 32px);overflow:hidden}.game-cover .source-drawing{height:100%;width:64%;object-fit:cover;object-position:center 43%;mix-blend-mode:multiply;opacity:.85}.game-cover .game-character{position:absolute;right:38px;bottom:8px;height:180px;max-width:145px;object-fit:contain;mix-blend-mode:multiply;transform:rotate(6deg)}.game-box.maze .game-character{height:155px;right:22px}.game-cover .boss-preview{position:absolute;width:90px;height:130px;object-fit:contain;right:125px;top:10px;mix-blend-mode:multiply;transform:rotate(-12deg)}.game-cover .paper-label{display:block;top:15px;left:18px;bottom:auto;right:auto;font-size:11px;letter-spacing:1px}.game-box.maze .paper-label{background:#e0d8fd}.game-info{padding:25px}.game-info .eyebrow{font-size:11px;letter-spacing:1px}.game-info h2{font-size:31px;letter-spacing:-1px;margin:10px 0}.game-info p{font-size:16px;line-height:1.5;min-height:48px;color:#53647f;margin:0 0 21px}.game-buttons{display:flex;gap:14px;align-items:center}.game-buttons .primary{font-size:17px;min-height:50px;padding:12px 24px;box-shadow:3px 3px 0 var(--ink)}.game-buttons .small-button{font-size:14px;background:transparent}.circuit .primary{background:#da7831}.maze .primary{background:#7461c8}.collection-bottom{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:30px}.collection-note{font-size:13px;line-height:1.8;color:#5b6c89;margin-top:22px}.trophy-shelf{display:flex;gap:18px}.trophy{display:flex;align-items:center;gap:10px;font-size:12px;max-width:170px;line-height:1.5;color:#526380}.trophy img{width:54px;height:36px;object-fit:contain;mix-blend-mode:multiply}.trophy.locked img{filter:grayscale(1);opacity:.45}.trophy.won{color:#217744;font-weight:700}.mission-strip{display:flex;justify-content:space-between;gap:10px;padding:0 4px 10px;font-size:14px;font-weight:700;color:#4c5e7b}.mission-strip #boss-hud{color:#81479d}.action-controls{display:flex;gap:12px}.controls .action-button{width:108px;display:flex;justify-content:center;align-items:center;gap:8px;background:#dcd7ff}.action-button span{font-size:13px;font-weight:800}.game-hud #level-number{letter-spacing:1px}.level-card .badge{font-size:11px}.story-game-heading{display:flex;align-items:center;gap:20px;margin-top:36px;border-top:2px dashed #c2cada;padding-top:24px}.story-game-heading img{height:115px;width:75px;object-fit:contain;mix-blend-mode:multiply}.story-game-heading h2{margin:0}.source-note{font-size:14px;color:#68798e;line-height:1.5}.story-paper h3{font-size:19px;line-height:1.4;margin-bottom:5px}
@media(max-width:800px){.collection-screen{padding:30px 22px}.collection-heading h1{font-size:44px}.game-library{gap:20px}.game-info{padding:20px}.game-info h2{font-size:25px}.game-info .eyebrow{font-size:10px}.game-buttons{align-items:stretch;flex-direction:column}.game-buttons .primary{gap:15px}.game-cover{height:195px}.game-cover .game-character{right:15px;height:150px}.game-box.maze .game-character{height:128px}.game-cover .boss-preview{right:86px;width:74px}.collection-bottom{align-items:flex-start;flex-direction:column}.controls .action-button{width:95px}}
@media(max-width:560px){.collection-screen{padding:28px 17px}.collection-heading h1{font-size:40px}.collection-heading>p{display:none}.game-library{grid-template-columns:1fr}.game-cover{height:170px}.game-info{padding:22px}.game-info h2{font-size:29px}.game-info .eyebrow{font-size:10px}.game-buttons{flex-direction:row}.game-buttons .primary{font-size:16px;padding:12px 25px}.game-cover .game-character{height:143px;right:36px}.game-cover .boss-preview{right:129px;top:20px;height:110px}.collection-note{font-size:12px}.trophy-shelf{gap:16px}.trophy{max-width:155px;font-size:11px}.mission-strip{font-size:12px;line-height:1.5;flex-wrap:wrap;padding-bottom:8px}.controls{gap:8px;padding-left:0;padding-right:0}.direction-controls,.action-controls{gap:7px}.controls button{width:54px;height:58px}.controls .action-button{width:74px;gap:4px;font-size:21px}.controls .jump-button{width:78px;gap:4px;font-size:21px}.controls .action-button span,.controls .jump-button span{font-size:11px}.controls .control-tip{display:none}.game-hud h2{font-size:15px}.game-hud #level-number{font-size:9px;letter-spacing:.5px}.level-card .badge{max-width:80%;white-space:normal}}
@media(max-height:540px) and (orientation:landscape){.mission-strip{font-size:11px;padding-bottom:5px}.controls .action-button{height:52px}.game-hud h2{font-size:15px}.canvas-wrap{min-height:140px}}

/* Shared name and footer, including the play screen. */
:root{--header-height:76px;--footer-height:36px}
body{min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}
.site-footer{min-height:var(--footer-height);display:flex;align-items:center;justify-content:center;padding:7px 16px;color:#526380;font-size:13px;line-height:22px;text-align:center}
.game-screen{height:calc(100dvh - var(--header-height) - var(--footer-height))}
.wordmark{min-width:0;flex:1;text-align:left}
.wordmark span{letter-spacing:.7px}
.top-actions{flex-shrink:0}
@media(max-width:800px){:root{--header-height:64px}.wordmark span{font-size:12px;letter-spacing:.2px}}
@media(max-width:560px){.wordmark span{max-width:160px;line-height:1.2}.wordmark{font-size:25px}.topbar{gap:8px}}
@media(max-height:540px) and (orientation:landscape){:root{--header-height:48px}.controls{bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--footer-height))}}