@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#061015;--ink:#e9e4d9;--muted:#bdc9c8;--gold:#dfc18a;--cyan:#42d5dc;--line:rgba(211,176,109,.36);scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 50% 45%,#0a252b 0%,#061015 63%);font-family:Inter,system-ui,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.wrap{width:min(1240px,calc(100% - 64px));margin-inline:auto}.skip-link{position:absolute;left:10px;top:-60px;background:#fff;color:#000;padding:8px;z-index:99}.skip-link:focus{top:10px}.site-header{position:sticky;top:0;z-index:20;background:rgba(3,12,17,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.nav{min-height:76px;display:flex;align-items:center;gap:35px;justify-content:space-between}.brand{font-family:Cinzel,Georgia,serif;color:#e9d5af;font-size:1.6rem;white-space:nowrap;display:flex;align-items:center;gap:12px;letter-spacing:.01em}.brand-monogram{font-size:2.15rem;line-height:1;color:var(--gold);position:relative}.brand-monogram span{font-size:1.25rem;color:var(--cyan);margin-left:-13px}.nav-links{display:flex;align-items:center;gap:27px;font-size:.83rem}.nav-links a{padding:24px 0 21px;border-bottom:2px solid transparent;white-space:nowrap}.nav-links a:hover,.nav-links a.active{border-bottom-color:var(--cyan);color:#fff}.nav-actions{display:flex;align-items:center;gap:20px;font-size:.85rem}.github-link:hover,.text-link:hover{color:var(--cyan)}.menu-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--gold);border-radius:5px;padding:6px 12px;font-size:1.2rem}.button{min-height:45px;padding:10px 23px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:7px;border:1px solid var(--gold);font-weight:600;font-size:.87rem;line-height:1.35;transition:background .2s,box-shadow .2s,transform .2s;text-align:center}.button:hover{transform:translateY(-1px);box-shadow:0 0 24px rgba(33,211,218,.18)}.button-small{font-size:.77rem;min-height:38px;border-color:#38aeb4;color:#f4fcfb}.button-primary{border-color:#55e1e2;color:#eefdfb;background:linear-gradient(180deg,#147b85,#07505d 68%,#05343f);box-shadow:inset 0 1px rgba(255,255,255,.24),0 0 20px rgba(35,207,220,.17)}.button-primary:hover{background:#137e8a}.button-outline{background:rgba(3,12,18,.74);color:#e8e5dc}.hero{position:relative;min-height:590px;isolation:isolate;overflow:hidden;display:flex;align-items:center}.hero-background{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(90deg,rgba(3,11,16,.8) 0%,rgba(3,11,16,.75) 32%,rgba(3,11,16,.18) 60%,rgba(3,11,16,.1) 100%),url('../assets/hero-bookstitch.webp');background-size:cover;background-position:center 45%}.hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(3,12,17,.5),transparent 25%)}.hero-content{padding-block:80px 92px}.hero-copy{width:min(560px,52%)}.eyebrow,.small-title{letter-spacing:.25em;color:#6cdddd;font-size:.73rem;font-weight:600}.hero h1{font-family:Cinzel,Georgia,serif;font-weight:500;font-size:clamp(3.7rem,6.3vw,6.5rem);color:#f0deb7;text-shadow:0 1px 1px #412a09,0 0 25px rgba(226,179,96,.15);line-height:1.14;margin:14px 0 0}.tagline{font-family:Cinzel,Georgia,serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-size:.98rem;margin:5px 0 28px}.lead{font-family:Georgia,serif;font-size:clamp(1.2rem,2vw,1.65rem);line-height:1.4;margin:0 0 18px;color:#fff7ea}.intro{max-width:510px;color:#cbd9da;font-size:.93rem}.hero-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.trust{display:flex;gap:20px;flex-wrap:wrap;color:#c2dad7;font-size:.7rem;margin-top:22px}.hero-bottom-line{height:1px;background:var(--line);position:absolute;bottom:0;left:0;right:0;text-align:center}.hero-bottom-line span{position:relative;top:-18px;font-size:23px;color:var(--gold);background:#061015;padding-inline:18px}.section{padding:62px 0;border-bottom:1px solid var(--line);position:relative}.features{background:radial-gradient(ellipse at 50% 0%,#0d2930,#07171b 68%)}.workflow{background:radial-gradient(ellipse at 25% 70%,#0c252b,#061015 70%)}.section-heading{text-align:center;margin-bottom:38px}.section-heading .ornament{font-size:.75rem;color:var(--gold);margin-bottom:4px}.section-heading h2,.panel h2{font-family:Cinzel,Georgia,serif;color:#efd5aa;font-size:clamp(1.65rem,2.7vw,2.25rem);letter-spacing:.07em;font-weight:500;margin:0}.section-heading p{margin:8px 0 0;color:#70cdd0;font-size:1.06rem;letter-spacing:.025em;font-family:"Cormorant Garamond", Georgia, serif;font-style:italic;font-weight:500;font-variant-ligatures:common-ligatures discretionary-ligatures;line-height:1.2}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.feature{text-align:center;padding:0 26px 8px;position:relative}.feature+ .feature:before{content:'';position:absolute;left:0;top:24px;height:110px;border-left:1px solid var(--line)}.feature-icon,.step-icon{margin:0 auto 14px;width:64px;height:64px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-size:2rem;color:#63d2d6;box-shadow:0 0 0 5px rgba(33,186,192,.06),inset 0 0 12px rgba(22,162,170,.1);font-family:Georgia,serif}.feature h3{font-family:Cinzel,Georgia,serif;font-size:1.1rem;color:#eed7a9;font-weight:500;margin:0 0 7px}.feature p{font-size:.84rem;color:#b9cacc;margin:0}.steps{padding:4px 0 0;margin:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}.steps li{display:flex;align-items:flex-start;gap:13px}.step-icon{flex:none;margin:0;width:52px;height:52px;font-size:1.5rem}.steps h3{margin:0;color:#efdbb9;font-family:Georgia,serif;font-size:1.05rem}.steps p{font-size:.81rem;color:#bed3d2;margin:4px 0 0}.final-section{background:radial-gradient(ellipse at 50% 15%,#103038,#061015 70%);padding-block:62px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.panel{border:1px solid var(--line);padding:30px;background:linear-gradient(140deg,rgba(10,35,39,.86),rgba(3,14,19,.7));box-shadow:inset 0 1px rgba(233,199,121,.08);border-radius:5px}.panel h2{font-size:1.55rem;margin-top:8px}.panel p{font-size:.9rem;color:var(--muted);margin:10px 0}.panel-buttons{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:23px 0}.text-link{color:var(--cyan);font-size:.85rem}.panel .micro{font-size:.74rem;color:#8da6a8}.site-footer{padding:24px 0;background:#040b0f}.footer-inner{display:flex;justify-content:space-between;gap:20px;color:#95acae;font-size:.76rem}.footer-gold{color:var(--gold)}@media(max-width:1040px){.nav{gap:15px}.nav-links{gap:14px}.nav-actions{gap:10px}.brand{font-size:1.3rem}.hero-copy{width:55%}.hero{min-height:550px}}@media(max-width:790px){.wrap{width:min(100% - 34px,660px)}.nav{min-height:64px;flex-wrap:wrap}.brand{font-size:1.23rem}.menu-toggle{display:block;margin-left:auto}.nav-actions{display:none}.nav-links{display:none;width:100%;order:3;flex-direction:column;align-items:stretch;gap:0;padding-bottom:12px}.nav-links.is-open{display:flex}.nav-links a{padding:9px;border-bottom:1px solid rgba(211,176,109,.1)}.hero{min-height:680px;align-items:flex-end}.hero-background{background-image:linear-gradient(0deg,#061015 4%,rgba(3,11,16,.92) 24%,rgba(3,11,16,.15) 80%),url('../assets/hero-bookstitch.webp');background-size:auto 70%,cover;background-repeat:no-repeat;background-position:72% top,center}.hero-content{padding-block:270px 62px}.hero-copy{width:100%}.hero h1{font-size:clamp(2.9rem,11vw,4.8rem)}.hero-buttons .button{flex:1}.trust{gap:10px}.feature-grid{grid-template-columns:repeat(2,1fr);row-gap:35px}.feature:nth-child(3):before{display:none}.steps{grid-template-columns:repeat(2,1fr)}.bottom-grid{grid-template-columns:1fr}.footer-inner{flex-direction:column}}@media(max-width:460px){.hero{min-height:735px}.hero-content{padding-top:265px}.tagline{font-size:.76rem}.intro{font-size:.85rem}.hero-buttons{flex-direction:column}.hero-buttons .button{width:100%}.feature{padding-inline:10px}.feature-icon{width:55px;height:55px}.feature h3{font-size:.9rem}.feature p{font-size:.76rem}.steps{grid-template-columns:1fr}.section{padding:43px 0}.panel{padding:20px}.panel-buttons .button{width:100%}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.button{transition:none}}

/* -----------------------------------------------------------------------
   BookStitch: approved left + right library framing, V3 visual test.
   Art layers sit under real, accessible HTML segments; they are not stretched.
   ----------------------------------------------------------------------- */
