/* Yuzool app guides: one stylesheet for every /<app-id>/<keyword-slug>/ guide.
   Visual language matches the store and the /games/ hub (seo-blocks.mjs GAMES_CSS).
   Light/dark: prefers-color-scheme, overridden by html[data-theme] (set from localStorage "yz-theme" by an inline head script).

   MARKUP PATTERN (copy exactly; reference page: src/spin-wheel/random-name-picker-wheel/index.html, which also shows the head,
   JSON-LD graph (Article + BreadcrumbList + FAQPage), Tinylytics attributes and the theme script):
   <body>
   <header class="top"><a href="/">‹ Yuzool</a><b>Guide</b><a href="/<id>/">Open app</a></header>
   <main class="guide">
     <nav class="crumbs" aria-label="Breadcrumb"><ol><li><a href="/">Yuzool</a></li><li><a href="/<id>/">App</a></li><li><span aria-current="page">Guide</span></li></ol></nav>
     <article>
       <header class="g-head">
         <p class="eyebrow">App name guide</p>
         <h1>…</h1>
         <p class="answer">Direct answer in 2-3 sentences.</p>
         <p class="meta">Updated <time datetime="2026-10-22">22 October 2026</time> · N min read</p>
       </header>
       <aside class="app-card" aria-label="…">            hero app card
         <img src="/catalog/icons/<id>-180.png" alt="<App> app icon" width="64" height="64">
         <div class="ac-t"><p class="ac-name">App name</p><p class="ac-pitch">One line</p></div>
         <div class="ac-go"><a class="btn pri" href="/<id>/" data-tinylytics-event="guide.open_app" data-tinylytics-event-value="<id>">Open App free</a>
           <a class="btn" href="/<id>/?deep-link">Secondary</a></div>
         <ul class="ac-facts"><li>Free</li><li>Works offline</li>…</ul>   (optional, only true facts)
       </aside>
       <nav class="toc" aria-label="On this page"><p>On this page</p><ol><li><a href="#id">…</a></li></ol></nav>   (optional)
       <section id="x" aria-labelledby="x-h"><h2 id="x-h">…</h2><p>…</p></section>   one H1 per page; H2 per section
       Blocks usable inside sections:
         <div class="callout">…</div>   variants: .callout.tip  .callout.warn  .callout.note   (start with <b>Label</b>)
         <div class="table-wrap"><table><caption>…</caption><thead>…</thead><tbody>…</tbody></table></div>   (scrolls inside, never the page)
         <ul class="checklist"><li>…</li></ul>        ticked list
         <ol class="steps"><li><b>Step</b> text</li></ol>   numbered steps
         <ul class="mistakes"><li>…</li></ul>        crossed list for common mistakes
         <div class="example"><p class="ex-k">Worked example</p>…</div>
         <p class="big-num"><b>64</b> days</p>      a large figure
         <kbd>Space</kbd>, <code>…</code>
       <section id="faq" class="faq"><h2>Questions</h2>
         <details><summary>Question?</summary><div><p>Answer.</p></div></details> …</section>
       <aside class="cta-card"><img src="/catalog/icons/<id>-180.png" alt="" width="56" height="56">
         <div><h2>Try it</h2><p>…</p><a class="btn pri" …>Open App free</a></div></aside>
       <nav class="related" aria-labelledby="rel-h"><h2 id="rel-h">Related</h2><ul>
         <li><a href="/other/"><img src="/catalog/icons/other-180.png" alt="" width="40" height="40"><span><b>Name</b><small>Sub</small></span></a></li>
         … last item: the store, <a href="/"> with img /icons/favicon/apple-touch-icon.png</ul></nav>
     </article>
   </main>
   <footer class="g-foot"><p><a href="/">Yuzool store</a> · <a href="/about.html">About</a> · <a href="/policies.html#yuzool-store">Privacy</a> · <a href="/contact.html">Contact</a></p></footer>
*/
:root{--bg:#f2f2f7;--bg2:#fff;--bg3:#f7f7fa;--text:#000;--sub:#6e6e73;--sep:rgba(60,60,67,.16);--accent:#0071e3;--accent-ink:#fff;--pill:#e9e9ee;--green:#1a8a3f;--orange:#b25000;--red:#c4281c;--tint-tip:#e7f6ec;--tint-warn:#fff3e3;--tint-note:#e8f1fd;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#000;--bg2:#1c1c1e;--bg3:#232326;--text:#fff;--sub:#98989f;--sep:rgba(84,84,88,.5);--accent:#0a84ff;--accent-ink:#fff;--pill:#2c2c2e;--green:#32d74b;--orange:#ff9f0a;--red:#ff6961;--tint-tip:#13261a;--tint-warn:#2b2113;--tint-note:#132235;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#000;--bg2:#1c1c1e;--bg3:#232326;--text:#fff;--sub:#98989f;--sep:rgba(84,84,88,.5);--accent:#0a84ff;--accent-ink:#fff;--pill:#2c2c2e;--green:#32d74b;--orange:#ff9f0a;--red:#ff6961;--tint-tip:#13261a;--tint-warn:#2b2113;--tint-note:#132235;color-scheme:dark}

*{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:64px}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-wrap:break-word}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* top bar (same as /games/) */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;height:calc(48px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--sep)}
.top a{display:inline-flex;align-items:center;min-height:44px}
.top b{font-weight:600}

