/*
 * The blog, tool and content pages (layout.front). Loaded after home.css and
 * built on its tokens (--bg, --panel*, --stroke, --text, --muted, --purple*),
 * so both themes come for free. No colour below is new except inside
 * .post-body's legacy block, which stands in for the old theme's classes
 * that production posts still carry.
 */

.front-main{min-height:60vh}
.front-section{padding:24px clamp(18px,4.1vw,74px) 88px}

/* ---------- Page heading ---------- */
.page-hero{padding:48px clamp(18px,4.1vw,74px) 36px;max-width:980px}
.page-hero h1{font-size:clamp(30px,4.2vw,50px);line-height:1.35;font-weight:800;margin:0 0 14px;text-wrap:balance}
.page-hero>p{color:var(--muted);font-size:15px;line-height:1.95;max-width:720px;margin:0}
.hero-page{display:inline-block;margin-inline-start:12px;font-size:15px;font-weight:700;color:var(--muted);vertical-align:middle}
.crumbs ol{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--subtle)}
.crumbs li{display:flex;align-items:center;gap:6px}
.crumbs li+li:before{content:"‹";color:var(--subtle)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--purple-soft)}
.crumbs [aria-current]{color:var(--text)}
.section-title{font-size:24px;margin:0 0 22px}
.section-head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-head-row h2{font-size:26px;margin:0}

/* ---------- Topic chips ---------- */
.topic-chips{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.topic-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--stroke);border-radius:999px;background:var(--panel);color:var(--muted);font-size:13px;font-weight:600;transition:color .18s,border-color .18s,background .18s}
.topic-chip:hover{color:var(--text);border-color:var(--purple-soft)}
.topic-chip.is-active{background:var(--purple);border-color:var(--purple);color:#fff}
.topic-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Post cards: the whole card is the title's link ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* The blog list: two wide cards, then rows of three (the owner, 2026-10-25). */
.post-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px}
.post-pair .post-card-title{font-size:clamp(17px,1.6vw,21px)}
.blog-hero.is-blog>p{max-width:none}
.blog-about{margin:32px 0 0;padding:28px clamp(20px,3vw,40px);border:1px solid var(--stroke);border-radius:20px;background:var(--panel)}
.blog-about h2{font-size:clamp(20px,2vw,26px);line-height:1.6;margin:0 0 10px}
.blog-about h3{font-size:18px;line-height:1.7;margin:22px 0 8px}
.blog-about p,.blog-about li{color:var(--muted);font-size:15px;line-height:2;margin:0 0 10px}
.blog-about ul{margin:0 0 10px;padding-inline-start:20px}
.blog-about a{color:var(--purple-soft);text-decoration:underline;text-underline-offset:4px}
.blog-about-more summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--purple-soft);font-weight:700;font-size:14px;min-height:44px;list-style:none}
.blog-about-more summary::-webkit-details-marker{display:none}
.blog-about-more summary::after{content:"↓";transition:transform .18s}
.blog-about-more[open] summary::after{transform:rotate(180deg)}
.blog-about-more .blog-about-close,.blog-about-more[open] .blog-about-open{display:none}
.blog-about-more[open] .blog-about-close{display:inline}
.blog-about-more summary:focus-visible{outline:2px solid var(--purple-soft);outline-offset:2px;border-radius:6px}
.post-card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--stroke);border-radius:20px;overflow:hidden;transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--purple) 55%,var(--stroke));box-shadow:var(--shadow)}
.post-card:focus-within{outline:2px solid var(--focus);outline-offset:3px}
.post-card-media{aspect-ratio:16/9;background:var(--panel-2);overflow:hidden}
.post-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.post-card:hover .post-card-media img{transform:scale(1.04)}
.post-card-placeholder{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--purple) 28%,transparent),transparent 60%),var(--panel-2)}
.post-card-placeholder .logo-symbol{width:64px;height:68px;opacity:.9}
.post-card-body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;flex:1}
.post-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:var(--subtle);font-size:12px}
.post-chip{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple-soft);font-weight:700;font-size:11px}
.post-card-title{margin:0;font-size:17px;line-height:1.7;font-weight:800;color:var(--text)}
.post-card-link{color:inherit;outline:none}
.post-card-link:after{content:"";position:absolute;inset:0;z-index:1}
.post-card-excerpt{margin:0;color:var(--muted);font-size:13px;line-height:1.9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card-more{margin-top:auto;padding-top:6px;color:var(--purple-soft);font-size:13px;font-weight:700;display:inline-flex;gap:6px;align-items:center}
.post-card-more span{transition:transform .2s}
.post-card:hover .post-card-more span{transform:translateX(-4px)}
.post-card.is-featured{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);margin-bottom:20px}
.post-card.is-featured .post-card-media{aspect-ratio:auto;min-height:340px;position:relative}
.post-card.is-featured .post-card-media img{position:absolute;inset:0}
.post-card.is-featured .post-card-body{padding:32px;justify-content:center;gap:14px}
.post-card.is-featured .post-card-title{font-size:clamp(20px,2.2vw,28px);line-height:1.6}
.post-card.is-featured .post-card-excerpt{-webkit-line-clamp:3;font-size:14px}

