:root{color-scheme:light;--accent: #f97316;--accent-ink: #c2410c;--bg: #fbf7f3;--surface: #ffffff;--surface-sunk: #f6f1eb;--ink: #1c1917;--ink-soft: #57534e;--ink-mute: #8a827b;--line: #e5ddd3;--line-strong: #d4c9bc;--band-bg: #ffffff;--band-ink: #1c1917;--band-mute: #8a827b;--shadow: 0 1px 2px rgba(60, 40, 20, .05), 0 6px 18px rgba(60, 40, 20, .04);--font: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--gutter: 32px;--page: 1240px;--ease: cubic-bezier(.16, 1, .3, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img{display:block;max-width:100%}a{color:inherit}::selection{background:var(--accent);color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.page{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}@media(min-width:821px){.section{scroll-margin-top:76px}}.hero{padding:64px 0 0}.hero-line{font-size:clamp(28px,4.4vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}@media(max-width:560px){.hero{padding-top:44px}}.swap{position:relative;display:inline-block;white-space:nowrap}.swap-out,.swap-in{transition-property:opacity,transform,filter;transition-duration:.34s;transition-timing-function:cubic-bezier(.2,0,0,1)}.swap-in{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;opacity:0;will-change:transform,opacity,filter}@media(hover:hover){.swap:hover>.swap-in{opacity:1;transform:scale(1);filter:blur(0)}}.swap-arabic .swap-in{font-family:Reem Kufi,Geeza Pro,Noto Naskh Arabic,serif;font-weight:600;font-size:1.12em;line-height:1;letter-spacing:0;color:var(--ink);display:grid;place-items:center;--lift: -.13em;transform:translateY(var(--lift)) scale(.25);filter:blur(4px)}@media(hover:hover){.swap-arabic:hover>.swap-in{transform:translateY(var(--lift)) scale(1)}}.swap-arabic .swap-out>span{display:inline-block;transition-property:opacity,transform,filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.2,0,0,1);transition-delay:0s}@media(hover:hover){.swap-arabic:hover .swap-out>span{opacity:0;transform:scale(.55);filter:blur(3px);transition-delay:calc(var(--i) * 26ms)}}.swap-serif .swap-in{font-family:Fraunces,Georgia,Times New Roman,serif;font-style:italic;font-weight:700;letter-spacing:-.02em;display:grid;place-items:center;--nudge: -.085em;--rise: -.021em;transform:translate(var(--nudge)) translateY(var(--rise)) scale(.97);filter:blur(2.5px)}.swap-serif>.swap-out,.swap-serif>.swap-in{transition-duration:.46s}@media(hover:hover){.swap-serif:hover>.swap-out{opacity:0;transform:scale(1.03);filter:blur(2.5px)}.swap-serif:hover>.swap-in{transform:translate(var(--nudge)) translateY(var(--rise)) scale(1)}}.rain{position:relative;display:inline-block}.rain-canvas{position:absolute;left:.063em;top:-.34em;width:100%;height:1.7em;z-index:0;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.2,0,0,1)}.rain-word{position:relative;z-index:1;transition:opacity .5s cubic-bezier(.2,0,0,1)}@media(hover:hover){.rain:hover .rain-canvas{opacity:1}.rain:hover .rain-word{opacity:0}}@media(prefers-reduced-motion:reduce){.rain:hover .rain-canvas{opacity:0}}@media(hover:hover){.fun:hover{animation:fun-colour 1.1s steps(1,end) infinite}}.fun{display:inline-block}@keyframes fun-colour{0%{color:#f97316}20%{color:#e11d48}40%{color:#0ea5e9}60%{color:#16a34a}80%{color:#8b5cf6}to{color:#f97316}}@media(prefers-reduced-motion:reduce){.swap-out,.swap-in,.swap-arabic .swap-out>span{transition-duration:.01ms;transition-delay:0s!important}.swap-arabic .swap-in{transform:translateY(var(--lift));filter:none}.swap-serif .swap-in{transform:translate(var(--nudge)) translateY(var(--rise));filter:none}.swap-serif:hover>.swap-out{transform:none;filter:none}.swap-arabic .swap-out>span{transform:none;filter:none}.fun:hover{animation:none;color:var(--accent-ink)}}.section{padding:56px 0 0}.section:first-of-type{padding-top:40px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--line-strong);margin-bottom:26px}.section-head h2{font-size:21px;font-weight:700;letter-spacing:-.02em}.section-head span{font-family:var(--mono);font-size:11px;color:var(--ink-mute)}.previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:26px}.previews-few{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}.preview{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);container-type:inline-size}@media(max-width:1135px){.preview:last-child:nth-child(odd){grid-column:1 / -1}}.preview:hover{border-color:var(--line-strong);box-shadow:0 1px 2px #3c28140f,0 10px 26px #3c281412}.preview-head{flex:1 0 auto;padding:clamp(13px,3cqi,15px) clamp(15px,3.4cqi,17px) clamp(12px,2.8cqi,14px)}.preview-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 9px;margin-bottom:5px}.preview-title h3{font-size:clamp(16.5px,3.9cqi,20px);font-weight:700;letter-spacing:-.02em;line-height:1.2}.preview-desc{font-size:clamp(12.5px,2.7cqi,13.5px);line-height:1.55;color:var(--ink-soft)}.tags{display:flex;align-items:baseline;gap:5px;flex-wrap:nowrap}.tag{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--line-strong);color:var(--ink-mute);white-space:nowrap}.preview-shot{display:block;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface-sunk);overflow:hidden;aspect-ratio:16 / 10}.preview-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s var(--ease)}.preview:hover .preview-shot img{transform:scale(1.015)}.preview-stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.stat{padding:clamp(9px,2.2cqi,11px) clamp(11px,3.4cqi,17px) clamp(10px,2.4cqi,12px);border-left:1px solid var(--line)}.stat:first-child{border-left:0}.stat-value{font-family:var(--mono);font-size:clamp(13px,3cqi,16px);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}.stat-label{font-family:var(--mono);font-size:clamp(9px,2cqi,10.5px);letter-spacing:.03em;color:var(--ink-mute);margin-top:1px}.preview-foot{margin-top:auto;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:9px clamp(11px,3.4cqi,17px) 10px}.preview-source{font-family:var(--mono);font-size:clamp(9px,2cqi,10.5px);line-height:1.4;color:var(--ink-mute)}.preview-traffic{display:block;color:var(--ink-soft)}.preview-cta{font-family:var(--mono);font-size:clamp(10.5px,2.3cqi,12px);font-weight:500;text-decoration:none;color:var(--accent-ink);margin-left:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:color .2s var(--ease)}.arrow{transition:transform .25s var(--ease)}.preview:hover .preview-cta .arrow{transform:translate(3px)}.viz-grid{display:flex;align-items:flex-start;gap:26px}.viz-col{display:flex;flex-direction:column;gap:26px;flex:1 1 0;min-width:0}.viz{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);container-type:inline-size}.viz:hover{border-color:var(--line-strong);box-shadow:0 1px 2px #3c28140f,0 10px 26px #3c281412}.viz-shot{display:block;background:var(--surface-sunk);border-bottom:1px solid var(--line)}.viz-shot img{width:100%;height:auto}.viz-head{padding:clamp(13px,3cqi,15px) clamp(15px,3.4cqi,17px) clamp(12px,2.8cqi,14px)}.viz-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 9px;margin-bottom:5px}.viz-title h3{font-size:clamp(16.5px,3.4cqi,20px);font-weight:700;letter-spacing:-.02em;line-height:1.2}.viz-desc{font-size:clamp(12.5px,2.4cqi,13.5px);line-height:1.55;color:var(--ink-soft)}.viz-foot{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:8px clamp(11px,3.4cqi,17px)}.viz-source{font-family:var(--mono);font-size:clamp(9px,1.9cqi,10.5px);line-height:1.4;color:var(--ink-mute)}.viz-dl{display:flex;gap:8px;margin-left:auto;flex:none}.viz-dl a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-decoration:none;color:var(--ink-soft);border:1px solid var(--line-strong);padding:4px 9px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}.viz-dl a:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--surface-sunk)}.viz-dl a:active{background:var(--bg)}.dl-icon{flex:none;transition:transform .25s var(--ease)}.viz-dl a:hover .dl-icon{transform:translateY(2px)}.dl-count{font-variant-numeric:tabular-nums;font-size:10px;color:var(--ink-mute);padding-left:7px;margin-left:1px;border-left:1px solid var(--line-strong);transition:color .2s var(--ease),border-color .2s var(--ease)}.viz-dl a:hover .dl-count{color:var(--accent-ink);border-color:var(--accent)}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}@media(max-width:860px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.game-grid{grid-template-columns:minmax(0,1fr)}}.game{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:var(--surface);padding:12px 14px;text-decoration:none;color:var(--ink);transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}.game:hover{border-color:var(--accent);background:var(--surface-sunk);transform:translateY(-2px)}.game:active{transform:translateY(0)}.game-icon{width:40px;height:40px;flex:none;object-fit:contain}.game-text{display:flex;flex-direction:column;gap:2px;min-width:0}.game-text b{font-size:15px;font-weight:700;letter-spacing:-.01em}.game-text span{font-size:12.5px;line-height:1.45;color:var(--ink-soft)}.ext-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:26px}.ext{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);padding:15px 17px 14px;text-decoration:none;transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}.ext:hover{border-color:var(--accent);background:var(--surface-sunk);transform:translateY(-2px)}.ext:active{transform:translateY(0)}.ext h3{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:8px 0 4px}.ext p{font-size:13px;line-height:1.55;color:var(--ink-soft);margin-bottom:14px}.ext-cta{font-family:var(--mono);font-size:11.5px;color:var(--accent-ink);margin-top:auto;display:inline-flex;align-items:center;gap:6px}.ext:hover .arrow{transform:translate(3px)}.foot{margin-top:64px;border-top:1px solid var(--line-strong);padding:18px 0 40px;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;color:var(--ink-mute)}.foot img{width:20px;height:20px;image-rendering:pixelated}.foot a{color:var(--ink-mute);text-decoration:none;transition:color .2s var(--ease)}.foot a:hover{color:var(--accent)}.foot .spacer{margin-left:auto}.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}.reveal.in{opacity:1;transform:none}@media(max-width:820px){:root{--gutter: 20px}.band-mark{height:28px;width:auto}.section{padding:44px 0 0}.section:first-of-type{padding-top:32px}.previews,.ext-grid,.viz-grid,.viz-col{gap:20px}.viz-head{padding:14px 15px 13px}.viz-foot{padding:9px 15px 10px;flex-wrap:wrap}.viz-dl{margin-left:auto}.preview-stats{grid-auto-flow:column}.stat{padding:9px 14px 10px}.preview-head{padding:14px 15px 13px}.preview-foot{padding:9px 15px 10px;flex-wrap:wrap}.preview-cta{margin-left:auto}.foot{flex-wrap:wrap}.foot .spacer{margin-left:0;width:100%}}@media(max-width:460px){.preview-stats{grid-auto-flow:row;grid-auto-columns:auto}.stat{border-left:0;border-top:1px solid var(--line)}.stat:first-child{border-top:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