/* page column */
.guide{max-width:720px;margin:0 auto;padding:18px max(16px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 6px;list-style:none;margin:0 0 14px;padding:0;font-size:13px;line-height:1.5;color:var(--sub)}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{display:inline-block;padding:2px 0}

/* heading block */
.g-head{margin:0 0 20px}
.eyebrow{margin:0;font-size:13px;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.03em}
h1{font-size:clamp(30px,7.4vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.022em;margin:4px 0 14px;text-wrap:balance}
.answer{margin:0 0 12px;font-size:19px;line-height:1.55}
.meta{margin:0;font-size:14px;color:var(--sub)}

/* body text */
article section{margin-top:36px}
h2{font-size:24px;line-height:1.2;letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
h3{font-size:19px;line-height:1.3;margin:24px 0 6px}
p{margin:0 0 14px}
article ul,article ol{margin:0 0 16px;padding-left:24px}
article li{margin:0 0 6px}
article li::marker{color:var(--sub)}
strong,b{font-weight:650}
code,kbd{font:15px/1.4 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;background:var(--pill);border-radius:6px;padding:1px 6px}
kbd{box-shadow:inset 0 -1px 0 var(--sep)}
abbr[title]{text-decoration:underline dotted;text-underline-offset:3px}

/* buttons: 44px targets */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--pill);color:var(--text);font-weight:650;font-size:16px;line-height:1.2;text-align:center}
.btn.pri{background:var(--accent);color:var(--accent-ink)}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn:active{transform:scale(.98)}

/* hero app card */
.app-card{display:grid;grid-template-columns:64px 1fr;gap:12px 14px;align-items:center;margin:0 0 28px;padding:16px;border-radius:20px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep),0 2px 10px rgba(0,0,0,.05)}
.app-card img{width:64px;height:64px;border-radius:15px;box-shadow:0 0 0 .5px var(--sep);background:var(--pill)}
.ac-t{min-width:0}
.ac-name{margin:0;font-size:18px;font-weight:700;line-height:1.25}
.ac-pitch{margin:2px 0 0;font-size:15px;line-height:1.35;color:var(--sub)}
.ac-go{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.ac-go .btn{flex:1 1 180px}
.ac-facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--sub)}
.ac-facts li{margin:0}
.ac-facts li::before{content:"✓ ";color:var(--green);font-weight:700}
@media (min-width:600px){.app-card{grid-template-columns:64px 1fr auto}.ac-go{grid-column:auto;flex-direction:column}.ac-go .btn{flex:none}}

/* table of contents */
.toc{margin:0 0 8px;padding:14px 18px;border-radius:16px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep)}
.toc p{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.03em}
.toc ol{margin:0;padding-left:22px;font-size:16px}
.toc li{margin:0;padding:3px 0}

/* callouts */
.callout{margin:18px 0;padding:14px 16px;border-radius:14px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep);border-left:4px solid var(--sub);font-size:16px;line-height:1.55}
.callout>:last-child{margin-bottom:0}
.callout>b:first-child,.callout>p:first-child>b:first-child{display:block;margin-bottom:2px}
.callout.tip{background:var(--tint-tip);border-left-color:var(--green)}
.callout.warn{background:var(--tint-warn);border-left-color:var(--orange)}
.callout.note{background:var(--tint-note);border-left-color:var(--accent)}