/* ---------- Pagination ---------- */
.pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:44px}
.pager-pages{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.pager-page,.pager-step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--stroke);border-radius:12px;background:var(--panel);color:var(--text);font-weight:700;font-size:14px;transition:border-color .18s,background .18s}
.pager a:hover{border-color:var(--purple-soft)}
.pager a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pager-page.is-current{background:var(--purple);border-color:var(--purple);color:#fff}
.pager-step.is-disabled{opacity:.4}
.pager-gap{color:var(--subtle);padding:0 4px}

/* ---------- Article ---------- */
.article{padding:0 clamp(18px,4.1vw,74px)}
.article-head{max-width:860px;padding-top:44px;margin:0 auto}
.article-head h1{font-size:clamp(28px,3.6vw,44px);line-height:1.45;font-weight:800;margin:0 0 16px;text-wrap:balance}
.article-lead{font-size:17px;line-height:2;color:var(--muted);margin:0 0 22px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.pref-source{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-inline-start:auto;padding:8px 18px;border:2px solid transparent;border-radius:9999px;background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,linear-gradient(90deg,#FBBC05,#34A853,#AD50E6,#EA4335) border-box;color:var(--text);font-size:13px;font-weight:700;line-height:1.6;text-decoration:none;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
.pref-source svg{flex:none}
.pref-source:hover{box-shadow:0 0 0 4px rgba(173,80,230,.14)}
.pref-source:active{transform:scale(.98)}
.pref-source:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (max-width:640px){.pref-source{margin-inline-start:0;width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.pref-source{transition:none}}
.article-author{display:flex;align-items:center;gap:12px}
.article-author img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--panel-2)}
.article-author>span{display:flex;flex-direction:column;line-height:1.7}
.article-author a,.article-author strong{font-weight:700;color:var(--text);font-size:14px}
.article-author a:hover{color:var(--purple-soft)}
.article-author small{color:var(--subtle);font-size:12px}
.article-cover{max-width:1100px;margin:32px auto 0;border-radius:22px;overflow:hidden;background:var(--panel-2);aspect-ratio:16/9}
.article-cover img{width:100%;height:100%;object-fit:cover;display:block}
.article-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;max-width:1100px;margin:40px auto 0;align-items:start}
.article-side{position:sticky;top:calc(var(--header-h,74px) + 20px);display:flex;flex-direction:column;gap:14px}
.article-main{min-width:0;max-width:760px}

.toc{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:6px 16px 14px}
.toc summary{cursor:pointer;list-style:none;font-weight:800;font-size:14px;padding:10px 0;display:flex;justify-content:space-between;align-items:center}
.toc summary::-webkit-details-marker{display:none}
.toc summary:after{content:"⌄";color:var(--muted);transition:transform .2s}
.toc[open] summary:after{transform:rotate(180deg)}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:55vh;overflow:auto}
.toc a{display:block;padding:6px 10px;border-radius:9px;color:var(--muted);font-size:13px;line-height:1.8;border-inline-start:2px solid transparent}
.toc a:hover{background:var(--panel-2);color:var(--text);border-inline-start-color:var(--purple)}
.toc .is-sub a{padding-inline-start:22px;font-size:12px}

.share-box{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:14px 16px}
.share-label{display:block;font-size:13px;font-weight:800;margin-bottom:10px}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--stroke);border-radius:12px;background:var(--panel-2);color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s}
.share-btn:hover{color:var(--text);border-color:var(--purple-soft)}
.share-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.share-btn svg{width:20px;height:20px;stroke-width:1.7}
.share-done{display:block;margin-top:8px;font-size:12px;color:var(--purple-soft)}

