/* Treepolar Garden — визуальный язык по эталону pendereckisgarden.pl
   Шрифты: слоты Hurme Geometric Sans 4 / Suisse Works (положите лицензионные файлы в /fonts),
   метрические аналоги по умолчанию: TeX Gyre Adventor / TeX Gyre Pagella (GUST Font License). */
@font-face { font-family: "Hurme Geometric Sans 4"; src: local("Hurme Geometric Sans 4"), url(/assets/treepolar/fonts/adventor-regular.woff) format("woff"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Hurme Geometric Sans 4"; src: local("Hurme Geometric Sans 4 Bold"), url(/assets/treepolar/fonts/adventor-bold.woff) format("woff"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Hurme Geometric Sans 4"; src: url(/assets/treepolar/fonts/adventor-italic.woff) format("woff"); font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Works"; src: local("Suisse Works"), url(/assets/treepolar/fonts/pagella-regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Suisse Works"; src: url(/assets/treepolar/fonts/pagella-italic.woff) format("woff"); font-style: italic; font-display: swap; }
@font-face { font-family: "Suisse Works"; src: url(/assets/treepolar/fonts/pagella-bold.woff) format("woff"); font-weight: 700; font-display: swap; }

:root {
  --bg: #372933; --deep: #2b1f24; --plum: #3d2c35; --cream: #e2d8ca; --beige: #ddd2c3;
  --sage: #859493; --mauve: #ab9694; --teal: #59868a; --olive: #758464; --taupe: #ad9795; --rose: #c17d7d;
  --brand: #9dbb74;
  --bg-rgb: 55,41,51; --deep-rgb: 43,31,36; --cream-rgb: 226,216,202;
  --accent: var(--sage);
  --ease: cubic-bezier(0.5, 0, 0.2, 1);
  --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --sans: "Hurme Geometric Sans 4", "Futura", "Century Gothic", "Avenir Next", sans-serif;
  --serif: "Suisse Works", "Iowan Old Style", "Palatino", Georgia, serif;
  --gut: clamp(16px, 3.2vw, 48px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--cream); font-family: var(--sans); font-weight: 400; overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #ff0; outline-offset: 3px; }
::selection { background: var(--cream); color: var(--bg); }

#app { position: fixed; inset: 0; }
.err { position: fixed; inset: 0; display: grid; place-items: center; padding: 2rem; font-family: var(--serif); }

/* ---------- стрелки / кнопки ---------- */
.arr { display: inline-block; width: 26px; height: 1px; background: currentColor; position: relative; vertical-align: middle; margin-left: .7em; transition: width .4s var(--ease); }
.arr::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; }
.arr--l { transform: scaleX(-1); margin: 0 .7em 0 0; }
a:hover > .arr, button:hover > .arr { width: 38px; }
.btn-line { display: inline-flex; align-items: center; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .7em 0; border-bottom: 1px solid rgba(var(--cream-rgb),.3); transition: border-color .3s var(--ease); }
.btn-line:hover { border-color: var(--cream); }
.links { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1.2rem; }

/* ---------- INTRO ---------- */
.intro { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow: hidden; display: grid; place-items: center; }
.intro__cv, .intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro__video { opacity: .45; }
.intro__grain { position: absolute; inset: -50%; pointer-events: none; opacity: .07; background-image: radial-gradient(rgba(var(--cream-rgb),.9) 1px, transparent 1px); background-size: 3px 3px; animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-1%,1%) } 50% { transform: translate(1%,-1%) } 75% { transform: translate(-1%,-1%) } }
.intro__center { position: relative; z-index: 2; width: min(560px, calc(100% - 2 * var(--gut))); text-align: center; display: flex; flex-direction: column; align-items: center; }
.intro__pct { font-family: var(--serif); font-size: clamp(5rem, 16vw, 11rem); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.intro__pct i { font-style: normal; font-size: .35em; vertical-align: top; margin-left: .1em; color: var(--sage); }
.intro__load { font-size: .8125rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sage); margin-top: 1rem; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35 } }
.intro__hp, .intro__body, .intro .btn-enter { opacity: 0; }
.is-enter .intro__hp, .is-enter .intro__body, .is-enter .btn-enter { opacity: 1; }
.intro__center:not(.is-enter) .intro__hp, .intro__center:not(.is-enter) .intro__body, .intro__center:not(.is-enter) .btn-enter { display: none; }
.intro__hp { display: flex; align-items: center; gap: .9rem; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--beige); }
.intro__hp svg { width: 34px; height: 34px; color: var(--cream); animation: pulse 2.4s var(--ease) infinite alternate; }
@keyframes pulse { from { transform: scale3d(1,1,1) } to { transform: scale3d(1.1,1.1,1.1) } }
.intro__body { font-family: var(--serif); font-size: clamp(1.05rem, 1.7vw, 1.4375rem); line-height: 1.55; margin: 2rem 0 2.6rem; color: var(--cream); text-wrap: pretty; }
.intro__logo { position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.intro__logo .logo__word { font-size: clamp(1.1rem, 2vw, 1.6rem); writing-mode: vertical-rl; transform: rotate(180deg); }
.intro__logo .logo__leaf { transform: rotate(90deg); }
.intro__coords { font-size: .6875rem; letter-spacing: .25em; text-transform: uppercase; color: var(--sage); writing-mode: vertical-rl; transform: rotate(180deg); }
.intro__partners { position: absolute; left: var(--gut); bottom: calc(var(--gut) * .8); z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .75rem; letter-spacing: .08em; opacity: 0; max-width: 60vw; }
.is-ready .intro__partners { opacity: 1; }
.intro__partners a { text-decoration: none; color: var(--beige); opacity: .75; transition: opacity .3s; }
.intro__partners a:hover { opacity: 1; }
.intro__partners img { height: 32px; width: auto; filter: grayscale(1) brightness(1.6); }
.intro__langs { position: absolute; top: var(--gut); right: var(--gut); z-index: 3; display: flex; gap: .3rem; }
.intro__langs button, .langs button { font-size: .75rem; letter-spacing: .14em; padding: .45em .6em; opacity: .5; transition: opacity .3s; }
.intro__langs button.is-on, .langs button.is-on { opacity: 1; border-bottom: 1px solid currentColor; }

/* Enter — круг с кольцом удержания */
.btn-enter { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; text-transform: uppercase; letter-spacing: .22em; font-size: .8125rem; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .6s var(--bounce); }
.btn-enter::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--cream); transform: scale(0); transition: transform .5s var(--ease); }
.btn-enter__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.btn-enter__ring circle { fill: none; stroke: rgba(var(--cream-rgb),.35); stroke-width: 1; }
.btn-enter__ring .fill { stroke: var(--cream); stroke-width: 2; }
.btn-enter__t { position: relative; z-index: 1; transition: color .4s var(--ease); padding-left: .22em; }
.btn-enter__h { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .6875rem; letter-spacing: .2em; color: var(--sage); opacity: .7; transition: opacity .3s, color .3s; }
.btn-enter.is-hint .btn-enter__h { opacity: 1; color: var(--cream); animation: blink .45s 3; }
.btn-enter:hover { transform: scale(1.06); }
.btn-enter.is-hold::before { transform: scale(1); }
.btn-enter.is-hold .btn-enter__t { color: var(--bg); }
.btn-enter.is-done { transform: scale(18); opacity: 0; transition: transform 1.2s var(--ease), opacity 1s .3s; }
.btn-enter::after { content: ""; position: absolute; inset: -12px; border: 1px solid rgba(var(--cream-rgb),.2); border-radius: 50%; animation: audio 2.4s var(--ease) infinite; }
@keyframes audio { from { transform: scale(.54); opacity: 1 } to { transform: scale(1); opacity: 0 } }
.btn-enter--sm { width: auto; height: auto; border-radius: 99px; padding: 1.1em 2.2em; border: 1px solid rgba(var(--cream-rgb),.5); }
.btn-enter--sm::before { inset: 0; border-radius: 99px; transform: scaleX(0); transform-origin: left; }
.btn-enter--sm::after { display: none; }
.btn-enter--sm:hover { transform: none; }
.btn-enter--sm:hover::before { transform: scaleX(1); }
.btn-enter--sm:hover span { color: var(--bg); }
.btn-enter--sm span { position: relative; z-index: 1; transition: color .4s var(--ease); }
.btn-enter--sm:disabled { opacity: .5; }

