/* LAWB's little toy box. Fonts are self-hosted; licenses live beside them. */
@font-face{font-family:DynaPuff;src:url('/fonts/DynaPuff.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:Pixelify;src:url('/fonts/PixelifySans.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'PP Local';src:local('PP Mondwest Regular'),local('PPMondwest-Regular'),local('Mondwest Regular');font-display:swap}
:root{--ink:#374854;--muted:#616e78;--sky:#a7d4f5;--sky-light:#e2f3ff;--ice:#d4eafa;--mist:#c6dded;--snow:#a4d0f0;--paper:#ffffff;--line:#c9d4dc;--spring:cubic-bezier(.2,1.55,.4,1);--body:'PP Local',Pixelify,'Courier New',monospace;--display:DynaPuff,'Arial Rounded MT Bold',sans-serif}
body{background:#ffffff;color:var(--ink);font:18px/1.5 var(--body);background-image:radial-gradient(#cdd8df99 .8px,transparent .8px);background-size:18px 18px;isolation:isolate;overflow-x:clip}
::selection{background:#b2d8f4;color:#23333f}
button,input,textarea,select{font-family:var(--body)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.15}
h1{font-size:clamp(44px,5.25vw,76px)}h2{font-size:clamp(30px,3vw,44px)}h3{font-size:22px}
a,button{transition:transform .38s var(--spring),box-shadow .25s,background .2s,color .2s,filter .25s}
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #44789e;outline-offset:5px}button:disabled{transform:none!important;cursor:wait;opacity:.55}
.ui-icon{width:24px;height:24px;display:inline-block;flex:none;vertical-align:middle;overflow:visible;stroke-linecap:round;stroke-linejoin:round}
[data-icon]{display:inline-flex;align-items:center;justify-content:center}
.wallpaper{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.wallpaper:before,.wallpaper:after{content:'';position:absolute;width:480px;height:450px;border-radius:45% 55% 65% 35%;filter:blur(2px);opacity:.35;transform:rotate(25deg)}.wallpaper:before{background:#c6e1f4;left:-300px;top:15%}.wallpaper:after{background:#ccdeea;right:-350px;top:60%}.wallpaper>span{position:absolute;font:80px var(--display);color:#ccd9e38c;left:1%;top:42%}.wallpaper>span:nth-child(2){left:auto;right:1%;top:17%;color:#c1d5e4}.wallpaper>span:nth-child(3){top:85%;font-size:100px;color:#cddae3}.wallpaper>span:nth-child(4){top:90%;left:90%;color:#9fcbeb}
.button{background:var(--ice);border:2px solid #a2bcce;border-radius:22px;box-shadow:0 5px 0 #a2bcce,0 9px 18px #a2bcce25,inset 0 3px 0 #ffffffa8;padding:13px 22px;font-family:var(--display);font-size:16px;font-weight:500;gap:12px;color:var(--ink)}
.button:hover{background:#dff2ff;box-shadow:0 8px 0 #a2bcce,0 14px 24px #b3d0e44d,inset 0 3px 0 #fff;transform:translateY(-3px) rotate(-1deg)}
.button:active{transform:translateY(4px) scale(.97,1.02);box-shadow:0 1px 0 #a2bcce,inset 0 3px 0 #fff8}
.primary{background:var(--sky);border-color:#7db1d6;box-shadow:0 6px 0 #7db1d6,0 10px 22px #9dcaea36,inset 0 3px 0 #dff2ff;color:#2f4453}
.primary:hover{background:#bce3ff;box-shadow:0 9px 0 #7db1d6,0 14px 32px #9bccef6e,inset 0 3px 0 #f2faff}
.primary:active{box-shadow:0 1px 0 #7db1d6,inset 0 2px 0 #e4f4ff}
.icon-button{border:2px solid #b2c3d0;background:var(--paper);box-shadow:0 3px 0 #b2c3d0;min-width:40px;min-height:40px;color:var(--ink)}.icon-button:hover{transform:translateY(-3px) rotate(-8deg);background:var(--snow);box-shadow:0 6px 0 #b2c3d0}.icon-button:active{transform:translateY(2px) scale(.9);box-shadow:0 1px 0 #b2c3d0}
.text-button{font-size:14px;color:var(--ink);border-radius:8px;text-underline-offset:4px}.text-button:hover{color:#3d749c;transform:translateY(-2px);text-decoration-thickness:2px}
.eyebrow{font-family:var(--body);font-size:14px;letter-spacing:.075em;color:#516c80;font-weight:500}.fine{font-size:14px;color:var(--muted)}.muted{color:var(--muted)}.error{color:#2a71a4}
.pill{font-size:13px;padding:5px 11px;background:var(--mist);color:#344856;border:1px solid #adc4d4;font-weight:500}.peach{background:#d2e8f8;color:#3d6480;border-color:#acd0ea}.yellow{background:#b8daf3;color:#244f6e;border-color:#80b7df}.purple{background:#dff2ff;color:#446780;border-color:#b9d4e8}.gray{background:#eaeff2;color:#586b78;border-color:#d0dae1}
.dot,.tiny-light{width:8px;height:8px;background:#43657e;border-radius:50%;box-shadow:0 0 0 3px #83abc830,0 0 9px #588eb54f;display:inline-block;flex:none}
.site-header{max-width:1440px;min-height:118px;padding:14px 4% 11px;gap:26px}.brand,.brand img{width:145px;height:96px}.brand{filter:drop-shadow(0 5px 0 #81adcc33)}.brand:hover{transform:rotate(-7deg) scale(1.08);filter:drop-shadow(0 6px 10px #80beea4d)}
.site-header nav{gap:9px;flex-wrap:nowrap}.site-header nav a{--nav:#dcebf5;--nav-edge:#b6cedf;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;padding:9px 15px 8px;border:2px solid transparent;border-radius:24px;font:13px var(--display);position:relative;white-space:nowrap;min-height:76px;box-shadow:none}
.site-header nav a:nth-child(2){--nav:#cddeeb;--nav-edge:#a3bbcd}.site-header nav a:nth-child(3){--nav:#a9d3f1;--nav-edge:#7cb5de}.site-header nav a:nth-child(4){--nav:#cbe6f9;--nav-edge:#a4c9e3}.site-header nav a:nth-child(5){--nav:#cfe8f5;--nav-edge:#a6cbdc}
.nav-icon{background:var(--nav);border-radius:12px;width:34px;height:31px;box-shadow:inset 0 2px 0 #fff8;transition:transform .4s var(--spring)}.nav-icon .ui-icon{width:22px;height:22px}
.site-header nav a[aria-current=page]{background:var(--nav);border-color:var(--nav-edge);box-shadow:0 4px 0 var(--nav-edge),inset 0 3px 0 #fff8;font-weight:500}.site-header nav a[aria-current=page] .nav-icon{box-shadow:none}
.site-header nav a:hover{background:var(--nav);border-color:var(--nav-edge);transform:translateY(-4px);box-shadow:0 6px 0 var(--nav-edge),0 12px 22px #b1c4d230}.site-header nav a:hover .nav-icon{transform:rotate(-12deg) scale(1.2)}.site-header nav a:active{transform:translateY(3px) scale(.97);box-shadow:0 1px 0 var(--nav-edge)}
.header-play{background:var(--snow);border-color:#71afdb;box-shadow:0 5px 0 #71afdb,inset 0 3px 0 #dbedf9;white-space:nowrap;font-size:15px;padding:14px 18px;border-radius:24px;transform:rotate(2deg)}.header-play:hover{background:#c3e0f5;box-shadow:0 8px 0 #71afdb,0 12px 24px #7abbe955;transform:rotate(-2deg) translateY(-3px)}
#main,.utility,.site-footer{max-width:1264px}.utility{border:0;background:#ffffffb8;border-radius:14px;min-height:44px;padding:5px 12px;font-size:13px;gap:12px}.utility nav{gap:9px}.utility nav>span[aria-hidden]{color:#879dac}.utility-actions{gap:15px;font-size:12px}.utility-actions .text-button{font-size:12px}.utility #role-tag{font-size:12px;color:var(--muted)}
.sound-toggle.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;white-space:nowrap;min-height:34px;font-size:13px;background:#e7f0f6;border-color:#c2d3df;box-shadow:0 2px 0 #c2d3df;color:var(--ink)}.sound-toggle .ui-icon{height:17px;width:17px}.sound-toggle[aria-pressed=true]{background:var(--mist);border-color:#a4bbcb;box-shadow:0 2px 0 #a4bbcb;color:#344653}
.intro{padding:30px 0 4px;gap:30px;align-items:center}.intro h1{line-height:1.05;margin:0}.intro h1 em{font-style:normal;color:#4985b0;display:inline-block;text-shadow:0 4px 0 #d4e7f5;transform:rotate(-1.5deg)}.intro .eyebrow{display:flex;align-items:center;gap:9px;font-size:13px;margin-bottom:13px}.intro .eyebrow:before{content:'';height:7px;width:7px;border-radius:50%;background:#6490af;box-shadow:0 0 0 4px #d8e9f5}
.intro .handnote{font:17px/1.45 var(--body);color:#546e80;background:#bedef4;border:2px solid #88c1ea;border-radius:44% 56% 51% 49%/45% 50% 50% 55%;padding:24px 35px;transform:rotate(7deg);text-align:center;position:relative;box-shadow:0 4px 0 #88c1ea;font-style:normal;max-width:240px;margin:0 18px 0 0}.handnote:before{content:'✦';position:absolute;font-size:31px;left:-15px;top:8px;color:#7ea5c1}.handnote:after{content:'♡';display:block;font:28px var(--display);color:#6694b4;margin-top:2px}
.hero-grid{grid-template-columns:minmax(0,1.9fr) minmax(310px,1fr);gap:24px;margin:28px 0 26px;align-items:stretch}
.hero-photo{border:12px solid #c9deed;border-bottom-width:46px;border-radius:40px;background:#c9deed;box-shadow:0 7px 0 #a6bed0,0 16px 30px #6f93ac15;min-height:455px;overflow:visible;isolation:isolate}
.hero-photo>img{border-radius:24px;width:100%;height:100%;object-fit:cover;border:2px solid #8a9ca9}.hero-photo:after{inset:52% 2px 2px;border-radius:0 0 23px 23px;background:linear-gradient(transparent,#222334bf)}
.console-top{position:absolute;bottom:-36px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.1em;color:#556e7f;z-index:3}.console-top .speaker{display:flex;gap:4px}.speaker i{display:block;width:4px;height:12px;border-radius:4px;background:#9bb6c9;transform:rotate(25deg)}
.photo-tag{top:16px;left:16px;border:1px solid #fff9;box-shadow:0 3px 0 #36424a25;background:#fffffff5;font-size:12px;color:#41515d;padding:6px 12px}.photo-bottom{left:22px;right:22px;bottom:20px;align-items:center}.photo-bottom p{font-size:15px;text-shadow:0 2px 2px #0009;line-height:1.35;max-width:65%}.carousel-controls{gap:8px}.carousel-controls button{background:#f5fbff;color:#405767;border:2px solid #b8cad7;font:22px var(--body);width:37px;height:37px;min-width:37px;min-height:37px;box-shadow:0 3px 0 #8b9fae}.carousel-controls button:hover{background:var(--snow);box-shadow:0 5px 0 #8b9fae}
.launcher{border-radius:38px;background:#e4f4ff;border:2px solid #bed7e9;padding:26px 26px 22px;box-shadow:0 7px 0 #bdd6e8,inset 0 4px 0 #f5fbff,0 16px 25px #8baec712}.launcher h2{font-size:36px;line-height:1.15;margin-bottom:14px}.launcher>.eyebrow{font-size:12px;margin:4px 0 14px}.launcher p{font-size:16px;line-height:1.4;color:#556a79;margin-bottom:15px;max-width:285px}.launcher label{font-size:14px;margin-top:16px}.launcher input{margin:0 0 15px;min-height:44px}.launcher .button{font-size:16px;padding:16px 10px;gap:10px}.launch-details{font-size:12px;line-height:1.35;margin-top:17px;gap:16px;color:#556a79}.sub-link{font-size:13px;margin-top:10px}.launcher .pill{align-self:flex-start;font-size:12px;max-width:100%}
.sticker{background:#c1dff5;border:2px solid #82b9e1;border-radius:18px 22px 19px 23px;box-shadow:0 4px 0 #82b9e1;right:21px;top:18px;width:48px;height:48px;color:#5b89aa;transform:rotate(12deg)}.sticker .ui-icon{width:30px;height:30px}.launcher:hover .sticker{animation:sticker-wiggle .6s var(--spring)}
.journey{border-bottom:0;gap:18px;padding:12px 0 28px}.journey a{padding:19px 16px;border:2px solid #c5d6e3;background:#e6f3fc;box-shadow:0 4px 0 #c5d6e3;border-radius:25px;align-items:center;gap:14px}.journey a:nth-child(2){background:#e4edf3;border-color:#c0d0dc;box-shadow:0 4px 0 #c0d0dc}.journey a:nth-child(3){background:#cde5f7;border-color:#a0c9e6;box-shadow:0 4px 0 #a0c9e6}.journey a:hover{transform:translateY(-5px) rotate(-1deg);filter:brightness(1.02)}.journey b{background:#fff9;height:44px;width:44px;border-radius:15px;color:#607a8c;font:21px var(--display);box-shadow:inset 0 2px 0 #fffb;transform:rotate(-7deg)}.journey h3{font-size:17px;letter-spacing:-.02em}.journey p{font-size:14px;color:#616f79;line-height:1.35}
.section{padding:37px 0}.section-heading{margin-bottom:24px;align-items:center}.section-heading h2{font-size:37px}.section-heading a{font-size:15px;padding:10px 0}.section-heading .eyebrow{font-size:12px}.section-heading a:hover{color:#4987b3;transform:translateX(3px)}
.update-card{background:var(--paper);border:2px solid #cfdae2;border-radius:28px;padding:11px;box-shadow:0 5px 0 #dce4e9;overflow:hidden}.update-card:hover{transform:translateY(-7px) rotate(-.7deg);box-shadow:0 10px 0 #c4d2dc,0 18px 30px #b7cad840;border-color:#a4b9c8}.update-card>img{border-radius:18px;border:1px solid #c2ccd4;transition:filter .3s}.update-card:hover>img{filter:saturate(1.08)}.card-body{padding:18px 13px 12px}.card-meta{font-size:13px;color:#657581;margin-bottom:14px}.update-card h3{font-size:23px;line-height:1.22}.update-card p{font-size:16px;color:var(--muted);line-height:1.45}.card-link{font-size:14px;color:#456e8c;display:inline-flex;align-items:center;gap:10px}.card-link:after{content:'+';background:var(--sky-light);border-radius:50%;width:23px;height:23px;display:grid;place-items:center;transition:transform .4s var(--spring)}.update-card:hover .card-link:after{transform:rotate(90deg)}
.page-header{padding:32px 0 16px}.page-header h1{font-size:clamp(38px,4.6vw,62px);max-width:1000px;line-height:1.13}.page-lede{font-size:18px;color:var(--muted);max-width:760px;margin-bottom:14px}.page{animation:toy-arrive .6s var(--spring);transform-origin:50% 80px}.page-header .eyebrow{display:inline-flex;background:var(--ice);padding:6px 13px;border-radius:9px;transform:rotate(-1deg);font-size:13px;color:#49677d}
.chip{font-size:14px;background:#ffffff;border:2px solid #c7d4dd;padding:9px 15px;box-shadow:0 3px 0 #c7d4dd;border-radius:15px}.chip:hover{background:#e0eef8;transform:translateY(-3px) rotate(-1deg);box-shadow:0 5px 0 #c7d4dd}.chip[aria-pressed=true],a.chip[aria-current=page]{background:#4c677b;color:#f8fcff;border-color:#334d5f;box-shadow:0 3px 0 #334d5f}.chip:active{transform:translateY(3px);box-shadow:0 0 0 #c7d4dd}
.task-card,.feedback-card{border:2px solid #cfd8df;box-shadow:0 4px 0 #dce4e9;background:var(--paper);border-radius:26px;padding:25px}.task-card:hover{border-color:#9eb7c9;box-shadow:0 7px 0 #bed5e5,0 12px 20px #b0c6d530;transform:translateY(-4px)}.task-card h3{font-size:23px}.task-card p{font-size:17px;color:var(--muted)}.byline{font-size:13px;color:#61717d}.task-done{background:#e4ecf1;border:2px solid #c2cfd8;border-radius:28px;box-shadow:0 5px 0 #c2cfd8}.task-done h2{font-size:27px}.task-done>a{border-color:#bfccd5}.task-done h3{font-size:17px}.task-done p{font-size:14px;color:#576670}.count{font-family:var(--body);background:#c7d8e4;color:#3d5566}.task-done .eyebrow{color:#526a7c}.task-done>a:hover{color:#375164}.task-top{flex-wrap:wrap}
input,select,textarea{border:2px solid #bccdd9;background:#ffffff;border-radius:15px;padding:10px 13px;box-shadow:inset 0 3px 0 #dce3e860;transition:box-shadow .2s,border-color .2s;font-size:17px}input:focus,textarea:focus,select:focus{border-color:#6a8ea7;box-shadow:0 0 0 4px #b9d4e850;outline:none}input::placeholder,textarea::placeholder{color:#7f8c95}label{font-size:15px;font-weight:400}
.feedback-form{background:#f0f9ff;border:2px solid #c7dceb;box-shadow:0 5px 0 #c4dae9;border-radius:28px}.feedback-form h2{font-size:28px}.feedback-form>p{font-size:15px;color:#5b7180}.feedback-card>p{font-size:18px}.feedback-card footer{font-size:13px;color:#647581}.review-note{background:#e1edf6;color:#516e83;border:1px solid #c6d9e6;font-size:15px}.vote-actions{flex-wrap:wrap}.vote-actions button{font-size:14px;background:#e6ecf0;border:2px solid #bdcad3;border-radius:14px;box-shadow:0 2px 0 #bdcad3}.vote-actions button:hover{transform:translateY(-3px)}.vote-actions button[aria-pressed=true]{background:#526979;color:white}.command-list{gap:10px}code{font:15px var(--body);background:#e0edf6;color:#4d6c82;border:1px solid #bfd5e5;padding:6px 11px;border-radius:10px}.empty{background:#e6eff5;color:#587183;border:2px dashed #b2c6d5}
.aside-note{background:#bedef4;border:2px solid #9bc6e4;box-shadow:0 5px 0 #9bc6e4;border-radius:27px}.aside-note p{font-size:16px}.aside-note a{font-size:15px}.aside-note hr{border:0;border-top:2px dashed #88b8db;margin:23px 0}.style-intro{background:#dfe8ef;border:2px solid #bdccd7;box-shadow:0 5px 0 #bdccd7}.style-intro h2{font-size:36px}.style-intro p,.principles p{color:#51616c;font-size:16px}.principles h3{font-size:17px;letter-spacing:0}.principles{gap:24px}.swatches span{border:2px solid #ffffff90;box-shadow:0 3px 0 #a0aab270}.style-section-head h2{font-size:32px}.style-section-head p{font-size:17px;color:var(--muted)}
.gallery figure{border:2px solid #cdd6dd;background:var(--paper);box-shadow:0 4px 0 #d8e0e5;border-radius:26px}.gallery img,.detail-media img{background:#e1e9ee}.gallery figcaption,figcaption{font-size:14px;color:var(--muted)}.image-button{position:relative;border-radius:18px;overflow:hidden}.image-button:after{content:'↗';position:absolute;bottom:12px;right:12px;background:#f4faff;color:#48657a;border:2px solid #b7cede;box-shadow:0 3px 0 #a3bacb;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:20px;transition:transform .35s var(--spring)}.image-button:hover{transform:scale(.985)}.image-button:hover:after{transform:rotate(10deg) scale(1.15);background:var(--snow)}
.guide-card{background:var(--paper);border:2px solid #cdd6dd;box-shadow:0 5px 0 #d9e1e6;border-radius:28px}.guide-card p{color:var(--muted);font-size:17px}.controls-list>div{border-color:#c9d5de;font-size:16px}.controls-list kbd{font:14px var(--body);background:#e2eef7;border:2px solid #b2c9da;border-bottom-width:4px;border-radius:8px;white-space:normal;display:inline-block}.detail-page h1{font-size:clamp(36px,4.8vw,62px)}.summary{color:#5e707c;font-size:21px}.detail-body{font-size:19px;line-height:1.7}.detail-footer{border-color:#ccd8e0}.developer-note{background:#e7f0f6;color:#557083;border:2px dashed #a3bed1}.developer-note p{font-size:14px}
.site-footer{border-top:2px dashed #c9d6df;margin-top:38px;padding-top:30px;padding-bottom:40px;gap:25px}.site-footer>img{width:115px}.site-footer strong{font:19px var(--display)}.site-footer p{font-size:15px;color:var(--muted)}.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.footer-links a{font-size:15px;text-decoration:underline}.footer-links button{font-size:13px}.site-footer .footer-links{flex:none}
.lightbox,.review-dialog{background:#f7fcff;color:var(--ink);border:3px solid #b5c9d8;border-radius:28px;box-shadow:0 10px 0 #7b93a55e,0 30px 100px #1a364a50}.lightbox[open],.review-dialog[open]{animation:modal-pop .45s var(--spring)}.lightbox::backdrop,.review-dialog::backdrop{background:#2b3e4b99;backdrop-filter:blur(8px)}.lightbox p{font-size:16px}.review-dialog h2{font-size:31px}.review-dialog .eyebrow{font-size:13px}.toast{background:#466175;border:2px solid #86a6bd;box-shadow:0 5px 0 #2436424d,0 12px 30px #314a5c40;color:#f5fbff;font-size:17px;border-radius:22px;animation:toast-pop .5s var(--spring)}
.welcome-gate{background:transparent;position:relative;padding:30px 20px}.gate-logo{width:min(300px,65vw);margin-bottom:14px;filter:drop-shadow(0 5px 0 #7ca7c530)}.gate-card{background:#f2faff;border:3px solid #bad4e7;box-shadow:0 9px 0 #a9c3d6,0 20px 60px #97b2c630,inset 0 4px 0 #fff;border-radius:40px;position:relative;max-width:620px;padding:32px 42px}.gate-card h1{font-size:55px;color:#4c6c82}.gate-card p{color:#617786;font-size:18px}.gate-card .fine{font-size:12px;margin:22px 0 0}.gate-charm{position:absolute;right:-18px;top:22px;width:60px;height:60px;background:#b2d7f2;border:2px solid #79b1d9;border-radius:22px;box-shadow:0 4px 0 #79b1d9;transform:rotate(13deg)}.gate-charm svg{width:38px;height:38px;color:#6691af}.gate-footer{display:flex;align-items:center;gap:25px;margin:24px 0;color:#6f828f;font-size:15px}.gate-card .eyebrow{font-size:13px}.input-action{align-items:stretch}.input-action .button{font-size:14px;gap:9px;min-width:130px}
/* A user-initiated start screen unlocks sound. The dialog keeps focus inside. */
.splash{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:35px 20px;border:0;background:#f0f6fa;color:var(--ink);overflow:auto;background-image:radial-gradient(#bdcfdc 1px,transparent 1px),radial-gradient(ellipse at 20% 20%,#c2e0f5,transparent 50%),radial-gradient(ellipse at 80% 85%,#d1ecff,transparent 50%);background-size:22px 22px,auto,auto;text-align:center;overscroll-behavior:contain}.splash[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;animation:splash-in .35s ease-out}.splash::backdrop{background:#f0f6fa}.splash-shell{width:min(560px,92vw);border:3px solid #a0bacd;border-radius:48px 48px 80px 48px;background:#d0e4f2;padding:20px 24px 16px;box-shadow:0 12px 0 #a0bacd,0 23px 0 #a0bacd22,0 30px 65px #63819730,inset 0 5px 0 #edf8ff;transform:rotate(-2deg);animation:console-in .85s var(--spring)}.splash-topline{font-size:12px;letter-spacing:.09em;display:flex;gap:10px;align-items:center;padding:0 7px 13px;color:#577489}.splash-topline>span:last-child{margin-left:auto}.splash-screen{background:#ffffff;border:3px solid #a5bbcb;border-radius:30px;padding:12px 25px 22px;box-shadow:inset 0 5px 0 #bfccd533;position:relative}.splash-logo{width:320px;max-width:80%;margin:-5px auto 0;filter:drop-shadow(0 6px 0 #5590bb30);animation:logo-hello 1s var(--spring)}.splash h1{font-size:43px;color:#52738b;line-height:1.1;margin:0 0 10px}.splash p{font-size:16px;color:#71808b;margin:0 0 22px}.start-button{min-width:210px;font-size:21px;border-radius:22px;padding:13px 25px}.splash-sound{display:flex;gap:8px;align-items:center;justify-content:center;font-size:14px;margin-top:20px;cursor:pointer}.splash-sound input{accent-color:#587f9b;width:17px;height:17px;box-shadow:none;margin:0}.splash-sound .ui-icon{width:17px;height:17px}.splash-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px;font-size:11px;color:#66859b}.toy-dpad{font:bold 62px/1 sans-serif;color:#92b2c8;text-shadow:0 3px 0 #7296af;display:block;width:58px}.toy-ab{display:flex;gap:10px;transform:rotate(-14deg);padding-right:14px}.toy-ab i{border-radius:50%;background:#acd4f1;border:2px solid #8eb3cd;box-shadow:0 4px 0 #7395ad,inset 0 2px 0 #e5f4ff;width:30px;height:30px;display:grid;place-items:center;font-style:normal;color:#4e7795}.splash-skip{font-size:14px;opacity:.85;padding:7px 18px}.splash-spark{position:absolute;color:#99bed9;font:50px var(--display);top:55px;left:15px;transform:rotate(-15deg)}.spark-two{left:auto;right:14px;top:150px;font-size:36px;color:#5ca1d2}.splash.leaving{animation:splash-out .4s ease-in both;pointer-events:none}.splash.leaving .splash-shell{animation:console-out .4s ease-in both}
.click-spark{position:fixed;pointer-events:none;z-index:1000;font:22px var(--display);color:#79b0d8;line-height:1;filter:drop-shadow(0 1px 0 #fff);will-change:transform,opacity}.toy-reveal{animation:reveal-pop .6s var(--spring) both}.ui-icon .claw-left,.ui-icon .claw-right{transform-origin:12px 16px;transition:transform .3s var(--spring)}a:hover .claw-left,button:hover .claw-left{transform:rotate(13deg)}a:hover .claw-right,button:hover .claw-right{transform:rotate(-13deg)}
@keyframes toy-arrive{0%{opacity:0;transform:translateY(20px) scale(.985)}70%{opacity:1;transform:translateY(-3px) scale(1.002)}100%{transform:none}}
@keyframes reveal-pop{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes modal-pop{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toast-pop{from{opacity:0;translate:0 25px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
@keyframes sticker-wiggle{0%,100%{transform:rotate(12deg)}30%{transform:rotate(-12deg) scale(1.1)}65%{transform:rotate(20deg)}}
@keyframes console-in{from{opacity:0;transform:translateY(50px) rotate(-6deg) scale(.9)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes logo-hello{0%{transform:scale(.7) rotate(-12deg)}70%{transform:scale(1.06) rotate(2deg)}100%{transform:none}}
@keyframes splash-in{from{opacity:0}to{opacity:1}}@keyframes splash-out{to{opacity:0}}@keyframes console-out{to{transform:translateY(-30px) rotate(2deg) scale(1.1);opacity:0}}
@media(min-width:1421px){#main,.utility,.site-footer{margin-left:auto;margin-right:auto}}
@media(max-width:1100px){.site-header{gap:13px}.site-header nav{gap:5px}.site-header nav a{font-size:11px;padding:8px 10px}.brand,.brand img{width:116px;height:80px}.header-play{padding:13px;font-size:13px}.utility #role-tag{display:none}.hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:20px}.intro .handnote{display:block;font-size:15px;padding:20px 25px}.intro h1{font-size:58px}.launcher{padding:24px 22px}.launcher h2{font-size:31px}.sticker{width:42px;height:42px;right:17px;top:16px}.hero-photo{min-height:460px}.photo-bottom p{font-size:13px;max-width:58%}.journey a{padding:16px 12px;gap:10px}.journey h3{font-size:15px}.journey p{font-size:13px}.journey b{width:34px;height:37px;font-size:18px}.section-heading h2{font-size:32px}}
@media(max-width:760px){body{font-size:17px}.site-header{padding:7px 4% 17px;gap:0;min-height:0}.brand,.brand img{width:117px;height:78px}.header-play{font-size:14px;padding:11px 17px;transform:rotate(2deg)}.site-header nav{gap:4px;justify-content:space-between;margin-top:12px}.site-header nav a{font-size:9px;padding:7px 6px 8px;border-radius:18px;gap:6px;min-height:67px;flex:1}.nav-icon{width:29px;height:28px;border-radius:10px}.nav-icon .ui-icon{width:21px;height:21px}.utility{padding:8px 0;background:transparent;gap:10px;font-size:12px}.utility-actions{gap:10px}.utility-actions .text-button{font-size:11px}.utility-actions #private-notebook{max-width:80px;line-height:1.2}.utility-actions .sound-toggle{font-size:11px;padding:5px 7px;min-height:30px}.utility-actions #dev-toggle{max-width:85px;line-height:1.2}.utility #breadcrumbs{gap:5px;min-width:75px}.intro{padding-top:22px}.intro .eyebrow{font-size:10px;letter-spacing:.03em;margin-bottom:12px}.intro h1{font-size:clamp(37px,9vw,56px);line-height:1.1}.intro .handnote{display:none}.hero-grid{display:flex;flex-direction:column;margin-top:22px;gap:26px}.hero-photo{min-height:310px;border-width:9px;border-bottom-width:38px;border-radius:31px}.hero-photo>img{border-radius:20px}.hero-photo:after{border-radius:0 0 19px 19px}.photo-tag{font-size:10px;top:10px;left:10px;padding:5px 9px}.photo-bottom{bottom:14px;left:13px;right:13px;gap:8px}.photo-bottom p{font-size:12px;max-width:57%}.carousel-controls{gap:5px}.carousel-controls button{width:31px;height:33px;min-width:31px;min-height:33px;font-size:18px}.console-top{bottom:-31px;font-size:10px}.launcher{min-height:0;padding:25px;border-radius:32px}.launcher h2{font-size:36px}.launcher p{max-width:none;font-size:17px}.launcher label{margin-top:20px}.launcher .button{font-size:16px}.sticker{width:55px;height:55px;right:26px;top:23px}.journey{grid-template-columns:1fr;gap:14px;padding-top:12px}.journey a{padding:17px;gap:17px}.journey h3{font-size:18px}.journey p{font-size:15px}.journey b{width:43px;height:43px;font-size:21px}.section-heading{gap:17px;align-items:start}.section-heading h2{font-size:27px}.section-heading .eyebrow{font-size:11px}.section-heading a{font-size:13px;line-height:1.4;max-width:110px;padding:0}.update-card>img{height:220px}.update-card h3{font-size:23px}.card-body{padding:17px 12px}.page-header h1{font-size:37px;line-height:1.17}.page-header .eyebrow{font-size:12px}.page-lede{font-size:17px}.chip{font-size:13px;padding:8px 12px}.task-card h3{font-size:22px}.task-card p{font-size:16px}.task-top{gap:7px}.pill{font-size:12px}.task-done p{font-size:15px}.gallery{grid-template-columns:1fr 1fr;gap:14px}.gallery figure{padding:7px 7px 12px;border-radius:20px}.gallery img{height:160px;border-radius:13px}.gallery figcaption{font-size:13px;padding:0}.gallery .pill{font-size:10px}.style-intro{padding:25px 21px}.style-intro h2{font-size:30px}.principles{gap:20px 15px}.principles h3{font-size:16px}.principles p{font-size:15px}.style-section-head h2{font-size:29px}.style-section-head p{font-size:16px}.image-button:after{width:28px;height:28px;font-size:17px;right:8px;bottom:8px}.site-footer{gap:20px;padding-bottom:30px}.site-footer>img{width:90px}.site-footer>div{min-width:180px}.site-footer strong{font-size:16px}.site-footer .footer-links{width:100%;align-items:flex-start;gap:8px;flex-direction:row;justify-content:space-between;min-width:0}.footer-links a,.footer-links button{font-size:12px;max-width:48%;text-align:left}.gate-card{padding:30px 22px;max-width:100%;border-radius:32px}.gate-card h1{font-size:46px}.gate-charm{right:-8px;width:48px;height:48px;top:14px}.gate-charm svg{width:29px;height:29px}.gate-card .eyebrow{font-size:12px}.gate-card p{font-size:17px}.gate-logo{width:235px}.gate-footer{font-size:13px;gap:15px}.gate-card .fine{font-size:10px}.splash{padding:25px 16px;gap:20px}.splash-shell{padding:16px 15px 14px;border-radius:37px 37px 65px 37px;transform:rotate(-1.5deg)}.splash-topline{font-size:9px;gap:8px;padding:0 4px 11px}.splash-screen{padding:12px 14px 18px;border-radius:25px}.splash-logo{max-width:85%;width:280px}.splash h1{font-size:35px}.splash p{font-size:14px;max-width:230px;margin:10px auto 20px}.splash-sound{font-size:13px}.splash-spark{font-size:32px;left:9px;top:42px}.spark-two{right:9px;left:auto;top:120px;font-size:23px}.start-button{font-size:19px;min-width:190px}.splash-bottom{font-size:9px;gap:8px}.toy-dpad{font-size:50px;width:45px}.toy-ab{gap:7px;padding-right:6px}.toy-ab i{height:27px;width:27px}.splash-skip{font-size:13px}.lightbox p{font-size:14px}.detail-body{font-size:18px}.wallpaper{opacity:.5}}
@media(max-height:740px) and (min-width:761px){.splash-shell{width:470px;padding:14px 20px 12px}.splash-logo{width:240px}.splash h1{font-size:35px}.splash-screen{padding-bottom:16px}.splash p{margin-bottom:15px}.splash-sound{margin-top:15px}.splash-bottom{margin-top:8px}.splash{gap:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.click-spark{display:none}.splash-shell{transform:none!important}.toast{transform:translateX(-50%)!important}}

/* Creator-selected palette: powder blue + white. */
:root{--ink:#34516b;--muted:#637b90;--sky:#bedff5;--sky-light:#e9f5ff;--ice:#d5eaf8;--mist:#e9f4fb;--snow:#fff;--paper:#fff;--line:#c3dbea}
body{background-color:#f8fcff;background-image:radial-gradient(#cbdfea99 .8px,transparent .8px)}
.launcher{background:#e2f1fc}.header-play{background:#fff}.intro h1 em{color:#528ab4;text-shadow:0 4px 0 #d9edf9}
.intro .handnote{background:#fff}.journey a:nth-child(2){background:#fff}.journey a:nth-child(3){background:#eaf5fe}
.splash-screen,.gate-card{background:#fff}.splash-shell{background:#d1e7f7}.splash{background-color:#f2f9ff}
.error{color:#a32e42}.sound-toggle.chip[aria-pressed=true]{background:#c9e6f7;color:#315878;border-color:#9ec7e1;box-shadow:0 2px 0 #9ec7e1}
.splash{overflow-x:hidden}.splash-shell{width:min(560px,calc(100vw - 64px))}
@media(min-width:1101px) and (max-height:850px){
 .site-header{min-height:100px;padding-top:7px;padding-bottom:7px}.brand,.brand img{height:84px;width:130px}
 .intro{padding:17px 0 0;gap:22px}.intro h1{font-size:46px}.intro h1 br{display:none}.intro h1 em{margin-left:.16em}.intro .eyebrow{font-size:11px;margin-bottom:10px}
 .intro .handnote{font-size:13px;padding:15px 19px;max-width:185px;margin:0}.handnote:after{font-size:21px}.handnote:before{font-size:24px}
 .hero-grid{margin-top:19px}.launcher{padding:21px 23px}.launcher h2{font-size:32px;margin-bottom:10px}.launcher p{font-size:15px;margin-bottom:12px}.launcher input{min-height:42px;margin-bottom:12px}.launcher .button{padding:13px 10px}.launch-details{margin-top:13px}.hero-photo{min-height:430px}
}
.category-row{margin-top:-4px}.category-row .chip{font-size:13px;padding:7px 12px;display:inline-flex;gap:8px;align-items:center}.category-row .count{border-radius:9px;padding:1px 7px;font-size:12px}.category-row .chip[aria-pressed=true] .count{background:#6d8ba0;color:#fff}.pill.category{background:#fff;border:2px dashed #9ec7e1;color:#315878}

/* Portal review: a single focus language, comfortable copy, stable field notes. */
:root{--focus:#245d86;--reading-width:66ch;--control-height:44px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.note-cover{min-height:210px;border-radius:18px;background:linear-gradient(145deg,#e2f2fc,#badbea);display:flex;align-items:center;justify-content:center;gap:18px;color:#34516b;font-family:var(--display);padding:24px;text-align:center}
.note-cover svg{width:48px;height:48px;flex:none}
.detail-body{max-width:var(--reading-width);line-height:1.7;letter-spacing:normal}
.guide-card p{line-height:1.65}.controls-list dt{line-height:1.5}.controls-list dd{line-height:1.55}
.carousel-controls button{min-width:var(--control-height);min-height:var(--control-height)}
.button{min-height:var(--control-height)}
.site-header nav a{min-height:var(--control-height)}
@media(max-width:760px){.hero-grid .launcher{order:-1}.intro .handnote{display:none}.launcher h2{font-size:30px}.hero-photo{min-height:330px}.controls-list kbd{white-space:normal}.utility-actions{gap:12px}.note-cover{min-height:150px}.site-header nav{min-width:0;width:100%}.site-header nav a{flex:1 1 0;min-width:0;white-space:normal;text-align:center;padding-inline:3px}}