.article-tags{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.author-box{display:flex;gap:16px;align-items:flex-start;margin-top:32px;padding:22px;background:var(--panel);border:1px solid var(--stroke);border-radius:18px}
.author-box img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;background:var(--panel-2)}
.author-box-label{display:block;font-size:11px;color:var(--subtle);font-weight:700}
.author-box strong{font-size:16px}
.author-box strong a:hover{color:var(--purple-soft)}
.author-box small{display:block;color:var(--muted);font-size:12px}
.author-box p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.9}

.tools-cta{margin-top:32px;padding:26px;border-radius:20px;border:1px solid color-mix(in srgb,var(--purple) 45%,var(--stroke));background:radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--purple) 22%,transparent),transparent 55%),var(--panel)}
.tools-cta-head h2{font-size:22px;margin:0 0 6px}
.tools-cta-head p{margin:0 0 18px;color:var(--muted);font-size:13px}
.tools-cta-list{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mini-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--stroke);border-radius:14px;background:var(--panel-2);transition:border-color .18s,transform .18s}
.mini-card:hover{border-color:var(--purple-soft);transform:translateY(-2px)}
.mini-card:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.mini-card-link{font-weight:800;font-size:14px;color:var(--text);line-height:1.7;outline:none}
.mini-card-link:after{content:"";position:absolute;inset:0}
.mini-card>span{color:var(--muted);font-size:12px;line-height:1.8}
.post-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.post-steps .is-next{text-align:left}
.post-steps-label{font-size:11px;color:var(--subtle);font-weight:700}
.related{padding-top:64px}