/* ---------- верхняя панель ---------- */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: var(--gut); pointer-events: none; opacity: 0; transition: opacity .8s var(--ease) .6s; }
.is-entered .top { opacity: 1; }
.top > *, .top__r > * { pointer-events: auto; }
.logo { text-decoration: none; display: inline-flex; }
.logo__word { display: inline-flex; align-items: center; gap: .45em; color: var(--brand); font-weight: 700; letter-spacing: .32em; font-size: 1.05rem; }
.logo__leaf { width: 1.3em; height: 1.3em; }
.logo__img { height: 36px; width: auto; }
.top__r { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.6rem); }
.langs { display: flex; gap: .2rem; }
.snd { display: flex; align-items: flex-end; gap: 3px; height: 18px; padding: 2px; }
.snd i { width: 2px; background: var(--cream); height: 100%; animation: eq 1s var(--ease) infinite alternate; }
.snd i:nth-child(2) { animation-delay: -.3s } .snd i:nth-child(3) { animation-delay: -.6s } .snd i:nth-child(4) { animation-delay: -.8s }
@keyframes eq { from { transform: scaleY(.2) } to { transform: scaleY(1) } }
.snd i { transform-origin: bottom; }
.snd.is-muted i { animation: none; transform: scaleY(.15); }
.burger { display: flex; align-items: center; gap: .8rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; position: relative; }
.burger i { display: block; width: 26px; height: 1px; background: var(--cream); transition: transform .5s var(--ease); }
.burger i + i { position: absolute; right: 0; top: calc(50% + 4px); }
.burger i:first-of-type { transform: translateY(-4px); }
.menu-open .burger i:first-of-type { transform: rotate(45deg); }
.menu-open .burger i + i { transform: translateY(-4px) rotate(-45deg); }

/* ---------- меню ---------- */
.menu { position: fixed; inset: 0; z-index: 25; background: var(--bg); overflow: auto; padding: calc(var(--gut) * 3.2) var(--gut) var(--gut); }
.menu__in { max-width: 1400px; margin: 0 auto; }
.menu__garden { display: inline-flex; gap: 1rem; align-items: baseline; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--sage); margin-bottom: 1.4rem; }
.menu__garden span { color: var(--mauve); font-size: .6875rem; }
.menu__list { list-style: none; margin: 0 0 3rem; padding: 0; columns: 2 420px; column-gap: 4rem; }
.menu__it { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: 0 1rem; padding: .55rem 0; text-decoration: none; break-inside: avoid; border-bottom: 1px solid rgba(var(--cream-rgb),.08); }
.menu__n { font-family: var(--serif); font-size: .9375rem; color: var(--accent); }
.menu__t { font-family: var(--serif); font-size: clamp(1.875rem, 3.2vw, 3.1875rem); line-height: 1.12; transition: color .3s var(--ease), transform .5s var(--ease); }
.menu__s { grid-column: 2; font-size: .8125rem; color: var(--sage); max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), margin .5s; }
.menu__p { grid-row: 1; grid-column: 3; font-size: .75rem; color: var(--accent); }
.menu__it:hover .menu__t, .menu__it.is-on .menu__t { color: var(--accent); transform: translateX(8px); }
.menu__it:hover .menu__s { max-height: 3em; margin-top: .3rem; }

/* ---------- футер ---------- */
.foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; font-size: .75rem; color: var(--sage); }
.foot__partners { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; align-items: center; }
.foot__partners a { text-decoration: none; color: var(--beige); opacity: .75; }
.foot__partners a:hover { opacity: 1; }
.foot__partners img { height: 26px; width: auto; }
.foot__lbl { letter-spacing: .2em; text-transform: uppercase; font-size: .6875rem; color: var(--mauve); }
.foot__admin { text-decoration: none; cursor: default; }
.hub .foot { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--gut) * .7); z-index: 4; pointer-events: none; }
.hub .foot > * { pointer-events: auto; }

/* ---------- переход-занавес ---------- */
.curtain-tr { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: grid; place-items: center; text-align: center; }
.curtain-tr::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); }
.curtain-tr__in { position: relative; padding: 0 var(--gut); }
.curtain-tr__n { font-family: var(--serif); color: var(--accent); font-size: 1.2rem; margin-bottom: 1rem; }
.curtain-tr__t { font-family: var(--serif); font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.1; }
.curtain-tr__s { margin-top: 1rem; color: var(--sage); font-size: .9375rem; max-width: 34rem; margin-inline: auto; }

/* ---------- нижняя навигация глав ---------- */
.cnav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; padding: 0 var(--gut) calc(var(--gut) * .7); pointer-events: none; background: linear-gradient(to top, rgba(var(--bg-rgb),.75), rgba(var(--bg-rgb),0)); padding-top: 3rem; }
.cnav > * { pointer-events: auto; }
.cnav__pn { display: inline-flex; align-items: center; gap: .6rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; opacity: .75; transition: opacity .3s; }
.cnav__pn:hover { opacity: 1; }
.cnav__n { font-family: var(--serif); letter-spacing: 0; font-size: .9375rem; color: var(--accent); }
.cnav__next { justify-self: end; }
.cnav__c { display: flex; flex-direction: column; align-items: center; gap: .45rem; font-size: .8125rem; }
.cnav__home { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--sage); }
.cnav__disc b { color: var(--accent); font-weight: 700; }
.cnav__bar { width: 160px; height: 1px; background: rgba(var(--cream-rgb),.2); }
.cnav__bar i { display: block; height: 100%; background: var(--accent); transition: width .8s var(--ease); }
.has-overlay .cnav, .menu-open .cnav { opacity: 0; pointer-events: none; }

/* ---------- ХАБ ---------- */
.hub { position: absolute; inset: 0; overflow: hidden; }
.hub__vp { position: absolute; inset: -30px; }
.hub__map { position: absolute; }
.hub__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub__path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hub__path path { fill: none; stroke: rgba(var(--cream-rgb),.55); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; }
.hub__head { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--gut) * 2.6); max-width: 34rem; pointer-events: none; }
.hub__coords { font-size: .6875rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sage); }
.hub__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.05; margin: .6rem 0 .4rem; }
.hub__sub { margin: 0; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mauve); }
.shade { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.shade--hub { background: linear-gradient(180deg, rgba(var(--deep-rgb),.72) 0%, rgba(var(--deep-rgb),0) 32%, rgba(var(--deep-rgb),0) 70%, rgba(var(--deep-rgb),.8) 100%); }
.shade--left { background: linear-gradient(90deg, rgba(var(--deep-rgb),.82) 0%, rgba(var(--deep-rgb),.35) 38%, rgba(var(--deep-rgb),0) 60%); }
.shade--full { background: rgba(var(--deep-rgb),.62); }
.shade--bottom { background: linear-gradient(0deg, rgba(var(--deep-rgb),.85), rgba(var(--deep-rgb),0) 55%); }
.place { position: absolute; z-index: 2; width: 76px; height: 76px; margin: -38px 0 0 -38px; text-decoration: none; border-radius: 50%; }
.place__ring, .place__ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.place__ring { width: 76px; height: 76px; border: 1px solid rgba(var(--cream-rgb),.4); background: conic-gradient(var(--accent) calc(var(--p) * 1%), transparent 0) border-box; -webkit-mask: radial-gradient(circle, transparent 36px, #000 37px); mask: radial-gradient(circle, transparent 36px, #000 37px); transition: transform .6s var(--bounce); }
.place__ring::after { content: ""; }
.place__ic { width: 58px; height: 58px; background: rgba(var(--bg-rgb),.82); backdrop-filter: blur(4px); display: grid; place-items: center; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); transition: background .4s var(--ease), color .4s var(--ease), transform .6s var(--bounce); }
.place__ic svg { width: 26px; height: 26px; }
.place__n { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); font-family: var(--serif); font-size: .9375rem; color: var(--cream); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.place__lbl { position: absolute; left: 50%; top: 86px; transform: translate(-50%, 0); width: max-content; max-width: 240px; text-align: center; display: flex; flex-direction: column; gap: .25rem; pointer-events: none; }
.place__lbl b { font-family: var(--serif); font-weight: 400; font-size: 1.125rem; line-height: 1.2; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.place__lbl em { font-style: normal; font-size: .75rem; color: var(--beige); opacity: 0; max-height: 0; overflow: hidden; transition: opacity .4s, max-height .5s var(--ease); }
.place__go { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); opacity: 0; transform: translateY(-6px); transition: opacity .4s, transform .5s var(--ease); }
.place:hover .place__ic, .place:focus-visible .place__ic { background: var(--accent); color: var(--bg); transform: translate(-50%, -50%) scale(1.12); }
.place:hover .place__ring { transform: translate(-50%, -50%) scale(1.25); }
.place:hover .place__lbl em { opacity: 1; max-height: 5em; }
.place:hover .place__go { opacity: 1; transform: none; }
.place::before { content: ""; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 1px solid rgba(var(--cream-rgb),.25); animation: audio 3.2s var(--ease) infinite; }
.hub__list { display: none; }

/* ---------- главы: общее ---------- */
.chapter { position: absolute; inset: 0; overflow: hidden; }
.bg { position: absolute; inset: 0; overflow: hidden; }
.bg img, .bg video, .scene__bg img, .scene__bg video, .map__bg img, .map__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene__bg, .map__bg { position: absolute; inset: 0; overflow: hidden; }
.kb > img, .kb > video, img.kb, video.kb { animation: kenburns 38s ease-in-out infinite alternate; transform-origin: 60% 40%; }
.map__bg.kb > img { animation: none; }
@keyframes kenburns { from { transform: scale(1) translate3d(0,0,0) } to { transform: scale(1.08) translate3d(-1.5%, -1%, 0) } }
.scene { position: absolute; }
.parallax { position: absolute; inset: -20px; transition: transform 1.2s cubic-bezier(0, 1, 1, 1); }
.chead { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--gut) * 2.8); max-width: min(34rem, calc(100% - 2 * var(--gut))); }
.chead--center { left: 50%; transform: translateX(-50%); text-align: center; display: flex; flex-direction: column; align-items: center; }
.chead__num { font-family: var(--serif); font-size: 1.125rem; color: var(--accent); }
.chead__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.5625rem); line-height: 1.12; margin: .5rem 0 1rem; }
.chead__title .w { display: inline-block; white-space: nowrap; }
.chead__title .c { display: inline-block; }
.chead__intro { font-family: var(--serif); font-size: clamp(.9375rem, 1.25vw, 1.1875rem); line-height: 1.6; margin: 0; color: rgba(var(--cream-rgb),.9); max-height: 42vh; overflow: auto; text-wrap: pretty; }

