:root {
  color-scheme: light;
  /* How far from a nav button the pointer starts to register, in px. The label
     magnet in work-nav.js and the button's rise in site-nav-depth.js both read
     it, so the word and the card it sits on answer the cursor at the same
     distance instead of the card waking up first. */
  --site-nav-sense: 80;
  /* How tall a nav button is drawn in the scene. Declared here, on :root,
     because About's visual copy and its slab hang in the hero panel, outside
     .site-nav, and would not inherit it from there. Everything that describes
     the button as a solid object is written as a share of this below, so the
     card keeps its proportions instead of growing while its thickness stays
     put: at 48px a 1.6px body read right, and the same 1.6px against a 64px
     card on a large screen read as a sticker. */
  --site-nav-card-unit: clamp(48px, 6.4vmin, 64px);
  --hero-sky: #236d66;
  --player-bg: rgba(255, 255, 255, 0.82);
  --player-fg: #3a342e;
  --player-muted: rgba(58, 52, 46, 0.56);
  --player-track: rgba(58, 52, 46, 0.14);
  --player-fill: #3a342e;
  --player-on: #ffffff;
  --player-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(32, 28, 24, 0.08);
  --art-w: 1424;
  --art-h: 1424;
  --hero-gutter: clamp(28px, 10vw, 96px);
  --page-paper: var(--hero-sky);
  --page-ink: #211d19;
  --page-muted: rgba(33, 29, 25, 0.5);
  --page-line: rgba(33, 29, 25, 0.18);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --hero-sky: #236d66;
  --player-bg: rgba(26, 24, 22, 0.84);
  --player-fg: #f3efe8;
  --player-muted: rgba(243, 239, 232, 0.58);
  --player-track: rgba(243, 239, 232, 0.16);
  --player-fill: #f3efe8;
  --player-on: #12110f;
  --player-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --page-paper: var(--hero-sky);
  --page-ink: #f1ede6;
  --page-muted: rgba(241, 237, 230, 0.5);
  --page-line: rgba(241, 237, 230, 0.18);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
}

html,
body {
  margin: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior-x: none;
  background: var(--hero-sky);
  transition-property: background-color;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.site-loader.work-video-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  color: #fefdfc;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 260ms cubic-bezier(0.2, 0, 0, 1);
}

.site-loader__fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  aspect-ratio: 510 / 500;
  transform: translate(-50%, calc(-50% - 16px));
  opacity: 1;
  transition: opacity 150ms ease;
}

.site-loader__fallback svg {
  display: block;
  width: 100%;
  height: 100%;
}

.site-loader.is-shader-ready .site-loader__fallback {
  opacity: 0;
}

.site-loader.work-video-loader.is-exiting {
  opacity: 0;
  pointer-events: none;
}

.site-loader.work-video-loader .work-video-loader__stage {
  opacity: 0;
  transition: opacity 150ms ease;
  transition-delay: 0s;
}

.site-loader.work-video-loader.is-shader-ready .work-video-loader__stage,
.site-loader.work-video-loader .work-video-loader__progress {
  opacity: 1;
  transition-delay: 0s;
}

.site-loader.work-video-loader[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .site-loader__fallback {
    width: 36px;
    transform: translate(-50%, calc(-50% - 14px));
  }
}

:root[data-site-section="thoughts"] body {
  background: var(--hero-sky);
}

main,
.hero {
  height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
}

.site-sections {
  position: relative;
  overflow: hidden;
}

.site-panel {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 360ms cubic-bezier(0.2, 0, 0, 1),
    transform 480ms cubic-bezier(0.2, 0, 0, 1),
    visibility 0s linear 480ms;
}

.site-panel.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.site-panel--thoughts {
  background: var(--hero-sky);
  transform: scale(1.008);
  transition-duration: 280ms, 360ms, 360ms;
}

.site-panel--thoughts.is-active {
  transform: scale(1);
}