/* ---------- Article body ---------- */
.post-body{font-size:17px;line-height:2.05;color:var(--text);overflow-wrap:anywhere}
.post-body>*:first-child{margin-top:0}
.post-body p{margin:0 0 1.2em}
.post-body h2,.post-body h3,.post-body h4,.post-body .h5{line-height:1.6;font-weight:800;scroll-margin-top:calc(var(--header-h,74px) + 16px)}
.post-body h2{font-size:clamp(22px,2.4vw,27px);margin:2em 0 .7em}
.post-body h3{font-size:clamp(19px,2vw,22px);margin:1.7em 0 .6em}
.post-body h4,.post-body .h5{font-size:18px;margin:1.5em 0 .5em}
.post-body a{color:var(--purple-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.post-body a:hover{text-decoration-thickness:2px}
.post-body ul,.post-body ol{margin:0 0 1.3em;padding-inline-start:1.5em}
.post-body li{margin:.35em 0}
.post-body li::marker{color:var(--purple-soft)}
.post-body strong,.post-body b{font-weight:800}
.post-body blockquote{margin:1.6em 0;padding:16px 22px;border-inline-start:3px solid var(--purple);background:var(--panel);border-radius:12px;color:var(--muted)}
.post-body img{max-width:100%;height:auto;border-radius:14px}
.post-body figure{margin:1.6em 0}
.post-body figcaption{font-size:13px;color:var(--subtle);text-align:center;margin-top:8px}
.post-body code{font-family:ui-monospace,Consolas,monospace;font-size:.88em;background:var(--panel-2);border:1px solid var(--stroke);border-radius:6px;padding:1px 6px;direction:ltr;unicode-bidi:plaintext}
.post-body pre{background:var(--panel-2);border:1px solid var(--stroke);border-radius:14px;padding:16px;overflow:auto;direction:ltr;text-align:left;line-height:1.7}
.post-body pre code{background:none;border:0;padding:0}
.post-body table{width:100%;border-collapse:collapse;margin:0;font-size:14px;line-height:1.8}
.post-body th,.post-body td{border:1px solid var(--stroke);padding:10px 12px;text-align:start;vertical-align:top}
.post-body th{background:var(--panel-2);font-weight:800}
.post-body hr{border:0;border-top:1px solid var(--stroke);margin:2em 0}

/* The old theme's classes that production posts still carry (the full
   list comes from the posts themselves). The decorative gradient layers
   they pinned in place are dropped, and dark: variants follow .dark,
   which layout.home keeps in step with the theme. */
.post-body .pointer-events-none.select-none,.post-body .absolute.pointer-events-none{display:none}
.post-body figure.table,.post-body .table-figure,.post-body .table-fw{display:block;width:100%;overflow-x:auto;margin:1.6em 0;border:1px solid var(--stroke);border-radius:14px}
.post-body figure.table table,.post-body .table-figure table,.post-body .table-fw table{border:0}
.post-body .table-figure th:first-child,.post-body .table-figure td:first-child{border-inline-start:0}
.post-body .toc-content,.post-body .rbtoc,.post-body .ruby-table-contents{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;padding:16px 20px;margin:0 0 1.6em;font-size:15px}
.post-body .toc-content ul,.post-body .rbtoc ul,.post-body .ruby-table-contents ul{margin:0}
.post-body .card-item{background:var(--panel);border:1px solid var(--stroke);border-radius:18px;padding:20px;margin:1.2em 0}
.post-body .flex{display:flex}.post-body .flex-col{flex-direction:column}.post-body .items-center{align-items:center}.post-body .justify-center{justify-content:center}
.post-body .gap-8{gap:32px}.post-body .gap-10{gap:40px}
.post-body .space-y-2\.5>*+*{margin-top:10px}.post-body .space-y-3>*+*{margin-top:12px}.post-body .space-y-6>*+*{margin-top:24px}
.post-body .w-full{width:100%}.post-body .mx-auto{margin-inline:auto}.post-body .text-center{text-align:center}
.post-body .overflow-hidden{overflow:hidden}.post-body .object-cover{object-fit:cover}.post-body .relative{position:relative}
.post-body .rounded-\[20px\]{border-radius:20px}.post-body .size-10{width:40px;height:40px}.post-body .p-11{padding:44px}
.post-body .max-w-\[680px\]{max-width:680px}
.post-body .text-accent,.post-body .text-accent\/60{color:var(--muted)}
.post-body .bg-secondary{background:var(--panel-2)}
.post-body .text-heading-6{font-size:18px;font-weight:800}
@media(min-width:768px){.post-body .md\:flex-row{flex-direction:row}.post-body .md\:max-w-\[371px\]{max-width:371px}}
@media(min-width:1024px){.post-body .lg\:flex-row{flex-direction:row}.post-body .lg\:gap-8{gap:32px}.post-body .lg\:items-start{align-items:flex-start}.post-body .lg\:max-w-\[500px\]{max-width:500px}}

/* ---------- Author page ---------- */
.author-profile{display:flex;gap:24px;align-items:flex-start}
.author-profile img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--stroke)}
.author-profile h1{font-size:clamp(28px,3.4vw,40px);margin:0 0 6px}
.author-role{color:var(--purple-soft);font-weight:700;margin:0 0 8px}
.author-profile p{color:var(--muted);line-height:1.95;margin:0}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .article-side{position:static;order:-1}
  .article-main{max-width:none}
  .toc:not([open]){padding-bottom:6px}
}
@media(max-width:820px){
  .post-card.is-featured{grid-template-columns:1fr}
  .post-card.is-featured .post-card-media{min-height:0;aspect-ratio:16/9}
  .post-card.is-featured .post-card-media img{position:static}
  .post-card.is-featured .post-card-body{padding:20px}
  .tools-cta-list{grid-template-columns:1fr}
}
@media(max-width:620px){
  .page-hero{padding:28px 18px 20px}
  .front-section{padding:16px 18px 100px}
  .post-grid{grid-template-columns:1fr;gap:14px}
  .post-pair{grid-template-columns:1fr;gap:14px;margin-bottom:14px}
  /* The blog's own title on one line; a category's name may be long and wraps. */
  .blog-hero.is-blog h1{font-size:clamp(20px,6.4vw,30px);white-space:nowrap}
  /* Categories: one row that scrolls sideways, faded at both ends to show there is more. */
  .blog-hero .topic-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-18px;padding:2px 18px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to left,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(to left,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
  .blog-hero .topic-chips::-webkit-scrollbar{display:none}
  .blog-hero .topic-chips li{flex:none}
  .blog-about{padding:22px 18px}
  .article{padding:0 18px}
  .article-head{padding-top:26px}
  .article-cover{border-radius:14px;margin-top:22px}
  .post-body{font-size:16px;line-height:2}
  .post-steps{grid-template-columns:1fr}
  .post-steps .is-next{text-align:start}
  .author-profile{flex-direction:column}
  .pager-step{padding:0 10px}
  .section-head-row{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){.post-card,.post-card-media img,.mini-card{transition:none}.post-card:hover,.mini-card:hover{transform:none}.post-card:hover .post-card-media img{transform:none}}

/* Post text is written by editors: a Latin "o4-mini" or "GPT-5" must stay Latin
   (Dana draws ASCII digits as Persian). Numbers the page itself prints go through fa_digits(). */
.post-body,.post-card h2,.post-card h3,.article-head h1,.toc,.mini-card{font-family:"hn-latin-digits",Dana,system-ui,sans-serif}

/* ================= Tools (/tools, /tools/{slug}) ================= */
.tool-group{margin-bottom:56px}
.tool-group:last-child{margin-bottom:0}
.tool-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:20px}
.tool-group-head h2{font-size:24px;margin:0}
.tool-group-head span{color:var(--muted);font-size:13px}
.tool-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool-grid>li{display:flex}
.tool-card-link{flex:1;display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--panel);border:1px solid var(--stroke);border-radius:20px;color:var(--text);transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s}
.tool-card-link:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--purple) 55%,var(--stroke));box-shadow:var(--shadow)}
.tool-card-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.tool-card-art{width:56px;height:56px;object-fit:contain;margin-bottom:6px}
.tool-card-title{font-size:17px;line-height:1.6;margin:0;font-weight:800}
.tool-card-text{color:var(--muted);font-size:13.5px;line-height:1.9;flex:1}
.tool-card-more{color:var(--purple-soft);font-size:13px;font-weight:700;margin-top:4px}

