@font-face{font-family:Charm;src:url('./assets/Charm-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:light;--paper:#fbfaf5;--ink:#203b6c;--muted:#52617a;--line:#d9e0eb;--blue:#244daa;--yellow:#ffe799;--red:#b54148;--white:#fff;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:1rem;line-height:1.65;-webkit-text-size-adjust:100%}
a{color:inherit;text-underline-offset:.25em}
button,input,summary{font:inherit}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:5px}
.skip{position:absolute;left:1rem;top:-5rem;z-index:10;background:var(--ink);color:white;padding:.65rem 1rem}
.skip:focus{top:1rem}
.wrap{width:min(var(--max),calc(100% - 3rem));margin-inline:auto}
.site-header{border-bottom:1px solid var(--line);background:var(--paper)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:100px;padding-block:1rem}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:Charm,Georgia,serif;font-weight:700;font-size:2.05rem;line-height:1.1}
.brand img{width:48px;height:48px;border-radius:10px}
.nav{display:flex;gap:1.65rem;flex-wrap:wrap;align-items:center;font-size:.94rem;font-weight:600}
.nav a{text-decoration:none;padding:.45rem .05rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-color:var(--blue)}
.eyebrow{margin:0 0 1rem;font-size:.78rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3,p{margin-top:0}
h1,h2,.handwritten{font-family:Charm,Georgia,serif;font-weight:700}
h1{font-size:clamp(3.4rem,7vw,6.25rem);line-height:1.06;letter-spacing:-.025em;margin-bottom:1.5rem}
h2{font-size:clamp(2rem,4vw,3.1rem);line-height:1.2;letter-spacing:-.015em;margin-bottom:1rem}
h3{font-size:1.1rem;line-height:1.4}
.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:3rem;padding-block:4.8rem 3.6rem}
.hero-copy{max-width:600px}
.hero h1 span{display:inline-block;color:var(--blue);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.15em;text-underline-offset:.02em}
.lead{font-size:1.16rem;line-height:1.75;color:var(--muted);max-width:520px;margin-bottom:1.6rem}
.actions{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.72rem 1.3rem;font-size:.94rem;font-weight:650;border:1.5px solid var(--ink);border-radius:5px;text-decoration:none;transition:transform .15s,background .15s}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--ink);color:var(--white);box-shadow:3px 3px 0 #a9b6ca}
.button-primary:hover{background:var(--blue)}
.button-quiet{background:transparent}
.button-light{background:var(--white);color:var(--ink);border-color:var(--white)}
.app-store-area{margin-top:1.5rem}
.app-store-placeholder{display:flex;align-items:center;gap:.75rem;width:max-content;max-width:100%;min-width:185px;min-height:68px;padding:.6rem .9rem;border:1.5px dashed #b8c5d8;border-radius:6px;background:var(--white)}
.app-store-placeholder img{width:44px;height:44px;border-radius:8px}
.app-store-label{font-size:1.15rem;line-height:1.35;font-weight:700;margin:0}
.app-store-status{font-size:.875rem;line-height:1.5;font-weight:600;color:var(--muted);margin:0}
.app-store-note{margin:.6rem 0 0;font-size:.875rem;line-height:1.6;color:var(--muted);max-width:360px}
.hero-art{position:relative;padding:1.5rem 1.5rem 2rem;transform:rotate(2deg);background:#fffefa;border:1px solid #d6d9db;border-radius:3px;box-shadow:7px 9px 0 #e9e8e0,0 15px 35px #203b6c0b}
.hero-art img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.art-caption{font-family:Charm,Georgia,serif;font-size:1.6rem;line-height:1.3;text-align:center;margin:.25rem 0 0}
.fact-strip{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding:1.6rem 0;margin-bottom:4.6rem}
.fact{text-align:center;padding:.25rem 1rem}
.fact+.fact{border-left:1px solid var(--line)}
.fact strong{display:block;font-family:Charm,Georgia,serif;font-size:1.85rem;line-height:1.3}
.fact span{font-size:.9rem;color:var(--muted)}
.paper-preview{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4rem;padding-bottom:4.6rem}
.paper-preview-copy{max-width:440px}
.paper-preview-copy h2{font-size:clamp(2.5rem,4.7vw,3.7rem)}
.paper-preview-copy .lead{font-size:1.08rem;margin-bottom:1rem}
.paper-preview-copy>p:last-child{color:var(--muted);margin-bottom:0}
.paper-picker{border:0;min-width:0;width:min(360px,100%);margin:0 auto;padding:0;position:relative}
.visually-hidden,.paper-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.paper-radio{top:0;width:calc((100% - 1rem) / 3);height:46px;margin:0;clip:auto;opacity:0;z-index:1;cursor:pointer}
#preview-notebook{left:0}
#preview-crumple{left:calc((100% + .5rem) / 3)}
#preview-pirate{left:auto;right:0}
.paper-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:1.5rem}
.paper-options label{display:flex;align-items:center;justify-content:center;min-height:46px;padding:.55rem .95rem;background:var(--white);border:1px solid var(--line);border-radius:5px;font-size:.94rem;font-weight:650;cursor:pointer}
.paper-options label:hover{border-color:var(--blue)}
#preview-notebook:checked~.paper-options label[for=preview-notebook],#preview-crumple:checked~.paper-options label[for=preview-crumple],#preview-pirate:checked~.paper-options label[for=preview-pirate]{background:var(--ink);border-color:var(--ink);color:var(--white)}
#preview-notebook:focus-visible~.paper-options label[for=preview-notebook],#preview-crumple:focus-visible~.paper-options label[for=preview-crumple],#preview-pirate:focus-visible~.paper-options label[for=preview-pirate]{outline:3px solid var(--red);outline-offset:4px}
.paper-window{width:min(230px,100%);margin-inline:auto}
.paper-device{padding:7px;border:4px solid var(--ink);border-radius:28px;background:var(--ink);box-shadow:9px 11px 0 #203b6c12}
.paper-screen{display:none;width:100%;aspect-ratio:430/932;object-fit:cover;border-radius:18px}
.paper-description{display:none;text-align:center;color:var(--muted);font-size:.9rem;min-height:3em;max-width:350px;margin:1.35rem auto 0}
#preview-notebook:checked~.paper-window .paper-notebook,#preview-crumple:checked~.paper-window .paper-crumple,#preview-pirate:checked~.paper-window .paper-pirate,#preview-notebook:checked~.paper-notebook,#preview-crumple:checked~.paper-crumple,#preview-pirate:checked~.paper-pirate{display:block}
@media(max-width:650px){.paper-preview{grid-template-columns:1fr;gap:1.8rem;padding-bottom:3rem}.paper-preview-copy{max-width:none}.paper-options{gap:.45rem}.paper-options label{flex:1;max-width:120px;padding:.55rem .5rem;font-size:.9rem}.paper-description{min-height:3.5em}.paper-window{width:230px}}
.section{padding-block:0 4.6rem}
.section-intro{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;margin-bottom:1.6rem}
.section-intro h2{margin:0}
.section-intro p{margin:0;max-width:340px;color:var(--muted)}
.help-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1.3rem}
.help-card{padding:1.8rem 1.5rem 1.5rem;border:1px solid var(--line);border-radius:5px;display:flex;flex-direction:column;align-items:flex-start;min-height:235px;background:var(--white)}
.help-card.blue{background:var(--ink);color:var(--white);border-color:var(--ink);transform:rotate(-1deg)}
.help-card.yellow{background:var(--yellow);border-color:#e4cf83;transform:rotate(1deg)}
.help-card h3{font-family:Charm,Georgia,serif;font-size:1.9rem;margin-bottom:.6rem}
.help-card p{font-size:1rem;margin-bottom:1.3rem}
.help-card a{font-size:.94rem;font-weight:650;margin-top:auto}
.small-label{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.8rem;font-weight:700}
.lined{border-block:1px solid var(--line);background:repeating-linear-gradient(transparent 0,transparent 31px,#244daa0a 31px,#244daa0a 32px);padding-block:3.6rem}
.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.game-card{padding:1.4rem;background:var(--paper);border:1px solid var(--line);border-radius:4px}
.game-card img{width:52px;height:52px;object-fit:contain;margin-bottom:.9rem}
.game-card h3{margin-bottom:.45rem;font-size:1rem}
.game-card p{font-size:1rem;color:var(--muted);margin-bottom:.7rem}
.game-card span{font-size:.875rem;font-weight:650;color:var(--blue)}
.closing{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding-block:3.3rem}
.closing h2{margin-bottom:.4rem}
.closing p{color:var(--muted);margin:0}
.site-footer{border-top:1px solid var(--line);padding-block:1.8rem;font-size:.83rem;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap}
.footer-inner p{margin:0}
.footer-links{display:flex;gap:1.2rem;flex-wrap:wrap}
.page-intro{padding-block:4.2rem 2.8rem;max-width:760px}
.page-intro h1{font-size:clamp(3rem,6vw,4.8rem)}
.page-intro .lead{max-width:640px;margin-bottom:0}
.page-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:start;padding-bottom:4.6rem}
.content-paper{background:var(--white);border:1px solid var(--line);padding:2rem 2.2rem;border-radius:5px}
.content-paper h2{font-size:2rem;margin-top:2.1rem}
.content-paper h2:first-child{margin-top:0}
.content-paper p,.content-paper li{color:#3f4f67}
.content-paper ul,.content-paper ol{padding-left:1.4rem}
.content-paper li{padding-left:.3rem;margin-bottom:.6rem}
.note{background:var(--yellow);border:1px solid #e4cf83;border-radius:3px;padding:1.7rem;transform:rotate(1deg)}
.note h2{font-size:2.1rem}
.note p{font-size:1rem}
.email-link{font-weight:700;overflow-wrap:anywhere}
.note .email-link{font-size:.95rem}
.side-block{margin-top:2rem;border-top:1px solid var(--line);padding-top:1.5rem}
.side-block h3{font-size:1rem;margin-bottom:.5rem}
.side-block p{font-size:1rem;color:var(--muted)}
.checklist li::marker{color:var(--blue);font-weight:700}
.faq-layout{display:grid;grid-template-columns:220px 1fr;gap:3rem;padding-bottom:4.6rem}
.faq-index{padding-top:.5rem;position:sticky;top:2rem}
.faq-index a{display:block;margin-bottom:1rem;text-decoration:none;font-weight:600;font-size:.94rem}
.faq-index a:hover{text-decoration:underline}
.faq-group{margin-bottom:2.8rem}
.faq-group h2{font-size:2.25rem;margin-bottom:1.3rem}
details{border-top:1px solid var(--line);padding-block:1.1rem}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:650;line-height:1.5;padding-right:1.3rem}
summary::marker{color:var(--blue);font-size:.9em}
details p{margin:1rem 0 .25rem;color:#3f4f67}
details ul{margin:1rem 0 .25rem;padding-left:1.35rem;color:#3f4f67}
details li{margin-bottom:.45rem}
.faq-contact{background:var(--yellow);border:1px solid #e4cf83;padding:1.8rem;border-radius:4px}
.faq-contact h2{font-size:2rem}
.faq-contact p:last-child{margin-bottom:0}
.privacy-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
.privacy-summary div{background:var(--yellow);padding:1.15rem;border-radius:3px;border:1px solid #e4cf83}
.privacy-summary strong{display:block;font-size:.94rem;margin-bottom:.25rem}
.privacy-summary span{font-size:1rem;color:#3f4f67}
.privacy-layout{display:grid;grid-template-columns:1fr 250px;gap:2.7rem;padding-bottom:4.6rem;align-items:start}
.privacy-toc{position:sticky;top:2rem;border-left:2px solid var(--line);padding-left:1.2rem;font-size:.88rem}
.privacy-toc a{display:block;margin-block:.75rem;text-decoration:none}
.privacy-toc a:hover{text-decoration:underline}
.date{font-size:.88rem;color:var(--muted)}
.policy h2{font-family:inherit;font-size:1.22rem;line-height:1.4;margin-top:2.2rem;margin-bottom:.8rem}
.policy h2:first-child{margin-top:0}
.policy p,.policy li{font-size:.98rem;line-height:1.8}
.policy a{overflow-wrap:anywhere}
@media(max-width:900px){.hero{gap:1.6rem}.help-grid{grid-template-columns:repeat(3,1fr)}.help-card{padding:1.35rem}.game-grid{grid-template-columns:repeat(2,1fr)}.page-grid{gap:1.5rem;grid-template-columns:1.4fr 1fr}.faq-layout{grid-template-columns:170px 1fr;gap:1.5rem}.privacy-layout{grid-template-columns:1fr}.privacy-toc{position:static;order:-1;display:flex;flex-wrap:wrap;gap:.5rem 1.2rem}.privacy-toc a{margin:0}.privacy-toc .small-label{width:100%;margin:0}}
@media(max-width:650px){.wrap{width:calc(100% - 2rem)}.header-inner{min-height:auto;display:block;padding-block:1.2rem}.brand{font-size:1.85rem}.brand img{width:38px;height:38px}.nav{gap:1.4rem;margin-top:1rem;font-size:.9rem}.hero{grid-template-columns:1fr;padding-block:2.5rem 2.6rem;gap:2rem}.hero h1{font-size:3.8rem}.lead{font-size:1.05rem}.hero-art{max-width:360px;width:87%;margin-inline:auto;padding:1rem 1rem 1.35rem}.art-caption{font-size:1.35rem}.fact-strip{padding-block:1.1rem;margin-bottom:3rem}.fact{padding:.25rem .4rem}.fact strong{font-size:1.45rem}.fact span{font-size:.875rem}.section{padding-bottom:3rem}.section-intro{display:block}.section-intro p{margin-top:.8rem}.help-grid{grid-template-columns:1fr;gap:1rem}.help-card{min-height:0;padding:1.6rem;transform:none!important}.help-card p{margin-bottom:1rem}.game-grid{gap:.7rem}.game-card{padding:1.05rem}.game-card h3{font-size:1rem}.game-card img{width:42px;height:42px}.lined{padding-block:2.7rem}.closing{display:block;padding-block:2.5rem}.closing .button{margin-top:1.2rem}.footer-inner{display:block}.footer-links{margin-top:.8rem}.page-intro{padding-block:2.7rem 2rem}.page-grid{grid-template-columns:1fr;gap:2rem;padding-bottom:3rem}.page-grid aside{order:-1}.content-paper{padding:1.5rem 1.25rem}.note{transform:none}.faq-layout{grid-template-columns:1fr;gap:1rem}.faq-index{position:static;display:flex;gap:.5rem 1rem;flex-wrap:wrap;border-bottom:1px solid var(--line)}.faq-index a{font-size:.875rem}.privacy-summary{grid-template-columns:1fr;gap:.65rem}.privacy-summary div{padding:1rem}.privacy-layout{gap:1.5rem}.site-footer{padding-block:1.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}