/* tables: scroll inside, never the page */
.table-wrap{margin:18px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep)}
table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums}
caption{caption-side:top;text-align:left;padding:12px 14px 4px;font-size:13px;font-weight:600;color:var(--sub)}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:.5px solid var(--sep)}
thead th{font-size:13px;font-weight:600;color:var(--sub);white-space:nowrap}
tbody tr:last-child>*{border-bottom:0}
tbody th{font-weight:600}
td.num,th.num{text-align:right}
@media (max-width:480px){table{font-size:14.5px}th,td{padding:9px 10px}caption{padding:12px 10px 4px}}

/* checklist, steps, mistakes */
ul.checklist,ul.mistakes{list-style:none;padding-left:0}
ul.checklist li,ul.mistakes li{position:relative;padding-left:32px;margin-bottom:10px}
ul.checklist li::before,ul.mistakes li::before{position:absolute;left:0;top:2px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;color:var(--bg2)}
ul.checklist li::before{content:"✓";background:var(--green)}
ul.mistakes li::before{content:"✕";background:var(--red)}
ol.steps{list-style:none;padding-left:0;counter-reset:st}
ol.steps>li{position:relative;counter-increment:st;padding-left:40px;margin-bottom:14px}
ol.steps>li::before{content:counter(st);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:700}

/* worked example and big figure */
.example{margin:18px 0;padding:16px 18px;border-radius:16px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep)}
.example>:last-child{margin-bottom:0}
.ex-k{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--sub);text-transform:uppercase;letter-spacing:.03em}
.big-num{margin:8px 0 14px;font-size:18px;color:var(--sub)}
.big-num b{display:block;font-size:56px;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}

/* FAQ */
.faq details{margin:0 0 8px;border-radius:14px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep)}
.faq summary{position:relative;display:block;min-height:44px;padding:13px 44px 13px 16px;font-weight:650;line-height:1.4;cursor:pointer;list-style:none;border-radius:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:20px;width:8px;height:8px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){.faq summary::after{transition:transform .2s,top .2s}}
.faq details[open] summary::after{transform:rotate(-135deg);top:23px}
.faq details>div{padding:0 16px 4px;font-size:16px}

/* closing CTA card */
.cta-card{display:flex;gap:16px;align-items:flex-start;margin:40px 0 0;padding:20px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--bg2)),var(--bg2));box-shadow:0 0 0 .5px var(--sep),0 6px 20px rgba(0,0,0,.06)}
.cta-card img{flex:none;width:56px;height:56px;border-radius:13px;box-shadow:0 0 0 .5px var(--sep)}
.cta-card h2{font-size:21px;margin:0 0 4px}
.cta-card p{margin:0 0 12px;font-size:16px;color:var(--sub)}
.cta-card .btn+.btn{margin-left:6px}
@media (max-width:420px){.cta-card{flex-direction:column}.cta-card .btn{width:100%}.cta-card .btn+.btn{margin:8px 0 0}}

/* related */
.related{margin-top:36px}
.related h2{font-size:20px}
.related ul{list-style:none;margin:0;padding:0;border-radius:16px;background:var(--bg2);box-shadow:0 0 0 .5px var(--sep);overflow:hidden}
.related li{margin:0}
.related li+li{border-top:.5px solid var(--sep)}
.related a{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;color:var(--text)}
.related a:hover{text-decoration:none;background:var(--bg3)}
.related a:focus-visible{outline-offset:-3px}
.related img{flex:none;width:40px;height:40px;border-radius:10px;box-shadow:0 0 0 .5px var(--sep)}
.related span{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.related b{font-weight:600}
.related small{font-size:14px;color:var(--sub)}
.related a::after{content:"›";margin-left:auto;padding-left:8px;font-size:22px;color:var(--sub)}

/* footer */
.g-foot{max-width:720px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-size:14px;color:var(--sub)}
.g-foot p{margin:0;padding-top:16px;border-top:.5px solid var(--sep)}

@media print{.top,.app-card,.cta-card,.related,.g-foot{display:none}.faq details{box-shadow:none}body{background:#fff;color:#000}}