:root { --stage:#061317; }
html {scroll-padding-top:80px;}
body {background: #061015; position:relative; isolation:isolate; overflow-x:clip;}
body::before {content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
 background: radial-gradient(ellipse 55% 21% at 54% 20%,rgba(13,54,61,.50),transparent 85%),
 radial-gradient(ellipse 65% 35% at 47% 70%,rgba(7,35,42,.42),transparent 95%),
 linear-gradient(180deg,#061216 0%,#07171b 39%,#061317 68%,#040c10 100%);}
.library-atmosphere {position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.library-edge {position:absolute;top:0;display:block;width:clamp(440px,28vw,660px);height:auto;max-width:none;opacity:.94;}
.library-edge img {width:100%;height:auto;display:block;}
.library-left {left:0;}
.library-right {right:0;}
/* The approved PNG assets already have inward transparent fading. */
.library-atmosphere::after {content:"";position:absolute;inset:0;pointer-events:none;
 background: linear-gradient(180deg, transparent 0%,transparent 62%,rgba(4,12,16,.09) 78%,#040c10 99%);}
.site-header {position:sticky;z-index:30;background:rgba(3,13,16,.78);}
main, .site-footer {position:relative;z-index:1;}
main {background:linear-gradient(90deg,transparent 0%,rgba(4,14,17,.21) 21%,rgba(4,13,18,.40) 40%,rgba(4,13,18,.40) 63%,rgba(4,14,17,.18) 81%,transparent 100%);}
.hero {min-height:600px;}
.hero-background {background:radial-gradient(ellipse 46% 78% at 49% 56%,rgba(2,12,16,.50),transparent 98%);}
.hero::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(180deg,transparent 73%,rgba(3,14,19,.25) 100%);}
.hero-content {position:relative;z-index:2;padding-block:76px 92px;}
.hero-copy {width:min(560px,48%);}
.hero-crest {position:absolute;z-index:0;right:clamp(40px,9vw,245px);top:-3px;width:clamp(420px,35vw,620px);
 aspect-ratio:1;opacity:.96;pointer-events:none;mix-blend-mode:screen;
 -webkit-mask-image:radial-gradient(ellipse 51% 49% at 51% 50%,black 62%,rgba(0,0,0,.82) 75%,transparent 99%);
 mask-image:radial-gradient(ellipse 51% 49% at 51% 50%,black 62%,rgba(0,0,0,.82) 75%,transparent 99%);}
.hero-crest img{display:block;width:100%;height:100%;object-fit:contain;}
.features,.workflow,.final-section {background:transparent;}
.section{border-bottom:1px solid rgba(218,184,111,.40);}
.section::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,rgba(3,13,16,.07),rgba(3,14,18,.48) 16%,rgba(3,14,18,.68) 45%,rgba(3,14,18,.65) 55%,rgba(3,14,18,.44) 82%,rgba(3,13,16,.06));}
.features{padding-top:49px;padding-bottom:52px;}
.workflow{padding-top:46px;padding-bottom:55px;}
.final-section{padding-top:53px;padding-bottom:68px;}
.section-heading{margin-bottom:34px;}
.feature p, .steps p {text-shadow:0 1px 3px rgba(0,0,0,.55);}
.panel {background:linear-gradient(130deg,rgba(5,24,29,.90),rgba(2,10,14,.78));}
.site-footer {background:rgba(3,10,13,.90);}
/* Wide UHD monitors: artwork remains reasonably sized, with dark margins
   and a readable fixed-width center instead of stretching to 4K. */
@media (min-width:2200px){.wrap{width:min(1400px,calc(100% - 120px));}.hero{min-height:650px}.hero-crest{width:660px;right:calc((100% - 1600px)/2);top:-5px}.hero-copy{width:590px}.library-edge{width:min(29vw,760px)}}
/* Tablet: independent composition. Keep mild edge atmosphere, not full bookshelf. */
@media (max-width:1090px){
 .library-edge{width:clamp(340px,35vw,440px);opacity:.52;}
 .hero-crest{width:clamp(400px,53vw,590px);right:-55px;top:10px;opacity:.74;}
 .hero-copy{width:55%;}
 .features,.workflow{padding-inline:8px;}
}
@media (max-width:790px){
 .library-atmosphere{height:800px;bottom:auto;opacity:.28;}
 .library-edge{display:none;}
 .hero{min-height:780px;align-items:flex-end;}
 .hero-crest{width:min(88vw,420px);right:50%;transform:translateX(50%);top:0;opacity:.92;}
 .hero-background{background:radial-gradient(ellipse at 50% 30%,rgba(11,64,69,.44),transparent 60%);}
 .hero-content{padding-top:435px;padding-bottom:60px;}
 .hero-copy{width:100%;}
 .hero h1{font-size:clamp(2.65rem,11vw,4.6rem);}
 .features,.workflow,.final-section{background:linear-gradient(90deg,rgba(3,14,17,.75),rgba(4,19,22,.76),rgba(3,14,17,.75));}
}
@media(max-width:460px){
 .hero{min-height:770px;}
 .hero-crest{width:96vw;top:9px;}
 .hero-content{padding-top:395px;}
 .site-header .brand{font-size:1.2rem;}
 .feature-grid{gap:24px 5px;}
 .nav-links.is-open{background:rgba(4,17,19,.98);}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* V4 — approved wordmarks, only navigation and hero refinements */
.site-header .brand {display:flex;align-items:center;flex:0 0 auto;padding:0;line-height:0;}
.brand-logo{display:block;width:clamp(155px,13vw,205px);height:auto;max-height:61px;object-fit:contain;}
.hero-logo-title{margin:0 0 14px!important;line-height:1!important;font-size:1rem!important;letter-spacing:normal!important;text-shadow:none!important;}
.hero-logo{display:block;width:min(100%,560px);height:auto;filter:none;}
.hero-copy{width:min(570px,49%);}
.hero-content{padding-block:86px 100px;}
.hero .lead{margin-top:12px;}
@media(max-width:1090px){.brand-logo{width:155px}.hero-logo{width:min(100%,500px)}}
@media(max-width:790px){.brand-logo{width:170px;max-height:52px}.hero-copy{width:100%}.hero-content{padding-top:435px;padding-bottom:60px}.hero-logo{width:min(100%,580px)}}
@media(max-width:460px){.brand-logo{width:150px}.hero-content{padding-top:395px}.hero-logo{width:100%}}

/* V5 — navigation refinement based on reference screenshot */
.site-header{
  background:transparent !important;
  border-bottom:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(3,11,16,.48) 0%, rgba(3,11,16,.18) 62%, rgba(3,11,16,0) 100%);
}
.nav{
  position:relative;
  min-height:74px;
  padding:10px 0 24px;
  gap:24px;
  overflow:visible;
}
.nav::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:4px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(55,205,215,.42) 7%,
    rgba(94,185,183,.42) 22%,
    rgba(176,141,77,.34) 50%,
    rgba(94,185,183,.42) 78%,
    rgba(55,205,215,.42) 93%,
    rgba(0,0,0,0) 100%);
}
.nav-line{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:14px;
  pointer-events:none;
}
.nav-line-center{
  position:absolute;
  left:50%;
  top:2px;
  width:22px;
  height:22px;
  transform:translateX(-50%);
}
.nav-line-center::before,
.nav-line-center::after{
  content:'';
  position:absolute;
  inset:0;
}
.nav-line-center::before{
  width:12px;height:12px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);
  background:radial-gradient(circle at 50% 50%, rgba(236,224,183,.95) 0%, rgba(200,174,103,.92) 48%, rgba(140,104,44,.95) 100%);
  box-shadow:0 0 0 1px rgba(248,224,167,.55), 0 0 12px rgba(221,182,104,.22);
}
.nav-line-center::after{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:28px;height:8px;
  background:
    linear-gradient(90deg, transparent 0, rgba(188,148,84,.85) 18%, rgba(239,216,149,.95) 48%, rgba(188,148,84,.85) 82%, transparent 100%);
  clip-path:polygon(0 52%, 18% 52%, 31% 0, 50% 52%, 69% 0, 82% 52%, 100% 52%, 100% 68%, 82% 68%, 69% 100%, 50% 68%, 31% 100%, 18% 68%, 0 68%);
  opacity:.9;
}
.brand-logo{width:clamp(175px,13vw,228px);max-height:64px;}
.nav-links{
  gap:22px;
  font-family:Cinzel, Georgia, serif;
  font-size:.97rem;
  letter-spacing:.015em;
}
.nav-links a{
  position:relative;
  padding:14px 2px 20px;
  border-bottom:none !important;
  color:#f4f0e7;
  text-shadow:0 0 6px rgba(0,0,0,.45);
}
.nav-links a span{position:relative;z-index:2;display:inline-block;transition:color .22s ease, text-shadow .22s ease, transform .22s ease;}
.nav-links a::before{
  content:'';
  position:absolute;
  left:50%;
  bottom:12px;
  width:60%;
  height:16px;
  transform:translateX(-50%) scaleX(.4);
  transform-origin:center;
  background:radial-gradient(ellipse at center, rgba(69,219,227,.6) 0%, rgba(69,219,227,.26) 45%, rgba(69,219,227,0) 72%);
  filter:blur(4px);
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-4px;
  width:18px;height:18px;
  transform:translateX(-50%);
  opacity:0;
  transition:opacity .22s ease, bottom .22s ease;
  background:
    radial-gradient(circle at 50% 50%, rgba(236,224,183,.98) 0 14%, rgba(201,170,100,.98) 15% 42%, transparent 43%),
    linear-gradient(90deg, transparent 0 12%, rgba(211,176,109,.95) 12% 38%, transparent 38% 62%, rgba(211,176,109,.95) 62% 88%, transparent 88% 100%);
  clip-path:polygon(50% 0, 65% 17%, 100% 17%, 74% 50%, 100% 83%, 65% 83%, 50% 100%, 35% 83%, 0 83%, 26% 50%, 0 17%, 35% 17%);
  filter:drop-shadow(0 0 6px rgba(221,182,104,.18));
}
.nav-links a:hover span,
.nav-links a:focus-visible span,
.nav-links a.active span{
  color:#fffdfa;
  text-shadow:0 0 12px rgba(64,220,228,.38), 0 0 1px rgba(255,250,238,.6);
  transform:translateY(-.5px);
}
.nav-links a:hover::before,
.nav-links a:focus-visible::before,
.nav-links a.active::before{opacity:1;transform:translateX(-50%) scaleX(1);}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a.active::after{opacity:1;bottom:-2px;}
.nav-actions{gap:18px;font-family:Cinzel, Georgia, serif;font-size:.94rem;}
.github-link{
  display:inline-flex;align-items:center;gap:10px;
  color:#f7f4ea;
  text-shadow:0 0 6px rgba(0,0,0,.45);
}
.github-link:hover,.github-link:focus-visible{color:#fff;text-shadow:0 0 12px rgba(64,220,228,.28);}
.github-icon{width:21px;height:21px;display:block;}
.nav-download{
  min-height:40px;
  padding:9px 18px;
  border-radius:9px;
  border:1px solid rgba(59,213,223,.72);
  background:linear-gradient(180deg, rgba(16,90,97,.72) 0%, rgba(7,42,49,.74) 58%, rgba(3,15,19,.86) 100%);
  box-shadow:inset 0 1px 0 rgba(160,249,255,.18), 0 0 16px rgba(40,194,205,.12);
  font-size:.9rem;
}
.nav-download:hover{
  background:linear-gradient(180deg, rgba(20,113,121,.82) 0%, rgba(9,56,64,.84) 58%, rgba(4,18,22,.94) 100%);
}
.button-small{font-size:.9rem;}
@media (max-width:1090px){
  .nav{gap:14px;padding-bottom:22px;}
  .nav-links{gap:16px;font-size:.9rem;}
  .brand-logo{width:185px;}
  .nav-actions{gap:12px;font-size:.88rem;}
}
@media (max-width:790px){
  .site-header::before{background:linear-gradient(180deg, rgba(3,11,16,.82) 0%, rgba(3,11,16,.66) 70%, rgba(3,11,16,.15) 100%);} 
  .nav{min-height:68px;padding:10px 0 16px;}
  .nav::after,.nav-line{display:none;}
  .nav-links{font-family:Inter,system-ui,sans-serif;font-size:.95rem;letter-spacing:0;}
  .nav-links a{padding:11px 10px 12px;}
  .nav-links a::before,.nav-links a::after{display:none;}
  .brand-logo{width:172px;max-height:54px;}
  .github-link{display:none;}
  .menu-toggle{border-color:rgba(211,176,109,.35);background:rgba(6,22,26,.55);}
}
@media (max-width:460px){
  .brand-logo{width:162px;}
  .nav-download{padding:9px 14px;font-size:.84rem;}
}


/* V6 — navigation shimmer refinement based on user feedback */
.nav{
  padding:8px 0 17px;
}
.nav::after{
  bottom:8px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(58,193,202,.44) 6%,
    rgba(68,156,160,.38) 19%,
    rgba(171,138,77,.36) 50%,
    rgba(68,156,160,.38) 81%,
    rgba(58,193,202,.44) 94%,
    rgba(0,0,0,0) 100%);
}
.nav-line{
  bottom:1px;
  height:18px;
}
.nav-line-center{
  left:50%;
  top:0;
  width:64px;
  height:18px;
  transform:translateX(-50%);
}
.nav-line-center::before,
.nav-line-center::after{
  content:'';
  position:absolute;
}
/* soft gold side-lines with a small center spark, no chunky diamond */
.nav-line-center::before{
  inset:7px 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(185,150,87,.0) 6%,
    rgba(206,173,104,.9) 18%,
    rgba(241,219,154,.98) 48%,
    rgba(206,173,104,.9) 82%,
    rgba(185,150,87,.0) 94%,
    transparent 100%);
}
.nav-line-center::after{
  left:50%;
  top:2px;
  width:8px;
  height:8px;
  transform:translateX(-50%) rotate(45deg);
  background:radial-gradient(circle at 50% 50%, rgba(236,244,248,.98) 0%, rgba(221,242,248,.96) 26%, rgba(157,214,223,.88) 52%, rgba(211,178,111,.95) 74%, rgba(156,116,55,.82) 100%);
  box-shadow:0 0 8px rgba(70,210,223,.14), 0 0 10px rgba(226,197,128,.12);
}
.nav-links a{
  padding:14px 2px 20px;
}
.nav-links a::before{
  bottom:13px;
  width:88px;
  height:20px;
  transform:translateX(-50%) scaleX(.55);
  background:
    radial-gradient(ellipse at center,
      rgba(109,244,251,.0) 0%,
      rgba(109,244,251,.16) 22%,
      rgba(81,217,227,.78) 42%,
      rgba(170,249,255,.96) 50%,
      rgba(81,217,227,.78) 58%,
      rgba(81,217,227,.22) 78%,
      rgba(81,217,227,0) 100%);
  filter:blur(5px);
  opacity:0;
}
.nav-links a::after{ display:none !important; }
.nav-links a:hover::before,
.nav-links a:focus-visible::before,
.nav-links a.active::before{
  opacity:1;
  transform:translateX(-50%) scaleX(1);
}
.nav-links a span{
  transition:color .22s ease, text-shadow .22s ease, transform .22s ease;
}
.nav-links a:hover span,
.nav-links a:focus-visible span,
.nav-links a.active span{
  text-shadow:0 0 10px rgba(128,244,249,.16), 0 0 1px rgba(255,255,255,.85);
}
@media (max-width:1090px){
  .nav{padding-bottom:16px;}
  .nav::after{bottom:7px;}
  .nav-line{bottom:0;}
  .nav-links a::before{width:72px;}
}
@media (max-width:790px){
  .nav{padding-bottom:12px;}
}

/* V7: approved ornament separator between hero and features. */
.hero {overflow:visible;}
.hero-bottom-line.ornamental-divider {
  position:absolute; z-index:8; pointer-events:none;
  left:50%; right:auto; bottom:-47px; transform:translateX(-50%);
  width:min(100%,1600px); height:94px; background:none;
  display:flex; align-items:center; justify-content:center;
}
.hero-bottom-line.ornamental-divider img {
  display:block; width:100%; height:100%; object-fit:fill;
}
.features{padding-top:65px;}
@media(max-width:790px){
  .hero-bottom-line.ornamental-divider{height:70px;bottom:-35px;width:100%;}
  .features{padding-top:62px;}
}
@media(max-width:460px){
  .hero-bottom-line.ornamental-divider{height:55px;bottom:-27px;width:100%;}
}