.tool-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:48px clamp(18px,4.1vw,74px) 40px}
.tool-hero h1{font-size:clamp(30px,4vw,48px);line-height:1.4;font-weight:800;margin:0 0 16px;text-wrap:balance}
.tool-lead{color:var(--muted);font-size:15.5px;line-height:2;margin:0 0 28px;max-width:640px}
.tool-actions{display:flex;flex-wrap:wrap;gap:10px}
.tool-preview{display:flex;justify-content:center;min-width:0}
.tool-preview>img{width:100%;max-width:360px;height:auto;object-fit:contain}

/* tools/previews/* are drawn with tools.css, which reads the old theme's
   palette. Same values as modern-theme's main.css, so nothing changes
   colour; plus the handful of layout utilities those partials use, which
   main.css provided and home.css does not. */
.tool-preview{--color-primary-400:#cd94f0;--color-primary-500:#b664e9;--color-primary-600:#a643e4;--color-secondary:#1a1a1c;--color-accent:#fcfcfc;--color-background-1:#fcfcfd;--color-background-2:#f9fafb;--color-background-3:#f6f4f8;--color-background-5:#1a131e;--color-background-7:#211826;--color-stroke-1:#e6dfeb;--color-stroke-2:#e9e3ed;--color-stroke-6:#2a2031}
.tool-preview .tp-mock{max-width:440px}
.tool-preview p{margin:0}
.tool-preview .flex{display:flex}.tool-preview .grid{display:grid}.tool-preview .block{display:block}
.tool-preview .flex-col{flex-direction:column}.tool-preview .flex-wrap{flex-wrap:wrap}.tool-preview .flex-1{flex:1 1 0%}
.tool-preview .items-start{align-items:flex-start}.tool-preview .items-center{align-items:center}.tool-preview .items-stretch{align-items:stretch}
.tool-preview .justify-between{justify-content:space-between}.tool-preview .justify-center{justify-content:center}
.tool-preview .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-preview .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tool-preview .gap-2{gap:8px}.tool-preview .gap-3{gap:12px}
.tool-preview .mb-2{margin-bottom:8px}.tool-preview .mb-3{margin-bottom:12px}.tool-preview .mb-4{margin-bottom:16px}.tool-preview .mb-5{margin-bottom:20px}.tool-preview .mb-6{margin-bottom:24px}.tool-preview .mb-8{margin-bottom:32px}
.tool-preview .mx-auto{margin-inline:auto}.tool-preview .text-center{text-align:center}.tool-preview .font-medium{font-weight:500}

.tool-band{margin:0 clamp(18px,4.1vw,74px);border-block:1px solid var(--stroke);padding:26px 0}
.tool-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0}
.tool-specs dt{color:var(--muted);font-size:12.5px;margin-bottom:6px}
.tool-specs dd{margin:0;font-weight:800;font-size:15px;line-height:1.7}

