:root{--ink:#192b38;--lime:#d6f475;--paper:#fbfaf5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px 'Trebuchet MS',sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,a{cursor:pointer}button,input{font:inherit}button{border:1px solid #cbd0c8;border-radius:30px;background:transparent;padding:10px 17px;color:inherit}button:hover{background:#e3edc8}a{color:inherit;text-decoration:none}header{max-width:1320px;margin:auto;padding:27px 40px;border-bottom:1px solid #d9ddd2;display:flex;justify-content:space-between;align-items:center}.brand{font:700 26px 'Trebuchet MS';letter-spacing:-1.5px}.brand span{color:#70962d}.brand small{display:block;font-size:10px;letter-spacing:3px}nav{display:flex;gap:24px;align-items:center}main{max-width:1240px;margin:auto;padding:0 30px}.hero{padding:75px 0 65px;display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:700}h1{font:700 clamp(42px,5vw,66px)/1.06 'Trebuchet MS';letter-spacing:-3px;margin:22px 0}em{font-style:normal;color:#739936}.hero p{color:#5a696b}.cta{display:inline-block;background:var(--ink);color:white;padding:17px 24px;border-radius:30px;margin-top:16px}.hero .note{font-size:12px;margin-top:22px}.heroArt{position:relative;height:330px;background:#e9eddc;border-radius:46% 46% 35% 35%;transform:rotate(-4deg)}.tile{position:absolute;width:140px;height:140px;border:3px solid var(--ink);border-radius:26px;display:grid;place-items:center;font:700 70px 'Trebuchet MS';box-shadow:7px 8px 0 var(--ink)}.t1{background:#d6f475;top:15px;left:40px;transform:rotate(-12deg)}.t1 sup{font-size:25px;position:absolute;right:25px;top:25px}.t2{background:#f9a789;right:35px;top:35px;transform:rotate(12deg)}.t3{background:#b7b2ed;bottom:25px;left:65px;transform:rotate(8deg)}.t4{background:#ffcf60;right:10px;bottom:5px;transform:rotate(-10deg)}.heroArt>span{position:absolute;bottom:-32px;left:50px;font:700 10px 'Trebuchet MS';letter-spacing:2px}.sectionHead{display:flex;justify-content:space-between;align-items:center;gap:15px}h2{font:700 28px 'Trebuchet MS';letter-spacing:-1px}.sectionHead span{font-size:13px;background:#e8ebde;border-radius:20px;padding:5px 9px;vertical-align:middle}input{border:1px solid #cbd0c8;background:white;padding:13px 20px;border-radius:30px;width:280px}#filters{display:flex;gap:9px;margin:14px 0 28px;flex-wrap:wrap}.active{background:var(--ink)!important;color:white!important}#cards{display:grid;grid-template-columns:repeat(4,1fr);gap:23px}.card{border:1px solid #d8dccf;border-radius:18px;overflow:hidden;background:white;transition:transform .18s;position:relative}.card:hover{transform:translateY(-5px)}.cover{height:155px;display:grid;place-items:center;overflow:hidden;font:700 65px 'Trebuchet MS';letter-spacing:-5px}.cover span{transform:rotate(-9deg);text-shadow:3px 4px 0 #ffffff70}.cardBody{padding:17px}.card h3{margin:0 0 7px;font:700 19px 'Trebuchet MS';letter-spacing:-.5px}.card p{font-size:12px;color:#627075;margin:0}.tag{font-size:10px;text-transform:uppercase;letter-spacing:1px}.star{position:absolute;right:10px;top:10px;background:#ffffffbb;padding:4px 9px;font-size:18px}.about{margin:65px 0;background:#e9eddc;padding:30px 40px;border-radius:20px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}.about p{line-height:1.7;color:#586467}footer{padding:30px 40px;border-top:1px solid #d9ddd2;font:700 13px 'Trebuchet MS';display:flex;justify-content:space-between}footer span{font-weight:400}dialog{width:min(820px,96vw);max-height:94vh;overflow:auto;border:0;border-radius:22px;padding:25px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#12232cbb;backdrop-filter:blur(6px)}.modalTop,.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px}.modalTop h2{margin:5px 0}.modalTop small{letter-spacing:2px;font-size:10px}.toolbar{padding:12px 0}.toolbar strong{font-size:14px}#stage{background:#e9eddf;border-radius:15px;padding:15px;min-height:250px;text-align:center;touch-action:none}#stage canvas{max-width:100%;height:auto;border-radius:10px;touch-action:none}#controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:14px}.hint{font-size:11px;color:#6a7778}.board{display:grid;gap:6px;max-width:420px;margin:auto}.cell{border:0;border-radius:8px;padding:0;min-height:50px;background:#fff;font:700 22px 'Trebuchet MS';display:grid;place-items:center}.cell:disabled{color:var(--ink);opacity:1}.big{font:700 65px 'Trebuchet MS';padding:25px}.answer{width:130px;margin:10px}.muted{opacity:.3}@media(max-width:900px){#cards{grid-template-columns:repeat(3,1fr)}.hero{gap:15px}.tile{width:110px;height:110px}.heroArt{height:300px}}@media(max-width:650px){header{padding:20px}nav{gap:7px}nav>a{display:none}nav button{font-size:11px;padding:8px}.hero{grid-template-columns:1fr;padding-top:35px}.heroArt{height:230px;margin:15px 20px 25px}.tile{width:100px;height:100px;font-size:55px}.hero h1{font-size:46px}#cards{grid-template-columns:repeat(2,1fr);gap:12px}.cover{height:125px;font-size:50px}.cardBody{padding:13px}.card h3{font-size:16px}main{padding:0 18px}.sectionHead{align-items:start;flex-direction:column}input{width:100%}.about{grid-template-columns:1fr;gap:0;padding:24px}footer{gap:15px;font-size:10px}.toolbar button{font-size:12px;padding:8px}.cell{min-height:44px}}
/* Expanded experience surfaces */
dialog.expanded{width:min(1140px,98vw)}.ex-shell{text-align:center;width:100%;color:#edf4ff;background:#152531;border-radius:14px;overflow:hidden}.ex-shell canvas{width:100%;height:auto;vertical-align:middle;touch-action:none;outline:none}.ex-hud{font-size:13px;font-weight:700;background:#10202d;padding:12px 16px;min-height:40px;color:#d6f475;line-height:1.5}.ex-panel{padding:12px;display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:8px;background:#10202d}.ex-panel button{color:#edf4ff;border:1px solid #4c6271;border-radius:10px;background:#233b4a;font-size:12px;max-width:100%;padding:10px 15px}.ex-panel button:hover{background:#365468}.ex-panel button:disabled{opacity:.4;cursor:default}.ex-panel input,.ex-panel select{font-size:13px;padding:7px 12px;width:auto;max-width:100%}.ex-panel p{width:100%;margin:6px 0;font-size:12px;color:#b2c2ce}.ex-pad{display:flex;gap:8px}.ex-pad button{min-width:50px;user-select:none}.ex-pad .held{background:#d6f475}.ex-shell:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#09121c;overflow:auto}.ex-shell:fullscreen canvas{width:min(100%,150vh);max-height:82vh;object-fit:contain;align-self:center}#stage:has(.ex-shell){padding:0;background:#152531}.newBadge{position:absolute;left:11px;top:11px;background:#fff8;padding:4px 8px;border-radius:20px;font:700 10px 'Trebuchet MS';letter-spacing:1px}.cover-art{background-size:cover;background-position:center}.cover-art span{visibility:hidden}.ex-levels{display:flex;gap:5px;flex-wrap:wrap}.ex-stat{padding:8px 16px;background:#213a4b;border-radius:9px}.ex-panel small{color:#b9cbd6}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #bb8bff;outline-offset:3px}@media(max-width:650px){dialog.expanded{padding:12px}.ex-panel{padding:8px;gap:5px}.ex-panel button{padding:9px;font-size:11px}.ex-hud{font-size:11px}.ex-pad button{min-width:44px}.toolbar{flex-wrap:wrap}.toolbar>div{display:flex;gap:5px}#controls{gap:5px}}
dialog.expanded:fullscreen{max-width:none;max-height:none;width:100vw;height:100vh;border-radius:0;background:#fbfaf5;overflow:auto}dialog.expanded:fullscreen #stage{max-width:1200px;margin:auto}dialog.expanded:fullscreen .ex-shell canvas{max-height:72vh;object-fit:contain}dialog.expanded:fullscreen #controls{position:sticky;bottom:0;background:#fbfaf5;padding:8px;z-index:5}
/* Full-window workspace for every experience */
body.workspace-open{overflow:hidden}
#modal.viewport-mode,#modal.viewport-mode:fullscreen{position:fixed;inset:0;margin:0;width:100vw;width:100dvw;height:100vh;height:100dvh;max-width:none;max-height:none;padding:8px 14px;border-radius:0;overflow:hidden;grid-template-rows:auto auto minmax(0,1fr) auto;gap:5px;background:#10202b;color:#edf4ed}
#modal.viewport-mode[open]{display:grid}
#modal.viewport-mode .modalTop{min-height:34px;gap:10px}
#modal.viewport-mode .modalTop h2{font-size:19px;margin:0;letter-spacing:-.4px}
#modal.viewport-mode .modalTop small{display:none}
#modal.viewport-mode .modalTop>div{min-width:0}
#modal.viewport-mode #close{padding:5px 12px;border-color:#51626b;font-size:16px}
#modal.viewport-mode .toolbar{padding:0;min-height:34px;flex-wrap:wrap}
#modal.viewport-mode .toolbar strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50vw}
#modal.viewport-mode .toolbar>div{display:flex;gap:5px;flex-wrap:wrap}
#modal.viewport-mode button{padding:6px 12px;border-color:#50626c;font-size:12px}
#modal.viewport-mode button:hover{background:#334b58}
#modal.viewport-mode #instructions,#modal.viewport-mode .hint{display:none}
#modal.viewport-mode #stage{grid-row:3;min-height:0;min-width:0;height:100%;width:100%;padding:0;margin:0;max-width:none;border-radius:9px;overflow:auto;display:flex;justify-content:center;align-items:center;flex-direction:column;position:relative;color:#192b38}
#modal.viewport-mode #stage>canvas,#modal.viewport-mode .ex-shell canvas{flex:none;max-width:none;max-height:none;object-fit:fill;border-radius:0;width:auto;height:auto;align-self:center}
#modal.viewport-mode .ex-shell{position:relative;width:100%;height:100%;border-radius:0;display:flex;justify-content:center;align-items:center;overflow:hidden}
#modal.viewport-mode .ex-hud{display:none}
#modal.viewport-mode .ex-panel{display:none;position:absolute;right:10px;bottom:10px;width:min(460px,calc(100% - 20px));max-height:calc(100% - 20px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;z-index:3;border:1px solid #617480;border-radius:12px;box-shadow:0 10px 40px #0009}
#modal.viewport-mode.options-open .ex-panel{display:flex}
#modal.viewport-mode #controls{grid-row:4;margin:0;padding:1px 0;position:static;min-height:0;background:transparent;gap:6px;color:#eef4ed}
#modal.viewport-mode #controls:empty{display:none}
#modal.viewport-mode .board{flex:none;max-width:none;margin:auto;gap:6px}
#modal.viewport-mode .board>.cell{min-height:0!important;height:100%!important;font-size:clamp(14px,3vh,32px);color:#192b38}
#modal.viewport-mode .board button:hover{filter:brightness(1.07)}
#modal.viewport-mode .ex-pad .held{color:#192b38;background:#d6f475}
#modal.viewport-mode.details-open{grid-template-rows:auto auto auto minmax(0,1fr) auto}
#modal.viewport-mode.details-open #instructions{display:block;grid-row:3;margin:0;padding:8px 12px;background:#1f3643;border-radius:8px;font-size:12px;line-height:1.5;max-height:25dvh;overflow:auto}
#modal.viewport-mode.details-open #stage{grid-row:4}
#modal.viewport-mode.details-open #controls{grid-row:5}
#modal.viewport-mode button[hidden]{display:none}
@media(max-width:650px){#modal.viewport-mode,#modal.viewport-mode:fullscreen{padding:6px;gap:4px}#modal.viewport-mode .modalTop h2{font-size:16px}#modal.viewport-mode .toolbar{gap:4px}#modal.viewport-mode .toolbar strong{width:100%;max-width:none;font-size:10px}#modal.viewport-mode button{font-size:10px;padding:6px 9px}#modal.viewport-mode .ex-pad button{font-size:12px;min-height:38px}.ex-pad{gap:5px}}
@media(max-height:480px){#modal.viewport-mode{padding:4px 8px;gap:2px}#modal.viewport-mode .modalTop{min-height:26px}#modal.viewport-mode .modalTop h2{font-size:15px}#modal.viewport-mode .toolbar{min-height:26px}#modal.viewport-mode button{padding:4px 9px;font-size:10px}#modal.viewport-mode .toolbar strong{font-size:10px}}
#modal.viewport-mode{z-index:1000;border:0}#modal[hidden]{display:none!important}