/* Paperoom — a sunny games room.
   Neutral: blush paper with soft colour clouds. Accents are toy colours, each with a deeper "-ink" for text (≥ 4.5:1).
   Depth comes from rendered 3D props, layered soft shadows and buttons that sit on a coloured base. */
@font-face{font-family:'Nunito';src:url('/assets/fonts/nunito-latin.woff2') format('woff2');font-weight:200 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';src:url('/assets/fonts/nunito-latin-ext.woff2') format('woff2');font-weight:200 1000;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url('/assets/fonts/atkinson-latin.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url('/assets/fonts/atkinson-latin-ext.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
 --paper:#fff8f4;--paper-2:#fff0e8;--card:#fff;--ink:#17181f;--ink-2:#34364a;--muted:#5b5e72;--rule:#f1e2da;--rule-2:#e0c8bc;
 --pink:#ff4f8b;--red:#ff4b5c;--orange:#ff8a1e;--sun:#ffc21a;--green:#18b47b;--blue:#2f6bff;--purple:#8b5cf6;--teal:#11a5a0;--federal:var(--purple);--yellow:var(--sun);
 --pink-ink:#c01452;--red-ink:#bf2238;--orange-ink:#a34900;--sun-ink:#855b00;--green-ink:#07714c;--blue-ink:#1f55e0;--purple-ink:#6b3ee6;--teal-ink:#0a716d;--federal-ink:var(--purple-ink);
 --pink-tint:#ffe4ee;--red-tint:#ffe3e5;--orange-tint:#ffead8;--sun-tint:#fff1c4;--green-tint:#dcf5ea;--blue-tint:#e2eaff;--purple-tint:#ede6ff;--teal-tint:#d8f2f0;--federal-tint:var(--purple-tint);
 --radius:22px;--radius-s:14px;
 --shadow-s:0 1px 2px #5a2a1a0d,0 4px 14px -6px #5a2a1a24;
 --shadow:0 2px 4px #5a2a1a0a,0 14px 34px -14px #6a2e1c3d;
 --shadow-l:0 3px 6px #5a2a1a0d,0 30px 60px -24px #6a2e1c4d;
 --display:'Nunito','Noto Sans Arabic','Noto Sans SC',ui-rounded,system-ui,sans-serif;
 --body:'Atkinson Hyperlegible Next','Noto Sans Arabic','Noto Sans SC',system-ui,sans-serif;
 --sheet-font:'Atkinson Hyperlegible Next','Noto Sans Arabic','Noto Sans SC',sans-serif;--sans:var(--sheet-font);
 --gutter:clamp(16px,4vw,40px);--accent:var(--blue);--accent-ink:var(--blue-ink);--accent-tint:var(--blue-tint);
 --dots:radial-gradient(circle at 2px 2px,#17181f14 1.4px,transparent 1.8px);
}
.ink-blue{--accent:var(--blue);--accent-ink:var(--blue-ink);--accent-tint:var(--blue-tint)}.ink-pink{--accent:var(--pink);--accent-ink:var(--pink-ink);--accent-tint:var(--pink-tint)}.ink-sun{--accent:var(--sun);--accent-ink:var(--sun-ink);--accent-tint:var(--sun-tint)}.ink-teal{--accent:var(--teal);--accent-ink:var(--teal-ink);--accent-tint:var(--teal-tint)}.ink-green{--accent:var(--green);--accent-ink:var(--green-ink);--accent-tint:var(--green-tint)}.ink-red{--accent:var(--red);--accent-ink:var(--red-ink);--accent-tint:var(--red-tint)}.ink-orange{--accent:var(--orange);--accent-ink:var(--orange-ink);--accent-tint:var(--orange-tint)}.ink-federal,.ink-purple{--accent:var(--purple);--accent-ink:var(--purple-ink);--accent-tint:var(--purple-tint)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:90px}
@media screen{html{overflow-x:clip}}
body{margin:0;color:var(--ink);background:var(--paper);font:17px/1.6 var(--body);font-feature-settings:'kern';text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img,svg,video{max-width:100%}
h1,h2,h3,h4,p,figure,ol,ul{margin:0}
ul,ol{padding:0}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(42px,6.4vw,88px);letter-spacing:-.035em}
h2{font-size:clamp(30px,3.8vw,50px)}
h3{font-size:22px;font-weight:850;letter-spacing:-.01em}
p{max-width:68ch;text-wrap:pretty}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-color:var(--pink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
::selection{background:var(--sun-tint)}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:fixed;top:8px;inset-inline-start:8px;z-index:100;transform:translateY(-160%);background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px}
.skip:focus{transform:none}
.kicker{display:inline-flex;align-items:center;gap:8px;font:800 14.5px/1.3 var(--display);color:var(--accent-ink,var(--pink-ink));letter-spacing:.01em}
.kicker a{text-decoration:none}
.kicker a:hover{text-decoration:underline}
.pill-kicker{padding:7px 14px 7px 10px;border-radius:99px;background:#fff;box-shadow:var(--shadow-s);color:var(--ink-2)}
.pill-kicker::before{content:'';width:10px;height:10px;border-radius:50%;background:conic-gradient(var(--pink) 0 25%,var(--sun) 0 50%,var(--green) 0 75%,var(--blue) 0)}
.lede{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2);max-width:60ch}
/* "Open →" links: bold label on a short coloured bar, which stretches on hover. */
.text-link{position:relative;display:inline-flex;align-items:center;gap:6px;font:850 16px/1.3 var(--display);text-decoration:none;color:var(--ink);padding-bottom:5px}
.text-link::after{content:'';position:absolute;inset-inline-start:0;bottom:0;width:38px;height:4px;border-radius:4px;background:var(--accent,var(--pink));transition:width .25s cubic-bezier(.3,.7,.3,1)}
.text-link:hover::after,a:hover>.text-link::after{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap}
.chip svg{width:14px;height:14px;flex-shrink:0;color:var(--accent-ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
/* Buttons sit on a coloured base; the base flips side for right-to-left pages. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border:0;border-radius:16px;background:var(--ink);color:#fff;font:850 16.5px/1.2 var(--display);text-decoration:none;box-shadow:0 1px 2px #17181f33,0 8px 18px -8px #17181f80;transition:transform .15s,box-shadow .15s,background .15s}
.button:hover{transform:translateY(-2px);box-shadow:0 2px 4px #17181f33,0 14px 24px -10px #17181f80;text-decoration:none}
.button:active{transform:translateY(1px);box-shadow:0 1px 2px #17181f33}
.button.secondary{background:#fff;color:var(--ink);box-shadow:0 1px 2px #6a2e1c1f,0 8px 18px -10px #6a2e1c59}
.button.secondary:hover{background:#fff;box-shadow:0 2px 4px #6a2e1c1f,0 14px 24px -12px #6a2e1c66}
.button:disabled{transform:none;box-shadow:none}
/* Hero calls to action sit on a coloured key base, as on a toy. */
.hero-actions .button{--base:var(--pink);box-shadow:0 5px 0 var(--base),0 14px 24px -12px #17181f66}
.hero-actions .button.secondary{--base:var(--sun)}
.hero-actions .button:hover{box-shadow:0 7px 0 var(--base),0 18px 28px -12px #17181f66}
.hero-actions .button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--base)}
.button-row{display:flex;flex-wrap:wrap;gap:14px}
.quiet{background:none;border:0;padding:10px 0;min-height:44px;color:var(--muted);text-decoration:underline}
/* Rendered props, colour discs and hand-drawn doodles */
.prop{display:block;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 18px #6a2e1c1f)}
.disc{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9,transparent 60%),var(--accent-tint);flex-shrink:0}
.disc .prop{width:90%;filter:drop-shadow(0 8px 8px #6a2e1c24)}
.doodle{position:absolute;display:block;width:var(--s,40px);aspect-ratio:1;background:var(--c,var(--pink));pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.doodle.squiggle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath d='M3 14c5-9 9-9 13 0s8 9 13 0 9-9 13 0 8 9 14-2' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");aspect-ratio:60/24}
.doodle.star{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.7 5.9 6.4.7-4.8 4.4 1.3 6.4L12 16.7l-5.6 3.2 1.3-6.4-4.8-4.4 6.4-.7z' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E")}
.doodle.sparkle{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6.4 4.6 10.1 11 11-6.4.9-10.1 4.6-11 11-.9-6.4-4.6-10.1-11-11 6.4-.9 10.1-4.6 11-11z'/%3E%3C/svg%3E")}
.doodle.burst{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4v7M5 9l5 5M27 9l-5 5M3 21h7M29 21h-7' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.doodle.dotline{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M4 44C22 6 66-2 96 26' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-dasharray='0 11'/%3E%3C/svg%3E");aspect-ratio:2}
.doodle.ring{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23000' stroke-width='3.4'/%3E%3C/svg%3E")}
.doodle.zigzag{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 18'%3E%3Cpath d='M3 14l7-9 7 9 7-9 7 9 7-9 7 9' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");aspect-ratio:48/18}
.doodle.loop{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M3 24c10 0 14-18 6-18S8 26 22 24 36 6 28 6s-2 20 12 18 14-16 21-12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");aspect-ratio:2}
/* Soft colour clouds behind heroes and page heads */
.clouds{position:relative;isolation:isolate}
/* Hero props may lean past the column, never past the screen. */
.hero-zone,.kit-hero-zone{overflow-x:clip}
.clouds::before{content:'';position:absolute;inset:-80px 0 -140px;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(#000 50%,#0000);mask:linear-gradient(#000 50%,#0000);background:radial-gradient(40% 55% at 8% 12%,#ffd9e6 0,#ffd9e600 70%),radial-gradient(34% 50% at 92% 8%,#ffe9b8 0,#ffe9b800 70%),radial-gradient(38% 60% at 82% 88%,#d9e6ff 0,#d9e6ff00 70%),radial-gradient(30% 40% at 30% 96%,#ffe2cf 0,#ffe2cf00 70%)}
/* Rainbow word in the hero: one colour per letter; Arabic gets one gradient so letters stay joined. */
.rainbow{white-space:nowrap}
.rainbow i{font-style:normal}.rainbow i:nth-child(6n+1){color:#f5266f}.rainbow i:nth-child(6n+2){color:#f4511e}.rainbow i:nth-child(6n+3){color:#e57200}.rainbow i:nth-child(6n+4){color:#0a9f69}.rainbow i:nth-child(6n+5){color:#2563eb}.rainbow i:nth-child(6n){color:#7c4dff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rainbow.flow{background:linear-gradient(90deg,#f5266f,#e57200 35%,#0a9f69 65%,#2563eb);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline:.04em}
[dir=rtl] .rainbow.flow{background-image:linear-gradient(270deg,#f5266f,#e57200 35%,#0a9f69 65%,#2563eb)}
/* Header */
.site-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 #6a2e1c12}
.head-row{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:10px;font:900 28px/1 'Nunito',system-ui,sans-serif;letter-spacing:-.04em;text-decoration:none;color:var(--ink)}
.brand .logo{width:38px;height:38px;flex-shrink:0;color:var(--ink);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .logo{transform:rotate(-8deg) scale(1.06)}
.primary-nav{display:flex;gap:6px;margin-inline-start:auto}
.primary-nav a{position:relative;display:flex;align-items:center;min-height:46px;padding:0 16px;border-radius:14px;font:850 16px/1 var(--display);text-decoration:none}
.primary-nav a:hover{background:#fff;box-shadow:var(--shadow-s)}
.primary-nav a[aria-current]{background:var(--ink);color:#fff}
.primary-nav a[aria-current]::after{content:'';position:absolute;inset-inline:14px;bottom:-6px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--pink),var(--sun))}
.head-actions{display:flex;align-items:center;gap:8px}
.site-head details{position:relative}
.site-head summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;border-radius:14px;cursor:pointer;list-style:none;font:850 15.5px/1 var(--display);user-select:none}
.site-head summary::-webkit-details-marker{display:none}
.site-head summary:hover,.site-head details[open] summary{background:#fff;box-shadow:var(--shadow-s)}
.site-head summary svg{width:12px;height:12px;transition:transform .2s}
.lang-short{display:none;letter-spacing:.04em}
.language-menu[open] summary svg{transform:rotate(180deg)}
.language-menu ul{position:absolute;inset-inline-end:0;top:calc(100% + 10px);list-style:none;margin:0;padding:8px;min-width:210px;background:#fff;border-radius:20px;box-shadow:var(--shadow-l);z-index:40}
.language-menu a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;text-decoration:none;font-weight:700}
.language-menu a:hover{background:var(--paper)}
.language-menu a[aria-current]{background:var(--sun-tint)}
.menu-bars{display:inline-grid;gap:3.5px;width:18px}
.menu-bars i{display:block;height:2.5px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.site-menu[open] .menu-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-menu[open] .menu-bars i:nth-child(2){opacity:0}
.site-menu[open] .menu-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-panel{position:absolute;inset-inline-end:0;top:calc(100% + 10px);display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;width:min(560px,calc(100vw - 2 * var(--gutter)));padding:24px;background:#fff;border-radius:24px;box-shadow:var(--shadow-l);z-index:40}
.menu-panel nav{display:grid;align-content:start}
.menu-panel a{display:flex;align-items:center;min-height:42px;padding-inline:10px;margin-inline:-10px;border-radius:10px;font-weight:700;text-decoration:none}
.menu-panel a:hover{background:var(--paper);color:var(--pink-ink)}
.menu-title{font:900 13px var(--display);color:var(--muted);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
@media(prefers-reduced-motion:no-preference){.menu-panel,.language-menu ul{animation:drop-in .2s cubic-bezier(.3,1.3,.5,1)}}
@keyframes drop-in{from{opacity:0;transform:translateY(-8px) scale(.98)}}
/* Breadcrumbs and page heads */
.crumbs{padding-top:20px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;font-size:14px;font-weight:700;color:var(--muted)}
.crumbs li+li::before{content:'›';margin-inline-end:6px;color:var(--rule-2)}
[dir=rtl] .crumbs li+li::before{content:'‹'}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline;color:var(--ink)}
.page-head{position:relative;padding-top:30px;padding-bottom:44px}
.page-head.has-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,320px);gap:24px;align-items:center}
.page-head h1{margin:6px 0 16px;max-width:18ch}
.head-art{position:relative;height:260px}
.head-art .prop{position:absolute;width:62%;inset-inline-end:10%;top:6%;rotate:-6deg}
.head-art .prop+.prop{width:40%;inset-inline-end:58%;top:48%;rotate:14deg}
.head-art .doodle:nth-of-type(1){--c:var(--sun);--s:44px;top:2%;inset-inline-start:8%}
.head-art .doodle:nth-of-type(2){--c:var(--pink);--s:70px;bottom:6%;inset-inline-end:2%}
.head-art .doodle:nth-of-type(3){--c:var(--blue);--s:26px;top:40%;inset-inline-end:0}
.section-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 48px;align-items:end;margin-bottom:32px}
.section-head p{color:var(--muted);font-size:18px}
.section-head h2 .disc{display:inline-grid;width:64px;height:64px;vertical-align:middle;margin-inline-end:12px}
/* Home hero: a printer feeding real sheets onto a dotted pad, with props scattered around */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px;align-items:center;padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(48px,6vw,96px)}
.hero h1{margin:20px 0 24px;max-width:11ch;font-size:clamp(46px,6.6vw,94px)}
.hero .lede{margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:26px}
.spec{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;max-width:none}
.hero-copy{position:relative;z-index:2}
.spec span{display:inline-flex;align-items:center;gap:8px}
.spec i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.hero-copy .doodle.squiggle{--s:74px;--c:var(--sun);top:-18px;inset-inline-end:8%}
.printer{position:relative;height:clamp(420px,46vw,580px);isolation:isolate}
.printer .pad{position:absolute;inset:26% 6% 3% 10%;z-index:-2;border-radius:34px;background:var(--dots) 0 0/14px 14px,linear-gradient(160deg,#ffe28a,#ffd257);box-shadow:var(--shadow);rotate:-4deg}
.printer .pad::after{content:'';position:absolute;inset:18px -16px -14px 40px;z-index:-1;border-radius:38px;background:#ffd6e4;rotate:6deg}
.printer-body{position:absolute;top:2%;left:50%;width:min(96%,560px);transform:translateX(-50%);z-index:4}
.printer-body .prop{width:100%;filter:drop-shadow(0 22px 20px #6a2e1c33)}
.feed{position:absolute;top:calc(2% + min(96%,560px) * .19);left:50%;width:min(44%,250px);height:calc(100% - 22%);transform:translateX(-50%);overflow:hidden;z-index:3;padding-top:2px;-webkit-mask:linear-gradient(#000 82%,#0000);mask:linear-gradient(#000 82%,#0000)}
.feed-sheet{position:absolute;top:0;left:0;right:0;margin:0;aspect-ratio:210/297;background:#fff;border-radius:6px;box-shadow:0 1px 0 #0001,0 18px 30px -14px #6a2e1c66;opacity:0;--r:calc((var(--i) - 2.5) * 1.6deg)}
.feed-sheet img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}
.feed-sheet figcaption{display:none}
.printer .hero-prop{position:absolute;z-index:5}
.printer .p-pencil{width:30%;inset-inline-end:-4%;top:30%;rotate:8deg}
.printer .p-dice{width:30%;inset-inline-start:-6%;bottom:12%}
.printer .p-star{width:12%;inset-inline-end:6%;bottom:6%;rotate:12deg}
.printer .doodle.sparkle{--c:var(--pink);--s:30px;top:22%;inset-inline-start:2%;z-index:1}
.printer .doodle.burst{--c:var(--blue);--s:40px;top:6%;inset-inline-end:0;rotate:20deg}
.printer .doodle.dotline{--c:var(--green);--s:150px;bottom:-4%;inset-inline-start:20%;z-index:-1}
.printer .doodle.star{--c:var(--sun);--s:28px;top:-2%;inset-inline-start:12%}
.printing{position:absolute;bottom:4%;inset-inline-end:2%;z-index:6;display:grid;gap:2px;padding:12px 18px 12px 16px;background:#fff;border-radius:18px;box-shadow:var(--shadow-l);font-size:14px;max-width:none;min-width:190px}
.printing span{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.printing span::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-tint)}
.printing b{font:900 19px/1.2 var(--display);min-width:9ch}
.sudoku-corner{position:absolute;inset-inline-start:calc(-1 * var(--gutter) - 50px);bottom:-30px;width:190px;aspect-ratio:1;z-index:-1;rotate:-14deg;border-radius:20px;opacity:.45;box-shadow:var(--shadow);background:linear-gradient(var(--rule-2) 2px,transparent 2px) 0 0/66.6px 66.6px,linear-gradient(90deg,var(--rule-2) 2px,transparent 2px) 0 0/66.6px 66.6px,linear-gradient(var(--rule) 1px,transparent 1px) 0 0/22.2px 22.2px,linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/22.2px 22.2px,#fff}
@media(prefers-reduced-motion:no-preference){
 .feed-sheet{animation:feed 14.4s cubic-bezier(.3,.7,.3,1) infinite;animation-delay:calc(var(--i) * 2.4s)}
 .printer .p-pencil{animation:bob 6s ease-in-out infinite}
 .printer .p-dice{animation:bob 7s ease-in-out -2s infinite}
}
@keyframes feed{
 0%{opacity:1;transform:translateY(-100%);z-index:3}
 9%{transform:translateY(0) rotate(0)}
 13%{transform:translateY(2%) rotate(var(--r));z-index:3}
 30%{opacity:1;transform:translateY(2%) rotate(var(--r));z-index:2}
 38%{opacity:0;transform:translateY(9%) rotate(calc(var(--r) * 2));z-index:1}
 100%{opacity:0;transform:translateY(9%);z-index:1}
}
@keyframes bob{50%{translate:0 -10px}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@media(prefers-reduced-motion:reduce){.feed-sheet{opacity:1;transform:translateY(calc(var(--i) * 3%)) rotate(var(--r))}.feed-sheet:nth-child(n+4){display:none}.printing{display:none}}
/* Film: the 14-second introduction */
.film{padding-block:clamp(24px,4vw,56px)}
.film-card{position:relative;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(16px,2.4vw,28px);border-radius:34px;background:linear-gradient(135deg,#fff,#fff4ee);box-shadow:var(--shadow-l)}
.film-screen{position:relative;border-radius:24px;overflow:hidden;background:#fff3ea;aspect-ratio:16/9;box-shadow:none}
.film-screen video{display:block;width:100%;height:100%;object-fit:cover}
.film-controls{position:absolute;inset-inline-end:14px;top:14px;display:flex;gap:8px}
.film-controls button{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 14px;border:0;border-radius:99px;background:#17181fd9;color:#fff;font:800 14px/1 var(--display);backdrop-filter:blur(6px)}
.film-controls button:hover{background:var(--ink)}
.film-controls button[aria-pressed=true]{background:#fff;color:var(--ink)}
.film-controls svg{width:16px;height:16px}
.film-controls .i-pause,.film-controls.is-playing .i-play{display:none}.film-controls.is-playing .i-pause{display:block}
.film-copy h2{margin:10px 0 14px;font-size:clamp(28px,3.2vw,44px)}
.film-copy p{color:var(--ink-2)}
.film-copy details{margin-top:18px;font-size:15px}
.film-copy summary{cursor:pointer;font:850 15px var(--display);min-height:40px;display:inline-flex;align-items:center}
.film-copy ol{list-style:none;display:grid;gap:4px;margin-top:8px;color:var(--ink-2)}
.film .doodle.sparkle{--c:var(--sun);--s:36px;top:-14px;inset-inline-end:28px}
.film .doodle.squiggle{--c:var(--blue);--s:70px;bottom:-14px;inset-inline-start:36%}
/* Shelves of games by type */
.shelves{padding-block:clamp(48px,6vw,88px)}
.shelf{padding:26px;margin-bottom:22px;border-radius:30px;background:#fff;box-shadow:var(--shadow)}
.shelf-head{display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.4fr) auto;gap:8px 24px;align-items:center;margin-bottom:22px}
.shelf-head .disc{width:72px;height:72px}
.shelf-head h3{font-size:28px}
.shelf-head p{color:var(--muted);font-size:16px}
.shelf-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
/* Game tiles: the real first page of each generator on a tinted, dotted block */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card-grid.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.tile{display:grid;grid-template-rows:auto 1fr;background:#fff;border-radius:var(--radius);text-decoration:none;color:var(--ink);overflow:hidden;box-shadow:var(--shadow-s);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.tile .thumb{position:relative;display:grid;place-items:center;padding:24px 18px 0;margin:8px 8px 0;border-radius:16px;background:var(--dots) 0 0/12px 12px,radial-gradient(circle at 80% 10%,#fff8,transparent 50%),var(--accent-tint);height:196px;overflow:hidden}
.tile .thumb img{width:66%;max-width:166px;height:auto;aspect-ratio:210/297;background:#fff;border-radius:4px;box-shadow:0 1px 0 #0002,0 14px 24px -12px #6a2e1c80;transform:translateY(10px) rotate(-2deg);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.tile:nth-child(even) .thumb img{transform:translateY(10px) rotate(2deg)}
.tile:hover .thumb img{transform:translateY(-2px) rotate(0) scale(1.03)}
.card-body{display:grid;gap:6px;align-content:start;padding:16px 18px 20px}
.card-kicker{font:850 12.5px var(--display);color:var(--accent-ink);letter-spacing:.04em;text-transform:uppercase}
.card-title{font-size:22px;line-height:1.12}
.card-short{font-size:15px;color:var(--ink-2);line-height:1.45}
.card-body .chips{margin-top:8px}
.card-body .chip{min-height:26px;font-size:12px;background:var(--paper);box-shadow:none}
/* Catalog filters */
.filters{display:grid;gap:14px;margin-bottom:28px;position:sticky;top:76px;z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);padding-block:12px}
.type-filter{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px}
.filter{flex-shrink:0;display:inline-flex;gap:8px;align-items:center;min-height:46px;padding:6px 16px;border:0;border-radius:99px;background:#fff;box-shadow:var(--shadow-s);font:850 15px var(--display);transition:transform .15s}
.filter:hover{transform:translateY(-2px)}
.filter span{display:grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:99px;background:var(--paper-2);font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.filter.on{background:var(--ink);color:#fff;box-shadow:var(--shadow-s)}
.filter.on span{background:#ffffff26;color:#fff}
.filter-row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.search,.region-select{display:grid;gap:6px;font:850 14px var(--display)}
.search input,.region-select select{min-height:50px;border:0;border-radius:16px;background:#fff;box-shadow:var(--shadow-s);padding:8px 16px;font:500 16px var(--body);min-width:min(340px,100%)}
.result-count{font-size:14px;font-weight:700;color:var(--muted)}
.no-results{padding:40px 0;font-size:18px}
.ad-slot{display:grid}
/* Regions */
.world-strip{position:relative;padding-block:clamp(56px,7vw,96px);margin-block:40px;background:linear-gradient(180deg,#f0ebff,#e7f0ff);border-radius:48px;margin-inline:clamp(0px,2vw,24px)}
.world-strip .section-head{align-items:center}
.world-strip .prop.globe{width:120px;margin-bottom:-8px}
.region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.region-card{position:relative;display:grid;gap:6px;align-content:start;padding:22px 22px 24px;border-radius:var(--radius);background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-s);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s;min-height:160px;overflow:hidden}
.region-card::before{content:'';position:absolute;top:-30px;inset-inline-end:-30px;width:110px;height:110px;border-radius:50%;background:var(--accent-tint)}
.region-card>*{position:relative}
.region-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.region-name{font:900 23px/1.1 var(--display);letter-spacing:-.01em}
.region-count{justify-self:start;padding:2px 10px;border-radius:99px;background:var(--accent-tint);font:850 12.5px/1.6 var(--display);color:var(--accent-ink)}
.region-desc{font-size:15px;line-height:1.45;color:var(--ink-2)}
.region-east-asia{--accent-tint:var(--red-tint);--accent-ink:var(--red-ink)}.region-south-asia{--accent-tint:var(--orange-tint);--accent-ink:var(--orange-ink)}.region-middle-east{--accent-tint:var(--teal-tint);--accent-ink:var(--teal-ink)}.region-africa{--accent-tint:var(--sun-tint);--accent-ink:var(--sun-ink)}.region-europe{--accent-tint:var(--blue-tint);--accent-ink:var(--blue-ink)}.region-latin-america{--accent-tint:var(--pink-tint);--accent-ink:var(--pink-ink)}.region-north-america{--accent-tint:var(--green-tint);--accent-ink:var(--green-ink)}
/* Tool cards: tinted card, 3D icon on a soft disc, "Open →" bar */
.tools-strip,.packs-strip,.ideas-strip{padding-block:clamp(40px,5vw,76px)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.tool-grid.big{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;padding-bottom:56px}
.tool-card{position:relative;display:grid;gap:8px;align-content:start;padding:22px;min-height:200px;border-radius:26px;background:linear-gradient(160deg,#fff 0,var(--accent-tint) 140%);box-shadow:var(--shadow-s);text-decoration:none;color:var(--ink);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.tool-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.tool-card .disc{width:96px;height:96px;margin-bottom:8px;background:radial-gradient(circle at 35% 30%,#fffa,transparent 60%),color-mix(in srgb,var(--accent) 22%,#fff)}
.tool-card:hover .disc .prop{animation:wiggle .5s ease}
.tool-name{font:900 23px/1.15 var(--display)}
.tool-short{font-size:15px;color:var(--ink-2);line-height:1.45}
.tool-card .text-link{margin-top:6px;justify-self:start}
@keyframes wiggle{30%{rotate:-8deg}70%{rotate:6deg}}
/* Packs */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.pack-grid.big{padding-bottom:48px}
.pack-card{display:grid;gap:10px;align-content:start;padding:12px 12px 22px;border-radius:28px;background:#fff;box-shadow:var(--shadow)}
.pack-card>:not(.pack-art){margin-inline:12px}
.pack-card h3{font-size:24px;margin-top:6px}
.pack-card p{font-size:15.5px;color:var(--ink-2)}
.pack-card .button{justify-self:start;margin-top:6px}
.pack-meta{font-size:13.5px!important;font-weight:700;color:var(--muted)!important;font-variant-numeric:tabular-nums}
.pack-art{position:relative;height:164px;background:var(--dots) 0 0/12px 12px,linear-gradient(150deg,var(--sun-tint),var(--pink-tint));border-radius:20px;overflow:hidden}
.pack-card:nth-child(3n+2) .pack-art{background:var(--dots) 0 0/12px 12px,linear-gradient(150deg,var(--blue-tint),var(--green-tint))}
.pack-card:nth-child(3n) .pack-art{background:var(--dots) 0 0/12px 12px,linear-gradient(150deg,var(--purple-tint),var(--orange-tint))}
.pack-art span{position:absolute;top:22px;width:84px;inset-inline-start:calc(12% + var(--i) * 17%);transform:rotate(calc((var(--i) - 1.5) * 6deg));transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.pack-card:hover .pack-art span{transform:rotate(calc((var(--i) - 1.5) * 10deg)) translateY(-8px)}
.pack-art img{display:block;width:100%;height:auto;aspect-ratio:210/297;background:#fff;border-radius:3px;box-shadow:0 10px 18px -8px #6a2e1c80}
/* Posts */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.post-grid.big{padding-bottom:48px}
.post-link{position:relative;display:grid;gap:8px;align-content:start;padding:22px 22px 26px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s);text-decoration:none;color:var(--ink);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s}
.post-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.post-kind{justify-self:start;padding:3px 10px;border-radius:99px;background:var(--pink-tint);color:var(--pink-ink);font:850 12.5px/1.5 var(--display)}
.post-grid>.post-link:nth-child(3n+2) .post-kind{background:var(--blue-tint);color:var(--blue-ink)}
.post-grid>.post-link:nth-child(3n) .post-kind{background:var(--green-tint);color:var(--green-ink)}
.post-title{font:900 21px/1.2 var(--display)}
.post-desc{font-size:15px;color:var(--ink-2);line-height:1.5}
.more-links{display:flex;gap:28px;margin-top:26px}
/* How it works and privacy */
.how{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;padding-block:clamp(40px,5vw,84px)}
.how h2{margin-bottom:26px}
.how ol{list-style:none;counter-reset:step;display:grid;gap:14px}
.how li{counter-increment:step;display:grid;grid-template-columns:58px 1fr;gap:4px 16px;padding:20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s)}
.how li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--blue-ink);color:#fff;font:900 22px var(--display)}
.how li:nth-child(2)::before{background:var(--pink-ink)}
.how li:nth-child(3)::before{background:var(--green-ink)}
.how li h3{font-size:20px}
.how li p{color:var(--ink-2);font-size:16px}
.privacy-note{position:relative;align-self:start;padding:32px;background:var(--ink);color:#fff;border-radius:30px;box-shadow:var(--shadow-l);overflow:hidden}
.privacy-note::after{content:'';position:absolute;inset-inline-end:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#ff4f8b55,transparent 70%)}
.privacy-note h2{font-size:30px;margin-bottom:14px}
.privacy-note p{color:#dcdde8;margin-bottom:18px}
.privacy-note .text-link{color:#fff}
/* Game pages */
.game-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding-top:22px;padding-bottom:32px}
.game-hero h1{margin:8px 0 14px;font-size:clamp(38px,5vw,66px);max-width:20ch}
.game-hero .lede{margin-bottom:18px}
.game-hero .kicker{padding:6px 12px;border-radius:99px;background:var(--accent-tint)}
.game-hero .disc{width:150px;height:150px}
.game-hero .chips .chip:nth-child(n+4){background:var(--accent-tint);box-shadow:none}
.mode-tabs{display:none}
.workbench{display:grid;grid-template-columns:360px minmax(0,1fr);gap:28px;align-items:start;padding-bottom:44px}
.controls{position:sticky;top:92px;max-height:calc(100vh - 108px);overflow:auto;padding:24px;background:#fff;border-radius:26px;box-shadow:var(--shadow);scrollbar-width:thin}
.controls h2,.game-form>h2{font-size:23px;margin-bottom:18px}
.field{margin-bottom:16px;min-width:0}
.field>label{display:block;font:850 15px var(--display);margin-bottom:6px}
.field small,.setup-details p{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:6px}
input:not([type=checkbox],[type=file],[type=radio]),select,textarea{width:100%;min-height:48px;padding:10px 14px;border:0;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 1px 2px #6a2e1c14;font-size:16px;line-height:1.45;transition:box-shadow .15s,background .15s}
input:focus,select:focus,textarea:focus{outline:none;background:#fff;box-shadow:0 0 0 3px var(--blue-tint),0 0 0 1px var(--blue)}
textarea{resize:vertical;min-height:150px;max-height:520px}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:15px;font-weight:700;line-height:1.35}
.check input{width:22px;height:22px;accent-color:var(--pink);flex-shrink:0}
fieldset{border:0;border-top:1px solid var(--rule);margin:18px 0;padding:16px 0 0}
legend{font:900 15px var(--display);padding:0}
.controls button[type=submit]{width:100%;margin-top:10px}
.preset-row .button{min-height:42px;font-size:14px;margin-bottom:14px}
.errors{padding:12px 16px;background:var(--red-tint);color:#7a1020;font-size:15px;margin:12px 0;border-radius:14px}
.setup-details{border-top:1px solid var(--rule);margin-top:18px;padding-top:12px;font-size:15px}
.setup-details summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font:850 15px var(--display)}
.setup-details .button{min-height:42px;font-size:14px;padding:8px 16px}
.preview-toolbar{position:sticky;top:84px;z-index:6;display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;padding:14px 16px 14px 20px;margin-bottom:12px;background:#fffffff2;backdrop-filter:blur(8px);border-radius:22px;box-shadow:var(--shadow-s)}
.preview-toolbar h2{font-size:19px}
.preview-toolbar p{font-size:14px;color:var(--muted);margin-top:2px}
.preview-toolbar .button{min-height:46px;font-size:15px;padding:8px 18px}
.print-hint{font-size:13.5px;color:var(--muted);margin:0 0 12px;max-width:none}
/* The preview sits on a soft, dotted desk mat. */
.paper-window{container-type:inline-size;position:relative;padding:clamp(12px,3cqw,32px);border-radius:28px;background:var(--dots) 0 0/16px 16px,linear-gradient(160deg,var(--accent-tint),color-mix(in srgb,var(--accent-tint) 50%,#fff));max-height:1100px;overflow:auto;border:0}
.scene-sheet{width:100%;max-width:calc(var(--w) * 1mm);margin:0 auto 24px;aspect-ratio:calc(var(--w) / var(--h))}
.scene-sheet:last-child{margin-bottom:0}
.scene-sheet svg{display:block;width:100%;height:auto;background:#fff;border-radius:4px;box-shadow:0 1px 0 #0002,0 22px 40px -20px #6a2e1c99;font-family:var(--sheet-font)}
@media(prefers-reduced-motion:no-preference){.scene-sheet{animation:sheet-in .5s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(var(--n,0) * 70ms)}}
@keyframes sheet-in{from{opacity:0;transform:translateY(-22px) rotate(-1deg)}}
.after-download{margin-top:18px}
.after-download-title{font:900 18px var(--display);margin-bottom:10px}
.tool-after{padding-bottom:44px;display:grid;gap:18px}
.tool-after>p{font-size:15.5px;color:var(--muted);max-width:85ch}
.tool-after details{max-width:820px;padding:20px 22px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s)}
.tool-after summary{cursor:pointer;font:900 16px var(--display);min-height:32px}
.tool-after details p{font-size:15px;color:var(--muted);margin:10px 0}
.caller-output{font:900 clamp(34px,5vw,56px)/1.2 var(--display);color:var(--blue-ink);margin:18px 0;overflow-wrap:anywhere}
.game-content{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding-block:28px 52px}
.game-article{display:grid;gap:40px;max-width:760px}
.game-article .intro{font-size:20px;line-height:1.6}
.game-article h2{font-size:clamp(28px,3vw,38px);margin-bottom:18px}
.rules{list-style:none;counter-reset:rule;display:grid;gap:12px}
.rules li{counter-increment:rule;position:relative;padding:14px 18px;padding-inline-start:66px;min-height:56px;font-size:17px;background:#fff;border-radius:18px;box-shadow:var(--shadow-s)}
.rules li::before{content:counter(rule);position:absolute;inset-inline-start:14px;top:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--accent-ink);color:#fff;font:900 17px var(--display)}
.tips{list-style:none;display:grid;gap:10px}
.tips li{position:relative;padding:14px 18px;padding-inline-start:52px;background:#fff;border-radius:16px;box-shadow:var(--shadow-s)}
.tips li::before{content:'';position:absolute;inset-inline-start:18px;top:19px;width:16px;height:16px;background:var(--sun);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6.4 4.6 10.1 11 11-6.4.9-10.1 4.6-11 11-.9-6.4-4.6-10.1-11-11 6.4-.9 10.1-4.6 11-11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6.4 4.6 10.1 11 11-6.4.9-10.1 4.6-11 11-.9-6.4-4.6-10.1-11-11 6.4-.9 10.1-4.6 11-11z'/%3E%3C/svg%3E") center/contain no-repeat}
.tips li:nth-child(3n+2)::before{background:var(--pink)}.tips li:nth-child(3n)::before{background:var(--blue)}
.origin-links{margin-top:12px;font-size:15px}
.origin-links span{font-weight:800}
.qa{margin-bottom:10px;background:#fff;border-radius:18px;box-shadow:var(--shadow-s)}
.qa summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:60px;padding:12px 16px 12px 20px;cursor:pointer;font:850 17px/1.35 var(--display);list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--paper-2);font-weight:900;font-size:20px;transition:transform .25s,background .25s}
.qa[open] summary::after{transform:rotate(45deg);background:var(--sun)}
.qa p{padding:0 20px 20px;color:var(--ink-2)}
.game-aside{display:grid;gap:20px;align-content:start}
.aside-block{padding:20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s);display:grid;gap:10px}
.aside-block h2{font-size:20px}
.aside-block .post-link{padding:12px 0;box-shadow:none;border-radius:0;border-bottom:1px solid var(--rule)}
.aside-block .post-link:hover{transform:none}
.aside-block .post-title{font-size:17px}
.aside-block .post-desc{display:none}
.aside-link{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--rule)}
.aside-link::after{content:'→';color:var(--pink-ink);font-weight:900}
[dir=rtl] .aside-link::after{content:'←'}
.aside-link:hover{color:var(--pink-ink)}
.related{padding-block:28px 60px}
.related h2{font-size:clamp(28px,3vw,38px);margin-bottom:22px}
/* Tool (widget) pages */
.widget-stage{padding-bottom:32px}
.widget{min-height:340px}
.widget-failed::after{content:'⚠';font-size:40px}
/* Articles */
.article{padding-block:24px 68px}
.article-head{position:relative;max-width:900px;padding:34px clamp(20px,4vw,44px) 30px;margin-bottom:36px;border-radius:32px;background:linear-gradient(150deg,#fff,var(--pink-tint) 160%);box-shadow:var(--shadow-s)}
.article-head h1{font-size:clamp(36px,5vw,62px);margin:10px 0 18px}
.byline{font-size:14.5px;font-weight:700;color:var(--muted);margin-top:14px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.prose{max-width:72ch;font-size:18.5px;line-height:1.72}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(26px,2.8vw,36px);margin-top:1.7em}
.prose h3{font-size:22px;margin-top:1.4em}
.prose ul,.prose ol{padding-inline-start:1.3em;display:grid;gap:.4em}
.prose li::marker{color:var(--pink);font-weight:900}
.prose blockquote{margin-inline:0;padding:16px 22px;border-radius:18px;background:var(--sun-tint);font-size:20px;color:var(--ink-2)}
.prose a{color:var(--blue-ink);text-decoration-thickness:2px}
.prose .ad a{color:var(--ink);text-decoration:none}
.prose .ad .ad-cta{color:#fff}
.prose code{font-size:.85em;background:#fff;box-shadow:inset 0 0 0 1px var(--rule);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.prose pre{direction:ltr;text-align:left;overflow:auto;padding:20px;background:var(--ink);color:#f4f6f5;border-radius:18px;font-size:13.5px;line-height:1.6}
.prose pre code{background:none;box-shadow:none;padding:0;color:inherit}
.article-aside{position:sticky;top:96px;display:grid;gap:20px}
.aside-game{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center;min-height:68px;text-decoration:none;font-weight:800;border-bottom:1.5px solid var(--rule);padding-block:6px}
.aside-game img{width:54px;height:auto;aspect-ratio:210/297;background:#fff;border-radius:3px;box-shadow:0 6px 12px -6px #6a2e1c88}
.article-tools{display:flex;flex-wrap:wrap;gap:20px;padding-top:24px;border-top:1.5px solid var(--rule);font-weight:800}
.feed-link a{font-size:14px;font-weight:800}
.faq-groups{display:grid;gap:40px;padding-bottom:60px;max-width:900px}
.faq-group h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px}
.faq-search{margin-top:22px;max-width:520px}
.one-click{padding-block:16px 60px}
.one-click h2{margin-bottom:10px}
.one-click>p{color:var(--muted);margin-bottom:18px}
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:0 28px;padding:10px 24px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s)}
.missing h1{max-width:14ch}
/* Books page */
.book-list{display:grid;gap:26px;padding-bottom:68px}
.book-card{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;align-items:center;padding:26px;background:linear-gradient(150deg,#fff 30%,var(--accent-tint));border-radius:30px;box-shadow:var(--shadow)}
.book-card{--accent:var(--red);--accent-tint:var(--red-tint)}
.book-card.ad-ink-blue{--accent:var(--blue);--accent-tint:var(--blue-tint)}.book-card.ad-ink-teal{--accent:var(--teal);--accent-tint:var(--teal-tint)}.book-card.ad-ink-sun{--accent:var(--sun);--accent-tint:var(--sun-tint)}.book-card.ad-ink-orange{--accent:var(--orange);--accent-tint:var(--orange-tint)}
.book-cover img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 18px 34px -16px #6a2e1caa}
.book-cover img.tall{width:76%;margin-inline:auto;transform:rotate(-3deg)}
.book-card h2{font-size:clamp(24px,2.6vw,34px);margin:6px 0 12px}
.book-card p{margin-bottom:12px}
.book-kind{font:850 14px var(--display);color:var(--muted)}
.book-short{color:var(--muted);font-size:15.5px}
/* Ads for the maker's own books: labelled, linked, never in sheets or PDFs. */
.ad{--accent:var(--red);--accent-tint:var(--red-tint);margin-block:8px}
.ad-ink-blue{--accent:var(--blue);--accent-tint:var(--blue-tint)}.ad-ink-teal{--accent:var(--teal);--accent-tint:var(--teal-tint)}.ad-ink-sun{--accent:var(--sun);--accent-tint:var(--sun-tint)}.ad-ink-orange{--accent:var(--orange);--accent-tint:var(--orange-tint)}
.ad-link{position:relative;display:grid;text-decoration:none;color:var(--ink);background:var(--dots) 0 0/12px 12px,linear-gradient(150deg,#fff 20%,var(--accent-tint));border-radius:26px;overflow:hidden;transition:transform .25s,box-shadow .25s;box-shadow:var(--shadow-s)}
.ad-link:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);text-decoration:none}
.ad-meta{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.ad-label{padding:2px 8px;border-radius:6px;background:var(--ink);color:#fff;font-size:11.5px;letter-spacing:.04em}
.ad-art{position:relative;display:block;align-self:stretch;min-height:120px}
.ad-art svg{position:absolute;inset:10% 6%;width:88%;height:80%;opacity:.9}
.ad-cover{position:absolute;box-shadow:0 14px 26px -10px #6a2e1cbb;border-radius:6px;background:#fff;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.ad-cover.tall{width:42%;height:auto;inset-inline-end:10%;bottom:8%;transform:rotate(4deg)}
.ad-cover.wide{width:66%;height:auto;inset-inline-end:6%;bottom:10%;transform:rotate(-3deg)}
.ad-link:hover .ad-cover{transform:rotate(0) translateY(-6px)}
.ad-copy{display:grid;gap:6px;align-content:center}
.ad-kicker{font:850 13px var(--display);color:var(--ink-2)}
.ad-title{font:900 22px/1.15 var(--display);letter-spacing:-.01em}
.ad-pitch{font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.ad-cta{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:8px 18px;border-radius:14px;background:var(--ink);color:#fff;font:850 15px var(--display);white-space:nowrap;box-shadow:0 8px 16px -8px #17181f80}
.ad-note{display:block;font-size:12.5px;color:var(--muted);margin-top:8px;max-width:80ch}
.ad--leaderboard{margin-block:28px}
.ad--leaderboard .ad-link{grid-template-columns:minmax(200px,.8fr) minmax(0,2fr) auto;align-items:center;gap:8px 28px;padding:18px 28px 18px 0}
[dir=rtl] .ad--leaderboard .ad-link{padding:18px 0 18px 28px}
.ad--leaderboard .ad-meta{position:absolute;top:14px;inset-inline-end:18px}
.ad--leaderboard .ad-art{min-height:150px}
.ad--leaderboard .ad-cta{align-self:center}
.wrap-ad{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.ad--rectangle .ad-link{grid-template-columns:180px minmax(0,1fr);gap:6px 20px;padding:18px 22px 20px 0;align-items:center}
[dir=rtl] .ad--rectangle .ad-link{padding:18px 0 20px 22px}
.ad--rectangle .ad-meta{grid-column:1/-1;padding-inline-start:20px}
.ad--rectangle .ad-art{min-height:150px}
.ad--rectangle .ad-copy{gap:8px}
.ad--rectangle .ad-cta{grid-column:2}
.ad--skyscraper .ad-link{grid-template-rows:auto 190px auto auto;gap:12px;padding:18px}
.ad--skyscraper .ad-art{min-height:190px;margin-inline:-18px}
.ad--skyscraper .ad-title{font-size:20px}
.ad--ticket{margin:0;height:100%}
.ad--ticket .ad-link{height:100%;grid-template-rows:auto 196px 1fr auto;gap:10px;padding:16px 18px 20px;border-radius:var(--radius);background:var(--dots) 0 0/12px 12px,#fff;box-shadow:var(--shadow-s)}
.ad--ticket .ad-art{margin-inline:-10px;border-radius:16px;background:var(--accent-tint)}
.ad--ticket .ad-title{font-size:19px}
.ad--ticket .ad-pitch{font-size:14.5px}
/* The Game Night Kit showcase: Paperoom's own printable product, above the book ads. */
.kit-zone{padding-block:clamp(28px,4vw,56px)}
.kit-feature{margin:0}
.kit-link{position:relative;display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:24px 52px;align-items:center;padding:clamp(24px,4vw,52px);border-radius:38px;background:radial-gradient(55% 75% at 0 0,#ffd5e4,#ffd5e400 70%),radial-gradient(50% 70% at 100% 100%,#ffe8b0,#ffe8b000 70%),linear-gradient(135deg,#fff,#fff4ee);box-shadow:var(--shadow-l);text-decoration:none;color:var(--ink);overflow:hidden;isolation:isolate;transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
.kit-link:hover{transform:translateY(-4px);text-decoration:none}
.kit-art{position:relative;display:grid;place-items:center;min-height:380px}
.kit-glow{position:absolute;inset:6% 8%;z-index:-1;border-radius:50%;background:radial-gradient(circle,#ff4f8b38,#ff4f8b00 65%)}
.kit-cover{position:relative;width:min(270px,68%);height:auto;border-radius:14px;box-shadow:0 2px 4px #6a2e1c22,0 34px 54px -22px #6a2e1caa;transform:rotate(-4deg);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.kit-link:hover .kit-cover{transform:rotate(-1deg) translateY(-8px) scale(1.02)}
.kit-prop{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 12px 12px #6a2e1c33)}
.kit-prop.p1{width:40%;inset-inline-start:-4%;bottom:0}
.kit-prop.p2{width:44%;inset-inline-end:-6%;top:-6%}
.kit-prop.p3{width:15%;inset-inline-start:8%;top:4%;rotate:-12deg}
.kit-badge{position:absolute;inset-inline-end:8%;bottom:8%;display:grid;place-items:center;align-content:center;width:96px;height:96px;border-radius:50%;background:var(--ink);color:#fff;font:800 12.5px/1.1 var(--display);text-align:center;rotate:10deg;box-shadow:0 12px 22px -8px #17181f99}
.kit-badge b{display:block;font:1000 36px/1 var(--display)}
.kit-copy{display:grid;gap:12px;align-content:center;justify-items:start}
.kit-kicker{padding:5px 12px;border-radius:99px;background:var(--pink-tint);color:var(--pink-ink);font:900 13px var(--display);letter-spacing:.04em}
.kit-title{font:1000 clamp(30px,3.6vw,50px)/1.02 var(--display);letter-spacing:-.03em}
.kit-pitch{font-size:17px;color:var(--ink-2);line-height:1.55;max-width:56ch}
.kit-points{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-top:4px}
.kit-points span{position:relative;padding-inline-start:30px;font-size:15px;font-weight:700;line-height:1.35}
.kit-points span::before{content:'';position:absolute;inset-inline-start:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--green-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 5 8.5l4.4-4.9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.kit-cta{display:inline-flex;align-items:center;gap:10px;min-height:56px;margin-top:10px;padding:12px 28px;border-radius:16px;background:var(--ink);color:#fff;font:900 17px var(--display);box-shadow:0 5px 0 var(--pink),0 14px 24px -12px #17181f66;transition:transform .15s,box-shadow .15s}
.kit-link:hover .kit-cta{transform:translateY(-2px);box-shadow:0 7px 0 var(--pink),0 18px 28px -12px #17181f66}
.kit-feature .ad-note{margin-top:10px}
.kit-feature.compact .kit-link{grid-template-columns:180px minmax(0,1fr);gap:16px 28px;padding:22px 28px;border-radius:28px}
.kit-feature.compact .kit-art{min-height:230px}
.kit-feature.compact .kit-cover{width:100%}
.kit-feature.compact .kit-prop.p2,.kit-feature.compact .kit-prop.p3{display:none}
.kit-feature.compact .kit-prop.p1{width:62%;inset-inline-start:-18%;bottom:-6%}
.kit-feature.compact .kit-badge{width:66px;height:66px;font-size:10px;inset-inline-end:-6%;bottom:2%}
.kit-feature.compact .kit-badge b{font-size:24px}
.kit-feature.compact .kit-title{font-size:26px}
.kit-feature.compact .kit-pitch{font-size:15.5px}
.kit-feature.compact .kit-cta{min-height:48px;font-size:15.5px;padding:10px 20px}
/* Home hero, in motion: the printer hums and blinks as each sheet feeds, the caption card shows the sheet's progress,
   props drift with the pointer (site.mjs sets --px/--py) and the doodles twinkle. All of it stops with reduced motion. */
.printer-body::after{content:'';position:absolute;left:16.8%;top:52.4%;width:2.6%;aspect-ratio:1;border-radius:50%;background:#3df29b;box-shadow:0 0 10px 3px #3df29b99;opacity:0}
.printing{overflow:hidden}
.printing::after{content:'';position:absolute;inset-inline:16px;bottom:7px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--blue));transform-origin:0 50%;transform:scaleX(0)}
[dir=rtl] .printing::after{transform-origin:100% 50%}
.printing b{display:block;transition:opacity .2s,translate .2s}
.printing b.swap{opacity:0;translate:0 6px}
.rainbow i{display:inline-block}
.printer .hero-prop,.printer .doodle,.printer .pad,.printer-body{--depth:1}
.printer .p-pencil{--depth:1.6}.printer .p-dice{--depth:2.2}.printer .p-star{--depth:2.6}.printer .doodle{--depth:3}.printer .pad{--depth:-.6}.printer-body{--depth:.5}
@media(prefers-reduced-motion:no-preference){
 .printer-body::after{animation:led 2.4s steps(1) infinite}
 .printer-body .prop{animation:hum 2.4s ease-in-out infinite}
 .printing::after{animation:print-progress 2.4s linear infinite}
 .printer .hero-prop,.printer .doodle,.printer .pad{transform:translate3d(calc(var(--px,0) * var(--depth) * 9px),calc(var(--py,0) * var(--depth) * 7px),0);transition:transform .6s cubic-bezier(.2,.7,.3,1)}
 .printer-body{transition:transform .6s cubic-bezier(.2,.7,.3,1);transform:translateX(-50%) translate3d(calc(var(--px,0) * 4px),calc(var(--py,0) * 3px),0)}
 .printer .p-dice{animation:tumble 7s cubic-bezier(.3,.7,.3,1) 1.2s infinite}
 .printer .doodle.sparkle,.film .doodle.sparkle,.head-art .doodle.sparkle{animation:twinkle 3.2s ease-in-out infinite}
 .printer .doodle.star{animation:spin 14s linear infinite}
 .printer .doodle.burst{animation:burst 2.4s ease-out infinite}
 .hero-copy .doodle.squiggle{animation:wiggle-x 5s ease-in-out infinite}
 .rainbow i{animation:letter-in .7s cubic-bezier(.3,1.6,.5,1) calc(.2s + var(--k,0) * .07s) backwards}
 .rainbow:hover i{animation:hop .5s cubic-bezier(.3,1.6,.5,1) calc(var(--k,0) * .05s)}
 .spec i{animation:dot-in .5s cubic-bezier(.3,1.6,.5,1) backwards}
 .spec span:nth-child(2) i{animation-delay:.1s}.spec span:nth-child(3) i{animation-delay:.2s}.spec span:nth-child(4) i{animation-delay:.3s}
}
@keyframes led{0%{opacity:1}12%{opacity:.25}20%{opacity:1}40%,100%{opacity:.35}}
@keyframes hum{0%,8%,100%{translate:0}2%{translate:0 1px}4%{translate:0 -.5px}6%{translate:0 .6px}}
@keyframes print-progress{to{transform:scaleX(1)}}
@keyframes tumble{0%,78%,100%{translate:0;rotate:0}82%{translate:0 -34px;rotate:-24deg}86%{translate:0 2px;rotate:10deg}89%{translate:0 -10px;rotate:-4deg}92%{translate:0}50%{translate:0 -8px}}
@keyframes twinkle{50%{scale:.62;rotate:45deg;opacity:.7}}
@keyframes spin{to{rotate:360deg}}
@keyframes burst{0%{scale:.85;opacity:.6}30%{scale:1.12;opacity:1}100%{scale:.85;opacity:.6}}
@keyframes wiggle-x{50%{translate:8px 0}}
@keyframes letter-in{from{opacity:0;translate:0 -.45em;rotate:-12deg}}
@keyframes hop{40%{translate:0 -.16em;rotate:-6deg}}
@keyframes dot-in{from{scale:0}}
/* Home: a step-by-step strip with a prop on each card */
.how li{position:relative}
.how .step-prop{position:absolute;inset-inline-end:16px;top:50%;width:62px;translate:0 -50%;rotate:8deg;transition:rotate .3s cubic-bezier(.3,1.6,.5,1)}
.how li:hover .step-prop{rotate:-6deg}
.how li h3,.how li p{padding-inline-end:70px}
/* A second printed copy waits behind each tile's sheet and fans out on hover. */
.tile .thumb::before{content:'';position:absolute;top:34px;left:50%;width:min(66%,166px);aspect-ratio:210/297;translate:-50% 0;rotate:5deg;background:#fff;border-radius:4px;box-shadow:0 10px 20px -12px #6a2e1c66;transition:rotate .35s cubic-bezier(.3,1.4,.5,1),translate .35s cubic-bezier(.3,1.4,.5,1)}
.tile:nth-child(even) .thumb::before{rotate:-5deg}
.tile:hover .thumb::before{rotate:9deg;translate:-38% -4px}
.tile:nth-child(even):hover .thumb::before{rotate:-9deg;translate:-62% -4px}
.tile .thumb img{position:relative}
/* Article covers: the article's own games as printed sheets, fanned on a tinted mat */
.cover{position:relative;display:block;height:176px;border-radius:16px;background:var(--dots) 0 0/12px 12px,radial-gradient(circle at 85% 12%,#fffa,transparent 55%),var(--accent-tint);overflow:hidden;isolation:isolate}
.cover-sheet{position:absolute;left:calc(50% + (var(--i) - (var(--n) - 1) / 2) * 24%);bottom:-26%;width:calc(36% + (3 - var(--n)) * 7%);transform:translateX(-50%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 9deg));transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.cover-sheet:nth-child(2){z-index:2;bottom:-20%}
.cover-sheet img{display:block;width:100%;height:auto;aspect-ratio:210/297;background:#fff;border-radius:4px;box-shadow:0 1px 0 #0001,0 14px 22px -10px #6a2e1c80}
.cover .cover-prop{position:absolute;z-index:3;width:28%;max-width:120px;top:7%;inset-inline-end:5%;rotate:-8deg;filter:drop-shadow(0 10px 10px #6a2e1c33);transition:rotate .4s cubic-bezier(.3,1.6,.5,1)}
a:hover .cover-sheet{transform:translateX(-50%) translateY(-10px) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 13deg))}
a:hover .cover .cover-prop{rotate:6deg}
.cover.big{height:auto;aspect-ratio:4/3.1;border-radius:26px;box-shadow:inset 0 0 0 1px #ffffff80}
.cover.big .cover-sheet{width:38%;bottom:-16%}
/* Post cards: cover, kind, title, summary and reading time */
.post-link{grid-template-rows:auto 1fr;gap:0;padding:8px;overflow:hidden}
.post-cover{display:block}
.post-body{display:grid;gap:8px;align-content:start;padding:14px 12px 16px}
.post-meta{margin-top:4px;font:750 13px/1.4 var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.post-link.kind-blog .post-kind{background:var(--pink-tint);color:var(--pink-ink)}
.post-link.kind-guides .post-kind{background:var(--blue-tint);color:var(--blue-ink)}
.post-link.kind-world .post-kind{background:var(--green-tint);color:var(--green-ink)}
.post-grid.lead{grid-template-columns:repeat(4,minmax(0,1fr))}
.post-grid.lead .featured{grid-column:span 2;grid-row:span 2;grid-template-rows:1fr auto}
.post-link.featured .cover{height:100%;min-height:300px}
.post-link.featured .cover-sheet{width:calc(24% + (3 - var(--n)) * 4%);bottom:-14%}
.fig-cover-art{position:absolute;z-index:1;inset:9% 9% 34%;display:grid;place-items:center}
.fig-cover-art svg{width:100%;height:100%;filter:drop-shadow(0 12px 18px #6a2e1c1f)}
.cover.with-fig .cover-prop{width:18%;top:4%}
.post-link.featured .post-body{padding:18px 16px 20px}
.post-link.featured .post-title{font-size:clamp(24px,2.4vw,32px);line-height:1.12}
.post-link.featured .post-desc{font-size:16.5px}
.aside-block .post-cover{display:none}
.aside-block .post-link{padding:0}
.aside-block .post-body{padding:12px 0}
.aside-block .post-meta{display:none}
/* Articles: cover header, contents, figures, reading progress and the games to print */
.read-progress{position:fixed;top:0;inset-inline:0;z-index:60;height:4px;transform-origin:0 50%;transform:scaleX(var(--read,0));background:linear-gradient(90deg,var(--pink),var(--sun),var(--green),var(--blue));pointer-events:none}
[dir=rtl] .read-progress{transform-origin:100% 50%}
@supports(animation-timeline:scroll()){@media(prefers-reduced-motion:no-preference){.read-progress{animation:read linear both;animation-timeline:scroll(root)}}}
@keyframes read{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.article-head.has-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:24px clamp(24px,4vw,56px);align-items:center;max-width:none;padding:clamp(22px,3.4vw,40px)}
.article-head.kind-guides{background:linear-gradient(150deg,#fff,var(--blue-tint) 160%)}
.article-head.kind-world{background:linear-gradient(150deg,#fff,var(--green-tint) 160%)}
.article-head .kicker a{padding:5px 12px;border-radius:99px;background:#fff;box-shadow:var(--shadow-s)}
.article-head h1{max-width:20ch}
.toc ol{list-style:none;display:grid;gap:2px;counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:grid;grid-template-columns:24px 1fr;gap:6px;align-items:baseline;padding:7px 8px;margin-inline:-8px;border-radius:10px;font:750 15px/1.35 var(--display);text-decoration:none;color:var(--ink-2);transition:background .2s,color .2s}
.toc a::before{content:counter(toc);font:900 12px var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
:lang(ar) .toc a::before{content:counter(toc,arabic-indic)}
.toc a:hover{background:var(--paper);color:var(--ink)}
.toc a[aria-current=true]{background:var(--sun-tint);color:var(--ink)}
.toc a[aria-current=true]::before{color:var(--sun-ink)}
.toc-inline{display:none;padding:4px 18px;border-radius:18px;background:#fff;box-shadow:var(--shadow-s);font-size:16px}
.toc-inline summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font:850 16px var(--display)}
.toc-inline ol{padding:0 0 12px 1.2em;display:grid;gap:6px}
.toc-inline a{color:var(--ink-2);text-decoration:none}
.prose h2{position:relative;scroll-margin-top:96px}
.prose h2::before{content:'';display:block;width:42px;height:5px;margin-bottom:14px;border-radius:5px;background:linear-gradient(90deg,var(--pink),var(--sun))}
.prose>p:first-of-type{font-size:1.08em}
.prose blockquote{position:relative;padding:18px 22px 18px 58px;border-radius:20px;background:linear-gradient(150deg,var(--sun-tint),#fff7dc);font-size:18.5px}
[dir=rtl] .prose blockquote{padding:18px 58px 18px 22px}
.prose blockquote::before{content:'';position:absolute;inset-inline-start:20px;top:20px;width:22px;height:22px;background:var(--sun-ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6.4 4.6 10.1 11 11-6.4.9-10.1 4.6-11 11-.9-6.4-4.6-10.1-11-11 6.4-.9 10.1-4.6 11-11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6.4 4.6 10.1 11 11-6.4.9-10.1 4.6-11 11-.9-6.4-4.6-10.1-11-11 6.4-.9 10.1-4.6 11-11z'/%3E%3C/svg%3E") center/contain no-repeat}
.prose ol:not(.toc-inline ol){counter-reset:step;list-style:none;padding:0}
.prose ol:not(.toc-inline ol)>li{counter-increment:step;position:relative;padding-inline-start:44px;min-height:30px}
.prose ol:not(.toc-inline ol)>li::before{content:counter(step);position:absolute;inset-inline-start:0;top:.15em;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;font:900 14px/1 var(--display)}
:lang(ar) .prose ol:not(.toc-inline ol)>li::before{content:counter(step,arabic-indic)}
.prose{counter-reset:fig}
.fig{counter-increment:fig;margin-block:1.6em!important;padding:clamp(14px,2.6vw,28px) clamp(12px,2.6vw,28px) 16px;border-radius:26px;background:var(--dots) 0 0/14px 14px,linear-gradient(160deg,#fff 30%,var(--paper-2));box-shadow:var(--shadow-s)}
.fig-art{display:grid;place-items:center}
.fig svg{display:block;width:100%;height:auto;max-height:460px;font-family:var(--display);overflow:visible}
.fig figcaption{display:flex;gap:12px;align-items:baseline;margin-top:16px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.fig-n{flex-shrink:0;display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 7px;border-radius:9px;background:var(--ink);color:#fff;font:900 13px/1 var(--display)}
.fig-n::before{content:counter(fig)}
:lang(ar) .fig-n::before{content:counter(fig,arabic-indic)}
.fig .ghost{opacity:.3}
.fig .d{stroke-dasharray:1}
.js .fig:not(.in) .d{stroke-dashoffset:1}
.js .fig:not(.in) .p{opacity:0}
@media(prefers-reduced-motion:no-preference){
 .js .fig.in .d{animation:fig-draw 1.1s cubic-bezier(.5,0,.2,1) calc(.15s + var(--i,0) * .12s) backwards}
 .js .fig.in .d.slow{animation-duration:3.4s}
 .js .fig.in .p{animation:fig-pop .5s cubic-bezier(.3,1.5,.5,1) calc(.1s + var(--i,0) * .07s) backwards;transform-box:fill-box;transform-origin:center}
}
@keyframes fig-draw{from{stroke-dashoffset:1}}
@keyframes fig-pop{from{opacity:0;transform:scale(.3)}}
.article-print{padding-block:8px 20px}
.article-print .section-head{margin-bottom:22px}
.article-print h2{font-size:clamp(28px,3vw,40px)}
.dev .prose{padding-top:8px}
/* The Game Night Kit: page fan behind the showcase cover, "look inside" link, menu card and the product page */
.kit-fan{position:absolute;width:min(190px,46%);height:auto;border-radius:6px;background:#fff;box-shadow:0 14px 26px -12px #6a2e1c99;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.kit-art .kit-fan,.kit-hero-art .kit-fan{top:14%;left:50%}
.kit-fan.f0{transform:translateX(-96%) rotate(-14deg)}
.kit-fan.f1{transform:translateX(-50%) translateY(-10%) rotate(3deg)}
.kit-fan.f2{transform:translateX(-4%) rotate(14deg)}
.kit-link:hover .kit-fan.f0{transform:translateX(-118%) translateY(-6%) rotate(-20deg)}
.kit-link:hover .kit-fan.f1{transform:translateX(-50%) translateY(-24%) rotate(2deg)}
.kit-link:hover .kit-fan.f2{transform:translateX(18%) translateY(-6%) rotate(20deg)}
.kit-more{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;max-width:none;margin-top:14px}
.kit-more .ad-note{margin:0}
.menu-kit{grid-column:1/-1;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;margin-top:8px;padding:10px 14px 10px 10px;border-radius:18px;background:linear-gradient(120deg,var(--pink-tint),var(--sun-tint));text-decoration:none;color:var(--ink);transition:transform .2s}
.menu-kit:hover{transform:translateY(-2px)}
.menu-kit img{width:52px;height:auto;border-radius:6px;box-shadow:0 6px 12px -6px #6a2e1c88;rotate:-4deg}
.menu-kit span{display:grid;gap:2px}
.menu-kit b{font:900 16px var(--display)}
.menu-kit small{font-size:13px;color:var(--ink-2);line-height:1.4}
.kit-hero-zone{padding-bottom:12px}
.kit-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 48px;align-items:center;padding-block:28px 40px}
.kit-hero-copy{display:grid;gap:14px;justify-items:start}
.kit-hero h1{font-size:clamp(40px,5.4vw,74px);max-width:13ch;margin:2px 0 4px}
.kit-facts{display:flex;flex-wrap:wrap;gap:6px 18px;font:800 15px var(--display);color:var(--ink-2)}
.kit-facts span{display:inline-flex;align-items:center;gap:8px}
.kit-facts i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.kit-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.kit-buy{--base:var(--pink);box-shadow:0 5px 0 var(--base),0 14px 24px -12px #17181f66}
.kit-buy:hover{box-shadow:0 7px 0 var(--base),0 18px 28px -12px #17181f66}
.kit-hero-art{position:relative;display:grid;place-items:center;min-height:clamp(380px,40vw,520px);isolation:isolate}
.kit-hero-art .kit-glow{inset:4%}
.kit-hero-art .kit-cover{position:relative;z-index:2;width:min(320px,62%);height:auto;border-radius:14px;box-shadow:0 2px 4px #6a2e1c22,0 34px 54px -22px #6a2e1caa;rotate:-4deg}
.kit-hero-art .kit-fan{width:min(230px,44%);z-index:1}
.kit-hero-art .kit-prop{z-index:3}
.kit-hero-art .kit-prop.p1{width:34%;inset-inline-start:0;bottom:2%}
.kit-hero-art .kit-prop.p2{width:36%;inset-inline-end:-2%;top:-4%}
.kit-hero-art .kit-prop.p3{width:12%;inset-inline-start:10%;top:6%}
.kit-hero-art .kit-badge{z-index:4;inset-inline-end:10%;bottom:8%}
.kit-hero-art .doodle.sparkle{--c:var(--pink);--s:34px;top:10%;inset-inline-end:30%}
.kit-hero-art .doodle.squiggle{--c:var(--blue);--s:76px;bottom:0;inset-inline-start:34%}
.kit-hero-art .doodle.ring{--c:var(--sun);--s:26px;top:44%;inset-inline-start:2%}
@media(prefers-reduced-motion:no-preference){
 .kit-hero-art .kit-fan.f0{animation:fan-0 1s cubic-bezier(.3,1.3,.5,1) .2s backwards}
 .kit-hero-art .kit-fan.f1{animation:fan-1 1s cubic-bezier(.3,1.3,.5,1) .3s backwards}
 .kit-hero-art .kit-fan.f2{animation:fan-2 1s cubic-bezier(.3,1.3,.5,1) .4s backwards}
 .kit-hero-art .kit-cover{animation:cover-in .9s cubic-bezier(.3,1.3,.5,1) backwards}
}
@keyframes fan-0{from{transform:translateX(-50%) rotate(-4deg);opacity:0}}
@keyframes fan-1{from{transform:translateX(-50%) rotate(-4deg);opacity:0}}
@keyframes fan-2{from{transform:translateX(-50%) rotate(-4deg);opacity:0}}
@keyframes cover-in{from{translate:0 30px;rotate:-10deg;opacity:0}}
.kit-inside,.kit-contents,.kit-how,.kit-free,.kit-final{padding-block:clamp(32px,4.4vw,64px)}
.kit-pages{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(170px,19vw,230px);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 4px 26px;margin-inline:-4px;scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}
.kit-pages{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 72px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 72px),#0000);padding-inline-end:72px}
[dir=rtl] .kit-pages{-webkit-mask:linear-gradient(270deg,#000 calc(100% - 72px),#0000);mask:linear-gradient(270deg,#000 calc(100% - 72px),#0000)}
.kit-page{scroll-snap-align:start}
.kit-page figure{display:grid;gap:12px}
.kit-page img{display:block;width:100%;height:auto;aspect-ratio:480/680;background:#fff;border-radius:8px;box-shadow:0 1px 0 #0001,0 18px 30px -16px #6a2e1c99;rotate:calc((var(--i) - 4.5) * .5deg);transition:transform .35s cubic-bezier(.3,1.4,.5,1),rotate .35s}
.kit-page:hover img{transform:translateY(-8px) scale(1.03);rotate:0deg}
.kit-page figcaption{display:flex;justify-content:space-between;gap:10px;font:800 14px/1.35 var(--display);color:var(--ink-2)}
.kit-page figcaption b{flex-shrink:0;display:grid;place-items:center;min-width:28px;height:24px;padding:0 6px;border-radius:8px;background:var(--paper-2);color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.kit-groups{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.kit-group{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px 20px 12px 12px;border-radius:24px;background:#fff;box-shadow:var(--shadow-s)}
[dir=rtl] .kit-group{padding:12px 12px 12px 20px}
.kit-group-art{position:relative;height:118px;border-radius:16px;background:var(--dots) 0 0/10px 10px,linear-gradient(150deg,var(--sun-tint),var(--pink-tint));overflow:hidden}
.kit-group:nth-child(2) .kit-group-art{background:var(--dots) 0 0/10px 10px,linear-gradient(150deg,var(--green-tint),var(--blue-tint))}
.kit-group:nth-child(3) .kit-group-art{background:var(--dots) 0 0/10px 10px,linear-gradient(150deg,var(--blue-tint),var(--purple-tint))}
.kit-group:nth-child(4) .kit-group-art{background:var(--dots) 0 0/10px 10px,linear-gradient(150deg,var(--orange-tint),var(--sun-tint))}
.kit-group:nth-child(5) .kit-group-art{background:var(--dots) 0 0/10px 10px,linear-gradient(150deg,var(--teal-tint),var(--green-tint))}
.kit-group:nth-child(6) .kit-group-art{background:var(--dots) 0 0/10px 10px,linear-gradient(150deg,var(--pink-tint),var(--purple-tint))}
.kit-group-art span{position:absolute;top:18px;width:46px;inset-inline-start:calc(12px + var(--i) * 24px);rotate:calc((var(--i) - 1.5) * 6deg);transition:translate .3s cubic-bezier(.3,1.4,.5,1)}
.kit-group:hover .kit-group-art span{translate:0 -6px}
.kit-group-art img{display:block;width:100%;height:auto;aspect-ratio:210/297;background:#fff;border-radius:3px;box-shadow:0 8px 14px -6px #6a2e1c88}
.kit-group h3{font-size:19px;line-height:1.2}
.kit-group p{font-size:14.5px;color:var(--ink-2);line-height:1.45;margin-top:4px}
.kit-group-pages{padding:4px 10px;border-radius:99px;background:var(--ink);color:#fff;font:850 13px/1.4 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums}
.kit-total{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;max-width:none;margin-top:16px;padding:14px 22px;border-radius:18px;background:var(--paper-2);font:800 15px var(--display);color:var(--ink-2)}
.kit-total b{font-size:17px;color:var(--ink)}
.kit-how{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.kit-how h2{margin-bottom:22px}
.kit-steps ol{list-style:none;counter-reset:step;display:grid;gap:14px}
.kit-steps li{counter-increment:step;display:grid;grid-template-columns:58px 1fr;gap:4px 16px;padding:20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s)}
.kit-steps li::before{content:counter(step);grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--pink-ink);color:#fff;font:900 22px var(--display)}
:lang(ar) .kit-steps li::before{content:counter(step,arabic-indic)}
.kit-steps li:nth-child(2)::before{background:var(--blue-ink)}.kit-steps li:nth-child(3)::before{background:var(--green-ink)}
.kit-steps h3{font-size:20px}
.kit-steps p{color:var(--ink-2);font-size:16px}
.kit-who ul{list-style:none;display:grid;gap:12px}
.kit-who li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:10px 18px 10px 10px;border-radius:20px;background:#fff;box-shadow:var(--shadow-s);font:850 17px var(--display)}
.kit-who .disc{width:64px;height:64px}
.kit-free{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:start}
.kit-faq h2{font-size:clamp(26px,2.8vw,36px);margin-bottom:16px}
.kit-final-card{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:center;padding:clamp(22px,3.4vw,40px);border-radius:34px;background:radial-gradient(55% 75% at 0 0,#ffd5e4,#ffd5e400 70%),radial-gradient(50% 70% at 100% 100%,#ffe8b0,#ffe8b000 70%),linear-gradient(135deg,#fff,#fff4ee);box-shadow:var(--shadow-l)}
.kit-final-card img{width:100%;height:auto;border-radius:12px;rotate:-4deg;box-shadow:0 26px 40px -20px #6a2e1caa}
.kit-final-card>div{display:grid;gap:12px;justify-items:start}
.kit-final-card h2{font-size:clamp(28px,3.4vw,44px)}
/* About: how a sheet is made, principles and the maker */
.about-flow,.about-principles,.about-maker{padding-block:clamp(28px,4vw,60px)}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.flow-step{position:relative;display:grid;gap:8px;align-content:start;padding:22px;border-radius:24px;background:#fff;box-shadow:var(--shadow-s)}
.flow-icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:8px;border-radius:20px;background:var(--accent-tint);color:var(--accent-ink)}
.flow-icon svg{width:38px;height:38px}
.flow-step h3{font-size:20px}
.flow-step p{font-size:15.5px;color:var(--ink-2);line-height:1.5}
.flow-step:not(:last-child)::after{content:'';position:absolute;top:52px;inset-inline-start:100%;width:40px;height:4px;background:radial-gradient(circle,var(--rule-2) 1.6px,transparent 2px) 0 0/8px 4px}
.flow-step:not(:last-child)::before{content:'';position:absolute;z-index:1;top:48px;inset-inline-start:calc(100% + 2px);width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #fff}
@media(prefers-reduced-motion:no-preference){.flow-step:not(:last-child)::before{animation:packet 2.4s cubic-bezier(.5,0,.5,1) calc(var(--i) * .8s) infinite}}
@keyframes packet{0%{translate:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{translate:24px;opacity:0}}
[dir=rtl] .flow-step:not(:last-child)::before{animation-name:packet-rtl}
@keyframes packet-rtl{0%{translate:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{translate:-24px;opacity:0}}
.about-principles h2{margin-bottom:24px}
.principle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.principle{display:grid;gap:10px;align-content:start;padding:24px;border-radius:26px;background:linear-gradient(160deg,#fff 0,var(--accent-tint) 160%);box-shadow:var(--shadow-s)}
.principle .disc{width:76px;height:76px}
.principle h3{font-size:22px}
.principle p{font-size:16px;color:var(--ink-2)}
.maker-card{position:relative;display:grid;grid-template-columns:140px minmax(0,1fr);gap:32px;align-items:center;padding:clamp(24px,3.6vw,44px);border-radius:34px;background:var(--ink);color:#fff;overflow:hidden;box-shadow:var(--shadow-l)}
.maker-card::after{content:'';position:absolute;inset-inline-end:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#ffc21a44,transparent 70%)}
.maker-mark{display:grid;place-items:center;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3,transparent 60%),#2b2a38}
.maker-mark .prop{width:84%}
.maker-card h2{font-size:clamp(26px,3vw,38px);margin-bottom:12px}
.maker-card p{color:#dcdde8}
.maker-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.maker-card .button{background:#fff;color:var(--ink)}
.maker-card .button.secondary{background:#ffffff1f;color:#fff;box-shadow:none}
/* Footer */
.site-footer{position:relative;margin-top:56px;padding-block:72px 44px;background:#1b1a24;color:#e9e9f0;border-radius:44px 44px 0 0;overflow:hidden;isolation:isolate}
.site-footer::before{content:'';position:absolute;inset:-120px auto auto -80px;width:360px;height:360px;z-index:-1;border-radius:50%;background:radial-gradient(circle,#ff4f8b40,transparent 70%)}
.site-footer::after{content:'';position:absolute;inset:auto -60px -140px auto;width:420px;height:420px;z-index:-1;border-radius:50%;background:radial-gradient(circle,#2f6bff38,transparent 70%)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.site-footer .brand{color:#fff}
.site-footer .brand .logo{color:#fff}
.site-footer p{font-size:15px;color:#c9c9d6;margin-top:14px}
.site-footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.site-footer h2{font:900 13px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--sun);margin-bottom:12px}
.site-footer nav a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;text-decoration:none;color:#dcdce6}
.site-footer nav a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--pink)}
.site-footer button{border:0;background:none;color:#dcdce6;text-decoration:underline;padding:6px 0;min-height:40px;font-size:15px;text-align:start}
.site-footer small{display:block;font-size:13px;color:#a9a9b8;margin-top:8px}
.footer-dots{display:flex;gap:8px;margin-top:22px}
.footer-dots i{width:14px;height:14px;border-radius:50%;background:var(--c)}
#offline-status{max-width:30ch}
dialog{max-width:560px;width:calc(100% - 32px);border:0;border-radius:28px;background:#fff;color:var(--ink);padding:0;box-shadow:var(--shadow-l)}
dialog::backdrop{background:#17181f80;backdrop-filter:blur(3px)}
.consent-body{padding:30px}
.consent-body h2{font-size:28px}
.consent-body p{font-size:16px;margin:14px 0}
.consent-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.update-notice{position:fixed;inset-inline:16px;bottom:16px;max-width:620px;margin:auto;z-index:60;display:flex;gap:18px;align-items:center;padding:16px 18px;background:#fff;border-radius:22px;box-shadow:var(--shadow-l);font-size:15px}
.update-notice p{flex:1}
.update-notice .button{flex-shrink:0}
/* Scroll-driven entrances where supported; elsewhere everything is simply visible. */
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
  .section-head,.shelf,.region-card,.tool-card,.pack-card,.post-link,.tile,.ad,.how li,.book-card,.rules li,.tips li,.film-card,.fig,.kit-group,.kit-steps li,.kit-who li,.flow-step,.principle{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  /* Neighbours in a row arrive one after another. */
  :is(.shelf-row,.card-grid,.tool-grid,.post-grid,.region-grid,.pack-grid,.principle-grid,.flow,.kit-groups)>:nth-child(4n+2){animation-range:entry 6% entry 66%}
  :is(.shelf-row,.card-grid,.tool-grid,.post-grid,.region-grid,.pack-grid,.principle-grid,.flow,.kit-groups)>:nth-child(4n+3){animation-range:entry 12% entry 72%}
  :is(.shelf-row,.card-grid,.tool-grid,.post-grid,.region-grid,.pack-grid,.principle-grid,.flow,.kit-groups)>:nth-child(4n){animation-range:entry 18% entry 78%}
 }
 @view-transition{navigation:auto}
 ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
}
/* Responsive */
@media(max-width:1180px){
 .shelf-row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer-grid{grid-template-columns:1fr 1fr}
 .footer-brand{grid-column:1/-1}
 .game-content,.article-layout{grid-template-columns:minmax(0,1fr)}
 .article-aside{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
 .ad--skyscraper .ad-link{grid-template-rows:auto 170px auto auto}
 .film-card{grid-template-columns:1fr}
 .kit-link{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);gap:20px 32px}
 .kit-points{grid-template-columns:1fr}
}
@media(max-width:960px){
 .primary-nav{display:none}
 .head-actions{margin-inline-start:auto}
 .hero{grid-template-columns:1fr;gap:12px}
 .printer{max-width:560px;width:100%;margin-inline:auto;height:470px}
 .section-head,.shelf-head{grid-template-columns:1fr}
 .shelf-head{grid-template-columns:auto 1fr;align-items:center}
 .shelf-head p,.shelf-head .text-link{grid-column:1/-1}
 .page-head.has-art{grid-template-columns:minmax(0,1fr) 170px}
 .head-art{height:170px}
 .how{grid-template-columns:1fr;gap:32px}
 .workbench{grid-template-columns:1fr}
 .controls{position:static;max-height:none}
 .mode-tabs{display:flex;position:sticky;top:76px;z-index:20;gap:8px;padding-block:8px;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px)}
 .mode-tabs button{flex:1;min-height:48px;border:0;border-radius:14px;background:#fff;box-shadow:var(--shadow-s);font:900 15px var(--display)}
 .mode-tabs button[aria-pressed=true]{background:var(--ink);color:#fff}
 .js .workbench .controls{display:none}
 .js.show-settings .workbench .controls,.js body.show-settings .workbench .controls{display:block}
 .js body.show-settings .preview-section{display:none}
 .preview-toolbar{position:static;backdrop-filter:none;background:#fff}
 .ad--leaderboard .ad-link{grid-template-columns:150px minmax(0,1fr);padding:16px 18px 18px 0}
 .ad--leaderboard .ad-cta{grid-column:2}
 .ad--leaderboard .ad-meta{position:static;grid-column:1/-1;padding-inline-start:18px}
 .game-hero .disc{width:110px;height:110px}
}
@media(max-width:640px){
 body{font-size:16.5px}
 .head-row{min-height:64px;gap:12px}
 .brand{font-size:25px}
 .brand .logo{width:32px;height:32px}
 .site-head summary{padding:0 10px}
 .lang-long{display:none}.lang-short{display:inline}
 .menu-panel{position:fixed;inset:66px 10px auto;width:auto;grid-template-columns:1fr;max-height:calc(100vh - 84px);overflow:auto}
 .hero h1{font-size:clamp(42px,12.4vw,60px)}
 .printer{height:400px}
 .printing{min-width:0;padding:10px 14px}
 .printing b{font-size:16px}
 .sudoku-corner{display:none}
 .page-head.has-art{grid-template-columns:minmax(0,1fr) 96px;gap:8px}
 .head-art{height:110px}
 .head-art .prop{width:100%;inset-inline-end:0}
 .head-art .prop+.prop,.head-art .doodle{display:none}
 .game-hero{grid-template-columns:minmax(0,1fr) 76px;gap:10px}
 .game-hero .disc{width:76px;height:76px}
 .shelf{padding:18px;border-radius:24px}
 .shelf-head .disc{width:58px;height:58px}
 .shelf-head h3{font-size:24px}
 .shelf-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-18px;padding:4px 18px 10px;scrollbar-width:none}
 .shelf-row .tile{flex:0 0 76%;scroll-snap-align:center}
 .world-strip{border-radius:32px;margin-inline:8px}
 .card-grid{grid-template-columns:1fr 1fr;gap:12px}
 .card-grid .tile .thumb{height:150px;padding:14px 10px 0;margin:6px 6px 0;border-radius:14px}
 .card-grid .card-body{padding:12px}
 .card-grid .card-title{font-size:18px}
 .card-grid .card-short{display:none}
 .card-grid .chip{font-size:11px}
 .ad-slot{grid-column:1/-1}
 .ad--ticket .ad-link{grid-template-rows:auto 160px 1fr auto}
 .filters{top:64px}
 .search input,.region-select select{min-width:0;width:100%}
 .filter-row{display:grid;grid-template-columns:1fr}
 .workbench{gap:18px}
 .mode-tabs{top:64px}
 .controls{padding:18px}
 .field-pair{grid-template-columns:1fr}
 .preview-toolbar{padding:12px 14px}
 .preview-toolbar .button-row{position:fixed;inset-inline:0;bottom:0;z-index:25;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:#fffffff2;backdrop-filter:blur(10px);box-shadow:0 -10px 30px -12px #6a2e1c40;border-radius:22px 22px 0 0}
 .js body.show-settings .preview-toolbar .button-row{display:none}
 .preview-toolbar .button{min-height:48px;padding:6px 8px;font-size:14px}
 .page-games .site-footer,.page-games main{padding-bottom:0}
 body:has(.preview-toolbar){padding-bottom:80px}
 .paper-window{padding:10px;max-height:none;margin-inline:calc(-1 * var(--gutter));border-radius:0}
 .ad--rectangle .ad-link,.ad--leaderboard .ad-link{grid-template-columns:1fr;padding:0 0 18px}
 .ad--rectangle .ad-art,.ad--leaderboard .ad-art{min-height:170px}
 .ad--rectangle .ad-copy,.ad--leaderboard .ad-copy,.ad--rectangle .ad-cta,.ad--leaderboard .ad-cta{margin-inline:18px;grid-column:auto}
 .ad--rectangle .ad-meta,.ad--leaderboard .ad-meta{padding:14px 18px 0}
 .book-card{grid-template-columns:1fr;gap:18px}
 .book-cover img.tall{width:56%}
 .footer-grid{grid-template-columns:1fr}
 .site-footer{border-radius:32px 32px 0 0}
 .how li{grid-template-columns:48px 1fr;padding:16px}
 .how li::before{width:44px;height:44px}
 .article-head{border-radius:24px}
 .film-card{padding:10px;border-radius:26px}
 .film-screen{border-radius:18px}
 .film-copy{padding:0 10px 12px}
 .film-controls{inset-inline-end:8px;top:8px}
 .film-controls button{padding:0 11px}
 .film-controls .label{display:none}
 .update-notice{display:block}
 .kit-link,.kit-feature.compact .kit-link{grid-template-columns:1fr;padding:22px 20px 26px;border-radius:30px}
 .kit-art{min-height:300px}
 .kit-feature.compact .kit-art{min-height:240px;max-width:200px;justify-self:center}
 .kit-cover{width:min(220px,62%)}
 .kit-badge{width:78px;height:78px;font-size:11px}
 .kit-badge b{font-size:28px}
 .update-notice .button{margin-top:10px}
}
/* Responsive rules for the illustrated articles, the kit page and the About page */
@media(max-width:1180px){
 .post-grid.lead{grid-template-columns:repeat(2,minmax(0,1fr))}
 .post-grid.lead .featured{grid-row:auto}
 .post-link.featured .cover{min-height:260px}
 .article-aside .toc{display:none}
 .ad--skyscraper .ad-cover.tall{width:auto;height:86%;bottom:7%}
 .toc-inline{display:block}
 .kit-groups{grid-template-columns:1fr}
 .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .flow-step:nth-child(2)::after,.flow-step:nth-child(2)::before{display:none}
}
@media(max-width:960px){
 .kit-hero{grid-template-columns:1fr}
 .kit-hero-art{min-height:420px;max-width:560px;width:100%;margin-inline:auto}
 .kit-how,.kit-free{grid-template-columns:1fr;gap:32px}
 .article-head.has-cover{grid-template-columns:minmax(0,1fr) 220px}
}
@media(max-width:640px){
 .post-grid.lead{grid-template-columns:1fr}
 .post-grid.lead .featured{grid-column:auto}
 .post-link.featured .cover{min-height:220px}
 .post-link.featured .post-title{font-size:23px}
 .cover{height:150px}
 .article-head.has-cover{grid-template-columns:1fr;padding:22px 20px 24px}
 .article-head .cover.big{order:-1;aspect-ratio:16/9}
 .fig{margin-inline:calc(-1 * var(--gutter) + 6px)!important;border-radius:20px;padding:12px 10px 14px}
 .fig figcaption{font-size:14.5px;padding-inline:4px}
 .prose blockquote{padding:16px 18px 16px 50px;font-size:17px}
 [dir=rtl] .prose blockquote{padding:16px 50px 16px 18px}
 .how .step-prop{width:48px;inset-inline-end:12px}
 .how li h3,.how li p{padding-inline-end:52px}
 .kit-hero h1{font-size:clamp(36px,10vw,48px)}
 .kit-hero-art{min-height:340px}
 .kit-hero-art .kit-badge{width:74px;height:74px}
 .kit-pages{grid-auto-columns:62%;gap:16px;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
 .kit-group{grid-template-columns:96px minmax(0,1fr);padding:10px 14px 10px 10px}
 .kit-group-art{height:96px}
 .kit-group-art span{width:34px;inset-inline-start:calc(8px + var(--i) * 15px);top:14px}
 .kit-group-pages{grid-column:2;justify-self:start}
 .kit-steps li{grid-template-columns:48px 1fr;padding:16px}
 .kit-steps li::before{width:44px;height:44px}
 .kit-final-card{grid-template-columns:1fr;gap:20px;text-align:start}
 .kit-final-card img{width:150px}
 .flow{grid-template-columns:1fr;gap:16px}
 .flow-step::after,.flow-step::before{display:none}
 .flow-step{grid-template-columns:56px 1fr;column-gap:16px;align-items:start}
 .flow-icon{grid-row:span 2;width:56px;height:56px;margin:0}
 .maker-card{grid-template-columns:1fr;gap:18px}
 .maker-mark{width:96px;height:96px}
 /* Tall covers in narrow ads stay inside their art box instead of rising over the label. */
 .ad--rectangle .ad-cover.tall,.ad--leaderboard .ad-cover.tall{width:auto;height:86%;bottom:7%}
 .ad--rectangle .ad-cover.wide,.ad--leaderboard .ad-cover.wide{width:auto;max-width:72%;height:80%;bottom:9%}
}
@media(max-width:380px){.card-grid{grid-template-columns:1fr}.card-grid .card-short{display:block}}
@media(display-mode:standalone){.site-head{padding-top:env(safe-area-inset-top)}}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4,:lang(ar) .post-title,:lang(ar) .tool-name,:lang(ar) .region-name,:lang(ar) .ad-title,:lang(ar) .card-title,:lang(ar) .printing b{font-family:'Noto Sans Arabic',var(--display);font-weight:800;letter-spacing:0;line-height:1.35}
:lang(ar) body{font-family:'Noto Sans Arabic',var(--body);line-height:1.75}
:lang(ar) .card-kicker,:lang(ar) .menu-title,:lang(ar) .site-footer h2,:lang(ar) .printing span{text-transform:none;letter-spacing:0}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) h4,:lang(zh) .post-title,:lang(zh) .tool-name,:lang(zh) .region-name,:lang(zh) .card-title,:lang(zh) .printing b{font-family:'Nunito','Noto Sans SC',sans-serif;font-weight:800;letter-spacing:0;line-height:1.3}
:lang(zh) body{font-family:var(--body),'Noto Sans SC';line-height:1.75}
:lang(ar) input[type=number]{direction:ltr;text-align:start}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- Original four makers: HTML sheets for bingo, 90-ball, word search and prompt cards ---- */
.sheet{position:relative;background:white;color:#183d34;width:100%;max-width:190mm;aspect-ratio:190/277;padding:4%;margin:0 auto 24px;box-shadow:0 1px 0 #0003,0 18px 38px -18px #000c;font:clamp(9px,2cqw,14px)/1.4 var(--sans)}
.sheet:last-child{margin-bottom:0}
.sheet-inner{height:96%;min-height:0}
.sheet h2{font:700 clamp(11px,3cqw,21px)/1.2 var(--sans);letter-spacing:-.5px;overflow-wrap:anywhere}
.sheet h3{font:750 clamp(10px,2.3cqw,16px)/1.3 var(--sans);margin:3% 0 2%}
.sheet-footer{position:absolute;bottom:1.8%;left:4%;right:4%;display:flex;justify-content:space-between;gap:10px;color:#526258;font-size:clamp(7px,1.25cqw,9px)}
.sheet-footer>span:first-child{direction:ltr}
.sheet-grid{display:grid;height:100%;gap:4%}
.per-1{grid-template-columns:1fr;grid-template-rows:1fr}
.per-2{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.per-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.game-card{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:2%}
.game-card header{display:flex;justify-content:space-between;gap:12px;align-items:start}
.game-card header>span{font-size:clamp(8px,1.8cqw,12px);white-space:nowrap}
.board{width:100%;height:100%;table-layout:fixed;border-collapse:collapse;text-align:center;border:1.5px solid currentColor}
.board td{border:1px solid #81978a;overflow-wrap:anywhere;font-size:clamp(9px,2.1cqw,15px);font-weight:650;line-height:1.25;padding:2%}
.board th{background:#e8ecdf;color:#183d34;font-size:clamp(11px,3cqw,22px);line-height:1.2;padding:1%}
.board .free{background:#edf0e7;font-size:clamp(8px,1.7cqw,12px)}
.board .empty{background:repeating-linear-gradient(45deg,#fff,#fff 4px,#f1f2ee 4px,#f1f2ee 5px)}
.board.numbers td,.tombala .board td{font-size:clamp(14px,3.8cqw,28px);font-weight:750}
.card-signature{font-size:clamp(7px,1.2cqw,9px);text-align:right;color:#526258}
.per-4 .board td{font-size:clamp(8px,1.5cqw,11px)}
.per-4 .board.numbers td{font-size:clamp(12px,2.6cqw,19px)}
.per-4 h2{font-size:clamp(10px,2.1cqw,15px)}
.per-4 header{display:block}
.tombala{max-height:80%;align-self:center}
.ticket-grid.per-1 .tombala{height:65%}
.ticket-grid.per-2 .tombala,.ticket-grid.per-4 .tombala{height:85%}
.ticket-grid.per-4{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:3%}
.ticket-grid.per-4 .board td{font-size:clamp(11px,3cqw,22px)}
.compact-long.per-4 .board td{font-size:clamp(7px,1.25cqw,9px)}
.sheet-help{font-size:clamp(8px,1.7cqw,12px);line-height:1.5;margin:2% 0 4%;max-width:none}
.call-list{display:grid;grid-template-columns:1fr 1fr;gap:0 4%;font-size:clamp(9px,2cqw,14px)}
.call-list>div{display:flex;gap:10px;padding:1.3% 0;border-bottom:1px dashed #a5b1a8;align-items:center;overflow-wrap:anywhere;min-width:0}
.check-square{display:inline-block;width:.8em;height:.8em;border:1px solid currentColor;flex-shrink:0}
.puzzle-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:5%}
.puzzle-head span{font-size:clamp(8px,1.8cqw,12px);white-space:nowrap}
.search-grid{border-collapse:collapse;width:82%;margin:0 auto;table-layout:fixed;text-align:center;border:1px solid #81978a;aspect-ratio:1}
.search-grid td{font-size:clamp(9px,2.6cqw,19px);font-weight:650;border:1px solid #d7dfd8;line-height:1.1;padding:.5% 0}
.search-grid .found{background:#e1ebd8;color:#173d32;font-weight:850;outline:1px solid #56735c;outline-offset:-1px}
.word-bank{display:grid;grid-template-columns:repeat(3,1fr);gap:5px 16px;list-style:none;padding:0;margin:0;font-size:clamp(9px,2cqw,14px)}
.word-bank li{overflow-wrap:anywhere}
.word-bank small{font-size:.8em;display:block}
.prompt-sheet .sheet-inner{display:flex;flex-direction:column}
.prompt-grid{display:grid;flex:1;min-height:0;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
.prompt-grid.per-9{grid-template-columns:repeat(3,1fr)}
.prompt-grid.per-12{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr)}
.prompt-card{display:flex;flex-direction:column;border:1px dashed #9ca99d;padding:8%;min-width:0;gap:12px}
.prompt-card small{font-size:clamp(7px,1.4cqw,10px);color:#526258}
.prompt-card p{font:650 clamp(10px,2.6cqw,18px)/1.4 var(--sans);overflow-wrap:anywhere;margin:auto 0}
.per-9 .prompt-card p,.per-12 .prompt-card p{font-size:clamp(9px,2cqw,14px)}
.large-print .board td{font-size:clamp(15px,3.6cqw,26px)}
.large-print .board.numbers td,.large-print .tombala td{font-size:clamp(21px,5cqw,36px)}
.large-print .word-bank,.large-print .call-list{font-size:clamp(12px,3cqw,22px)}
.large-print .search-grid td{font-size:clamp(11px,3cqw,22px)}
.large-print .prompt-card p{font-size:clamp(14px,3.6cqw,26px)}
.ink-only .sheet{color:black}
.ink-only .board td,.ink-only .board th,.ink-only .search-grid td{border-color:#666;color:black;background:none}
.ink-only .board .empty{background:#eee}
.ink-only .search-grid .found{background:#eee;outline-color:black;font-weight:850}
.letter .sheet{aspect-ratio:195.9/259.4;max-width:195.9mm}
:lang(ar) .sheet h2,:lang(ar) .sheet h3{letter-spacing:0;line-height:1.5}
@media print{
 :root{color-scheme:light}
 html,body{background:white!important;margin:0!important;padding:0!important}
 body{font:12pt/1.4 Arial,sans-serif;color:black!important}
 .site-head,.site-footer,.crumbs,.doodle,.prop,.film,.hero,.clouds::before,.read-progress,.article-print,.toc-inline,.game-hero,.mode-tabs,.controls,.preview-toolbar,.print-hint,.tool-after,.game-content,.related,.after-download,.ad,dialog,.skip,noscript,.update-notice,.page-head,.article,.catalog{display:none!important}
 main,.workbench,.preview-section{display:block!important;max-width:none!important;width:auto!important;padding:0!important;margin:0!important}
 .paper-window{display:block!important;container-type:normal!important;overflow:visible!important;max-height:none!important;height:auto!important;padding:0!important;margin:0!important;border:0!important;background:none!important;border-radius:0!important}
 .scene-sheet{width:calc(var(--w) * 1mm)!important;height:calc(var(--h) * 1mm)!important;max-width:none!important;margin:0!important;break-after:page;page-break-after:always;animation:none!important}
 .scene-sheet:last-child{break-after:auto;page-break-after:auto}
 .scene-sheet svg{width:100%!important;height:100%!important;box-shadow:none!important;border-radius:0!important}
 .sheet{width:190mm!important;max-width:none!important;height:276mm!important;aspect-ratio:auto!important;margin:0!important;padding:5mm!important;box-shadow:none!important;break-after:page;break-inside:avoid;page-break-after:always;color:#183d34!important;font:11pt/1.35 Arial,sans-serif;print-color-adjust:exact;-webkit-print-color-adjust:exact}
 .letter .sheet{width:195.9mm!important;height:258.4mm!important}
 .sheet:last-child{break-after:auto;page-break-after:auto}
 .sheet-inner{height:98%!important}
 .sheet h2{font:700 16pt/1.2 Arial,sans-serif;letter-spacing:0}
 .sheet h3{font:700 13pt Arial,sans-serif}
 .sheet,.sheet h2,.sheet h3,.prompt-card p{font-family:var(--sans)!important}
 .sheet-footer{font-size:7pt;bottom:1mm;left:5mm;right:5mm}
 .game-card header>span{font-size:9pt}
 .board td{font-size:12pt;padding:1mm;line-height:1.1}
 .board .free{font-size:10pt}
 .board.numbers td,.tombala .board td{font-size:23pt}
 .board th{font-size:18pt}
 .card-signature{font-size:7pt}
 .per-4 .board td{font-size:9pt}
 .per-4 .board.numbers td{font-size:17pt}
 .per-4 h2{font-size:12pt}
 .ticket-grid.per-4 .board td{font-size:18pt}
 .compact-long.per-4 .board td{font-size:7pt}
 .sheet-help{font-size:10pt}
 .call-list{font-size:11pt}
 .search-grid{width:145mm;height:145mm;aspect-ratio:auto}
 .search-grid td{font-size:16pt;padding:0;line-height:1.1}
 .word-bank{font-size:11pt}
 .word-list-sheet .word-bank{margin-top:8mm}
 .puzzle-head span{font-size:10pt}
 .prompt-card small{font-size:8pt}
 .prompt-card p{font-size:16pt}
 .per-9 .prompt-card p,.per-12 .prompt-card p{font-size:12pt}
 .large-print .board td{font-size:18pt}
 .large-print .board.numbers td,.large-print .tombala .board td{font-size:28pt}
 .large-print .word-bank,.large-print .call-list{font-size:16pt}
 .large-print .search-grid td{font-size:18pt}
 .large-print .prompt-card p{font-size:18pt}
 .ink-only .sheet{color:black!important}
 .ink-only .board td,.ink-only .board th,.ink-only .search-grid td{color:black!important}
 .ink-only .sheet h2{color:black!important}
 :lang(ar) .sheet h2,:lang(ar) .sheet h3{line-height:1.5}
 :lang(ar) .board td{line-height:1.35}
}