.tool-block{padding-top:56px;padding-bottom:0}
.tool-block>h2{font-size:clamp(22px,2.6vw,30px);line-height:1.5;margin:0 0 10px}
.tool-block-lead{color:var(--muted);font-size:14.5px;line-height:1.95;margin:0 0 26px}
.tool-block>h2+.tool-grid,.tool-block>h2+.tool-steps,.tool-block>h2+.faq-list{margin-top:24px}
.tool-tile{display:flex;align-items:flex-start;gap:14px;padding:18px;background:var(--panel);border:1px solid var(--stroke);border-radius:18px}
.tool-tile strong{display:block;font-size:15px;line-height:1.7;margin-bottom:4px}
.tool-tile span>span{display:block;color:var(--muted);font-size:13px;line-height:1.85}
.tool-model-code{flex-shrink:0;display:grid;place-items:center;min-width:42px;height:42px;padding:0 8px;border-radius:12px;background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple-soft);font-weight:800;font-size:13px;font-family:"hn-latin-digits",Dana,system-ui,sans-serif}
.tool-tile-icon{flex-shrink:0;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple-soft)}
.tool-tile-icon svg{width:20px;height:20px}
.tool-soon{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;color:var(--muted);background:var(--panel-3);vertical-align:middle}
.tool-tile strong,.tool-formats .topic-chip{font-family:"hn-latin-digits",Dana,system-ui,sans-serif}

.tool-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool-steps li{position:relative;padding:22px;background:var(--panel);border:1px solid var(--stroke);border-radius:18px}
.tool-steps strong{display:block;font-size:16px;margin:12px 0 6px}
.tool-steps li>span:last-child{color:var(--muted);font-size:13.5px;line-height:1.9}
.tool-step-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--purple);color:#fff;font-weight:800}
.tool-formats-label{color:var(--muted);font-size:13px;margin:0}
.tool-formats .topic-chips{margin-top:12px}

.tool-prose{max-width:820px}
.tool-prose article+article{margin-top:40px}
.tool-prose h2{font-size:clamp(21px,2.4vw,27px);line-height:1.55;margin:0 0 14px}
.tool-prose p{color:var(--muted);font-size:15.5px;line-height:2.05;margin:0 0 14px}
#tool-faq{scroll-margin-top:96px}
#tool-faq .faq-list{max-width:860px}

.tool-cta{text-align:center;padding:48px 24px;border-radius:28px;border:1px solid color-mix(in srgb,var(--purple) 45%,var(--stroke));background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--purple) 22%,transparent),transparent 70%),var(--panel)}
.tool-cta h2{font-size:clamp(22px,2.8vw,32px);margin:0 0 8px}
.tool-cta p{color:var(--muted);margin:0 0 22px}

