/* Lunea web app. Values come from the Lunea tokens (vendor/tokens.css). */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root { --ease: cubic-bezier(.32, .72, 0, 1); --ease-out: cubic-bezier(.2, .7, .2, 1); --frame: #e9e1d2; }
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; }
#root { height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: .05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
button { font: inherit; color: inherit; }
a { color: inherit; }
img { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; background: var(--paper); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 560px) { body { background: var(--frame); } .app { box-shadow: 0 0 0 1px rgba(51, 71, 59, .06), 0 30px 80px rgba(43, 36, 33, .08); } }
.screen { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; animation: lu-screen .7s var(--ease) both; }
.screen::-webkit-scrollbar { display: none; }
.pad { padding-left: 24px; padding-right: 24px; }
.grow { flex: 1 1 auto; }
.foot { position: sticky; bottom: 0; margin-top: auto; padding: 22px 24px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px; z-index: 4; background: linear-gradient(rgba(246, 245, 235, 0), var(--paper) 26px); }

/* bars */
.bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr); align-items: center; min-height: 54px; padding: calc(6px + env(safe-area-inset-top)) 12px 0; font: 400 17px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); position: relative; z-index: 3; }
.bar-mark { height: 20px; width: auto; }
@media (max-width: 600px) { .bar-mark { height: 22px; } }
.mepill { text-decoration: none; }
.mepill svg { width: 13px; height: 13px; flex: none; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; transition: background .4s var(--ease), transform .4s var(--ease); }
.icon-btn:hover { background: rgba(51, 71, 59, .06); }
.icon-btn:active { transform: scale(.94); }
/* back: the arrow says it in words too */
.backbtn { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 2px; margin-left: -6px; color: var(--ink); font: 400 15px/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border-radius: 999px; transition: background .4s var(--ease); }
.backbtn .ico { width: 22px; height: 22px; }
/* the pressed look is a small pill around the word, never the whole tall tap area, and only on screens with a real pointer */
@media (hover: hover) { .backbtn:hover { background: rgba(51, 71, 59, .06); } }
.backbtn { border-radius: 999px; height: 36px; margin-top: 4px; margin-bottom: 4px; padding: 0 12px 0 4px; }
.backbtn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px 24px 0; }
.steps i { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; position: relative; }
.steps i.is-done::after, .steps i.is-on::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; }
.steps i.is-on::after { animation: lu-fillx .9s var(--ease) both; }

/* type */
.eyebrow { font: 400 15px/1.15 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.h1 { font: 600 clamp(27px, 7.4vw, 33px)/1.05 var(--font-display); letter-spacing: -.02em; margin: 0; color: var(--ink); text-wrap: balance; }
.h2 { font: 600 23px/1.1 var(--font-display); letter-spacing: -.015em; margin: 0; color: var(--ink); }
.h3 { font: 600 17px/1.2 var(--font-display); letter-spacing: -.01em; margin: 0; }
.lead { font: 400 19px/1.15 var(--font-data); letter-spacing: .02em; color: var(--ember); margin: 0; text-wrap: pretty; }
.p { font: 400 15.6px/1.6 var(--font-text); margin: 0; color: var(--ink); text-wrap: wrap; }
.p-soft { font: 400 14px/1.5 var(--font-text); margin: 0; color: var(--ink-soft); text-wrap: pretty; }
.vt { font-family: var(--font-data); letter-spacing: .07em; text-transform: uppercase; }
.glyph { font-family: var(--font-glyph); font-weight: 400; text-transform: none; }
.stack { display: flex; flex-direction: column; }
.g6 { gap: 6px; } .g10 { gap: 10px; } .g14 { gap: 14px; } .g20 { gap: 20px; }

/* buttons: sage pill with the arrow in its own circle */
.cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; width: 100%; padding: 5px 5px 5px 22px; border-radius: 999px; border: 1px solid transparent; background: var(--sage); color: var(--ink); font: 400 20px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .5s var(--ease), transform .5s var(--ease); }
.cta > span:first-child { flex: 1; text-align: center; padding-left: 36px; }
.cta .nub { flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .55); display: inline-flex; align-items: center; justify-content: center; transition: transform .5s var(--ease); }
.cta .nub .ico { width: 20px; height: 20px; }
.cta:hover { background: var(--sage-strong); }
.cta:hover .nub { transform: translateX(3px) scale(1.04); }
.cta:active { transform: scale(.985); }
.cta[disabled], .cta.is-busy { opacity: .55; cursor: default; }
.cta.ghost { background: transparent; border-color: var(--line-strong); }
.cta.ghost .nub { background: rgba(51, 71, 59, .06); }
.cta.ghost:hover { background: var(--card); }
.link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; font: 400 16px/1 var(--font-data); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; background: none; border: 0; cursor: pointer; }
.link:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.cta:focus-visible { border-radius: 999px; }

