:root{color-scheme:light;--ink:#111d29;--muted:#526271;--blue:#0072b4;--line:#d9e4ec;--size:clamp(175px,36vw,330px);--half:calc(var(--size)/2)}
*{box-sizing:border-box}html{background:#f9fcff}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at 50% 38%,#e4f3ff 0, #f9fcff 48%,#fff 85%);min-height:100svh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,.stage:focus-visible{outline:3px solid #006aac;outline-offset:5px}.header{max-width:1440px;margin:auto;padding:30px 6vw;display:flex;align-items:center;justify-content:space-between;gap:20px}.wordmark{font-weight:900;font-size:clamp(20px,3vw,29px);letter-spacing:-1.4px;text-decoration:none}.wordmark span{color:var(--blue)}.wordmark sup{font-size:11px;vertical-align:top;margin:3px 0 0 3px;display:inline-block}.updates-link{font-size:14px;text-decoration:none}.updates-link span{color:var(--muted);margin-left:12px}.intro{text-align:center;padding:18px 18px 0}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.15em;margin:0 0 10px;color:var(--blue)}h1{font-size:clamp(32px,5vw,54px);font-weight:600;letter-spacing:-.05em;margin:0}.hint{font-size:16px;color:var(--muted);margin:12px 0 0}
.stage{position:relative;width:100%;height:clamp(340px,53vw,510px);display:grid;place-items:center;perspective:1250px;touch-action:none;cursor:grab;outline-offset:-12px;isolation:isolate}.stage.dragging{cursor:grabbing}.stage::after{content:"";position:absolute;z-index:-1;width:calc(var(--size)*1.1);height:30px;bottom:25px;background:radial-gradient(ellipse,#608bb45c,transparent 70%);filter:blur(12px);pointer-events:none}.cube{position:relative;width:var(--size);height:var(--size);transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-35deg);will-change:transform}.face{position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:visible;border:2px solid #9edbff;border-radius:3px;background:linear-gradient(135deg,rgba(85,119,147,.28),rgba(9,24,42,.55) 55%,rgba(55,88,121,.25));box-shadow:inset 0 0 0 1px #eefaff, inset 0 0 28px #81caff3b,0 0 3px 1px #078dd39c;pointer-events:none}.face::before{content:"";position:absolute;inset:2px;border:1px solid rgba(229,247,255,.62);border-radius:2px;pointer-events:none;background:linear-gradient(132deg,transparent 10%,#d9f5ff20 18%,transparent 29%,transparent 75%,#d9f5ff12 90%)}.front{transform:translateZ(var(--half))}.right{transform:rotateY(90deg) translateZ(var(--half))}.back{transform:rotateY(180deg) translateZ(var(--half))}.left{transform:rotateY(-90deg) translateZ(var(--half))}.top{transform:rotateX(90deg) translateZ(var(--half))}.bottom{transform:rotateX(-90deg) translateZ(var(--half))}.face .face-link{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;padding:10%;background:none;border:0;color:#fff;text-align:left;backface-visibility:hidden;transform:translateZ(1px);text-shadow:0 1px 12px #061320;pointer-events:auto;cursor:inherit;transition:opacity .18s}.face .face-link:focus-visible{outline:3px solid white;outline-offset:-12px}.face-number{font-size:12px;letter-spacing:.13em;color:#c5eaff}.face-title{font-size:clamp(32px,5.5vw,51px);font-weight:700;letter-spacing:-.04em;line-height:1.05}.face-note{font-size:14px;color:#e2f2ff;line-height:1.4}.alpha{display:block;font-size:13px;letter-spacing:.14em;margin-top:10px;color:#bce8ff}.chat-label{display:block;font-size:clamp(20px,3vw,29px);margin-top:7px}.cube-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;margin:4px 20px 25px}.motion-label{font-size:12px;letter-spacing:.12em;color:var(--muted)}.cube-controls button{border:0;border-bottom:1px solid #aabcc9;background:transparent;padding:7px 0;color:var(--ink);font-size:14px}.planes{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;padding:0 20px}.planes a{border:1px solid var(--line);border-radius:4px;background:#ffffffb3;padding:12px 18px;font-size:14px;color:var(--ink);min-height:44px;transition:background .18s,color .18s}.planes a:hover{border-color:var(--blue)}.planes a[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.destination{max-width:870px;margin:26px auto 0;padding:24px;display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--line)}[hidden]{display:none!important}.destination h2{font-size:25px;margin:0 0 10px;letter-spacing:-.03em}.destination p:not(.eyebrow){font-size:16px;line-height:1.5;margin:0;color:var(--muted);max-width:400px}.destination-links{display:flex;flex-wrap:wrap;gap:9px;max-width:390px}.destination-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 16px;background:white;border:1px solid var(--line);border-radius:4px;text-decoration:none;font-size:14px}.destination-links a:first-child{background:var(--blue);border-color:var(--blue);color:white}.destination-links a:hover{box-shadow:0 3px 10px #13334a20}.fallback{display:flex;gap:15px;justify-content:center;flex-wrap:wrap;margin:20px}footer{max-width:1440px;margin:35px auto 0;padding:24px 6vw;display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}footer span{margin-right:auto;letter-spacing:.06em}footer a{text-decoration:none}
@media(max-width:600px){:root{--size:clamp(175px,48vw,260px)}.header{padding:22px 20px}.intro{padding-top:10px}.stage{height:345px;perspective:900px}.stage::after{bottom:20px}.face .face-link{gap:10px}.face-number{font-size:10px;letter-spacing:.07em}.face-note{font-size:12px}.planes{gap:6px}.planes a{padding:11px 13px}.destination{margin:24px 20px 0;padding:22px 0;flex-direction:column;align-items:flex-start;gap:18px}footer{padding:23px 20px;gap:16px;flex-wrap:wrap}footer span{width:100%}.cube-controls{gap:12px;margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.cube{will-change:auto}}

/* Actual section previews, framed to match the glass planes. */
.face .face-link{padding:8%;gap:9px;user-select:none;-webkit-user-select:none}
.face-preview{display:block;flex:none;width:100%;aspect-ratio:2.4;overflow:hidden;border:1px solid #ade5ffb3;border-radius:3px;background:#102437;box-shadow:0 0 0 2px #dff5ff12,0 4px 14px #031b3040;pointer-events:none;line-height:0}
.face-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;-webkit-user-drag:none}
.updates-preview img{object-position:center 5%}
.merch-preview img{object-position:center 25%}
.apps-preview img{object-position:center 40%}
.book-preview{display:flex;justify-content:center;gap:8px;padding:5px;background:linear-gradient(120deg,#eaf4fa,#c8e0ed)}
.book-preview img{width:28%;height:100%;object-fit:contain}
@media(max-width:600px){.face .face-link{gap:6px}.face-note{display:none}.face-preview{aspect-ratio:2.4}.face-title{font-size:32px}.chat-label{font-size:20px;margin-top:3px}.book-preview{gap:4px;padding:3px}}

/* Direct destinations and a quiet DVD-menu highlight. */
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.face-link{position:relative;text-decoration:none;border-radius:2px;cursor:pointer!important;transition:box-shadow .22s,background .22s!important}
.face-link:hover,.face-link:focus-visible,.face-link.is-active{background:linear-gradient(135deg,#9adaff24,transparent 55%);box-shadow:inset 0 0 28px #8bdcff45,inset 0 0 0 2px #a8e4ffb3}
.face-link::after{content:"";position:absolute;inset:10%;border:1px solid #bcecff;opacity:0;border-radius:50%;pointer-events:none}
.face-link.is-rippling::after{animation:face-ripple .45s ease-out}
@keyframes face-ripple{from{opacity:.7;transform:scale(.15)}to{opacity:0;transform:scale(1.5)}}
.planes a{display:inline-flex;align-items:center;text-decoration:none}
.planes a:hover,.planes a:focus-visible,.planes a.is-active{border-color:#0072b4;box-shadow:0 0 14px #42b9ff25;background:#e7f5ff}
.face-preview{aspect-ratio:2.4}.book-preview{background:#0d1824}.book-preview img{object-fit:contain}.merch-preview img{object-fit:contain;background:#fff}.face-note{font-size:14px}
.preview-panel{position:absolute;top:235px;left:calc(50% + 270px);width:250px;padding:20px;background:#ffffffd9;border:1px solid #b4d9ee;border-radius:8px;box-shadow:0 6px 28px #178dd310}
.preview-panel h2{font-size:24px;line-height:1.15;margin:0 0 10px;letter-spacing:-.025em}.preview-panel p:not(.eyebrow){font-size:16px;line-height:1.5;color:var(--muted);margin:0}
#preview-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}#preview-links a{font-size:14px;padding:8px 0;margin-right:8px;text-decoration:none;border-bottom:1px solid #9ec9df;color:#00649e}#preview-links a:hover,#preview-links a:focus-visible{color:#003f66;border-color:#00649e}
.updates-link{font-size:14px;padding:10px;border:1px solid #b7dcef;border-radius:5px;background:#eef8ff}
@media(max-width:1100px){.preview-panel{position:static;width:min(580px,calc(100% - 40px));margin:20px auto 0;padding:16px 20px}.preview-panel h2{font-size:22px}.preview-panel #preview-links{margin-top:10px}.preview-panel p:not(.eyebrow){font-size:15px}.stage{height:clamp(300px,48vw,460px)}}
@media(max-width:600px){.header{gap:10px}.wordmark{font-size:21px}.updates-link{max-width:150px;font-size:14px;line-height:1.4}.intro{padding-top:0}.hint{font-size:14px}.stage{height:310px}.face-preview{aspect-ratio:2.2}.face-title{font-size:28px}.face-number{font-size:12px}.preview-panel{margin-top:16px}.cube-controls{margin-bottom:14px}.planes a{font-size:14px}.face-note{display:none}}
@media(prefers-reduced-motion:reduce){.face-link.is-rippling::after{animation:none}}

@media(max-width:1100px){.preview-panel{margin-bottom:20px}}

/* Separate physical books. Their artwork stays on the covers; the shelf is clear. */
.face{background:linear-gradient(135deg,#55779330,#09182a57 55%,#37587925)}
.face .book-face{transform-style:preserve-3d;gap:6px;cursor:grab!important}
.book-face:hover,.book-face.is-active{background:none;box-shadow:none}
.book-face::after{display:none}
.face .book-preview{position:relative;display:block;aspect-ratio:auto;height:calc(var(--size)*.59);width:100%;padding:0;overflow:visible;border:0;background:transparent;box-shadow:none;transform-style:preserve-3d;line-height:normal}
.book{--depth:7px;--tilt:0deg;--turn:-22deg;--lift:10px;position:absolute;display:block;width:26%;aspect-ratio:2/3;padding:0;border:0;border-radius:2px;background:none;transform:translateZ(var(--lift)) rotateZ(var(--tilt));transform-style:preserve-3d;cursor:pointer;touch-action:none;pointer-events:auto;color:#fff;transition:transform .3s ease}
.book:nth-child(1){left:1%;top:4%;--tilt:-9deg;--lift:12px}
.book:nth-child(2){left:36%;top:0;--tilt:4deg;--turn:-16deg;--lift:18px}
.book:nth-child(3){left:70%;top:6%;--tilt:9deg;--turn:-25deg;--lift:24px}
.book:nth-child(4){left:20%;top:48%;--tilt:-6deg;--lift:26px}
.book:nth-child(5){left:55%;top:46%;--tilt:7deg;--turn:-18deg;--lift:30px}
.book:hover,.book:focus-visible{transform:translateZ(calc(var(--lift) + 12px)) rotateZ(var(--tilt)) scale(1.06)}
.book:focus-visible{outline:2px solid #d4f4ff;outline-offset:6px}
.book-object{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateX(7deg) rotateY(var(--turn));transition:transform .65s cubic-bezier(.2,.75,.25,1);pointer-events:none}
.book.is-turned .book-object{transform:rotateX(7deg) rotateY(calc(var(--turn) + 180deg))}
.book-panel{position:absolute;inset:0;display:block;border-radius:1px;backface-visibility:hidden;box-shadow:1px 2px 4px #03111d88;background:#050607}
.book-cover{transform:translateZ(calc(var(--depth)/2))}
.book-reverse{transform:rotateY(180deg) translateZ(calc(var(--depth)/2))}
.book-preview .book img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.book-reverse img{transform:scaleX(-1);opacity:.86}
.book-panel::after{content:"";position:absolute;inset:0;border-radius:1px;background:linear-gradient(100deg,#0008,transparent 8%,#fff3 10%,transparent 14%,transparent 76%,#fff2);box-shadow:inset 0 0 0 1px #ffffff35;pointer-events:none}
.book-spine,.book-pages,.book-edge{position:absolute;display:block;backface-visibility:hidden;pointer-events:none}
.book-spine{top:0;left:calc(var(--depth)/-2);width:var(--depth);height:100%;transform:rotateY(-90deg);background:linear-gradient(90deg,#080b10,#50616e 45%,#080b10)}
.book-pages{top:0;left:calc(100% - var(--depth)/2);width:var(--depth);height:100%;transform:rotateY(90deg);background:repeating-linear-gradient(#d1c8b6 0 1px,#faf2e3 1px 3px)}
.book-edge{left:0;width:100%;height:var(--depth);background:repeating-linear-gradient(0deg,#d1c8b6 0 1px,#faf2e3 1px 2px)}
.book-edge-top{top:calc(var(--depth)/-2);transform:rotateX(90deg)}
.book-edge-bottom{top:calc(100% - var(--depth)/2);transform:rotateX(-90deg)}
.book-cultivation .book-cover::before,.book-cultivation .book-reverse::before{content:"";position:absolute;inset:0;background:url('/book-grain.svg') center/100% 100%;mix-blend-mode:screen;opacity:.23;pointer-events:none}
.book-cultivation .book-cover::after,.book-cultivation .book-reverse::after{background:radial-gradient(ellipse at var(--gloss-x,70%) var(--gloss-y,30%),#e5f7ff70,transparent 48%),linear-gradient(100deg,#0009,transparent 8%,#fff6 10%,transparent 14%,transparent 88%,#fff3);box-shadow:inset 0 0 0 1px #9eadb466,inset 2px 0 3px #fff2}
.book-cultivation .book-spine{background:linear-gradient(90deg,#000,#293139,#000)}
.face .book-catalog{font-size:clamp(25px,4vw,36px);text-decoration:none;pointer-events:auto;transform:translateZ(12px)}
.book-catalog:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.book-hint{display:block;margin-top:5px;font-size:10px;font-weight:500;letter-spacing:.09em;pointer-events:none}
.face .plane-reflection{position:absolute;inset:0;transform:rotateY(180deg) scaleX(-1) translateZ(2px);backface-visibility:hidden;pointer-events:none!important;transition:none!important;justify-content:center;background:none;box-shadow:none;text-shadow:none}
.plane-reflection .face-number,.plane-reflection .face-title,.plane-reflection .face-note{display:none}
.plane-reflection::after{display:none}
.plane-reflection .face-preview{background:transparent;border:0;box-shadow:none}
.plane-reflection .book{pointer-events:none;cursor:default}
.plane-reflection .book-cover::after{background:none;box-shadow:none}
.plane-reflection .book-preview{transform:translateZ(0)}
@media(max-width:600px){:root{--size:clamp(210px,58vw,280px)}.stage{height:350px}.book{--depth:5px}.face .book-face{padding:7%;gap:5px}.book-hint{font-size:8px;margin-top:3px}.book-face .face-number{font-size:10px}.face .book-catalog{font-size:25px}}
@media(prefers-reduced-motion:reduce){.book-object,.book{transition:none}.book:hover,.book:focus-visible{transform:translateZ(var(--lift)) rotateZ(var(--tilt))}}
/* Keep swipes on the cube instead of dragging an image or opening a link. */
.stage,.cube,.face-link{touch-action:none;-webkit-touch-callout:none}
.face-link{-webkit-user-drag:none}.face-link span{pointer-events:none}

/* The book projects a connected reading world without leaving the cube. */
.book-world{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 390px;align-items:start;gap:30px;max-width:1220px;margin:0 auto;padding:0 30px;isolation:isolate}
.book-world .stage{height:530px;min-width:0}
.book-world .preview-panel{position:relative;top:auto;left:auto;width:100%;margin:0;padding:24px;z-index:2;background:#ffffffc9;backdrop-filter:blur(12px)}
.preview-panel.is-projecting{--book-accent:#0072b4;border-color:color-mix(in srgb,var(--book-accent),white 60%);box-shadow:0 0 35px #24b3ff12,0 8px 25px #06578008}
.preview-panel.is-projecting h2{font-size:23px;line-height:1.2}.preview-panel.is-projecting #preview-description{display:none}
.projection-beam{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.beam-line{fill:none;stroke:#159eda;stroke-width:1;stroke-dasharray:4 6;opacity:.65;animation:beam-travel 12s linear infinite}.beam-source{fill:#7ae4ff;stroke:#0086bd;stroke-width:1;filter:drop-shadow(0 0 5px #5ed9ff)}
@keyframes beam-travel{to{stroke-dashoffset:-100}}
.book.is-projecting{transform:translateZ(calc(var(--lift) + 16px)) rotateZ(var(--tilt)) scale(1.08)}
.book.is-projecting .book-panel{box-shadow:0 0 12px #8bdbffa8,0 0 0 1px #b0ecff}
.projection-toolbar{display:flex;align-items:center;gap:12px;margin:18px 0 14px;font-size:12px;color:var(--blue)}.projection-toolbar span{margin-right:auto;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.projection-toolbar button{min-height:36px;font-size:14px;background:none;border:0;border-bottom:1px solid #b4d9ee;padding:6px 0;color:#306078;white-space:nowrap}
.projection-assembly{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:start;gap:14px}
.projection-art{margin:0;transform:perspective(600px) rotateY(-10deg);transform-origin:center;position:sticky;top:10px}
.projection-art img{display:block;width:100%;height:150px;object-fit:contain;filter:drop-shadow(3px 5px 3px #04233825)}
.projection-art img.is-page{height:165px;object-fit:cover;object-position:top;box-shadow:0 2px 6px #06304f20;border:1px solid #d2e3eb}
.projection-art figcaption{font-size:12px;line-height:1.45;color:#637383;margin-top:9px}
.projection-topics{display:grid;gap:10px}.projection-topic{padding:0 0 10px 10px;border-left:2px solid color-mix(in srgb,var(--book-accent),white 60%);border-bottom:1px solid #e0edf5}
.projection-topic summary{font-size:14px;line-height:1.3;min-height:32px;padding:6px 0;cursor:pointer;font-weight:700;color:#23405a}.projection-topic summary:focus-visible{outline:2px solid #0072b4;outline-offset:3px}.preview-panel .projection-topic p{font-size:14px!important;line-height:1.45!important;color:#51677a!important}
.is-assembling .projection-art,.is-assembling .projection-topic{animation:assemble-book .55s both cubic-bezier(.17,.75,.2,1);animation-delay:calc(var(--assembly-step,0)*65ms)}
@keyframes assemble-book{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.book-connections{margin-top:15px;padding-top:12px;border-top:1px solid #cfdfeb}.preview-panel .book-connections p{font-size:14px!important;line-height:1.4!important;margin-bottom:10px!important}
#connected-books{display:flex;flex-wrap:wrap;gap:6px}.connected-book{display:flex;gap:7px;align-items:center;background:#eff8ff;border:1px solid #bfd8ea;border-radius:4px;min-height:44px;padding:5px 8px;color:#184564;font-size:14px;text-align:left}.connected-book img{width:20px;height:30px;object-fit:contain}.connected-book:hover{background:#dcefff;border-color:#269cda}
.book-trail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:17px;border-top:1px solid #d3e5ee;padding-top:12px}
.trail-book{min-width:0;padding:7px 2px;background:transparent;border:1px solid transparent;border-radius:4px;color:#536979}.trail-book img{width:27px;height:40px;object-fit:contain;display:block;margin:auto auto 5px}.trail-book span{font-size:12px;line-height:1.2;display:block}.trail-book[aria-current=true]{border-color:#63b6e1;background:#e5f6ff;color:#075881}.trail-book:hover{background:#f0f8fd}
.preview-panel.is-projecting #preview-links{margin-top:14px}.preview-panel.is-projecting #preview-links a:first-child{background:#0072b4;color:white;border:0;border-radius:4px;padding:11px 14px;min-height:44px;margin:0}
@media(max-width:1050px){.book-world{grid-template-columns:minmax(0,1fr) 350px;gap:15px;padding:0 20px}.book-world .stage{height:560px}:root{--size:clamp(260px,32vw,310px)}.book-world .preview-panel{padding:19px}}
@media(max-width:780px){.book-world{grid-template-columns:1fr;padding:0 20px;gap:0;max-width:580px}.book-world .stage{height:350px}.book-world .preview-panel{margin:0 0 22px}.projection-assembly{grid-template-columns:110px minmax(0,1fr)}:root{--size:clamp(240px,58vw,300px)}.book-world .projection-beam{z-index:0}.intro .hint{max-width:310px;margin:10px auto 0}.projection-toolbar{margin-top:14px}}
@media(max-width:380px){.book-world{padding:0 12px}.book-world .preview-panel{padding:16px}.projection-assembly{grid-template-columns:90px minmax(0,1fr);gap:10px}.projection-toolbar{gap:9px}.trail-book span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.beam-line,.is-assembling .projection-art,.is-assembling .projection-topic{animation:none}.book.is-projecting{transform:translateZ(var(--lift)) rotateZ(var(--tilt))}}
.contact-preview{display:grid;align-content:center;gap:6px;padding:10px;background:#eef7fd;color:#264c65;line-height:1.3}.contact-heading{font-size:12px;font-weight:700;letter-spacing:.08em}.contact-field{font-size:12px;background:#fff;border:1px solid #bddbed;padding:4px 6px;border-radius:2px;text-shadow:none}
/* A pop-up diorama shares the cube's 3D space; it never clips to the top face. */
.city-diorama{position:absolute;left:50%;top:0;width:0;height:0;transform:translateY(calc(var(--size)*.10));transform-style:preserve-3d;pointer-events:none;--city-height:calc(var(--size)*.70);--terrain-size:calc(var(--size)*.94)}
.city-terrain{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;pointer-events:none}
.city-ground{position:absolute;left:calc(var(--terrain-size)*-.5);top:calc(var(--terrain-size)*-.5);width:var(--terrain-size);height:var(--terrain-size);background:#cc3e27 url('/images/cube/city-ground.webp') center/cover;transform:rotateX(90deg);backface-visibility:hidden;border-radius:6%;box-shadow:inset 0 0 18px #58171999}
.city-earth{position:absolute;left:calc(var(--terrain-size)*-.5);top:0;width:var(--terrain-size);height:calc(var(--size)*.045);background:#923520 url('/images/cube/city-ground.webp') center/cover;backface-visibility:hidden;filter:brightness(.73);transform-origin:center top}
.city-earth-front{transform:translateZ(calc(var(--terrain-size)*.5))}.city-earth-back{transform:rotateY(180deg) translateZ(calc(var(--terrain-size)*.5))}.city-earth-left{transform:rotateY(-90deg) translateZ(calc(var(--terrain-size)*.5))}.city-earth-right{transform:rotateY(90deg) translateZ(calc(var(--terrain-size)*.5))}
.city-earth-bottom{position:absolute;left:calc(var(--terrain-size)*-.5);top:calc(var(--terrain-size)*-.5);width:var(--terrain-size);height:var(--terrain-size);background:#792918;transform:translateY(calc(var(--size)*.045)) rotateX(-90deg);backface-visibility:hidden;border-radius:6%}
.city-elevation{position:absolute;left:calc(var(--size)*-.55);bottom:calc(var(--size)*-.005);width:calc(var(--size)*1.10);height:var(--city-height);transform-style:preserve-3d;transform-origin:50% 100%;backface-visibility:hidden;pointer-events:none;will-change:opacity}
.city-elevation img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none;-webkit-user-drag:none;user-select:none}
.city-front{transform:translateZ(calc(var(--size)*.10))}.city-right{transform:rotateY(90deg) translateZ(calc(var(--size)*.10))}.city-back{transform:rotateY(180deg) translateZ(calc(var(--size)*.10))}.city-left{transform:rotateY(-90deg) translateZ(calc(var(--size)*.10))}
.face.top .art-face{padding:5%;justify-content:flex-end;gap:3px;background:none;box-shadow:none;overflow:visible}.art-face::after{display:none}.art-face .face-number{display:none}.art-face .city-landing{flex:1;width:100%;pointer-events:none}.art-face .face-title{font-size:clamp(24px,4vw,32px)}.art-face .face-note{font-size:14px;display:block}
/* Reserve headroom for the skyline so it does not cover the introduction. */
.book-world .stage{height:650px;padding-top:110px}.book-world .preview-panel{margin-top:100px}
@media(max-width:1050px){.book-world .stage{height:640px;padding-top:110px}.book-world .preview-panel{margin-top:100px}}
@media(max-width:780px){.book-world .stage{height:510px;padding-top:105px}.book-world .preview-panel{margin-top:0}.city-diorama{--city-height:calc(var(--size)*.70)}}
@media(prefers-reduced-motion:reduce){.city-elevation{will-change:auto}}

/* Preserve the floating artwork at the existing cube plane. */
.city-earth,.city-earth-bottom,.city-ground{display:none}
.art-face{cursor:grab!important}