/* hotspots */
.hs-layer { position: absolute; inset: 0; z-index: 2; }
.hs { position: absolute; width: 54px; height: 54px; transform: translate(-50%, -50%) scale(var(--inv, 1)); z-index: 1; }
.hs__dot { position: absolute; inset: 11px; border-radius: 50%; background: var(--cream); border: 2px solid var(--accent); display: grid; place-items: center; box-shadow: 0 2px 16px rgba(0,0,0,.35); transition: transform .5s var(--bounce), background .3s; }
.hs__dot i { font-style: normal; font-size: .8125rem; font-weight: 700; color: var(--bg); }
.hs__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); animation: audio 2.2s var(--ease) infinite; }
.hs__ring--2 { animation-delay: 1.1s; }
.hs__label { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 6px); white-space: nowrap; font-family: var(--serif); font-size: .9375rem; background: rgba(var(--bg-rgb),.9); padding: .35em .8em; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.hs:hover .hs__label, .hs:focus-visible .hs__label, .hs--label .hs__label { opacity: 1; transform: translate(-50%, 0); }
.hs:hover .hs__dot { transform: scale(1.25); }
.hs.is-found .hs__dot { background: var(--accent); }
.hs.is-found .hs__ring { animation: none; opacity: .35; }
.hs--tree .hs__dot { background: var(--olive); } .hs--tree .hs__ring { border-color: var(--olive); }
.hs--photo .hs__dot { background: var(--teal); } .hs--quote .hs__dot { background: #adaaaa; }
.hs--sound .hs__dot { background: var(--rose); } .hs--link .hs__dot { background: var(--mauve); }
.hs.is-found.hs--tree .hs__dot, .hs.is-found .hs__dot { background: var(--accent); }

.story-index { position: absolute; z-index: 4; left: var(--gut); bottom: 6.8rem; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; display: inline-flex; align-items: center; }
.drawer { position: absolute; z-index: 5; left: var(--gut); bottom: 9.2rem; width: min(360px, calc(100% - 2 * var(--gut))); max-height: 50vh; overflow: auto; background: rgba(var(--bg-rgb),.94); border: 1px solid rgba(var(--cream-rgb),.12); padding: .6rem 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s, transform .45s var(--ease); }
.drawer.is-open { opacity: 1; transform: none; pointer-events: auto; }
.drawer__it { display: flex; gap: 1rem; width: 100%; text-align: left; padding: .5rem 1rem; font-family: var(--serif); font-size: 1rem; }
.drawer__it:hover { background: rgba(var(--cream-rgb),.06); color: var(--accent); }
.drawer__n { font-family: var(--sans); font-size: .75rem; color: var(--accent); padding-top: .2em; }

/* оверлей историй */
.ov { position: fixed; inset: 0; z-index: 35; }
.ov__bg { position: absolute; inset: 0; background: rgba(var(--deep-rgb),.72); backdrop-filter: blur(6px); }
.ov__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(1180px, 100%); background: var(--bg); display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0,0,0,.35); }
.ov__close { position: absolute; top: var(--gut); right: var(--gut); z-index: 2; display: flex; align-items: center; gap: .8rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.ov__close i { width: 28px; height: 28px; position: relative; }
.ov__close i::before, .ov__close i::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--cream); transform: rotate(45deg); transition: transform .4s var(--ease); }
.ov__close i::after { transform: rotate(-45deg); }
.ov__close:hover i::before { transform: rotate(135deg); } .ov__close:hover i::after { transform: rotate(45deg); }
.ov__body { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); padding: calc(var(--gut) * 2.6) var(--gut) 2rem; align-items: start; }
.ov__body.no-media { grid-template-columns: minmax(0, 46rem); justify-content: center; }
.ov__media { position: sticky; top: 0; aspect-ratio: 4 / 5; max-height: 72vh; background: var(--plum); overflow: hidden; }
.ov__media:has(iframe), .ov__media:has(video) { aspect-ratio: 16 / 9; }
.ov__media img, .ov__media video, .ov__media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.media__gallery { position: relative; width: 100%; height: 100%; }
.media__gallery img { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.media__gallery img.is-on { opacity: 1; animation: kenburns 24s ease-in-out infinite alternate; }
.media__dots { position: absolute; left: 1rem; bottom: 1rem; display: flex; gap: .4rem; }
.media__dots button { width: 22px; height: 2px; background: rgba(var(--cream-rgb),.4); }
.media__dots button.is-on { background: var(--cream); }
.ov__kicker { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ov__date { font-family: var(--serif); color: var(--sage); margin-top: .6rem; }
.ov__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.4375rem); line-height: 1.15; margin: .8rem 0 1.4rem; }
.ov__copy { font-family: var(--serif); font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.65; color: rgba(var(--cream-rgb),.92); }
.ov__copy p { margin: 0 0 1em; } .ov__copy ul { margin: 0 0 1em; padding-left: 1.2em; } .ov__copy li { margin: .3em 0; }
.ov__foot { display: flex; align-items: center; gap: 1.4rem; padding: 1rem var(--gut) 1.4rem; border-top: 1px solid rgba(var(--cream-rgb),.1); flex-wrap: wrap; }
.ov__nav { display: inline-flex; align-items: center; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; }
.ov__count { font-family: var(--serif); color: var(--sage); font-variant-numeric: tabular-nums; }
.ov__found { margin-left: auto; font-size: .8125rem; color: var(--sage); }
.ov__found b { color: var(--accent); }

