:root {
  --ink: #394746;
  --mint: #d8eee7;
  --sky: #f7f8f4;
  --sand: #f4ebe0;
  --blue: #d9e7ea;
  --orange: #e8aa9e;
  --coral: #e8aaa0;
  --violet: #bbb9d7;
  --paper: #fffdf8;
  --line: rgba(57,71,70,.28);
  --travel: 0px;
}
* { box-sizing: border-box; }
html { background: var(--sky); }
body { margin: 0; min-height: 500vh; color: var(--ink); background: var(--sky); font-family: "Onest", "Segoe UI", sans-serif; }
button, a { color: inherit; font: inherit; }
button { border: 0; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.skip { position: fixed; z-index: 200; left: 12px; top: -50px; padding: 10px 14px; background: var(--ink); color: white; }
.skip:focus { top: 12px; }
.route-header { position: fixed; z-index: 80; left: 28px; right: 28px; top: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 20px; pointer-events: none; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.route-header > * { pointer-events: auto; }
.route-mark { position: relative; display: grid; place-items: center; width: 42px; height: 34px; border: 1px solid rgba(57,71,70,.34); border-radius: 57% 43% 61% 39% / 46% 59% 41% 54%; background: rgba(251,247,239,.5); text-decoration: none; font-family: "Unbounded", sans-serif; font-size: 7px; transform: rotate(-5deg); transition: transform .35s cubic-bezier(.18,.75,.18,1), background .3s ease; }
.route-mark::after { content: ""; position: absolute; inset: 4px -4px -3px 5px; z-index: -1; border: 1px solid rgba(121,170,157,.4); border-radius: inherit; transform: rotate(8deg); }
.route-mark:hover,.route-mark:focus-visible { outline: none; background: rgba(216,238,231,.78); transform: rotate(1deg) scale(1.06); }
.route-header p { display: grid; gap: 4px; margin: 0; text-align: center; }
.route-header strong { font-weight: 600; }.route-header span { color: rgba(57,71,70,.58); font-size: 7px; }
.route-header button { justify-self: end; padding: 5px 0; background: none; border-bottom: 1px solid currentColor; cursor: pointer; text-transform: uppercase; letter-spacing: .13em; }
.route-scroll { position: relative; height: 500vh; }
.world { position: sticky; top: 0; width: 100%; height: 100svh; min-height: 620px; overflow: hidden; background: linear-gradient(180deg, #fafaf6 0 64%, #e7f1ed 64% 100%); isolation: isolate; }
.world::after { content: ""; position: absolute; z-index: 70; inset: 0; pointer-events: none; box-shadow: inset 0 0 100px rgba(57,71,70,.07); }
.horizon { position: absolute; z-index: -1; border-radius: 50%; filter: blur(.2px); transform: translate3d(var(--h-shift),0,0); will-change: transform; }
.horizon-far { --h-shift: 0px; width: 62vw; height: 62vw; right: -18vw; top: -31vw; background: rgba(211,235,228,.76); }
.horizon-near { --h-shift: 0px; width: 54vw; height: 28vw; left: -11vw; bottom: -19vw; background: rgba(217,231,234,.62); }
.track { position: absolute; z-index: 2; left: 0; top: 0; width: 500vw; height: 100%; transform: translate3d(var(--travel),0,0); will-change: transform; }
.track::before { content: ""; position: absolute; inset: 64% 0 0; background: linear-gradient(90deg, #e5f0ec, #f3e5dc 29%, #e8f1ec 54%, #e1ecef 78%, #d9eee7); opacity: .94; }
.route-drawing { position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route-shadow { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 24; vector-effect: non-scaling-stroke; }
.route-main { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 8; vector-effect: non-scaling-stroke; }
.station { position: absolute; z-index: 10; top: 0; width: 100vw; height: 100%; opacity: .22; filter: saturate(.65); transition: opacity .6s ease, filter .6s ease; }
.station.is-near { opacity: 1; filter: none; }
.station-zero { left: 0; }.station-one { left: 100vw; }.station-two { left: 200vw; }.station-three { left: 300vw; }.station-four { left: 400vw; }
.station-label { margin: 0 0 18px; color: #557e74; font-size: 9px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: "Unbounded", sans-serif; font-weight: 430; letter-spacing: -.055em; line-height: .94; }
h1 { font-size: clamp(63px, 8.2vw, 132px); }
h2 { font-size: clamp(42px, 5vw, 78px); }
h1 span, h2 span { color: #79aa9d; }
.opening-copy { position: absolute; z-index: 20; left: 8vw; top: 18vh; width: min(43vw, 650px); }
.opening-copy > p:last-child { max-width: 430px; margin: 31px 0 0 8px; color: #687673; font-size: 15px; line-height: 1.55; }
.opening-board { position: absolute; z-index: 4; left: 58vw; top: 10vh; width: 42vw; height: 76vh; overflow: hidden; clip-path: polygon(11% 0, 100% 8%, 88% 94%, 2% 100%, 0 21%); filter: saturate(.72) brightness(1.1); transform: translate3d(var(--depth-x,0),var(--depth-y,0),0) rotate(2deg); }
.opening-board::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(216,238,231,.18), rgba(57,71,70,.11)); mix-blend-mode: color; }
.scroll-instruction { position: absolute; z-index: 21; left: 8.5vw; bottom: 13vh; display: flex; align-items: center; gap: 13px; color: rgba(57,71,70,.65); font-size: 8px; line-height: 1.45; letter-spacing: .14em; text-transform: uppercase; }
.scroll-instruction i { width: 44px; height: 20px; border-bottom: 1px solid currentColor; }
.scroll-instruction i::after { content: "→"; position: absolute; margin: 9px 0 0 34px; }
.station-copy { position: absolute; z-index: 22; }
.station-copy > p:not(.station-label,.small-copy) { max-width: 440px; margin: 28px 0 0; color: #687673; font-size: 15px; line-height: 1.6; }
.station-one .station-copy { left: 49vw; top: 19vh; width: 45vw; }
.giant-number { position: absolute; z-index: 1; left: 4vw; top: 2vh; margin: 0; color: rgba(57,71,70,.06); font-family: "Unbounded", sans-serif; font-size: 36vw; line-height: .8; }
.process-window { position: absolute; z-index: 13; left: 6vw; top: 17vh; width: 35vw; height: 63vh; overflow: hidden; clip-path: polygon(0 5%, 91% 0, 100% 88%, 12% 100%); transform: translate3d(var(--depth-x,0),var(--depth-y,0),0) rotate(-2deg); }
.process-window img { object-position: 45% 45%; }
.games-copy { left: 6vw; top: 15vh; width: 34vw; }
.meaning-cards { position: absolute; z-index: 25; display: block; perspective: 900px; pointer-events: none; }
.meaning-card { --tilt-x: 0deg; --tilt-y: 0deg; --base-rotation: 0deg; --focus-x: 0px; --focus-y: 0px; --focus-scale: 1; --spot-x: 50%; --spot-y: 50%; position: absolute; min-height: 0; padding: 0; border: 0; border-radius: 18px 18px 24px 16px; background: #cfdcd7; color: white; box-shadow: 0 26px 58px rgba(57,71,70,.22), 0 2px 0 rgba(255,255,255,.6) inset; text-align: left; cursor: pointer; overflow: hidden; isolation: isolate; transform: translate3d(calc(var(--depth-x,0px) + var(--focus-x)),calc(var(--depth-y,0px) + var(--focus-y)),0) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) rotate(var(--base-rotation)) scale(var(--focus-scale)); transform-style: preserve-3d; transition: transform .24s cubic-bezier(.18,.75,.18,1), box-shadow .35s ease, filter .35s ease; pointer-events: auto; will-change: transform; }
.meaning-card::before { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(150px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.34), transparent 66%); mix-blend-mode: screen; opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.meaning-card::after { content: ""; position: absolute; z-index: 3; inset: 7px; border: 1px solid rgba(255,255,255,.54); border-radius: 13px 13px 19px 11px; pointer-events: none; }
.meaning-card img { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(.94) brightness(1.03); transition: transform .65s cubic-bezier(.18,.75,.18,1), filter .45s ease; }
.meaning-card:hover, .meaning-card:focus-visible, .meaning-card.is-open { box-shadow: 0 36px 76px rgba(57,71,70,.3); outline: none; filter: saturate(1.05); }
.meaning-card:hover::before, .meaning-card:focus-visible::before { opacity: 1; }
.meaning-card:hover img, .meaning-card:focus-visible img { transform: scale(1.055); filter: saturate(.92) contrast(.98) brightness(1.02); }
.card-caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 48px 17px 16px; background: linear-gradient(180deg, transparent, rgba(34,50,47,.82)); transition: opacity .3s ease, transform .4s ease; }
.card-caption small { font-size: 7px; letter-spacing: .15em; text-transform: uppercase; opacity: .78; }
.card-caption b { font-family: "Unbounded", sans-serif; font-size: 13px; font-weight: 430; letter-spacing: -.04em; line-height: 1.12; }
.card-detail { position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 8px; max-height: none; padding: 14px 14px 13px; border: 1px solid rgba(255,255,255,.65); border-radius: 48% 14px 42% 11px / 18px 12px 15px 22px; overflow: visible; opacity: 0; color: var(--ink); background: linear-gradient(105deg, rgba(255,253,248,.95), rgba(235,244,239,.9)); box-shadow: 0 12px 30px rgba(57,71,70,.16); font-size: 9px; line-height: 1.42; transform: translateY(calc(100% + 12px)) rotate(-1.5deg); transition: transform .42s cubic-bezier(.18,.75,.18,1), opacity .25s ease; }
.meaning-card.is-open .card-caption { opacity: 0; transform: translateY(18px); }
.meaning-card.is-open .card-detail { opacity: 1; transform: translateY(0) rotate(-1.5deg); }
.game-link { text-decoration: none; }
.game-link .card-caption::after { content: "войти"; position: absolute; right: 13px; top: 13px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.68); border-radius: 999px 8px 999px 7px; background: rgba(255,253,248,.2); color: white; font-size: 6px; letter-spacing: .11em; text-transform: uppercase; transition: background .3s ease, color .3s ease, transform .3s ease; }
.game-link:hover .card-caption::after, .game-link:focus-visible .card-caption::after { background: rgba(255,253,248,.88); color: var(--ink); transform: rotate(-4deg) scale(1.06); }
.game-wholeness img { view-transition-name: game-wholeness-hero; }
.game-psychosomatics img { view-transition-name: game-psychosomatics-hero; }
.route-portal { position: fixed; z-index: 900; inset: 0; pointer-events: none; }
.route-portal__veil { position: absolute; inset: 0; background: radial-gradient(circle at var(--portal-x,50%) var(--portal-y,50%), rgba(216,238,231,.96), rgba(251,247,239,.99) 58%); opacity: 0; }
.route-portal__card { position: fixed !important; z-index: 2; margin: 0 !important; pointer-events: none !important; transform: none !important; box-shadow: 0 40px 120px rgba(57,71,70,.28) !important; }
.route-portal__card img { view-transition-name: none !important; }
body.is-leaving-game { overflow: hidden; }
body.is-leaving-game .die-coral .die-sprite { animation: portal-die-coral .62s cubic-bezier(.2,.75,.2,1) both !important; }
body.is-leaving-game .die-lavender .die-sprite { animation: portal-die-lavender .68s cubic-bezier(.2,.75,.2,1) both !important; }
@keyframes portal-die-coral { to { transform: translate3d(-42vw,32vh,0) rotate(-260deg) scale(.72); opacity: 0; } }
@keyframes portal-die-lavender { to { transform: translate3d(46vw,-28vh,0) rotate(310deg) scale(.76); opacity: 0; } }
.opening-cards { left: 44vw; top: 56vh; width: 42vw; height: 29vh; }
.opening-cards .meaning-card:nth-child(1) { left: 0; top: 0; width: 185px; height: 245px; --base-rotation: -8deg; }
.opening-cards .meaning-card:nth-child(2) { left: 205px; top: 34px; width: 225px; height: 145px; --base-rotation: 6deg; }
.process-cards { left: 43vw; top: 66vh; width: 43vw; height: 24vh; }
.process-cards .meaning-card:nth-child(1) { left: 0; top: 0; width: 245px; height: 165px; --base-rotation: 5deg; }
.process-cards .meaning-card:nth-child(2) { left: 230px; top: 48px; width: 205px; height: 145px; --base-rotation: -6deg; }
.format-cards { left: 42vw; top: 12vh; width: 50vw; height: 42vh; }
.format-cards .meaning-card:nth-child(1) { left: 0; top: 0; width: 255px; height: 150px; --base-rotation: -4deg; }
.format-cards::before { content: ""; position: absolute; z-index: -1; left: 270px; top: 12px; width: 122px; height: 182px; border-radius: 16px; background: url("assets/t-game-card-back-v1.webp") center/cover; box-shadow: 0 20px 45px rgba(57,71,70,.17); transform: rotate(13deg) translateZ(-20px); opacity: .9; }
.format-cards .meaning-card:nth-child(2) { left: 245px; top: 55px; width: 270px; height: 155px; --base-rotation: 5deg; }
.format-cards .meaning-card:nth-child(3) { left: 42px; top: 165px; width: 220px; height: 135px; --base-rotation: 3deg; }
.format-cards .meaning-card:nth-child(4) { left: 300px; top: 228px; width: 220px; height: 135px; --base-rotation: -5deg; }
.about-cards { left: 51vw; top: 72vh; width: 42vw; height: 18vh; }
.about-cards .meaning-card:nth-child(1) { left: 0; top: 0; width: 260px; height: 145px; --base-rotation: -4deg; }
.about-cards .meaning-card:nth-child(2) { left: 250px; top: 30px; width: 230px; height: 145px; --base-rotation: 5deg; }
.cards-island { position: absolute; z-index: 10; left: 50vw; top: 51vh; width: 35vw; height: 36vh; overflow: hidden; clip-path: ellipse(49% 43% at 50% 50%); transform: translate3d(var(--depth-x,0),var(--depth-y,0),0) rotate(3deg); filter: saturate(.9); }
.medical-note { position: absolute; z-index: 15; left: 11vw; bottom: 11vh; max-width: 340px; margin: 0; color: rgba(57,71,70,.58); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
.format-note { position: absolute; z-index: 15; left: 7vw; top: 58vh; max-width: 29vw; margin: 0; color: rgba(57,71,70,.62); font-size: 9px; line-height: 1.45; }
.portrait-landmark { position: absolute; z-index: 20; left: 8vw; top: 10vh; width: 38vw; height: 78vh; overflow: hidden; clip-path: polygon(15% 0, 100% 12%, 83% 100%, 0 85%); transform: translate3d(var(--depth-x,0),var(--depth-y,0),0) rotate(-2deg); }
.portrait-landmark img { object-position: 50% 40%; }
.name-wall { position: absolute; z-index: 1; right: -4vw; top: 7vh; margin: 0; color: rgba(57,71,70,.065); font-family: "Unbounded", sans-serif; font-size: 10vw; font-weight: 600; line-height: .85; text-align: right; }
.about-copy { left: 51vw; top: 25vh; width: 43vw; }
.small-copy { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); color: #557e74; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.finish-ring { position: absolute; z-index: 5; left: 6vw; top: 3vh; width: 74vh; height: 74vh; border: 1px solid var(--line); border-radius: 50%; }
.finish-ring::before, .finish-ring::after { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.finish-ring::before { inset: 12%; }.finish-ring::after { inset: 28%; background: rgba(211,235,228,.66); }
.finish-ring span { position: absolute; inset: 41%; z-index: 2; border-radius: 50%; background: var(--orange); }
.finish-ring i { position: absolute; inset: -2%; border-top: 3px solid var(--ink); border-radius: 50%; transform: rotate(35deg); }
.finish-copy { position: absolute; z-index: 20; left: 50vw; top: 18vh; width: 43vw; }
.finish-copy > p:not(.station-label) { max-width: 420px; margin: 26px 0 0; color: #687673; font-size: 15px; line-height: 1.6; }
.finish-copy .contact-launch { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 17px; width: 210px; height: 72px; margin-top: 30px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 50%; background: rgba(251,247,239,.36); color: var(--ink); font-family: "Unbounded", sans-serif; font-size: 10px; cursor: pointer; transform: rotate(-3deg); transition: transform .45s cubic-bezier(.18,.75,.18,1), background .35s; }
.finish-copy .contact-launch::before { content: ""; position: absolute; z-index: -1; inset: 8px -10px -7px 11px; border-radius: 50%; background: rgba(232,170,160,.48); transform: rotate(7deg); transition: transform .45s cubic-bezier(.18,.75,.18,1); }
.finish-copy .contact-launch:hover, .finish-copy .contact-launch:focus-visible { background: rgba(216,238,231,.72); outline: none; transform: rotate(1deg) scale(1.04); }.finish-copy .contact-launch:hover::before, .finish-copy .contact-launch:focus-visible::before { transform: rotate(-4deg) translate(5px,-3px); }
.finish-copy small { display: block; margin-top: 15px; color: #64756f; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.finish-word { position: absolute; right: -3vw; bottom: -6vh; margin: 0; color: rgba(57,71,70,.065); font-family: "Unbounded", sans-serif; font-size: 12vw; font-weight: 600; }
.world-note { position: absolute; z-index: 4; color: rgba(57,71,70,.15); font-family: "Unbounded", sans-serif; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-90deg); }
.note-one { left: 93vw; top: 32vh; }.note-two { left: 196vw; top: 70vh; }.note-three { left: 296vw; top: 16vh; }
.dice-layer { position: absolute; z-index: 19; inset: 0; pointer-events: none; }
.die-traveller { position: absolute; left: 0; top: 0; width: 70px; height: 70px; transition: transform .12s linear; will-change: transform; }
.die-traveller::after { content: ""; position: absolute; z-index: -1; left: 17%; right: 17%; bottom: 3px; height: 9px; border-radius: 50%; background: rgba(57,71,70,.2); filter: blur(7px); opacity: .55; }
.die-coral { transform: translate3d(var(--die-a-x,15vw),var(--die-a-y,68vh),0) translate(-50%,-50%) rotate(var(--die-a-r,-9deg)); }
.die-lavender { width: 64px; height: 64px; transform: translate3d(var(--die-b-x,27vw),var(--die-b-y,62vh),0) translate(-50%,-50%) rotate(var(--die-b-r,11deg)); }
.die-sprite { position: absolute; inset: 0; display: block; background-position: center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 11px 13px rgba(57,71,70,.2)); transform-origin: 50% 68%; }
.die-coral .die-sprite { background-image: url("assets/game-die-coral-v2.webp"); }
.die-lavender .die-sprite { background-image: url("assets/game-die-lavender-v2.webp"); }
.dice-layer.is-rolling .die-coral .die-sprite { animation: die-coral-roll .78s cubic-bezier(.2,.8,.2,1); }
.dice-layer.is-rolling .die-lavender .die-sprite { animation: die-lavender-roll .94s .06s cubic-bezier(.2,.8,.2,1); }
@keyframes die-coral-roll { 0%{transform:rotate(0) translateY(0) scale(.98)} 36%{transform:rotate(46deg) translateY(-17px) scale(1.06)} 72%{transform:rotate(-19deg) translateY(3px) scale(1)} 100%{transform:rotate(0) translateY(0) scale(1)} }
@keyframes die-lavender-roll { 0%{transform:rotate(0) translateY(0) scale(.98)} 31%{transform:rotate(-39deg) translateY(-11px) scale(1.04)} 68%{transform:rotate(23deg) translateY(5px) scale(1)} 100%{transform:rotate(0) translateY(0) scale(1)} }
.route-map { position: absolute; z-index: 75; left: 28px; right: 28px; bottom: 23px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; }
.map-title { font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.map-line { position: relative; height: 1px; background: rgba(57,71,70,.23); overflow: hidden; }.map-line i { display: block; width: 100%; height: 3px; background: var(--ink); transform: translateX(-100%); transform-origin: left; }
.map-stations { display: flex; align-items: center; gap: 9px; }
.map-stations button { position: relative; width: auto; height: auto; min-width: 28px; padding: 5px 7px 8px; border-radius: 999px 9px 999px 7px; background: transparent; color: #64756f; cursor: pointer; font-family: "Unbounded", sans-serif; font-size: 7px; transition: color .28s ease, transform .28s cubic-bezier(.18,.75,.18,1); }
.map-stations button::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: transparent; transform: translateX(-50%) scale(.6); transition: background .28s ease, transform .28s cubic-bezier(.18,.75,.18,1); }
.map-stations button:hover, .map-stations button:focus-visible { color: var(--ink); outline: none; transform: translateY(-2px) rotate(-2deg); }
.map-stations button.is-active { background: rgba(255,253,248,.78); color: var(--ink); box-shadow: 0 6px 16px rgba(57,71,70,.08); }
.map-stations button.is-active::after { background: var(--coral); transform: translateX(-50%) scale(1); box-shadow: 0 0 0 3px rgba(232,170,160,.18); }
.route-status { position: absolute; z-index: 75; right: 29px; top: 50%; display: grid; gap: 5px; margin: 0; text-align: right; transform: rotate(90deg) translateX(50%); transform-origin: right center; font-size: 7px; letter-spacing: .15em; text-transform: uppercase; }.route-status b { font-weight: 500; }.route-status span { color: #64756f; }

.contact-dialog { width: min(720px,calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 34px 34px 58px 22px; overflow: visible; color: var(--ink); background: transparent; box-shadow: 0 45px 140px rgba(57,71,70,.28); }
.contact-dialog::backdrop { background: rgba(52,66,64,.32); backdrop-filter: blur(13px) saturate(.75); animation: contact-backdrop .45s ease both; }
.contact-dialog[open] { animation: contact-arrive .62s cubic-bezier(.18,.78,.18,1) both; }
.contact-sheet { position: relative; padding: 58px 62px 48px; border: 1px solid rgba(255,255,255,.72); border-radius: inherit; overflow: hidden; background: radial-gradient(circle at 92% 8%,rgba(216,238,231,.95),transparent 42%),radial-gradient(circle at 4% 96%,rgba(232,170,160,.2),transparent 38%),#fffdf8; }
.contact-sheet::before { content: ""; position: absolute; right: -82px; top: -92px; width: 240px; height: 240px; border: 1px solid rgba(57,71,70,.12); border-radius: 50%; box-shadow: 0 0 0 28px rgba(216,238,231,.22),0 0 0 59px rgba(187,185,215,.08); }
.contact-sheet h2 { position: relative; font-size: clamp(36px,5vw,62px); }.contact-sheet h2 span { color: #79aa9d; }
.contact-close { position: absolute; z-index: 5; right: 22px; top: 18px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,253,248,.66); cursor: pointer; font-size: 22px; font-weight: 300; line-height: 1; }
.contact-close:hover,.contact-close:focus-visible { outline: none; background: var(--mint); transform: rotate(7deg); }
.contact-intro { max-width: 510px; margin: 25px 0 30px; color: #687673; font-size: 14px; line-height: 1.55; }
.message-field { display: block; margin-bottom: 9px; color: #557e74; font-size: 8px; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; }
.contact-sheet textarea { display: block; width: 100%; min-height: 128px; padding: 18px 20px; border: 1px solid rgba(57,71,70,.24); border-radius: 17px 17px 28px 12px; resize: vertical; outline: 0; color: var(--ink); background: rgba(255,255,255,.58); font: 13px/1.6 "Onest","Segoe UI",sans-serif; transition: border-color .25s ease, box-shadow .25s ease; }
.contact-sheet textarea:focus { border-color: #79aa9d; box-shadow: 0 0 0 4px rgba(121,170,157,.14); }
.contact-actions { display: flex; gap: 10px; margin-top: 18px; }
.contact-actions button { min-height: 48px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 999px 10px 999px 8px; cursor: pointer; background: var(--ink); color: white; font-size: 9px; letter-spacing: .04em; transition: transform .3s cubic-bezier(.18,.75,.18,1),background .25s,color .25s; }
.contact-actions button + button { background: transparent; color: var(--ink); }
.contact-actions button:hover,.contact-actions button:focus-visible { outline: none; transform: translateY(-2px) rotate(-1deg); background: var(--mint); color: var(--ink); }
.contact-feedback { min-height: 18px; margin: 14px 0 0; color: #557e74; font-size: 10px; }
.contact-sheet > small { display: block; color: rgba(57,71,70,.54); font-size: 8px; letter-spacing: .04em; }
@keyframes contact-backdrop { from { opacity: 0; } }
@keyframes contact-arrive { from { opacity: 0; transform: translate3d(0,34px,0) scale(.92) rotate(-2deg); clip-path: circle(8% at 74% 73%); } to { opacity: 1; transform: none; clip-path: circle(140% at 74% 73%); } }

@media (max-width: 760px) {
  body,.route-scroll { min-height: 500vh; }
  .world { min-height: 620px; }
  .route-header { left: 16px; right: 16px; top: 15px; grid-template-columns: auto 1fr auto; }
  .route-header p { display: grid; gap: 2px; margin-left: 4px; text-align: left; }.route-header span { display: block; color: rgba(57,71,70,.58); font-size: 6px; letter-spacing: .07em; }.route-header button { font-size: 7px; }
  h1 { font-size: clamp(52px, 15vw, 74px); }.opening-copy { left: 19px; top: 13vh; width: 87vw; }
  .opening-copy > p:last-child { max-width: 330px; margin: 22px 0 0; font-size: 12px; }
  .opening-board { left: 44vw; top: 49vh; width: 64vw; height: 43vh; }
  .scroll-instruction { left: 19px; bottom: 17vh; }
  h2 { font-size: clamp(34px, 10.5vw, 50px); }
  .station-one .station-copy { left: 20px; top: 12vh; width: 89vw; }.station-copy > p:not(.station-label,.small-copy) { max-width: 345px; margin-top: 18px; font-size: 12px; }
  .process-window { left: 21vw; top: 50vh; width: 69vw; height: 40vh; }
  .giant-number { top: 47vh; font-size: 70vw; }
  .games-copy { left: 20px; top: 11vh; width: 86vw; }
  .meaning-card { padding: 0; border-radius: 13px 13px 18px 11px; }.card-caption { padding: 34px 12px 11px; }.card-caption b { font-size: 10px; }.card-caption small { font-size: 6px; }.card-detail { padding: 10px; font-size: 8px; }.opening-cards { left: 19px; top: 51vh; width: 90vw; height: 32vh; }.opening-cards .meaning-card:nth-child(1) { left: 0; top: 0; width: 146px; height: 194px; }.opening-cards .meaning-card:nth-child(2) { left: 132px; top: 30px; width: 190px; height: 124px; }.process-cards { left: 20px; top: 53vh; width: 88vw; height: 31vh; }.process-cards .meaning-card:nth-child(1) { left: 0; top: 0; width: 180px; height: 128px; }.process-cards .meaning-card:nth-child(2) { left: 145px; top: 55px; width: 176px; height: 120px; }.format-cards { left: 19px; top: 37vh; width: 90vw; height: 50vh; }.format-cards::before { left: 122px; top: -12px; width: 82px; height: 122px; }.format-cards .meaning-card:nth-child(1) { left: 0; top: 0; width: 157px; height: 135px; }.format-cards .meaning-card:nth-child(2) { left: 144px; top: 26px; width: 176px; height: 142px; }.format-cards .meaning-card:nth-child(3) { left: 16px; top: 145px; width: 150px; height: 122px; }.format-cards .meaning-card:nth-child(4) { left: 154px; top: 184px; width: 166px; height: 124px; }.about-cards { left: 20px; top: 62vh; width: 88vw; height: 31vh; }.about-cards .meaning-card:nth-child(1) { left: 0; top: 0; width: 185px; height: 122px; }.about-cards .meaning-card:nth-child(2) { left: 156px; top: 42px; width: 165px; height: 120px; }
  .cards-island { left: 23vw; top: 63vh; width: 72vw; height: 28vh; }.medical-note { left: 20px; bottom: 9vh; max-width: 260px; font-size: 6px; }.format-note { left: 20px; top: 76vh; max-width: 290px; font-size: 6px; }
  .portrait-landmark { left: 38vw; top: 40vh; width: 60vw; height: 50vh; }.about-copy { left: 20px; top: 12vh; width: 89vw; }.name-wall { top: 47vh; font-size: 17vw; }
  .finish-ring { left: -31vw; top: 43vh; width: 62vh; height: 62vh; }.finish-copy { left: 20px; top: 13vh; width: 89vw; }.finish-copy > p:not(.station-label) { margin-top: 18px; font-size: 12px; }.finish-copy .contact-launch { margin-top: 21px; padding: 15px; font-size: 10px; }
  .finish-word { bottom: 2vh; font-size: 18vw; }
  .die-traveller { width: 56px; height: 56px; }
  .die-lavender { width: 51px; height: 51px; }
  .route-map { left: 16px; right: 16px; bottom: 14px; gap: 9px; }.map-title { display: none; }.map-stations { gap: 5px; }.map-stations button { min-width: 24px; padding: 4px 5px 7px; font-size: 6px; }
  .route-status { display: none; }
  .contact-dialog { width: calc(100vw - 22px); max-height: calc(100svh - 22px); border-radius: 24px 24px 38px 15px; }
  .contact-sheet { padding: 52px 20px 27px; }.contact-sheet h2 { font-size: 36px; }.contact-intro { margin: 20px 0 23px; font-size: 12px; }.contact-actions { display: grid; }.contact-actions button { width: 100%; }.contact-sheet textarea { min-height: 145px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body { min-height: auto; }
  .route-scroll { height: auto; }
  .world { position: relative; height: auto; min-height: 0; overflow: visible; }
  .track { position: relative; width: 100%; height: auto; transform: none !important; }
  .station { position: relative; left: auto !important; width: 100%; min-height: 760px; overflow: hidden; opacity: 1; filter: none; }
  .route-drawing,.world-note,.route-map,.route-status,.horizon { display: none; }
  .route-header { position: absolute; }
  .depth-object { transform: none !important; }
  .meaning-card { transform: none !important; backdrop-filter: none; }
  .die-traveller { transition: none; }
  .dice-layer.is-rolling .die-sprite { animation: none; }
  .contact-dialog[open],.contact-dialog::backdrop { animation: none; }
}