/* fields */
.field { display: flex; flex-direction: column; gap: 7px; position: relative; }
.field label, .lab { font: 400 14px/1 var(--font-data); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.shell { border-radius: 16px; padding: 4px; background: rgba(51, 71, 59, .045); box-shadow: inset 0 0 0 1px rgba(51, 71, 59, .08); transition: box-shadow .4s var(--ease); }
.shell:focus-within { box-shadow: inset 0 0 0 1px var(--line-strong); }
.input { width: 100%; height: 46px; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); padding: 0 14px; font: 400 20px/1 var(--font-data); text-align: left; letter-spacing: .03em; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6); -webkit-appearance: none; appearance: none; }
.input:focus { outline: none; }
/* no yellow autofill on iPhone and Chrome: keep the card colour */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus, .input:autofill { -webkit-box-shadow: 0 0 0 60px var(--card) inset !important; box-shadow: 0 0 0 60px var(--card) inset !important; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s; }
.input::placeholder { color: #8c968e; }
.hint { font: 400 15px/1.25 var(--font-data); letter-spacing: .04em; color: var(--ink-soft); margin: 0; }
.err { font: 400 17px/1.25 var(--font-data); letter-spacing: .04em; color: var(--link); margin: 0; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; font: 400 16px/1.1 var(--font-data); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.places { list-style: none; margin: 6px 0 0; padding: 4px; border-radius: 14px; background: var(--card); box-shadow: 0 1px 2px rgba(43, 36, 33, .05), 0 12px 30px rgba(43, 36, 33, .08); }
.places button { width: 100%; text-align: left; background: none; border: 0; padding: 11px 12px; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.places button:hover, .places button:focus-visible { background: rgba(51, 71, 59, .06); }
.places b { font: 600 16px/1.1 var(--font-display); }
.places span { font: 400 15px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.code { letter-spacing: .5em; text-align: center; font-size: 28px; }
.dt .shell { position: relative; }
.dt .ph { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font: 400 20px/1 var(--font-data); letter-spacing: .03em; color: #8c968e; pointer-events: none; z-index: 2; }
.dt.has .ph { display: none; }
.dt.is-empty .input { color: transparent; }
.dt.is-empty .input:focus { color: var(--ink); }
.dt.is-empty .shell:focus-within .ph { display: none; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; }

/* cards */
.bezel { border-radius: 26px; padding: 6px; background: rgba(51, 71, 59, .04); box-shadow: inset 0 0 0 1px rgba(51, 71, 59, .07); }
.core { border-radius: 20px; background: var(--card); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(43, 36, 33, .04); padding: 18px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 14px; align-items: center; min-height: 64px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: background .4s var(--ease); }
.row .t { font: 600 18px/1.1 var(--font-display); letter-spacing: -.01em; }
.row .s { font: 400 15px/1.1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.row .ico { width: 18px; height: 18px; color: var(--ink-soft); }

/* tab bar */
.tabs { position: sticky; bottom: 0; margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(246, 245, 235, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); z-index: 5; }
.tab { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 48px; justify-content: center; font: 400 14px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.tab.is-on { color: var(--ink); }
.tab.is-wait { opacity: .38; }
.tab.is-on::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ember); }

/* hero card */
.hero { position: relative; border-radius: 24px; overflow: hidden; color: #f7f2ea; aspect-ratio: 1 / .86; isolation: isolate; }
.hero .art { position: absolute; left: 50%; top: 50%; width: 112%; aspect-ratio: 1; transform: translate(-50%, -52%); }
.hero .art .lu-illus { width: 100% !important; height: 100% !important; }
.hero .cap { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 2; }
.play { width: 52px; height: 52px; border-radius: 50%; border: 1.25px solid currentColor; display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; background: none; flex: none; cursor: pointer; }

/* illustrations */
.ill { position: relative; margin: 0 auto; flex: none; }
.app .lu-illus, .sheet .lu-illus { box-shadow: none !important; border-radius: 0 !important; }
.ill.big { width: min(330px, 84vw, 42dvh); margin: -6px auto -14px; position: relative; }
.vig canvas { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.ill .lu-illus, .ill .lu-wheel { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.halo { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(246, 196, 83, .36), rgba(246, 196, 83, 0) 68%); animation: lu-breathe 6s ease-in-out infinite; pointer-events: none; }
.orbit { position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(51, 71, 59, .22); animation: lu-spin 9s linear infinite; }
.orbit::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ember); }
.picon { position: relative; width: 44px; height: 44px; }

/* sparkles */
.sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sky i { position: absolute; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: lu-twinkle 3.6s ease-in-out infinite both; }
.sky.is-light i { background: var(--thread); }
.sky i:nth-child(1) { left: 9%; top: 12%; animation-delay: -.2s; }
.sky i:nth-child(2) { left: 84%; top: 9%; width: 14px; height: 14px; animation-delay: -1.4s; }
.sky i:nth-child(3) { left: 72%; top: 27%; width: 7px; height: 7px; animation-delay: -2.1s; }
.sky i:nth-child(4) { left: 16%; top: 34%; width: 6px; height: 6px; animation-delay: -.9s; }
.sky i:nth-child(5) { left: 90%; top: 44%; width: 9px; height: 9px; animation-delay: -3s; }
.sky i:nth-child(6) { left: 5%; top: 55%; width: 12px; height: 12px; animation-delay: -1.8s; }
.sky i:nth-child(7) { left: 63%; top: 6%; width: 6px; height: 6px; animation-delay: -2.7s; }
.sky i:nth-child(8) { left: 30%; top: 7%; width: 8px; height: 8px; animation-delay: -.5s; }
.sky i:nth-child(9) { left: 80%; top: 62%; width: 7px; height: 7px; animation-delay: -1.1s; }
.sky i:nth-child(10) { left: 22%; top: 66%; width: 6px; height: 6px; animation-delay: -2.4s; }
.sky i:nth-child(11) { left: 48%; top: 18%; width: 5px; height: 5px; animation-delay: -3.3s; }
.sky i:nth-child(12) { left: 40%; top: 48%; width: 5px; height: 5px; animation-delay: -1.6s; }

/* motion */
/* no bobbing: things stay still, only orbits and the wheel turn */
.float, .float-2, .float-3 { animation: none; }
.spin { animation: lu-spin 140s linear infinite; }
.drift { animation: lu-drift 18s ease-in-out infinite alternate; }
.rise { animation: lu-rise .9s var(--ease-out) both; }
.d1 { animation-delay: .12s; } .d2 { animation-delay: .24s; } .d3 { animation-delay: .36s; } .d4 { animation-delay: .48s; } .d5 { animation-delay: .6s; } .d6 { animation-delay: .72s; } .d7 { animation-delay: .84s; } .d8 { animation-delay: .96s; }
.sweep { -webkit-mask: conic-gradient(#000 var(--sweep), transparent 0); mask: conic-gradient(#000 var(--sweep), transparent 0); animation: lu-sweep 4.6s cubic-bezier(.45, 0, .2, 1) both; }
.fillbar { height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.fillbar i { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: lu-fillx 4.6s cubic-bezier(.45, 0, .2, 1) both; }
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.log li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; font: 400 17px/1.1 var(--font-data); letter-spacing: .07em; text-transform: uppercase; animation: lu-rise .6s var(--ease-out) both; }
.log li span:last-child { color: var(--ink-soft); }
.bob { animation: lu-bob 5s ease-in-out infinite; transform-origin: 50% 70%; }
.ripple { position: absolute; left: 50%; border-radius: 50%; border: 1px solid rgba(51, 71, 59, .35); transform: translateX(-50%) scale(.3); opacity: 0; animation: lu-ripple 5s ease-out infinite; }
.ripple.r2 { animation-delay: 1.7s; } .ripple.r3 { animation-delay: 3.4s; }
.sway { animation: lu-sway 8s ease-in-out infinite; transform-style: preserve-3d; }

@keyframes lu-screen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lu-twinkle { 0%, 100% { opacity: .12; transform: scale(.55) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes lu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lu-spin { to { transform: rotate(360deg); } }
@keyframes lu-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes lu-drift { from { transform: translate(-50%, -52%) scale(1.02); } to { transform: translate(-52%, -54%) scale(1.1); } }
@keyframes lu-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lu-sweep { from { --sweep: 0deg; } to { --sweep: 360deg; } }
@keyframes lu-fillx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lu-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes lu-ripple { 0% { transform: translateX(-50%) scale(.3); opacity: .9; } 100% { transform: translateX(-50%) scale(1.5); opacity: 0; } }
@keyframes lu-sway { 0%, 100% { transform: rotateY(-16deg) rotateX(4deg); } 50% { transform: rotateY(-6deg) rotateX(2deg); } }

/* tappable points */
.prows li { border-top: 1px solid var(--line); }
.prows li:last-child { border-bottom: 1px solid var(--line); }
.prow { width: 100%; display: grid; grid-template-columns: 76px minmax(0, 1fr) 24px; gap: 14px; align-items: center; padding: 16px 0; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); transition: background .4s var(--ease); }
.row, .prow { -webkit-tap-highlight-color: transparent; }
.prow { -webkit-tap-highlight-color: transparent; }
.prow:active .picon { transform: scale(.96); }
.prow .picon { transition: transform .4s var(--ease); }
.prow-go { color: var(--ink-soft); display: flex; justify-content: flex-end; }
.prow-go .ico { width: 18px; height: 18px; }
.prow-go.is-seen { color: var(--ember); }

/* tour */
.dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .4s var(--ease), transform .4s var(--ease); }
.dots i.is-on { background: var(--ink); transform: scale(1.3); }

/* houses grid */
.hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.htile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.hart { aspect-ratio: 1; border-radius: 16px; background: var(--illustration-ground); overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; transition: transform .5s var(--ease); }
.htile:hover .hart { transform: translateY(-2px); }
.hart .lu-illus { width: 100% !important; height: 100% !important; }
.hart .pl { position: absolute; right: 6px; top: 6px; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(246, 245, 235, .85); }
.hart .pl .lu-picon { width: 18px !important; height: 18px !important; }
.hl { display: flex; justify-content: space-between; gap: 4px; white-space: nowrap; font: 400 15px/1 var(--font-data); letter-spacing: .05em; text-transform: uppercase; }
.hl > span:last-child { color: var(--ink-soft); }

/* full screen view inside the app */
.view { position: absolute; inset: 0; z-index: 20; background: var(--paper); display: flex; flex-direction: column; animation: lu-in .5s var(--ease) both; outline: none; }
.view-bar { flex: none; background: var(--paper); border-bottom: 1px solid transparent; }
.view-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.view-body::-webkit-scrollbar { display: none; }
.view-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 24px calc(16px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -18px 18px -6px var(--paper); z-index: 2; transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; transition: transform .5s var(--ease), opacity .35s ease, visibility 0s linear .5s; }
.view-foot.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .5s var(--ease), opacity .35s ease, visibility 0s; }
.view-body.has-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .view-foot, .view-foot.is-on { transition: none; } }
@keyframes lu-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* home: your sky card */
.skycard { position: relative; border-radius: 26px; background: var(--illustration-ground); box-shadow: inset 0 0 0 1px rgba(51, 71, 59, .08); padding: 18px 16px 18px; overflow: hidden; isolation: isolate; }
.skycard::after { content: ""; position: absolute; inset: 7px; border-radius: 20px; border: 1px solid rgba(51, 71, 59, .28); pointer-events: none; }
.skycard-wheel { width: min(250px, 66vw); margin: 4px auto 0; position: relative; z-index: 2; }
.skycard-wheel .lu-wheel { width: 100% !important; height: auto !important; }
.skycard-t { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 10px; }
.skycard-name { margin: 0; font: 600 30px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-align: center; }
.skycard-name span { font-size: .62em; color: var(--ink-soft); margin-left: 2px; }
.skycard-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(51, 71, 59, .16); }
.three-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 0 6px; border-bottom: 1px solid var(--line); }
.b3 { display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); text-align: center; padding: 6px 0 2px; }
.b3 .vt { font-size: 13px; line-height: 1.15; color: var(--ink-soft); }
.b3 b { font-weight: 400; font-size: 16px; color: var(--ink); }

/* home: the book */
.bookcard { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px 16px 14px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px rgba(51, 71, 59, .08), 0 10px 30px rgba(43, 36, 33, .06); text-decoration: none; color: var(--ink); }
.bookcard-cover { perspective: 700px; display: flex; justify-content: center; }
.booknote { display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; margin: 22px 24px 8px; padding: 14px 16px; border-radius: 16px; background: var(--illustration-ground); text-decoration: none; color: var(--ink); }
.booknote .vt { font-size: 16px; } .booknote .p-soft { grid-column: 1; font-size: 13px; } .booknote .ico { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--ink-soft); }

.free { margin: 4px 0 0; text-align: center; font: 400 14px/1.2 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.freelist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.freelist li { display: flex; align-items: center; gap: 10px; font: 400 15px/1.2 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.freelist li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--ember); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: scale(1.6); }

/* sheet */
.sheet-bg { position: fixed; inset: 0; background: rgba(43, 36, 33, .28); z-index: 20; animation: lu-fade .4s var(--ease) both; }
.sheet { position: fixed; left: 50%; bottom: 0; width: 100%; max-width: 480px; max-height: 88dvh; overflow: auto; transform: translateX(-50%); background: var(--paper); border-radius: 26px 26px 0 0; z-index: 21; padding: 10px 24px calc(28px + env(safe-area-inset-bottom)); animation: lu-up .6s var(--ease) both; }
.grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 4px auto 10px; }
@keyframes lu-fade { from { opacity: 0; } }
@keyframes lu-up { from { transform: translate(-50%, 40px); opacity: 0; } }