/* плеер */
.player { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.4rem; }
.player__btn { position: relative; width: 50px; height: 50px; flex: none; color: var(--accent); }
.player__btn svg { width: 100%; height: 100%; }
.player__btn .trk { fill: none; stroke: rgba(var(--cream-rgb),.25); stroke-width: 1; }
.player__btn .prg { fill: none; stroke: var(--accent); stroke-width: 2; transform: rotate(-90deg); transform-origin: 25px 25px; transition: stroke-dashoffset .25s linear; }
.player__btn .ic-play, .player__btn .ic-pause { fill: var(--cream); }
.player__btn .ic-pause { display: none; }
.player.is-playing .ic-play { display: none; } .player.is-playing .ic-pause { display: inline; }
.player__rings { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; }
.player.is-playing .player__rings { animation: audio 1.6s var(--ease) infinite; }
.player__meta { display: flex; flex-direction: column; gap: .35rem; min-width: 120px; }
.player__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.player__time { font-size: .8125rem; color: #859493; font-variant-numeric: tabular-nums; }
.player__bar { height: 2px; width: 140px; background: rgba(var(--cream-rgb),.2); cursor: pointer; }
.player__bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.player--big .player__btn { width: 64px; height: 64px; }

/* тосты */
.toasts { position: fixed; z-index: 45; left: 50%; bottom: 7.5rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.toast { background: var(--cream); color: var(--bg); padding: .8em 1.4em; border-radius: 99px; font-size: .875rem; box-shadow: 0 8px 30px rgba(0,0,0,.3); max-width: 90vw; text-align: center; }

/* ---------- park ---------- */
.map-vp { position: absolute; inset: 0; cursor: grab; touch-action: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.map-vp img, .hub img, .scene img, .mem-track { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.map-vp.is-drag { cursor: grabbing; }
.map { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.arch-park .chead { pointer-events: none; } .arch-park .chead a { pointer-events: auto; }
.minimap { position: absolute; z-index: 4; right: var(--gut); bottom: 7rem; width: 180px; aspect-ratio: 3 / 2; border: 1px solid rgba(var(--cream-rgb),.25); background: rgba(var(--bg-rgb),.6); }
.minimap__vp { position: absolute; border: 1px solid var(--cream); }
.minimap b { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--olive); }
.minimap b.is-found { background: var(--cream); }
.hint { position: absolute; z-index: 4; right: var(--gut); top: calc(var(--gut) * 3); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--beige); opacity: .8; pointer-events: none; }

/* ---------- salon ---------- */
.salon { position: absolute; inset: 0; z-index: 2; overflow: auto; padding: calc(var(--gut) * 2.8) var(--gut) 9rem; }
.salon .chead { position: relative; left: 0; top: 0; margin-bottom: 2.4rem; }
.salon__cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 3rem; max-width: 1300px; }
.works { list-style: none; margin: 0; padding: 0; }
.work { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.1rem 0; }
.work__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(var(--cream-rgb),.16); transform-origin: left; }
.work__n { font-family: var(--serif); color: var(--accent); }
.work__t { text-align: left; display: flex; flex-direction: column; gap: .2rem; }
.work__title { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1.2; transition: color .3s, transform .5s var(--ease); }
.work__sub { font-size: .8125rem; color: var(--sage); }
.work__t:hover .work__title { color: var(--accent); transform: translateX(6px); }
.work .player { margin: 0; }
.work .player__bar { width: 90px; }
.work.is-playing .work__title { color: var(--accent); }
.work.is-found .work__n::after, .anecdote.is-found .anecdote__n::after { content: " •"; color: var(--cream); }
.work__more { display: inline-flex; align-items: center; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.anecdotes { display: flex; flex-direction: column; gap: .4rem; }
.anecdotes__h { font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sage); margin-bottom: .6rem; }
.anecdote { display: flex; gap: .8rem; text-align: left; font-family: var(--serif); font-size: 1rem; padding: .7rem .9rem; background: rgba(var(--bg-rgb),.6); border-left: 2px solid var(--accent); transition: background .3s, transform .4s var(--ease); }
.anecdote:hover { background: rgba(var(--bg-rgb),.9); transform: translateX(-4px); }
.anecdote__n { font-family: var(--sans); font-size: .75rem; color: var(--accent); }
.viz { position: fixed; z-index: 3; right: var(--gut); bottom: 6.4rem; width: 300px; height: 40px; opacity: .9; pointer-events: none; }

/* ---------- stage ---------- */
.spot { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at var(--sx, 50%) var(--sy, 45%), rgba(255,244,220,.2), rgba(var(--deep-rgb),.55) 34%, rgba(var(--deep-rgb),.8) 70%); mix-blend-mode: normal; transition: background .2s; }
.spot--center { background: radial-gradient(ellipse at 50% 55%, rgba(255,244,220,.14), rgba(var(--deep-rgb),.6) 45%, rgba(var(--deep-rgb),.85) 80%); }
.curtain { position: absolute; z-index: 6; top: 0; bottom: 0; width: 50.5%; background: repeating-linear-gradient(90deg, #4a2f38 0 30px, #3d2730 30px 60px); box-shadow: inset 0 -40px 80px rgba(0,0,0,.4); }
.curtain--l { left: 0; } .curtain--r { right: 0; }
.arch-stage .chead { top: auto; bottom: 8.5rem; }
.stage-rings { position: absolute; z-index: 1; left: 50%; top: 58%; width: 0; height: 0; pointer-events: none; }
.stage-rings i { position: absolute; left: 0; top: 0; width: 240px; height: 80px; margin: -40px 0 0 -120px; border-radius: 50%; border: 1px solid rgba(var(--cream-rgb),.35); transform: scale(calc(1 + var(--lvl, 0) * 3)); opacity: calc(.15 + var(--lvl, 0) * 2); transition: transform .12s linear; }
.stage-rings i:nth-child(2) { width: 380px; height: 120px; margin: -60px 0 0 -190px; } .stage-rings i:nth-child(3) { width: 540px; height: 170px; margin: -85px 0 0 -270px; } .stage-rings i:nth-child(4) { width: 740px; height: 230px; margin: -115px 0 0 -370px; }
.stage-screen { position: absolute; z-index: 4; left: 50%; top: 42%; width: min(880px, 86vw); transform: translate(-50%, -50%); display: none; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.stage-screen.is-on { display: block; }
.stage-screen__m { aspect-ratio: 16 / 9; } .stage-screen__m iframe, .stage-screen__m video { width: 100%; height: 100%; border: 0; display: block; }
.setlist { position: absolute; z-index: 4; right: var(--gut); top: calc(var(--gut) * 3); display: flex; flex-direction: column; gap: .3rem; max-width: 280px; }
.setlist__it { display: flex; gap: .7rem; text-align: left; font-family: var(--serif); font-size: .9375rem; opacity: .8; } .setlist__it:hover { opacity: 1; color: var(--accent); }
.setlist__it span { font-family: var(--sans); font-size: .75rem; color: var(--accent); }

/* ---------- labyrinth ---------- */
.lab-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.arch-labyrinth .chead { pointer-events: none; transition: opacity .6s; }
.arch-labyrinth.is-playing .chead { opacity: 0; }
.lab-hud { position: absolute; z-index: 4; right: var(--gut); top: calc(var(--gut) * 3); text-align: right; }
.lab-hud__count { font-family: var(--serif); font-size: 2.2rem; } .lab-hud__count b { color: var(--accent); font-weight: 400; }
.lab-hud__lbl { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }
.lab-mini { position: absolute; z-index: 4; right: var(--gut); bottom: 7rem; width: 150px; height: auto; opacity: .85; image-rendering: pixelated; }
.lab-start { position: absolute; z-index: 5; left: 50%; top: 60%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 2 * var(--gut))); text-align: center; background: rgba(var(--bg-rgb),.9); padding: 2.2rem 2rem; border: 1px solid rgba(var(--cream-rgb),.12); backdrop-filter: blur(6px); }
.lab-start__t { font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; margin: 0 0 .8rem; }
.lab-start__h { font-size: .8125rem; color: var(--sage); margin: 0 0 1.6rem; line-height: 1.6; }

/* ---------- studio ---------- */
.studio-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.studio-video { position: absolute; z-index: 3; right: var(--gut); top: 50%; transform: translateY(-50%); width: min(46vw, 760px); aspect-ratio: 16 / 9; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.studio-video iframe, .studio-video video { width: 100%; height: 100%; border: 0; display: block; }
.studio-bar { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: 6.6rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.studio-bar .player { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-size: .8125rem; padding: .55em 1em; border: 1px solid rgba(var(--cream-rgb),.3); border-radius: 99px; transition: background .3s, color .3s; }
.chip:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ---------- memory ---------- */
.arch-memory .chead { max-width: 40rem; }
.arch-memory .chead__intro { max-height: 16vh; }
.mem-track { position: absolute; z-index: 2; left: var(--gut); bottom: 8rem; display: flex; gap: 2.4rem; padding-top: 4rem; will-change: transform; touch-action: pan-y; cursor: grab; }
.mem-line { position: absolute; left: 0; right: -30vw; top: 2.1rem; height: 1px; background: rgba(var(--cream-rgb),.3); transform-origin: left; }
.mem { position: relative; flex: none; width: clamp(240px, 22vw, 320px); }
.mem__date { position: absolute; top: -4rem; left: 0; font-family: var(--serif); color: var(--accent); font-size: 1rem; }
.mem__dot { position: absolute; top: -2.2rem; left: 0; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--accent); }
.mem__img { display: block; width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; filter: saturate(.8); transition: filter .5s, transform .8s var(--ease); }
.mem__img:hover { filter: none; transform: scale(1.02); }
.mem__t { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.25; margin: 1rem 0 .5rem; }
.mem__b { font-size: .875rem; line-height: 1.55; color: rgba(var(--cream-rgb),.8); margin: 0 0 .8rem; }
.mem__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mem__row .player { margin: 0; } .mem__row .player__meta { min-width: 0; } .mem__row .player__bar { width: 70px; }
.mem.is-found .mem__dot { background: var(--cream); box-shadow: 0 0 0 4px rgba(var(--cream-rgb),.2); }
.mem-progress { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: 6.2rem; height: 1px; background: rgba(var(--cream-rgb),.12); }
.mem-progress i { display: block; height: 100%; background: var(--accent); }

/* ---------- legal ---------- */
.legal-panel { position: absolute; z-index: 2; inset: 0; overflow: auto; padding: calc(var(--gut) * 2.8) var(--gut) 9rem; }
.legal { max-width: 46rem; margin: 0 auto; background: rgba(var(--bg-rgb),.9); padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid rgba(var(--cream-rgb),.08); }
.legal .chead { position: static; max-width: none; }
.legal .chead__intro { max-height: none; }
.legal__s { margin-top: 2.4rem; }
.legal__s h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 .8rem; color: var(--accent); }
.legal__b { font-family: var(--serif); font-size: 1.125rem; line-height: 1.7; }

/* ---------- contact ---------- */
.contact-card { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -52%); width: min(1040px, calc(100% - 2 * var(--gut))); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 3rem; align-items: start; max-height: calc(100% - 14rem); overflow: auto; background: rgba(var(--bg-rgb),.88); padding: clamp(1.4rem, 3.5vw, 3rem); border: 1px solid rgba(var(--cream-rgb),.12); backdrop-filter: blur(8px); }
.contact-card .chead { position: static; max-width: none; }
.mail { display: inline-block; margin-top: .8rem; font-family: var(--serif); font-size: 1.1rem; color: var(--accent); }
.form { display: grid; gap: 1rem; }
.contact-card > .links { grid-column: 1; }
.fld { display: grid; gap: .4rem; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }
.fld input, .fld textarea { font: inherit; font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid rgba(var(--cream-rgb),.3); padding: .5rem 0; outline: none; resize: vertical; transition: border-color .3s; }
.fld input:focus, .fld textarea:focus { border-color: var(--accent); }
.form .btn-enter { justify-self: start; margin-top: .6rem; }
.form__status { font-size: .875rem; color: var(--beige); min-height: 1.2em; }
.form__status a { color: var(--accent); }
.hp { position: absolute; left: -9999px; }

