@view-transition { navigation: auto; }
::view-transition-old(root) { animation: journey-out 180ms ease both; }
::view-transition-new(root) { animation: journey-in 240ms ease both; }
@keyframes journey-out { to { opacity: 0; } }
@keyframes journey-in { from { opacity: 0; } to { opacity: 1; } }
/* A broad edge vignette gives the flat artboard a quiet sense of depth. */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:49;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 48%, rgba(41,55,55,.025) 65%, rgba(41,55,55,.105) 84%, rgba(30,49,52,.19) 100%),
    linear-gradient(180deg, rgba(63,129,154,.035), transparent 19%, transparent 82%, rgba(63,129,154,.045));
}
/* A quiet paper grain ties the clean interface to the hand-drawn map. */
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.45' intercept='-.18'/%3E%3CfeFuncG type='linear' slope='1.45' intercept='-.18'/%3E%3CfeFuncB type='linear' slope='1.45' intercept='-.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
  mix-blend-mode:multiply;
  opacity:.105;
}
.ambient-toggle { position:fixed; right:max(24px,env(safe-area-inset-right)); bottom:max(24px,env(safe-area-inset-bottom)); z-index:12; width:44px; height:44px; display:grid; place-items:center; border:1px solid #99a9a9; border-radius:50%; color:#3f819a; background:#fffffff2; cursor:pointer; }
.ambient-toggle svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ambient-toggle[aria-pressed="true"] .sound-off, .ambient-toggle[aria-pressed="false"] .sound-on { display:none; }
.ambient-toggle:focus-visible { outline:2px solid #3f819a; outline-offset:4px; }
.map-stage { padding-right:48px; }
.pillar-rail { gap:0; }
.pillar-jump { height:clamp(24px,3.1vh,32px); }
.pillar-rail-segment { width:20px; height:5px; }
.pillar-jump:hover .pillar-rail-segment, .pillar-jump:focus-visible .pillar-rail-segment { width:28px; }
.pillar-jump[aria-expanded="true"] .pillar-rail-segment { width:30px; opacity:1; }
.pillar-rail-label { color:#293737; background:#fffffff5; border:1px solid #dce1df; box-shadow:none; }
.side-panel h2 { font-size:clamp(20px,1.5vw,24px); line-height:1.25; }
.panel-image { border:0; border-radius:4px; background:white; margin-bottom:18px; }
.panel-image img { object-fit:contain; }
.side-panel.open:hover .panel-image img { transform:none; }
.workshop-link { padding:10px 0; border:0; border-top:1px solid #dce1df; border-radius:0; margin-top:0; }
.map-touch-hint { display:none; }
.aerial-cloud { animation-duration:calc(var(--cloud-duration,80s) * .35); }
@keyframes cloud-drift { from { transform:translate3d(-24px,-8px,0); } to { transform:translate3d(36px,16px,0); } }
@media(max-width:900px) {
  body::before { background:radial-gradient(ellipse at 50% 44%, transparent 42%, rgba(41,55,55,.035) 63%, rgba(41,55,55,.13) 86%, rgba(30,49,52,.2) 100%); }
  .map-stage { padding-right:16px; }
  .map-stage { grid-template-rows:auto auto auto auto; }
  .map-area { grid-row:3; height:calc(100svh - 230px); min-height:420px; aspect-ratio:auto; overflow:hidden; display:block; touch-action:none; border-top:1px solid #e8eded; border-bottom:1px solid #e8eded; }
  .map-canvas { position:absolute; left:0; top:0; }
  .map { pointer-events:none; }
  .map-hotspot { touch-action:none; }
  .map-touch-hint { grid-column:1; grid-row:2; display:flex; justify-content:space-between; position:relative; padding:0 2px; font-size:12px; color:#536e76; text-decoration:none; z-index:4; }
  .map-touch-hint span { text-decoration:underline; text-underline-offset:4px; }
  .filter-menu { width:min(280px,calc(100vw - 88px)); }
  .ambient-toggle { right:16px; bottom:22px; }
  .aerial-frame { display:block; opacity:.55; }
  #workshop-list { scroll-margin-top:20px; }
  .mobile-workshops { grid-row:4; }
}
@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
}