*,*::before,*::after{box-sizing:border-box}
:root{--navy:#1d2a4d;--indigo:#3d56d6;--pink:#f65c93;--yellow:#ffc53d;--green:#24b573;--paper:#f6f3eb;--white:#fff;--muted:#66708b;--shadow:0 10px 0 var(--navy)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--navy);background:var(--paper);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.skip-link{position:fixed;left:16px;top:-80px;z-index:1000;padding:12px 18px;border-radius:0 0 10px 10px;background:var(--yellow);font-weight:900;transition:top .2s}
.skip-link:focus{top:0}
.site-header{position:absolute;inset:0 0 auto;z-index:20;width:min(1200px,calc(100% - 40px));min-height:92px;margin:auto;display:flex;align-items:center;justify-content:space-between;color:#fff}
.brand{display:flex;align-items:center;gap:12px;font-weight:900}.brand-mark{width:33px;height:33px;display:grid;grid-template-columns:1fr 1fr;gap:3px;transform:rotate(8deg)}
.brand-mark span{border:2px solid var(--navy);background:var(--yellow)}.brand-mark span:nth-child(2),.brand-mark span:nth-child(3){background:var(--pink)}
.brand-name{font-size:20px;letter-spacing:-.04em}.brand-divider{width:1px;height:24px;background:#ffffff66}.brand-section{font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em}
.site-nav{display:flex;gap:8px;padding:5px;border:1px solid #ffffff59;border-radius:999px;background:#1d2a4d29;backdrop-filter:blur(10px)}
.site-nav a{min-width:88px;padding:8px 16px;border-radius:999px;text-align:center;font-size:13px;font-weight:800}.site-nav .is-current{background:#fff;color:var(--navy)}
.hero{position:relative;min-height:730px;color:#fff;background:linear-gradient(135deg,#ffffff14 25%,transparent 25%) 0 0/44px 44px,linear-gradient(315deg,#ffffff0e 25%,transparent 25%) 0 0/44px 44px,var(--indigo);overflow:hidden}
.hero::before{content:"";position:absolute;width:510px;height:510px;left:-260px;bottom:-210px;border:95px solid #ffc53d21;border-radius:50%}.hero::after{content:"";position:absolute;width:380px;height:380px;right:-220px;top:-180px;border:70px solid #f65c9329;border-radius:50%}
.hero-dots{position:absolute;left:6%;top:160px;width:92px;height:92px;opacity:.24;background:radial-gradient(circle,#fff 2px,transparent 3px) 0 0/16px 16px}
.hero-inner{position:relative;z-index:2;width:min(1200px,calc(100% - 40px));min-height:680px;margin:auto;padding:168px 0 120px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px}
.eyebrow{margin:0 0 22px;color:#ffffffbf;font:900 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em}.eyebrow span{display:inline-block;margin-right:10px;padding:3px 10px;border:2px solid var(--navy);border-radius:999px;background:var(--yellow);color:var(--navy);box-shadow:2px 2px 0 var(--navy);transform:rotate(-3deg)}.eyebrow.dark{color:var(--indigo)}
.hero h1{margin:0;font-size:clamp(54px,6.5vw,92px);font-weight:900;letter-spacing:-.07em;line-height:1.08}.hero h1 span{position:relative;display:inline-block;color:var(--yellow);text-shadow:4px 4px 0 var(--navy)}.hero h1 span::after{content:"";position:absolute;left:5px;right:-5px;bottom:5px;height:9px;background:var(--pink);z-index:-1;transform:rotate(-1.5deg)}
.hero-description{margin:28px 0 34px;font-size:17px;font-weight:700;line-height:2}.hero-button{display:inline-flex;min-width:235px;min-height:58px;align-items:center;justify-content:space-between;gap:20px;padding:10px 22px 10px 26px;border:3px solid var(--navy);border-radius:999px;background:var(--yellow);color:var(--navy);box-shadow:0 6px 0 var(--navy);font-size:15px;font-weight:900;transition:.18s}.hero-button span{width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--navy);border-radius:50%;background:#fff}.hero-button:hover,.hero-button:focus-visible{transform:translateY(2px);box-shadow:0 4px 0 var(--navy)}
.hero-visual{position:relative;min-height:440px}.window-card{position:absolute;width:min(100%,480px);right:5px;top:20px;overflow:hidden;border:4px solid var(--navy);border-radius:22px;background:#fff;box-shadow:14px 14px 0 #1d2a4dbf;transform:rotate(3deg)}
.window-bar{height:48px;display:flex;align-items:center;gap:7px;padding:0 15px;border-bottom:4px solid var(--navy);background:#edf0f6}.window-bar i{width:11px;height:11px;border:2px solid var(--navy);border-radius:50%;background:var(--pink)}.window-bar i:nth-child(2){background:var(--yellow)}.window-bar i:nth-child(3){background:var(--green)}.window-bar span{margin-left:auto;color:var(--muted);font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.13em}
.mini-stage{position:relative;height:320px;overflow:hidden;background:linear-gradient(#9be1ff 0 66%,#74d285 66% 78%,#4ab064 78%)}.mini-stage::after{content:"";position:absolute;left:-10%;right:-10%;bottom:56px;height:75px;border-radius:50%;background:#87dd91;border-top:3px solid var(--navy)}
.cloud{position:absolute;width:82px;height:30px;border:3px solid var(--navy);border-radius:30px;background:#fff}.cloud::before,.cloud::after{content:"";position:absolute;bottom:-3px;border:3px solid var(--navy);border-bottom:0;border-radius:50% 50% 0 0;background:#fff}.cloud::before{left:12px;width:32px;height:28px}.cloud::after{right:10px;width:25px;height:20px}.cloud-one{left:48px;top:50px}.cloud-two{right:38px;top:105px;transform:scale(.75)}
.pixel-star{position:absolute;color:var(--yellow);font-size:31px;-webkit-text-stroke:2px var(--navy);z-index:3}.star-one{right:96px;top:34px;transform:rotate(12deg)}.star-two{left:28px;top:142px;font-size:23px}
.cat-shape{position:absolute;z-index:5;left:47%;bottom:40px;width:118px;height:158px;transform:translateX(-50%)}.cat-head{position:absolute;left:19px;top:20px;z-index:2;width:78px;height:67px;border:4px solid var(--navy);border-radius:46%;background:#ff9d2f}.cat-head b{position:absolute;top:24px;width:8px;height:11px;border-radius:50%;background:var(--navy)}.cat-head b:first-child{left:20px}.cat-head b:nth-child(2){right:20px}.cat-head i{position:absolute;width:14px;height:9px;left:29px;bottom:12px;border-bottom:3px solid var(--navy);border-radius:50%}
.cat-ear{position:absolute;z-index:1;top:3px;width:37px;height:40px;border:4px solid var(--navy);background:#ff9d2f;transform:rotate(45deg)}.cat-ear.left{left:18px}.cat-ear.right{right:20px}.cat-body{position:absolute;left:31px;bottom:3px;width:57px;height:84px;border:4px solid var(--navy);border-radius:38px 38px 15px 15px;background:#ff9d2f}.cat-body::before{content:"";position:absolute;left:11px;top:16px;width:27px;height:40px;border-radius:50%;background:#fff4df}.cat-tail{position:absolute;right:1px;bottom:21px;width:49px;height:62px;border:12px solid #ff9d2f;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;filter:drop-shadow(3px 0 0 var(--navy)) drop-shadow(0 -3px 0 var(--navy));transform:rotate(21deg)}
.green-flag{position:absolute;z-index:6;right:15px;bottom:12px;width:43px;height:43px;display:grid;place-items:center;border:3px solid var(--navy);border-radius:50%;background:#fff;color:var(--green);font-size:25px;font-weight:900}
.code-stack{position:absolute;z-index:6;display:grid;gap:4px;padding:9px;border:3px solid var(--navy);border-radius:14px;background:#fff;box-shadow:7px 7px 0 #1d2a4d73}.code-stack span{width:116px;height:25px;border:2px solid var(--navy);border-radius:7px;background:#4c97ff}.code-stack span:nth-child(3){width:90px}.code-stack .cap{background:#ffbf00}.code-one{left:-26px;top:70px;transform:rotate(-8deg)}.code-two{right:-32px;bottom:14px;transform:rotate(7deg)}.code-two span{background:#ffab19}.code-two .cap{background:#59c059}
.hero-badge{position:absolute;z-index:7;left:4px;bottom:13px;width:88px;height:88px;display:grid;place-items:center;align-content:center;border:3px solid var(--navy);border-radius:50%;background:var(--pink);box-shadow:5px 5px 0 var(--navy);font:900 13px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;transform:rotate(-10deg)}.hero-badge strong{font-size:25px}.hero-wave{position:absolute;z-index:3;left:-3%;right:-3%;bottom:-55px;height:112px;border-radius:50% 50% 0 0;background:var(--paper)}
.textbook-section{width:min(1200px,calc(100% - 40px));margin:auto;padding:105px 0 125px;scroll-margin-top:20px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:48px}.section-heading .eyebrow{margin-bottom:10px}.section-heading h2,.future-intro h2{margin:0;font-size:clamp(40px,5vw,68px);font-weight:900;letter-spacing:-.06em;line-height:1.15}.section-heading>p{margin:0 0 6px;color:var(--muted);font-size:15px;font-weight:700}
.textbook-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}.textbook-card{min-width:0}.card-main-link{height:100%;display:grid;grid-template-columns:45% 55%;overflow:hidden;border:4px solid var(--navy);border-radius:28px;background:#fff;box-shadow:var(--shadow);transition:.2s}.card-main-link:hover,.card-main-link:focus-visible{transform:translateY(-5px);box-shadow:0 15px 0 var(--navy);outline:none}.card-cover{position:relative;min-height:450px;overflow:hidden;border-right:4px solid var(--navy);background:var(--indigo)}.maze-card .card-cover{background:#ffcf55}
.cover-topline{position:relative;z-index:8;display:flex;justify-content:space-between;padding:20px 18px}.level-badge,.step-count{display:inline-flex;align-items:center;min-height:27px;padding:3px 10px;border:2px solid var(--navy);border-radius:999px;background:linear-gradient(#f6f8fc,#c6cdda);font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em}.step-count{background:#fff}
.balloon-scene{position:absolute;inset:62px 0 65px;background:radial-gradient(circle,#ffffff29 2px,transparent 3px) 0 0/18px 18px}.balloon{position:absolute;width:67px;height:86px;border:4px solid var(--navy);border-radius:50% 50% 47% 47%;box-shadow:inset 10px 8px 0 #ffffff47}.balloon::before{content:"";position:absolute;left:25px;bottom:-13px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--navy)}.balloon::after{content:"";position:absolute;left:31px;top:calc(100% + 10px);width:3px;height:82px;background:var(--navy);transform:rotate(7deg)}.balloon-pink{left:38px;top:48px;background:var(--pink);transform:rotate(-8deg)}.balloon-yellow{right:25px;top:10px;background:var(--yellow);transform:scale(.72) rotate(8deg)}.balloon-blue{right:50px;bottom:4px;background:#63c7ef;transform:scale(.88) rotate(9deg)}
.aim{position:absolute;width:46px;height:46px;border:3px solid #fff;border-radius:50%;opacity:.85}.aim::before,.aim::after{content:"";position:absolute;background:#fff}.aim::before{left:20px;top:-9px;width:3px;height:59px}.aim::after{left:-9px;top:20px;width:59px;height:3px}.aim-one{left:42px;top:67px}.aim-two{right:60px;bottom:52px;transform:scale(.72)}.shot{position:absolute;left:48%;bottom:24px;color:var(--yellow);font-size:20px;-webkit-text-stroke:3px var(--navy)}
.cover-number{position:absolute;left:-8px;bottom:-37px;color:#ffffff29;font:900 152px/.9 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.13em}.maze-card .cover-number{color:#1d2a4d1a}.cover-label{position:absolute;right:-18px;bottom:96px;color:#ffffffbd;font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em;transform:rotate(-90deg)}.maze-card .cover-label{color:#1d2a4d8f}
.maze-scene{position:absolute;inset:76px 17px 79px;overflow:hidden;border:3px solid var(--navy);border-radius:17px;background:#fff;transform:rotate(-3deg);box-shadow:6px 6px 0 #1d2a4d38}.maze-stage{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.12)}.maze-player,.maze-key,.maze-door{position:absolute;z-index:3;object-fit:contain;filter:drop-shadow(2px 3px 0 #1d2a4d59)}.maze-player{width:53px;left:19px;bottom:24px}.maze-key{width:42px;left:47%;top:39%;transform:rotate(-12deg)}.maze-door{width:46px;right:15px;top:22px}.maze-path{position:absolute;z-index:2;left:49px;bottom:45px;width:122px;height:93px;border-top:4px dashed var(--pink);border-right:4px dashed var(--pink);border-radius:0 22px 0 0;transform:rotate(-10deg)}
.card-content{min-width:0;display:flex;flex-direction:column;padding:38px 31px 31px}.card-kicker{margin:0 0 13px;color:var(--indigo);font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.16em}.card-content h3{margin:0;font-size:clamp(31px,3.2vw,45px);font-weight:900;letter-spacing:-.06em;line-height:1.13}.card-description{margin:23px 0 28px;color:#56617d;font-size:14px;font-weight:700;line-height:1.85}.card-button{width:100%;min-height:52px;margin-top:auto;padding:8px 14px 8px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:3px solid var(--navy);border-radius:999px;background:var(--yellow);font-size:13px;font-weight:900;box-shadow:0 4px 0 var(--navy)}.card-button b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-size:16px}.maze-card .card-button{background:var(--pink);color:#fff}
.textbook-note{margin:34px 0 0;text-align:center;color:var(--muted);font-size:13px;font-weight:800}.textbook-note span{color:var(--pink)}
.future-section{position:relative;padding:112px max(20px,calc((100% - 1200px)/2)) 122px;border-top:4px solid var(--navy);background:linear-gradient(#1d2a4d0e 1px,transparent 1px),linear-gradient(90deg,#1d2a4d0e 1px,transparent 1px),#dbeeff;background-size:24px 24px;overflow:hidden}.future-section::before{content:"FUTURE";position:absolute;right:-20px;top:10px;color:#3d56d612;font:900 clamp(100px,17vw,230px)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.08em}.future-intro{position:relative;z-index:2;max-width:780px;margin-bottom:55px}.future-intro .eyebrow{margin-bottom:12px}.future-intro h2 span{color:var(--indigo)}.future-intro>p:last-child{max-width:650px;margin:24px 0 0;color:#53617c;font-size:16px;font-weight:700}
.future-steps{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}.future-steps li{min-height:315px;padding:24px;display:flex;flex-direction:column;border:3px solid var(--navy);border-radius:24px;background:#ffffffd1;box-shadow:0 7px 0 var(--navy)}.future-steps li:not(.is-now){opacity:.78;box-shadow:none}.future-icon{width:78px;height:78px;display:grid;place-items:center;border:3px solid var(--navy);border-radius:20px;background:#fff;box-shadow:4px 4px 0 var(--navy)}
.book-icon{position:relative;background:var(--yellow)}.book-icon::before,.book-icon::after{content:"";position:absolute;width:26px;height:39px;top:16px;border:3px solid var(--navy);background:#fff}.book-icon::before{left:10px;border-radius:7px 0 0 7px;transform:rotate(-5deg)}.book-icon::after{right:10px;border-radius:0 7px 7px 0;transform:rotate(5deg)}.game-icon{border-radius:50%;background:var(--pink);color:#fff;font-size:38px;font-weight:900}.trophy-icon{background:var(--yellow);color:var(--indigo);font-size:36px;-webkit-text-stroke:2px var(--navy)}
.future-copy{margin-top:auto}.future-meta{display:flex;align-items:end;justify-content:space-between;margin-bottom:9px;color:var(--indigo);font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.15em}.future-meta b{color:#aab3c9;font-size:25px;letter-spacing:-.08em}.future-copy h3{margin:0 0 8px;font-size:24px;font-weight:900;letter-spacing:-.04em}.future-copy p{margin:0;color:#5f6b83;font-size:13px;font-weight:700}
.site-footer{min-height:112px;padding:24px max(20px,calc((100% - 1200px)/2));display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:4px solid var(--navy);background:var(--navy);color:#fff}.site-footer div{display:flex;align-items:center;gap:16px}.site-footer strong{font-size:19px}.site-footer div span{color:#aeb8d1;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em}.site-footer a{display:flex;align-items:center;gap:13px;font-size:13px;font-weight:900}.site-footer a span{width:33px;height:33px;display:grid;place-items:center;border:2px solid #fff;border-radius:50%}
@media(max-width:1080px){.hero-inner{grid-template-columns:.9fr 1.1fr;gap:35px}.textbook-grid{grid-template-columns:1fr;max-width:820px;margin:auto}.card-cover{min-height:405px}.card-content h3{font-size:44px}}
@media(max-width:820px){.site-header{min-height:76px}.brand-divider,.brand-section{display:none}.hero{min-height:980px}.hero-inner{min-height:930px;padding:125px 0 150px;grid-template-columns:1fr;gap:65px}.hero-copy{max-width:640px}.hero-visual{width:min(530px,92%);min-height:430px;margin:auto}.section-heading{display:block}.section-heading>p{margin-top:20px}.future-steps{grid-template-columns:1fr}.future-steps li{min-height:220px;display:grid;grid-template-columns:92px 1fr;align-items:center;gap:18px}.future-copy{margin-top:0}}
@media(max-width:620px){.site-header{width:calc(100% - 28px)}.brand-name{font-size:17px}.brand-mark{width:28px;height:28px}.site-nav a{min-width:0;padding:7px 11px;font-size:11px}.hero{min-height:870px}.hero-inner{width:calc(100% - 34px);min-height:830px;padding-top:115px;gap:48px}.hero h1{font-size:clamp(46px,14.7vw,64px)}.hero-description{font-size:14px}.hero-description br{display:none}.hero-visual{width:100%;min-height:330px}.window-card{width:calc(100% - 14px);right:3px}.mini-stage{height:248px}.cat-shape{transform:translateX(-50%) scale(.76);transform-origin:bottom center}.code-one{left:-14px;top:42px;transform:rotate(-8deg) scale(.72);transform-origin:left top}.code-two{right:-15px;bottom:3px;transform:rotate(7deg) scale(.72);transform-origin:right bottom}.hero-badge{width:71px;height:71px;bottom:-10px}.hero-wave{bottom:-35px;height:72px}.textbook-section{width:calc(100% - 30px);padding:80px 0 90px}.section-heading h2,.future-intro h2{font-size:41px}.desktop-only{display:none}.card-main-link{display:block}.card-cover{min-height:335px;border-right:0;border-bottom:4px solid var(--navy)}.card-content{min-height:355px;padding:30px 25px 27px}.card-content h3{font-size:37px}.cover-number{font-size:125px}.maze-scene{inset:70px 32px 58px}.future-section{padding:82px 17px 92px}.future-intro>p:last-child{font-size:14px}.future-steps li{min-height:0;padding:20px;grid-template-columns:68px 1fr;gap:14px}.future-icon{width:60px;height:60px;border-radius:16px}.book-icon::before,.book-icon::after{width:20px;height:31px;top:11px}.book-icon::before{left:8px}.book-icon::after{right:8px}.future-copy h3{font-size:20px}.future-copy p{font-size:12px}.site-footer{min-height:145px;flex-direction:column;align-items:flex-start;justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}