/* ---------- intro-глава / sub-hub ---------- */
.letterbox { position: absolute; z-index: 4; left: 0; right: 0; height: 9vh; background: var(--deep); }
.letterbox--t { top: 0; transform-origin: top; } .letterbox--b { bottom: 0; transform-origin: bottom; }
.arch-introch .chead { top: 50%; transform: translate(-50%, -50%); }
.arch-introch .chead__title { font-size: clamp(2.25rem, 5.5vw, 4.5rem); }

/* ---------- мобильная версия ---------- */
@media (max-width: 760px) {
  .intro__logo { top: var(--gut); left: var(--gut); right: auto; transform: none; }
  .intro__logo .logo__word, .intro__coords { writing-mode: horizontal-tb; transform: none; }
  .intro__logo .logo__leaf { transform: none; }
  .intro__partners { max-width: 90vw; }
  .burger span { display: none; }
  .hub__vp, .hub .shade { display: none; }
  .hub { overflow: auto; background: var(--bg); }
  .hub__head { position: relative; top: auto; left: auto; padding: calc(var(--gut) * 4.5) var(--gut) 1rem; }
  .hub__list { display: block; list-style: none; margin: 0; padding: 0 var(--gut) 2rem; }
  .hub__list a { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; padding: .9rem 0; border-bottom: 1px solid rgba(var(--cream-rgb),.1); text-decoration: none; font-family: var(--serif); font-size: 1.35rem; align-items: baseline; }
  .hub__list small { font-family: var(--sans); font-size: .75rem; color: var(--accent); }
  .hub .foot { position: static; padding: 1rem var(--gut) 2rem; }
  .cnav { grid-template-columns: auto 1fr auto; }
  .cnav__t { display: none; }
  .cnav__bar { width: 110px; }
  .cnav__disc { font-size: .6875rem; text-align: center; }
  .chead { top: calc(var(--gut) * 4.5); }
  .chead__intro { max-height: 26vh; font-size: .875rem; }
  .ov__body { grid-template-columns: 1fr; padding-top: 4.5rem; }
  .ov__media { position: relative; max-height: 42vh; aspect-ratio: 16 / 10; }
  .ov__found { margin-left: 0; width: 100%; }
  .salon__cols { grid-template-columns: 1fr; }
  .work { grid-template-columns: 2rem minmax(0, 1fr); }
  .work > .player, .work > .work__more { grid-column: 2; }
  .viz { display: none; }
  .minimap { width: 120px; bottom: 6.4rem; }
  .hint { display: none; }
  .studio-video { position: absolute; top: auto; bottom: 12rem; right: var(--gut); left: var(--gut); width: auto; transform: none; }
  .studio-bar { bottom: 6rem; }
  .mem-track { bottom: 7rem; }
  .lab-mini { width: 110px; bottom: 6rem; }
  .setlist { display: none; }
  .story-index { bottom: 6rem; } .drawer { bottom: 8.4rem; }
  .arch-stage .chead { bottom: 7rem; }
  .contact-card { max-height: calc(100% - 11rem); top: 47%; grid-template-columns: 1fr; }
  .form { margin-top: 1.4rem; }
  .menu__list { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   v2 — раскладка оригинала: 3D-облако на весь экран + интерфейс поверх
   ===================================================================== */
#gl { position: fixed; inset: 0; z-index: 0; display: block; }
#hs3d { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
#app { z-index: 8; pointer-events: none; }
#app .chapter > * { pointer-events: auto; }
#app .chapter .shade, #app .chapter .hs-layer { pointer-events: none; }
.chapter.v2 { background: transparent; }
body.mode-nav #app .chapter { display: none; }

/* --- шапка --- */
.g-head { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(var(--gut) * .75) var(--gut); pointer-events: none; }
.g-head > * { pointer-events: auto; }
.g-menubtn { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; text-decoration: none; }
.g-lines { display: block; width: clamp(150px, 16vw, 230px); line-height: 0; }
.g-lines svg { width: 100%; height: auto; overflow: visible; }
.g-lines .st { fill: rgba(var(--cream-rgb),.78); stroke: none; }
.g-lines .lf { fill: rgba(var(--cream-rgb),.70); transition: fill .5s var(--ease); }
.g-menubtn:hover .g-lines .lf { fill: var(--cream); }
.g-menubtn span { font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1; }
.g-logo { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; line-height: .92; text-align: right; }
.g-logo b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.7rem); letter-spacing: -.01em; color: var(--brand); }
.g-logo strong { font-family: var(--sans); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.7rem); letter-spacing: -.02em; }
.g-logo small { margin-top: .5rem; font-size: .6875rem; letter-spacing: .06em; color: var(--cream); opacity: .85; }