@media (max-width:1100px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-hero{grid-template-columns:1fr;gap:32px}.tool-specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.tool-steps{grid-template-columns:1fr}}
@media (max-width:620px){.tool-grid{grid-template-columns:1fr}.tool-hero{padding-top:28px}.tool-block{padding-top:40px}.tool-actions .btn{flex:1}.tool-cta{padding:36px 18px}}
@media (prefers-reduced-motion:reduce){.tool-card-link{transition:none}.tool-card-link:hover{transform:none}}
/* Tool copy names models like "Minimax Music01" or "TTS 1 HD"; its own counts are already Persian digits. */
.tool-preview,.tool-card-text,.tool-card-title,.tool-lead,.tool-hero h1,.tool-tile,.tool-specs dd,.tool-block-lead,.tool-prose,.tool-steps,#tool-faq .faq-item{font-family:"hn-latin-digits",Dana,system-ui,sans-serif}

/* ================= CMS pages (/page/{slug}, /privacy-policy, /terms) ================= */
.cms-hero{padding-bottom:8px}
.cms-layout{display:grid;grid-template-columns:minmax(0,1fr);max-width:860px;padding-top:8px}
.cms-layout:has(.article-side){grid-template-columns:240px minmax(0,1fr);gap:48px;max-width:1160px;align-items:start}
.cms-body>:first-child{margin-top:0}
@media (max-width:1100px){.cms-layout:has(.article-side){grid-template-columns:minmax(0,1fr);gap:20px}.cms-layout .article-side{position:static}}

/* ================= One width for every page =================
   Home sections span the whole workspace with one side gutter
   (home.css .section: clamp(24px,4.1vw,74px), 30px under 1100px, 18px
   under 620px). Every blog, tool and content page uses the same gutter
   and no narrower box, so their edges line up with the home page, the
   header and the footer. */
:root{--hn-gutter:clamp(24px,4.1vw,74px)}
@media(max-width:1100px){:root{--hn-gutter:30px}}
@media(max-width:620px){:root{--hn-gutter:18px}}
.page-hero,.front-section,.tool-hero,.article{padding-inline:var(--hn-gutter);max-width:none}
.tool-band{margin-inline:var(--hn-gutter)}
.article-head,.article-cover,.article-layout,.article-main,.tool-prose,#tool-faq .faq-list,.cms-layout,.cms-layout:has(.article-side){max-width:none;margin-inline:0}
.article-layout,.cms-layout:has(.article-side){grid-template-columns:300px minmax(0,1fr)}
@media(max-width:1100px){.article-layout,.cms-layout:has(.article-side){grid-template-columns:minmax(0,1fr)}}

/* Author monogram, when the author has no picture of their own (App\Support\BlogMedia) */
.author-monogram{flex:none;border-radius:50%;display:block}
.author-profile .author-monogram{box-shadow:0 0 0 1px var(--stroke)}

/* Line length: an article's text runs the full width of its column, the
   same as its tables and figures (the owner, 2026-10-05 - the 46rem measure
   of 2026-09-30 left the text narrower than the table under it). */
.post-body>p,.post-body>ul,.post-body>ol,.post-body>blockquote,.post-body>h2,.post-body>h3,.post-body>h4,.post-body>.h5,
.article-lead,.faq-answer{max-inline-size:none}
/* Tool pages: the text runs the full width of the sections around it (owner, 2026-09-30). */
#tool-faq .faq-answer{max-inline-size:none}

