:root {
  --paper:#f3f2ed; --ink:#171717; --muted:#67645f; --line:#1b1b1b25;
  --ocean:#dbeaf0; --yellow:#f7ff72; --lilac:#c59af4; --purple:#71478f;
  --display:'Familjen Grotesk',Persona,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --headline:clamp(32px,min(2.95vw,5.4svh),56px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.5 Persona,PersonaFigures,PersonaSymbols,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
body{isolation:isolate}#main{position:relative;z-index:2;pointer-events:none}
#main :is(a,button,input,select,textarea),#demo-row{pointer-events:auto}
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; border:0; -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--purple); outline-offset:5px; }
button:disabled { opacity:.4; cursor:default; }
img,video { display:block; max-width:100%; }
[hidden] { display:none!important; }
em { font-style:normal; }
.brand { font:700 24px/1 PersonaWordmark,Persona,sans-serif; letter-spacing:-.015em; }
.screen { height:100svh; position:relative; isolation:isolate; overflow:clip; }
.skip { position:fixed; top:10px; left:16px; z-index:100; background:var(--yellow); padding:10px 15px; transform:translateY(-200%); }
.skip:focus { transform:none; }
.eyebrow { font:8px/1.5 'Geist Mono',monospace; letter-spacing:.07em; margin:0; text-transform:uppercase; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Screen one: typography and the whole world. No device or product artwork. */
.hero { padding:112px 4.2vw 65px; }
.header { position:absolute; inset:0 0 auto; z-index:8; height:88px; padding:0 4.2vw; display:flex; align-items:center; justify-content:space-between; gap:25px; background:linear-gradient(#f3f2edf5,#f3f2edcc 70%,#f3f2ed00); }
.header nav { display:flex; align-items:center; gap:30px; }
.app-nav-link { font:10px 'Geist Mono',monospace; text-transform:uppercase; }
.store-badges { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.store-badges img { height:37px; width:auto; transition:transform .4s var(--ease); }
.store-badges a:hover img { transform:translateY(-2px); }
.world-view { position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ocean); pointer-events:none; }
.world-view canvas { position:absolute; inset:0; width:100%; height:100%; opacity:var(--map-opacity,1); }
.world-fallback { position:absolute; inset:0; opacity:var(--map-opacity,1); background:url('data/world-fallback.svg') center/contain no-repeat,var(--ocean) url('data/world-base.svg') center/contain no-repeat; }
/* The drawn map stands in until the live one is built, then the two cross over. */
.has-world .world-fallback { animation:fallback-out .5s var(--ease) forwards; }
.has-world #world-map { animation:map-in .5s var(--ease); }
@keyframes fallback-out { to { opacity:0; visibility:hidden; } }
@keyframes map-in { from { opacity:0; } }
.world-wash { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#f3f2edb8 0%,#f3f2ed66 26%,#f3f2ed12 48%,transparent 67%); }
.world-dissolve{position:absolute;inset:0;background:var(--paper);opacity:var(--world-blend,0);pointer-events:none}
.editorial-grid { position:absolute; inset:0; z-index:-1; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 calc(8.333% - 1px),#17171706 calc(8.333% - 1px) 8.333%); }
.hero-content { position:relative; z-index:3; height:100%; display:flex; align-items:center; }
.hero-copy { width:min(53vw,760px); }
/* The app's opening headline, set the same way: Persona Bold in sentence case, one size throughout,
   34 pt on a 393 pt phone. The verse sits quiet in grey and its rhyme word is inked and marked. */
#alchemy { pointer-events:auto; width:max-content; max-width:100%; margin:0 0 clamp(16px,2.4svh,26px); font:700 var(--headline)/1.2 Persona,PersonaFigures,PersonaSymbols,sans-serif; letter-spacing:-.0176em; color:var(--ink); }
#alchemy .alc__verse { color:#74746c; white-space:nowrap; }
#alchemy .alc__rhyme { color:var(--ink); }
.hero-description { max-width:36ch; font-size:15px; line-height:1.4; letter-spacing:-.01em; word-spacing:.1em; margin:0; }
.hero-note { font-size:11px; margin:12px 0 0; color:#4c4946; word-spacing:.08em; }
.map-annotations { position:fixed; inset:0; z-index:2; pointer-events:none; opacity:var(--map-label-opacity,1); }
.map-label { position:absolute; padding:10px 13px; border:1px solid #17171735; box-shadow:3px 4px 0 #1717170c; font:7px/1.3 'Geist Mono',monospace; letter-spacing:.03em; }
.map-label-one { left:67%; top:30%; background:var(--yellow); transform:rotate(-4deg); }
.map-label-one i { display:inline-block; height:5px; width:5px; background:var(--ink); margin-right:7px; }
.map-label-two { left:61%; bottom:18%; background:var(--lilac); transform:rotate(4deg); font-size:9px; }
.hero-floor { position:absolute; bottom:23px; left:4.2vw; right:215px; z-index:6; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.world-controls { display:flex; align-items:center; gap:20px; padding:6px 12px; background:#f3f2eddd; border:1px solid var(--line); backdrop-filter:blur(10px); }
.world-controls button { background:transparent; padding:3px 0; font:7px 'Geist Mono',monospace; }
.world-controls button>span { font-size:14px; vertical-align:middle; margin-right:5px; }
.next-screen { font:7px 'Geist Mono',monospace; display:flex; align-items:center; gap:22px; padding:7px 11px; background:#f3f2edd9; }
.next-screen>span { font-size:18px; }

/* The existing continuous factory-to-world opening stays in the same first screen. */
.factory-intro { position:absolute; inset:0; z-index:1; overflow:hidden; background:var(--paper); transform-origin:50% 50%; will-change:transform,opacity; backface-visibility:hidden; }
.factory-intro>video { width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; }





/* While the page loads there is only the world and the loader. Everything else arrives with the landing. */
:is(.intro-pending,.intro-hold) :is(.header,.hero-content,.hero-floor,.fixed-download,.world-cursor,.map-look) { visibility:hidden; }
:is(.intro-pending,.intro-hold) .world-wash { opacity:0; }
.intro-pending .map-annotations { visibility:hidden; }
.intro-pending #factory-intro[hidden] { display:block!important; }
.intro-active .map-annotations { opacity:0; }
#skip-intro { position:absolute; left:50%; bottom:clamp(14px,3svh,26px); z-index:4; translate:-50% 0; padding:7px 12px; background:transparent; font:500 10px/1 'Geist Mono',monospace; letter-spacing:.07em; text-transform:uppercase; color:#17171799; animation:skip-in .4s 1.9s both; }
#skip-intro:hover { color:var(--ink); }
@keyframes skip-in { from { opacity:0; visibility:hidden; } }

/* Screen two is one row of stories. Each device plays its own screen sequence. */
.experience { padding:35px 4.2vw 66px; background:#f3f2edf2; border-top:0; }
.world-linked .experience{background:transparent}
.experience:before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#f3f2ed00,#f3f2ed33 35%,#f3f2ed88);opacity:var(--world-blend,0)}
.handoff-threads{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none}
.handoff-threads path{fill:none;stroke:#9275a0;stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:var(--thread-offset,1);opacity:var(--thread-opacity,0);vector-effect:non-scaling-stroke}
.experience-heading { display:flex; align-items:flex-end; justify-content:flex-end; gap:24px; padding-right:168px; }
h2 { font:600 clamp(40px,4.2vw,65px)/.96 var(--display); letter-spacing:-.055em; margin:0; }
h2 em { background:var(--lilac); padding:0 .06em .04em; }
.demo-controls { display:flex; gap:20px; align-items:center; padding-bottom:5px; white-space:nowrap; }
.demo-controls button { background:transparent; border-bottom:1px solid #17171755; padding:6px 0; font:9px Persona,sans-serif; }
.demo-controls button>span { margin-right:6px; }
.demo-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; padding:0 168px 0 0; margin-top:30px; perspective:1400px; }
.demo-card { min-width:0; position:relative; transform-origin:50% 75%; }
.card-heading { padding-top:10px; border-top:1px solid #171717; min-height:116px; }
.card-number { font:7px 'Geist Mono',monospace; display:inline-block; margin:0 0 6px; }
.card-heading h3 { font:600 clamp(27px,2.6vw,40px)/.95 var(--display); letter-spacing:-.055em; margin:0; text-transform:uppercase; }
.card-heading p { font-size:11px; line-height:1.45; margin:10px 0 0; letter-spacing:-.015em; color:#56524e; }
.phone-anchor { display:flex; align-items:flex-start; justify-content:center; position:relative; perspective:1100px; padding:10px 7px 0; }
.phone-device { position:relative; width:min(100%,calc(52svh * .47514),233px); aspect-ratio:411/865; flex-shrink:0; background:linear-gradient(115deg,#737373,#151515 18%,#323232 55%,#080808 80%,#666); border:1px solid #555; border-radius:17% / 8%; box-shadow:0 0 0 1px #141414,0 17px 25px -12px #1717172e,10px 25px 38px -19px #17171730; isolation:isolate; }
.phone-device:before,.phone-device:after { content:''; position:absolute; width:2px; height:10%; top:22%; left:-3px; border-radius:2px; background:#3c3c3c; }
.phone-device:after { left:auto; right:-3px; top:29%; }
.phone-display { position:absolute; inset:6px; border-radius:15.8% / 7.4%; overflow:hidden; background:#f5f4ef; container-type:inline-size; }
.dynamic-island { position:absolute; top:2.4%; left:50%; transform:translateX(-50%); width:28%; height:3.3%; background:#080808; border-radius:100px; z-index:20; }
.capture-layer { position:absolute; inset:0; z-index:8; pointer-events:none; }
.experience-bottom { position:absolute; left:4.2vw; right:220px; bottom:60px; display:flex; justify-content:space-between; color:#77716b; font:6px 'Geist Mono',monospace; }
.swipe-hint { display:none; }
.compact-footer { position:absolute; left:4.2vw; right:220px; bottom:22px; display:flex; align-items:center; gap:24px; font-size:8px; color:#77716b; }
.compact-footer .brand { font-size:16px; color:#171717; }
.compact-footer>span { margin-right:auto; }

/* Persistent download invitation and source overlays. */
.fixed-download { position:fixed; right:25px; bottom:23px; z-index:50; width:146px; padding:12px; display:flex; flex-direction:column; align-items:center; gap:9px; border:1px solid #171717; border-radius:4px; background:#f7ff72f5; box-shadow:4px 5px 0 #1717171a; transition:transform .4s var(--ease); }
.fixed-download:hover { transform:translateY(-4px); }
.fixed-download img { width:112px; height:112px; background:white; padding:2px; }
.qr-heading { font:500 10px Persona,sans-serif; width:100%; display:flex; justify-content:space-between; }
.qr-caption { font:7px 'Geist Mono',monospace; }
dialog { border:1px solid #171717; border-radius:5px; padding:42px; width:640px; max-width:calc(100vw - 30px); max-height:85svh; overflow:auto; background:var(--paper); color:var(--ink); box-shadow:8px 10px 0 #17171726; }
dialog::backdrop { background:#17171777; backdrop-filter:blur(9px); }
.dialog-close { position:absolute; right:12px; top:8px; width:34px; height:34px; font-size:28px; background:transparent; }
dialog .eyebrow { font-size:7px; margin-bottom:24px; }
dialog h2 { font-size:40px; margin:0 0 25px; line-height:.98; }
dialog h2 em { background:var(--lilac); }
dialog>p:not(.eyebrow) { font-size:12px; line-height:1.6; color:#6d6761; }
.dialog-qr { width:170px; height:170px; padding:8px; background:white; margin:28px auto 20px; }
.dialog-stores,.source-links { display:flex; flex-wrap:wrap; gap:14px; margin-top:23px; }
.dialog-stores a { border:1px solid #171717; background:var(--yellow); font-size:11px; padding:10px 17px; }
.source-links a { font-size:10px; text-decoration:underline; text-underline-offset:4px; }
.source-map { width:100%; height:auto; margin:20px 0 8px; border:1px solid var(--line); }
.source-counts { display:flex; gap:30px; border-block:1px solid var(--line); padding:22px 0; margin-bottom:23px; }
.source-counts>div { display:flex; flex-direction:column; gap:6px; }
.source-counts b { font:600 34px/1 var(--display); letter-spacing:-.06em; }
.source-counts span { font-size:8px; color:#6d6761; }

/* A large tablet held upright has the room of a tablet, not the height limit of a laptop. */
@media(min-width:901px) and (orientation:portrait) { :root{--headline:clamp(38px,4.3vw,56px)} }
@media(min-width:901px) and (max-height:780px) {
  .header{height:73px}.hero{padding-top:91px;padding-bottom:55px}
  
  .hero-description{font-size:14px}.hero-note{font-size:10px}
  .experience{padding-top:25px}h2{font-size:47px}
  .demo-row{margin-top:22px;gap:22px}.card-heading{min-height:101px}.card-heading h3{font-size:31px}
  .card-heading p{font-size:10px;margin-top:8px}.phone-device{width:min(100%,calc(50svh * .47514),233px)}
  .fixed-download{width:131px;padding:10px;gap:7px}.fixed-download img{width:101px;height:101px}.qr-heading{font-size:9px}.qr-caption{font-size:6px}
}
@media(min-width:1900px) {
  .hero-copy{width:min(52vw,930px)}
  .hero-description{font-size:19px}.hero-note{font-size:13px}
  .experience{padding-top:48px}.experience-heading{max-width:1800px}h2{font-size:75px}.demo-row{margin-top:45px;gap:40px}
  .card-heading{min-height:135px}.card-heading h3{font-size:45px}.card-heading p{font-size:14px}.card-number{font-size:9px}
  .phone-device{width:min(100%,calc(51svh * .47514),300px)}.demo-controls button{font-size:11px}
}
@media(max-width:900px) {
  .header{height:76px;padding:0 26px}.brand{font-size:21px}.header nav{gap:25px}.store-badges img{height:34px}
  .hero{padding:111px 26px 60px}.hero-content{align-items:flex-start}.hero-copy{width:100%}
  :root{--headline:clamp(32px,5.2vw,46px)}
  .hero-description{font-size:15px;max-width:33ch}.hero-note{font-size:11px}
  .world-wash{background:linear-gradient(0deg,transparent 42%,#f3f2ed22 60%,#f3f2ed77 82%,#f3f2edb8)}
  .map-label-one{left:auto;right:7%;top:65%;font-size:6px}.map-label-two{left:10%;bottom:19%;font-size:8px}
  .hero-floor{left:26px;right:190px;bottom:20px;align-items:flex-start;flex-direction:column;gap:12px}
  .world-controls{gap:16px;padding:5px 10px}.world-controls button{font-size:6px}.next-screen{padding:0;background:transparent;font-size:6px;gap:15px}.next-screen>span{font-size:15px}
  .experience{padding:32px 26px 67px}.experience-heading{padding-right:0;align-items:center;gap:15px}
  h2{font-size:42px}.demo-controls{gap:15px}.demo-controls button{font-size:8px}
  .demo-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(54vw,300px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 35px 25px 0;margin:29px -26px 0 0;gap:26px;perspective:none}
  .demo-row::-webkit-scrollbar{display:none}.demo-card{scroll-snap-align:start}.card-heading{min-height:112px}.card-heading h3{font-size:35px}.card-heading p{font-size:12px}.card-number{font-size:7px}
  .phone-device{width:min(100%,calc(51svh * .47514),255px)}.phone-anchor{padding-top:9px}
  .experience-bottom{left:26px;right:190px;bottom:59px;font-size:6px;gap:20px}.swipe-hint{display:inline}
  .compact-footer{left:26px;right:190px;bottom:19px;gap:17px;font-size:7px}.compact-footer>span{display:none}.compact-footer .brand{font-size:14px}
}
@media(max-width:580px) {
  .header{height:72px;padding:0 21px}.header .brand{font-size:19px}.header nav{gap:0}.app-nav-link{display:none}.store-badges{gap:7px}.store-badges img{height:30px}
  .hero{padding:100px 21px 55px}
  :root{--headline:clamp(26px,8.65vw,36px)}
  .hero-description{font-size:13px;max-width:29ch}.hero-note{font-size:10px;max-width:32ch;line-height:1.4}
  .map-label-one{top:66%;right:5%;font-size:5px;padding:7px 9px}.map-label-one i{width:4px;height:4px;margin-right:5px}.map-label-two{bottom:19%;left:7%;font-size:6px;padding:8px 10px}
  .hero-floor{left:21px;right:124px;bottom:17px;gap:12px}.world-controls{gap:11px;padding:4px 8px}.world-controls button{font-size:5px}.world-controls button>span{font-size:12px;margin-right:3px}.next-screen{font-size:5px;gap:10px}
  .fixed-download{right:14px;bottom:16px;width:91px;padding:8px;gap:6px;border-radius:2px;box-shadow:3px 4px 0 #17171716}.fixed-download img{width:71px;height:71px;padding:0}.qr-heading{font-size:7px}.qr-caption{font-size:6px}
  .experience{padding:33px 21px 64px}.experience-heading{align-items:flex-start;flex-direction:column;gap:16px}h2{font-size:39px}
  .demo-controls{position:absolute;right:21px;top:28px;gap:17px}.demo-controls button{font-size:8px;padding:4px 0}
  .demo-row{grid-auto-columns:68vw;gap:22px;margin-top:36px;margin-right:-21px;padding-right:30px;padding-bottom:20px}.card-heading{min-height:105px;padding-top:9px}.card-heading h3{font-size:34px}.card-heading p{font-size:11px;margin-top:9px}
  .phone-device{width:min(100%,calc(51svh * .47514),230px)}.phone-anchor{padding-inline:17px}.phone-display{inset:5px}
  .experience-bottom{left:21px;right:124px;bottom:55px;font-size:5px;flex-direction:column;gap:7px}.swipe-hint{font-size:5px}
  .compact-footer{left:21px;right:124px;bottom:17px;gap:14px;font-size:6px}.compact-footer .brand{font-size:12px}
  
  dialog{padding:36px 23px 28px}dialog h2{font-size:33px}dialog .eyebrow{font-size:6px}dialog>p:not(.eyebrow){font-size:11px}.source-counts{gap:24px}.source-counts b{font-size:29px}.source-counts span{font-size:7px}.source-links a{font-size:9px}
}
@media(max-width:360px) {
  .header .brand{font-size:17px}.store-badges img{height:27px}.hero-description{font-size:12px}.hero-note{font-size:9px}
}
@media(max-width:900px) and (max-height:740px) and (orientation:portrait) {
  :root{--headline:clamp(22px,7.4vw,30px)}
  .header{height:64px}.hero{padding-top:85px}.hero-description{font-size:12px}.hero-note{font-size:9px}
  .experience{padding-top:25px}h2{font-size:35px}.demo-row{margin-top:32px;gap:20px}.card-heading{min-height:92px}.card-heading h3{font-size:30px}.card-heading p{font-size:10px;margin-top:8px}.card-number{font-size:6px;margin-bottom:5px}
  .phone-device{width:min(100%,calc(45svh * .47514),230px)}.phone-anchor{padding-top:6px}
}
@media(max-height:540px) and (orientation:landscape) {
  .header{height:55px;padding:0 22px}.header .brand{font-size:18px}.header nav{gap:20px}.app-nav-link{display:inline;font-size:8px}.store-badges img{height:28px}
  .hero{padding:72px 22px 43px}.hero-content{align-items:center}.hero-copy{width:53%;max-width:440px}
  :root{--headline:clamp(20px,6svh,26px)}
  .hero-description{font-size:11px;max-width:35ch}.hero-note{font-size:8px;margin-top:8px}
  .world-wash{background:linear-gradient(90deg,#f3f2edaa,transparent 62%)}.map-label-one{left:65%;top:34%;right:auto;font-size:5px}.map-label-two{left:65%;bottom:22%;font-size:6px}
  .hero-floor{left:22px;right:116px;bottom:10px;flex-direction:row;align-items:center;gap:15px}.world-controls{padding:3px 8px;gap:14px}.next-screen{font-size:5px}.world-controls button{font-size:5px}
  .experience{padding:21px 22px 48px}.experience-heading{flex-direction:row;align-items:flex-end}h2{font-size:33px}.demo-controls{position:static;gap:18px}.demo-controls button{font-size:7px}
  .demo-row{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:17px;margin-right:0;padding-right:0}.card-heading{min-height:65px;padding-top:5px}.card-number{font-size:5px;margin-bottom:3px}.card-heading h3{font-size:23px}.card-heading p{font-size:8px;line-height:1.3;margin-top:6px}.card-heading p br{display:none}
  .phone-device{width:min(100%,calc(48svh * .47514),150px)}.phone-anchor{padding-top:4px}.phone-display{inset:4px}
  .experience-bottom{left:22px;right:116px;bottom:34px;font-size:4px;flex-direction:row}.swipe-hint{display:none}.compact-footer{left:22px;right:116px;bottom:10px;font-size:5px}.compact-footer .brand{font-size:11px}
  .fixed-download{right:11px;bottom:12px;width:80px;padding:7px;gap:5px}.fixed-download img{width:63px;height:63px}.qr-heading{font-size:6px}.qr-caption{font-size:5px}
  
}
@media(prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
}

/* Prelaunch status and aligned four-up labels. */
.store-soon{display:flex;align-items:center;gap:9px;min-width:117px;height:40px;padding:6px 12px;background:#0000000f;color:#171717;border:1px solid transparent;border-radius:8px;text-align:left}
.store-soon svg{width:18px;height:21px;flex-shrink:0}.store-soon span{display:flex;flex-direction:column;gap:2px}.store-soon small{font:7px/1 Persona,sans-serif;white-space:nowrap}.store-soon b{font:500 12px/1.1 Persona,sans-serif;white-space:nowrap}
.card-heading{text-align:center}.card-heading p{margin-inline:auto}
.launch-platforms{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.launch-platforms span{font:8px 'Geist Mono',monospace;background:var(--lilac);padding:10px 12px;border:1px solid #17171733}
.dialog-explore{display:inline-block;padding:11px 17px;background:var(--yellow);border:1px solid #171717;font-size:11px;margin-top:12px}.launch-qr-note{font-size:10px!important;text-align:center}
@media(max-width:580px){.store-soon{min-width:94px;height:33px;padding:5px 8px;gap:6px}.store-soon svg{width:15px;height:18px}.store-soon small{font-size:6px}.store-soon b{font-size:10px}.launch-platforms span{font-size:7px}}
@media(max-width:360px){.store-soon{min-width:85px;padding:4px 7px;gap:5px}.store-soon small{font-size:5px}.store-soon b{font-size:9px}}
/* The two badges and the wordmark must share the narrowest phones without clipping. */
@media(max-width:340px){.header{padding:0 16px}.store-badges{gap:5px}.store-soon{min-width:0;padding:4px 6px}.store-soon small{display:none}}
@media(max-width:300px){.header .brand{font-size:16px}.store-soon span{display:none}.store-soon svg{width:17px;height:20px}}
@media(max-height:540px) and (orientation:landscape){.store-soon{height:30px;min-width:97px;padding:4px 8px}.store-soon small{font-size:5px}.store-soon b{font-size:10px}.store-soon svg{width:14px;height:17px}}

/* Industry context and map labels. */
.factory-intro{background:var(--paper)}


#country-labels{position:absolute;inset:0}.geo-label{position:absolute;left:0;top:0;font:6px 'Geist Mono',monospace;color:#584a62;text-transform:uppercase;white-space:nowrap;text-shadow:0 0 4px #fff,0 0 4px #fff;opacity:.72;will-change:transform}
.industry-key{position:absolute;right:5%;bottom:10%;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:340px}
.industry-key span{font:5px 'Geist Mono',monospace;padding:5px 6px;border:1px solid #17171722;background:#f3f2ed88;color:#716477;transition:background 1.5s,color 1.5s}
.industry-key span.is-active{background:#c59af4c9;color:#171717;border-color:#17171744}
#region-note{font:5px 'Geist Mono',monospace;color:#716477;max-width:110px;white-space:nowrap}

@media(max-width:900px){.industry-key{right:6%;bottom:12%;max-width:280px}.industry-key span{font-size:4px;padding:4px 5px}.geo-label{font-size:5px}#region-note{font-size:4px;max-width:95px}}
@media(max-width:580px){.industry-key{left:7%;right:auto;bottom:13%;max-width:235px;justify-content:flex-start;gap:4px}.industry-key span{font-size:3.5px;padding:3px 4px}#region-note{position:absolute;left:0;bottom:43px;font-size:4px}}
@media(max-height:540px) and (orientation:landscape){.industry-key{bottom:15%;right:5%;max-width:250px}#region-note{position:static;font-size:4px}}



/* Detailed disclosure data stays in an optional drawer, within the two-screen landing. */
.industry-key{right:210px}
#sources-dialog{width:920px}
.source-dialog-bar{position:sticky;top:-42px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:-42px -42px 25px;padding:16px 26px 16px 42px;background:var(--paper);border-bottom:1px solid var(--line)}
.source-dialog-bar .eyebrow{margin:0;font-size:7px}.source-dialog-bar .dialog-close{position:static;width:28px;height:28px;font-size:24px}
.factory-overview{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:center;margin:24px 0;scroll-margin-top:55px}
.factory-overview .directory-map{margin:0}
.factory-overview .factory-detail{margin:0;padding:18px}
.factory-overview .factory-detail h3{font-size:22px}
.directory-map{position:relative;aspect-ratio:2/1;border:1px solid var(--line);overflow:hidden;background:var(--ocean);margin:22px 0}
.directory-map .source-map{display:block;width:100%;height:100%;object-fit:contain;margin:0}
.directory-map>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#source-map-label{position:absolute;left:12px;bottom:10px;max-width:calc(100% - 24px);padding:5px 7px;background:#f3f2ede8;font:8px/1.4 Persona,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#directory-coverage{font-size:10px;color:var(--muted)}
.factory-directory{border-top:1px solid var(--line);margin-top:25px;padding-top:24px}
.factory-filters{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.factory-filters label{display:flex;flex-direction:column;gap:7px;font:8px 'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.03em}
.factory-search-label{grid-column:1/-1}
.factory-filters input,.factory-filters select{width:100%;min-height:42px;border:1px solid #17171755;border-radius:2px;padding:10px 12px;color:var(--ink);background:#fff;font:12px Persona,sans-serif;letter-spacing:0;text-transform:none}
.factory-filters input:focus-visible,.factory-filters select:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
#factory-status{font:9px Persona,sans-serif;color:var(--muted);margin:18px 0}
.factory-results{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.factory-entry{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:17px;text-align:left;border:1px solid var(--line);background:#ffffff9c;transition:border-color .2s,background .2s}
.factory-entry:hover,.factory-entry[aria-pressed=true]{border-color:#71478f;background:#e8d9f4}
.factory-entry strong{font:500 16px/1.18 var(--display);overflow-wrap:anywhere}
.factory-entry-source{font:7px 'Geist Mono',monospace;text-transform:uppercase;color:#674e76}
.factory-entry-place{font:10px/1.4 Persona,sans-serif;color:#625e59}
.factory-entry-process{font:8px/1.4 Persona,sans-serif;border-top:1px solid var(--line);padding-top:7px;margin-top:4px;width:100%}
.factory-detail{border:1px solid #171717;padding:22px;background:var(--yellow);margin-bottom:18px}
.factory-detail>.eyebrow{font-size:6px;margin-bottom:12px}
.factory-detail h3{font:600 25px/1.08 var(--display);text-transform:none;letter-spacing:-.035em;margin:0 0 9px;overflow-wrap:anywhere}
.factory-detail-location{font-size:11px;margin:0 0 18px}
.factory-facts{display:grid;grid-template-columns:85px 1fr;gap:6px 12px;font-size:10px;line-height:1.4;margin:0}
.factory-facts dt{color:#5b5941}.factory-facts dd{margin:0;overflow-wrap:anywhere}
.factory-relationship{font:8px/1.6 'Geist Mono',monospace;margin:17px 0 10px;padding-top:12px;border-top:1px solid var(--line);overflow-wrap:anywhere}
.factory-position-note{font-size:9px;line-height:1.5;color:#5d5b40;margin:14px 0}
.factory-source-link{display:inline-block;font-size:10px;border-bottom:1px solid #171717;padding-bottom:2px}
.factory-more,#factory-retry{border:1px solid #171717;padding:11px 18px;background:var(--lilac);font-size:11px;margin:18px 0 0}
.factory-empty{grid-column:1/-1;font-size:12px}
.industry-notes{border-top:1px solid var(--line);margin-top:30px;padding-top:17px;font-size:11px;line-height:1.6}
.industry-notes summary{cursor:pointer;font-size:12px}.industry-notes p{color:#6d6761}
@media(max-width:900px){.industry-key{right:185px;bottom:12%}}
@media(max-width:580px){.industry-key{left:7%;right:auto;bottom:13%}.factory-results{grid-template-columns:1fr}.factory-filters{grid-template-columns:1fr}.factory-search-label{grid-column:auto}.factory-detail{padding:18px}.factory-detail h3{font-size:22px}.factory-facts{grid-template-columns:70px 1fr;font-size:9px}.source-counts{gap:13px}.source-counts b{font-size:24px}.source-counts span{max-width:100px;font-size:6px}#source-map-label{font-size:6px}.directory-map{margin:18px 0}}
@media(prefers-reduced-motion:reduce){.factory-entry{transition:none}}
@media(max-width:700px){.factory-overview{grid-template-columns:1fr;scroll-margin-top:55px}.factory-overview .factory-detail h3{font-size:21px}}
@media(max-width:580px){.source-dialog-bar{top:-36px;margin:-36px -23px 22px;padding:15px 18px 15px 23px}.source-dialog-bar .eyebrow{font-size:6px}.factory-overview{scroll-margin-top:60px}}

/* The loader floats on the live world, with no sheet behind it. */
.factory-intro{background:transparent;pointer-events:none}
.factory-intro>video{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;object-fit:fill}
.process-stage{position:absolute;left:50%;top:47%;width:clamp(350px,78svmin,780px);aspect-ratio:5/4;transform:translate(-50%,-50%);will-change:transform,opacity}
#process-canvas{display:block;width:100%;height:auto;aspect-ratio:5/4;background:transparent}
.process-caption{position:absolute;left:50%;top:89.5%;width:max-content;max-width:min(38ch,86vw);margin:0;translate:-50% 0;text-align:center;font:500 clamp(14px,1.9svmin,17px)/1.35 Persona,PersonaFigures,PersonaSymbols,sans-serif;letter-spacing:-.01em;word-spacing:.08em;color:var(--ink)}
.process-fallback{position:absolute;inset:0;display:none}
.process-fallback i{position:absolute;width:23%;height:34%;left:27%;top:29%;border-radius:42% 40% 35% 43%;background:#bba182 url('media/making-mosaic-atlas.jpg') left center/200% 100%;transform:rotate(-14deg);animation:process-float 3.6s ease-in-out infinite alternate}
.process-fallback i:nth-child(2){left:51%;top:38%;width:26%;height:25%;border-radius:58% 38% 52% 44%;background-position:right center;transform:rotate(12deg);animation-delay:-1.4s}
.process-fallback b{position:absolute;left:47%;top:44%;font:500 26px/1 var(--display);color:#26242a}
.factory-intro[data-process-renderer=css] .process-fallback{display:block}
.factory-intro[data-paused=true] .process-fallback i{animation-play-state:paused}
@keyframes process-float{from{translate:0 -4px}to{translate:0 5px}}
.store-soon{border-radius:8px;transition:background .2s var(--ease),transform .2s var(--ease)}.store-soon:hover{background:#00000018;transform:translateY(-1px)}.store-soon:active{transform:translateY(0)}
.demo-card{isolation:isolate}
.demo-card:before{content:'';position:absolute;inset:0 -8px -3px;z-index:-1;border:1px solid #ffffffb0;border-radius:24px;background:linear-gradient(160deg,#f4edf8cc,#faf9f4a6 72%);box-shadow:0 10px 32px #45354906;pointer-events:none}
.demo-card:nth-child(2):before{background:linear-gradient(160deg,#edf3f7cc,#faf9f4a6 72%)}
.demo-card:nth-child(3):before{background:linear-gradient(160deg,#f5f4e5cc,#faf9f4a6 72%)}
.card-heading{border-top:0;padding-top:18px}
@media(max-width:900px) and (orientation:portrait){.process-stage{width:min(112vw,620px)}.demo-card:before{border-radius:22px}}
@media(max-width:580px){.store-soon{border-radius:10px}.demo-card:before{inset:0 -6px -2px}.card-heading{padding-top:14px}}
@media(max-height:540px) and (orientation:landscape){.card-heading{padding-top:6px}}
@media(prefers-reduced-motion:reduce){.process-fallback i{animation:none}.process-stage{will-change:auto}}

/* Tactile Earth; text, navigation and vertical touch scrolling remain native. */
.hero-content,.hero-copy{pointer-events:none}
.world-interaction{position:fixed;inset:0;z-index:1;pointer-events:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.world-interaction.is-enabled{pointer-events:auto}.world-interaction.is-dragging{cursor:grabbing}
.world-interaction:focus-visible{outline:2px solid #87619c;outline-offset:-10px;border-radius:20px}
.hero-floor{flex-wrap:wrap;gap:10px 12px}
.world-tools{display:flex;align-items:center;gap:9px;max-width:100%;white-space:nowrap}
.world-tools button{min-height:32px;padding:6px 10px;border-radius:9px;background:transparent;font:9px Persona,sans-serif}
#world-reset{text-decoration:underline;text-underline-offset:4px;padding-inline:2px}
.world-hint{font:8px Persona,sans-serif;color:#6c6073}
.industry-key{font:6px/1.4 'Geist Mono',monospace;color:#82758a;right:210px;bottom:9%}
.world-cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;will-change:transform}
.world-cursor i{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border:1px dashed #87619c;border-radius:50%;background:#faf8f329;transition:width .16s,height .16s,left .16s,top .16s,background .16s}
.world-cursor b{position:absolute;left:-5px;top:-5px;color:#584365;font:12px/1 Persona,sans-serif}
.world-cursor span{position:absolute;left:22px;top:-12px;padding:5px 9px;max-width:175px;border:1px solid #9474a533;border-radius:8px;background:#faf8f3ed;font:9px/1.4 Persona,sans-serif;color:#6b5477;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.world-cursor.is-held i{width:22px;height:22px;left:-11px;top:-11px;background:#d9c7ed88;border-style:solid}
.world-cursor.is-flipped span{left:auto;right:22px}
@media(hover:hover) and (pointer:fine){.world-interaction.uses-custom-cursor{cursor:none}}
@media(hover:none),(pointer:coarse){.world-cursor{display:none!important}}
/* Card mosaic fallback and the same four live texture cells. */
.process-fallback i{left:29%;top:24%;width:20%;height:25%;border-radius:14%;background-position:left top;background-size:200% 200%;transform:none;animation:card-arrive .35s ease both}
.process-fallback i:nth-child(2){left:51%;top:24%;width:20%;height:25%;border-radius:14%;background-position:right top;transform:none;animation-delay:.42s}
.process-fallback i:nth-child(3){left:29%;top:51.5%;background-position:left bottom;animation-delay:.84s}
.process-fallback i:nth-child(4){left:51%;top:51.5%;background-position:right bottom;animation-delay:1.26s}
@keyframes card-arrive{from{opacity:0;scale:.9;translate:0 8px}to{opacity:1;scale:1;translate:0 0}}
@media(max-width:900px){.hero-floor{align-items:flex-start}.industry-key{right:185px}}
@media(max-width:580px){.world-tools{gap:8px}.world-tools button{min-height:33px;padding-inline:9px;font-size:8px}.hero-floor{gap:9px}#region-note{position:static;max-width:120px;font-size:5px}.world-controls{gap:10px}.world-controls button{min-height:21px;font-size:6px}.world-hint{font-size:6px}.industry-key{left:auto;right:120px;bottom:22%;font-size:4px;max-width:155px;justify-content:flex-end}}
@media(max-height:740px) and (orientation:portrait){.world-hint{display:none}.hero-floor{gap:7px}.world-tools button{min-height:29px}}
@media(max-height:540px) and (orientation:landscape){.hero-floor{gap:8px}.world-hint{display:none}.world-tools button{min-height:24px;padding:3px 8px;font-size:7px}.industry-key{bottom:16%;right:115px;font-size:4px}}
@media(prefers-reduced-motion:reduce){.world-cursor i{transition:none}.has-world .world-fallback{animation:none;opacity:0;visibility:hidden}.has-world #world-map{animation:none}}

.geo-label{display:flex;align-items:center;gap:3px}.geo-label svg{display:block;width:11px;height:11px;flex-shrink:0;opacity:.7}
@media(max-width:580px){.geo-label svg{width:8px;height:8px}.geo-label{gap:2px}}

/* The map has two looks. The visitor's clock picks one before first paint, and the switch changes it. */
.map-look{position:fixed;left:50%;top:18px;z-index:60;transform:translateX(-50%);display:flex;gap:2px;padding:3px;border-radius:999px;background:#17171722;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .25s}
.map-look button{padding:6px 14px;border-radius:999px;background:transparent;font:500 11px/1 Persona,PersonaFigures,sans-serif;color:#171717}
.map-look button[aria-pressed=true]{background:#171717;color:#f3f2ed}
body[data-reel-open=true] .map-look{opacity:0;pointer-events:none}
@media(max-width:900px){.map-look{top:auto;bottom:clamp(150px,22svh,190px);left:16px;transform:none}.map-look button{padding:6px 11px;font-size:10px}}
@media(max-height:540px) and (orientation:landscape){.map-look{top:64px;right:16px;bottom:auto;left:auto;transform:none}}
html[data-map-look] .world-fallback{opacity:0}
html[data-map-look] body[data-world-renderer=svg] .world-fallback{opacity:var(--map-opacity,1)}
html[data-map-look=light] .geo-label{color:#171717;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 7px #fff}

/* Night: the page turns with the map, and the paper returns on the second screen. */
html[data-map-look=night]{--ocean:#0c0b10}
html[data-map-look=night] body[data-world-renderer=svg] .world-fallback{background-image:url('data/world-fallback-night.svg')}
html[data-map-look=night] .map-look{background:#ffffff26}
html[data-map-look=night] .map-look button{color:#f3f2ed}
html[data-map-look=night] .map-look button[aria-pressed=true]{background:#f3f2ed;color:#171717}
html[data-map-look=night] .world-wash{background:linear-gradient(90deg,#0c0b10ee 0%,#0c0b10aa 26%,#0c0b1028 48%,transparent 67%)}
html[data-map-look=night] .hero{--ink:#f3f2ed;--line:#ffffff24;color:#f3f2ed}
html[data-map-look=night] .header{background:linear-gradient(#0c0b10f2,#0c0b10c4 70%,#0c0b1000)}
html[data-map-look=night] #alchemy .alc__verse{color:#a7a3ad}
html[data-map-look=night] #alchemy .alc__rhyme{color:#f3f2ed;transition:color .3s}
html[data-map-look=night] #alchemy .alc__rhyme.is-in{color:#171717}
html[data-map-look=night] #alchemy .alc__rhyme::before{background:linear-gradient(var(--marker),var(--marker)),#fff}
html[data-map-look=night] .hero-note{color:#bdb9c3}
html[data-map-look=night] .store-soon{background:#ffffff14;color:#f3f2ed}
html[data-map-look=night] .world-controls,html[data-map-look=night] .next-screen{background:#17151ddd;color:#f3f2ed}
html[data-map-look=night] .map-annotations,html[data-map-look=night] .world-tools{color:#f3f2ed}
html[data-map-look=night] .geo-label{color:#f3f2ed;text-shadow:0 0 4px #0c0b10,0 0 8px #0c0b10}
html[data-map-look=night] .editorial-grid{opacity:.3}
html[data-map-look=night] #skip-intro{color:#f3f2ed99}
@media(max-width:900px){html[data-map-look=night] .world-wash{background:linear-gradient(0deg,transparent 42%,#0c0b1033 60%,#0c0b1088 82%,#0c0b10cc)}}
@media(max-height:540px) and (orientation:landscape){html[data-map-look=night] .world-wash{background:linear-gradient(90deg,#0c0b10dd,transparent 62%)}}