/* V8: progressive section dividers and approved cyan nav shimmer */
/* The imagery is cropped but never distorted: intrinsic proportions retained. */
.section-divider{
  position:relative;
  z-index:6;
  margin-block:-30px;
  height:60px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  overflow:visible;
}
.section-divider img{
  width:min(100%,1680px);
  height:100%;
  object-fit:fill;
  display:block;
}
.section-divider-secondary{margin-block:-29px;height:58px;}
.section-divider-tertiary{margin-block:-26px;height:52px;}
/* Suppress the generic straight border where an illustrated divider takes over. */
.features,.workflow{border-bottom:0;}
.nav-links a::after{display:none!important;}
.nav-line-center{display:none!important;}
.nav-links a::before{
  width:118px!important;
  height:35px!important;
  bottom:1px!important;
  background:url('../assets/nav-cyan-shimmer.webp') center center / 100% 100% no-repeat!important;
  filter:none!important;
  transform:translateX(-50%) scaleX(.74)!important;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .22s ease,transform .22s ease;
}
.nav-links a:hover::before,
.nav-links a:focus-visible::before,
.nav-links a.active::before{
  opacity:.9!important;
  transform:translateX(-50%) scaleX(1)!important;
}
@media(max-width:790px){
  .section-divider{height:42px;margin-block:-20px;}
  .section-divider-secondary{height:40px;margin-block:-19px;}
  .section-divider-tertiary{height:36px;margin-block:-17px;}
  .nav-links a::before{display:none!important;}
}