html[data-section-pager="true"] .site-sections {
  overflow: visible;
  background: var(--hero-sky);
  touch-action: pan-y;
  transform: translate3d(var(--pager-x, 0px), 0, 0);
  transition-property: transform;
  transition-duration: 0s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

html[data-section-pager="true"] .site-panel,
html[data-section-pager="true"] .site-panel.is-active,
html[data-section-pager="true"] .site-panel--thoughts,
html[data-section-pager="true"] .site-panel--thoughts.is-active {
  top: 0;
  right: auto;
  bottom: 0;
  width: 100%;
  opacity: 1;
  visibility: hidden;
  transform: none;
  transition: none;
}

html[data-section-pager="true"] .site-panel[data-site-panel="about"] {
  left: 0;
}

html[data-section-pager="true"] .site-panel[data-site-panel="thoughts"] {
  left: 100%;
}

html[data-section-pager="true"] .site-panel[data-site-panel="work"] {
  left: 200%;
}

html[data-section-pager="true"] .site-panel.is-active,
html[data-section-pager="true"][data-site-section="about"] .site-panel:is(
  [data-site-panel="about"],
  [data-site-panel="thoughts"]
),
html[data-section-pager="true"][data-site-section="thoughts"] .site-panel,
html[data-section-pager="true"][data-site-section="work"] .site-panel:is(
  [data-site-panel="thoughts"],
  [data-site-panel="work"]
) {
  visibility: visible;
}

html[data-section-pager="true"] .site-panel:not(.is-active) {
  pointer-events: none;
}

html[data-section-pager="true"] .site-panel--thoughts {
  background: var(--hero-sky);
}

html[data-section-pager="true"] .site-panel--editorial {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  /* Keep native vertical scrolling, but do not let this nested scrollport
     cancel the horizontal gesture before the section pager can claim it. */
  touch-action: pan-y;
}

html:is(.is-section-dragging, .is-section-settling) .site-sections {
  transition-duration: 0s;
  will-change: transform;
}

html[data-section-pager="true"].is-section-settling:not(.is-section-dragging) .site-sections {
  transition-duration: var(--pager-settle-duration, 280ms);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.thought-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  border: 0;
  background: var(--hero-sky);
  contain: layout paint style;
}

.site-nav {
  --site-nav-bubble-bg: rgb(251, 237, 214);
  --site-nav-bubble-border: rgba(55, 46, 37, 0.7);
  --site-nav-bubble-fg: #3b332b;
  --site-nav-bubble-inset: rgba(91, 70, 51, 0.13);
  --site-nav-bubble-hard-shadow: rgba(57, 46, 36, 0.74);
  --site-nav-dock-gap: clamp(84px, 12vw, 132px);
  --site-nav-work-notch-y: clamp(27px, 50%, 32px);
  --site-nav-work-notch-radius: 6px;
  /* Sized and placed so the arc is concentric with the mask's circle: the
     stroke's inner edge IS the cut. The offsets step over the 1.5px border,
     because an absolutely positioned child is placed against the padding box
     while the mask's 100% is the border box. */
  --site-nav-work-notch-ring-size: calc(var(--site-nav-work-notch-radius) * 2 + 3px);
  --site-nav-work-notch-ring-offset: calc(-3px - var(--site-nav-work-notch-radius));
  position: fixed;
  inset: 0;
  z-index: 50;
  color: var(--site-nav-bubble-fg);
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "PingFang SC", system-ui, sans-serif;
  pointer-events: none;
  transition:
    opacity 320ms ease,
    filter 320ms ease-out;
}

html[data-thought-reader-open="true"] .site-nav {
  opacity: 0;
  filter: blur(3px);
  pointer-events: none;
}

:root[data-site-section="thoughts"] .site-nav {
  --site-nav-bubble-bg: rgba(24, 24, 24, 0.92);
  --site-nav-bubble-border: rgba(255, 255, 255, 0.46);
  --site-nav-bubble-fg: #fff;
  --site-nav-bubble-inset: rgba(0, 0, 0, 0.42);
  --site-nav-bubble-hard-shadow: rgba(255, 255, 255, 0.18);
}

:root[data-site-section="work"] .site-nav {
  --site-nav-bubble-fg: var(--page-ink);
}

.site-nav__track {
  position: absolute;
  inset: 0;
}

.site-nav__item {
  --site-nav-x: 50%;
  --site-nav-delay: 0ms;
  --site-nav-position-top-duration: 540ms;
  --site-nav-position-left-duration: 500ms;
  --site-nav-position-delay: var(--site-nav-delay);
  --site-nav-tilt: -1.2deg;
  --site-nav-entry-spin: 1;
  --site-nav-current-bg: var(--site-nav-bubble-bg);
  --site-nav-current-border: var(--site-nav-bubble-border);
  --site-nav-current-fg: var(--site-nav-bubble-fg);
  --site-nav-current-inset: var(--site-nav-bubble-inset);
  --site-nav-current-hard-shadow: var(--site-nav-bubble-hard-shadow);
  --site-nav-current-ambient: rgba(58, 45, 34, 0.17);
  /* How near the pointer is, 0 far away and 1 on the button. site-nav-depth.js
     writes it; every raised-button number below reads it, so the slab grows as
     the cursor approaches instead of appearing whole the instant it arrives.
     At 1 these are exactly the :hover values further down, so the hover rules
     become a no-op when the pointer is driving and remain the whole behaviour
     when it is not -- a touch screen, or the script failing to load. */
  --site-nav-near: 0;
  --site-nav-current-shadow:
    inset 0 -1px 0 var(--site-nav-current-inset),
    calc(1.33px + 0.67px * var(--site-nav-near)) calc(2px + 1.33px * var(--site-nav-near)) 0 var(--site-nav-current-hard-shadow),
    calc(1.33px + 0.67px * var(--site-nav-near)) calc(2px + 2.67px * var(--site-nav-near)) 0 color-mix(in srgb, color-mix(in srgb, var(--site-nav-current-hard-shadow) 74%, var(--site-nav-current-bg)) calc(var(--site-nav-near) * 100%), transparent),
    0 calc(6.67px + 2.66px * var(--site-nav-near)) calc(12px + 4px * var(--site-nav-near)) var(--site-nav-current-ambient);
  position: absolute;
  top: 88%;
  left: var(--site-nav-x);
  display: grid;
  min-height: 44px;
  padding: 0 13px;
  place-items: center;
  isolation: isolate;
  border: 1.5px solid var(--site-nav-current-border);
  border-radius: 15px 13px 16px 12px;
  background: var(--site-nav-current-bg);
  box-shadow: var(--site-nav-current-shadow);
  color: var(--site-nav-current-fg);
  text-decoration: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.72;
  pointer-events: auto;
  user-select: none;
  transform:
    translate(-50%, calc(-50% - var(--site-nav-lift)))
    rotate(calc(var(--site-nav-tilt) * var(--site-nav-near)))
    scale(var(--site-nav-grow));
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    top var(--site-nav-position-top-duration) cubic-bezier(0.18, 1.22, 0.32, 1) var(--site-nav-position-delay),
    left var(--site-nav-position-left-duration) cubic-bezier(0.18, 1.22, 0.32, 1) var(--site-nav-position-delay),
    min-height 420ms cubic-bezier(0.2, 1.3, 0.35, 1),
    padding 420ms cubic-bezier(0.2, 1.3, 0.35, 1),
    border-color 220ms ease,
    border-radius 420ms cubic-bezier(0.2, 1.3, 0.35, 1),
    background-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease,
    filter 220ms ease,
    font-size 420ms cubic-bezier(0.2, 1.3, 0.35, 1),
    opacity 180ms ease,
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-nav__item::before {
  content: "";
  position: absolute;
  pointer-events: none;
}

.site-nav__item::before {
  z-index: -1;
  opacity: 0;
  transition:
    opacity 180ms ease,
    transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-nav__item[data-site-section="about"] {
  --site-nav-x: calc(50% - var(--site-nav-dock-gap));
  --site-nav-delay: 0ms;
  --site-nav-tilt: -2.2deg;
  --site-nav-entry-x: var(--site-nav-entry-about-x, -28vw);
  --site-nav-rest-radius: 22px 20px 20px 9px;
  --site-nav-travel-radius: 30px 16px 25px 9px;
  --site-nav-impact-radius: 18px 26px 12px 19px;
  --site-nav-rebound-radius: 27px 17px 29px 11px;
  --site-nav-entry-delay: 0ms;
}

.site-nav__item[data-site-section="thoughts"] {
  --site-nav-delay: 46ms;
  --site-nav-tilt: 1.5deg;
  --site-nav-entry-x: var(--site-nav-entry-thoughts-x, -15vw);
  --site-nav-rest-radius: 28px 19px 25px 17px;
  --site-nav-travel-radius: 34px 16px 30px 13px;
  --site-nav-impact-radius: 20px 28px 15px 24px;
  --site-nav-rebound-radius: 30px 18px 31px 14px;
  --site-nav-entry-delay: 82ms;
}

.site-nav__item[data-site-section="work"] {
  --site-nav-x: calc(50% + var(--site-nav-dock-gap));
  --site-nav-delay: 92ms;
  --site-nav-tilt: -1deg;
  --site-nav-entry-x: var(--site-nav-entry-work-x, 11vw);
  --site-nav-entry-spin: -1;
  --site-nav-rest-radius: 12px 20px 14px 19px;
  --site-nav-travel-radius: 16px 20px 13px 24px;
  --site-nav-impact-radius: 26px 16px 14px 11px;
  --site-nav-rebound-radius: 17px 20px 13px 26px;
  --site-nav-entry-delay: 148ms;
}

/* The slab behind a nav button: a copy of it in the shadow's colour, the same
   size and the same corners, sitting a hair lower and a hair larger so what
   shows past the button's edge reads as the body it is standing on. Making had
   one from the start and the other two did not, which is why only Making ever
   looked like it had a thickness. Everything shared lives here; each button
   brings its own corners, tilt and place in the scene, and only Making's is cut
   for the door. */
.site-nav__depth {
  --site-nav-near: 0;
  --site-nav-delay: 0ms;
  --site-nav-position-top-duration: 540ms;
  --site-nav-position-left-duration: 500ms;
  --site-nav-position-delay: var(--site-nav-delay);
  --site-nav-current-bg: var(--site-nav-user-bg, var(--site-nav-bubble-bg));
  --site-nav-current-border: var(--site-nav-user-border, var(--site-nav-bubble-border));
  --site-nav-current-fg: var(--site-nav-user-fg, var(--site-nav-bubble-fg));
  --site-nav-current-hard-shadow: var(
    --site-nav-context-hard-shadow,
    var(--site-nav-user-hard-shadow, var(--site-nav-bubble-hard-shadow))
  );
  --site-nav-current-ambient: var(
    --site-nav-context-ambient,
    var(--site-nav-user-ambient, rgba(58, 45, 34, 0.17))
  );
  /* The card arrives with its thickness already on it: the entrance animation
     is shared with the face, and this is the only thing that differs -- the
     body flies the same path, --site-nav-body below. Landing then changes
     nothing, so there is no step where the card suddenly gets thicker. */
  --site-nav-entry-y: var(--site-nav-body);
  position: absolute;
  /* The docked place, shared with .site-nav__item. The scene overrides it
     below, under the same condition the button's does, so the two travel
     together on the way back in. */
  top: 88%;
  left: var(--site-nav-x);
  display: grid;
  min-height: var(--site-nav-card-unit);
  padding: 0 clamp(18px, 2.3vmin, 25px);
  place-items: center;
  /* The exposed side is a cut face of the same card, and it is in shade, so it
     draws no heavier than the face it came off: one outline recipe, a shade
     lighter. It used to carry --site-nav-current-border at 84% -- about twice
     the face's weight -- which read as a black underline. */
  border: 1.5px solid color-mix(in srgb, var(--site-nav-current-fg) 24%, transparent);
  border-radius: var(--site-nav-rest-radius);
  background: color-mix(in srgb, var(--site-nav-current-bg) 88%, #392e24);
  /* Lit as one object with the face above it. */
  background-image:
    linear-gradient(var(--site-nav-door-spill, transparent), var(--site-nav-door-spill, transparent));
  /* What the whole card throws: its own colour deepened, never plain black,
     plus a thin contact line so it reads as standing ON the scene. Both
     separate as the card lifts.

     The cast is ONE shadow spread over five steps. A single blur lays down an
     even haze with a findable edge, which is what a shadow never has; stepping
     the radius and offset geometrically while the weight falls away gives a
     tight core and a long tail, which is what a penumbra is. The five weights
     are shares of --site-nav-cast, so the pointer still drives the whole stack
     from one number. They do not add up the way they read: layered alphas
     compose as 1 - (1 - a1)(1 - a2)..., so the shares are far larger than the
     single layer's used to be and still land near it. */
  --site-nav-cast: calc((0.96 + 0.3 * var(--site-nav-near)) * 100%);
  --site-nav-cast-tint: color-mix(in srgb, var(--site-nav-current-bg) 62%, #14262a);
  box-shadow:
    calc(var(--site-nav-light-x) * var(--site-nav-throw) * 0.18)
      calc(var(--site-nav-light-y) * var(--site-nav-throw) * 0.18)
      calc(var(--site-nav-soft) * 0.18)
      color-mix(in srgb, var(--site-nav-cast-tint) calc(var(--site-nav-cast) * 0.46), transparent),
    calc(var(--site-nav-light-x) * var(--site-nav-throw) * 0.36)
      calc(var(--site-nav-light-y) * var(--site-nav-throw) * 0.36)
      calc(var(--site-nav-soft) * 0.36)
      color-mix(in srgb, var(--site-nav-cast-tint) calc(var(--site-nav-cast) * 0.3), transparent),
    calc(var(--site-nav-light-x) * var(--site-nav-throw) * 0.66)
      calc(var(--site-nav-light-y) * var(--site-nav-throw) * 0.66)
      calc(var(--site-nav-soft) * 0.66)
      color-mix(in srgb, var(--site-nav-cast-tint) calc(var(--site-nav-cast) * 0.2), transparent),
    calc(var(--site-nav-light-x) * var(--site-nav-throw))
      calc(var(--site-nav-light-y) * var(--site-nav-throw))
      var(--site-nav-soft)
      color-mix(in srgb, var(--site-nav-cast-tint) calc(var(--site-nav-cast) * 0.13), transparent),
    calc(var(--site-nav-light-x) * var(--site-nav-throw) * 1.5)
      calc(var(--site-nav-light-y) * var(--site-nav-throw) * 1.5)
      calc(var(--site-nav-soft) * 1.5)
      color-mix(in srgb, var(--site-nav-cast-tint) calc(var(--site-nav-cast) * 0.07), transparent),
    calc(var(--site-nav-light-x) * var(--site-nav-contact-throw))
      calc(var(--site-nav-light-y) * var(--site-nav-contact-throw))
      var(--site-nav-contact-soft)
      rgb(0 0 0 / calc((0.055 + 0.055 * var(--site-nav-near)) * 100%));
  color: transparent;
  font: inherit;
  font-size: clamp(13px, 1.72vmin, 18px);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  /* The body rides with the face and sits --site-nav-body below it. Same lift,
     same tilt, same scale: it is the same card, seen from its side. */
  transform:
    translate(-50%, calc(-50% - var(--site-nav-lift) + var(--site-nav-body)))
    rotate(calc(var(--site-nav-tilt) * var(--site-nav-near)))
    scale(var(--site-nav-grow));
  transition:
    top var(--site-nav-position-top-duration) cubic-bezier(0.18, 1.22, 0.32, 1) var(--site-nav-position-delay),
    left var(--site-nav-position-left-duration) cubic-bezier(0.18, 1.22, 0.32, 1) var(--site-nav-position-delay),
    min-height 420ms cubic-bezier(0.2, 1.3, 0.35, 1),
    padding 420ms cubic-bezier(0.2, 1.3, 0.35, 1),
    border-radius 420ms cubic-bezier(0.2, 1.3, 0.35, 1),
    font-size 420ms cubic-bezier(0.2, 1.3, 0.35, 1),
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The card is one solid object: a face on a body, lit from the top left.
   --site-nav-near drives how far it stands off the surface, not whether it has
   a thickness -- at rest the body still shows 1.6px, because a thick card does
   not go flat when you look away. At 1 the face is 4px up and 1.055 across,
   which is exactly where the old :hover put it. */
.site-nav__item,
.site-nav__about-visual,
.site-nav__depth {
  --site-nav-light-x: 0.65;
  --site-nav-light-y: 0.85;
  --site-nav-lift: calc(var(--site-nav-card-unit) * 0.08333 * var(--site-nav-near));
  --site-nav-body: calc(var(--site-nav-card-unit) * (0.03333 + 0.07771 * var(--site-nav-near)));
  --site-nav-grow: calc(1 + 0.055 * var(--site-nav-near));
  /* The radius rides --site-nav-near with everything else. Freezing it saves
     nothing here, which is worth writing down because it has been tried twice:
     a fixed radius only pays off when the browser can reuse the blur it already
     rasterised, and this card grows and tilts as the pointer nears, so its
     shape changes every frame anyway and the cached blur is thrown away either
     way. Paired benchmarks put the frozen and the moving radius at the same
     cost both times. What the layer count costs is real -- about 2ms at p90
     for six layers against two -- but that is the count, not the movement. */
  --site-nav-throw: calc(var(--site-nav-card-unit) * (0.0375 + 0.13958 * var(--site-nav-near)));
  --site-nav-soft: calc(var(--site-nav-card-unit) * (0.0625 + 0.27083 * var(--site-nav-near)));
  /* The thin dark line where the body meets the scene. It is the same object,
     so it is a share of the same height. */
  --site-nav-contact-throw: calc(var(--site-nav-card-unit) * (0.025 + 0.05 * var(--site-nav-near)));
  --site-nav-contact-soft: calc(var(--site-nav-card-unit) * (0.02917 + 0.075 * var(--site-nav-near)));
}

/* Each slab takes its button's own corners, tilt and place. */
.site-nav__depth--about {
  --site-nav-x: calc(50% - var(--site-nav-dock-gap));
  --site-nav-rest-radius: 22px 20px 20px 9px;
  --site-nav-travel-radius: 30px 16px 25px 9px;
  --site-nav-impact-radius: 18px 26px 12px 19px;
  --site-nav-rebound-radius: 27px 17px 29px 11px;
  --site-nav-entry-x: var(--site-nav-entry-about-x, -28vw);
  --site-nav-entry-delay: 0ms;
  --site-nav-tilt: -2.2deg;
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__depth--about {
  top: var(--site-nav-scene-about-y, 34%);
  left: var(--site-nav-scene-about-x, 47%);
}

.site-nav__depth--thoughts {
  --site-nav-x: 50%;
  --site-nav-delay: 46ms;
  --site-nav-rest-radius: 28px 19px 25px 17px;
  --site-nav-travel-radius: 34px 16px 30px 13px;
  --site-nav-impact-radius: 20px 28px 15px 24px;
  --site-nav-rebound-radius: 30px 18px 31px 14px;
  --site-nav-entry-x: var(--site-nav-entry-thoughts-x, -15vw);
  --site-nav-entry-delay: 82ms;
  --site-nav-tilt: 1.5deg;
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__depth--thoughts {
  top: var(--site-nav-scene-thoughts-y, 68.1%);
  left: var(--site-nav-scene-thoughts-x, 33.9%);
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__work-depth {
  top: var(--site-nav-scene-work-y, 53%);
  left: var(--site-nav-scene-work-x, 70.2%);
}

.site-nav__work-depth {
  --site-nav-x: calc(50% + var(--site-nav-dock-gap));
  --site-nav-delay: 92ms;
  --site-nav-rest-radius: 12px 20px 14px 19px;
  --site-nav-travel-radius: 16px 20px 13px 24px;
  --site-nav-impact-radius: 26px 16px 14px 11px;
  --site-nav-rebound-radius: 17px 20px 13px 26px;
  --site-nav-entry-x: var(--site-nav-entry-work-x, 11vw);
  --site-nav-entry-spin: -1;
  --site-nav-entry-delay: 148ms;
  --site-nav-tilt: -1deg;
  /* The door's edge cuts into this one. A mask clips an element's paint to its
     border box, and box-shadow paints outside it -- which is why this body's
     cast shadow used to vanish. `no-clip` lifts that clip and keeps the mask,
     so the bite still cuts the card AND the shadow it throws. Safari has no
     -webkit- equivalent and falls back to the clipped behaviour: the notch is
     unchanged there, the cast shadow is the thing that is lost. */
  mask-clip: no-clip;
  -webkit-mask-image: radial-gradient(
    circle var(--site-nav-work-notch-radius) at 100% var(--site-nav-work-notch-y),
    transparent 0 calc(var(--site-nav-work-notch-radius) - 1px),
    #000 var(--site-nav-work-notch-radius)
  );
  mask-image: radial-gradient(
    circle var(--site-nav-work-notch-radius) at 100% var(--site-nav-work-notch-y),
    transparent 0 calc(var(--site-nav-work-notch-radius) - 1px),
    #000 var(--site-nav-work-notch-radius)
  );
}

:root[data-site-nav-docked="true"] .site-nav__item {
  min-height: 44px;
  padding: 0 8px;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.68;
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item {
  --site-nav-current-bg: var(--site-nav-user-bg, var(--site-nav-bubble-bg));
  --site-nav-current-border: var(--site-nav-user-border, var(--site-nav-bubble-border));
  --site-nav-current-fg: var(--site-nav-user-fg, var(--site-nav-bubble-fg));
  --site-nav-current-inset: var(--site-nav-user-inset, var(--site-nav-bubble-inset));
  --site-nav-current-hard-shadow: var(
    --site-nav-context-hard-shadow,
    var(--site-nav-user-hard-shadow, var(--site-nav-bubble-hard-shadow))
  );
  --site-nav-current-ambient: var(
    --site-nav-context-ambient,
    var(--site-nav-user-ambient, rgba(58, 45, 34, 0.17))
  );
  min-height: var(--site-nav-card-unit);
  padding: 0 clamp(18px, 2.3vmin, 25px);
  border-radius: clamp(16px, 2.2vmin, 22px);
  font-size: clamp(13px, 1.72vmin, 18px);
  opacity: 1;
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[data-site-section="about"] {
  top: var(--site-nav-scene-about-y, 34%);
  left: var(--site-nav-scene-about-x, 47%);
  border-radius: var(--site-nav-rest-radius);
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[data-site-section="thoughts"] {
  top: var(--site-nav-scene-thoughts-y, 68.1%);
  left: var(--site-nav-scene-thoughts-x, 33.9%);
  border-radius: var(--site-nav-rest-radius);
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[data-site-section="work"] {
  top: var(--site-nav-scene-work-y, 53%);
  left: var(--site-nav-scene-work-x, 70.2%);
  border-radius: var(--site-nav-rest-radius);
  -webkit-mask-image: radial-gradient(
    circle var(--site-nav-work-notch-radius) at 100% var(--site-nav-work-notch-y),
    transparent 0 calc(var(--site-nav-work-notch-radius) - 1px),
    #000 var(--site-nav-work-notch-radius)
  );
  mask-image: radial-gradient(
    circle var(--site-nav-work-notch-radius) at 100% var(--site-nav-work-notch-y),
    transparent 0 calc(var(--site-nav-work-notch-radius) - 1px),
    #000 var(--site-nav-work-notch-radius)
  );
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[data-site-section="work"]::after,
:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__work-depth::after {
  position: absolute;
  top: calc(var(--site-nav-work-notch-y) - 1.5px);
  right: var(--site-nav-work-notch-ring-offset);
  width: var(--site-nav-work-notch-ring-size);
  height: var(--site-nav-work-notch-ring-size);
  box-sizing: border-box;
  border: 1.5px solid;
  border-color: inherit;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  /* Only the half that lies on the card. */
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
  transform: translateY(-50%);
}

.site-nav__about-entry-clip {
  /* About's visual copy and its slab hang here, inside the hero panel and
     outside .site-nav -- so nothing in this subtree inherits the nav's own
     variables. The visual used to carry this one alone, which left the slab
     with an invalid --site-nav-x and a docked left of 0: on the way back from
     another panel it started off the left edge of the screen while the card
     came down from the bar. Declared on the wrapper, both copies read the
     same number. */
  --site-nav-dock-gap: clamp(84px, 12vw, 132px);
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

:root[data-door-score]:not([data-door-score="idle"]) .site-nav__about-entry-clip {
  z-index: 6;
}

.site-nav__about-visual {
  --site-nav-near: 0;
  --site-nav-current-bg: var(--site-nav-user-bg, rgb(251, 237, 214));
  --site-nav-current-border: var(--site-nav-user-border, rgba(55, 46, 37, 0.7));
  --site-nav-current-fg: var(--site-nav-user-fg, #3b332b);
  --site-nav-current-inset: var(--site-nav-user-inset, rgba(91, 70, 51, 0.13));
  --site-nav-current-hard-shadow: var(
    --site-nav-context-hard-shadow,
    var(--site-nav-user-hard-shadow, rgba(57, 46, 36, 0.74))
  );
  --site-nav-current-ambient: var(
    --site-nav-context-ambient,
    var(--site-nav-user-ambient, rgba(58, 45, 34, 0.17))
  );
  --site-nav-tilt: -2.2deg;
  --site-nav-entry-x: var(--site-nav-entry-about-x, -28vw);
  --site-nav-entry-spin: 1;
  --site-nav-rest-radius: 22px 20px 20px 9px;
  --site-nav-travel-radius: 30px 16px 25px 9px;
  --site-nav-impact-radius: 18px 26px 12px 19px;
  --site-nav-rebound-radius: 27px 17px 29px 11px;
  --site-nav-entry-delay: 0ms;
  position: absolute;
  top: var(--site-nav-scene-about-y, 34%);
  left: var(--site-nav-scene-about-x, 47%);
  z-index: 4;
  display: grid;
  isolation: isolate;
  min-height: var(--site-nav-card-unit);
  padding: 0 clamp(18px, 2.3vmin, 25px);
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--site-nav-current-fg) 58%, transparent);
  border-radius: var(--site-nav-rest-radius);
  background: var(--site-nav-current-bg);
  box-shadow:
    inset 0 -1px 0 var(--site-nav-current-inset),
    0 calc(6.67px + 2.66px * var(--site-nav-near)) calc(12px + 4px * var(--site-nav-near)) var(--site-nav-current-ambient);
  color: var(--site-nav-current-fg);
  font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "PingFang SC", system-ui, sans-serif;
  font-size: clamp(13px, 1.72vmin, 18px);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: 0.01em;
  line-height: normal;
  white-space: nowrap;
  opacity: 1;
  pointer-events: none;
  transform:
    translate(-50%, calc(-50% - var(--site-nav-lift)))
    rotate(calc(var(--site-nav-tilt) * var(--site-nav-near)))
    scale(var(--site-nav-grow));
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease,
    filter 220ms ease,
    opacity 180ms ease,
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-nav__label {
  /* The entrance lifts a button by (1 - scene scale) * -50% of its own height,
     so that scaling it about its bottom edge does not sink it. That is the
     button's correction and the label, being inside it, already comes along --
     but the value is inherited and `translate`'s percentage resolves against
     the label's own, much shorter box. It was landing 0.68px high and then
     snapping down the moment the entrance class came off. */
  --site-nav-entry-origin-lift: 0px;
  display: inline-block;
  transform-origin: 50% 100%;
}

/* Jelly lean from work-nav.js, published as custom properties so it composes
   with the door-progress offset below and the scene scale instead of
   overriding them. Only the About scene runs the magnet. */
:root:not([data-site-nav-docked="true"])[data-site-section="about"] :is(
  .site-nav__item,
  .site-nav__about-visual,
  .site-nav__depth,
  .site-nav__label
) {
  translate: var(--site-nav-jelly-x, 0px) calc(var(--site-nav-jelly-y, 0px) + var(--site-nav-entry-origin-lift, 0px));
  scale: var(--site-nav-jelly-sx, 1) var(--site-nav-jelly-sy, 1);
}

@media (min-width: 721px) {
  :root:not([data-site-nav-docked="true"])[data-site-section="about"] {
    --site-nav-scene-visual-scale: 0.9;
  }

  :root:not([data-site-nav-docked="true"])[data-site-section="about"] :is(
    .site-nav__item,
    .site-nav__about-visual,
    .site-nav__depth
  ) {
    scale:
      calc(var(--site-nav-scene-visual-scale) * var(--site-nav-jelly-sx, 1))
      calc(var(--site-nav-scene-visual-scale) * var(--site-nav-jelly-sy, 1));
  }
}

:root.is-site-nav-returning-about:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__about-visual {
  animation: site-nav-about-return 540ms cubic-bezier(0.18, 1.22, 0.32, 1) both;
}

/* About's slab takes the same explicit trip its visual takes. Left to the
   plain top/left transition it ran on a slightly different clock -- 500ms
   against the animation's 540 -- and slid out from under the card on the way
   in. Same curve, same length, one body offset lower: one card. */
:root.is-site-nav-returning-about:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__depth--about {
  animation: site-nav-depth-return 540ms cubic-bezier(0.18, 1.22, 0.32, 1) both;
}

/* The faces come back together, so the slabs do too. Keeping the scene's
   stagger here would have each body start 46ms or 92ms after its own face. */
:root.is-site-nav-returning-about:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item,
:root.is-site-nav-returning-about:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__depth {
  --site-nav-delay: 0ms;
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] #site-tab-about,
:root:not([data-site-nav-docked="true"])[data-site-section="about"] #site-tab-about:is(:hover, :active, [aria-current="page"]) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: transparent;
}

:root[data-site-nav-docked="true"] .site-nav__about-visual,
:root:not([data-site-section="about"]) .site-nav__about-visual {
  opacity: 0;
  visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  :root:not([data-site-nav-near-live="true"]):not([data-site-nav-docked="true"])[data-site-section="about"]:has(#site-tab-about:hover) .site-nav__about-visual {
    box-shadow:
      inset 0 -1px 0 var(--site-nav-current-inset),
      0 3.33px 0 var(--site-nav-current-hard-shadow),
      0 4.67px 0 color-mix(in srgb, var(--site-nav-current-hard-shadow) 74%, var(--site-nav-current-bg)),
      0 9.33px 16px var(--site-nav-current-ambient);
    transform: translate(-50%, calc(-50% - 4px)) rotate(var(--site-nav-tilt)) scale(1.055);
  }
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"]:has(#site-tab-about:active) .site-nav__about-visual {
  box-shadow:
    inset 0 -1px 0 var(--site-nav-current-inset),
    0.67px 0.67px 0 var(--site-nav-current-hard-shadow),
    0 2.67px 5.33px var(--site-nav-current-ambient);
  transform: translate(-50%, calc(-50% + 1.33px)) scale(0.94, 0.9);
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"]:is(
  [data-hero-door-state="opening"],
  [data-hero-door-state="open"],
  [data-hero-door-state="closing"]
) .site-nav__item[data-site-section="work"] {
  --site-nav-entry-x: var(--site-nav-entry-workOpen-x, 7vw);
  top: var(--site-nav-scene-workOpen-y, 43%);
  left: var(--site-nav-scene-workOpen-x, 92%);
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"]:is(
  [data-hero-door-state="opening"],
  [data-hero-door-state="open"],
  [data-hero-door-state="closing"]
) .site-nav__work-depth {
  top: var(--site-nav-scene-workOpen-y, 43%);
  left: var(--site-nav-scene-workOpen-x, 92%);
}

:root.is-site-nav-door-progress-sync:not([data-site-nav-docked="true"])[data-site-section="about"][data-hero-door-state] :is(
  .site-nav__item[data-site-section="work"],
  .site-nav__work-depth
) {
  --site-nav-position-top-duration: 0ms;
  --site-nav-position-left-duration: 0ms;
  --site-nav-position-delay: 0ms;
  top: var(--site-nav-door-base-y, var(--site-nav-scene-work-y, 53%));
  left: var(--site-nav-door-base-x, var(--site-nav-scene-work-x, 70.2%));
  /* Ride the leaf and keep the cursor's jelly lean on top of it. */
  translate:
    calc(var(--site-nav-door-offset-x, 0px) + var(--site-nav-jelly-x, 0px))
    calc(var(--site-nav-door-offset-y, 0px) + var(--site-nav-jelly-y, 0px) + var(--site-nav-entry-origin-lift, 0px));
  will-change: transform;
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[data-site-section="about"]::before {
  content: none;
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[aria-current="page"] {
  opacity: 1;
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[data-site-section="thoughts"] {
  --site-nav-thought-face-outline: var(--site-nav-user-border, var(--site-nav-current-border));
  --site-nav-thought-depth-outline: var(--site-nav-context-border, var(--site-nav-current-border));
  border-width: 1.5px;
  border-color: var(--site-nav-thought-face-outline);
  box-shadow:
    inset 0 -1px 0 var(--site-nav-current-inset),
    0 6.67px 12px var(--site-nav-current-ambient);
}

.site-nav__item[aria-current="page"] {
  opacity: 1;
  border-color: color-mix(in srgb, var(--site-nav-current-fg) 58%, transparent);
  box-shadow: var(--site-nav-current-shadow);
}

@media (hover: hover) and (pointer: fine) {
  /* Fallback only: `--site-nav-near` paints the same raised look continuously
     whenever site-nav-depth.js is driving, and these would land on top of it as
     a step. See the note on `.site-nav__depth`. */
  :root:not([data-site-nav-near-live="true"]) .site-nav__item:hover {
    opacity: 1;
    box-shadow:
      inset 0 -1px 0 var(--site-nav-current-inset),
      2px 3.33px 0 var(--site-nav-current-hard-shadow),
      2px 4.67px 0 color-mix(in srgb, var(--site-nav-current-hard-shadow) 74%, var(--site-nav-current-bg)),
      0 9.33px 16px var(--site-nav-current-ambient);
    transform: translate(-50%, calc(-50% - 4px)) rotate(var(--site-nav-tilt)) scale(1.055);
  }

  :root:not([data-site-nav-near-live="true"]):not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[data-site-section="thoughts"]:hover {
    box-shadow:
      inset 0 -1px 0 var(--site-nav-current-inset),
      0 3.33px 0 var(--site-nav-current-hard-shadow),
      0 4.67px 0 color-mix(in srgb, var(--site-nav-current-hard-shadow) 74%, var(--site-nav-current-bg)),
      0 5.67px 0 var(--site-nav-thought-depth-outline),
      0 9.33px 16px var(--site-nav-current-ambient);
  }

  :root[data-site-nav-docked="true"] .site-nav__item:hover {
    box-shadow: none;
    transform: translate(-50%, calc(-50% - 3px)) scale(1.025);
  }

  :root:not([data-site-nav-near-live="true"]):not([data-site-nav-docked="true"])[data-site-section="about"]:has(#site-tab-about:hover) .site-nav__depth--about,
  :root:not([data-site-nav-near-live="true"]):not([data-site-nav-docked="true"])[data-site-section="about"]:has(#site-tab-thoughts:hover) .site-nav__depth--thoughts,
  :root:not([data-site-nav-near-live="true"]):not([data-site-nav-docked="true"])[data-site-section="about"]:has(#site-tab-work:hover) .site-nav__work-depth {
    transform: translate(-50%, calc(-50% + 1.33px)) rotate(var(--site-nav-tilt)) scale(1.055);
  }

}

:root:not([data-site-nav-docked="true"])[data-site-section="about"] #site-tab-thoughts:active {
  box-shadow:
    inset 0 -1px 0 var(--site-nav-current-inset),
    0 1.33px 0 var(--site-nav-thought-depth-outline),
    0 2.67px 5.33px var(--site-nav-current-ambient);
}

:root:not([data-site-nav-docked="true"])[data-site-section="about"]:has(#site-tab-about:active) .site-nav__depth--about,
:root:not([data-site-nav-docked="true"])[data-site-section="about"]:has(#site-tab-thoughts:active) .site-nav__depth--thoughts,
:root:not([data-site-nav-docked="true"])[data-site-section="about"]:has(#site-tab-work:active) .site-nav__work-depth {
  transform: translate(-50%, calc(-50% + 2.67px)) rotate(0deg) scale(0.94, 0.9);
  transition-duration: 90ms;
}

.site-nav__item:active {
  box-shadow:
    inset 0 -1px 0 var(--site-nav-current-inset),
    0.67px 0.67px 0 var(--site-nav-current-hard-shadow),
    0 2.67px 5.33px var(--site-nav-current-ambient);
  transition:
    box-shadow 90ms ease-out,
    filter 90ms ease-out,
    transform 90ms ease-out;
  filter: none;
  transform: translate(-50%, calc(-50% + 1.33px)) rotate(0deg) scale(0.94, 0.9);
}

:root[data-site-nav-docked="true"] .site-nav__item:active {
  box-shadow: none;
}

.site-nav__item:focus {
  outline: none;
}

.site-nav__item:focus-visible {
  outline: 3px solid #ef6a42;
  outline-offset: 3px;
}

:root[data-site-nav-docked="true"] .site-nav__item:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

:root[data-site-nav-docked="true"] .site-nav__item[aria-current="page"] {
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
}

/* The diorama pills carry `scale: 0.9` as an individual transform, and it
   pivots around the same origin as the entrance. Moving that origin to the
   bottom edge would sink the scaled bubble by (1 - 0.9) * 50% of its height
   and let it hop back up when the class comes off, so lift the whole
   entrance by that amount: the landing then coincides with the rest pose. */
:root.is-site-nav-entry-pending:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item,
:root.is-site-nav-entry-pending:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__about-visual,
:root.is-site-nav-entry-pending:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__depth {
  --site-nav-entry-origin-lift: calc((1 - var(--site-nav-scene-visual-scale, 1)) * -50%);
  animation: none;
  pointer-events: none;
  transition: none;
  transform: translate(calc(-50% + var(--site-nav-entry-x, 0px)), calc(-50% + var(--site-nav-entry-y, 0px)));
  transform-origin: 50% 100%;
  will-change: transform;
}

:root[data-site-nav-docked="true"] .site-nav__depth,
:root:not([data-site-section="about"]) .site-nav__depth {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* The same pill the face wears while docked. The slab is invisible here, so
   none of this shows -- it is where the slab has to START. Left at scene size
   it stood a full 27px wider and 7px taller than the docked card, and on the
   way back from Thoughts it sat around the button like a plate while the face
   spent 420ms growing into it. About is left out on purpose: the face its slab
   belongs to is .site-nav__about-visual, a separate copy that is hidden rather
   than shrunk while docked, so that slab keeps its size the whole way too. */
:root[data-site-nav-docked="true"] .site-nav__depth:not(.site-nav__depth--about),
:root:not([data-site-section="about"]) .site-nav__depth:not(.site-nav__depth--about) {
  min-height: 44px;
  padding: 0 8px;
  border-radius: 0;
  font-size: 11px;
}

:root:is(.is-site-nav-entry-pending, .is-site-nav-entry-active):not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav,
:root:is(.is-site-nav-entry-pending, .is-site-nav-entry-active):not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__about-entry-clip {
  -webkit-clip-path: inset(
    0 var(--site-nav-entry-square-right-inset, calc((100vw - 100dvh) / 2))
    0 var(--site-nav-entry-square-left-inset, calc((100vw - 100dvh) / 2))
  );
  clip-path: inset(
    0 var(--site-nav-entry-square-right-inset, calc((100vw - 100dvh) / 2))
    0 var(--site-nav-entry-square-left-inset, calc((100vw - 100dvh) / 2))
  );
}

:root.is-site-nav-entry-active:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item,
:root.is-site-nav-entry-active:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__about-visual,
:root.is-site-nav-entry-active:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__depth {
  --site-nav-entry-origin-lift: calc((1 - var(--site-nav-scene-visual-scale, 1)) * -50%);
  animation: site-nav-bubble-edge-arrive var(--site-nav-entry-duration, 1000ms) linear var(--site-nav-entry-delay) both;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform;
}

:root.is-site-nav-entry-active:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__label {
  animation: site-nav-label-jelly var(--site-nav-entry-duration, 1000ms) linear var(--site-nav-entry-delay) both;
  will-change: transform;
}

:root[data-site-nav-docked="true"] body:not(.is-entering) .site-nav__item {
  animation: site-nav-bubble-dock 620ms cubic-bezier(0.2, 0, 0.2, 1) var(--site-nav-delay) backwards;
}

@keyframes site-nav-bubble-edge-arrive {
  0% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 1.0000), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-0.094deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(0.068deg * var(--site-nav-entry-spin, 1)))
      scale(1.0011, 0.9989);
    border-radius: var(--site-nav-rest-radius);
  }
  6% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.9400), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-16.506deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(11.884deg * var(--site-nav-entry-spin, 1)))
      scale(1.1981, 0.8347);
  }
  12% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.8053), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-23.638deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(17.020deg * var(--site-nav-entry-spin, 1)))
      scale(1.2837, 0.7790);
  }
  18% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.6447), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-24.924deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(17.945deg * var(--site-nav-entry-spin, 1)))
      scale(1.2991, 0.7698);
    border-radius: var(--site-nav-travel-radius);
  }
  24% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.4877), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-22.907deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(16.493deg * var(--site-nav-entry-spin, 1)))
      scale(1.2749, 0.7844);
  }
  30% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.3497), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-19.323deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(13.913deg * var(--site-nav-entry-spin, 1)))
      scale(1.2319, 0.8118);
  }
  37% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.2208), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-14.614deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(10.522deg * var(--site-nav-entry-spin, 1)))
      scale(1.1754, 0.8508);
  }
  44% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.1267), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-10.256deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(7.384deg * var(--site-nav-entry-spin, 1)))
      scale(1.1231, 0.8904);
    border-radius: var(--site-nav-impact-radius);
  }
  52% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.0559), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-6.244deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(4.496deg * var(--site-nav-entry-spin, 1)))
      scale(1.0749, 0.9303);
  }
  60% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.0149), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-3.383deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(2.436deg * var(--site-nav-entry-spin, 1)))
      scale(1.0406, 0.9610);
  }
  68% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * -0.0058), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-1.529deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(1.101deg * var(--site-nav-entry-spin, 1)))
      scale(1.0183, 0.9820);
    border-radius: var(--site-nav-rebound-radius);
  }
  74% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * -0.0127), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-0.657deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(0.473deg * var(--site-nav-entry-spin, 1)))
      scale(1.0079, 0.9922);
  }
  80% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * -0.0151), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(-0.114deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(0.082deg * var(--site-nav-entry-spin, 1)))
      scale(1.0014, 0.9986);
  }
  86% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * -0.0123), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(0.161deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(-0.116deg * var(--site-nav-entry-spin, 1)))
      scale(0.9981, 1.0019);
  }
  92% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * -0.0041), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(0.107deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(-0.077deg * var(--site-nav-entry-spin, 1)))
      scale(0.9987, 1.0013);
  }
  100% {
    transform: translate(calc(-50% + var(--site-nav-entry-x, 0px) * 0.0000), calc(-50% + var(--site-nav-entry-y, 0px)))
      rotate(calc(0.000deg * var(--site-nav-entry-spin, 1)))
      skewX(calc(0.000deg * var(--site-nav-entry-spin, 1)))
      scale(1.0000, 1.0000);
    border-radius: var(--site-nav-rest-radius);
  }
}