/* book */
.stage { position: relative; height: 290px; display: flex; align-items: center; justify-content: center; perspective: 900px; flex: none; }
.stage .shadow { position: absolute; bottom: 6px; left: 50%; width: 200px; height: 18px; margin-left: -100px; border-radius: 50%; background: radial-gradient(closest-side, rgba(43, 36, 33, .22), rgba(43, 36, 33, 0)); }
.fmt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 64px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; text-align: left; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.opt b { font: 400 18px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.opt span { font: 600 17px/1 var(--font-display); }
.opt[aria-pressed="true"] { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(43, 36, 33, .05), 0 8px 22px rgba(43, 36, 33, .08); }
.sws { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(51, 71, 59, .25); cursor: pointer; padding: 0; position: relative; }
.sw[aria-pressed="true"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ink); }
.covs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 24px 8px; margin: 0 -24px; scrollbar-width: none; scroll-snap-type: x proximity; }
.covs::-webkit-scrollbar { display: none; }
.cv { flex: none; width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--line); padding: 0; cursor: pointer; overflow: hidden; scroll-snap-align: start; }
.cv .lu-illus { width: 100% !important; height: 100% !important; }
.cv[aria-pressed="true"] { border: 1.5px solid var(--ink); }
.status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.status li { display: flex; flex-direction: column; gap: 8px; font: 400 15px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.status li::before { content: ""; height: 2px; background: var(--line); }
.status li.is-on { color: var(--ink); } .status li.is-on::before { background: var(--ink); }
.toast { position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: 420px; bottom: calc(96px + env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); padding: 13px 20px; border-radius: 22px; font: 400 17px/1.25 var(--font-data); letter-spacing: .05em; text-transform: uppercase; z-index: 40; animation: lu-rise .5s var(--ease) both; text-align: center; }

@media (max-width: 360px) {
  .hl > span:last-child { display: none; }
  .input { font-size: 20px; padding: 0 10px; }
  .pad { padding-left: 18px; padding-right: 18px; }
  .foot { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sweep { -webkit-mask: none; mask: none; }
}

/* read state and the house list */
.prow { grid-template-columns: 76px minmax(0, 1fr) auto; }
.prow.is-read .p-soft { opacity: .62; }
.prow.is-read .picon, .prow.is-read .hthumb { opacity: .78; }
.readtag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 7px; border-radius: 999px; background: rgba(194, 80, 15, .1); color: var(--ember); font: 400 14px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.readtag .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.hthumb { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--illustration-ground); display: block; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.hthumb .lu-illus { width: 100% !important; height: 100% !important; box-shadow: none !important; }
.prow:active .hthumb { transform: scale(.96); }
.hrow { align-items: start; }
.hrow > .prow-go { align-self: center; }
.hname { font-weight: 500; color: var(--ink); }
.hpl { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.hpl-i { display: inline-flex; align-items: center; gap: 4px; font: 400 14px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.hpl-i .lu-picon { width: 16px !important; height: 16px !important; }
.glyph.is-txt { font-family: var(--font-data); font-size: 1em; letter-spacing: .04em; }
.tl-n .tl-g { margin-right: 3px; }

/* the book, page by page */
.flipwrap { position: relative; z-index: 2; flex: none; padding-top: 4px; }
.flip { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 14px calc((100% - var(--pw)) / 2) 22px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; outline: none; }
.flip::-webkit-scrollbar { display: none; }
.flip-i { flex: none; scroll-snap-align: center; transition: transform .6s var(--ease), opacity .6s var(--ease); transform: scale(.92); opacity: .55; cursor: pointer; }
.flip-i.is-on { transform: none; opacity: 1; cursor: default; }
.flip-i > * { box-shadow: 0 1px 2px rgba(43, 36, 33, .08), 0 14px 30px rgba(43, 36, 33, .16); }
.bp-cover, .bp-open { display: block; width: var(--pw); }
.bp-cover > *, .bp-open > * { box-shadow: none !important; }
.flip-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: -6px; }
.flip-nav .lab { min-width: 150px; text-align: center; }
.flip-cue { appearance: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 10px 6px; animation: flipCue 2.4s ease-in-out infinite; }
.flip-cue:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 8px; }
@keyframes flipCue { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .flip-cue { animation: none; } }
.flip-nav .icon-btn:disabled { opacity: .25; }
.bpage { --pf: calc(var(--w) / 29.6); width: var(--w); aspect-ratio: 148 / 210; font-size: var(--pf); background: #f7f2e7; color: var(--ink); position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2.6em 2.3em 3em; border-radius: 2px; }
.bpage::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(43, 36, 33, .06), rgba(43, 36, 33, 0) 8%); }
.bp-no { position: absolute; bottom: 1.4em; left: 0; right: 0; text-align: center; font: 400 1em/1 var(--font-data); letter-spacing: .1em; color: var(--ink-soft); }
.bp-eye { margin: 0 0 .7em; font: 400 1.05em/1.1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bp-h { margin: 0 0 .5em; font: 600 2.15em/1.05 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.bp-lead { margin: 0 0 1em; font: 400 1.25em/1.15 var(--font-data); color: var(--ember); }
.bp-body { flex: 1 1 auto; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.bp-body p, .bp-p { margin: 0 0 .8em; font: 400 .98em/1.55 var(--font-text); }
.bp-title { align-items: center; text-align: center; }
.bp-mark { width: 5.2em; height: auto; }
.bp-wheel { width: 19em; margin: 1.4em auto 1.2em; }
.bp-wheel .lu-wheel { width: 100%; height: auto; display: block; }
.bp-name { margin: 0 0 .5em; font: 600 3em/1 var(--font-display); letter-spacing: -.02em; }
.bp-data { margin: 0; font: 400 1.05em/1.5 var(--font-data); letter-spacing: .1em; color: var(--ink-soft); }
.bp-three { list-style: none; margin: .6em 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.2em; }
.bp-three li { display: grid; grid-template-columns: 4.4em 1fr; gap: 1em; align-items: center; }
.bp-three b { display: block; font: 400 1.2em/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3em; }
.bp-three span { font: 400 .98em/1.45 var(--font-text); }
.bp-ic { width: 4.4em; height: 4.4em; display: flex; align-items: center; justify-content: center; }
.bp-ic .lu-picon { width: 100% !important; height: 100% !important; }
.bp-sum { margin: 1.4em 0 0; font: 400 .98em/1.55 var(--font-text); color: var(--ink-soft); -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); max-height: 9em; overflow: hidden; }
.bp-end { align-items: center; justify-content: center; text-align: center; }
.bp-endill { width: 13em; margin-bottom: 1em; }
.bp-endill .lu-illus { width: 100% !important; height: auto !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { .flip-i { transition: none; } }
.bp-endill canvas { -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); }
.bpage.is-full .bp-body { -webkit-mask-image: none; mask-image: none; }
.bp-wheel.big { width: 21em; margin: .4em auto 1.2em; }
.bp-table { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .35em 1.4em; font: 400 .92em/1.25 var(--font-data); letter-spacing: .06em; text-transform: uppercase; }
.bp-table li { display: grid; grid-template-columns: 1.4em 1fr auto; gap: .3em; align-items: baseline; border-bottom: 1px solid rgba(51, 71, 59, .14); padding-bottom: .25em; }
.bp-table li span:nth-child(2) { display: none; }
.bp-table li span:last-child { color: var(--ink-soft); }
.bp-part { justify-content: center; text-align: center; align-items: center; }
.bp-part .bp-p { max-width: 20em; color: var(--ink-soft); }
.bp-back { align-items: center; justify-content: center; gap: 1em; }
.bp-bars { list-style: none; margin: .8em 0 1.4em; padding: 0; display: flex; flex-direction: column; gap: .7em; }
.bp-bars li { display: grid; grid-template-columns: 6.5em 1fr 1.5em; align-items: center; gap: .6em; font: 400 1em/1 var(--font-data); letter-spacing: .1em; text-transform: uppercase; }
.bp-bars i { height: .55em; border-radius: 99px; background: var(--sage-strong); display: block; }
.bp-bars b { font-weight: 400; text-align: right; }
.bookhost { position: fixed; left: -12000px; top: 0; width: 420px; pointer-events: none; }
.bookhost .bp-cover, .bookhost .bp-open { width: 420px; }
.pbar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 6px; }
.pbar i { display: block; height: 100%; background: var(--ink); border-radius: 99px; transition: width .5s var(--ease); }
.hthumb .lu-illus { transform: scale(1.28); transform-origin: 50% 74%; }
.prow.is-read { grid-template-columns: 76px minmax(0, 1fr); }
.prow-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prow-t .readtag { flex: none; padding: 4px 8px 4px 6px; font-size: 13px; }
.barpill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px 0 11px; border-radius: 999px; background: var(--sage); color: var(--ink); text-decoration: none; font: 400 15px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background .3s var(--ease); }
.barpill:active { background: var(--sage-strong); }
.barpill .ico { width: 16px; height: 16px; }
.bar:has(> :nth-child(3)) { display: grid; grid-template-columns: 1fr auto 1fr; }
.bar:has(> :nth-child(3)) > :first-child { justify-self: start; }
.bar:has(> :nth-child(3)) > :last-child { justify-self: end; }
.chartcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 -24px; padding: 4px 0 6px; text-decoration: none; color: var(--ink-soft); -webkit-tap-highlight-color: transparent; }
.chartcard::before { content: ''; position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 223, 198, .75), rgba(243, 223, 198, 0)); pointer-events: none; }
.chartcard-w { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: -5% 0 -7%; }
.chartcard .lab { position: relative; }
.chartcard-w .lu-wheel { width: 100%; height: 100%; display: block; }
.hero { border-radius: 16px; }
.hero .art.is-wheel { width: 90%; transform: translate(-50%, -56%); }
.hero .art.is-wheel .lu-wheel { width: 100%; height: 100%; display: block; }
/* one gutter for everything: bar, hero, lists */
.bar { padding-left: 24px; padding-right: 24px; }
.bar > :first-child { justify-self: start; }
.bar > :last-child { justify-self: end; }
.bar > .icon-btn:first-child { margin-left: -10px; }
.bar > .icon-btn:last-child { margin-right: -10px; }
.prow, .prow.is-read { grid-template-columns: 76px minmax(0, 1fr); }
.prow-t .prow-go { flex: none; display: flex; align-items: center; }
.hthumb .lu-illus { transform: scale(1.5); transform-origin: 50% 60%; }
.foot.is-flow { position: static; margin-top: 8px; background: none; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
/* Safari on iPhone: the document never moves, only the screens scroll inside */
/* (the document is no longer pinned with position: fixed: on a reload Chrome on iPhone restored a hidden offset under it) */
.prow-t .readtag { width: 24px; height: 24px; padding: 0; justify-content: center; border-radius: 50%; }
.prow-t .readtag .ico { width: 14px; height: 14px; }
.prow-t .vt { font-size: 19px !important; letter-spacing: .06em; }
.barpill { background: none; padding: 0 4px; }
.barpill:active { background: none; opacity: .6; }
.bal-bars { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.bal-bar { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 10px; color: var(--ink-soft); }
.bal-bar .vt { font-size: 17px; text-transform: uppercase; letter-spacing: .08em; }
.bal-bar.is-top { color: var(--ink); }
.bal-bar .dots { display: flex; gap: 6px; }
.bal-bar .dots i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink); opacity: .5; }
.bal-bar .dots i.on { opacity: 1; border-color: transparent; background: radial-gradient(circle at 35% 35%, #f6c453, #eb6819 70%, #be4d13); }
.bal-bar .g { font-family: var(--font-glyph); font-size: 15px; letter-spacing: .06em; }
.bal-asp { list-style: none; margin: 0; padding: 0; }
.bal-asp li { display: grid; grid-template-columns: 66px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bal-asp li:first-child { border-top: 1px solid var(--line); }
.bal-asp .g { font-family: var(--font-glyph); color: var(--ember); font-size: 16px; padding-top: 2px; white-space: nowrap; }
.bal-asp .vt { font-size: 17px; text-transform: uppercase; letter-spacing: .06em; }
.bal-bar { grid-template-columns: 86px 116px minmax(0, 1fr); }
.bal-bar .g { text-align: right; }
.hero:has(.is-wheel) { aspect-ratio: 1 / 1.04; }
.hero .art.is-wheel { width: 84%; transform: translate(-50%, -60%); }
.bkf { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 6px; flex: none; }
.bkf-stage { position: relative; perspective: 1800px; }
/* closed, the book stands a little turned, with its pages showing on the right; opened, it lies flat */
.bkf-3d { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform-origin: 50% 50%; transition: transform .8s var(--ease); }
.bkf-3d.is-closed { transform: rotateY(-17deg) rotateX(3deg); }
.bkf-edge { position: absolute; top: 0; transform-origin: 0 50%; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #f3eee4 0 1px, #e2dbcf 1px 2px); box-shadow: inset 6px 0 10px -4px rgba(0,0,0,.25); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.bkf-spine { position: absolute; top: 0; width: 6px; background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(0,0,0,.18)); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; z-index: 4; }
.bkf-3d.is-closed .bkf-edge, .bkf-3d.is-closed .bkf-spine { opacity: 1; }
.bkf-floor { position: absolute; bottom: -14px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,0)); filter: blur(4px); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.bkf-stage:has(.is-closed) .bkf-floor { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bkf-3d { transition: none; } }
.bkf-block { position: absolute; inset: 0; z-index: 5; } /* the book stays closed while its chapters are still being written */
.bkf-book { width: 100%; height: 100%; opacity: 0; transition: transform .7s var(--ease), opacity .6s var(--ease); }
.bkf-book.is-ready { opacity: 1; }
.bkf-book .stf__parent { margin: 0 auto; }
.bkf-book .stf__block { filter: drop-shadow(0 12px 22px rgba(43, 36, 33, .2)); }
.bkf-pages { width: 100%; height: 100%; }
.bkf-pages .bk-sheet { font-size: var(--bfs) !important; }
.bookhost { width: auto; }
.bookhost .lu-bookcover { background-image: none !important; }
.pbar.is-wait i { animation: lu-wait 1.8s var(--ease) infinite alternate; }
@keyframes lu-wait { from { transform: translateX(-60%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .pbar.is-wait i { animation: none; } }
/* hero sky dome */
.hero .dome { position: absolute; left: 0; right: 0; top: 0; }
.hero .dome svg { display: block; width: 100%; height: auto; }
.dome-l { position: absolute; font: 400 13px/1 var(--font-data); letter-spacing: .08em; color: rgba(243, 234, 216, .8); }
.dome-p { position: absolute; display: flex; align-items: center; justify-content: center; animation: lu-rise .9s var(--ease) both; }
.dome-p .lu-picon { width: 100% !important; height: 100% !important; }
.dome-p.is-down { opacity: .55; }
.hero:has(.dome) { aspect-ratio: 1 / .94; }
.tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-left: 4px; padding-right: 4px; }
.tab { font-size: 13px; letter-spacing: .06em; }
.hthumb .lu-illus { transform: none; }
.hthumb canvas { transition: transform .3s var(--ease); }
.prow > .stack { gap: 4px !important; }
.prow-t .vt { line-height: 1.15; }
.prow .p-soft { text-wrap: wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* living illustrations: breathing light and slow stardust, no bobbing */
.ill.alive .halo { animation: lu-breathe 7s ease-in-out infinite alternate; }
.ill.alive > .lu-illus, .ill.alive > canvas { animation: lu-glow 11s ease-in-out infinite alternate; }
@keyframes lu-breathe { from { opacity: .55; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes lu-glow { from { filter: saturate(1) brightness(1); } to { filter: saturate(1.12) brightness(1.04); } }
.dust { position: absolute; inset: 6% 10% 14%; pointer-events: none; z-index: 2; overflow: hidden; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.dust i { position: absolute; bottom: -6px; border-radius: 50%; background: #fff8ec; box-shadow: 0 0 6px rgba(255, 244, 220, .9); opacity: 0; animation: lu-dust linear infinite; }
.dust i.is-gold { background: #f6c453; box-shadow: 0 0 8px rgba(246, 196, 83, .8); }
@keyframes lu-dust { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 70% { opacity: .6; } 100% { transform: translate(14px, -320px); opacity: 0; } }
.view-bar .sound.is-on { color: var(--ember); }
@media (prefers-reduced-motion: reduce) { .ill.alive .halo, .ill.alive > .lu-illus, .ill.alive > canvas, .dust i { animation: none; } .dust { display: none; } }

/* language picker: a quiet row, native select for every phone */
.langpick{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 2px;border-bottom:1px solid var(--line, rgba(43,36,33,.14))}
.langpick .lab{margin:0}
.langpick select{appearance:none;-webkit-appearance:none;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%232B2421' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 2px center;padding:10px 20px 10px 8px;font:inherit;font-family:var(--vt, 'VT323', monospace);font-size:17px;color:var(--ink);text-align:right;cursor:pointer;border-radius:8px}
.langpick select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* one label column sized by the longest word, so long languages never touch the dots */
.bal-bars { display: grid; grid-template-columns: max-content 116px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; }
.bal-bar { display: contents; }
.bal-bar > * { color: inherit; }
/* the home film fills the hero card */
.hero .film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .hero-scn { position: absolute; inset: 0; background: #2a3d24; transition: background-color 3.8s ease; }
.hero .hero-scn > canvas:first-child { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .hero-wheel { position: absolute; left: 50%; top: 8.5%; height: 65%; aspect-ratio: 1; transform: translateX(-50%); display: block; opacity: 0; transition: opacity 1.2s ease; }
.hero .hero-wheel.is-on { opacity: 1; }

/* house tiles: as tall as their row, full colour, the drawing fitted inside */
.hrow { align-items: stretch; }
.hrow > .hthumb { align-self: stretch; height: auto; min-height: 76px; position: relative; }
.hthumb .lu-illus { position: absolute; left: 0; top: 0; width: auto !important; height: auto !important; transform: none; }
.prow.is-read .hthumb { opacity: 1; }

/* ---- chapters: drawing never touches the title, the ground melts away before the text ---- */
.ill.big { width: min(320px, 80vw, 40dvh); margin: -6px auto 14px; }
.vig canvas { -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); }
.vig.has-ground canvas { -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%), linear-gradient(to bottom, #000 58%, transparent 90%); -webkit-mask-composite: source-in; mask-image: radial-gradient(closest-side, #000 70%, transparent 100%), linear-gradient(to bottom, #000 58%, transparent 90%); mask-composite: intersect; }
/* the lead writes itself */
.lead { font-size: 21px; line-height: 1.18; }
.typed .tw-rest { visibility: hidden; }
.tw-caret { display: inline-block; position: relative; width: 0; height: 1em; vertical-align: -0.12em; }
.tw-caret::after { content: ''; position: absolute; left: 1px; top: 0; width: .5em; height: 1em; background: currentColor; opacity: .55; animation: lu-caret .9s steps(1) infinite; }
@keyframes lu-caret { 50% { opacity: 0; } }
/* the end of a chapter: the pause page of the book */
.pausebox { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px var(--gutter, 24px) 34px; text-align: center; }
.pause-ill { width: min(230px, 62vw); margin: 0 auto -6px; }
.pause-q { margin: 0; max-width: 18ch; font: 600 27px/1.2 var(--font-display); color: var(--ink); text-wrap: balance; }
/* the home wheel turns into place once, then lights travel along the aspects */
.wheel-live .lu-wheel { transform: rotate(-28deg) scale(.94); opacity: 0; transition: transform 1.9s cubic-bezier(.2,.8,.2,1), opacity 1.2s ease; }
.wheel-live.is-in .lu-wheel { transform: none; opacity: 1; }
.wheel-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wheel-live .lu-wheel { transform: none; opacity: 1; transition: none; } .wheel-ov { display: none; } .tw-caret::after { animation: none; } }
/* the play intro: your whole list */
.tour-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tour-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tour-list .tl-n { font-size: 18px; color: var(--ink); }
.tour-list .tl-d { font: 400 14px/1.3 var(--font-text); color: var(--ink-soft); }
.tour-list .tl-r { font-size: 18px; color: var(--ember); text-align: center; }
/* the app always fills the real visible height (set from JS), so the tab bar sits on the bottom edge */
/* the app is pinned to the visible viewport by the browser itself (top and bottom edges), so a reload can never leave it short or shifted */
/* the app is exactly the visible screen: the browser itself keeps 100dvh in step with its toolbars */
html, body { height: 100%; margin: 0; }
/* the page itself is pinned: iPhone browsers can scroll a document under their toolbars even with overflow hidden,
   and a fixed app then rides up with it. A fixed body cannot scroll, so the app always starts where the screen starts. */
body { position: fixed; inset: 0; width: 100%; overflow: hidden; }
.app { position: fixed; top: 0; bottom: auto; height: 100vh; height: 100dvh; }
/* on a phone the app is simply the whole screen: pinned to the top and the bottom edge, with no measuring at all */
/* on a phone nothing is position: fixed any more. iOS 26 has a WebKit bug: once a keyboard has been up (also the browser's own,
   when you reload from the address bar) fixed layers can stay drawn out of place, the top cut and an empty band under the menu,
   while every measure the page can read says all is fine; only sending the browser to the background put it right. The page is
   simply exactly the screen and the app sits inside it, which that bug does not touch. */
@media (max-width: 979px) {
  html, body { height: 100%; overflow: hidden; }
  body { position: relative; inset: auto; }
  .app { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: auto; transform: none !important; }
}
@supports not (height: 100dvh) { .app { height: var(--app-h, 100vh); } }
/* chapter to chapter: the sheet stays put, only the content slides in */
.view.is-swap { animation: none; }
.view-in { animation: lu-swap .55s var(--ease) both; }
@keyframes lu-swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view-in { animation: none; } }
/* gender choice: three quiet pills */
.flab { font: 400 14px/1 var(--font-data); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.seg-b { min-height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; font: 400 17px/1 var(--font-data); letter-spacing: .06em; color: var(--ink); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.seg-b.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.seg-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tour-list .tl-d { font: 400 16px/1.2 var(--font-data); letter-spacing: .04em; color: var(--ink-soft); }
.riseup { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.riseup.is-on { opacity: 1; transform: none; }
.pausebox { padding-top: 6px; }
/* chapter text waits for the lead, then rises in */
.after > * { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.after.is-on > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .after > * { opacity: 1; transform: none; transition: none; } }
.prow.is-static { grid-template-columns: 76px minmax(0, 1fr); cursor: default; }
/* the pause drawings are small and centred: only a very soft edge */
.pause-ill canvas, .vig.pause-ill canvas { -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent 100%); mask-image: radial-gradient(closest-side, #000 86%, transparent 100%); }
/* drawings with ground: no round vignette (it ate the top and the ground); only the last strip melts into the page */
.vig.has-ground canvas { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 82%, transparent 100%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-composite: intersect; }
.wheel-live .wheel-ov { transform-origin: 50% 50%; }
/* back to the round vignette for drawings with ground, but with a wider clear centre so the ground stays visible */
/* drawings with ground melt into the page in a round fade, the circle lifted a little so what floats above (sun, moon, kite) stays whole */
.vig.has-ground canvas { -webkit-mask-image: radial-gradient(ellipse 48% 54% at 50% 43%, #000 56%, rgba(0,0,0,.9) 65%, rgba(0,0,0,.66) 74%, rgba(0,0,0,.36) 83%, rgba(0,0,0,.12) 92%, transparent 100%); mask-image: radial-gradient(ellipse 48% 54% at 50% 43%, #000 56%, rgba(0,0,0,.9) 65%, rgba(0,0,0,.66) 74%, rgba(0,0,0,.36) 83%, rgba(0,0,0,.12) 92%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }

/* welcome: the living zodiac takes whatever height is left, the text and buttons sit close under it */
.welcome-stage{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;container-type:size;position:relative}
.welcome-art{width:min(420px,96vw,44dvh);width:min(420px,96vw,100cqh)}
.welcome-foot{padding-top:14px}

/* explore: plain buttons into each part of the menu */
.navbtns{display:grid;gap:8px}
.navbtn{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 16px 0 20px;border:1px solid var(--line-strong);border-radius:16px;color:var(--ink);text-decoration:none;transition:background .4s var(--ease),transform .4s var(--ease)}
.navbtn .t{flex:1;font:600 19px/1.15 var(--font-display)}
.navbtn .s{font:400 16px/1 var(--font-data);letter-spacing:.06em;opacity:.7}
.navbtn .ico{width:18px;height:18px;opacity:.7}
.navbtn:hover{background:rgba(51,71,59,.05)}
.navbtn:active{transform:scale(.985)}
.navbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* play on the film: a small paper disc with an ink triangle, like the nub of the buttons */
/* the play on the sky card is drawn in line, like the wheel behind it: a thin ring and an open triangle */
.hero .play { width: 44px; height: 44px; border: 1.25px solid rgba(253, 250, 242, .9); background: rgba(17, 26, 43, .18); color: #fdfaf2; box-shadow: none; transition: transform .4s var(--ease), background .4s var(--ease); }
.hero .play svg { margin-left: -1px; display: block; }
.hero .play:hover { background: rgba(253, 250, 242, .12); }
.hero .play:active { transform: scale(.94); }
.hero .play:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.home-whole { margin-top: -6px; }

/* home: pick up where you left off */
.contcard { display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px 16px 12px 12px; border: 1px solid var(--line-strong); border-radius: 20px; background: rgba(255,255,255,.45); color: var(--ink); text-align: left; font: inherit; text-decoration: none; cursor: pointer; transition: transform .4s var(--ease), background .4s var(--ease); }
.contcard > .stack { flex: 1; min-width: 0; }
/* the chapter name always on one line, cut with an ellipsis, so the card never grows */
.contcard > .stack > .h3 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.contcard .hthumb { width: 84px; height: 84px; flex: none; position: relative; isolation: isolate; }
.contcard .ico { width: 18px; height: 18px; opacity: .7; flex: none; }
.contcard:hover { background: rgba(255,255,255,.7); }
.contcard:active { transform: scale(.985); }
.contcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.contcard.is-done { padding: 18px 18px 18px 20px; }
.contbar { display: block; height: 3px; border-radius: 3px; background: rgba(51,71,59,.12); overflow: hidden; margin-top: 4px; }
.contbar i { display: block; height: 100%; background: var(--ember); border-radius: 3px; transition: width .6s var(--ease); }
.cont-n { font-size: 14px; letter-spacing: .08em; color: var(--ink-soft); }

.hero-vt { display: block; white-space: nowrap; overflow: hidden; max-width: 100%; line-height: 1.05 !important; text-wrap: balance; }
.hero .cap > .stack { flex: 1; }
.hero .cap > .stack { min-width: 0; }

/* a chapter that is still being written for you */
.writing { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.5); border: 1px solid var(--line); }
.writing .wt { font-size: 18px; letter-spacing: .04em; color: var(--ember); }
.writing .wt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.writing .wrow { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.writing .wbar { display: block; flex: 1; height: 3px; border-radius: 3px; background: rgba(0,0,0,.08); overflow: hidden; }
.writing .wpc { font-size: 16px; color: var(--ember); min-width: 3ch; text-align: right; }
.home-whole .cta, .home-whole button { white-space: nowrap; }
.writing .wbar i { display: block; height: 100%; background: var(--ember); border-radius: 3px; transition: width 1s linear; }
.wdots { display: inline-flex; gap: 5px; padding-top: 8px; flex: none; }
.wdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); opacity: .25; animation: lu-wdot 1.2s ease-in-out infinite; }
.wdots i:nth-child(2) { animation-delay: .2s; } .wdots i:nth-child(3) { animation-delay: .4s; }
@keyframes lu-wdot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .wdots i { animation: none; opacity: .7; } }
/* narrow phones: the details button stays clear of the logo */
@media (max-width: 380px) { .barpill { letter-spacing: .03em; font-size: 14px; gap: 4px; } .barpill .ico { display: none; } }

/* the book note carries a small picture of your own book */
.booknote.has-cover { grid-template-columns: 58px minmax(0, 1fr) 20px; column-gap: 16px; padding: 14px 16px 14px 14px; }
.booknote.has-cover .bn-cover { grid-column: 1; grid-row: 1 / span 2; display: block; transform: rotate(-4deg); filter: drop-shadow(0 6px 10px rgba(43,36,33,.22)); }
.booknote.has-cover .bn-cover .lu-bookcover, .booknote.has-cover .bn-cover > * { width: 58px !important; height: auto; border-radius: 3px; }
.booknote.has-cover .bn-t { grid-column: 2; grid-row: 1; align-self: end; }
.booknote.has-cover .bn-s { grid-column: 2; grid-row: 2; align-self: start; }
.booknote.has-cover .ico { grid-column: 3; grid-row: 1 / span 2; }

/* balance bars fill in one dot at a time */
.bal-bar .dots i.on { animation: lu-dot .55s var(--ease) both; }
@keyframes lu-dot { from { opacity: .2; transform: scale(.3); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bal-bar .dots i.on { animation: none; } }

.gift-note { position: relative; z-index: 2; text-align: center; margin: 2px 24px 6px; text-transform: none; letter-spacing: .02em; font-size: 14px; line-height: 1.4; }

/* chapter bar title opens the index */
.vbar-title { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 10px; }
.vbar-title .ico { width: 16px; height: 16px; opacity: .7; }
.vbar-title:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the index sheet */
.tix { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: flex-end; }
.tix-veil { all: unset; position: absolute; inset: 0; background: rgba(28,36,30,.32); animation: lu-fade .3s ease both; }
.tix-sheet { position: relative; max-height: 78%; display: flex; flex-direction: column; background: var(--paper); border-radius: 22px 22px 0 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); animation: lu-sheet .45s var(--ease) both; box-shadow: 0 -14px 40px -18px rgba(28,36,30,.4); }
.tix-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 6px 24px; }
.tix-list { list-style: none; margin: 0; padding: 0 12px 6px; overflow-y: auto; overscroll-behavior: contain; }
.tix-row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 26px 28px 1fr auto; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 12px; }
.tix-row.is-on { background: rgba(51,71,59,.07); }
.tix-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.tix-n { font-size: 16px; color: var(--ink-soft); text-align: right; }
.tix-t { font: 500 15px/1.3 var(--font-text); color: var(--ink); }
.tix-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); opacity: .55; justify-self: center; }
.tix-r { color: var(--ember); font-size: 15px; }
@keyframes lu-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes lu-fade { from { opacity: 0; } to { opacity: 1; } }
/* sound nudge */
.soundhint { position: absolute; top: calc(58px + env(safe-area-inset-top)); right: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 400 15px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(28,36,30,.6); animation: lu-hint .5s var(--ease) both; }
.soundhint::before { content: ""; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }
.sh-wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.sh-wave i { width: 2px; height: 100%; background: var(--ember); border-radius: 2px; animation: lu-wave 1s ease-in-out infinite; }
.sh-wave i:nth-child(2) { animation-delay: .15s; } .sh-wave i:nth-child(3) { animation-delay: .3s; } .sh-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes lu-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes lu-hint { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sh-wave i, .tix-sheet, .soundhint { animation: none; } }

/* what each house is about, said plainly */
.htheme { margin: 0; font: 600 14px/1.35 var(--font-text); color: var(--ember); letter-spacing: .01em; }
.view .htheme { font-size: 16px; margin-top: -6px; }
@media (max-width: 380px) { .hrow .prow-t .vt { font-size: 16px !important; letter-spacing: .04em; } }

/* ---------- closed chapters and the full chart ---------- */
.locked { margin-top: 4px; }
/* the chapter goes on under the lock: its first line can still be read, then the words soften into a blur and fade.
   The blur needs room on the sides, so the box reaches a little past the column */
.lk-ghost { position: relative; margin: 0 -14px; padding: 0 14px; height: 10.5em; overflow: hidden; user-select: none; pointer-events: none; -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); }
.lk-ghost .p { margin: 0; }
.lk-g-clear { -webkit-mask-image: linear-gradient(#000 0, #000 .9em, transparent 3.2em); mask-image: linear-gradient(#000 0, #000 .9em, transparent 3.2em); }
.lk-g-blur { position: absolute; top: 0; left: 0; right: 0; padding: 0 14px; filter: blur(5px); opacity: .75; -webkit-mask-image: linear-gradient(transparent 0, transparent .5em, #000 2.8em); mask-image: linear-gradient(transparent 0, transparent .5em, #000 2.8em); }
.lk-card .core, .unlockcard .core { align-items: stretch; }
.lk-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(194, 80, 15, .1); color: var(--ember); }
.lk-ico .ico { width: 20px; height: 20px; stroke-width: 2; }
.lk-once { text-align: center; opacity: .8; }
.readtag.is-lock { background: rgba(51, 71, 59, .07); color: var(--ink); padding: 5px 7px; }
.readtag.is-lock .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.tix-lock { display: inline-grid; place-items: center; opacity: .55; }
.tix-lock .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.unlockcard { background: linear-gradient(160deg, rgba(246, 196, 83, .16), rgba(194, 80, 15, .06)); box-shadow: inset 0 0 0 1px rgba(194, 80, 15, .14); }
.gift-pdf { margin-top: 12px; }
/* book pages inside the play */
.dedic { padding: 6px 0 10px; text-align: center; }
.dedic-l { margin: 0; font: 400 17px/1.55 var(--font-text); color: var(--ink-soft); text-wrap: balance; }
.dedic-l:first-child { font: 600 19px/1.4 var(--font-display); color: var(--ink); margin-bottom: 6px; }
.tour-wait { position: absolute; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 40px; text-align: center; background: var(--paper); }
.tour-wait .tw-t { font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tour-wait .tw-s { max-width: 30ch; }
.tour-wait .tw-ill { position: relative; width: min(74vw, 300px); aspect-ratio: 1; }
.tour-wait .ws-cv { width: 100%; height: 100%; display: block; }
.tw-pct { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 40px/1 var(--font-data); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tw-pct small { font-size: .5em; margin-left: 2px; color: var(--ink-soft); }
.tw-eta { font: 400 15px/1.2 var(--font-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ember); margin-top: -6px; }
.tour-wait .tw-ill canvas { width: 100% !important; height: 100% !important; }
.bq { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 12px; font: 400 21px/1.3 var(--font-data); letter-spacing: 0.02em; color: var(--ink); }
.bq li::marker { color: var(--ember); font-family: var(--font-data); }
.bp-tags { margin: 6px 0 0; font-size: 15px; letter-spacing: .08em; color: var(--ember); }
/* the one choice behind every closed door */
.buy-sheet { max-height: 88%; }
.buy-body { overflow: auto; padding: 4px 20px 8px; }
.buy-opt { padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.5); }
.buy-opt.is-main { border-color: rgba(194, 80, 15, .28); background: linear-gradient(160deg, rgba(246, 196, 83, .16), rgba(194, 80, 15, .05)); }
.buy-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.buy-price { font-size: 24px; letter-spacing: .04em; color: var(--ember); white-space: nowrap; }
.buy-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.buy-list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.4; color: var(--ink-soft, #5e6b60); }
.buy-list li::before { content: '✦'; position: absolute; left: 0; top: 0; color: var(--ember); font-size: 12px; line-height: 1.7; }
.gcovs .gcv { padding: 0; overflow: hidden; }
.gcovs .gcv img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* covers taking turns until one is chosen */
.cyc { position: relative; display: block; }
.cyc-l { position: absolute; inset: 0; display: block; }
.cyc-l.is-in { animation: cyc-in .9s var(--ease-out) both; }
@keyframes cyc-in { from { opacity: 0; } to { opacity: 1; } }
.bkf-cycle { position: absolute; top: 0; pointer-events: none; z-index: 3; box-shadow: 0 18px 36px -18px rgba(28, 36, 30, .45); }
/* the cover on top waits until the book has closed and slid back into place, then fades in: no double cover while it moves */
.bkf-cycle { animation: bkf-cyc .35s ease .85s both; }
@keyframes bkf-cyc { from { opacity: 0; } to { opacity: 1; } }
/* book page rhythm: the note under the book breathes, the cover row lines up with the text, the foot stays compact */
.gift-note { margin: 4px 28px 12px; }
.gcovs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0; padding: 2px 0 4px; overflow: visible; }
.gcovs .gcv { width: auto; height: auto; aspect-ratio: 1; }
.gcovs .gcv[aria-pressed="true"] { outline: 1px solid var(--line-strong); outline-offset: 3px; }
.foot.is-flow { gap: 10px; padding-top: 14px !important; }
.foot.is-flow .lab { margin: 0; }
/* the two versions of the book, side by side */
.fmt-h { text-align: center; margin: 0; }
.fmts { display: flex; flex-direction: column; gap: 10px; }
.fmt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.4); text-align: left; transition: border-color .25s ease, background .25s ease; }
.fmt.is-on { border-color: var(--line-strong); background: rgba(255,255,255,.75); box-shadow: none; }
.fmt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fmt.is-have { cursor: default; opacity: .6; }
.fmt-top { display: flex; align-items: center; gap: 10px; }
.fmt-top .h3 { flex: 1; }
.fmt-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; box-sizing: border-box; }
.fmt.is-on .fmt-dot, .zone.gto.is-on .fmt-dot { background: var(--ink); box-shadow: inset 0 0 0 3px #fdfdfb; }
.fmt-price { font-size: 22px; letter-spacing: .04em; color: #4a6b45; white-space: nowrap; }
.night .fmt-price { color: #a8c79a; }
.fmt-s { font-size: 14.5px; line-height: 1.4; color: var(--ink-soft, #5e6b60); padding-left: 26px; }
.fmt-tag { align-self: flex-start; margin-left: 26px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); opacity: .75; }
/* the sound pill: little bars that move while it plays */
.soundpill { all: unset; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 400 14px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.soundpill:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.soundpill.is-on { color: var(--ember); border-color: rgba(194, 80, 15, .35); }
.sp-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.sp-bars i { width: 2px; height: 3px; border-radius: 1px; background: currentColor; }
.soundpill.is-on .sp-bars i { animation: sp-bar 1.1s ease-in-out infinite; }
.soundpill.is-on .sp-bars i:nth-child(2) { animation-delay: -.35s; }
.soundpill.is-on .sp-bars i:nth-child(3) { animation-delay: -.7s; }
@keyframes sp-bar { 0%, 100% { height: 3px; } 50% { height: 11px; } }
@media (prefers-reduced-motion: reduce) { .soundpill.is-on .sp-bars i { animation: none; height: 8px; } }

/* on a computer: a small code beside the app to carry on in the phone (only when there is room for it beside the frame) */
.deskqr { display: none; }
@media (min-width: 1240px) and (hover: hover) {
  .deskqr { display: flex; align-items: center; gap: 16px; position: fixed; z-index: 2; bottom: 40px; left: calc(50% + 205px + 48px); width: 320px; padding: 16px 18px 16px 16px; border-radius: 22px; background: rgba(253, 253, 251, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 50px -20px rgba(43, 36, 33, .35); color: var(--ink); }
  .deskqr-code { width: 92px; height: 92px; flex: none; padding: 8px; border-radius: 12px; background: #fff; box-sizing: border-box; }
  .deskqr-code svg { width: 100%; height: 100%; display: block; }
  .deskqr-code svg path, .deskqr-code svg rect[fill="black"], .deskqr-code svg rect:not([fill="white"]) { fill: #2b392f; }
  .deskqr-t { margin: 0; font: 400 18px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .deskqr-s { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
}

/* on a computer the app floats in the middle like a phone screen: rounded, with a soft shadow, no fake phone around it */
@media (min-width: 980px) and (min-height: 760px) {
  .app { width: 410px; max-width: 410px; height: min(860px, calc(100vh - 64px)) !important; top: calc(50% - min(430px, 50vh - 32px)); bottom: auto; border-radius: 38px; box-shadow: 0 40px 110px -30px rgba(20, 15, 10, .5), 0 0 0 1px rgba(51, 71, 59, .08); }
}

/* the way in ends in the night; the app opens as the night lifts */
.dawn { position: absolute; inset: 0; z-index: 80; pointer-events: none; background: #111a2b; clip-path: inset(0px 0px 0px 0px round 0px);
  background-image: radial-gradient(1px 1px at 12% 18%, rgba(253,250,242,.8), transparent), radial-gradient(1px 1px at 68% 9%, rgba(253,250,242,.7), transparent), radial-gradient(1.5px 1.5px at 84% 31%, rgba(253,250,242,.8), transparent), radial-gradient(1px 1px at 33% 42%, rgba(253,250,242,.6), transparent), radial-gradient(1px 1px at 52% 24%, rgba(253,250,242,.7), transparent), radial-gradient(1px 1px at 22% 63%, rgba(253,250,242,.5), transparent), radial-gradient(1.5px 1.5px at 77% 58%, rgba(253,250,242,.6), transparent); }
.dawn.to-card { transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1), opacity .5s ease 1.15s; clip-path: inset(var(--ci) round var(--cr, 16px)); opacity: 0; }
.dawn.lift { transition: opacity 1.2s ease .2s; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .dawn.to-card, .dawn.lift { transition: opacity .4s ease; clip-path: none; } }

/* the gift book, in the night of the way in: the same page, dark sky and white words */
.night { --paper: #111a2b; --ink: #fdfaf2; --ink-soft: rgba(253, 250, 242, .74); --line: rgba(253, 250, 242, .2); --line-strong: rgba(253, 250, 242, .45); --card: rgba(253, 250, 242, .07); --sage: #fdfaf2; --sage-strong: #ffffff; --ember: #f6b27a; --focus: #fdfaf2;
  background: #111a2b radial-gradient(ellipse 120% 60% at 50% 0%, #1d2a48 0%, #141e33 50%, #111a2b 100%); color: var(--ink); color-scheme: dark; }
.night .cta { color: #1b2742; }
.night .cta .nub { background: rgba(27, 39, 66, .1); }
.night .cta.ghost { color: var(--ink); background: transparent; }
.night .cta.ghost .nub { background: rgba(253, 250, 242, .12); }
.night .fmt.is-on .fmt-dot, .night .zone.gto.is-on .fmt-dot { box-shadow: inset 0 0 0 3px #111a2b; }
.night .icon-btn:hover { background: rgba(253, 250, 242, .1); }
.night .sky i { background: #fdfaf2; opacity: .8; }
.night .fmt { background: rgba(253, 250, 242, .05); }
.night .fmt.is-on { background: rgba(253, 250, 242, .1); border-color: rgba(253, 250, 242, .5); box-shadow: none; }
.night .bezel { background: rgba(253, 250, 242, .04); box-shadow: inset 0 0 0 1px rgba(253, 250, 242, .1); }
.night .core { box-shadow: none; }
/* a buy button with its price on one line, even in a narrow card */
.cta.tight { font-size: 18px; letter-spacing: .02em; padding-left: 12px; gap: 8px; }
.cta.tight > span:first-child { white-space: nowrap; padding-left: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }


/* the next chapter button always stays on one line */
.view-foot .cta { font-size: 17px; letter-spacing: .03em; }
.view-foot .cta > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.booknote.has-cover .bn-cover > .lu-gcover-mini { height: 82px !important; }

/* titles in the top bar stay on one line */
.bar > span:nth-child(2), .vbar-title { min-width: 0; max-width: 100%; }
.bar > span:nth-child(2), .vbar-title > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar-title > span { display: block; min-width: 0; }

/* on the dark pages the sound switch is white, never filled */
.night .soundpill, .night .soundpill.is-on { color: #fdfaf2; border-color: rgba(253, 250, 242, .45); background: transparent; }
.soundpill.sharepill { color: var(--ember); border-color: rgba(194, 80, 15, .35); }
.night .soundpill.sharepill { color: #f39a62; border-color: rgba(243, 154, 98, .5); }

/* the book page: the description runs the full width */
.book-desc { text-wrap: wrap; max-width: none; margin-bottom: 0; }

/* the book pages keep their own paper colours on the dark pages */
.night .bk-sheet { --ink: #2b392f; --ink-soft: #5e6b60; --line: rgba(43, 57, 47, .16); --line-strong: rgba(43, 57, 47, .4); color: #2b392f; }
/* the tab bar on the dark book page: dark too, so the words read */
.night .tabs { background: rgba(17, 26, 43, .96); border-top-color: rgba(253, 250, 242, .14); }
.night .tab { color: rgba(253, 250, 242, .62); }
.night .tab.is-on { color: #fdfaf2; }

/* the digital chart already bought: the card hands the PDF back */
.fmt.is-have .fmt-dl { display: inline-flex; align-items: center; gap: 6px; color: var(--ember); opacity: 1; }
.fmt.is-have .fmt-dl .ico { width: 16px; height: 16px; }
.fmt.is-have:not(:disabled) { cursor: pointer; opacity: .9; }

/* the waiting list: what is written, what is being written now, what comes next */
.tw-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; text-align: left; font: 400 15px/1.3 var(--font-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tw-steps li { display: flex; align-items: center; gap: 10px; opacity: .55; }
.tw-steps li i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.tw-steps li.is-done { opacity: .9; } .tw-steps li.is-done i { background: var(--ink); border-color: var(--ink); }
.tw-steps li.is-now { opacity: 1; color: var(--ember); } .tw-steps li.is-now i { border-color: var(--ember); animation: tw-pulse 1.2s ease-in-out infinite; }
@keyframes tw-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }

/* the wheel on the intro page: the same drawing as the Cielo card, in ink */
.inkwheel { position: relative; width: min(100%, 440px); aspect-ratio: 1; margin: 0 auto; }
.inkwheel-core { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.inkwheel-core canvas { width: 100% !important; height: 100% !important; }
.inkwheel canvas { width: 100%; height: 100%; display: block; }

/* the price before: struck through, quieter, in front of the real one */
.fmt-was { font-size: 15px; color: var(--ink-soft); opacity: .7; margin-right: 8px; text-decoration-thickness: 1px; }
.night .fmt-was { color: rgba(253,250,242,.6); }

/* the studio's orders */
.ord-addr { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(51, 71, 59, .05); font: 400 14px/1.45 var(--font-data); letter-spacing: .03em; white-space: pre-wrap; color: var(--ink); }
.ord-in { width: 100%; box-sizing: border-box; min-height: 42px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: transparent; font: 400 15px/1.3 var(--font-text); color: var(--ink); }
.rtag { font: 400 13px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.rtag.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ord-seg .seg-b { font-size: 14px; letter-spacing: .03em; padding: 0 4px; }
.ord-off { font-size: 13px; line-height: 1.4; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px solid var(--line); }
.ord-off b { color: var(--ink); font-family: var(--font-data); font-weight: 400; letter-spacing: .05em; }
.ord-off.is-on { color: var(--ink); }

/* deleting the account sits apart, at the bottom, quieter */
.acc-del { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.acc-contact .acc-sub { font: 400 14px/1.2 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
.acc-del-link { color: var(--ember); }

/* the account settings: one quiet list, a row per thing you can do */
.acc-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.acc-row { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 2px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 400 16px/1.2 var(--font-data); letter-spacing: .1em; text-transform: uppercase; }
.acc-row > span { flex: 1; }
.acc-row .ico { width: 20px; height: 20px; flex: none; }
.acc-row > .ico:last-child { width: 16px; height: 16px; opacity: .5; }
.acc-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.acc-row.is-lang .langpick { flex: 1; border: 0; padding: 0; }

/* the wait: a painted day passing over your landscapes, the progress written on the picture */
.tour-wait { justify-content: flex-start !important; padding: 0 !important; gap: 0 !important; }
.tw-card { position: relative; width: 100%; height: 66%; min-height: 360px; overflow: hidden; background: #2a3d24; transition: background-color 3s ease; flex: none; }
.tw-card > canvas.tw-scn { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tw-card > .tw-wheel { z-index: 2; }
.tw-card::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(to bottom, transparent, var(--twbg, #2a3d24)); pointer-events: none; transition: background 3.8s ease; }
.tw-wheel { position: absolute; left: 50%; top: 10%; height: 54%; aspect-ratio: 1; transform: translateX(-50%); opacity: 0; transition: opacity 1.4s ease; }
.tw-wheel.is-on { opacity: 1; }
.tw-over { position: absolute; left: 24px; right: 24px; bottom: 34px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.tw-pc { align-self: center; font: 400 30px/1 var(--font-data); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.tw-pc small { font-size: .55em; margin-left: 2px; color: var(--ink-soft); }
.tw-bar { display: block; height: 3px; border-radius: 3px; background: rgba(253, 250, 242, .18); overflow: hidden; }
.tw-bar i { display: block; height: 100%; background: var(--ember); border-radius: 3px; transition: width 1s ease; }
.tw-text { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 32px 28px; text-align: center; }
.tw-x { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 3; background: rgba(253, 250, 242, .82); }
.tw-back { margin-top: 6px; }

/* where the printed book goes: included shipping, or further away with a supplement */
.zones { display: flex; flex-direction: column; gap: 8px; }
.zone { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-strong); font: 400 15px/1.35 var(--font-text); color: var(--ink); transition: background .2s var(--ease), border-color .2s var(--ease); }
.zone .zone-s { font-size: 16px; white-space: nowrap; color: var(--ink-soft); }
.zone .zone-t { white-space: pre-line; }
.binds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.bt { position: relative; }
.bt-pick { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1fr; gap: 4px; width: 100%; padding: 8px 8px 14px; border-radius: 18px; border: 1px solid rgba(253, 250, 242, .18); background: rgba(253, 250, 242, .03); transition: border-color .2s var(--ease), background .2s var(--ease); }
.bt.is-on .bt-pick { border-color: #fdfaf2; background: rgba(253, 250, 242, .07); }
.bt-ph { display: block; margin-bottom: 8px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #e8e0d4; }
.bt-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-n { padding: 0 6px; font: 500 15px/1.2 var(--font-text); color: #fdfaf2; white-space: nowrap; }
.bt-p { padding: 0 6px; font-size: 16px; color: rgba(253, 250, 242, .75); }
.bt-pick:focus-visible { outline: 2px solid #fdfaf2; outline-offset: 3px; }
.bt-zoom { all: unset; box-sizing: border-box; cursor: zoom-in; position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(28, 32, 40, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bt-zoom svg { width: 16px; height: 16px; fill: none; stroke: #fdfaf2; stroke-width: 1.6; stroke-linecap: round; }
.zoom { position: fixed; inset: 0; z-index: 200; background: rgba(12, 16, 24, .92); display: flex; align-items: center; justify-content: center; animation: zoomIn .25s var(--ease); }
.zoom-in { width: 100%; height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 56px 16px 24px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
.zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; cursor: zoom-in; display: block; }
.zoom.is-big .zoom-in { display: block; padding: 56px 0 24px; }
.zoom.is-big img { max-width: none; max-height: none; width: 220%; border-radius: 0; cursor: zoom-out; }
.zoom-x { all: unset; position: fixed; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; color: #fdfaf2; background: rgba(253, 250, 242, .12); cursor: pointer; }
.zoom-nav { position: fixed; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 18px; color: #fdfaf2; font-size: 18px; }
.zoom-nav .zoom-btn { all: unset; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(253,250,242,.35); background: rgba(253,250,242,.08); color: #fdfaf2; font-size: 24px; display: grid; place-items: center; cursor: pointer; }
@keyframes zoomIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zoom { animation: none; } }
.specs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.specs li { font: 400 14px/1.5 var(--font-text); color: var(--ink-soft); }
.night .specs li { color: rgba(253, 250, 242, .7); }
.zone.is-on { border-color: currentColor; background: rgba(253, 250, 242, .1); }
.zone:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.night .zone { color: #fdfaf2; border-color: rgba(253, 250, 242, .25); }
.night .zone .zone-s { color: rgba(253, 250, 242, .7); }
.night .zone.is-on { border-color: #fdfaf2; }

/* asking before a new language rewrites the chart */
.lmodal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(27, 39, 66, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lm-in .25s var(--ease); }
.lmodal-card { width: 100%; max-width: 360px; text-transform: none; letter-spacing: normal; text-align: left; }
.lmodal-card .core { padding: 28px 24px 16px; gap: 10px; }
.lmodal-card .h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; text-transform: none; letter-spacing: -.01em; text-wrap: balance; }
.lmodal-card .p-soft { font-family: var(--font-text); font-size: 15px; line-height: 1.5; text-transform: none; letter-spacing: normal; margin: 0 0 14px; text-wrap: pretty; }
.lmodal .link { justify-content: center; }
@keyframes lm-in { from { opacity: 0; } to { opacity: 1; } }
.soundpill .ico { width: 14px; height: 14px; }
/* drawings without ground (planets, objects) are shown whole: no round fade, only a hair of softness at the very edge of the frame */
/* drawings without ground (planets, objects) are transparent: shown whole, with no fade at the edges */
.vig:not(.has-ground):not(.pause-ill) canvas { -webkit-mask-image: none; mask-image: none; }
.ill.vig.soft-sides canvas { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(to bottom, #000 90%, transparent 100%); mask-composite: intersect; }

/* while the pages are being laid out, the cover is already there */
.bkf-cycle.bkf-first { animation: none; }

.zone.gto { flex-direction: column; align-items: stretch; gap: 4px; }
.zone.gto .fmt-s { font-size: 14px; opacity: .8; }
.gto-in { margin-top: 4px; }

.bkf-err { margin: 8px 16px 0; font: 400 11px/1.4 var(--font-data); color: #f0894a; word-break: break-word; text-align: center; }
.tw-x.backbtn { margin: 0; padding: 0 14px 0 8px; color: #2b392f; }

.tour-wait.night { background-image: none; transition: background-color 3s ease; color: var(--ink); }
.tour-wait.night .tw-bar i { background: #f6b27a; }

/* the wait: its own film fills the whole screen, the words sit on the dark ground at the bottom of the picture */
.tour-wait.tw-film { background: #10160f; overflow-x: hidden; }
.tw-film-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.tw-film .tw-sp { flex: 1 0 52%; }
.tw-film .tw-over { position: relative; left: auto; right: auto; bottom: auto; z-index: 2; width: 100%; padding: 0 28px; box-sizing: border-box; }
.tw-film .tw-text { position: relative; z-index: 2; flex: 0 0 auto; justify-content: flex-start; padding: 16px 32px max(30px, calc(env(safe-area-inset-bottom) + 14px)); }
.tw-film .tw-pc { color: #fdf6e2; }
.tw-film .tw-x { z-index: 4; }
.book-main > .stack.g10:first-of-type, .book-main > .stack.g6 + .stack { margin-top: -8px; }
/* the key under the balance bars: what each element and mode means */
.bal-key { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bal-key dl { margin: 0; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 14px; background: var(--card, rgba(43,57,47,.05)); }
.bal-key dl > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: baseline; }
.bal-key dt { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }
.bal-key dd { margin: 0; font: 400 14px/1.4 var(--font-text); color: var(--ink); }
.bal-how { font-size: 13px; }
/* the cards of the shape and the day: drawing and figure side by side, the text below */
.fx-cards { display: flex; flex-direction: column; gap: 14px; }
.fx-card { display: grid; grid-template-columns: 72px 1fr; column-gap: 14px; row-gap: 10px; align-items: center; padding: 16px; border-radius: 18px; background: var(--card, rgba(43,57,47,.05)); }
.fx-ill svg { width: 72px; height: 72px; display: block; }
.fx-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-fig { margin: 0; font-size: 15px; letter-spacing: .08em; color: var(--ember); text-transform: uppercase; }
.fx-head .h3 { margin: 0; }
.fx-text { grid-column: 1 / -1; margin: 0; }
.fx-ill img { width: 72px; height: 72px; display: block; }
/* the painted element icons, before the names in the balance */
.el-ico { width: 22px; height: 22px; display: inline-block; vertical-align: -5px; margin-right: 7px; }
.bal-key .el-ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.bal-key dl > div { grid-template-columns: 98px 1fr; }
.bal-bar { grid-template-columns: 112px 1fr auto; } .bal-name { white-space: nowrap; }
.fx-intro { margin: 0 0 4px; }
/* the book page keeps one rhythm: a label sits close to what it names, sections breathe between them */
.book-main .stack.g10 > .lab { margin: 0; }
.book-main > .stack.g6 { margin-top: 10px; }
.book-main + .foot.is-flow { margin-top: 18px; }

.foot.is-flow .bind-h { margin-top: 14px; }
/* the full chart, offered on the home as a book note: the cover, what is inside and the price */
.unlocknote { width: 100%; margin: 0; border: 0; font: inherit; text-align: left; cursor: pointer; grid-template-rows: auto auto auto; row-gap: 5px; padding: 16px 16px 16px 14px; }
.unlocknote.has-cover .bn-cover { grid-row: 1 / span 3; align-self: center; }
.unlocknote.has-cover .ico { grid-row: 1 / span 3; }
.unlocknote .bn-p { grid-column: 2; grid-row: 3; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, #c2500f); margin-top: 2px; }
.unlocknote .bn-p s { color: var(--ink-soft); opacity: .7; margin-right: 4px; }
/* the title of the unlock note fits on one line: the price under it already says the rest */
.unlocknote .bn-t { font-size: 15px; letter-spacing: .05em; white-space: nowrap; }
.unlocknote.has-cover { column-gap: 22px; padding: 16px 12px 16px 18px; grid-template-columns: 58px minmax(0, 1fr) 16px; }
@media (max-width: 374px) { .unlocknote .bn-t { white-space: normal; } }

/* in the book tab, last of all and quiet: the way to make a book for someone else */
.giftlink { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 26px 24px calc(28px + env(safe-area-inset-bottom)); padding: 16px 0 0; border-top: 1px solid rgba(253, 250, 242, .14); color: inherit; opacity: .72; text-decoration: none; font: 400 14px/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase; }
.giftlink .ico { width: 17px; height: 17px; }
.giftlink:active { opacity: 1; }

/* a quiet way to reach us, small, under the download */
.help-line { margin: 6px 0 0; text-align: center; font-size: 13px; line-height: 1.5; opacity: .6; }
.help-line a, .yb-late a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.ship-note { text-align: center; text-transform: none; letter-spacing: 0; font: 400 14px/1.5 var(--font-text); margin: 4px 6px 12px; opacity: .75; }

.giftnote { margin: 6px 0 14px; }
.giftnote .fmt-h { margin-bottom: 14px; }
/* a field to write in, not a button: flat, a thin line around it, a little darker than the page */
.giftnote-in, .night .giftnote-in { display: block; width: 100%; box-sizing: border-box; min-height: 116px; padding: 14px 16px; resize: none; font: 400 16px/1.55 var(--font-text); text-align: left; border-radius: 16px; box-shadow: none !important; background: rgba(8, 12, 22, .28); border: 1px solid rgba(253, 250, 242, .3); color: var(--ink); }
.giftnote-in::placeholder { color: rgba(253, 250, 242, .42); }
.giftnote-in:focus { outline: none; border-color: rgba(253, 250, 242, .7); }
.giftnote-s { margin: 8px 4px 0; text-align: center; font-size: 13px; line-height: 1.45; opacity: .7; }
/* the book page's section titles all sit on the left, like "Elige tu portada", with the same gap above their options */
.fmt-h, .foot.is-flow .bind-h, .giftnote .fmt-h { text-align: left; }
.foot.is-flow > .bind-h:first-child { margin-top: 0; }
.giftnote { margin-top: 14px; }
.giftnote .fmt-h { margin-bottom: 10px; }
/* while the words of a dark screen slide up over the keyboard, what shows under them is dark too */
.app:has(> .screen.night) { background: #111a2b; }
/* the dedication: its title clear of the field, and the three pieces (dedication, address note, buy) close together */
.foot.is-flow .giftnote .lab.fmt-h { margin: 0 0 12px; }
.foot.is-flow .giftnote { margin: 6px 0 0; }
.foot.is-flow .giftnote-s { margin: 8px 4px 0; }
.foot.is-flow .ship-note { margin: 6px 6px 6px; }
/* the small print at the foot of the account and the legal pages, and under the buy buttons */
.legal-foot { padding: 28px 20px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.legal-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; }
.legal-foot a { font: 400 11px/1 var(--font-data); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; padding: 7px 0; opacity: .75; }
.legal-foot a:hover { opacity: 1; }
.legal-foot p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-soft); opacity: .6; max-width: 30rem; }
.buy-legal { margin: 0; text-align: center; font-size: 12px; line-height: 1.45; color: var(--ink-soft); opacity: .7; }
.buy-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-body { padding-top: 10px; max-width: 40rem; gap: 30px; }
.legal-body h1 { text-align: left; }
.legal-body .p-soft { margin: 0; }