/* V9 — hero emblem swap and first-segment button polish */
.hero-crest{
  width:clamp(430px,38vw,680px) !important;
  right:clamp(20px,7vw,180px) !important;
  top:10px !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.hero-crest img{filter:drop-shadow(0 0 20px rgba(60,220,230,.16));}
.hero-buttons .button{display:inline-flex;align-items:center;gap:14px;padding-inline:20px;white-space:nowrap;}
.button-icon{display:inline-grid;place-items:center;flex:0 0 auto;width:22px;height:22px;line-height:0;}
.button-icon svg{display:block;width:100%;height:100%;}
.button-arrow{font-size:1rem;line-height:1;transform:translateY(-.5px);}
.button-github-hero .button-icon-github{width:24px;height:24px;color:#ffffff;}
.button-download-hero .button-icon{color:#f4ffff;}
.button-github-hero{border-color:rgba(223,193,138,.72);background:rgba(3,12,18,.82);}
.button-github-hero:hover{background:rgba(6,18,27,.92);}
@media (max-width:1090px){
  .hero-crest{width:clamp(390px,48vw,610px) !important;right:-15px !important;top:18px !important;}
}
@media (max-width:790px){
  .hero-crest{width:min(92vw,500px) !important;right:50% !important;transform:translateX(50%) !important;top:6px !important;}
  .hero-buttons .button{white-space:normal;justify-content:center;}
}

/* V10: proportionally rendered, content-cropped divider artwork. */
.hero-bottom-line.ornamental-divider{
  left:50%;right:auto;bottom:0;
  transform:translate(-50%,50%);
  height:auto;width:min(100%,1680px);
  display:block;overflow:visible;
}
.hero-bottom-line.ornamental-divider img{
  width:100%;height:auto;object-fit:contain;display:block;
}
.section-divider,
.section-divider-secondary,
.section-divider-tertiary{
  height:auto;width:min(100%,1680px);
  margin:-16px auto;
  display:block;overflow:visible;
}
.section-divider img{
  display:block;width:100%;height:auto;object-fit:contain;
}
@media (max-width:790px){
  .hero-bottom-line.ornamental-divider{width:100%;bottom:0;height:auto;}
  .section-divider,.section-divider-secondary,.section-divider-tertiary{height:auto;margin:-8px auto;}
}


/* V11: approved benefit pictograms and balanced hero emblem */
.hero-crest{right:clamp(45px,11vw,270px) !important;}
.trust{align-items:center;gap:clamp(11px,1.5vw,23px);margin-top:18px;}
.trust-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#d0dcd7;}
.trust-item img{display:block;width:clamp(20px,1.5vw,25px);height:clamp(20px,1.5vw,25px);object-fit:contain;flex:none;}
@media (min-width:2200px){.hero-crest{right:calc((100% - 1500px)/2) !important;}}
@media (max-width:1090px){.hero-crest{right:clamp(0px,4vw,60px) !important;}}
@media (max-width:790px){.hero-crest{right:50% !important;}}
@media (max-width:460px){.trust{gap:10px 15px;}.trust-item{font-size:.68rem;}.trust-item img{width:21px;height:21px;}}

/* V12: flexible visual library stage: nav (0), hero (1), features (2). */
.library-atmosphere{
  top:0 !important;
  bottom:auto !important;
  height:var(--library-stage-height, 1370px) !important;
  overflow:hidden;
  opacity:1 !important;
  pointer-events:none;
}
.library-stage-center{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 66% 44% at 50% 36%,rgba(7,42,47,.19),transparent 80%),
    linear-gradient(180deg,rgba(3,15,19,0) 0%,rgba(3,15,19,.05) 58%,#061317 99%);
}
.library-atmosphere::after{background:linear-gradient(to bottom,transparent 78%,rgba(4,14,18,.14) 92%,#061317 100%) !important;}
.library-edge{
  position:absolute !important;top:0;bottom:0;
  width:clamp(400px,29vw,670px) !important;
  height:100% !important;display:block !important;
  max-width:none;opacity:.92 !important;
}
.library-edge img{position:absolute;display:block;width:100%;height:auto;max-width:none;object-fit:contain;}
.library-edge .library-edge-top{top:0;bottom:auto;}
.library-edge .library-edge-bottom{top:auto;bottom:0;}
.library-left{left:0;right:auto;}
.library-right{right:0;left:auto;}
/* A dark extension between top and bottom artwork, never stretched architecture. */
.library-edge::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 68% at 0% 53%,rgba(11,42,46,.20),transparent 80%);
}
.library-right::before{transform:scaleX(-1);}
/* Avoid a visible seam when the ornate areas cross the separator art. */
.section-divider, .hero-bottom-line.ornamental-divider{isolation:isolate;}
.hero-bottom-line.ornamental-divider{width:min(calc(100% - 90px), 1330px) !important;}
.section-divider,.section-divider-secondary,.section-divider-tertiary{
  width:min(calc(100% - 90px), 1330px) !important;
}
/* Neutral, repeatable surroundings from section 3 (Workflow) onward. */
.workflow,.final-section{background:linear-gradient(180deg,rgba(3,15,19,.82),#061317 42%,#040d11 100%) !important;}
.workflow::before,.final-section::before{background:linear-gradient(90deg,rgba(4,13,17,.46),rgba(6,26,30,.19) 50%,rgba(4,13,17,.46)) !important;}
@media(min-width:2200px){
  .library-edge{width:min(29vw,760px) !important;}
}
@media(max-width:1090px){
  .library-edge{width:clamp(310px,35vw,445px) !important;opacity:.7 !important;}
}
@media(max-width:790px){
  .library-atmosphere{height:var(--library-stage-height, 1450px) !important;opacity:.25 !important;}
  .library-edge{width:min(70vw,390px) !important;opacity:.32 !important;}
  .hero-bottom-line.ornamental-divider{width:calc(100% - 24px) !important;}
  .section-divider,.section-divider-secondary,.section-divider-tertiary{width:calc(100% - 24px) !important;}
}


/* V13 — longer classic library side art + simpler separators */
.library-atmosphere{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.library-edge{
  top:0;
  bottom:0;
  width:clamp(300px, 25vw, 520px);
  height:100%;
  overflow:hidden;
  opacity:.96;
}
.library-edge img.library-edge-full{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.library-left img.library-edge-full{
  object-position:left top;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 70%, rgba(0,0,0,.72) 84%, rgba(0,0,0,.28) 93%, transparent 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 70%, rgba(0,0,0,.72) 84%, rgba(0,0,0,.28) 93%, transparent 100%);
}
.library-right img.library-edge-full{
  object-position:right top;
  -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 70%, rgba(0,0,0,.72) 84%, rgba(0,0,0,.28) 93%, transparent 100%);
  mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.98) 70%, rgba(0,0,0,.72) 84%, rgba(0,0,0,.28) 93%, transparent 100%);
}
.library-atmosphere::after{
  background:linear-gradient(180deg, transparent 0%, transparent 90%, rgba(4,12,16,.18) 97%, #040c10 100%);
}
.features{
  background:linear-gradient(180deg, rgba(5,20,24,.28) 0%, rgba(4,14,18,.34) 100%);
}
.workflow,
.final-section,
.site-footer{
  background:linear-gradient(180deg, rgba(4,13,17,.86) 0%, rgba(3,11,15,.96) 100%);
}
.hero-bottom-line,
.section-divider{
  background:none !important;
  height:auto;
  text-align:center;
}
.hero-bottom-line img,
.section-divider img{
  display:block;
  width:100%;
  height:auto;
  margin-inline:auto;
}
.hero-bottom-line{
  left:0; right:0; bottom:-4px;
}
.hero-bottom-line img{
  max-width:min(1410px, calc(100vw - clamp(130px, 16vw, 340px)));
}
.section-divider{
  padding:8px 0;
}
.section-divider-secondary img{
  max-width:min(1340px, calc(100vw - clamp(130px, 17vw, 360px)));
}
.section-divider-tertiary img{
  max-width:min(1340px, calc(100vw - clamp(150px, 19vw, 390px)));
}
@media (max-width: 1250px){
  .library-edge{width:clamp(250px, 23vw, 420px);}
  .hero-bottom-line img{max-width:min(1180px, calc(100vw - 130px));}
  .section-divider-secondary img{max-width:min(1120px, calc(100vw - 120px));}
  .section-divider-tertiary img{max-width:min(1120px, calc(100vw - 130px));}
}
@media (max-width: 980px){
  .library-edge{width:clamp(200px, 22vw, 300px); opacity:.92;}
  .hero-bottom-line img{max-width:calc(100vw - 80px);}
  .section-divider-secondary img,
  .section-divider-tertiary img{max-width:calc(100vw - 72px);}
}
@media (max-width: 790px){
  .library-atmosphere{height:860px; bottom:auto;}
  .library-edge{display:none;}
  .hero-bottom-line img,
  .section-divider-secondary img,
  .section-divider-tertiary img{max-width:calc(100vw - 34px);}
  .workflow,
  .final-section,
  .site-footer{background:linear-gradient(180deg, rgba(5,16,20,.95) 0%, rgba(4,12,16,.98) 100%);}  
}

/* V14: nostalgic illustrated library sides extended downward, corrected feature icons */
.library-atmosphere{height:100%;bottom:0;overflow:hidden;}
.library-edge{top:0;bottom:auto;height:auto!important;width:clamp(315px,26vw,520px);overflow:visible;}
.library-edge img.library-edge-full{display:block;width:100%;height:auto!important;object-fit:contain!important;}
.library-atmosphere::after{background:linear-gradient(180deg, transparent 0%, transparent 86%, #040c10 100%);}
/* Remove the opaque horizontal band behind divider 2 */
.section-divider,.section-divider-secondary,.section-divider-tertiary{background:transparent!important;}
.features,.workflow{border-bottom:0!important;}
.section-divider img{object-fit:contain!important;}
.feature-icon{width:88px;height:88px;border:0;box-shadow:none;background:transparent;margin-bottom:8px;}
.feature-icon img{display:block;max-width:100%;max-height:100%;object-fit:contain;}
.hero-crest{right:clamp(85px,12vw,275px)!important;}
@media(max-width:1090px){.hero-crest{right:clamp(-12px,3vw,85px)!important;}.library-edge{width:clamp(280px,31vw,400px);}}
@media(max-width:790px){.library-edge{display:none;}.hero-crest{right:50%!important;}.feature-icon{width:70px;height:70px;}}


/* V15: Hero content and emblem share one grid; imagery runs the entire page. */
.hero{
  display:block !important;
  min-height:560px !important;
  overflow:visible !important;
}
.hero-content.wrap{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(22px,3.2vw,55px);
  align-items:center;
  width:min(1240px,calc(100% - 64px));
  margin-inline:auto;
  padding:64px 0 84px !important;
  position:relative;
  z-index:2;
}
.hero-copy{grid-column:1;grid-row:1;width:100% !important;max-width:570px;min-width:0;}
.hero-crest{
  grid-column:2;grid-row:1;
  position:relative !important;
  justify-self:center;
  align-self:center;
  width:min(100%,555px) !important;
  height:auto !important;
  aspect-ratio:1;
  inset:auto !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  opacity:1 !important;
  pointer-events:none;
}
.hero-crest img{display:block;width:100%;height:auto;object-fit:contain;}
/* Both side images have a genuine 3070px vertical master; never resize to stage height. */
.library-atmosphere{
  position:absolute !important;
  inset:0 !important;
  width:100%;height:100% !important;
  overflow:hidden !important;
  opacity:1 !important;
  z-index:0 !important;
  pointer-events:none;
}
.library-edge{
  top:0 !important;bottom:auto !important;
  height:auto !important;
  width:clamp(315px,26vw,520px) !important;
  max-width:none;
  overflow:visible !important;
  display:block !important;
  opacity:.96 !important;
}
.library-edge img.library-edge-full{
  position:relative !important;
  top:auto !important;bottom:auto !important;
  display:block;
  width:100%;height:auto !important;
  object-fit:contain !important;
  max-width:none;
}
.library-atmosphere::after{display:none !important;}
.library-stage-center{background:transparent !important;}
/* Each panel stays transparent enough to show the architecture and columns. */
main{background:transparent !important;}
.features,.workflow,.final-section,.site-footer{
  background:transparent !important;
  border-bottom:0 !important;
}
.workflow::before,.final-section::before,.features::before{background:transparent !important;}
.section-divider,.section-divider-secondary,.section-divider-tertiary{
  background:transparent !important;
  border:0 !important;
}
@media (min-width:2200px){.hero-content.wrap{width:min(1400px,calc(100% - 120px));}}
@media (max-width:1090px){
  .hero-content.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;}
  .hero-crest{width:min(100%,475px) !important;}
  .hero-copy{max-width:none;}
}
@media (max-width:790px){
  .hero{min-height:unset !important;}
  .hero-content.wrap{grid-template-columns:minmax(0,1fr);gap:0;padding:16px 0 64px !important;width:min(100% - 34px,660px);}
  .hero-crest{grid-column:1;grid-row:1;justify-self:center;width:min(78vw,410px) !important;}
  .hero-copy{grid-column:1;grid-row:2;}
  .library-edge{display:none !important;}
  .features,.workflow,.final-section,.site-footer{background:rgba(4,14,17,.5) !important;}
}
@media (max-width:460px){.hero-content.wrap{padding-bottom:56px !important;}.hero-crest{width:min(86vw,370px) !important;}}


/* V16 — align large crest top with the wordmark on desktop. */
@media (min-width: 791px) {
  .hero-content.wrap { align-items: start !important; }
  .hero-crest { align-self: start !important; margin-top: 48px !important; }
}
@media (max-width: 790px) {
  .hero-crest { margin-top: 0 !important; }
}


/* V17 — remove the oversized empty area below the hero.
   The emblem artwork is 1448x1086 (not square); an inherited 1:1
   aspect-ratio had artificially enlarged the grid row. */
@media (min-width: 791px) {
  .hero { min-height: 0 !important; }
  .hero-content.wrap { padding-top: 48px !important; padding-bottom: 28px !important; }
  .hero-crest {
    aspect-ratio: auto !important;
    margin-top: 34px !important;
  }
}

/* V18 — approved side assets + elegant antique subtitle script */
.library-edge{width:clamp(300px,20vw,560px);opacity:.96;}
.library-edge img{display:block;width:100%;height:auto;}
.section-heading p{ text-wrap:balance; }
@media (max-width:1090px){
  .library-edge{width:clamp(220px,24vw,380px);opacity:.82;}
}
@media (max-width:790px){
  .section-heading p{font-size:.98rem;line-height:1.24;}
}
@media (max-width:460px){
  .section-heading p{font-size:.92rem;}
}

/* V19 — feature overview: 2x2 layout at viewport widths up to 1399 CSS pixels. */
@media (min-width: 791px) and (max-width: 1399px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(3)::before { display: none; }
  .feature-grid { row-gap: 28px; }
}

/* V20 — feature description copy: soft white, headings retain their gold. */
.feature-grid .feature p { color: #e8eeec; }


/* V23 — updated centre backdrop.
   Use the newly supplied centre image behind the unchanged library edge assets.
   The image keeps a wide minimum width so smaller viewports crop it naturally
   from the sides instead of squeezing it. */
.library-stage-center {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-color: #041419 !important;
  background-image: url('../assets/library-center-v38-double.webp') !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-size: max(100%, 1800px) auto !important;
  pointer-events: none !important;
}
.library-edge { z-index: 1 !important; }

/* V22 — feature graphics approximately 18% larger; workflow icons unchanged. */
.feature-grid .feature-icon { width: 104px; height: 104px; }
@media (max-width: 790px) {
  .feature-grid .feature-icon { width: 83px; height: 83px; }
}

/* V25: four user-provided illustrated books replace the old step glyphs. */
.workflow .steps .step-icon-book {
  width: clamp(82px, 8vw, 122px);
  height: clamp(82px, 8vw, 122px);
  flex: 0 0 clamp(82px, 8vw, 122px);
  margin: -12px -8px -8px -12px;
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
.workflow .steps .step-icon-book img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 790px) {
  .workflow .steps .step-icon-book {
    width: 96px;
    height: 96px;
    flex-basis: 96px;
    margin: -10px -6px -8px -10px;
  }
}
@media (max-width: 460px) {
  .workflow .steps .step-icon-book {
    width: 86px;
    height: 86px;
    flex-basis: 86px;
    margin: -8px -4px -6px -8px;
  }
}


/* V27: isolated Supported Formats book animation prototype. */
.book-trigger{all:unset;display:flex;align-items:flex-start;gap:13px;width:100%;cursor:pointer;box-sizing:border-box;border-radius:8px;position:relative}
.book-trigger:focus-visible{outline:2px solid #53dce4;outline-offset:5px}
.book-trigger .step-icon-book{display:grid;flex:none;transition:transform .25s ease,filter .25s ease}
.book-trigger:hover .step-icon-book,.book-trigger:focus-visible .step-icon-book{transform:scale(1.09);filter:drop-shadow(0 0 12px rgba(44,212,222,.45))}
.book-trigger-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.book-trigger-title{font-family:Georgia,serif;font-size:1.05rem;color:#efdbb9;font-weight:bold;line-height:1.4}
.book-trigger-desc{font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;color:#f5fbfb;line-height:1.28;margin-top:5px;font-style:italic;font-weight:500;letter-spacing:.01em;max-width:28ch;text-wrap:balance}
.book-dialog[hidden]{display:none !important}
.book-dialog{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;isolation:isolate}
.book-dialog-backdrop{position:absolute;inset:0;background:rgba(1,8,12,.88);backdrop-filter:blur(7px)}
.book-dialog-content{position:relative;width:min(94vw,1050px);height:min(90dvh,770px);display:grid;place-items:center;outline:none}
.book-dialog-close{position:absolute;z-index:5;top:0;right:0;color:#ffedcb;border:1px solid rgba(230,188,100,.6);background:#091d24;border-radius:50%;font-size:30px;line-height:1;width:44px;height:44px;cursor:pointer}
.book-animation{width:100%;height:100%;display:grid;place-items:center;filter:drop-shadow(0 15px 32px rgba(0,0,0,.6));transform-origin:center;animation:bookArrive .42s ease-out both}
.book-animation-frame{object-fit:contain;max-width:100%;max-height:100%;width:auto;height:auto;display:block;user-select:none;pointer-events:none}
.book-pages-content{position:absolute;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:5%;width:76%;max-width:810px;aspect-ratio:1470/1070;padding:11% 5% 14%;color:#3d2b1d;opacity:0;pointer-events:none;transition:opacity .35s ease;box-sizing:border-box}
.book-dialog.is-open .book-pages-content{opacity:1;pointer-events:auto}
.book-page{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px;overflow:auto;scrollbar-width:thin}
.book-page h2{font-family:Georgia,serif;font-size:clamp(15px,2.1vw,26px);line-height:1.2;margin:0 0 9px;color:#59351d}
.book-page h3{font-family:Georgia,serif;font-size:clamp(14px,1.8vw,21px);margin:0;color:#59351d}
.book-page p{font-size:clamp(12px,1.23vw,16px);line-height:1.35;margin:0}
.book-prototype-note{font-style:italic;font-size:12px !important;margin-top:auto !important}
@keyframes bookArrive{from{opacity:.3;transform:translateY(24px) scale(.68)}to{opacity:1;transform:translateY(0) scale(1)}}
body.book-dialog-visible{overflow:hidden}
@media(max-width:790px){.book-dialog-content{width:min(98vw,720px);height:min(83dvh,620px)}.book-pages-content{width:81%;gap:4%;padding:11% 4% 14%}.book-page p{font-size:clamp(10px,2vw,14px)}.book-page h2{font-size:clamp(13px,3vw,20px)}.book-page h3{font-size:clamp(12px,2.5vw,17px)}}
@media(max-width:520px){.book-dialog-content{height:min(90dvh,610px)}.book-pages-content{width:83%;padding:9% 3% 13%;gap:3%}.book-page{gap:3px}.book-page p{font-size:10px}.book-page h2{font-size:12px;margin-bottom:3px}.book-page h3{font-size:11px}.book-prototype-note{font-size:9px !important}}
@media(prefers-reduced-motion:reduce){.book-animation{animation:none}.book-trigger .step-icon-book,.book-pages-content{transition:none}}

/* V28 — the feature book now flies from its real on-page position. */
.book-dialog.is-flying .book-dialog-backdrop { background:rgba(1,8,12,.76); }
.book-dialog .book-animation { animation:none; }
@media (prefers-reduced-motion: reduce) { .book-dialog .book-animation { animation:none; } }

/* V29: the flying image and the initial animation frame share one bitmap and footprint. */
.book-dialog .book-animation-frame {
  width:var(--book-zoom-size, 440px);
  height:var(--book-zoom-size, 440px);
  max-width:94vw; max-height:85dvh; object-fit:contain;
  transition:width 750ms cubic-bezier(.23,.78,.25,1), height 750ms cubic-bezier(.23,.78,.25,1);
}
.book-dialog.is-opening .book-animation-frame {
  width:min(88vw, 940px); height:min(76dvh, 690px);
}
@media (prefers-reduced-motion:reduce) {
  .book-dialog .book-animation-frame {transition:none}
}

/* V30 — simple, responsive closed-book details overlay. */
.book-dialog-content.book-detail-content {
  width:min(92vw,840px);height:min(92dvh,800px);display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;overflow-y:auto;overflow-x:visible;
  padding:18px 18px 36px;scrollbar-width:thin;
}
.book-detail-content .book-dialog-close{position:fixed;top:clamp(12px,3vh,32px);right:clamp(12px,5vw,70px)}
.book-detail-content .book-animation {height:var(--detail-book-size,255px);width:var(--detail-book-size,255px);flex:none;display:block;position:relative;z-index:2;filter:drop-shadow(0 12px 18px rgba(0,0,0,.58));}
.book-detail-content .book-animation-frame,
.book-dialog.is-opening .book-detail-content .book-animation-frame {
  display:block;width:100% !important;height:100% !important;max-width:none;max-height:none;
  object-fit:contain;transition:none !important;
}
.book-feature-panel{
  width:100%;max-width:790px;position:relative;z-index:1;margin-top:-12px;
  border:1px solid rgba(215,177,107,.65);border-radius:15px;
  background:linear-gradient(150deg,rgba(11,43,47,.97),rgba(4,17,23,.98));
  padding:33px clamp(20px,4vw,48px) 27px;
  box-shadow:0 20px 70px rgba(0,0,0,.52),inset 0 0 0 1px rgba(237,208,152,.10),0 0 27px rgba(26,157,168,.08);
  opacity:0;transform:translateY(17px);pointer-events:none;
  transition:opacity 400ms ease,transform 400ms cubic-bezier(.2,.8,.2,1);
  color:#e8eeec;
}
.book-dialog.is-ready .book-feature-panel{opacity:1;transform:translateY(0);pointer-events:auto}
.book-panel-ornament{text-align:center;color:#c9a972;font-size:21px;margin:-20px 0 0}
.book-feature-panel h2{text-align:center;font:500 clamp(25px,3vw,36px)/1.25 Cinzel,Georgia,serif;color:#f2d4a4;margin:3px 0 5px}
.book-panel-subtitle{text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(17px,2.5vw,22px);font-style:italic;color:#78d5d8;margin:0 0 24px}
.book-panel-columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(15px,3vw,34px);border-top:1px solid rgba(202,161,94,.28);padding-top:22px}
.book-panel-columns h3{color:#dfc18a;font:500 18px/1.35 Cinzel,Georgia,serif;margin:0 0 10px}
.book-panel-columns p{font:400 14px/1.7 Inter,system-ui,sans-serif;margin:0}
.book-panel-note{font:italic 12px/1.5 Georgia,serif;color:#9db4b3;text-align:center;margin:25px 0 0}
@media(max-width:600px){.book-detail-content .book-dialog-close{top:9px;right:10px}.book-panel-columns{grid-template-columns:1fr}.book-feature-panel{padding-top:26px}.book-detail-content .book-animation{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.book-feature-panel{transition:none;transform:none}}
/* During flight only the moving bitmap is visible; reveal its identical landing image on handoff. */
.book-dialog:not(.is-ready) .book-detail-content .book-animation{visibility:hidden}


/* V32 — pure book assets, staggered invitation pulses, and all four books open the same detail pattern. */
.section-heading-detail{
  margin:10px auto 0;
  color:#dbe9e7;
  font:500 .86rem/1.45 Inter,system-ui,sans-serif;
  letter-spacing:.01em;
  opacity:.92;
}
.workflow .steps{
  gap:30px 28px;
}
.workflow .steps li{
  min-width:0;
}
.book-trigger{
  all:unset;
  display:flex;
  align-items:flex-start;
  gap:15px;
  width:100%;
  cursor:pointer;
  box-sizing:border-box;
  border-radius:12px;
  position:relative;
}
.book-trigger:focus-visible{outline:2px solid #53dce4;outline-offset:5px}
.book-trigger .step-icon-book{
  display:grid;
  place-items:center;
  flex:none;
  transition:transform .25s ease,filter .25s ease;
}
.book-trigger .step-icon-book img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  will-change:transform,filter;
  animation:bookPulse 12s ease-in-out infinite;
}
.steps li:nth-child(1) .step-icon-book img{animation-delay:0s}
.steps li:nth-child(2) .step-icon-book img{animation-delay:3s}
.steps li:nth-child(3) .step-icon-book img{animation-delay:6s}
.steps li:nth-child(4) .step-icon-book img{animation-delay:9s}
.book-trigger:hover .step-icon-book,
.book-trigger:focus-visible .step-icon-book{
  transform:scale(1.06);
  filter:drop-shadow(0 0 14px rgba(60,222,228,.40));
}
.book-trigger-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding-top:4px}
.book-trigger-title{font-family:Georgia,serif;font-size:1.05rem;color:#efdbb9;font-weight:bold;line-height:1.4}
.book-trigger-desc{font-family:'Cormorant Garamond',Georgia,serif;font-size:1rem;color:#f5fbfb;line-height:1.28;margin-top:5px;font-style:italic;font-weight:500;letter-spacing:.01em;max-width:28ch;text-wrap:balance}
@keyframes bookPulse{
  0%, 6%, 100% {
    transform:scale(1);
    filter:drop-shadow(0 0 0 rgba(60,222,228,0));
  }
  2.4%, 4.5% {
    transform:scale(1.045);
    filter:drop-shadow(0 0 9px rgba(60,222,228,.32)) drop-shadow(0 0 18px rgba(60,222,228,.18));
  }
}
.book-detail-content .book-animation{
  margin-top:8px;
}
.book-feature-panel{
  margin-top:-8px;
}
@media(max-width:790px){
  .workflow .steps{grid-template-columns:repeat(2,1fr);gap:22px 20px}
  .book-trigger-copy{padding-top:2px}
}
@media(max-width:460px){
  .section-heading-detail{font-size:.79rem;max-width:280px}
  .workflow .steps{grid-template-columns:1fr;gap:22px}
  .book-trigger{gap:12px}
  .book-trigger-desc{font-size:.92rem;max-width:24ch}
}
@media(prefers-reduced-motion:reduce){
  .book-trigger .step-icon-book img{animation:none !important}
}

/* V33: final copy replaces all prototype notes. */
.book-panel-note:empty{display:none}

/* V34 — eight illustrated feature books, faster staggered pulse across both rows.
   Restore V31 hover: remove V32/V34 pulse overrides if a hover-only look is wanted again. */
.workflow .steps{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:42px;column-gap:28px;}
.workflow .book-trigger .step-icon-book img{animation:bookPulse8 8s ease-in-out infinite;}
.workflow .steps li:nth-child(1) img{animation-delay:0s}
.workflow .steps li:nth-child(2) img{animation-delay:1s}
.workflow .steps li:nth-child(3) img{animation-delay:2s}
.workflow .steps li:nth-child(4) img{animation-delay:3s}
.workflow .steps li:nth-child(5) img{animation-delay:4s}
.workflow .steps li:nth-child(6) img{animation-delay:5s}
.workflow .steps li:nth-child(7) img{animation-delay:6s}
.workflow .steps li:nth-child(8) img{animation-delay:7s}
@keyframes bookPulse8{
  0%,12.5%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(60,222,228,0));}
  4%,8%{transform:scale(1.045);filter:drop-shadow(0 0 9px rgba(60,222,228,.32)) drop-shadow(0 0 18px rgba(60,222,228,.18));}
}
body.book-dialog-visible .workflow .book-trigger .step-icon-book img{animation-play-state:paused;}
@media(max-width:1399px) and (min-width:791px){.workflow .steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:790px){.workflow .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:25px;column-gap:18px;}}
@media(max-width:460px){.workflow .steps{grid-template-columns:1fr;row-gap:22px;}}
@media(prefers-reduced-motion:reduce){.workflow .book-trigger .step-icon-book img{animation:none !important;}}

/* V35: random, occasionally overlapping glows, never more than four.
   The original V31 hover appearance is preserved (scale 1.09, teal shadow).
   The old fixed-sequence keyframe remains above for rollback reference but is disabled here. */
.workflow .book-trigger .step-icon-book img{animation:none;}
.workflow .book-trigger.is-pulsing .step-icon-book img{
  animation:bookRandomPulse 1.45s ease-in-out 1 both;
}
@keyframes bookRandomPulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(60,222,228,0));}
  44%,60%{transform:scale(1.045);filter:drop-shadow(0 0 10px rgba(60,222,228,.34)) drop-shadow(0 0 19px rgba(60,222,228,.19));}
}
@media(prefers-reduced-motion:reduce){
  .workflow .book-trigger.is-pulsing .step-icon-book img{animation:none !important;}
}

/* V37 — Formats: separate, clearly readable input and output details. */
.book-panel-columns section{min-width:0;overflow-wrap:break-word;}
.book-panel-columns section p + p{margin-top:12px;}
.book-panel-columns section strong{color:#f5e4bf;font-weight:600;}
.book-panel-columns section p{overflow-wrap:anywhere;}

/* V39: multiline editorial detail copy and dense technical values. */
.book-panel-columns p {overflow-wrap:anywhere;word-break:normal;}
.book-panel-columns p + p {margin-top:14px;}


/* V40 — centered feature rows and consistent small-device layouts. */
html,body{max-width:100%;overflow-x:clip;}
.workflow .steps{width:100%;min-width:0;justify-content:center;}
.workflow .steps li{min-width:0;justify-content:center;}
.workflow .book-trigger{width:100%;max-width:320px;min-width:0;}
.workflow .book-trigger-copy{min-width:0;overflow-wrap:break-word;}
/* Two-column layout stays a compact centered group, rather than filling very wide tablet columns. */
@media (min-width:601px) and (max-width:1399px){
 .workflow .steps{grid-template-columns:repeat(2,minmax(0,340px));max-width:760px;margin-inline:auto;column-gap:clamp(18px,4vw,60px);}
}
@media (max-width:600px){
 .workflow .steps{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto;}
 .workflow .steps li{justify-content:center;}
 .workflow .book-trigger{max-width:350px;}
}
/* Landscape phones and tablets should use the compact navigation, not the overflowing desktop bar. */
@media (min-width:791px) and (max-width:1024px){
 .nav{min-height:68px;padding:10px 0 16px;flex-wrap:wrap;}
 .nav-actions{display:none;}
 .menu-toggle{display:block;margin-left:auto;}
 .nav-links{display:none;width:100%;order:3;flex-direction:column;align-items:stretch;gap:0;padding-bottom:12px;font-family:Inter,system-ui,sans-serif;font-size:.95rem;letter-spacing:0;}
 .nav-links.is-open{display:flex;}
 .nav-links a{padding:11px 10px 12px;border-bottom:1px solid rgba(211,176,109,.1)!important;}
 .nav-links a::before,.nav-links a::after,.nav::after,.nav-line{display:none!important;}
 .site-header::before{background:linear-gradient(180deg,rgba(3,11,16,.82),rgba(3,11,16,.15));}
 .hero-content.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}
@media (max-width:1024px){
 .nav-links.is-open{background:rgba(4,17,19,.98);border:1px solid rgba(211,176,109,.2);border-radius:8px;padding:8px;}
}
/* Never let an oversize decoration create horizontal scrolling. */
.site-header,.site-footer,main,.hero,.section,.section-divider{max-width:100%;}

/* V41: A single magic-lantern invitation reveals the screenshot gallery. */
.lantern-section{padding-top:76px;padding-bottom:88px;background:transparent !important}
.lantern-wrap{display:flex;flex-direction:column;align-items:center}
.lantern-wrap .section-heading{margin-bottom:18px}
.lantern-trigger{appearance:none;border:0;background:transparent;color:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;width:min(100%,520px);padding:0 20px 16px;position:relative}
.lantern-visual{width:clamp(225px,32vw,340px);aspect-ratio:1;display:block;position:relative;filter:drop-shadow(0 12px 26px rgba(0,0,0,.6));transition:transform .36s ease,filter .36s ease}
.lantern-visual img{width:100%;height:100%;object-fit:contain;border-radius:15%;mask-image:radial-gradient(ellipse at center,black 54%,transparent 75%)}
.lantern-trigger:hover .lantern-visual,.lantern-trigger:focus-visible .lantern-visual{transform:scale(1.045);filter:drop-shadow(0 0 25px rgba(72,203,208,.31))}
.lantern-invite{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:-12px;position:relative}
.lantern-invite-title{color:#ebd3a7;font:500 clamp(20px,2.4vw,28px)/1.3 Cinzel,Georgia,serif}
.lantern-invite-desc{font:italic 500 clamp(19px,2.6vw,24px)/1.2 'Cormorant Garamond',Georgia,serif;color:#7ed1d4}
.lantern-invite-action{font:500 12px/1.6 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ebd8b8;margin-top:6px}
.lantern-invite-action span{color:#67cbd0}
.lantern-divider-star{color:#d5b780;display:block;text-align:center;font-size:20px}
.gallery-dialog[hidden]{display:none !important}
.gallery-dialog{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:clamp(9px,2.2vw,30px)}
.gallery-scrim{position:absolute;inset:0;background:rgba(1,8,12,.92);backdrop-filter:blur(9px)}
.gallery-shell{position:relative;display:flex;flex-direction:column;gap:12px;align-items:center;width:min(1120px,100%);max-height:calc(100dvh - 22px);overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(220,178,103,.57);border-radius:18px;background:linear-gradient(145deg,rgba(12,38,42,.98),rgba(2,14,19,.99));box-shadow:0 28px 90px #000b,inset 0 0 0 1px #e3bd7724;padding:clamp(16px,2.3vw,30px)}
.gallery-close{position:absolute;right:14px;top:11px;z-index:4;background:#0c2429;color:#f7e9d0;border:1px solid #bb9458;border-radius:50%;width:38px;height:38px;font-size:25px;cursor:pointer}
.gallery-top{text-align:center}.gallery-rune{color:#e5c18a;font-size:19px}.gallery-top h2{font:500 clamp(23px,3vw,35px)/1.25 Cinzel,Georgia,serif;color:#efdbb7;margin:0}.gallery-top p{margin:4px 0 0;color:#7ed2d5;font:italic 500 21px/1.2 'Cormorant Garamond',Georgia,serif}
.gallery-theatre{width:100%;display:grid;grid-template-columns:minmax(135px, 24%) 1fr;gap:8px;align-items:center;min-height:300px;position:relative}
.gallery-lantern-art{position:relative;z-index:2;align-self:center;max-width:260px}.gallery-lantern-art img{width:100%;display:block;mask-image:radial-gradient(ellipse at center,black 48%,transparent 72%)}
.gallery-light{position:absolute;left:16%;width:36%;height:65%;background:linear-gradient(90deg,rgba(245,198,112,.20),rgba(236,205,148,.04));clip-path:polygon(0 44%,100% 0,100% 100%,0 56%);filter:blur(12px);z-index:0;pointer-events:none}
.gallery-screen-frame{min-width:0;border:3px ridge #b6965a;background:#071a1d;padding:clamp(7px,1.2vw,15px);box-shadow:0 0 24px rgba(232,184,101,.13),0 14px 35px #0008;position:relative;z-index:1}
.gallery-screen{aspect-ratio:16/9;background:#091b21;overflow:hidden}
.gallery-window{height:100%;display:flex;flex-direction:column;color:#d9e6e5;font:clamp(7px,1.15vw,13px)/1.4 Inter,sans-serif;border:1px solid #32616a}
.gallery-window-bar{background:#123c44;padding:1.5% 3%;display:flex;justify-content:space-between}.gallery-window-logo{font-family:Cinzel,serif;color:#e2c68c}.gallery-window-content{flex:1;min-height:0;display:flex}.gallery-window-sidebar{width:24%;border-right:1px solid #2a5960;padding:3% 2%;background:#0c252b;display:flex;flex-direction:column;gap:11%;color:#9bcfd1}.gallery-window-main{flex:1;min-width:0;padding:3% 4%}.gallery-window-heading{font:500 clamp(12px,1.6vw,22px)/1.3 Cinzel,serif;color:#ebc98a}.gallery-window-sub{color:#9ab1b6;margin-top:1%}.gallery-window-row{display:flex;align-items:center;gap:4%;margin:4% 0}.gallery-window-cover{width:17%;aspect-ratio:1;background:linear-gradient(145deg,#74532b,#112d39);display:grid;place-items:center;color:#d7be86;font-size:2em;border:1px solid #977845}.gallery-window-lines{display:flex;flex-direction:column;gap:8px;flex:1}.gallery-window-lines i{height:5px;background:linear-gradient(90deg,#47747c,transparent);width:80%}.gallery-window-lines i:nth-child(2){width:60%}.gallery-window-lines i:nth-child(3){width:43%}.gallery-window-list{border:1px solid #2d545a}.gallery-window-list span{display:flex;justify-content:space-between;padding:1.5% 3%;border-bottom:1px solid #27494f}.gallery-window-list span:last-child{border:0}.gallery-window-list b{font-weight:400;color:#80afb2}.gallery-window-footer{border-top:1px solid #325d61;background:#0c2830;color:#7ba6ac;text-align:right;padding:1% 3%}
.gallery-mock-label{font:600 9px/1.4 Inter,sans-serif;color:#b29d78;letter-spacing:.08em;text-align:center;padding-top:8px}
.gallery-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(600px,100%);margin-top:2px}.gallery-arrow{appearance:none;border:1px solid #9d8150;border-radius:50%;background:#123039;color:#f5d7a1;width:43px;height:43px;font-size:28px;flex:0 0 auto;cursor:pointer}.gallery-arrow:hover{background:#1c4e54}.gallery-caption{text-align:center}.gallery-caption h3{font:500 18px/1.2 Cinzel,serif;color:#e7d0a5;margin:0}.gallery-caption p{font:italic 18px/1.25 'Cormorant Garamond',serif;color:#80ced1;margin:4px 0}.gallery-caption span{font:11px Inter,sans-serif;color:#d4c2a0}.gallery-dots{display:flex;gap:11px}.gallery-dots button{background:#42595b;border:1px solid #d6b77a;border-radius:50%;width:10px;height:10px;cursor:pointer}.gallery-dots button.is-active{background:#d7bf8d;box-shadow:0 0 10px #cbac7e7a}
@media(max-width:620px){.lantern-section{padding:45px 0 60px}.gallery-shell{padding:14px 9px}.gallery-theatre{display:flex;min-height:0}.gallery-lantern-art,.gallery-light{display:none}.gallery-screen-frame{width:100%}.gallery-screen{aspect-ratio:16/10}.gallery-caption p{font-size:16px}.gallery-top p{font-size:18px}.gallery-arrow{width:37px;height:37px}.gallery-window{font-size:7px}.gallery-window-heading{font-size:12px}}
@media(prefers-reduced-motion:reduce){.lantern-visual{transition:none}}

/* V42 – Magic Lantern section redesign, exact transparent antique-gold picture frame. */
.lantern-section{padding-top:34px;padding-bottom:73px}
.lantern-wrap .section-heading{margin-bottom:7px}
.lantern-wrap .section-heading .ornament{display:none}
.lantern-wrap .section-heading h2{font-size:clamp(1.75rem,2.8vw,2.5rem)}
.lantern-wrap .section-heading p{font-size:clamp(1.3rem,2.1vw,1.6rem);margin-top:7px}
.lantern-trigger{padding-bottom:3px}
.lantern-visual{width:clamp(245px,33vw,370px)}
.lantern-visual img{mask-image:none;border-radius:0}
.lantern-invite{margin-top:-12px}
.lantern-invite-action{margin-top:0}
.gallery-lantern-art img{mask-image:none}
.gallery-screen-frame{
  width:100%;
  aspect-ratio:3/2;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:12.4% 12.25% 15.9%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  isolation:isolate;
}
.gallery-screen-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../assets/gallery-altgold-frame-v42.webp') center / 100% 100% no-repeat;
  z-index:2;
  pointer-events:none;
}
.gallery-screen{
  width:100%;height:100%;aspect-ratio:auto;
  position:relative;
  z-index:1;
  overflow:hidden;
  background:#0a2227;
  box-shadow:inset 0 0 16px #0009;
}
.gallery-theatre{grid-template-columns:minmax(110px,21%) minmax(0,1fr);gap:0}
.gallery-light{left:13%;width:34%}
@media(max-width:620px){
 .lantern-section{padding-top:24px;padding-bottom:50px}
 .gallery-theatre{display:block}
 .gallery-screen-frame{padding:12.4% 12.25% 15.9%}
 .gallery-screen{aspect-ratio:auto}
}

/* V43 — full-size frame-only screenshot gallery, no outer panel or lantern inside. */
.gallery-dialog{padding:clamp(8px,1.4vw,22px)}
.gallery-shell{
  width:min(1320px,100%);max-height:calc(100dvh - 16px);
  border:0;border-radius:0;background:transparent;box-shadow:none;
  padding:0;gap:7px;overflow-y:auto;overflow-x:hidden;
}
.gallery-close{position:fixed;right:clamp(10px,2.4vw,38px);top:clamp(9px,2.4vh,32px);z-index:6}
.gallery-theatre{width:min(1250px,100%);display:block;min-height:0;margin:0 auto}
.gallery-screen-frame{width:100%;aspect-ratio:3/2;padding:12.4% 12.25% 15.9%;border:0;box-shadow:none;}
.gallery-screen-frame::before{background-image:url('../assets/gallery-altgold-frame-v42.webp')}
.gallery-screen{width:100%;height:100%;aspect-ratio:auto}
.gallery-foot{width:min(480px,100%);margin:0 auto;justify-content:space-between}
.gallery-dots{justify-content:center;margin:0 auto 8px}
.gallery-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lantern-visual img{mask-image:none;border-radius:0}
@media(max-width:620px){
 .gallery-dialog{padding:7px}
 .gallery-shell{padding:0;gap:8px}
 .gallery-theatre{width:100%}
 .gallery-screen-frame{padding:12.4% 12.25% 15.9%;aspect-ratio:3/2}
 .gallery-screen{height:100%;aspect-ratio:auto}
 .gallery-foot{width:min(260px,100%)}
 .gallery-close{width:34px;height:34px;font-size:22px}
}


/* V44 — genuine application screenshots; preserve original proportions and all UI pixels. */
.gallery-screen{display:grid;place-items:center;background:#03090d;}
.gallery-real-screenshot{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;}


/* V45 — minimal screenshot stage, without decorative frame or container. */
.gallery-dialog{padding:clamp(12px,2.5vw,30px)}
.gallery-scrim{background:rgba(1,9,13,.93);backdrop-filter:blur(7px)}
.gallery-shell{width:min(1460px,100%);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:10px 0 16px;gap:10px;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;justify-items:center;align-items:start;border:0;background:transparent;box-shadow:none}
.gallery-projector{width:clamp(104px,14vh,150px);height:clamp(104px,14vh,150px);display:grid;place-items:center;filter:drop-shadow(0 12px 22px rgba(0,0,0,.48));}
.gallery-projector img{width:100%;height:100%;object-fit:contain;display:block}
.gallery-dialog:not(.gallery-landed) .gallery-projector{visibility:hidden}
.gallery-theatre{width:min(1380px,96%);min-height:0;height:100%;display:flex;align-items:center;justify-content:center;margin:0 auto}
.gallery-screen-frame{width:100%;height:100%;min-height:0;aspect-ratio:auto;padding:0!important;display:flex;align-items:center;justify-content:center;border:0!important;background:transparent!important;box-shadow:none!important}
.gallery-screen-frame::before{content:none!important;background:none!important}
.gallery-screen{display:grid;place-items:center;width:100%;height:100%;min-height:0;background:transparent!important;box-shadow:none!important;overflow:visible}
.gallery-real-screenshot{width:auto;height:auto;max-width:100%;max-height:min(64dvh,820px);object-fit:contain;object-position:center;box-shadow:0 15px 48px rgba(0,0,0,.45);border:1px solid rgba(95,157,161,.28);border-radius:7px}
.gallery-foot{width:min(340px,95%);margin:3px auto 0;display:flex;align-items:center;justify-content:space-between}
.gallery-arrow{width:54px;height:54px;display:grid;place-items:center;background:none;border:0;padding:0;border-radius:50%;transition:transform .2s,filter .2s}
.gallery-arrow img{width:54px;height:54px;display:block;object-fit:contain}
.gallery-arrow:hover,.gallery-arrow:focus-visible{background:none;transform:scale(1.085);filter:drop-shadow(0 0 11px rgba(66,206,211,.45))}
.gallery-dots{margin:0 auto 5px;display:flex;gap:14px;justify-content:center;align-items:center}
.gallery-dots button{appearance:none;-webkit-appearance:none;display:block;flex:0 0 auto;width:12px;height:12px;aspect-ratio:1/1;padding:0;border-radius:50%;border:1px solid #d6b77a;background:#42595b;box-sizing:border-box;cursor:pointer}
.gallery-dots button.is-active{background:#d7bf8d;box-shadow:0 0 10px #cbac7e7a}
@media(max-width:620px){
 .gallery-dialog{padding:9px}
 .gallery-shell{height:calc(100dvh - 18px);max-height:calc(100dvh - 18px);gap:8px;padding-top:16px}
 .gallery-projector{width:95px;height:95px}
 .gallery-theatre{width:100%;min-height:0}
 .gallery-real-screenshot{max-height:63dvh;border-radius:3px}
 .gallery-foot{width:min(280px,98%)}
 .gallery-arrow,.gallery-arrow img{width:46px;height:46px}
 .gallery-dots button{width:11px;height:11px}
}
@media (max-height:580px) and (orientation:landscape){
 .gallery-shell{height:calc(100dvh - 10px);max-height:calc(100dvh - 10px);padding:0;gap:3px}
 .gallery-projector{height:60px;width:60px}
 .gallery-real-screenshot{max-height:54dvh}
 .gallery-arrow,.gallery-arrow img{width:39px;height:39px}
 .gallery-dots button{width:10px;height:10px}
}
@media(prefers-reduced-motion:reduce){.gallery-arrow{transition:none}}

/* V46 — subtle frosted-glass strip behind sticky navigation.
   Keeps the scenery faintly visible but softens scrolled text and artwork.
   The existing menu, decorative line, and hover effects remain unchanged. */
.site-header {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(3, 13, 18, .22) !important;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.site-header > .nav {
  position: relative;
  z-index: 1;
}

/* V48: replace navigation wordmark with the user-supplied petrol/gold header branding.
   Preserve the existing nav layout and avoid stretching the new, taller aspect ratio. */
.site-header .brand-logo{width:clamp(184px,15vw,218px);height:auto;max-height:none;object-fit:contain;}
@media(max-width:1090px){.site-header .brand-logo{width:185px;}}
@media(max-width:790px){.site-header .brand-logo{width:170px;}}
@media(max-width:460px){.site-header .brand-logo{width:150px;}}


/* V49 — scroll only inside the framed feature panel, not alongside the overlay. */
.book-dialog-content.book-detail-content {
  overflow: hidden;
  height: min(92dvh, 800px);
  min-height: 0;
  padding-bottom: 12px;
}
.book-detail-content .book-feature-panel {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(100% - var(--detail-book-size, 255px) + 10px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #b99a63 #102c31;
  -webkit-overflow-scrolling: touch;
}
.book-detail-content .book-feature-panel::-webkit-scrollbar {
  width: 9px;
}
.book-detail-content .book-feature-panel::-webkit-scrollbar-track {
  background: #102c31;
  border-radius: 999px;
  margin-block: 14px;
}
.book-detail-content .book-feature-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d0b47d, #95764b);
  border: 2px solid #102c31;
  border-radius: 999px;
}
.book-detail-content .book-feature-panel::-webkit-scrollbar-thumb:hover {
  background: #e0c794;
}
@media (pointer: coarse) {
  .book-detail-content .book-feature-panel {
    scrollbar-width: auto;
    scrollbar-gutter: auto;
  }
  .book-detail-content .book-feature-panel::-webkit-scrollbar {
    width: 4px;
  }
  .book-detail-content .book-feature-panel::-webkit-scrollbar-track {
    background: transparent;
  }
  .book-detail-content .book-feature-panel::-webkit-scrollbar-thumb {
    background: rgba(151, 191, 188, .55);
    border: none;
  }
}


/* V50 — keep the scrollbar and thumb entirely inside the gold rounded corners.
   The outer panel is the decorative frame; only its inset content area scrolls. */
.book-detail-content .book-feature-panel {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:10px 4px 10px 0;
  scrollbar-width:auto;
  scrollbar-gutter:auto;
}
.book-detail-content .book-panel-scroll {
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:23px clamp(20px,4vw,48px) 17px;
  scrollbar-width:thin;
  scrollbar-color:#b99a63 #102c31;
  -webkit-overflow-scrolling:touch;
}
.book-detail-content .book-panel-scroll::-webkit-scrollbar {width:9px}
.book-detail-content .book-panel-scroll::-webkit-scrollbar-button {display:none;width:0;height:0}
.book-detail-content .book-panel-scroll::-webkit-scrollbar-track {background:#102c31;border-radius:999px}
.book-detail-content .book-panel-scroll::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#d0b47d,#95764b);
  border:2px solid #102c31;
  border-radius:999px;
}
.book-detail-content .book-panel-scroll::-webkit-scrollbar-thumb:hover {background:#e0c794}
@media(pointer:coarse){
  .book-detail-content .book-panel-scroll{scrollbar-width:auto}
  .book-detail-content .book-panel-scroll::-webkit-scrollbar{width:4px}
  .book-detail-content .book-panel-scroll::-webkit-scrollbar-track{background:transparent}
  .book-detail-content .book-panel-scroll::-webkit-scrollbar-thumb{background:rgba(151,191,188,.55);border:0}
}
@media(max-width:600px){
  .book-detail-content .book-panel-scroll{padding-top:16px}
}


/* V51 — three-item Magic section */
.lantern-wrap-multi{display:block}
.lantern-grid{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,42px);align-items:end;justify-items:center}
.lantern-card-copy{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 12px}
.lantern-trigger{width:min(100%,340px);padding:0 8px 10px;gap:0}
.lantern-visual{width:min(100%,310px);height:clamp(220px,28vw,330px);display:flex;align-items:center;justify-content:center;margin:0 auto}
.lantern-visual img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center;mask-image:none!important;border-radius:0!important}
.lantern-invite{margin-top:6px}
.lantern-invite-title{color:#ebd3a7;font:500 clamp(26px,2.6vw,34px)/1.18 Cinzel,Georgia,serif;text-align:center}
.lantern-invite-desc{font:italic 500 clamp(18px,1.9vw,25px)/1.2 'Cormorant Garamond',Georgia,serif;color:#7ed1d4;text-align:center}
@media (max-width: 1024px){
  .lantern-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
}
@media (max-width: 640px){
  .lantern-grid{grid-template-columns:1fr;gap:30px}
  .lantern-trigger{max-width:360px}
  .lantern-visual{height:auto;min-height:180px;max-height:300px}
  .lantern-card-copy{margin-bottom:8px}
  .lantern-invite-title{font-size:clamp(24px,8vw,31px)}
  .lantern-invite-desc{font-size:clamp(18px,6vw,22px)}
}


/* V52 — refined keyboard focus treatment (thin petrol/gold transition).
   The outline stays visible without the old strong 2px cyan rectangle. */
a:focus-visible,button:focus-visible{outline:1px solid rgba(64,179,188,.86);outline-offset:3px}
.nav-links a:focus-visible{
  outline:1px solid rgba(65,169,176,.83);
  outline-offset:2px;
  border-radius:2px;
  box-shadow:1px 0 0 rgba(202,164,99,.31),-1px 0 0 rgba(13,89,103,.36),0 1px 3px rgba(7,40,49,.28);
}


/* V53 — stable one-line headings and centered orphan on two-column layout. */
.lantern-grid .lantern-card-copy{width:100%;min-width:0}
.lantern-grid .lantern-invite-title{font-size:clamp(18px,1.75vw,25px);white-space:nowrap;letter-spacing:-.015em}
@media (min-width:641px) and (max-width:1024px){
  .lantern-grid>.lantern-trigger:last-child{grid-column:1/-1;justify-self:center}
}
@media (max-width:640px){
  .lantern-grid .lantern-invite-title{font-size:clamp(20px,5.8vw,26px)}
}

@media (max-width:640px){
  .lantern-grid>.lantern-trigger:first-child .lantern-visual{width:min(100%,320px);height:auto;min-height:190px;max-height:320px}
}


/* V57 — preserve the nav Download CTA in markup, but hide it for now. */
.site-header .nav-download{display:none!important}

/* V57 — refined compact navigation; revert by removing this block. */
@media (max-width:1024px){
  .nav-links.is-open{
    padding:9px 10px 12px;
    gap:3px;
    border:1px solid rgba(184,151,94,.42);
    border-radius:9px;
    background:
      radial-gradient(ellipse at 85% 10%,rgba(34,111,117,.16),transparent 65%),
      linear-gradient(145deg,rgba(12,36,40,.98),rgba(3,15,19,.98) 80%);
    box-shadow:inset 0 1px 0 rgba(239,207,143,.1),0 12px 32px rgba(0,0,0,.22);
  }
  .nav-links.is-open a{
    padding:11px 15px 12px;
    border:0!important;
    border-radius:5px;
    color:#e8d5ae;
    font-family:Cinzel,Georgia,serif;
    font-size:clamp(.92rem,2.4vw,1.04rem);
    font-weight:500;
    letter-spacing:.025em;
    line-height:1.45;
    transition:color .2s ease,background .2s ease;
  }
  .nav-links.is-open a:hover,.nav-links.is-open a.active{
    color:#f5e5c4;
    background:linear-gradient(90deg,rgba(19,93,102,.3),rgba(19,93,102,0) 85%);
  }
  .nav-links.is-open a:focus-visible{
    outline:1px solid rgba(91,204,205,.85);
    outline-offset:-1px;
    box-shadow:inset 2px 0 0 rgba(215,181,119,.65);
  }
}


/* V61 — screenshot gallery: use the available height on short landscape phones.
   Only the gallery responds: features, header, and portrait layout retain V60 styling. */
@media (orientation:landscape) and (max-height:580px) and (max-width:1024px) {
  .gallery-dialog{padding:4px 8px!important}
  .gallery-shell{
    width:100%; height:calc(100dvh - 8px);max-height:calc(100dvh - 8px);
    padding:0 0 2px;gap:2px;
    grid-template-rows:34px minmax(0,1fr) 38px 13px;
  }
  .gallery-projector{height:32px;width:40px;align-self:center}
  .gallery-theatre{width:100%;min-height:0;max-height:100%;align-items:center}
  .gallery-screen-frame,.gallery-screen{min-height:0;height:100%;width:100%}
  .gallery-real-screenshot{max-height:100%;max-width:100%;object-fit:contain}
  .gallery-foot{height:38px;margin:0;width:min(330px,75%)}
  .gallery-arrow,.gallery-arrow img{width:38px;height:38px}
  .gallery-dots{margin:0;min-height:12px}
  .gallery-close{top:4px;right:5px}
}


/* V62 — desktop navigation stays visible on tablets down to 901 CSS px.
   Limited to the header; page/content breakpoints are unchanged. */
@media (min-width:901px) and (max-width:1024px){
  .site-header .nav{min-height:68px;flex-wrap:nowrap;gap:12px;padding:8px 0 16px;justify-content:space-between}
  .site-header .brand{flex:0 0 auto}
  .site-header .brand-logo{width:clamp(146px,16vw,164px);max-height:none}
  .site-header .menu-toggle{display:none}
  .site-header .nav-links,
  .site-header .nav-links.is-open{display:flex;flex:0 1 auto;width:auto;order:initial;flex-direction:row;align-items:center;justify-content:center;gap:clamp(9px,1.25vw,14px);padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;font-family:Cinzel,Georgia,serif;font-size:clamp(.73rem,1.3vw,.83rem);letter-spacing:0}
  .site-header .nav-links a,
  .site-header .nav-links.is-open a{display:inline-flex;align-items:center;padding:12px 0 13px;line-height:1.35;white-space:nowrap;border:0!important;background:none;color:#e9e4d9;font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:0}
  .site-header .nav-links a.active span,
  .site-header .nav-links.is-open a.active span{color:#fffdfa}
  .site-header .nav-links a::before,
  .site-header .nav-links a::after{display:none!important}
  .site-header .nav-actions{display:flex;flex:0 0 auto;gap:6px;font-size:.78rem}
  .site-header .github-link{gap:6px;white-space:nowrap}
  .site-header .github-icon{width:17px;height:17px}
}

/* V63 — correct clipped screenshot gallery on short landscape screens.
   Explicit rows prevent hidden heading / close button from creating implicit
   grid rows and pushing the navigation below the viewport. */
@media (orientation: landscape) and (max-height: 580px) and (max-width: 1024px) {
  .gallery-dialog {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    align-items: safe center;
    padding: 4px 8px !important;
  }
  .gallery-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 34px minmax(0, 1fr) 38px 14px;
    height: calc(100dvh - 8px);
    max-height: none;
    min-height: 0;
    width: 100%;
    padding: 0 0 2px;
    gap: 2px;
    overflow: visible;
  }
  .gallery-shell > .gallery-sr-only,
  .gallery-shell > .gallery-close {
    position: absolute !important;
    grid-area: auto !important;
  }
  .gallery-projector { grid-column: 1; grid-row: 1; }
  .gallery-theatre {
    grid-column: 1; grid-row: 2;
    width: 100%; height: 100%; min-height: 0;
    overflow: hidden;
  }
  .gallery-screen-frame,
  .gallery-screen { width: 100%; height: 100%; min-height: 0; }
  .gallery-real-screenshot {
    display: block;
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
  }
  .gallery-foot {
    grid-column: 1; grid-row: 3;
    align-self: center;
    width: min(330px, 75%);
    height: 38px;
    margin: 0;
  }
  .gallery-dots {
    grid-column: 1; grid-row: 4;
    align-self: center;
    margin: 0;
    min-height: 12px;
  }
}

/* V64: Shadow Lantern and Antique Projector use the existing scrollable feature panel. */
.lantern-extra-heading{margin-top:22px!important;padding-top:4px}
.book-dialog.is-lantern-detail .book-animation{filter:drop-shadow(0 12px 18px rgba(0,0,0,.58));}
/* In short mobile landscape, keep the entire screenshot inside the allotted viewport row.
   Height/width:100% with object-fit:contain avoids its intrinsic pixel size
   determining the grid min-content width and forcing a vertical crop. */
@media (orientation: landscape) and (max-height:580px) and (max-width:1024px){
  .gallery-dialog {align-items:center;justify-content:center;overflow:auto;}
  .gallery-shell {box-sizing:border-box;grid-template-rows:32px minmax(0,1fr) 38px 14px;max-height:calc(100dvh - 8px);}
  .gallery-theatre,.gallery-screen-frame,.gallery-screen{box-sizing:border-box;min-width:0;min-height:0;overflow:hidden;max-width:100%;max-height:100%;}
  .gallery-screen{display:flex;align-items:center;justify-content:center;}
  .gallery-real-screenshot{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;border:0;box-shadow:none;}
}

/* V65: the Magic Lantern remains above the screenshot, including when they
   visually overlap. Pure stacking/paint change; no gallery sizing changes. */
.gallery-shell > .gallery-projector{
  position:relative;
  z-index:3;
  transform:translateY(5px);
  pointer-events:none;
}
.gallery-shell > .gallery-theatre{
  position:relative;
  z-index:1;
}


/* V66 — Magic/Download divider + expandable language list */
.lantern-section{border-bottom:0!important}
.magic-download-divider{position:relative;width:min(1240px,calc(100% - 32px));height:clamp(34px,5vw,66px);margin:-24px auto -22px;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.magic-download-divider img{display:block;width:100%;height:100%;object-fit:contain}
.final-section{border-top:0!important}
.trust-languages{position:relative;z-index:6}
.language-trigger{appearance:none;display:inline-flex;align-items:center;gap:7px;padding:2px 4px;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
.language-trigger:hover,.language-trigger[aria-expanded="true"]{color:#f6e4ba;text-shadow:0 0 8px rgba(89,207,210,.4)}
.language-trigger:focus-visible{outline:1px solid #6acbd0;outline-offset:3px}
.language-icon{display:inline-grid;place-items:center;position:relative;min-width:23px;height:23px;color:#7fd0cf;font:700 14px Georgia,serif;border:1px solid rgba(95,203,207,.55);border-radius:50%}
.language-icon span{position:absolute;right:-3px;bottom:-4px;background:#071c21;font-size:10px;color:#e8ca8f}
.language-caret{font-size:15px;color:#d7bb82;transition:transform .2s}
.language-trigger[aria-expanded="true"] .language-caret{transform:rotate(180deg)}
.language-popover[hidden]{display:none!important}
.language-popover{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);z-index:100;width:min(360px,calc(100vw - 34px));max-height:min(52dvh,320px);overflow-y:auto;padding:16px 17px;background:linear-gradient(155deg,#0d3035,#06171c);border:1px solid rgba(215,183,121,.7);border-radius:10px;box-shadow:0 14px 35px #000b;color:#e4e6db;white-space:normal;text-align:left;font:13px/1.7 Inter,Arial,sans-serif}
.language-popover-heading{display:block;font:500 18px Cinzel,Georgia,serif;color:#f0d6a5;margin-bottom:7px}
.language-popover-list{display:block}
.language-popover-note{display:block;margin-top:9px;color:#8db6b4;font-size:11px;line-height:1.5}
@media(max-width:600px){.trust-languages .language-popover{left:0;transform:none}.magic-download-divider{margin:-18px auto -14px}}

/* V67 — larger, fully interactive hero trust items */
.trust-v67{overflow:visible;gap:clamp(13px,2vw,27px)}
.trust-v67 .trust-info{position:relative;z-index:8;white-space:normal}
.trust-v67 .trust-info:has(.trust-popover:not([hidden])){z-index:15}
.trust-trigger{display:inline-flex;align-items:center;gap:9px;padding:3px 2px;background:none;border:0;border-radius:5px;color:#d6dfdb;font:inherit;cursor:pointer;white-space:nowrap;transition:color .18s ease}
.trust-trigger:hover,.trust-trigger[aria-expanded="true"]{color:#f3dfb4}
.trust-trigger:focus-visible{outline:1px solid #7ccfd1;outline-offset:3px}
.trust-v67 .trust-trigger img{width:clamp(27px,2.05vw,33px);height:clamp(27px,2.05vw,33px);object-fit:contain;flex:none}
.trust-popover[hidden]{display:none!important}
.trust-popover{position:absolute;top:calc(100% + 11px);left:0;width:min(340px,calc(100vw - 38px));max-height:min(56dvh,430px);overflow:auto;overscroll-behavior:contain;z-index:60;padding:16px 18px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(145deg,#0c2e33,#05171c);border:1px solid rgba(215,183,121,.7);border-radius:10px;box-shadow:0 14px 34px #000b;text-align:left;color:#dce9e5;font:13px/1.6 Inter,Arial,sans-serif}
.trust-popover strong{font:500 18px Cinzel,Georgia,serif;color:#edcf9c}
.trust-popover small{color:#85c9c7;font-size:11px}
.trust-language-popover{width:min(385px,calc(100vw - 38px));left:50%;transform:translateX(-50%)}
.language-list-v67{margin:2px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:2px}
.language-list-v67 li{display:flex;justify-content:space-between;gap:12px;padding:2px 0;border-bottom:1px solid rgba(217,189,132,.1)}
.language-list-v67 code{color:#82d0d0;font:11px/1.7 monospace;white-space:nowrap}
@media(max-width:600px){.trust-v67{gap:8px 13px}.trust-v67 .trust-trigger img{width:28px;height:28px}.trust-popover,.trust-language-popover{position:fixed;left:17px;right:17px;top:auto;transform:none;width:auto;max-height:55dvh}}

/* V68: portal-based hero information popovers; always above subsequent sections. */
body > .trust-popover.trust-floating-v68{position:fixed!important;z-index:2200!important;right:auto!important;bottom:auto!important;transform:none!important;width:min(415px,calc(100vw - 28px))!important;max-height:none!important;overflow:visible!important;display:block!important;margin:0!important;padding:15px 18px!important;box-sizing:border-box;white-space:normal;filter:drop-shadow(0 14px 26px rgba(0,0,0,.46))}
body > .trust-popover.trust-floating-v68 strong{display:block;margin-bottom:8px}
body > .trust-popover.trust-floating-v68 small{display:block;margin-top:9px}
body > .trust-popover.trust-floating-v68 .language-flow-v68{margin:0;font-size:13px;line-height:1.75;color:#e2e9e3}
body > .trust-popover.trust-floating-v68 .language-flow-v68 span{color:#d0a967;margin:0 2px}
@media(max-width:600px){body > .trust-popover.trust-floating-v68{padding:13px 15px!important}}

/* V70: the portaled popovers must honor the hidden attribute despite their display:block style. */
body > .trust-popover.trust-floating-v68[hidden]{display:none!important}

/* V71 — modest 15% enlargement of all three hero trust icons */
.trust-v67 .trust-trigger img{width:clamp(31px,2.36vw,38px);height:clamp(31px,2.36vw,38px)}
@media(max-width:600px){.trust-v67 .trust-trigger img{width:32px;height:32px}}

/* V72 — layered gramophone compatibility guide. */
#gramophone-dialog { z-index: 1100; }
.gramophone-guide-trigger {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:min(100%,230px);margin:28px auto 8px;padding:8px 3px;
  background:transparent;border:0;color:#7cd3d7;cursor:pointer;
}
.gramophone-guide-trigger img {
  width:min(100%,160px);height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
  transition:transform .3s ease,filter .3s ease;
}
.gramophone-guide-trigger span {
  display:block;text-align:center;margin-top:10px;
  color:#8ad9d7;font:italic clamp(17px,2vw,21px)/1.25 'Cormorant Garamond',Georgia,serif;
}
.gramophone-guide-trigger:hover img,
.gramophone-guide-trigger:focus-visible img {
  transform:scale(1.07);
  filter:drop-shadow(0 0 14px rgba(54,209,212,.5));
}
.gramophone-guide-trigger:focus-visible {outline:1px solid #69cdcf;outline-offset:3px;border-radius:8px;}
@media(prefers-reduced-motion:reduce){
 .gramophone-guide-trigger img{transition:none;}
}

/* V73: Player Compatibility Guide styles */
#gramophone-dialog .book-panel-columns section > h3:not(:first-child) {margin-top: 24px;}
#gramophone-dialog .player-guide-platforms {
  color:#77cdd0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(17px,1.7vw,20px);
  font-style:italic;
  line-height:1.28;
  margin:5px 0 11px;
}
#gramophone-dialog .player-guide-notice {
  margin:20px auto 3px;
  max-width:900px;
  padding:17px 22px;
  border-top:1px solid rgba(198,159,91,.45);
  color:#e2e9e7;
  text-align:left;
}
#gramophone-dialog .player-guide-notice h3 {
  margin:0 0 10px;
  color:#e5c18a;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(20px,2vw,24px);
  font-variant:small-caps;
}
#gramophone-dialog .player-guide-notice p {margin:0 0 12px;line-height:1.52;}

/* V74 — four balanced Magic devices; two-column tablet, single-column phones */
@media (min-width:1025px) {
 .lantern-grid {grid-template-columns:repeat(4,minmax(0,1fr));width:min(1370px,100%);gap:clamp(8px,1.3vw,22px);align-items:start;}
 .lantern-grid .lantern-trigger {width:100%;padding-inline:2px;}
 .lantern-grid .lantern-visual {width:min(100%,255px);height:clamp(180px,20vw,265px);}
 .lantern-grid .lantern-invite-title {font-size:clamp(17px,1.3vw,23px);white-space:nowrap;}
 .lantern-grid>.lantern-trigger:first-child .lantern-visual {width:min(100%,255px);height:clamp(180px,20vw,265px);min-height:0;max-height:none;}
}
@media (min-width:701px) and (max-width:1024px) {
 .lantern-grid {grid-template-columns:repeat(2,minmax(0,1fr));max-width:780px;}
 .lantern-grid>.lantern-trigger:last-child {grid-column:auto;justify-self:center;}
}
@media(max-width:700px) {.lantern-grid {grid-template-columns:1fr;} .lantern-grid>.lantern-trigger:last-child {grid-column:auto;}}
/* Reuse compatibility-guide typographic styles on its new top-level panel */
#book-dialog .player-guide-platforms{color:#77cdd0;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(17px,1.7vw,20px);font-style:italic;line-height:1.28;margin:5px 0 11px;}
#book-dialog .book-panel-columns section>h3:not(:first-child){margin-top:24px;}
#book-dialog .player-guide-notice{margin:20px auto 3px;max-width:900px;padding:17px 20px;border-top:1px solid rgba(198,159,91,.45);color:#e2e9e7;text-align:left;}
#book-dialog .player-guide-notice h3{margin:0 0 10px;color:#e5c18a;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(20px,2vw,24px);font-variant:small-caps;}
#book-dialog .player-guide-notice p{margin:0 0 12px;line-height:1.52;}
#book-dialog .book-panel-note:has(.player-guide-notice){font:inherit;text-align:left;}
#book-dialog .book-panel-note .gramophone-guide-trigger{margin:22px auto 8px;}

/* V76 — align the actions of the two final cards on one visual line. */
@media (min-width:791px) {
  .bottom-grid > .panel {display:flex;flex-direction:column;}
  .bottom-grid > .panel > .panel-buttons {margin-top:23px;}
}

/* V77 — accessible imprint in footer. */
.footer-imprint-trigger{display:inline-flex;gap:7px;align-items:center;justify-content:flex-start;padding:0;background:transparent;border:0;color:#95acae;font:inherit;cursor:pointer;line-height:1.5}
.footer-imprint-trigger:hover,.footer-imprint-trigger:focus-visible{color:#e6d0a3}
.footer-star-wrap{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;transition:transform .25s,filter .25s}
.footer-star-wrap img{width:100%;height:100%;object-fit:contain}
.footer-imprint-trigger:hover .footer-star-wrap{transform:scale(1.17);filter:drop-shadow(0 0 5px #3fc8c9)}
.book-dialog.is-imprint-detail .book-animation{margin-bottom:-7px}
.book-dialog.is-imprint-detail .book-animation-frame{object-fit:contain}
.book-dialog.is-imprint-detail .imprint-address{white-space:pre-line}
.book-dialog.is-imprint-detail .book-panel-columns a{color:#84d5d9;text-decoration:underline;text-decoration-color:rgba(132,213,217,.5);text-underline-offset:3px;overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.footer-star-wrap{transition:none}}


/* V79 — Swiss cross accent for the Bärndütsch note in the language popover. */
body > .trust-popover.trust-floating-v68 .swiss-cross-inline{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:6px;position:relative;top:-1px}
body > .trust-popover.trust-floating-v68 .swiss-cross-inline img{display:block;width:14px;height:14px;object-fit:contain;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}

/* V82 — small optical adjustments to device art only; preserve panel geometry. */
#book-dialog[data-detail-trigger="open-shadow-lantern"] .book-animation {transform:translateY(2px);}
#book-dialog[data-detail-trigger="open-antique-projector"] .book-animation {transform:translateY(5px);}
#book-dialog[data-detail-trigger="open-shadow-projector"] .book-animation {transform:translateY(9px);}

/* V83 — discreet deep link within player compatibility details. */
.player-samples-link{display:inline-block;margin:13px 0 8px;color:#8adbd8;text-decoration:underline;text-decoration-color:rgba(138,219,216,.65);text-underline-offset:4px;}
.player-samples-link:hover,.player-samples-link:focus-visible{color:#d4f7f3;}

/* V85: Download Samples — compact two-column sample catalogue. */
#gramophone-dialog .sample-byline{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:18px;color:#82d2d7;line-height:1.4}
#gramophone-dialog .sample-placeholder{color:#91aaa9;font-style:italic}
#gramophone-dialog .sample-details-list{margin:12px 0 16px;padding:0;font:400 13px/1.65 Inter,system-ui,sans-serif}
#gramophone-dialog .sample-details-list>div{display:flex;gap:5px;align-items:baseline;flex-wrap:wrap}
#gramophone-dialog .sample-details-list dt{font-weight:700;color:#e7d0a2}
#gramophone-dialog .sample-details-list dd{margin:0;color:#d7e4e3}
#gramophone-dialog .sample-download-actions{display:flex;flex-direction:column;gap:8px;margin:18px 0}
#gramophone-dialog .sample-download-pending{display:block;width:fit-content;max-width:100%;padding:8px 12px;border:1px solid rgba(205,166,102,.46);border-radius:7px;color:#e9d3ac;font:600 12px/1.4 Inter,system-ui,sans-serif;opacity:.78}
#gramophone-dialog .sample-disclaimer{font-style:italic;font-size:12px;color:#b0c1c0}

/* V88 — active sample downloads; consistent with the existing gold controls. */
#gramophone-dialog .sample-download-link{display:block;width:fit-content;max-width:100%;padding:8px 12px;border:1px solid rgba(205,166,102,.58);border-radius:7px;color:#efdaad;font:600 12px/1.4 Inter,system-ui,sans-serif;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}
#gramophone-dialog .sample-download-link:hover,#gramophone-dialog .sample-download-link:focus-visible{background:rgba(15,112,117,.23);border-color:#6bd2d3;color:#fff3d6;text-decoration:underline;text-underline-offset:3px}

/* V89 — small contextual sample-file buttons inside three feature books. */
.book-panel-columns .book-sample-shortcut {
  display:inline-flex;align-items:center;justify-content:center;
  max-width:100%;margin:17px 0 5px;padding:9px 14px;
  border:1px solid rgba(205,170,104,.78);border-radius:7px;
  background:linear-gradient(145deg,rgba(21,65,67,.77),rgba(5,26,31,.94));
  color:#e9d1a4;font:600 12px/1.35 Inter,Arial,sans-serif;
  letter-spacing:.01em;text-decoration:none;text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,.2);
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.book-panel-columns .book-sample-shortcut:hover {
  border-color:#a5dddd;color:#fff4d9;
  background:linear-gradient(145deg,rgba(24,87,91,.92),rgba(9,40,46,.98));
}
.book-panel-columns .book-sample-shortcut:focus-visible {outline:1px solid #7cd5d5;outline-offset:3px;}