@keyframes site-nav-label-jelly {
  0% {
    transform: translateX(calc(-0.000px * var(--site-nav-entry-spin, 1)))
      rotate(calc(-0.000deg * var(--site-nav-entry-spin, 1)));
  }
  6% {
    transform: translateX(calc(-1.532px * var(--site-nav-entry-spin, 1)))
      rotate(calc(-0.858deg * var(--site-nav-entry-spin, 1)));
  }
  12% {
    transform: translateX(calc(-2.933px * var(--site-nav-entry-spin, 1)))
      rotate(calc(-1.642deg * var(--site-nav-entry-spin, 1)));
  }
  18% {
    transform: translateX(calc(-2.535px * var(--site-nav-entry-spin, 1)))
      rotate(calc(-1.420deg * var(--site-nav-entry-spin, 1)));
  }
  24% {
    transform: translateX(calc(-0.988px * var(--site-nav-entry-spin, 1)))
      rotate(calc(-0.553deg * var(--site-nav-entry-spin, 1)));
  }
  30% {
    transform: translateX(calc(0.573px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.321deg * var(--site-nav-entry-spin, 1)));
  }
  37% {
    transform: translateX(calc(1.563px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.875deg * var(--site-nav-entry-spin, 1)));
  }
  44% {
    transform: translateX(calc(1.636px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.916deg * var(--site-nav-entry-spin, 1)));
  }
  52% {
    transform: translateX(calc(1.177px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.659deg * var(--site-nav-entry-spin, 1)));
  }
  60% {
    transform: translateX(calc(0.695px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.389deg * var(--site-nav-entry-spin, 1)));
  }
  68% {
    transform: translateX(calc(0.393px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.220deg * var(--site-nav-entry-spin, 1)));
  }
  74% {
    transform: translateX(calc(0.262px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.147deg * var(--site-nav-entry-spin, 1)));
  }
  80% {
    transform: translateX(calc(0.175px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.098deg * var(--site-nav-entry-spin, 1)));
  }
  86% {
    transform: translateX(calc(0.092px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.051deg * var(--site-nav-entry-spin, 1)));
  }
  92% {
    transform: translateX(calc(0.018px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.010deg * var(--site-nav-entry-spin, 1)));
  }
  100% {
    transform: translateX(calc(0.000px * var(--site-nav-entry-spin, 1)))
      rotate(calc(0.000deg * var(--site-nav-entry-spin, 1)));
  }
}

