/* Site-wide appearance from the application's actual 12 reader palettes.
 * Screenshots are genuine captures: CSS NEVER recolors the image pixels.
 * Each page takes its colors from the selected app appearance.
 */
:root{--skin-paper:#111c18;--skin-panel:#1a2b24;--skin-ink:#e2e9de;--skin-muted:#b1c0b0;--skin-accent:#afc4a0;--skin-onaccent:#171f18;--skin-cover:#1e4433;--skin-type:dark;color-scheme:dark;
--skin-line:color-mix(in srgb,var(--skin-ink) 24%,transparent);
--skin-soft:color-mix(in srgb,var(--skin-panel) 80%,var(--skin-paper));
--skin-raised:color-mix(in srgb,var(--skin-panel) 88%,var(--skin-ink));
--skin-dim:color-mix(in srgb,var(--skin-ink) 73%,var(--skin-paper));
}
:root[data-site-theme="black"]{--skin-paper:#000000;--skin-panel:#141414;--skin-ink:#e7e4de;--skin-muted:#b9b3a8;--skin-accent:#d4b472;--skin-onaccent:#161619;--skin-cover:#191919;--skin-type:dark;color-scheme:dark;}
:root[data-site-theme="midnight"]{--skin-paper:#11192c;--skin-panel:#1b2740;--skin-ink:#e5eaf4;--skin-muted:#aebbd1;--skin-accent:#aac4ea;--skin-onaccent:#161619;--skin-cover:#182d50;--skin-type:dark;color-scheme:dark;}
:root[data-site-theme="plum"]{--skin-paper:#241c2a;--skin-panel:#302535;--skin-ink:#eee3ed;--skin-muted:#c5adc3;--skin-accent:#e7b6c8;--skin-onaccent:#161619;--skin-cover:#542a48;--skin-type:dark;color-scheme:dark;}
:root[data-site-theme="ivory"]{--skin-paper:#f4f0e5;--skin-panel:#fcf8ee;--skin-ink:#3d352b;--skin-muted:#6f6251;--skin-accent:#806033;--skin-onaccent:#ffffff;--skin-cover:#e8dcc3;--skin-type:light;color-scheme:light;}
:root[data-site-theme="mist"]{--skin-paper:#eaf0f6;--skin-panel:#f7fafc;--skin-ink:#283746;--skin-muted:#566474;--skin-accent:#4d648f;--skin-onaccent:#ffffff;--skin-cover:#425d80;--skin-type:light;color-scheme:light;}
:root[data-site-theme="slate"]{--skin-paper:#252b30;--skin-panel:#30383e;--skin-ink:#e9e6e0;--skin-muted:#bdbab4;--skin-accent:#d7b995;--skin-onaccent:#161619;--skin-cover:#35414a;--skin-type:dark;color-scheme:dark;}
:root[data-site-theme="light"]{--skin-paper:#faf9f5;--skin-panel:#f1ede6;--skin-ink:#302b28;--skin-muted:#6b605a;--skin-accent:#655b50;--skin-onaccent:#ffffff;--skin-cover:#e5dfd2;--skin-type:light;color-scheme:light;}
:root[data-site-theme="sepia"]{--skin-paper:#f3e9d7;--skin-panel:#f9f0df;--skin-ink:#514334;--skin-muted:#6e5d47;--skin-accent:#77502d;--skin-onaccent:#ffffff;--skin-cover:#7a492b;--skin-type:light;color-scheme:light;}
:root[data-site-theme="dark"]{--skin-paper:#111c18;--skin-panel:#1a2b24;--skin-ink:#e2e9de;--skin-muted:#b1c0b0;--skin-accent:#afc4a0;--skin-onaccent:#161619;--skin-cover:#1e4433;--skin-type:dark;color-scheme:dark;}
:root[data-site-theme="burgundy"]{--skin-paper:#29171d;--skin-panel:#382129;--skin-ink:#f1e5e5;--skin-muted:#cfb6bb;--skin-accent:#e1b775;--skin-onaccent:#161619;--skin-cover:#5b2330;--skin-type:dark;color-scheme:dark;}
:root[data-site-theme="rose"]{--skin-paper:#f7eef0;--skin-panel:#fff7f8;--skin-ink:#453039;--skin-muted:#775e69;--skin-accent:#8b4964;--skin-onaccent:#ffffff;--skin-cover:#d8b6c1;--skin-type:light;color-scheme:light;}
:root[data-site-theme="ocean"]{--skin-paper:#10262d;--skin-panel:#19363e;--skin-ink:#e3edf0;--skin-muted:#afc5cb;--skin-accent:#d7c9a8;--skin-onaccent:#161619;--skin-cover:#164652;--skin-type:dark;color-scheme:dark;}
html{background:var(--skin-paper)}
body{background:var(--skin-paper);color:var(--skin-ink);overflow-x:clip}
body,button,input,select{accent-color:var(--skin-accent)}
a{color:inherit}
h1,h2,h3{color:var(--skin-ink)}
p,.section-pad p,.inner-head p,.explore-intro p,.downloads-intro p{color:var(--skin-muted)}
.section-tag,.mini-label{color:var(--skin-accent)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:var(--skin-accent)}
/* Hide-on-down / reveal-on-up navigation with keyboard-focus protection. */
.header{position:sticky;top:0;z-index:100;background:var(--skin-panel);color:var(--skin-ink);border-bottom:1px solid var(--skin-line);transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s}
.header.header-hidden{transform:translateY(calc(-100% - 2px))}
.header:focus-within{transform:translateY(0)!important}
.brand strong{color:var(--skin-ink)}
.brand small{color:var(--skin-muted)}
.main-nav>a,.main-nav>a[aria-current="page"]{color:var(--skin-ink)}
.main-nav>a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--skin-accent)}
.main-nav>a:hover{color:var(--skin-accent)}
.main-nav .nav-open{background:var(--skin-accent);color:var(--skin-onaccent)}
.main-nav .nav-open:hover{background:var(--skin-ink);color:var(--skin-paper)}
.menu-button{color:var(--skin-ink)}
.header-theme-field{display:flex;align-items:center;gap:4px}
.header-theme-field select{max-width:145px;min-height:37px;background:var(--skin-raised);border:1px solid var(--skin-line);color:var(--skin-ink);font-size:12px;font-weight:680;border-radius:6px;padding:6px 6px 6px 9px;cursor:pointer}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip{position:fixed;left:12px;top:0;transform:translateY(-145%);background:var(--skin-panel);color:var(--skin-ink);border:2px solid var(--skin-accent);box-shadow:none;padding:12px 14px;z-index:999;opacity:0}
.skip:focus{top:10px;transform:translateY(0);opacity:1}
.hero,.interior-head,.explore-head,.downloads-head{background:var(--skin-paper);color:var(--skin-ink)}
.hero h1,.hero h1 em,.hero-lead,.hero-footnote,.hero .eyebrow{color:var(--skin-ink)}
.hero h1 em{color:var(--skin-accent)}
.hero-lead,.hero-footnote{color:var(--skin-muted)}
.hero .eyebrow{color:var(--skin-accent)}
.eyebrow-line{background:var(--skin-accent)}
.hero-product{background:var(--skin-panel);border-left-color:var(--skin-line)}
.hero-product:before{border-color:var(--skin-line)}
.hero-screen figcaption,.product-index{color:var(--skin-muted)}
.hero-trace{color:color-mix(in srgb,var(--skin-ink) 7%,transparent)}
.button-rose,.button-light{background:var(--skin-accent);color:var(--skin-onaccent)}
.button-rose:hover,.button-light:hover{background:var(--skin-ink);color:var(--skin-paper)}
.button-outline,.button-line{color:var(--skin-ink);border-color:var(--skin-line);background:transparent}
.button-outline:hover,.button-line:hover{background:var(--skin-raised);color:var(--skin-ink)}
.text-link{color:var(--skin-accent)}
.quiet-rail{background:var(--skin-panel);border-color:var(--skin-line)}
.rail-inner{color:var(--skin-muted)}
.rail-inner span b,.rail-inner a{color:var(--skin-ink)}
.rail-inner a:hover{color:var(--skin-accent)}
.reading-feature,.voice-feature,.features-theme,.downloads-details,.geo-section,.integrity-section,.download-main{background:var(--skin-paper);color:var(--skin-ink)}
.copy-column p,.voice-feature p,.feature-panel-copy>p,.geo-heading p,.archive-heading p,.integrity-grid p,.theme-help{color:var(--skin-muted)}
.screenshot-display,.feature-panel-image,.atlas-image,.geo-gallery figure{background:var(--skin-panel)}
.screenshot-display figcaption,.feature-panel-image figcaption,.atlas-image figcaption,.feature-photo figcaption,.geo-gallery span{color:var(--skin-muted)}
.atlas-feature,.features-narration,.final-download{background:var(--skin-panel);color:var(--skin-ink)}
.atlas-copy h2,.atlas-copy p,.features-narration h2,.features-narration p,.final-download h2,.final-download p,.footer h2{color:var(--skin-ink)}
.atlas-copy .section-tag,.features-narration .section-tag,.final-download .section-tag{color:var(--skin-accent)}
.atlas-facts div{border-color:var(--skin-line)}
.atlas-facts strong{color:var(--skin-ink)}
.atlas-facts span{color:var(--skin-muted)}
.atlas-image-label{color:var(--skin-muted)}
.atlas-image{border:1px solid var(--skin-line);border-radius:10px}
.audio-panel,.narration-audio,.theme-workspace,.family-demo{background:var(--skin-panel);color:var(--skin-ink);border:1px solid var(--skin-line)}
.audio-panel h3,.audio-panel p,.audio-top .mini-label,.audio-duration,.narration-audio small{color:var(--skin-ink)}
.audio-panel p,.narration-audio small{color:var(--skin-muted)}
.theme-feature,.features-theme{background:var(--skin-paper)}
.theme-inline,.feature-panel,.release-secondary,.checksum-panel{background:var(--skin-panel);border-color:var(--skin-line);color:var(--skin-ink)}
.theme-inline{overflow:hidden}
.theme-reading,.mini-reader{border-color:var(--skin-line)}
.theme-selection,.theme-option{min-width:0}
.mini-previews,.mini-theme{border-color:var(--skin-line)}
.mini-theme,.theme-option{background:var(--skin-paper);color:var(--skin-ink);border-color:var(--skin-line)}
.mini-theme.is-selected,.theme-option[aria-pressed=true]{background:var(--skin-raised);color:var(--skin-ink);border-color:var(--skin-accent)}
.theme-workspace{background:var(--skin-panel)}
.theme-showcase{grid-template-columns:minmax(0,1fr) minmax(125px,175px);min-width:0}
.theme-reading{min-width:0;overflow:hidden}
.theme-showcase>img{width:100%;max-width:160px;max-height:258px;object-fit:contain;justify-self:center;filter:drop-shadow(4px 9px 12px #0005)}
.theme-reading p{font-size:clamp(19px,2.05vw,25px);line-height:1.58;max-width:100%;overflow-wrap:normal}
.theme-help{color:var(--skin-muted)}
.feature-tab-nav{border-color:var(--skin-line)}
.feature-tab-nav button{color:var(--skin-muted)}
.feature-tab-nav button[aria-selected=true]{color:var(--skin-ink);background:var(--skin-panel);border-color:var(--skin-accent)}
.feature-point-list li{color:var(--skin-ink);border-color:var(--skin-line)}
.features-narration p.text-muted{color:var(--skin-muted)}
.foot-main p,.foot-main nav a,.foot-note,.foot-bottom{color:var(--skin-muted)}
.footer{background:var(--skin-panel);color:var(--skin-ink)}
.foot-main nav a:hover{color:var(--skin-accent)}
.foot-bottom{border-color:var(--skin-line)}
.final-download{border-top:1px solid var(--skin-line)}
.inner-head p,.explore-intro p,.downloads-intro p,.inner-head-side{color:var(--skin-muted)}
.inner-head .section-tag,.explore-intro .section-tag,.downloads-intro .section-tag{color:var(--skin-accent)}
.explore-stat strong{color:var(--skin-accent)}
.explore-stat span{color:var(--skin-muted)}
.geo-gallery strong{color:var(--skin-ink)}
.download-main{color:var(--skin-ink)}
.release-primary{background:var(--skin-panel);color:var(--skin-ink);border:1px solid var(--skin-line)}
.release-primary h2,.release-primary>p,.release-indicator{color:var(--skin-ink)}
.release-primary h2 span{color:var(--skin-accent)}
.release-meta span{border-color:var(--skin-line);color:var(--skin-muted)}
.release-secondary h3,.release-secondary p,.release-note{color:var(--skin-ink)}
.release-note{border-color:var(--skin-line)}
.archive-controls input,.archive-controls select,.checksum-panel>code{background:var(--skin-panel);color:var(--skin-ink);border-color:var(--skin-line)}
.release-list,.release-entry,.checksum-panel details{border-color:var(--skin-line)}
.release-entry .date,.release-entry p,.archive-controls span,.checksum-panel details p{color:var(--skin-muted)}
.release-entry a,.checksum-panel>button{border:1px solid var(--skin-line);background:var(--skin-accent);color:var(--skin-onaccent)}
.checksum-panel>code{color:var(--skin-ink)}
.checksum-panel summary{color:var(--skin-ink)}
/* Hero theme bar replaces duplicated mini appearance demos. */
.theme-picker{margin:21px 0 27px;max-width:622px}
.theme-picker-head{display:flex;gap:16px;align-items:center;justify-content:space-between;color:var(--skin-muted);margin-bottom:11px}
.theme-picker-head b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--skin-ink)}
.theme-picker-head small{font-size:11px;color:var(--skin-muted)}
.theme-picker-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.site-theme-choice{border:1px solid var(--skin-line);border-radius:7px;min-width:0;min-height:45px;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 6px;background:var(--skin-raised);color:var(--skin-ink);font-size:11px;font-weight:680;transition:border .2s,background .2s,transform .2s}
.site-theme-choice:hover{transform:translateY(-1px);border-color:var(--skin-accent)}
.site-theme-choice[aria-pressed=true]{border:2px solid var(--skin-accent);background:var(--skin-panel)}
.site-theme-choice .swatch{width:17px;height:17px;border-radius:5px;border:1px solid color-mix(in srgb,var(--skin-ink) 30%,transparent);background:var(--chip);flex-shrink:0}
.theme-picker-note{color:var(--skin-muted);font-size:11px;margin-top:10px;line-height:1.55}
.hero-preview-cover{max-height:490px;width:min(75%,305px);height:auto;object-fit:contain;border:0;box-shadow:none;filter:drop-shadow(14px 18px 22px #0005)}
.hero-screen img{max-width:100%;max-height:580px;object-fit:contain}
.hero-screen img.is-cover{max-height:430px;width:min(78%,295px);border:0;box-shadow:none;filter:drop-shadow(13px 20px 20px #0004)}
/* Honest preview caption: screenshot vs original app cover, no synthetic recoloring. */
.hero-screen figcaption{font-size:11px;line-height:1.6;text-align:center;padding-inline:15px}
.theme-page-status{font-size:11px;color:var(--skin-muted)}
/* Lay out evidence and features without overlapping the image. */
.atlas-image-label{position:static;align-self:flex-start;font-size:10px;margin:16px 18px 0}
.atlas-image{min-height:0;padding:10px 22px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.atlas-image figure{margin:12px 0 0;max-width:100%}
.atlas-image figure img{max-height:520px;max-width:100%;object-fit:contain}
.atlas-image figcaption{font-size:11px;line-height:1.6}
.theme-head figure img{max-width:100%;height:270px;object-fit:contain}
.geo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.geo-gallery img{max-width:100%;object-fit:contain}
.footer,.hero,.hero-product{overflow:visible}
.hero{overflow:clip}
/* Restored smooth useful transitions without excessive decorative animation. */
body,.hero,.header,.footer,.audio-panel,.atlas-feature,.reading-feature,.voice-feature,.theme-feature,.quiet-rail,.theme-workspace,.feature-panel,.release-primary,.release-secondary,.family-demo{transition:background-color .28s ease,color .28s ease,border-color .28s ease}
@media(min-width:821px) and (max-width:1160px){
 .header .main-nav{gap:12px}
 .header .main-nav>a{font-size:12px}
 .header-theme-field select{max-width:107px}
}
@media(max-width:980px){
 .header .main-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--skin-panel);border-top:1px solid var(--skin-line);padding:15px 20px 20px;box-shadow:0 20px 40px #0003;gap:0}
 .header .main-nav.open{display:flex}
 .header .menu-button{display:block}
 .main-nav>a{padding:12px 8px;border-bottom:1px solid var(--skin-line)}
 .header-theme-field{padding:13px 8px}
 .header-theme-field select{width:100%;max-width:280px}
 .header .main-nav .nav-open{margin:10px 0 0;align-self:stretch;text-align:center}
}
@media(max-width:820px){
 .theme-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .theme-picker-head{align-items:start}
 .theme-picker-head small{text-align:right}
 .theme-showcase{grid-template-columns:minmax(0,1fr) 135px}
 .hero-product{border-top:1px solid var(--skin-line)}
}
@media(max-width:540px){
 .theme-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .site-theme-choice{min-height:42px;font-size:10px;gap:5px}
 .site-theme-choice .swatch{width:16px;height:16px}
 .theme-showcase{grid-template-columns:1fr}
 .theme-showcase>img{width:min(42%,180px);max-height:190px;display:block;justify-self:center}
 .hero-screen img{max-height:440px}
 .hero-screen img.is-cover{max-height:300px}
 .atlas-image{padding:12px 14px 20px}
 .geo-gallery{grid-template-columns:1fr}
 .geo-gallery img{max-height:430px}
}
@media(prefers-reduced-motion:reduce){
 .header,body,.hero,.footer,.audio-panel,.atlas-feature,.reading-feature,.voice-feature,.theme-feature,.quiet-rail,.theme-workspace,.feature-panel,.release-primary,.release-secondary,.family-demo{transition:none!important}
 .site-theme-choice{transition:none!important}
}

/* Page-specific geometry fixes from real narrow/wide screenshots. */
.hero-product:before,.hero-trace{display:none}
.hero-product{overflow:hidden}
.hero-screen{max-width:100%;margin:20px auto;min-width:0}
.hero-screen img{display:block;margin-inline:auto;max-width:min(100%,350px);height:auto}
.hero-copy{min-width:0}
.hero h1{overflow-wrap:normal}
.atlas-feature .atlas-copy{min-width:0}
.screenshot-display,.feature-panel-image{min-width:0;overflow:hidden}
.screenshot-display img,.feature-panel-image img,.atlas-image img{max-width:100%;object-fit:contain;height:auto}
.features-theme .theme-head{align-items:center}
.real-theme-capture{margin:28px auto 0;padding:18px 14px 15px;max-width:380px;background:var(--skin-panel);border:1px solid var(--skin-line);border-radius:9px;text-align:center}
.real-theme-capture img{display:block;margin:auto;width:auto;height:auto;max-height:375px;max-width:100%;border-radius:7px}
.real-theme-capture figcaption{margin-top:12px;color:var(--skin-muted);font-size:12px}
.feature-panel-image{padding:26px 15px}
.feature-panel-image img{max-height:500px}
.theme-workspace{overflow:hidden}
.theme-selection,.theme-showcase{min-width:0}
.theme-reading{max-width:100%;min-width:0}
.theme-reading h3{font-size:clamp(25px,3vw,34px)}
.theme-reading p{font-size:clamp(19px,2.1vw,26px)}
.hero-product .hero-screen.is-cover{border:0}
.geo-gallery figure{min-width:0}
.explore-head .explore-intro{display:block}
.explore-head .explore-intro>div{max-width:900px}
.download-grid{min-width:0}
.release-primary,.release-secondary{min-width:0}
.release-meta span{white-space:normal}
.release-list .release-entry{min-width:0}
@media (max-width:1100px){
 .theme-workspace{grid-template-columns:205px minmax(0,1fr)}
 .theme-showcase{grid-template-columns:minmax(0,1fr) 135px}
}
@media (max-width:820px){
 .theme-workspace{grid-template-columns:1fr}
 .theme-selection{grid-template-columns:repeat(4,minmax(0,1fr))}
 .theme-showcase{grid-template-columns:minmax(0,1fr) 135px}
 .hero-product{min-height:500px}
}
@media(max-width:540px){
 .theme-selection{grid-template-columns:repeat(2,minmax(0,1fr))}
 .theme-showcase{grid-template-columns:1fr}
 .theme-showcase>img{display:block;max-width:155px;margin:10px auto}
 .theme-reading p{font-size:21px}
 .hero-product{min-height:390px}
 .hero-screen img{max-height:340px}
 .hero-screen figcaption{font-size:10px}
 .geo-gallery img{max-height:380px}
 .atlas-image img{max-height:415px}
 .archive-controls select{max-width:100%}
}


/* Reliable upward-scroll navigation. Fixed positioning avoids sticky containment
 * issues in browsers with nested clipping and keeps the menu overlay anchored. */
body{padding-top:78px}
.header{position:fixed!important;top:0;left:0;right:0;width:100%;transform:translate3d(0,0,0);will-change:transform}
.header.header-hidden{transform:translate3d(0,calc(-100% - 2px),0)}
.hero{scroll-margin-top:78px}
.quick-download{display:none}
@media(max-width:980px){
 body{padding-top:70px}
 .header{height:70px}
 .header .menu-button{display:flex!important;flex-direction:column;align-items:center;justify-content:center}
 .header .main-nav:not(.open){display:none!important}
 .header .main-nav.open{display:flex!important;position:absolute;top:100%;left:0;right:0}
}
@media(max-width:540px){
 .hero .theme-picker-head{flex-wrap:wrap;gap:5px}
 .hero .theme-picker-head small{font-size:10px}
 .quick-download{display:inline-flex;font-size:11px;font-weight:800;color:var(--skin-accent);text-decoration:underline;text-underline-offset:3px}
 .hero .hero-copy{padding-top:40px}
 .hero .eyebrow{margin-bottom:22px}
 .hero h1{margin-bottom:16px}
 .hero .theme-picker{margin:12px 0 20px}
 .hero .theme-picker-note{font-size:10px}
 .hero .site-theme-choice{min-height:39px}
}
@media(prefers-reduced-motion:reduce){.header{transition:none!important}}


/* 2026-10-28 polish: original app ICONS in appearance demos, no theme screenshot swaps. */
.hero-product{min-height:515px}
.hero-screen{align-items:center;width:100%;max-width:100%;gap:12px}
.hero-screen img.app-theme-art{
 display:block;width:clamp(205px,26vw,310px);height:auto;max-width:min(82%,310px);
 max-height:310px;aspect-ratio:1;object-fit:contain;border:0;box-shadow:none;
 border-radius:24px;filter:drop-shadow(10px 19px 21px #0005);
}
.hero-screen figcaption{font-size:12px;font-weight:600;letter-spacing:.025em;text-align:center}
.hero .hero-product .product-index{color:var(--skin-muted)}
.features-theme .theme-head{display:block;max-width:760px;margin-bottom:30px}
.features-theme .theme-head>div{max-width:760px}
.theme-showcase{grid-template-columns:minmax(0,1fr) minmax(120px,165px);gap:20px}
.theme-showcase>img{width:155px;height:155px;max-height:155px;max-width:100%;object-fit:contain;filter:drop-shadow(5px 10px 12px #0004)}
.theme-workspace{align-items:center}
.theme-reading{max-width:100%}

/* Rectilinear multi-row family connections: children share lineage, not parenthood.
   Reserve route space ABOVE and BESIDE cards so no lines traverse a child card. */
@media(max-width:820px){
 .hero-product{min-height:405px}
 .hero-screen img.app-theme-art{width:clamp(205px,43vw,270px);max-height:280px}
 .theme-showcase{grid-template-columns:minmax(0,1fr) 130px}
 .theme-showcase>img{width:122px;height:122px}
}
@media(max-width:540px){
 .hero-product{min-height:335px}
 .hero-screen img.app-theme-art{width:min(64%,245px);max-height:245px}
 .theme-showcase{grid-template-columns:1fr}
 .theme-showcase>img{width:115px;height:115px;margin:8px auto 4px;display:block}
}


/* Less oversized marketing hero; a real launcher icon is the focal point. */
@media(min-width:981px){
 .hero-layout{min-height:635px}
 .hero-copy{padding-top:72px;padding-bottom:70px}
 .hero h1{font-size:clamp(53px,5.25vw,76px);line-height:1.07;letter-spacing:-.05em}
 .hero .hero-product{min-height:635px}
}
.geo-utilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.geo-utility{display:flex;align-items:flex-start;gap:24px;text-decoration:none;background:var(--skin-panel);color:var(--skin-ink);border:1px solid var(--skin-line);border-radius:10px;padding:clamp(23px,3vw,36px);min-width:0;transition:transform .2s,border-color .2s}
.geo-utility:hover{transform:translateY(-2px);border-color:var(--skin-accent)}
.geo-utility-symbol{display:grid;flex:none;place-items:center;width:50px;height:50px;border-radius:9px;background:var(--skin-paper);border:1px solid var(--skin-line);color:var(--skin-accent);font:32px/1 Georgia,serif}
.geo-utility h3{font:600 clamp(20px,2vw,27px)/1.15 Georgia,serif;letter-spacing:-.025em;margin:3px 0 12px}
.geo-utility p{font-size:13px;color:var(--skin-muted);line-height:1.75;margin:0 0 18px}
.geo-utility-link{font-size:12px;font-weight:770;color:var(--skin-accent)}
@media(max-width:820px){
 .hero .hero-copy{padding-top:66px;padding-bottom:53px}
 .hero h1{font-size:clamp(50px,8vw,76px)}
 .geo-utilities{grid-template-columns:1fr}
}
@media(max-width:540px){
 .geo-utility{padding:19px;gap:15px}
 .geo-utility-symbol{width:39px;height:39px;font-size:25px}
 .hero h1{font-size:clamp(46px,11vw,62px)}
}


/* Transparent original Bible artwork: no square launcher tile, no caption,
   no contrasting background panel behind the book. */
.hero-product,.hero .hero-product{background:transparent!important;border:0!important;box-shadow:none!important}
.hero-product:before,.hero-product:after{display:none!important}
.hero-screen{margin:0 auto!important;align-items:center;justify-content:center}
.hero-screen img.app-theme-art,.hero-screen img.app-theme-art.is-cover{
 width:clamp(210px,26vw,350px);max-width:min(84%,350px);
 height:auto;max-height:520px;aspect-ratio:auto;object-fit:contain;
 border:0;border-radius:0;box-shadow:none;background:transparent;
 filter:drop-shadow(13px 20px 23px #0005);
}
.theme-showcase>img{height:auto;width:155px;max-height:230px;object-fit:contain;background:transparent;border:0;border-radius:0}
@media(max-width:820px){
 .hero-screen img.app-theme-art{width:clamp(185px,41vw,285px);max-height:410px}
}
@media(max-width:540px){
 .hero-screen img.app-theme-art{width:min(65%,245px);max-height:350px}
 .hero-product,.hero .hero-product{min-height:310px}
 .theme-showcase>img{width:120px;max-height:190px;height:auto}
}


/* Actual Android family-tree example: distinct from the smaller interactive
   Abraham demo above. One screenshot, not a duplicate screenshot gallery. */
.native-tree-reference{
 max-width:900px;margin:48px auto 0;padding:clamp(24px,4vw,47px);
 display:grid;grid-template-columns:minmax(0,1fr) minmax(215px,280px);
 gap:clamp(26px,5vw,72px);align-items:center;
 border:1px solid var(--skin-line);border-radius:13px;
 background:var(--skin-panel);color:var(--skin-ink);
}
.native-tree-copy h3{font-size:clamp(26px,2.9vw,39px);font-weight:580;letter-spacing:-.04em;margin:17px 0 18px;max-width:440px;}
.native-tree-copy p{max-width:450px;color:var(--skin-muted);font-size:14px;line-height:1.78;margin-bottom:23px;}
.native-tree-reference figure{margin:0;text-align:center;min-width:0;}
.native-tree-reference figure img{display:block;margin:0 auto;max-height:455px;width:auto;max-width:100%;object-fit:contain;border-radius:8px;box-shadow:0 18px 30px #0003;}
.native-tree-reference figcaption{margin-top:15px;color:var(--skin-muted);font-size:11px;line-height:1.45;}
/* The homepage is the only theme picker. The Reading tools page no longer
   repeats a fake sample or a grid of buttons and colors. */
@media(max-width:700px){
 .native-tree-reference{grid-template-columns:1fr;gap:28px;margin-top:32px;}
 .native-tree-reference figure img{max-height:390px;}
}


/* 2026-10-28 — native-study product polish: animated cover, truthful interactive
   examples, original APK family styling and accessible future-platform controls. */
.hero-screen[data-cover-motion]{--cover-rx:0deg;--cover-ry:0deg;perspective:1100px;transition:transform .28s ease-out;transform:rotateX(var(--cover-rx)) rotateY(var(--cover-ry));will-change:transform}
.hero .cover-motion-inner{display:grid;place-items:center;animation:book-floating 7.2s ease-in-out infinite;transform-origin:center center}
.hero-screen img.app-theme-art{animation:cover-entrance 720ms ease-out both;will-change:auto}
@keyframes book-floating{0%,100%{transform:translate3d(0,4px,0) rotate(-.9deg)}50%{transform:translate3d(0,-12px,0) rotate(.9deg)}}
@keyframes cover-entrance{from{opacity:.55;scale:.94}to{opacity:1;scale:1}}
.hero-screen img.cover-theme-changed{animation:cover-entrance 420ms ease-out both}
.highlights-feature{background:var(--skin-paper);color:var(--skin-ink);border-top:1px solid var(--skin-line)}
.highlight-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(46px,7vw,125px);align-items:center}
.highlight-story h2{margin:16px 0 25px}
.highlight-story p{max-width:510px;color:var(--skin-muted)}
.highlight-interaction{background:var(--skin-panel);border:1px solid var(--skin-line);border-radius:11px;padding:clamp(23px,3.4vw,45px);color:var(--skin-ink);min-width:0}
.highlight-interaction-top{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:10px;letter-spacing:.13em;font-weight:740;color:var(--skin-muted)}
.highlight-verse{font:clamp(23px,2.7vw,39px)/1.62 Georgia,'Times New Roman',serif;margin:24px 0 27px;color:var(--skin-ink)}
.highlight-verse sup{font:600 11px system-ui,sans-serif;color:var(--skin-muted);vertical-align:super}
.highlight-verse mark{--mark-tone:#f0cf71;background:var(--mark-tone);color:#322c29;box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:2px;padding:0 2px;transition:background .25s ease-out}
.highlight-interaction-controls{border-top:1px solid var(--skin-line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:19px}
.highlight-swatches{display:flex;flex-wrap:wrap;gap:10px}
.highlight-swatches button{background:var(--chip);border:2px solid transparent;border-radius:50%;width:39px;height:39px;flex:none;min-height:39px;touch-action:manipulation;transition:scale .15s;border-color:color-mix(in srgb,#000 12%,transparent)}
.highlight-swatches button:hover{scale:1.12}
.highlight-swatches button[aria-pressed="true"]{outline:2px solid var(--skin-accent);outline-offset:3px;scale:1.06}
.highlight-copy{border:1px solid var(--skin-line);background:transparent;color:var(--skin-ink);border-radius:6px;padding:10px 13px;font-size:12px;font-weight:750}
.highlight-copy:hover{background:var(--skin-raised)}
.highlight-hint{color:var(--skin-muted);font-size:11px;margin-top:13px;min-height:17px}
.sound-visual{height:42px;display:flex;align-items:center;justify-content:center;gap:4px;margin:11px 0 16px;border-radius:6px;background:color-mix(in srgb,var(--skin-accent) 9%,transparent)}
.sound-visual i{width:4px;height:var(--bar);min-height:7px;background:var(--skin-accent);opacity:.62;border-radius:4px;transform-origin:center center}
.sound-visual.is-playing i{animation:audio-activity .72s ease-in-out infinite alternate;animation-delay:calc(var(--wave-index,0) * -56ms);opacity:1}
.sound-visual.is-playing i:nth-child(3n){animation-duration:.5s}
.sound-visual.is-playing i:nth-child(4n){animation-duration:.9s}
@keyframes audio-activity{0%{transform:scaleY(.4)}100%{transform:scaleY(1.25)}}
.wiki-feature{background:var(--skin-panel);color:var(--skin-ink);border-top:1px solid var(--skin-line)}
.wiki-feature-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(45px,8vw,140px);align-items:center}
.wiki-feature-visual{display:flex;justify-content:center;align-items:center;background:var(--skin-paper);border:1px solid var(--skin-line);min-height:450px;padding:28px;border-radius:9px}
.wiki-feature-visual img{max-height:505px;max-width:100%;width:auto;object-fit:contain;border-radius:7px;box-shadow:12px 18px 30px #0003}
.wiki-feature-copy h2{margin:18px 0 22px}
.wiki-feature-copy p{color:var(--skin-muted);max-width:570px}
.wiki-feature-copy ul{padding:0;list-style:none;max-width:570px;margin:25px 0 29px}
.wiki-feature-copy li{padding:12px 0;border-top:1px solid var(--skin-line);font-size:14px}
.feature-discovery{background:var(--skin-paper);color:var(--skin-ink);border-top:1px solid var(--skin-line)}
.discovery-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:34px}
.discovery-heading h2{margin:13px 0 0}
.discovery-heading p{font-size:13px;max-width:420px;color:var(--skin-muted)}
.discovery-rows{border-top:1px solid var(--skin-line)}
.discovery-rows a{display:grid;grid-template-columns:33px minmax(180px,.65fr) minmax(220px,1fr) 25px;align-items:center;gap:20px;padding:25px 4px;border-bottom:1px solid var(--skin-line);text-decoration:none;color:var(--skin-ink);transition:background .2s}
.discovery-rows a:hover{background:var(--skin-raised)}
.discovery-rows a>span:first-child{color:var(--skin-accent);font-size:12px;font-weight:800}
.discovery-rows strong{font:500 clamp(19px,2.15vw,28px) Georgia,serif;letter-spacing:-.025em}
.discovery-rows p{margin:0;color:var(--skin-muted);font-size:13px;line-height:1.65}
.discovery-rows a>span:last-child{justify-self:end;color:var(--skin-accent)}
.future-platforms{border-top:1px solid var(--skin-line);background:var(--skin-paper);color:var(--skin-ink)}
.future-platforms-heading{max-width:640px;margin-bottom:31px}
.future-platforms-heading h2{margin:13px 0}
.future-platforms-heading p{color:var(--skin-muted);margin-bottom:0}
.future-platforms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.future-platform-card{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(27px,3.4vw,42px);border-radius:10px;background:var(--skin-panel);border:1px solid var(--skin-line);min-width:0}
.future-platform-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15px}
.future-platform-symbol{display:grid;place-items:center;width:53px;height:53px;background:var(--skin-soft);border:1px solid var(--skin-line);border-radius:10px;color:var(--skin-accent)}
.future-platform-status{font-size:11px;border:1px solid var(--skin-line);padding:4px 10px;border-radius:20px;color:var(--skin-muted)}
.future-platform-card h3{margin:28px 0 12px;font-size:29px}
.future-platform-card p{font-size:14px;color:var(--skin-muted);max-width:390px}
.future-platform-disabled.button{margin-top:auto;min-height:48px;border:1px solid var(--skin-line);background:var(--skin-soft);color:var(--skin-muted);border-radius:6px;padding:12px 19px;cursor:not-allowed;transform:none!important;opacity:.9}
.feature-panel-image figcaption,.screenshot-display figcaption,.atlas-image figcaption,.feature-photo figcaption,.native-tree-reference figcaption{display:none!important}

/* Screenshots are just screenshots: no redundant labels under the image. */
@media(max-width:900px){
 .highlight-layout,.wiki-feature-layout{grid-template-columns:1fr;gap:36px}
 .wiki-feature-visual{min-height:350px}
 .wiki-feature-visual img{max-height:490px}
 .discovery-heading{display:block}
 .discovery-rows a{grid-template-columns:25px minmax(0,1fr) 23px;gap:9px 14px}
 .discovery-rows a p{grid-column:2/3}
 .discovery-rows a>span:last-child{grid-column:3;grid-row:1}
}
@media(max-width:640px){
 .highlight-interaction{padding:21px 19px}
 .highlight-verse{font-size:25px}
 .highlight-interaction-top{font-size:9px;gap:8px}
 .wiki-feature-visual{padding:17px}
 .wiki-feature-visual img{max-height:420px}
 .future-platforms-grid{grid-template-columns:1fr}
 .future-platform-card{padding:24px}
 .sound-visual{height:34px}
}
@media(prefers-reduced-motion:reduce){
 .hero .cover-motion-inner,.hero-screen img.app-theme-art,.hero-screen img.cover-theme-changed,.sound-visual i{animation:none!important}
 .hero-screen[data-cover-motion]{transform:none!important;transition:none!important}
 .highlight-verse mark{transition:none}
}


/* --------------------------------------------------------------------------
   Motion and material finish: quiet, tactile, responsive, and app-native.
   No synthetic screenshots, decorative panels behind the Bible or heavy blur.
   -------------------------------------------------------------------------- */
:root{
 --motion-soft:cubic-bezier(.22,1,.36,1);
 --motion-press:cubic-bezier(.2,.8,.2,1);
 --depth-edge:color-mix(in srgb,var(--skin-ink) 12%,transparent);
 --depth-shadow:rgba(0,0,0,.14);
}
/* Stagger the REAL book's first appearance, then let the already loaded source
   artwork hover gently. The intro runs automatically on first paint, no JS
   gesture or hover necessary. Each effect has its own transform layer. */
.hero-screen[data-cover-motion]{
 isolation:isolate;
 transform-style:preserve-3d;
 transition:transform 560ms var(--motion-soft);
}
.hero .cover-intro-shell{
 position:relative;
 z-index:2;
 display:grid;
 place-items:center;
 transform-origin:50% 70%;
 animation:book-arrival 1080ms var(--motion-soft) 0s both;
}
.hero .cover-motion-inner{
 width:100%;
 animation:book-levitation 7.8s cubic-bezier(.45,0,.55,1) 1080ms infinite;
}
.hero-screen img.app-theme-art{
 animation:none;
 opacity:1;
 scale:1;
 filter:drop-shadow(11px 19px 12px rgba(0,0,0,.19))
        drop-shadow(22px 42px 35px rgba(0,0,0,.16));
 transform:translateZ(0);
 backface-visibility:hidden;
 transition:filter 550ms var(--motion-soft);
}
.hero-screen img.app-theme-art.cover-theme-changed{
 animation:book-appearance-change 500ms var(--motion-soft) both;
}
.hero-screen[data-cover-motion]:after{
 content:"";display:block;position:absolute;z-index:0;
 left:27%;right:27%;bottom:6%;height:25px;
 pointer-events:none;border-radius:50%;
 background:rgba(0,0,0,.19);
 filter:blur(17px);
 transform:translateY(10px) scaleX(.8);
 animation:book-shadow-breath 7.8s cubic-bezier(.45,0,.55,1) 1080ms infinite;
}
@keyframes book-arrival{
 0%{opacity:0;transform:translate3d(0,28px,0) scale(.93) rotate(-3deg)}
 65%{opacity:1}
 100%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0)}
}
@keyframes book-levitation{
 0%,100%{transform:translate3d(0,4px,0) rotate(-.65deg)}
 50%{transform:translate3d(0,-10px,0) rotate(.65deg)}
}
@keyframes book-shadow-breath{
 0%,100%{opacity:.66;transform:translateY(10px) scaleX(.84)}
 50%{opacity:.39;transform:translateY(10px) scaleX(.68)}
}
@keyframes book-appearance-change{
 from{opacity:.5;transform:translateY(8px) scale(.973)}
 to{opacity:1;transform:translateY(0) scale(1)}
}
/* Let the display copy arrive with the book, but keep all text accessible
   without scripting and avoid looping animations on reading content. */
.hero .eyebrow{animation:hero-copy-arrival 660ms var(--motion-soft) 90ms both}
.hero h1{animation:hero-copy-arrival 790ms var(--motion-soft) 170ms both}
@keyframes hero-copy-arrival{
 from{opacity:0;transform:translateY(14px)}
 to{opacity:1;transform:translateY(0)}
}

/* Material hierarchy: avoid uniform card grids and the "generic AI glow".
   Images sit in shallow inset trays; actual app screens remain unaltered. */
.screenshot-display,.atlas-image,.wiki-feature-visual{
 border:1px solid var(--skin-line);
 border-radius:12px;
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--skin-ink) 5%,transparent),
            0 16px 45px -32px var(--depth-shadow);
}
.screenshot-display img,.atlas-image img,.wiki-feature-visual img,.feature-panel-image img,.feature-photo img{
 box-shadow:0 18px 34px -19px rgba(0,0,0,.29),0 3px 9px rgba(0,0,0,.07);
}
.highlight-interaction,.audio-panel,.narration-audio,.native-tree-reference{
 border-color:var(--skin-line);
 box-shadow:0 20px 56px -40px rgba(0,0,0,.32),
            inset 0 1px 0 color-mix(in srgb,var(--skin-ink) 7%,transparent);
}
.release-primary,.release-secondary,.future-platform-card{
 box-shadow:0 13px 32px -26px rgba(0,0,0,.25);
}
/* Deliberate interactions, not bounce on every item. */
.button,.main-nav .nav-open,.highlight-copy{
 transition:transform 280ms var(--motion-press),
            box-shadow 360ms var(--motion-soft),
            background-color 260ms var(--motion-press),
            border-color 260ms var(--motion-press);
}
.button:not(:disabled):hover,.main-nav .nav-open:hover,.highlight-copy:hover{
 transform:translateY(-2px);
 box-shadow:0 13px 25px -19px rgba(0,0,0,.48);
}
.button:not(:disabled):active,.main-nav .nav-open:active,.highlight-copy:active{transform:translateY(0) scale(.985)}
.text-link span[aria-hidden="true"],.button span[aria-hidden="true"],.main-nav .nav-open span[aria-hidden="true"]{
 display:inline-block;transition:transform 320ms var(--motion-soft);
}
.text-link:hover span[aria-hidden="true"],.button:hover span[aria-hidden="true"]{transform:translate(3px,-2px)}
.site-theme-choice{
 transition:transform 280ms var(--motion-soft),
            border-color 260ms var(--motion-press),
            box-shadow 350ms var(--motion-soft),
            background-color 260ms var(--motion-press);
}
.site-theme-choice[aria-pressed="true"]{
 box-shadow:0 0 0 2px color-mix(in srgb,var(--skin-accent) 15%,transparent),inset 0 1px 0 color-mix(in srgb,var(--skin-ink) 8%,transparent);
}
.site-theme-choice:hover{transform:translateY(-2px)}
.feature-tab-nav button[aria-selected="true"],.family-branch-tabs button[aria-selected="true"]{
 box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--skin-accent) 80%,transparent);
}
/* Below-the-fold reveal is progressive enhancement; all content stays visible
   without JavaScript, on first viewport and for reduced-motion users. */
[data-reveal].is-reveal-pending{
 opacity:0;
 transform:translate3d(0,24px,0);
 transition:opacity 760ms var(--motion-soft),transform 760ms var(--motion-soft);
}
[data-reveal].is-revealed{
 opacity:1;
 transform:translate3d(0,0,0);
}
@media(max-width:820px){
 .hero-screen[data-cover-motion]:after{left:27%;right:27%;bottom:6%}
 .hero .cover-motion-inner{animation-duration:9s}
}
@media(prefers-reduced-motion:reduce){
 .hero .cover-intro-shell,.hero .cover-motion-inner,
 .hero-screen[data-cover-motion]:after,.hero .eyebrow,.hero h1,
 .hero-screen img.app-theme-art,.hero-screen img.app-theme-art.cover-theme-changed{
  animation:none!important;transform:none!important;opacity:1!important;
 }
 .hero-screen[data-cover-motion]{transition:none!important;transform:none!important}
 [data-reveal].is-reveal-pending,[data-reveal].is-revealed{opacity:1!important;transform:none!important;transition:none!important}
 .button,.text-link span[aria-hidden="true"],.site-theme-choice,.highlight-copy{
  transition:none!important;
 }
}
/* Prevent decorative shadows or transform layers from stealing touch targets. */
.hero-screen[data-cover-motion]:after,.cover-intro-shell{pointer-events:none}
@media print{
 .hero .cover-intro-shell,.hero .cover-motion-inner,.hero h1,.hero .eyebrow{animation:none!important;opacity:1!important;transform:none!important}
}