:root{--paper:#FBF6EE;--ink:#1F2430;--muted:#59606B;--line:#E6DCCD;--sand:#F1E9DC;--o:#FF6B2C;--os:#FFEFE5;--om:#FFC2A3;--g:#19B38A;--gs:#E6F6EF;--gm:#9FE3CB;--v:#9E85FF;--vs:#F0EBFF;--vm:#CBBDFF;--y:#FFC23D;--ys:#FFF6DC;--ym:#FFE08A;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 "Onest",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.wordmark{font-family:"Unbounded",system-ui,sans-serif;letter-spacing:-.02em;line-height:1.15}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
header.top a.home{display:flex;align-items:center;gap:10px;text-decoration:none}
header.top img{width:40px;height:40px;border-radius:10px;border:2px solid var(--ink)}
.wordmark{font-weight:700;font-size:22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border:2px solid var(--ink);border-radius:14px;background:var(--o);font:700 16px "Unbounded",sans-serif;text-decoration:none;box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.small{padding:8px 14px;font-size:13px;background:#fff;box-shadow:0 3px 0 var(--ink)}
.tag{display:inline-block;padding:3px 10px;border:2px dashed var(--ink);border-radius:99px;font-size:13px;font-weight:700}
/* the hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:36px 0 56px}
.hero h1{font-size:clamp(34px,6vw,60px);margin:14px 0}
.hero p.lead{font-size:19px;color:var(--muted);max-width:30em}
.board{width:100%;max-width:400px;justify-self:center;background:var(--os);border:2px solid var(--ink);border-radius:24px;padding:22px;position:relative;clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
.board::after{content:"";position:absolute;top:0;right:0;width:44px;height:44px;background:linear-gradient(225deg,transparent calc(50% - 1.5px),var(--ink) calc(50% - 1.5px),var(--ink) calc(50% + 1.5px),var(--om) calc(50% + 1.5px));border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);border-bottom-left-radius:6px}
.boardwrap{justify-self:center;width:100%;max-width:400px;filter:drop-shadow(0 8px 0 var(--ink))}
.fold-shadow{filter:drop-shadow(0 5px 0 var(--ink))}
.board svg{display:block;width:100%;height:auto}
.trace{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 6s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:1200}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.trace{animation:none;stroke-dashoffset:0}}
/* folded cards */
section{padding:28px 0}
section h2{font-size:clamp(24px,4vw,34px);margin:0 0 8px}
section p.sub{color:var(--muted);margin:0 0 24px}
.worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:18px;box-shadow:0 5px 0 var(--ink)}
.card.fold{clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%);box-shadow:none}
.card.fold::after{content:"";position:absolute;top:-2px;right:-2px;width:32px;height:32px;background:linear-gradient(225deg,transparent calc(50% - 1.5px),var(--ink) calc(50% - 1.5px),var(--ink) calc(50% + 1.5px),var(--flap,var(--om)) calc(50% + 1.5px));border-left:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.badge{display:inline-grid;place-items:center;width:46px;height:46px;border:2px solid var(--ink);border-radius:12px;font:800 15px "Unbounded",sans-serif;margin-bottom:10px}
.card h3{margin:0 0 4px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:15px}
.w2{background:var(--os);--flap:var(--om)}.w2 .badge{background:var(--o)}
.w3{background:var(--gs);--flap:var(--gm)}.w3 .badge{background:var(--g)}
.w4{background:var(--vs);--flap:var(--vm)}.w4 .badge{background:var(--v)}
.w5{background:var(--ys);--flap:var(--ym)}.w5 .badge{background:var(--y)}
.shots{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 18px;scroll-snap-type:x mandatory}
.shots img{width:230px;height:auto;flex:none;border:2px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);scroll-snap-align:start;background:#fff}
.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.modes .card{display:flex;gap:14px;align-items:flex-start}
.ico{flex:none;width:44px;height:44px;border:2px solid var(--ink);border-radius:12px;background:var(--sand);display:grid;place-items:center;font-size:22px}
.cta{text-align:center;background:var(--ink);color:var(--paper);border-radius:24px;padding:40px 20px;margin:30px 0}
.cta h2{color:var(--paper)}
.cta p{color:#C9C3B8}
footer{border-top:2px solid var(--ink);margin-top:40px;padding:22px 0 40px;color:var(--muted);font-size:14px}
footer a{margin-right:14px}
/* text pages */
.page{max-width:720px}
.page h1{font-size:clamp(28px,5vw,40px);margin:24px 0 6px}
.page .card{padding:8px 22px}
.page .card p{color:var(--ink);font-size:16px;margin:14px 0}
.muted{color:var(--muted)}
@media (max-width:800px){.hero{grid-template-columns:1fr;padding-top:10px}.worlds{grid-template-columns:repeat(2,1fr)}.modes{grid-template-columns:1fr}}
@media (max-width:420px){.worlds{grid-template-columns:1fr}}