@keyframes site-nav-about-return {
  from {
    top: 88%;
    left: calc(50% - var(--site-nav-dock-gap));
    transform: translate(-50%, -50%);
  }
  to {
    top: var(--site-nav-scene-about-y, 34%);
    left: var(--site-nav-scene-about-x, 47%);
    transform: translate(-50%, -50%);
  }
}

/* The same path, one thickness lower. --site-nav-near is 0 for the whole
   return, so the rest pose's lift, tilt and growth are all identity here and
   the body offset is the only thing that separates this from the face's. */
@keyframes site-nav-depth-return {
  from {
    top: 88%;
    left: calc(50% - var(--site-nav-dock-gap));
    transform: translate(-50%, calc(-50% + var(--site-nav-body)));
  }
  to {
    top: var(--site-nav-scene-about-y, 34%);
    left: var(--site-nav-scene-about-x, 47%);
    transform: translate(-50%, calc(-50% + var(--site-nav-body)));
  }
}

@keyframes site-nav-bubble-dock {
  from {
    transform: translate(-50%, calc(-50% - 8px)) rotate(var(--site-nav-tilt)) scale(1.16, 0.78);
  }
  44% {
    transform: translate(-50%, calc(-50% + 6px)) rotate(var(--site-nav-tilt)) scale(0.91, 1.1);
  }
  66% {
    transform: translate(-50%, calc(-50% - 3px)) rotate(0.65deg) scale(1.065, 0.955);
  }
  84% {
    transform: translate(-50%, calc(-50% + 1px)) rotate(-0.25deg) scale(0.985, 1.025);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

.site-nav-colors {
  position: fixed;
  z-index: 90;
  /* One row while a row fits, and it wraps by itself when it does not. This
     used to be a fixed row plus a `max-width: 367px` branch that switched to
     4 columns -- 367 was the right number for EIGHT swatches (8 x 44 = 352).
     There are eleven now, so the row is 484px and every phone between 368 and
     498px wide got a row it could not show: measured at 390px, the last two
     and a half swatches sat off-screen and could not be tapped. The column
     count now comes from the space available, and the count of swatches comes
     from site-nav-colors.js, which is the only place that knows it. */
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, 44px);
  grid-auto-rows: 44px;
  justify-content: center;
  width: min(calc(44px * var(--site-nav-swatch-count, 11)), calc(100vw - 32px));
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  filter: blur(3px);
  pointer-events: none;
  transform: translateX(-50%) translateY(8px) scale(0.88);
  transform-origin: 50% 50%;
  transition:
    opacity 150ms ease,
    filter 180ms ease,
    transform 260ms cubic-bezier(0.2, 1.5, 0.42, 1);
}

.site-nav-colors[hidden] {
  display: none;
}

.site-nav-colors.is-open {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.site-nav-colors__swatch {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.site-nav-colors__swatch::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: var(--site-nav-swatch);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 4px 9px rgba(0, 0, 0, 0.23);
  transform: scale(0.76);
  transition:
    box-shadow 150ms ease,
    transform 220ms cubic-bezier(0.2, 1.5, 0.42, 1);
}

.site-nav-colors.is-open .site-nav-colors__swatch::before {
  transform: scale(1);
  transition-delay: var(--site-nav-color-delay, 0ms);
}

.site-nav-colors__swatch[aria-pressed="true"]::before {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 0 0 2px #fff,
    0 0 0 4px rgba(18, 18, 18, 0.72),
    0 6px 12px rgba(0, 0, 0, 0.26);
  transform: scale(1.1);
}

@media (hover: hover) and (pointer: fine) {
  .site-nav-colors__swatch:hover::before {
    transform: translateY(-3px) scale(1.08);
  }
}

.site-nav-colors__swatch:focus {
  outline: none;
}

.site-nav-colors__swatch:focus-visible::before {
  box-shadow:
    0 0 0 3px #ef6a42,
    0 5px 12px rgba(0, 0, 0, 0.25);
}

.site-nav__item.is-color-popping {
  animation: site-nav-color-pop 430ms cubic-bezier(0.2, 1.35, 0.35, 1);
}

:root:has(#site-tab-about.is-color-popping) .site-nav__about-visual {
  animation: site-nav-color-pop 430ms cubic-bezier(0.2, 1.35, 0.35, 1);
}

@keyframes site-nav-color-pop {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  36% {
    transform: translate(-50%, calc(-50% - 3px)) rotate(var(--site-nav-tilt)) scale(1.11, 0.9);
  }
  68% {
    transform: translate(-50%, calc(-50% + 1px)) scale(0.975, 1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-colors,
  .site-nav-colors__swatch::before,
  .site-nav__about-visual {
    transition-duration: 0.01ms;
  }

  .site-nav__item.is-color-popping,
  :root:has(#site-tab-about.is-color-popping) .site-nav__about-visual {
    animation: none;
  }
}

.site-panel--editorial {
  display: grid;
  /* Work is intentionally lifted so the shared navigation owns the lower field. */
  align-items: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--page-paper);
  color: var(--page-ink);
}

.editorial-page {
  width: min(
    1120px,
    calc(100vw - 64px - env(safe-area-inset-left) - env(safe-area-inset-right))
  );
  margin: 0 auto;
  padding: clamp(96px, 15vh, 160px) 0
    max(clamp(40px, 8vh, 88px), calc(env(safe-area-inset-bottom) + 84px));
}

.editorial-page__index {
  margin: 0 0 clamp(24px, 5vh, 54px);
  color: var(--page-muted);
  font: 560 11px/1.2 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.editorial-page h1 {
  max-width: 9ch;
  margin: 0;
  font: 400 clamp(56px, 9vw, 132px)/0.86 "Iowan Old Style", "Baskerville", "Songti SC", serif;
  letter-spacing: -0.055em;
}

.thought-list,
.work-list {
  width: min(560px, 48vw);
  margin: clamp(46px, 8vh, 86px) 0 0 auto;
  padding: 0;
  border-top: 1px solid var(--page-line);
  font-family: "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
}

.thought-list {
  list-style: none;
}

.thought-list li,
.work-list > div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--page-line);
}

.work-list > div {
  grid-template-columns: minmax(118px, 0.42fr) 1fr;
}

.work-list > div > *,
.work-list__link {
  min-width: 0;
  overflow-wrap: anywhere;
}

.thought-list span,
.work-list dt {
  color: var(--page-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thought-list p,
.work-list dd {
  margin: 0;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.55;
}

.work-list dt {
  color: var(--page-ink);
}

.work-list dd {
  color: var(--page-muted);
}

.work-list__link {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition:
    color 180ms ease,
    text-decoration-color 180ms ease;
}

.work-list__link::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  min-height: 44px;
  content: "";
  transform: translateY(-50%);
}

.work-list__link span {
  display: inline-block;
  margin-left: 0.25em;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.work-list__link:hover {
  color: var(--page-ink);
  text-decoration-color: currentColor;
}

.work-list__link:hover span {
  transform: translate(2px, -2px);
}

.work-list__link:focus {
  outline: none;
}

.work-list__link:focus-visible {
  border-radius: 2px;
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.work-list__placeholder i {
  display: block;
  width: var(--placeholder-width, 72%);
  min-width: 42px;
  height: 0.62em;
  border-radius: 999px;
  background: var(--page-line);
  opacity: 0.82;
}

.work-list__placeholder dd i {
  height: 0.76em;
}

@media (prefers-reduced-motion: reduce) {
  .work-list__link,
  .work-list__link span {
    transition: none;
  }
}

:root[data-site-section]:not([data-site-section="about"]) .sky,
:root[data-site-section]:not([data-site-section="about"]) .door-fit,
:root[data-site-section]:not([data-site-section="about"]) .chroma-palette,
:root[data-site-section]:not([data-site-section="about"]) .bgm {
  opacity: 0;
  pointer-events: none;
}

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-sky);
  transition-property: background-color;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.hero__stage {
  --mx: 50%;
  --my: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  /* Keep the accepted 1440 × 900 size, then grow with wider desktop canvases
     until the scene reaches a restrained 820px cap. */
  max-width: clamp(648px, 44vw, 820px);
  width: min(
    72vmin,
    calc(100vw - 2 * var(--hero-gutter) - 48px),
    calc(100dvh - 2 * var(--hero-gutter) - 48px)
  );
  transform: translate(-50%, -50%);
  touch-action: manipulation;
  aspect-ratio: var(--art-w) / var(--art-h);
  user-select: none;
}

@media (min-width: 721px) {
  :root:not([data-comparison="true"]) .hero__stage {
    top: 47%;
    max-width: clamp(518.4px, 35.2vw, 656px);
    width: min(
      max(420px, 57.6vmin),
      calc(100vw - 2 * var(--hero-gutter) - 48px),
      calc(100dvh - 2 * var(--hero-gutter) - 48px)
    );
  }
}

.hero__accessibility {
  position: fixed;
  top: max(56px, calc(env(safe-area-inset-top) + 48px));
  left: 50%;
  z-index: 45;
  display: flex;
  width: 1px;
  height: 1px;
  gap: 8px;
  align-items: end;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  transform: translateX(-50%);
}

.hero__accessibility:focus-within {
  width: max-content;
  max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  height: auto;
  padding: 8px;
  overflow: visible;
  clip-path: none;
  border-radius: 16px;
  background: var(--player-bg);
  box-shadow: var(--player-shadow);
  color: var(--player-fg);
  white-space: normal;
  backdrop-filter: blur(18px) saturate(1.15);
}

.hero__accessibility-field {
  display: grid;
  gap: 3px;
  min-width: 132px;
  color: var(--player-muted);
  font: 560 10px/1.2 "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.hero__accessibility-part,
.hero__accessibility-paint,
.hero__accessibility-door {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  color: var(--player-fg);
  background: color-mix(in srgb, var(--player-fg) 8%, transparent);
  font: 560 12px/1.2 "SF Pro Text", "PingFang SC", system-ui, sans-serif;
}

.hero__accessibility-part {
  min-width: 132px;
  padding: 0 28px 0 10px;
}

.hero__accessibility-position-field {
  min-width: 190px;
}

.hero__accessibility-position-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero__accessibility-position-value {
  color: var(--player-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero__accessibility-position {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: #d1e2a3;
  cursor: pointer;
}

.hero__accessibility-position-field small {
  display: block;
  color: var(--player-muted);
  font-size: 10px;
  line-height: 1.3;
}

@media (max-width: 720px) {
  .hero__accessibility-position-field {
    min-width: 0;
  }
}

.hero__accessibility-paint,
.hero__accessibility-door {
  padding: 0 12px;
  cursor: pointer;
}

.hero__accessibility :is(select, button):focus {
  outline: none;
}

.hero__accessibility :is(select, button):focus-visible {
  outline: 3px solid #ef6a42;
  outline-offset: 2px;
}

.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center / 100% 100% no-repeat
    url("./assets/hero-set-wall-accepted-v1.webp?v=20260906-lossless1");
  pointer-events: none;
}

/* The diorama establishes its scale first. Navigation keeps its existing
   side-entry choreography and is released by site-sections.js after this
   short landing has settled. */
:root.is-site-scene-entry-pending[data-site-section="about"] .hero__stage {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.178);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

:root.is-site-scene-entry-active[data-site-section="about"] .hero__stage {
  pointer-events: none;
  /* Each beat carries its own easing on the keyframes below, so the shorthand
     stays linear and only supplies the duration and the opening stillness. */
  animation: hero-scene-zoom-in var(--hero-scene-entry-duration, 2600ms)
    linear var(--hero-scene-entry-delay, 500ms) both;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

/* The carousel's proportions and growth, minus its travel. The diorama starts
   at 0.178 of full size (the reference's 80px start against its 450px panel),
   appears in place, holds, then grows. Keyframe offsets are the beats in
   site-sections.js over the 2600ms body: the fade lands at 200/2600 and the
   hold ends at 450/2600. */
@keyframes hero-scene-zoom-in {
  /* Appear — small, already where it belongs */
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.178);
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
  7.692% {
    opacity: 1;
  }
  /* Hold — nothing moves */
  17.308% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.178);
    animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  }
  /* Grow — in place, all the way out */
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

body.is-entering .hero__stage {
  opacity: 0;
}

.hero__stage.is-scene-painted::before {
  visibility: hidden;
}

.hero__art,
.hero__set,
.hero__live {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  touch-action: none;
  pointer-events: none;
}

.hero__art {
  z-index: 0;
}

.hero__ivy {
  position: absolute;
  inset: 0;
  /* Leaves occlude the frame's hover and recolour overlays as well as the
     door itself. The moving door leaf is cut out in hero-ivy.js. */
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

/* The isolated ivy study exposes both walls; normal navigation stays intact. */
:root[data-hero-ivy-study="true"] .site-nav__item[data-site-section="thoughts"],
:root[data-hero-ivy-study="true"] .site-nav__item[data-site-section="work"],
:root[data-hero-ivy-study="true"] .site-nav__depth--thoughts,
:root[data-hero-ivy-study="true"] .site-nav__work-depth {
  visibility: hidden;
  pointer-events: none;
}

.hero__character-occluder {
  position: fixed;
  z-index: 51;
  display: block;
  max-width: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}

:root[data-site-section="about"][data-door-score]:not([data-door-score="idle"]) .hero__character-occluder {
  visibility: visible;
}

.hero__character-fallback,
.hero__door-fallback {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.hero__character-fallback {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.hero__character-fallback--girl {
  display: none;
  transform: translateY(-1%) scale(0.85);
  transform-origin: 34% 53.4535%;
}

:root[data-character="girl"] .hero__character-fallback--boy {
  display: none;
}

:root[data-character="girl"] .hero__character-fallback--girl {
  display: block;
}

.hero__stage.is-scene-painted .hero__character-fallback {
  visibility: hidden;
}

.hero__door-fallback {
  top: 33.9888%;
  left: 52.5281%;
  z-index: 6;
  width: 36.7978%;
  height: 58.0056%;
}

.hero__stage.is-webgl-door-ready .hero__door-fallback {
  visibility: hidden;
}

.hero__door-webgl {
  position: absolute;
  z-index: 6;
  display: block;
  max-width: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
  contain: strict;
}

/* Water surface (hero-reflection.js). The band starts at the waterline and
   runs past the stage bottom (the stage does not clip); the script sets
   top/height from the config. It sits above the scene canvas and below the
   door, so an open leaf and the door-score light keep standing on the water. */
.hero__reflection {
  position: absolute;
  top: 85.2528%;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 28.0899%;
  max-width: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  contain: strict;
}

/* Score-bound fine rain. This is a new atmospheric plane only: the existing
   doorway (6), staff (9), navigation (50) and character occluder (51) retain
   their established stacking and stay visually untouched above it. */
.hero__rain {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  contain: strict;
}

.hero__door-hover,
.hero__door-color-diffusion {
  position: absolute;
  display: block;
  max-width: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  contain: strict;
}

.hero__door-hover {
  z-index: 7;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 170ms ease-out;
}

.hero__door-hover.is-on {
  opacity: 1;
}

.hero__door-color-diffusion {
  z-index: 7;
}

/* Door score (lab/door-score). Two light passes live inside the stage: the
   doorway fill under the door canvas (the leaf and frame occlude it, so the
   crack is simply the part that shows; it replaces the portal video) and the
   spill over the door canvas, so the light from the crack washes over the
   frame and the wall. */
.hero__door-light,
.hero__door-glare {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  contain: strict;
}

.hero__door-light {
  z-index: 3;
}

.hero__door-glare {
  /* The shared luminous veil washes over thin leaves as well as the frame.
     Solid ivy remains above the frame/paint at 8; it must not occlude light. */
  z-index: 9;
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero__door-light[data-phase="idle"],
.hero__door-glare[data-phase="idle"] {
  visibility: hidden;
}

/* The viewport-sized score layer lives above the complete doorway assembly.
   Its negative offset keeps viewport-space paths aligned while their clipped
   start at the crack preserves the sense that the music leaves the door. */
.hero__door-score-host {
  position: absolute;
  z-index: 9;
  overflow: visible;
  pointer-events: none;
}

.hero__door-score {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  contain: strict;
}

.hero__door-score-lines {
  z-index: 0;
}

.hero__door-score[data-phase="idle"],
.hero__door-score[data-section="away"] {
  visibility: hidden;
}

:root.is-door-score-pick,
:root.is-door-score-pick * {
  cursor: pointer;
}

.hero__live {
  z-index: 1;
  will-change: opacity;
}

.hero__set--wall {
  z-index: 2;
}

.hero__set--wallRight {
  z-index: 3;
}

.hero__set--trees {
  z-index: 4;
}

.hero__set--sky {
  z-index: 5;
}

.hero__set--door {
  z-index: 6;
}

.hero__set.is-hot {
  filter: brightness(1.18) saturate(1.04);
}

.hero__hot {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition-property: opacity;
  transition-duration: 220ms;
  transition-timing-function: ease;
}

:root[data-door-score]:not([data-door-score="idle"]) .hero__hot {
  z-index: 11;
}

.hero__hot.is-on {
  opacity: 1;
}

.hero__stage.is-paintable {
  /* The animated hit mask can change at media edges from frame to frame.
     Keep the scene pointer stable; the existing glow is the paint affordance. */
  cursor: default;
}

.hero__stage.is-door-handle {
  cursor: pointer;
}

:root[data-comparison="true"] .sky,
:root[data-comparison="true"] .character-switch,
:root[data-comparison="true"] .bgm,
:root[data-comparison="true"] .door-fit,
:root[data-comparison="true"] .chroma-palette,
:root[data-comparison="true"] .site-nav {
  display: none !important;
}

:root[data-comparison="true"] .hero__stage {
  width: min(
    104vmin,
    calc(100vw + 24px),
    calc(100dvh - 48px)
  );
}

.sky {
  position: fixed;
  z-index: 30;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  transition-property: opacity;
  transition-duration: 1.6s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.sky__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sky__toggle::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  content: "";
  transform: translate(-50%, -50%);
}

.sky__toggle:focus {
  outline: none;
}

.sky__swatch {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--hero-sky);
  box-shadow:
    0 0 0 1px var(--page-ink),
    0 1px 2px rgba(0, 0, 0, 0.08);
  transition-property: transform, box-shadow, background-color;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.sky__toggle:focus-visible .sky__swatch {
  box-shadow:
    0 0 0 1px var(--page-ink),
    0 0 0 3px var(--page-paper),
    0 0 0 5px var(--page-ink);
}

.sky__toggle:active .sky__swatch {
  transform: scale(0.96);
}

.sky__panel {
  position: absolute;
  top: 44px;
  right: 0;
  display: grid;
  gap: 8px;
  width: 184px;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 68px);
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px;
  background: var(--player-bg);
  box-shadow: var(--player-shadow);
  backdrop-filter: blur(18px) saturate(1.15);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  filter: blur(4px);
  transition-property: opacity, transform, filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.sky.is-open .sky__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  filter: blur(0);
}

.sky__presets {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  justify-content: space-between;
}

.sky__chip {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sky__chip::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 9px auto;
  border-radius: 11px;
  background: var(--chip);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition-property: transform, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] .sky__chip::after {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.sky__chip[aria-pressed="true"]::after {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 0 0 3px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .sky__chip[aria-pressed="true"]::after {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 0 3px rgba(255, 255, 255, 0.28);
}

.sky__chip:active::after {
  transform: scale(0.96);
}

.sky__chip:focus {
  outline: none;
}

.sky__chip:focus-visible::after {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 0 0 3px rgba(0, 0, 0, 0.18);
}

.sky__custom {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 10px 4px 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] .sky__custom {
  background: rgba(255, 255, 255, 0.06);
}

.sky__picker {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.sky__picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.sky__picker::-webkit-color-swatch {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.sky__picker::-moz-color-swatch {
  border: 0;
  border-radius: 8px;
}

.sky__hex {
  color: var(--player-fg);
  font-family: "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.sky__reset {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--player-muted);
  font-family: "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition-property: transform, color, background-color;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.sky__freeze {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--player-fg) 18%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--player-fg) 8%, transparent);
  color: var(--player-fg);
  font-family: "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition-property: transform, border-color, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.sky__freeze:hover {
  border-color: color-mix(in srgb, var(--player-fg) 30%, transparent);
  background: color-mix(in srgb, var(--player-fg) 12%, transparent);
}

.sky__freeze:focus {
  outline: none;
}

.sky__freeze:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--player-fg) 24%, transparent);
}

.sky__freeze:active {
  transform: scale(0.96);
}

.sky__freeze-status {
  min-height: 0;
  color: var(--player-muted);
  font-family: "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.sky__freeze-status:empty {
  display: none;
}

.sky__reset:hover {
  color: var(--player-fg);
  background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="dark"] .sky__reset:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sky__reset:active {
  transform: scale(0.96);
}

.door-fit {
  position: fixed;
  z-index: 30;
  top: calc(max(8px, env(safe-area-inset-top)) + 88px);
  left: max(8px, env(safe-area-inset-left));
  transition-property: opacity;
  transition-duration: 1.6s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.door-fit__toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--player-fg);
  cursor: pointer;
}

.door-fit__icon {
  width: 18px;
  height: 18px;
  opacity: 0.72;
}

.door-fit.is-open .door-fit__icon,
.door-fit__toggle:hover .door-fit__icon {
  opacity: 1;
}

.door-fit__panel {
  position: absolute;
  top: 40px;
  left: 0;
  width: 228px;
  padding: 12px;
  border-radius: 16px;
  background: var(--player-bg);
  box-shadow: var(--player-shadow);
  color: var(--player-fg);
  font-family: "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.door-fit.is-open .door-fit__panel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.door-fit__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.door-fit__tab {
  min-height: 28px;
  border: 0;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--player-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

:root[data-theme="dark"] .door-fit__tab {
  background: rgba(255, 255, 255, 0.06);
}

.door-fit__tab[aria-pressed="true"] {
  background: var(--player-fg);
  color: var(--player-on);
}

.door-fit__hint,
.door-fit__json {
  margin: 0 0 10px;
  color: var(--player-muted);
  font-size: 11px;
  line-height: 1.45;
}

.door-fit__json {
  margin: 8px 0 0;
  max-height: 88px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.door-fit__row {
  display: grid;
  grid-template-columns: 32px 1fr 42px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
}

.door-fit__row[hidden] {
  display: none;
}

.door-fit__slider {
  width: 100%;
}

.door-fit__value {
  color: var(--player-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.door-fit__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.door-fit__btn {
  min-height: 32px;
  border: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--player-fg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

:root[data-theme="dark"] .door-fit__btn {
  background: rgba(255, 255, 255, 0.06);
}

.door-fit__btn--save {
  background: var(--player-fg);
  color: var(--player-on);
}

.door-fit__box {
  position: absolute;
  z-index: 8;
  border: 1.5px dashed rgba(80, 170, 255, 0.9);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  display: none;
}

.door-fit__box.is-on {
  display: block;
  pointer-events: auto;
  cursor: move;
}

.door-fit__box--portal {
  border-color: rgba(232, 168, 74, 0.95);
}

.door-fit__box--portal .door-fit__handle {
  background: #e0a229;
}

.door-fit__box--stone {
  border-color: rgba(201, 132, 90, 0.95);
}

.door-fit__box--stone .door-fit__handle {
  background: #c9845a;
}

.door-fit__handle {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #4aa3ff;
  box-shadow: 0 0 0 1px #fff;
  cursor: nwse-resize;
}

.door-fit__handle[data-handle="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.door-fit__handle[data-handle="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.door-fit__handle[data-handle="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.door-fit__handle[data-handle="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }

.hero__stage.is-door-fit {
  cursor: default;
}

.chroma-palette {
  --menu-distance: 68px;
  --menu-close-radius: 34px;
  --menu-cross-radius: 10px;
  --menu-connector-gap: 0px;
  --hit-shoulder: 27.7%;
  --hit-inner-start: 30.4%;
  --hit-inner-end: 69.6%;
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .chroma-palette {
    --menu-distance: 71px;
  }
}

.chroma-palette.is-interactive,
.chroma-palette.is-open {
  pointer-events: auto;
}

.chroma-palette__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(10, 10, 9, 0.08);
  opacity: 0;
  cursor: pointer;
  transition-property: opacity;
  transition-duration: 220ms;
  transition-timing-function: ease;
  z-index: 0;
}

.chroma-palette.is-open .chroma-palette__backdrop {
  opacity: 1;
}

.chroma-palette__connector {
  position: absolute;
  z-index: 1;
  left: var(--menu-tap-x, var(--menu-x));
  top: var(--menu-tap-y, var(--menu-y));
  width: max(
    0px,
    calc(
      var(--menu-connector-length, 0px)
      - var(--menu-cross-radius)
      - var(--menu-connector-gap)
    )
  );
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transform:
    translateY(-50%)
    rotate(var(--menu-connector-angle, 0rad))
    scaleX(0);
  transform-origin: left center;
  background: repeating-linear-gradient(
    90deg,
    rgba(245, 237, 228, 0.96) 0 5px,
    transparent 5px 9px
  );
  filter: drop-shadow(0 1px 0 rgba(52, 43, 37, 0.7));
  transition:
    opacity 130ms ease-out,
    transform 260ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.chroma-palette.is-open.is-position-clamped .chroma-palette__connector {
  opacity: 0.9;
  transform:
    translateY(-50%)
    rotate(var(--menu-connector-angle, 0rad))
    scaleX(1);
}

.chroma-palette__ring {
  --liquid-close-x: 1;
  --liquid-close-y: 1;
  --liquid-launch-x-0: 1;
  --liquid-launch-y-0: 1;
  --liquid-launch-x-26: 1;
  --liquid-launch-y-26: 1;
  --liquid-launch-x-58: 1;
  --liquid-launch-y-58: 1;
  --liquid-impact-x-72: 1;
  --liquid-impact-y-72: 1;
  --liquid-impact-x-84: 1;
  --liquid-impact-y-84: 1;
  --liquid-impact-x-93: 1;
  --liquid-impact-y-93: 1;
  position: absolute;
  z-index: 2;
  left: var(--menu-x);
  top: var(--menu-y);
  width: 0;
  height: 0;
}

.chroma-palette__goo {
  position: absolute;
  z-index: 1;
  left: -180px;
  top: -180px;
  width: 360px;
  height: 360px;
  overflow: visible;
  pointer-events: none;
}

.chroma-palette__item {
  transform-box: view-box;
  transform-origin: 180px 180px;
  transform: scale(1.35);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 250ms, 140ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.2, 0, 0, 1);
  transition-delay:
    calc(var(--return-i) * 22ms),
    calc(var(--return-i) * 22ms);
}

.chroma-palette.is-open .chroma-palette__item {
  transform:
    rotate(var(--angle))
    translateY(calc(var(--menu-distance) * -1))
    rotate(calc(var(--angle) * -1))
    scale(1);
  opacity: 1;
  transition-duration: 380ms, 150ms;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-out;
  transition-delay:
    calc(var(--i) * 24ms),
    calc(70ms + var(--i) * 24ms);
}

.chroma-palette[data-filter-prewarm="true"] .chroma-palette__item {
  opacity: 1 !important;
  transform:
    rotate(var(--angle))
    translateY(calc(var(--menu-distance) * -1))
    rotate(calc(var(--angle) * -1))
    scale(1) !important;
  transition: none !important;
}

.chroma-palette[data-filter-prewarm="true"] :is(
  .chroma-palette__blob,
  .chroma-palette__tail
) {
  fill: #010101 !important;
}

.chroma-palette[data-filter-prewarm="true"] :is(
  .chroma-palette__backdrop,
  .chroma-palette__connector,
  .chroma-palette__close,
  .chroma-palette__slot,
  .chroma-palette__selection
) {
  opacity: 0 !important;
}

.chroma-palette__body,
.chroma-palette__dock {
  transform-box: view-box;
  transform-origin: 180px 180px;
}

.chroma-palette__body {
  transform:
    rotate(var(--angle))
    scale(var(--liquid-close-x), var(--liquid-close-y))
    rotate(calc(var(--angle) * -1));
}

.chroma-palette.is-open .chroma-palette__body {
  transform:
    rotate(var(--angle))
    scale(1)
    rotate(calc(var(--angle) * -1));
}

.chroma-palette__dock {
  --dock-scale: 1;
  --dock-x: 0px;
  --dock-y: 0px;
  transform:
    translate(var(--dock-x), var(--dock-y))
    scale(var(--dock-scale));
  scale: 1;
  transition-property: transform, scale;
  transition-duration: 90ms, 150ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1), ease-out;
}

.chroma-palette__blob,
.chroma-palette__tail {
  transform-box: fill-box;
  transform-origin: center;
}

.chroma-palette__blob {
  --tension-angle: 0deg;
  --tension-stretch: 1;
  --tension-squash: 1;
  transform:
    rotate(var(--tension-angle))
    scale(var(--tension-stretch), var(--tension-squash))
    rotate(calc(var(--tension-angle) * -1));
  transition-property: transform;
  transition-duration: 90ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.chroma-palette__tail {
  opacity: 0;
  transform:
    rotate(var(--angle))
    translateY(2px)
    rotate(calc(var(--angle) * -1))
    scale(0.2);
}

.chroma-palette.is-open .chroma-palette__tail {
  animation: chroma-palette-liquid-tail 420ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i) * 24ms);
}

.chroma-palette__ring.is-tail-off .chroma-palette__tail {
  display: none;
  animation: none;
}

.chroma-palette[data-liquid-tier="mobile"] .chroma-palette__tail {
  display: none;
  animation: none;
}

@keyframes chroma-palette-liquid-tail {
  0% {
    opacity: 0;
    transform:
      rotate(var(--angle))
      translateY(2px)
      rotate(calc(var(--angle) * -1))
      scale(0.3);
  }

  16% {
    opacity: 0.84;
  }

  44% {
    opacity: 0.76;
    transform:
      rotate(var(--angle))
      translateY(13px)
      rotate(calc(var(--angle) * -1))
      scale(0.94);
  }

  68% {
    opacity: 0.4;
    transform:
      rotate(var(--angle))
      translateY(8px)
      rotate(calc(var(--angle) * -1))
      scale(0.64);
  }

  84%,
  100% {
    opacity: 0;
    transform:
      rotate(var(--angle))
      translateY(2px)
      rotate(calc(var(--angle) * -1))
      scale(0.2);
  }
}

.chroma-palette__selection {
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 90ms;
  transition-timing-function: ease-out;
}

.chroma-palette__selection.is-selected,
.chroma-palette__dock.is-focused .chroma-palette__selection {
  opacity: 1;
}

.chroma-palette__selection circle {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.chroma-palette__selection-halo {
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 3.5;
}

.chroma-palette__selection-ring {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.5;
}

.chroma-palette__close,
.chroma-palette__slot {
  position: absolute;
  z-index: 2;
}

.chroma-palette__close {
  left: 0;
  top: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: calc(var(--menu-close-radius) * 2);
  height: calc(var(--menu-close-radius) * 2);
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chroma-palette__close span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  opacity: 0;
  transform: scale(0.25);
  transition-property: transform, opacity;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.chroma-palette__close svg {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
}

.chroma-palette__close path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.chroma-palette__close-shadow {
  stroke: rgba(0, 0, 0, 0.28);
  stroke-width: 4.5;
}

.chroma-palette__close-glyph {
  stroke: #fff;
  stroke-width: 2.4;
}

.chroma-palette__close:focus,
.chroma-palette__close:focus-visible {
  outline: 0 !important;
  outline-offset: 0;
  box-shadow: none !important;
}

.chroma-palette__close::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.chroma-palette.is-open .chroma-palette__close span {
  opacity: 1;
  transform: scale(1);
}

.chroma-palette.is-open .chroma-palette__close:hover span,
.chroma-palette.is-open .chroma-palette__close:focus-visible span {
  transform: scale(1.08);
}

.chroma-palette.is-open .chroma-palette__close:active span {
  transform: scale(0.96);
}

.chroma-palette__slot {
  left: -34px;
  top: -34px;
  width: 68px;
  height: 68px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.2);
  transform-origin: 34px 34px;
  transition-property: transform, opacity;
  transition-duration: 250ms, 140ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.2, 0, 0, 1);
  transition-delay:
    calc(var(--return-i) * 22ms),
    calc(var(--return-i) * 22ms);
}

.chroma-palette__swatch {
  position: absolute;
  inset: 0;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% var(--hit-shoulder),
    var(--hit-inner-end) 100%,
    var(--hit-inner-start) 100%,
    0 var(--hit-shoulder)
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--hit-shoulder),
    var(--hit-inner-end) 100%,
    var(--hit-inner-start) 100%,
    0 var(--hit-shoulder)
  );
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chroma-palette.is-open .chroma-palette__slot {
  transform:
    rotate(var(--angle))
    translateY(calc(var(--menu-distance) * -1))
    scale(1);
  opacity: 1;
  transition-duration: 380ms, 150ms;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease;
  transition-delay:
    calc(var(--i) * 24ms),
    calc(70ms + var(--i) * 24ms);
}

.chroma-palette__swatch:focus,
.chroma-palette__swatch:focus-visible {
  outline: 0 !important;
  outline-offset: 0;
  box-shadow: none !important;
}

.chroma-palette__swatch::-moz-focus-inner {
  border: 0;
  padding: 0;
}

@media (max-width: 720px) {
  .site-nav__track {
    gap: 18px;
  }

  .site-nav__item {
    min-height: 44px;
    font-size: 11px;
  }

  :root:not([data-site-nav-docked="true"])[data-site-section="about"]:is(
    [data-hero-door-state="opening"],
    [data-hero-door-state="open"],
    [data-hero-door-state="closing"]
  ) :is(
    .site-nav__item[data-site-section="work"],
    .site-nav__work-depth
  ) {
    left: min(
      var(--site-nav-scene-workOpen-x, 92%),
      calc(100vw - 52px - env(safe-area-inset-right))
    );
  }

  .editorial-page {
    width: calc(
      100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)
    );
    padding-bottom: max(
      calc(12dvh + 22px),
      calc(env(safe-area-inset-bottom) + 92px)
    );
  }

  .editorial-page h1 {
    font-size: clamp(50px, 17vw, 76px);
  }

  .thought-list,
  .work-list {
    width: 100%;
  }

  .thought-list,
  .work-list {
    margin-top: 48px;
  }

  .thought-list li,
  .work-list > div {
    grid-template-columns: 34px 1fr;
    gap: 12px;
    padding: 15px 0;
  }

  .work-list > div {
    grid-template-columns: 112px 1fr;
  }

  .hero__stage {
    width: min(110vw, 72svh);
  }

  .chroma-palette {
    --menu-distance: 68px;
    --hit-shoulder: 27.7%;
    --hit-inner-start: 30.4%;
    --hit-inner-end: 69.6%;
  }

  .hero__accessibility:focus-within {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .hero__accessibility-field {
    grid-column: 1 / -1;
  }

  .hero__accessibility-part {
    width: 100%;
  }
}

@media (max-width: 319px) {
  .site-nav,
  .site-nav__about-entry-clip {
    --site-nav-dock-gap: min(28vw, 76px);
  }

  .editorial-page {
    width: calc(
      100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)
    );
  }

  .editorial-page h1 {
    font-size: clamp(44px, 17vw, 58px);
  }

  .work-list > div {
    grid-template-columns: minmax(88px, 0.42fr) 1fr;
  }
}

@media (orientation: landscape) and (max-height: 720px) {
  :root {
    --hero-gutter: clamp(12px, 4vh, 20px);
  }

  .hero__stage {
    width: min(
      72vmin,
      calc(100vw - 2 * var(--hero-gutter) - 24px),
      calc(100dvh - 2 * var(--hero-gutter) - 24px)
    );
  }

  .editorial-page {
    padding-bottom: max(124px, calc(env(safe-area-inset-bottom) + 116px));
  }
}

/* The scene shrinks with viewport height while navigation keeps its touch
   size. Give the handle clearance in short landscape viewports.

   The offset has to cover the card's own width, not just its anchor: the
   cards are nowrap and centred on their anchor, so a longer label grows
   leftwards too. Renaming Work to Making widened this one by 13px, which
   moved its left edge 6px left and took back the 3px that used to sit
   between the card and the door handle at 640x240. 32px restores it. A
   further rename has to be re-measured here. */
@media (orientation: landscape) and (max-height: 480px) {
  :root:not([data-site-nav-docked="true"])[data-site-section="about"] .site-nav__item[data-site-section="thoughts"] {
    left: calc(var(--site-nav-scene-thoughts-x, 33.9%) - 32px);
  }

  :root:not([data-site-nav-docked="true"])[data-site-section="about"] :is(
    .site-nav__item[data-site-section="work"],
    .site-nav__work-depth
  ) {
    margin-left: 32px;
  }
}

.sky__reset:focus {
  outline: none;
}

.sky__reset:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16);
}

:root[data-theme="dark"] .sky__reset:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
}

.character-switch {
  position: fixed;
  z-index: 30;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 19px;
  color: var(--player-fg);
  background: var(--player-bg);
  box-shadow: var(--player-shadow);
  backdrop-filter: blur(18px) saturate(1.15);
  transition-property: opacity, transform;
  transition-duration: 200ms, 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.character-switch.is-switching {
  opacity: 0.58;
}

.character-switch__option {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 15px;
  color: var(--player-muted);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: color, background-color, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.character-switch__option svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.character-switch__option[aria-pressed="true"] {
  color: var(--player-fg);
  background: color-mix(in srgb, var(--player-fg) 10%, transparent);
}

.character-switch__option:hover:not(:disabled) {
  color: var(--player-fg);
}

.character-switch__option:active:not(:disabled) {
  transform: scale(0.96);
}

.character-switch__option:focus {
  outline: none;
}

.character-switch__option:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--player-fg) 28%, transparent);
}

.character-switch__option:disabled {
  cursor: wait;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bgm {
  position: fixed;
  z-index: 30;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 0;
  width: 52px;
  max-width: min(248px, calc(100vw - 24px));
  padding: 6px;
  overflow: hidden;
  border-radius: 26px;
  background: var(--player-bg);
  box-shadow: var(--player-shadow);
  backdrop-filter: blur(18px) saturate(1.15);
  color: var(--player-fg);
  font-family: "SF Pro Text", "PingFang SC", system-ui, sans-serif;
  transition-property: opacity, width, padding, gap;
  transition-duration: 1.6s, 280ms, 280ms, 280ms;
  transition-delay: 0.36s, 0s, 0s, 0s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.bgm[hidden] {
  display: none;
}

body.is-entered .bgm {
  transition-delay: 0s;
  transition-duration: 280ms;
}

.bgm.is-open,
.bgm:focus-within {
  width: 248px;
  padding: 6px 12px 6px 6px;
  gap: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .bgm:hover {
    width: 248px;
    padding: 6px 12px 6px 6px;
    gap: 8px;
  }
}

.bgm__audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.bgm__play {
  position: relative;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--player-fg);
  color: var(--player-on);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition-property: transform, background-color, color;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.bgm__play::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  content: "";
  transform: translate(-50%, -50%);
}

.bgm__play:focus {
  outline: none;
}

.bgm__play:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .bgm__play:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}

.bgm__play:active {
  transform: scale(0.96);
}

.bgm__icons {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.bgm__icon {
  position: absolute;
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition-property: opacity, transform, filter;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.bgm__icon--play {
  margin-left: 2.5px;
}

.bgm__icon--pause {
  opacity: 0;
  transform: scale(0.25);
  filter: blur(4px);
}

.bgm[data-playing="true"] .bgm__icon--play {
  opacity: 0;
  transform: scale(0.25);
  filter: blur(4px);
}

.bgm[data-playing="true"] .bgm__icon--pause {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.bgm__body {
  min-width: 0;
  flex: 1;
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.bgm.is-open .bgm__body,
.bgm:focus-within .bgm__body {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .bgm:hover .bgm__body {
    opacity: 1;
    pointer-events: auto;
  }
}

.bgm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.bgm__title {
  margin: 0;
  overflow: hidden;
  color: var(--player-fg);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-wrap: balance;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgm__time {
  flex: 0 0 auto;
  color: var(--player-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.bgm__seek-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 18px;
  margin-top: 2px;
}

.bgm__seek-wrap::before {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--player-fill) var(--progress, 0%),
    var(--player-track) var(--progress, 0%)
  );
  pointer-events: none;
}

.bgm__seek {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.bgm__seek:disabled {
  cursor: default;
}

.bgm__seek:focus {
  outline: none;
}

.bgm__seek:focus-visible {
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.16);
}

:root[data-theme="dark"] .bgm__seek:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
}

.bgm__seek::-webkit-slider-runnable-track {
  height: 3px;
  background: transparent;
}

.bgm__seek::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border: 0;
  border-radius: 50%;
  background: var(--player-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.bgm__seek::-moz-range-track {
  height: 3px;
  background: transparent;
}

.bgm__seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--player-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .site-loader.work-video-loader,
  .site-loader__fallback,
  .site-loader.work-video-loader .work-video-loader__stage,
  html,
  body,
  .hero,
  .site-panel,
  .site-sections,
  .site-nav,
  .site-nav__item,
  .site-nav__item::after,
  .site-nav__depth,
  .bgm__play,
  .bgm__icon,
  .bgm__body,
  .sky__swatch,
  .sky__panel,
  .sky__chip::after,
  .sky__reset,
  .sky,
  .character-switch,
  .character-switch__option,
  .door-fit,
  .door-fit__icon,
  .door-fit__panel,
  .chroma-palette__backdrop,
  .chroma-palette__connector,
  .chroma-palette__close,
  .chroma-palette__close span,
  .chroma-palette__item,
  .chroma-palette__body,
  .chroma-palette__dock,
  .chroma-palette__blob,
  .chroma-palette__selection,
  .chroma-palette__slot,
  .hero__hot,
  .bgm {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .chroma-palette__tail {
    animation: none !important;
  }

  .chroma-palette__backdrop,
  .chroma-palette__connector,
  .chroma-palette__close,
  .chroma-palette__close span,
  .chroma-palette__item,
  .chroma-palette__body,
  .chroma-palette__dock,
  .chroma-palette__blob,
  .chroma-palette__selection,
  .chroma-palette__slot {
    transition: none !important;
  }

  .site-nav__item,
  .site-nav__label,
  .site-nav__about-visual,
  .site-nav__depth,
  .hero__stage {
    animation: none !important;
    will-change: auto !important;
  }
}

.hero__media-bin,
.hero__source-media {
  position: fixed !important;
  top: 0 !important;
  left: -2400px !important;
  z-index: -20 !important;
  width: 1424px !important;
  height: 1424px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-entering .sky,
body.is-entering .character-switch,
body.is-entering .door-fit,
body.is-entering .bgm,
body.is-entering .site-nav {
  opacity: 0;
  pointer-events: none;
}

/* About note ------------------------------------------------------------- */

.about-note {
  --about-origin-x: 50vw;
  --about-origin-y: 34vh;
  --about-origin-page-y: 24%;
  --about-entry-x: 0px;
  --about-entry-y: -12px;
  --about-safe-left: env(safe-area-inset-left);
  --about-safe-right: env(safe-area-inset-right);
  --about-safe-center-shift: 0px;
  position: fixed;
  z-index: 900;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #2e2923;
  color-scheme: light;
  overscroll-behavior: contain;
}

.about-note::backdrop {
  background: transparent;
}

.about-note__scrim {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(
      circle at var(--about-origin-x) var(--about-origin-y),
      rgba(15, 12, 9, 0.27) 0,
      rgba(10, 8, 7, 0.58) 58%,
      rgba(8, 7, 6, 0.67) 100%
    );
  opacity: 0;
  cursor: default;
  -webkit-backdrop-filter: blur(3px) saturate(0.82);
  backdrop-filter: blur(3px) saturate(0.82);
  transition: opacity 380ms cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: none;
}

.about-note__paper {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: calc(50% + var(--about-safe-center-shift));
  width: min(440px, calc(100vw - 56px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height: min(286px, calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  min-height: min(238px, calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(63, 51, 38, 0.16);
  border-radius: 4px 6px 5px 3px;
  outline: none;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.9), transparent 36%),
    radial-gradient(circle at 88% 84%, rgba(203, 190, 159, 0.13), transparent 40%),
    linear-gradient(104deg, rgba(255, 255, 255, 0.42), transparent 32%, rgba(112, 91, 60, 0.035)),
    #fbfaf4;
  box-shadow:
    0 2px 1px rgba(27, 21, 16, 0.08),
    0 24px 64px rgba(8, 6, 4, 0.31),
    0 8px 18px rgba(8, 6, 4, 0.18);
  opacity: 0.12;
  clip-path: inset(
    var(--about-origin-page-y)
    0
    calc(100% - var(--about-origin-page-y))
    0
    round 4px
  );
  transform:
    translate(
      calc(-50% + var(--about-entry-x)),
      calc(-50% + var(--about-entry-y))
    )
    scaleX(0.84)
    scaleY(0.985)
    rotate(-0.9deg);
  transform-origin: 50% var(--about-origin-page-y);
  filter: blur(9px);
  transition:
    clip-path 600ms cubic-bezier(0.32, 0.72, 0, 1),
    transform 600ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 310ms ease,
    filter 470ms ease;
  touch-action: pan-y;
  overscroll-behavior: contain;
  will-change: clip-path, transform, opacity, filter;
}

.about-note__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      3deg,
      rgba(70, 57, 39, 0.018) 0,
      rgba(70, 57, 39, 0.018) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      93deg,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px,
      transparent 8px
    );
  opacity: 0.72;
  mix-blend-mode: multiply;
}

.about-note.is-open .about-note__scrim {
  opacity: 1;
}

.about-note.is-open .about-note__paper {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 4px);
  transform: translate(-50%, -50%) scale(1) rotate(-0.42deg);
  filter: blur(0);
}

.about-note__close {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(46, 41, 35, 0.6);
  opacity: 0;
  cursor: pointer;
  transform: rotate(9deg) scale(0.92);
  transition:
    color 160ms ease,
    background-color 160ms ease,
    opacity 180ms ease 300ms,
    transform 220ms cubic-bezier(0.32, 0.72, 0, 1) 300ms;
  -webkit-tap-highlight-color: transparent;
}

.about-note.is-open .about-note__close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.about-note__close svg {
  width: 19px;
  height: 19px;
}

.about-note__close path {
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
}

.about-note__edit {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 14px;
  display: grid;
  min-width: 44px;
  height: 44px;
  padding: 0 9px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(46, 41, 35, 0.54);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-weight: 520;
  letter-spacing: 0.08em;
  opacity: 0;
  scale: 1;
  cursor: pointer;
  transform: translateY(-2px);
  transition:
    color 160ms ease,
    background-color 160ms ease,
    opacity 180ms ease 300ms,
    transform 220ms cubic-bezier(0.32, 0.72, 0, 1) 300ms,
    scale 140ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.about-note__edit[hidden] {
  display: none;
}

.about-note.is-open .about-note__edit:not([hidden]) {
  opacity: 0.72;
  transform: translateY(0);
}

.about-note__edit:hover,
.about-note[data-editing="true"] .about-note__edit {
  background: rgba(68, 56, 41, 0.07);
  color: #2e2923;
}

.about-note__edit:active {
  scale: 0.96;
}

.about-note__close:hover {
  background: rgba(68, 56, 41, 0.07);
  color: #2e2923;
}

.about-note__close:focus-visible,
.about-note__edit:focus-visible,
.about-note__paper:focus-visible {
  outline: 2px solid rgba(46, 41, 35, 0.58);
  outline-offset: -4px;
}

.about-note__copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100%;
  box-sizing: border-box;
  align-content: center;
  padding: 45px 48px 38px;
}

.about-note__line {
  min-height: 1.72em;
  margin: 0;
  color: #2e2923;
  font-family: "Iowan Old Style", "Songti SC", STSong, Georgia, serif;
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.035em;
  text-wrap: pretty;
}

.about-note__line:first-child {
  margin-bottom: 14px;
  font-size: clamp(21px, 2.4vw, 25px);
  letter-spacing: 0.025em;
}

.about-note[data-editing="true"] .about-note__copy {
  cursor: text;
}

.about-note[data-editing="true"] .about-note__line {
  border-radius: 3px;
  outline: none;
  caret-color: #2e2923;
  cursor: text;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.about-note[data-editing="true"] .about-note__line:hover {
  background: rgba(68, 56, 41, 0.035);
}

.about-note[data-editing="true"] .about-note__line:focus {
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 -1px 0 rgba(46, 41, 35, 0.24);
}

.about-note[data-editing="true"] .about-note__line:empty::before {
  color: rgba(46, 41, 35, 0.34);
  content: "输入这一行…";
  pointer-events: none;
}

.about-note[data-editing="true"] .about-note__cursor {
  display: none;
}

.about-note__char {
  display: inline;
  white-space: pre;
}

.about-note__cursor {
  display: inline-block;
  width: 1.5px;
  height: 1.06em;
  margin-left: 3px;
  border-radius: 1px;
  background: currentColor;
  vertical-align: -0.14em;
  animation: about-note-cursor-blink 880ms steps(1, end) infinite;
}

.about-note__cursor.is-resting {
  opacity: 0.7;
}

@keyframes about-note-cursor-blink {
  0%,
  46% {
    opacity: 0.78;
  }

  47%,
  100% {
    opacity: 0;
  }
}

.about-note.is-closing .about-note__scrim {
  opacity: 0;
  transition-duration: 260ms;
}

.about-note.is-closing .about-note__paper {
  opacity: 0;
  clip-path: inset(
    var(--about-origin-page-y)
    0
    calc(100% - var(--about-origin-page-y))
    0
    round 4px
  );
  transform:
    translate(
      calc(-50% + var(--about-entry-x)),
      calc(-50% + var(--about-entry-y))
    )
    scaleX(0.88)
    scaleY(0.99)
    rotate(-0.8deg);
  filter: blur(5px);
  transition-duration: 320ms, 320ms, 220ms, 260ms;
}

@media (max-width: 520px) {
  .about-note__paper {
    width: min(380px, calc(100vw - 56px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: min(278px, calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    border-radius: 4px 5px 4px 3px;
  }

  .about-note__copy {
    padding: 42px 26px 34px;
  }

  .about-note__line {
    font-size: 17.5px;
    letter-spacing: 0.025em;
  }

  .about-note__line:first-child {
    margin-bottom: 12px;
    font-size: 21px;
  }

  .about-note__close {
    top: 7px;
    right: 7px;
  }

  .about-note__edit {
    top: 7px;
    left: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-note__scrim,
  .about-note__paper,
  .about-note__close,
  .about-note__edit,
  .about-note__line,
  .about-note__char {
    transition: none !important;
  }

  .about-note__paper {
    clip-path: inset(0 0 0 0 round 4px);
    transform: translate(-50%, -50%) rotate(-0.42deg);
    filter: none;
  }

  .about-note__cursor {
    opacity: 0.65;
    animation: none;
  }
}

/* Work stays a lightweight media index. Interactive 3D studies live in Lab. */
.work-page {
  width: min(
    1120px,
    calc(100vw - 64px - env(safe-area-inset-left) - env(safe-area-inset-right))
  );
}

.work-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  gap: clamp(32px, 7vw, 96px);
  align-items: end;
  padding-bottom: clamp(34px, 6vh, 64px);
  border-bottom: 1px solid var(--page-line);
}

.work-intro__aside {
  display: grid;
  gap: 16px;
  align-content: end;
}

.work-intro__aside p {
  max-width: 29em;
  margin: 0;
  color: var(--page-muted);
  font: 400 clamp(14px, 1.4vw, 17px)/1.65 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
}

.work-intro__status:not([hidden]) {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
  color: var(--page-muted);
  font: 600 10px/1 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-intro__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.work-page .work-list {
  width: 100%;
  margin: clamp(36px, 7vh, 72px) 0 0;
  border: 0;
}

.work-projects {
  border-top: 1px solid var(--page-line);
}

.work-project {
  border-bottom: 1px solid var(--page-line);
}

.work-project__surface {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: 280px;
  padding: clamp(28px, 5vw, 54px) 0;
  color: inherit;
  text-decoration: none;
}

.work-project__copy {
  display: grid;
  align-content: center;
}

.work-project__meta-line {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 24px;
  color: var(--page-muted);
  font: 600 9px/1.3 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-project__title {
  margin: 0;
  font: 400 clamp(30px, 4vw, 54px)/0.98 "Iowan Old Style", "Baskerville", "Songti SC", serif;
  letter-spacing: -0.035em;
}

.work-project__description {
  max-width: 31em;
  margin: 18px 0 0;
  color: var(--page-muted);
  font: 400 clamp(13px, 1.15vw, 16px)/1.65 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
}

.work-project__action {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  margin-top: 28px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font: 600 11px/1.2 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
}

.work-project__visual {
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--page-line);
  border-radius: 2px;
  background: color-mix(in srgb, var(--page-ink) 5%, var(--page-paper));
}

.work-project__picture,
.work-project__image,
.work-project__video {
  display: block;
  width: 100%;
  height: 100%;
}

.work-project__image,
.work-project__video {
  object-fit: cover;
}

.work-project__surface:hover .work-project__action,
.work-project__surface:focus-visible .work-project__action {
  opacity: 0.58;
}

.work-project__surface:focus {
  outline: none;
}

.work-project__surface:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 8px;
}

.work-projects__secondary,
.work-directions {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(52px, 9vh, 96px) 0 24px;
}

.work-projects__secondary h2,
.work-directions__title {
  margin: 0;
  font: 400 clamp(26px, 3vw, 40px)/1 "Iowan Old Style", "Baskerville", "Songti SC", serif;
  letter-spacing: -0.03em;
}

.work-projects__secondary p {
  margin: 0;
  color: var(--page-muted);
  font: 400 14px/1.6 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
}

.work-directions {
  padding-bottom: 0;
}

.work-directions__list {
  border-top: 1px solid var(--page-line);
}

.work-direction {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--page-line);
}

.work-direction__number {
  color: var(--page-muted);
  font: 600 9px/1.5 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
  letter-spacing: 0.08em;
}

.work-direction__copy h3,
.work-direction__copy p {
  margin: 0;
}

.work-direction__copy h3 {
  font: 600 13px/1.4 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
}

.work-direction__copy p {
  margin-top: 5px;
  color: var(--page-muted);
  font: 400 13px/1.55 "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
}

.work-direction__mark {
  display: none;
}

.work-project--placeholder {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  min-height: 280px;
  padding: clamp(28px, 5vw, 54px) 0;
}

.work-project__placeholder-copy {
  display: grid;
  gap: 14px;
}

.work-skeleton-line {
  display: block;
  width: var(--placeholder-width, 72%);
  height: 9px;
  border-radius: 999px;
  background: var(--page-line);
}

.work-skeleton-line--title {
  height: 28px;
  margin: 9px 0;
}

/* The production scene keeps its weather/growth controls behind a restrained
   upper-right launcher. Preview-only scene switches remain query-gated. */
html[data-preview-nav="off"][data-site-section="about"] #site-tab-thoughts,
html[data-preview-nav="off"][data-site-section="about"] #site-tab-work,
html[data-preview-nav="off"][data-site-section="about"] .site-nav__depth--thoughts,
html[data-preview-nav="off"][data-site-section="about"] .site-nav__work-depth {
  visibility: hidden !important;
  pointer-events: none !important;
}
:root[data-scene-nav="off"][data-site-section="about"] .site-nav__item,
:root[data-scene-nav="off"][data-site-section="about"] .site-nav__about-visual,
:root[data-scene-nav="off"][data-site-section="about"] .site-nav__depth {
  visibility: hidden !important;
  pointer-events: none !important;
}
.scene-preview-controls {
  position: fixed; z-index: 71; top: max(64px, calc(env(safe-area-inset-top) + 56px)); right: max(28px, env(safe-area-inset-right));
  width: 216px; padding: 8px 12px; border-radius: 18px; color: #eef4e7; background: rgb(18 37 32 / 94%);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 84px); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 10px 32px rgb(0 0 0 / 16%);
  font-size: 11px; -webkit-font-smoothing: antialiased;
}
.scene-preview-controls[hidden] { display: none; }
.scene-preview-controls__launcher {
  position: fixed; z-index: 71; top: max(8px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px;
  color: var(--page-ink); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, transform 160ms ease;
}
.scene-preview-controls__launcher[hidden] { display: none; }
.scene-preview-controls__launcher:hover { background: rgb(255 255 255 / 9%); }
.scene-preview-controls__launcher:active { transform: scale(.94); }
.scene-preview-controls__launcher svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; }
.scene-preview-controls__launcher:focus-visible { outline: 2px solid var(--page-ink); outline-offset: 3px; }
.scene-preview-controls__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 12px; }
.scene-preview-controls__toggle { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #d1e2a3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scene-preview-controls__toggle:hover { background: rgb(255 255 255 / 7%); }
.scene-preview-controls__toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 140ms ease; }
.scene-preview-controls.is-collapsed { width: 128px; padding-block: 2px; }
.scene-preview-controls.is-collapsed .scene-preview-controls__toggle svg { transform: rotate(180deg); }
#scene-preview-controls-body[hidden] { display: none; }
.scene-preview-controls__section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgb(209 226 163 / 20%);
}
.scene-preview-controls__section-title {
  margin-bottom: 4px;
  color: #c8dd94;
  font-size: 11px;
}
.scene-preview-controls__sky-slot { min-height: 0; }
.scene-preview-controls__sky-slot .sky {
  position: static;
  top: auto;
  right: auto;
  width: 100%;
  transition: none;
}
.scene-preview-controls__sky-slot .sky__toggle { display: none; }
.scene-preview-controls__sky-slot .sky__panel,
.scene-preview-controls__sky-slot .sky.is-open .sky__panel {
  position: static;
  inset: auto;
  display: grid;
  width: 100%;
  max-height: none;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  filter: none;
}
.scene-preview-controls__sky-slot .sky__presets { grid-template-columns: repeat(4, 40px); }
.scene-preview-controls__sky-slot .sky__custom { background: rgb(255 255 255 / 6%); }
.scene-preview-controls__sky-slot .sky__reset { color: #b4c3b9; }
.scene-preview-controls__character > label,
.scene-preview-controls__character > button,
.scene-preview-controls__character-paint-row { margin-top: 6px; }
.scene-preview-controls__character label {
  min-height: 34px;
  font-size: 11px;
}
.scene-preview-controls__character select,
.scene-preview-controls__character > button,
.scene-preview-controls__character-paint-row > button {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgb(209 226 163 / 24%);
  border-radius: 10px;
  background: rgb(255 255 255 / 7%);
  color: #eef4e7;
  font: inherit;
  color-scheme: dark;
}
.scene-preview-controls__character > button {
  border: 0;
  cursor: pointer;
}
.scene-preview-controls__character-paint-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}
.scene-preview-controls__character-paint-row > button { margin-top: 0; }
.scene-preview-controls__character-custom {
  display: flex !important;
  align-items: center;
  gap: 5px;
  min-width: 72px;
  min-height: 40px !important;
  padding: 4px 6px 4px 4px;
  border: 1px solid rgb(209 226 163 / 24%);
  border-radius: 10px;
  background: rgb(255 255 255 / 7%);
  cursor: pointer;
}
.scene-preview-controls__character-custom input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.scene-preview-controls__character-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.scene-preview-controls__character-custom input::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 16%);
}
.scene-preview-controls__character-custom input::-moz-color-swatch {
  border: 0;
  border-radius: 6px;
}
.scene-preview-controls__character-custom span {
  color: #c8dd94;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.scene-preview-controls__character input[type="range"] { height: 26px; }
.scene-preview-controls__character output {
  color: #c8dd94;
  font-variant-numeric: tabular-nums;
}
.scene-preview-controls__switch-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px !important;
}
.scene-preview-controls__character small {
  display: block;
  margin-top: 4px;
  color: #b4c3b9;
  font-size: 10px;
  line-height: 1.45;
}
.scene-preview-controls label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; cursor: pointer; }
.scene-preview-controls input[type="checkbox"] { appearance: none; flex: 0 0 34px; width: 34px; height: 20px; margin: 0; border-radius: 20px; background: #6a7770; cursor: pointer; transition: background-color 160ms ease; }
.scene-preview-controls input[type="checkbox"]::before { content: ""; display: block; width: 14px; height: 14px; margin: 3px; border-radius: 50%; background: #eef4e7; transition: transform 160ms ease; }
.scene-preview-controls input:checked { background: #a9c885; }
.scene-preview-controls input:checked::before { transform: translateX(14px); background: #21372b; }
.scene-preview-controls :is(input,button,select):focus-visible { outline: 2px solid #d1e2a3; outline-offset: 4px; }
.scene-preview-controls__growth { margin-top: 4px; border-top: 1px solid rgb(209 226 163 / 20%); padding-top: 4px; }
.scene-preview-controls__growth label { min-height: 32px; }
.scene-preview-controls__growth output { color: #c8dd94; font-variant-numeric: tabular-nums; }
.scene-preview-controls input[type="range"] { display: block; width: 100%; height: 30px; margin: 0; accent-color: #c4d993; cursor: pointer; }
.scene-preview-controls__growth-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scene-preview-controls__growth-footer small { color: #b4c3b9; font-size: 10px; }
.scene-preview-controls__growth-footer button { min-height: 40px; padding: 0 3px; border: 0; background: none; color: #d1e2a3; font: inherit; cursor: pointer; white-space: nowrap; }
.scene-preview-controls__weather { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(209 226 163 / 20%); }
.scene-preview-controls__weather select { min-width: 110px; max-width: 65%; min-height: 44px; padding: 0 10px; border: 1px solid rgb(209 226 163 / 28%); border-radius: 10px; background: #233e32; color: #eef4e7; font: inherit; color-scheme: dark; cursor: pointer; }
.scene-preview-controls__weather small, .scene-preview-controls__rain small { display: block; margin-top: 6px; color: #b4c3b9; font-size: 10px; line-height: 1.5; }
.scene-preview-controls__rain { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(209 226 163 / 20%); }
.scene-preview-controls__rain-title { margin-bottom: 2px; color: #c8dd94; font-size: 11px; }
.scene-preview-controls__rain label { min-height: 28px; }
.scene-preview-controls__rain input[type="range"] { height: 26px; }
.scene-preview-controls :disabled { opacity: .45; cursor: default; }
@media (max-width: 720px) { .scene-preview-controls { top: max(60px, calc(env(safe-area-inset-top) + 52px)); right: max(16px, env(safe-area-inset-right)); width: min(240px, calc(100vw - 32px)); } .scene-preview-controls__launcher { right: max(16px, env(safe-area-inset-right)); } }
@media (prefers-reduced-motion: reduce) { .scene-preview-controls input, .scene-preview-controls input::before, .scene-preview-controls__toggle svg { transition: none; } }

.work-project__placeholder-visual {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--page-line);
  background: color-mix(in srgb, var(--page-ink) 4%, var(--page-paper));
}

.work-directions--placeholder > .work-skeleton-line {
  margin-top: 8px;
}

.work-direction__placeholder {
  display: grid;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--page-line);
}

@media (max-width: 720px) {
  .work-page {
    width: calc(100vw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  .work-intro,
  .work-project__surface,
  .work-project--placeholder,
  .work-projects__secondary,
  .work-directions {
    grid-template-columns: 1fr;
  }

  .work-intro {
    gap: 26px;
  }

  .work-project__surface,
  .work-project--placeholder {
    gap: 24px;
    min-height: 0;
    padding: 30px 0;
  }

  .work-project__visual,
  .work-project__placeholder-visual {
    aspect-ratio: 4 / 3;
  }

  .work-projects__secondary,
  .work-directions {
    gap: 20px;
    padding-top: 58px;
  }
}

/* Deployed page vs. studio. `scripts/build-cloudflare.sh` stamps
   `data-deploy="production"` on the published copy only, so the local tree
   keeps every control. There the page is the finished picture: the background
   picker, the scene tuner and the music player step out, while the three
   section entries — the only way through the site — stay. Hiding in CSS keeps
   them out of the tab order and out of the first paint, with no flash before a
   script runs. `?studio=1` sets data-studio and brings them back for the owner. */
html[data-deploy="production"]:not([data-studio="on"]) .sky,
html[data-deploy="production"]:not([data-studio="on"]) .bgm,
html[data-deploy="production"]:not([data-studio="on"]) .scene-preview-controls,
html[data-deploy="production"]:not([data-studio="on"]) .scene-preview-controls__launcher {
  display: none !important;
}