/* Tool pages (owner, 2026-10-11): samples, live price, guides; a post's sentence linking its tool. */
.tool-samples{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.tool-sample{margin:0;display:flex;flex-direction:column;gap:8px}
.tool-sample img,.tool-sample video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:16px;border:1px solid var(--stroke);background:var(--panel)}
.tool-sample figcaption{color:var(--muted);font-size:13px;line-height:1.85}
.tool-price-line{font-size:17px;line-height:1.9;margin:16px 0 18px}
.tool-price-line strong{font-size:22px;font-weight:800}
.tool-price-line span{display:block;color:var(--muted);font-size:14px}
.tool-price-all{margin:0 0 18px;padding:4px 16px 12px;border:1px solid var(--stroke);border-radius:16px;background:var(--panel)}
.tool-price-all summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700}
.tool-price-all summary:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:8px}
.tool-price-all table{width:100%;border-collapse:collapse;font-size:14px}
.tool-price-all th,.tool-price-all td{text-align:start;padding:9px 6px;border-top:1px solid var(--stroke);line-height:1.8}
.tool-price-all th{color:var(--muted);font-weight:500}
.tool-guides{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tool-guides a{display:block;height:100%;padding:14px 18px;border:1px solid var(--stroke);border-radius:14px;background:var(--panel);color:inherit;text-decoration:none;line-height:1.9;transition:border-color .18s cubic-bezier(.2,.8,.2,1)}
.tool-guides a:hover,.tool-guides a:focus-visible{border-color:var(--purple)}
.tool-guides a:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.post-tool-link a{font-weight:700}
.tool-price-all,.tool-price-line,.tool-sample figcaption,.tool-guides{font-family:"hn-latin-digits",Dana,system-ui,sans-serif}
@media (max-width:1100px){.tool-samples{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.tool-samples{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-guides{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tool-guides a{transition:none}}
/* HTML sitemap (/sitemap): side nav on desktop, a row of chips on phones */
.sitemap-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start}
.sitemap-nav{position:sticky;top:calc(var(--header-h,74px) + 20px);min-width:0}
.sitemap-nav ol{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--stroke);border-radius:16px}
.sitemap-nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600;transition:background .18s,color .18s,border-color .18s}
.sitemap-nav a:hover{background:var(--panel-2);color:var(--text)}
.sitemap-nav a:focus-visible,.sitemap-links a:focus-visible,.sitemap-group-head a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sitemap-body{display:flex;flex-direction:column;gap:56px;min-width:0}
.sitemap-section{scroll-margin-top:calc(var(--header-h,74px) + 16px)}
.sitemap-group{margin-top:28px}
.sitemap-group:first-of-type{margin-top:8px}
.sitemap-group-head{display:flex;align-items:center;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--stroke)}
.sitemap-group-head h2{font-size:24px;line-height:1.5;margin:0}
.sitemap-group .sitemap-group-head{border-bottom:0;padding-bottom:0;margin-bottom:2px}
.sitemap-group-head h3{font-size:17px;line-height:1.6;margin:0;color:var(--muted)}
.sitemap-group-head a{display:inline-flex;align-items:center;min-height:44px;color:var(--purple-soft);font-size:13px;font-weight:700}
.sitemap-group-head a:hover{color:var(--text)}
.sitemap-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px}
.sitemap-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 10px;border-radius:10px;color:var(--text);font-size:14px;line-height:1.8;transition:background .18s,color .18s}
.sitemap-links a:hover{background:var(--panel-2);color:var(--purple-soft)}
.sitemap-links span{min-width:0}
.sitemap-links time,.sitemap-links small{flex:none;color:var(--subtle);font-size:12px;font-weight:500}
@media(max-width:1100px){.sitemap-layout{grid-template-columns:minmax(0,1fr);gap:24px}.sitemap-nav{position:static}.sitemap-nav ol{flex-direction:row;overflow-x:auto;padding:0;gap:8px;background:none;border:0;border-radius:0;scrollbar-width:none}.sitemap-nav ol::-webkit-scrollbar{display:none}.sitemap-nav a{white-space:nowrap;padding:0 16px;border:1px solid var(--stroke);border-radius:999px;background:var(--panel)}}
@media(max-width:620px){.sitemap-links{grid-template-columns:minmax(0,1fr)}.sitemap-links a{flex-direction:column;align-items:flex-start;gap:0}.sitemap-body{gap:44px}}
@media(prefers-reduced-motion:reduce){.sitemap-nav a,.sitemap-links a{transition:none}}