/* --- навигатор глав (hub) --- */
:root { --enter-top: calc(62% + clamp(3.2rem, 6vh, 5rem)); }
@media (max-height: 680px) { :root { --enter-top: calc(58% + 2.4rem); } }
.g-nav { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.g-nav > * { pointer-events: auto; }
body:not(.mode-nav) .g-nav { visibility: hidden; }
.g-nav__title { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(90vw, 900px); text-align: center; pointer-events: none; }
.g-nav__title h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.05; text-shadow: 0 2px 30px rgba(var(--deep-rgb),.6); text-wrap: balance; }
.g-nav__title p { margin: .4rem 0 0; font-size: clamp(.8rem, 1vw, .95rem); color: var(--beige); text-shadow: 0 1px 12px rgba(var(--deep-rgb),.8); }
.g-arrow { position: absolute; top: 50%; width: 64px; height: 110px; margin-top: -55px; display: grid; place-items: center; opacity: .8; transition: opacity .3s; }
.g-arrow:hover { opacity: 1; }
.g-arrow svg { width: 34px; height: 70px; stroke: var(--cream); fill: none; stroke-width: 1.2; }
.g-arrow--l { left: calc(var(--gut) * .4); } .g-arrow--r { right: calc(var(--gut) * .4); }
.g-next { position: absolute; right: calc(var(--gut) + 56px); top: 50%; transform: translateY(-50%); text-align: right; font-size: .8125rem; line-height: 1.25; text-decoration: none; pointer-events: auto; }
.g-next em { font-family: var(--serif); font-style: italic; }
.g-next u { text-decoration: none; letter-spacing: .02em; font-weight: 700; }
.g-next u i { font-style: normal; font-weight: 400; opacity: .55; }
.g-enter { position: absolute; left: 50%; top: var(--enter-top); width: 76px; height: 76px; margin-left: -38px; border-radius: 50%; background: var(--accent, #6b849f); display: grid; place-items: center; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--bg-rgb),.85); box-shadow: 0 0 0 1px rgba(var(--cream-rgb),.25); transition: transform .5s var(--bounce), background .6s var(--ease); z-index: 2; }
.g-enter:hover { transform: scale(1.12); }
.g-enter::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(var(--cream-rgb),.25); animation: audio 2.6s var(--ease) infinite; }
.g-thread { position: absolute; left: 50%; top: calc(var(--enter-top) + 76px); bottom: 0; width: 1px; background: rgba(var(--cream-rgb),.8); transform-origin: top; pointer-events: none; }

/* --- низ: плеер, about, язык --- */
.g-foot { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--gut) calc(var(--gut) * .6); pointer-events: none; }
.g-foot > * { pointer-events: auto; }
.g-player { display: flex; align-items: center; gap: .8rem; }
.g-player__btn { width: 46px; height: 46px; border-radius: 50%; background: var(--teal); display: grid; place-items: center; position: relative; }
.g-player__btn i { display: flex; gap: 4px; } .g-player__btn i b { width: 3px; height: 16px; background: var(--bg); border-radius: 1px; }
.g-player__btn .pl { width: 0; height: 0; border-left: 13px solid var(--bg); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.g-player__meta { display: flex; flex-direction: column; font-size: .8125rem; line-height: 1.3; max-width: 44vw; }
.g-player__meta small { color: var(--sage); font-variant-numeric: tabular-nums; }
.g-player__meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-right { display: flex; align-items: center; gap: 1.2rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.g-right a { text-decoration: none; }
.g-right .langs button { font-size: .75rem; }
.g-acc { width: 22px; height: 22px; border-radius: 50%; background: var(--cream); color: var(--bg); display: grid; place-items: center; font-size: 13px; font-weight: 700; }

/* --- глава (режим chapter) --- */
.g-bird { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; overflow: visible; }
.g-ctitle { position: fixed; z-index: 14; left: var(--gut); top: calc(var(--gut) * .75 + 5.4rem); max-width: min(30rem, 60vw); pointer-events: none; }
.g-ctitle .n { font-family: var(--serif); color: var(--accent); font-size: 1rem; }
.g-ctitle h1 { margin: .2rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.1; text-shadow: 0 2px 20px rgba(var(--deep-rgb),.7); }
body:not(.mode-chapter) .g-ctitle, body:not(.mode-chapter) .g-cnav { display: none; }
.g-cnav { position: fixed; z-index: 14; left: 50%; bottom: calc(var(--gut) * .6); transform: translateX(-50%); display: flex; align-items: center; gap: 1rem; font-size: .75rem; white-space: nowrap; }
.g-cnav a, .g-cnav button { text-decoration: none; opacity: .8; } .g-cnav a:hover, .g-cnav button:hover { opacity: 1; }
.g-cnav .disc b { color: var(--accent); }
.g-cnav .sep { width: 1px; height: 14px; background: rgba(var(--cream-rgb),.35); }
.g-back { letter-spacing: .14em; text-transform: uppercase; }

/* --- 3D-точки (как GL-hotspots оригинала) --- */
.hs3d-dot { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #ab9694); color: var(--g, #372933); box-shadow: 0 2px 14px rgba(0,0,0,.25); transition: box-shadow .3s; will-change: transform, opacity; }
.hs3d-dot svg { width: 22px; height: 22px; }
.hs3d-dot:hover { box-shadow: 0 0 0 3px rgba(var(--cream-rgb),.6), 0 2px 18px rgba(0,0,0,.35); }
.hs3d-dot.is-found::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(var(--cream-rgb),.7); }
.hs3d-dot .lbl { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font-family: var(--serif); font-size: .9375rem; color: var(--cream); background: rgba(var(--bg-rgb),.88); padding: .3em .75em; border-radius: 3px; opacity: 0; transition: opacity .25s; pointer-events: none; }
.hs3d-dot:hover .lbl, .hs3d-dot:focus-visible .lbl { opacity: 1; }
.g-compass { position: fixed; z-index: 14; right: calc(var(--gut) * 1.2); bottom: calc(var(--gut) * .6 + 3.6rem); width: 110px; height: 110px; border-radius: 50%; border: 1px solid rgba(var(--cream-rgb),.6); pointer-events: none; }
.g-compass::before { content: "N"; position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-size: .6875rem; }
.g-compass i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(89,134,138,.25); }
.g-compass b { position: absolute; left: 50%; top: 6px; width: 1px; height: 8px; background: var(--cream); }

/* --- intro v2 --- */
.intro2 { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.intro2 > * { pointer-events: auto; }
.intro2__load { position: absolute; left: var(--gut); top: calc(var(--gut) * .75); display: flex; flex-direction: column; gap: .55rem; }
.intro2__load .g-lines .lf { fill: rgba(var(--cream-rgb),.14); }
.intro2__load .g-lines .lf.is-on { fill: rgba(var(--cream-rgb),.85); }
.intro2__load .intro2__txt { font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.45rem); color: var(--sage); }
.intro2__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(620px, calc(100% - 2 * var(--gut))); text-align: center; display: flex; flex-direction: column; align-items: center; }
.intro2__hp { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--mauve); display: grid; place-items: center; color: var(--mauve); }
.intro2__hp svg { width: 30px; height: 30px; }
.intro2__hpt { margin: 1.1rem 0 3.2rem; color: var(--mauve); font-size: clamp(.9rem, 1.2vw, 1.05rem); }
.intro2__body { margin: 0 0 2.6rem; font-weight: 300; font-size: clamp(.95rem, 1.25vw, 1.08rem); line-height: 1.5; color: var(--cream); text-wrap: pretty; }
.intro2 .g-enter { position: relative; left: auto; top: auto; margin: 0; background: #6b849f; }
.intro2__thread { position: absolute; left: 50%; bottom: 0; width: 1px; background: rgba(var(--cream-rgb),.8); transform-origin: top; }
.intro2.is-loading .intro2__center { visibility: hidden; }

/* панели глав поверх облака — полупрозрачные */
.v2 .salon { background: linear-gradient(90deg, rgba(var(--deep-rgb),.78), rgba(var(--deep-rgb),.35) 60%, rgba(var(--deep-rgb),0)); padding-top: calc(var(--gut) * .75 + 9.5rem); }
.v2 .salon .chead { display: none; }
.v2 .legal { background: rgba(var(--bg-rgb),.84); backdrop-filter: blur(4px); }
.v2 .contact-card { background: rgba(var(--bg-rgb),.82); }
.v2 .mem-track { bottom: 6.5rem; }
.v2 .mem-progress { bottom: 5rem; }
.v2 .chead { display: none; }
.v2 .legal .chead, .v2 .contact-card .chead { display: block; }
.v2 .studio-bar { bottom: 4.8rem; }
.v2 .lab-hud { top: calc(var(--gut) * .75 + 7rem); }
.v2 .lab-mini { bottom: 5rem; }
.v2 .setlist { top: calc(var(--gut) * .75 + 7rem); }
.v2 .stage-cta { position: fixed; left: 50%; bottom: 5.4rem; transform: translateX(-50%); z-index: 15; }

@media (max-width: 760px) {
  .g-lines { width: 120px; }
  .g-arrow { width: 40px; } .g-arrow svg { width: 22px; height: 46px; }
  .g-next { display: none; }
  .g-player__meta { max-width: 38vw; }
  .g-right .g-about { display: none; }
  .g-ctitle { top: calc(var(--gut) * .75 + 4.4rem); }
  .g-cnav .disc { display: none; }
  .g-compass { display: none; }
  .hs3d-dot { width: 38px; height: 38px; } .hs3d-dot svg { width: 18px; height: 18px; }
}
body.mode-intro .g-menubtn, body.mode-intro .g-foot { visibility: hidden; }
.menu.v2m { background: linear-gradient(90deg, rgba(var(--deep-rgb),.9) 0%, rgba(var(--deep-rgb),.72) 45%, rgba(var(--deep-rgb),.25) 100%); z-index: 25; padding-top: calc(var(--gut) * .75 + 6.5rem); }
.menu.v2m .menu__list { columns: 1; max-width: 46rem; }
.menu.v2m .menu__t { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.g-list { position: fixed; z-index: 14; left: var(--gut); bottom: 5rem; display: flex; flex-wrap: wrap; gap: .5rem; max-width: 60vw; }
.g-links { position: fixed; z-index: 14; left: var(--gut); top: calc(var(--gut) * .75 + 10rem); }
body.contrast { --sage: #cfd8d7; --mauve: #e6d2d0; }
body.contrast .shade, body.contrast .g-nav__title h2 { text-shadow: 0 0 2px #000, 0 2px 20px #000; }
body.lab-playing .g-ctitle, body.lab-playing .g-cnav { opacity: .25; }
.intro2 .g-enter { animation: none; }
/* v2: попап поверх облака — облако видно */
.v2-on .ov__bg { background: rgba(var(--deep-rgb),.35); backdrop-filter: none; }
.v2-on .ov__panel { background: rgba(var(--bg-rgb),.93); width: min(1060px, 100%); }
.v2-on .ov__body.no-media { grid-template-columns: minmax(0, 40rem); justify-content: start; padding-left: clamp(1.5rem, 6vw, 5rem); }
.g-cnav { top: calc(var(--gut) * .75 + .3rem); bottom: auto; }
@media (max-width: 760px) { .g-cnav { top: auto; bottom: 4.2rem; } }
.v2 .mem { background: rgba(var(--bg-rgb),.72); padding: 1rem 1.1rem 1.1rem; backdrop-filter: blur(2px); }
.v2 .mem__t { margin-top: .2rem; }
.v2 .salon { background: linear-gradient(90deg, rgba(var(--deep-rgb),.7), rgba(var(--deep-rgb),.25) 55%, rgba(var(--deep-rgb),0)); }
/* v3: in-section link buttons, hypnostreet branding */
.g-cta { position: fixed; z-index: 15; right: var(--gut); bottom: calc(var(--gut) * .6 + 5.6rem); display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.g-cta__btn { display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1.2rem .7rem 1.3rem; border: 1px solid rgba(var(--cream-rgb),.7); border-radius: 999px; background: rgba(var(--bg-rgb),.55); backdrop-filter: blur(3px); color: var(--cream); text-decoration: none; font-family: var(--serif); font-size: 1.05rem; transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.g-cta__btn:hover { background: rgba(var(--cream-rgb),.16); border-color: var(--cream); transform: translateX(-4px); }
.g-cta__btn .arr { width: 18px; height: 1px; background: currentColor; position: relative; }
.g-cta__btn .arr::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.g-cta__btn--hyp, .g-cta__btn--hyp:visited { color: #FFC717; font-weight: 600; font-family: var(--sans); letter-spacing: .02em; border-color: rgba(255,199,23,.7); }
.g-cta__btn--hyp:hover, .g-cta__btn--hyp:active, .g-cta__btn--hyp:focus { color: #FFEB61; border-color: #FFEB61; background: rgba(255,199,23,.12); }
.g-brand { position: absolute; right: var(--gut); bottom: calc(var(--gut) * .6 + 2.4rem); display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; pointer-events: auto; }
.g-brand a.hyp, .g-brand a.hyp:visited { color: #FFC717; font-weight: 600; text-decoration: none; font-size: .8125rem; letter-spacing: .02em; }
.g-brand a.hyp:hover, .g-brand a.hyp:active, .g-brand a.hyp:focus { color: #FFEB61; }
.g-brand small { font-size: .625rem; color: rgba(var(--cream-rgb),.5); letter-spacing: .04em; }
@media (max-width: 760px) {
  .g-cta { bottom: calc(var(--gut) * .6 + 5rem); }
  .g-cta__btn { font-size: .95rem; padding: .55rem 1rem; }
  .g-brand { position: fixed; z-index: 31; top: calc(var(--gut) * .75 + 4.2rem); bottom: auto; right: var(--gut); } .g-brand small { font-size: .5625rem; }
}
/* v4: Enter made of flowers */
.g-enter.g-flowers { background: transparent; overflow: visible; isolation: isolate; width: 100px; height: 100px; margin-left: -50px; }
.intro2 .g-enter.g-flowers { margin-left: 0; }
.g-flowers + .g-thread, .g-nav .g-thread { top: calc(var(--enter-top) + 100px); }
.g-enter.g-flowers::after { inset: -46px; border-color: rgba(var(--cream-rgb),.16); }
.g-flowers__cv { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; }
.g-enter__t { position: relative; z-index: 1; color: #fbf6ee; text-shadow: 0 1px 8px rgba(var(--deep-rgb),.9), 0 0 2px rgba(var(--deep-rgb),.9); letter-spacing: .16em; }
.g-enter.g-flowers:hover { transform: scale(1.06); }

/* configurator in the hosted page */
.admin-host { position: fixed; inset: 0; z-index: 2000; overflow: auto; -webkit-overflow-scrolling: touch; }
body.admin-open > :not(.admin-host):not(script):not(link) { visibility: hidden; }
body.admin-open { overflow: auto; }
/* v5: every text stays readable over the living 3D world */
body.v2-on::before, body.v2-on::after { content: ""; position: fixed; left: 0; right: 0; z-index: 5; pointer-events: none; }
body.v2-on::before { top: 0; height: min(17vh, 150px); background: linear-gradient(rgba(var(--deep-rgb), .62), rgba(var(--deep-rgb), 0)); }
body.v2-on::after { bottom: 0; height: min(16vh, 140px); background: linear-gradient(rgba(var(--deep-rgb), 0), rgba(var(--deep-rgb), .7)); }
body.admin-open::before, body.admin-open::after { display: none; }
.g-nav__title { isolation: isolate; }
.g-nav__title::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(980px, 110vw); height: 190%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--deep-rgb), .5), rgba(var(--deep-rgb), .22) 55%, rgba(var(--deep-rgb), 0)); }
.g-nav__title h2, .g-ctitle h1 { color: #fffaf2; text-shadow: 0 0 2px rgba(var(--deep-rgb), .9), 0 2px 18px rgba(var(--deep-rgb), .95), 0 0 42px rgba(var(--deep-rgb), .8); }
.g-nav__title p, .g-next, .g-cnav, .g-right, .g-player__meta, .g-logo, .g-menubtn, .g-brand small, .g-ctitle .n { text-shadow: 0 1px 3px rgba(var(--deep-rgb), .95), 0 0 14px rgba(var(--deep-rgb), .85); }
.g-nav__title p { color: #f3ece2; }
.g-cnav { background: rgba(var(--deep-rgb), .55); padding: .5rem 1rem; border-radius: 999px; backdrop-filter: blur(6px); }
.hs3d-dot .lbl { background: rgba(var(--deep-rgb), .92); color: #fffaf2; }
.g-cta__btn { background: rgba(var(--deep-rgb), .72); }
.g-brand { z-index: 31; }
.v2 .setlist, .v2 .salon, .v2 .mem-track, .v2 .chips, .g-list { text-shadow: 0 1px 3px rgba(var(--deep-rgb), .95); }
.g-list .chip, .v2 .chips .chip { background: rgba(var(--deep-rgb), .7); backdrop-filter: blur(4px); }
/* v6: artistic description of each world + reading voice — always in a corner, never over the centre of the world */
.g-poem { position: fixed; z-index: 16; width: 21rem; color: var(--cream); pointer-events: auto; padding: 0; background: none; border: 0; }
.g-poem__bar { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.g-poem--tr .g-poem__bar, .g-poem--br .g-poem__bar { justify-content: flex-end; }
.g-poem--tr .g-poem__txt, .g-poem--br .g-poem__txt { text-align: right; }
.g-poem__play { display: inline-flex; align-items: center; gap: .55rem; padding: .34rem .9rem .34rem .4rem; border-radius: 999px; border: 1px solid rgba(var(--cream-rgb), .5); background: rgba(var(--deep-rgb), .42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: var(--cream); font: 500 .8125rem/1 var(--sans); letter-spacing: .06em; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease); }
.g-poem__play:hover, .g-poem__play:focus-visible { background: rgba(var(--cream-rgb), .16); border-color: var(--cream); outline: none; }
.g-poem__ico { position: relative; width: 24px; height: 24px; border-radius: 50%; background: var(--accent, #6b849f); flex: none; }
.g-poem__ico::before { content: ""; position: absolute; left: 9px; top: 7px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fbf6ee; }
.g-poem.is-reading .g-poem__ico { animation: gpoem-pulse 1.8s ease-out infinite; }
.g-poem.is-reading .g-poem__ico::before { left: 8px; top: 8px; width: 8px; height: 8px; border: 0; background: #fbf6ee; border-radius: 1px; }
@keyframes gpoem-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--cream-rgb), .45); } 100% { box-shadow: 0 0 0 12px rgba(var(--cream-rgb), 0); } }
.g-poem__min { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(var(--cream-rgb), .4); background: rgba(var(--deep-rgb), .35); color: var(--cream); cursor: pointer; display: grid; place-items: center; flex: none; }
.g-poem__min i { position: relative; width: 10px; height: 1px; background: currentColor; }
.g-poem__min:hover, .g-poem__min:focus-visible { border-color: var(--cream); outline: none; }
.g-poem__txt { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(.9rem, 1vw, 1.02rem); line-height: 1.55; text-wrap: pretty; color: #fbf6ee;
  text-shadow: 0 0 2px rgba(var(--deep-rgb), 1), 0 1px 4px rgba(var(--deep-rgb), .95), 0 2px 14px rgba(var(--deep-rgb), .9); max-height: 40vh; overflow: auto; scrollbar-width: none; }
.g-poem__txt::-webkit-scrollbar { display: none; }
.g-poem__s { transition: color .6s var(--ease), opacity .6s var(--ease); }
.g-poem.is-reading .g-poem__s { opacity: .6; }
.g-poem.is-reading .g-poem__s.is-on { opacity: 1; color: #fff; }
.g-poem.is-min { width: auto !important; }
.g-poem.is-min .g-poem__txt { display: none; }
.g-poem.is-min .g-poem__bar { margin: 0; }
.g-poem.is-min .g-poem__min i::after { content: ""; position: absolute; left: 4.5px; top: -4.5px; width: 1px; height: 10px; background: currentColor; }
body:not(.mode-chapter) .g-poem { display: none; }
@media (max-width: 760px) { .g-poem__txt { font-size: .88rem; line-height: 1.48; max-height: 26vh; } }
@media (prefers-reduced-motion: reduce) { .g-poem.is-reading .g-poem__ico { animation: none; } }
.g-lookhint { position: fixed; z-index: 17; left: var(--gut); bottom: calc(var(--gut) * .6 + 4.6rem); display: flex; align-items: center; gap: .7rem; padding: .6rem 1.1rem; border-radius: 999px; background: rgba(var(--deep-rgb), .55); backdrop-filter: blur(4px); color: var(--cream); font: 400 .8125rem/1.3 var(--sans); letter-spacing: .04em; pointer-events: none; opacity: 0; }
.g-lookhint i { width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; position: relative; animation: glook 2.4s ease-in-out infinite; }
.g-lookhint i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: currentColor; }
@keyframes glook { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) { .g-lookhint i { animation: none; } }
@media (max-width: 760px) { .g-cnav { gap: .5rem; font-size: .625rem; max-width: calc(100vw - 2 * var(--gut)); } .g-cnav .g-back { letter-spacing: .06em; } .g-cnav .sep { width: 1px; } }
@media (max-width: 760px) { .v2 .stage-cta { bottom: 8.4rem; } }
/* v8: the film of the section — a clear Play button standing on the living screen */
.g-play3d { position: absolute; left: 0; top: 0; z-index: 8; display: grid; place-items: center; grid-auto-rows: min-content; gap: .55rem; width: 190px; padding: 0; border: 0; background: none; color: #fbf6ee; cursor: pointer; transition: opacity .4s var(--ease), transform .1s linear; pointer-events: auto; }
.g-play3d span { font: 600 .8125rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(var(--deep-rgb), 1), 0 0 2px rgba(var(--deep-rgb), 1); grid-row: 2; }
.g-play3d__ring { grid-row: 1; grid-column: 1; width: 86px; height: 86px; border-radius: 50%; background: rgba(251, 246, 238, .94); box-shadow: 0 0 0 6px rgba(var(--deep-rgb), .55), 0 0 34px 10px rgba(var(--deep-rgb), .7), 0 10px 30px rgba(0,0,0,.35); transition: transform .35s var(--ease), background .35s var(--ease); }
.g-play3d__tri { grid-row: 1; grid-column: 1; width: 0; height: 0; margin-left: 8px; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #2a2030; }
.g-play3d:hover .g-play3d__ring, .g-play3d:focus-visible .g-play3d__ring { transform: scale(1.09); background: #fff; }
.g-play3d::after { content: ""; position: absolute; left: 50%; top: 43px; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; border: 2px solid rgba(251, 246, 238, .8); animation: g-play-pulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes g-play-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.g-vid { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; }
.g-vid__bg { position: absolute; inset: 0; background: rgba(10, 8, 12, .82); backdrop-filter: blur(6px); }
.g-vid__in { position: relative; width: min(1180px, 92vw); display: flex; flex-direction: column; gap: .8rem; }
.g-vid__box { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border: 1px solid rgba(var(--cream-rgb), .18); border-radius: 10px; overflow: hidden; }
.g-vid__box iframe, .g-vid__box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.g-vid__box.is-blocked::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(var(--deep-rgb), .35), rgba(0,0,0,.9)); }
.g-vid__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.g-vid__x { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(var(--cream-rgb), .5); background: rgba(var(--deep-rgb), .6); color: var(--cream); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.g-vid__x:hover, .g-vid__x:focus-visible { border-color: var(--cream); background: rgba(var(--cream-rgb), .16); outline: none; }
@media (max-width: 760px) { .g-play3d { width: 150px; } .g-play3d__ring { width: 68px; height: 68px; } .g-play3d::after { width: 68px; height: 68px; top: 34px; margin: -34px 0 0 -34px; } .g-play3d__tri { border-width: 12px 0 12px 20px; } .g-vid__in { width: 94vw; } }
@media (prefers-reduced-motion: reduce) { .g-play3d::after { animation: none; } }
/* the Enter flower sits lower, so it never covers the world */
.g-nav .g-enter { top: auto; bottom: clamp(7rem, 16vh, 11rem); }
.g-nav .g-thread { top: auto; bottom: 0; height: clamp(3rem, 7vh, 5rem); }
@media (max-width: 760px) { .g-nav .g-enter { bottom: clamp(8.5rem, 18vh, 12rem); } }