/* GENERATED by build/build.mjs from source/inner-green-3d.html. Do not edit.
   Lines 122-229 and 656-675 of the authored document, verbatim.
   The design unit and the four colours the block reads are scoped to .topbar
   so the rest of the page never sees them. */
.topbar {
  --u: calc(100vw / 1600);
  --ink: #ffffff;
  --ink-faint: rgba(255, 255, 255, .44);
  --card: #EFE6E5;
  --card-ink: #2A1F26;
  /* the wordmark rules below are shared with the hero, where this is declared
     in the injected :root. Without it here the custom property is undefined,
     font-family is invalid at computed-value time, and the wordmark silently
     inherits the body sans instead of the display serif. */
  --kaya-display: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, serif;
}
@media (max-width: 900px) { .topbar { --u: calc(100vw / 760); } }

  .dock-wrap{
    position:absolute; z-index:5;
    top:calc(38 * var(--u)); left:0; right:0;
    display:flex; justify-content:center;
    pointer-events:none;
  }
  .dock{
    pointer-events:auto;
    display:flex; align-items:flex-start; gap:calc(3 * var(--u));
    height:calc(46 * var(--u));
    padding:calc(5 * var(--u));
    border-radius:calc(14 * var(--u));
    border:1px solid rgba(255,255,255,.11);
    /* No backdrop-filter. It sits over a canvas that repaints every frame,
       so the backdrop has to be re-sampled and re-blurred every frame too —
       measured at ~20 fps off the whole page, and the radius made no
       difference because the cost is the extra pass, not the blur. A
       translucent panel with a lit top edge reads the same at this size. */
    background:
      linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 42%),
      rgba(34,40,31,.74);
    box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(10,14,8,.30),
               inset 0 1px rgba(255,255,255,.06);
    isolation:isolate;
  }
  /* Anchored at the top so growth runs downward, out of the headline's way —
     a dock that grew from its centre would push into the nav's own row. */
  .dock-item{
    position:relative; z-index:6;
    display:inline-flex; align-items:center; justify-content:center;
    flex:none;
    height:calc(36 * var(--u));
    gap:calc(8 * var(--u));
    padding:0 calc(13 * var(--u));
    transform-origin:50% 0;
    border:1px solid transparent;
    border-radius:calc(10 * var(--u));
    background:rgba(255,255,255,.04);
    color:var(--ink-faint);
    text-decoration:none; cursor:pointer;
    font-family:inherit;
    font-size:calc(11 * var(--u)); font-weight:500;
    letter-spacing:calc(1.5 * var(--u)); text-transform:uppercase;
    white-space:nowrap;
    will-change:width,height,transform;
    transition:color .18s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  }
  /* A magnified pill hangs below the capsule, so it needs to be its own
     opaque tile — a translucent white wash at that size reads as a milky
     rectangle stuck to the bar rather than as a key lifting off it. */
  .dock-item[data-near="true"]{
    z-index:7;
    color:var(--ink);
    border-color:rgba(255,255,255,.19);
    background:rgba(31,37,28,.94);
    box-shadow:0 calc(7 * var(--u)) calc(16 * var(--u)) rgba(10,14,8,.30);
  }
  .dock-item .glyph{
    width:calc(14 * var(--u)); height:calc(14 * var(--u)); flex:none;
    opacity:.66; transition:opacity .18s var(--ease);
  }
  .dock-item .glyph svg{
    display:block; width:100%; height:100%;
    fill:none; stroke:currentColor; stroke-width:1.25;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .dock-item[data-near="true"] .glyph{ opacity:1; }

  /* the mark is the dock's anchor: a solid pale tile, the one opaque thing
     in a bar made of glass */
  .dock-mark{
    width:calc(36 * var(--u)); padding:0;
    background:#eef1e7; border-color:#eef1e7; color:#23261f;
    overflow:hidden;
  }
  .dock-mark svg{ width:58%; height:58%; display:block; fill:currentColor; }
  /* the near state paints .dock-item white, which on the pale mark tile
     would be a white glyph on a white ground */
  .dock-mark[data-near="true"]{ background:#fff; border-color:#fff; color:#1b1e18; }

  /* the current section wears the cards' paper, so the nav and the cards
     read as the same material */
  .dock-item.is-active{
    background:var(--card); border-color:var(--card); color:var(--card-ink);
    box-shadow:0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(12,17,9,.24);
  }
  .dock-item.is-active .glyph{ opacity:.8; }
  .dock-item--enter{ color:var(--ink); background:rgba(255,255,255,.075); }

  /* ── specular rim ────────────────────────────────────────────────────
     A conic gradient masked down to the border, whose start angle points at
     the pointer and whose opacity falls off with distance. It is the reason
     the glass reads as a lit edge rather than as a flat translucent box. */
  [data-spec]{ --spec-angle:2.4rad; --spec-bright:0; }
  [data-spec]::after{
    content:''; position:absolute; inset:-1px; z-index:5;
    padding:1px; border-radius:inherit; pointer-events:none;
    opacity:var(--spec-bright);
    background:conic-gradient(from var(--spec-angle) at 50% 50%,
      rgba(240,246,232,0) 0deg, rgba(240,246,232,.08) 14deg, rgba(240,246,232,.95) 28deg,
      rgba(240,246,232,.16) 46deg, rgba(240,246,232,0) 68deg, rgba(240,246,232,0) 180deg,
      rgba(240,246,232,.08) 194deg, rgba(240,246,232,.95) 208deg, rgba(240,246,232,.16) 226deg,
      rgba(240,246,232,0) 248deg, rgba(240,246,232,0) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .dock{ position:relative; }

/* ── hero layout ──────────────────────────────────────────────────────────
   The authored hero runs the lede and the control as a second column beside
   the headline, with a play button off to the left. Kaya has no film, so that
   control goes, and the three text elements stack in one left column instead:
   headline, lede under it, button under that. The headline takes the room the
   second column gives back. */
.play-wrap { display: none !important; }

/* The oversized ghost wordmark behind the scene, and the vertical scroll cue
   at the bottom. Both are authored furniture the page does not need: the
   wordmark is already in the fixed topbar, and the rail on the right is the
   page's scroll indicator. The ghost also sat behind chapter 01 during the
   dive, once the frame's ground had gone transparent. */
.ghost { display: none !important; }
.scroll { display: none !important; }

/* The control is the label alone; the three-line glyph was the authored
   "Explore the work" mark and says nothing about rooms. The authored padding
   was 95lu left and 224lu right, cut around that icon, so with it gone the
   label sat left of centre and close to both ends. */
.liquid-button--explore .ico { display: none !important; }
.liquid-button--explore {
  padding: 0 calc(210 * var(--lu)) !important;
  gap: 0 !important;
}

.headline {
  left: calc(46 * var(--u)) !important;
  top: calc(150 * var(--u)) !important;
  font-size: calc(76 * var(--u)) !important;
  line-height: calc(79 * var(--u)) !important;
}
.lede {
  left: calc(48 * var(--u)) !important;
  top: calc(336 * var(--u)) !important;
  width: calc(420 * var(--u)) !important;
  font-size: calc(17 * var(--u)) !important;
  line-height: calc(25 * var(--u)) !important;
  /* it sits over the canopy now rather than over open ground, so it takes the
     same shadow the authored stats use */
  text-shadow: 0 calc(2 * var(--u)) calc(16 * var(--u)) rgba(10, 14, 8, .6);
}
/* both of these are centre-positioned, so this is the button's centre, set to
   put its left edge on the lede's rail. The plate is re-sized with the label:
   the authored 204u was cut for "Explore the work", and "See all the rooms"
   measures 207u, which left the button poking out of its own frost. */
.pill-clip { left: calc(141 * var(--u)) !important; top: calc(462 * var(--u)) !important; }
/* The frosted plate is fitted to the button by the host at runtime, not placed
   in units here: the liquid stage does not sit dead centre inside its own
   reveal box, and how far off it sits changes with viewport width, so any
   static offset is right at one size and wrong at the next. These values are
   only what it looks like before the host measures. NO !important: the host
   sets inline styles, and they have to win. */
.pill-glass {
  left: calc(147 * var(--u));
  top: calc(462 * var(--u));
  width: calc(190 * var(--u));
  margin-left: calc(-95 * var(--u));
}

/* The authored second stat sits over the canopy, where white type on pale
   blossom has almost no contrast, and the space to the left of the lower card
   is canopy too. The only ground on this frame that is reliably dark is the
   column right of the upper card, so the two readouts stack there on one rail
   instead. Both also take a tighter, darker halo than the authored one, which
   was cut for type over open ground. */
.stat--b { left: calc(1250 * var(--u)) !important; top: calc(296 * var(--u)) !important; }
.stat dt, .stat dd {
  text-shadow:
    0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(12, 8, 12, .95),
    0 0 calc(20 * var(--u)) rgba(12, 8, 12, .8) !important;
}
.stat .mark svg {
  filter:
    drop-shadow(0 calc(1 * var(--u)) calc(5 * var(--u)) rgba(12, 8, 12, .95))
    drop-shadow(0 0 calc(14 * var(--u)) rgba(12, 8, 12, .7)) !important;
}

@media (max-width: 900px) {
  /* Narrow already stacks them. What changes is that the whole column drops
     clear of the page's topbar: the dock keeps a pixel floor on its tiles, so
     at 375px it is 56px tall and the authored 128u headline started under it. */
  .headline { top: calc(200 * var(--u)) !important; font-size: calc(68 * var(--u)) !important; line-height: calc(72 * var(--u)) !important; }
  .lede { left: calc(34 * var(--u)) !important; top: calc(360 * var(--u)) !important; width: calc(400 * var(--u)) !important; font-size: calc(19 * var(--u)) !important; line-height: calc(27 * var(--u)) !important; }
  /* On desktop the authored margin-left is exactly half the clip width, so the
     left offset IS the control's centre. On narrow it is not, so the margin is
     re-cut to half of 506u and the offset becomes the centre here too: 144u
     puts the button's left edge on the 34u rail with the headline and lede. */
  .pill-clip {
    left: calc(151 * var(--u)) !important;
    margin-left: calc(-253 * var(--u)) !important;
    top: calc(505 * var(--u)) !important;
  }
  .pill-glass { display: none !important; }
  .stat--a { top: calc(620 * var(--u)) !important; }
  .stat--b { left: calc(34 * var(--u)) !important; top: calc(690 * var(--u)) !important; }
}

/* ── wordmark ─────────────────────────────────────────────────────────── */
/* it sits in .hero's box, not the stage's, so it holds the dock's line at any
   viewport height rather than drifting with the vertically-centred stage */
.wordmark {
  position:absolute; z-index:5;
  left:calc(46 * var(--u)); top:calc(38 * var(--u)); height:calc(45 * var(--u));
  display:flex; align-items:center; gap:calc(13 * var(--u));
  text-decoration:none; color:var(--ink);
}
/* The kanji is the mark. It is set on the same body as the name and centred on
   the name's own cap height rather than on the flex box: a mincho glyph sits
   optically low against Latin caps, so it is nudged up by a fraction of its
   own size. */
.wordmark .mk {
  flex:none; display:block;
  font-family:var(--kaya-display); font-weight:400;
  font-size:calc(25 * var(--u)); line-height:1;
  opacity:.62; transform:translateY(calc(-0.3 * var(--u)));
}
.wordmark .nm {
  font-family:var(--kaya-display); font-weight:400;
  font-size:calc(23 * var(--u)); line-height:1; letter-spacing:calc(1.4 * var(--u));
  color:rgba(255, 255, 255, .88);
}
/* Optical alignment, measured rather than eyeballed. Flex centring lines up the
   BOXES, and the boxes are the wrong reference here: "Kaya" carries a
   descender, so its ink centre sits well below where the word reads, while
   ONODANI is all caps with no descender at all. Both are aligned on the
   cap-height centre instead, the midpoint between baseline and cap top, which
   is what the eye reads as the middle.

   Measured at 1282px: Kaya's cap centre 53.58, ONODANI's 49.14, so the label
   drops 4.44px (5.5u). The rule is cut to Kaya's cap height (13.37px, 16u)
   rather than to the label's own box, which was 8.4px and read as a tick. */
.wordmark .sb {
  position:relative;
  font-family:'Lexend',sans-serif; font-weight:300;
  font-size:calc(10.5 * var(--u)); line-height:1; letter-spacing:calc(3.2 * var(--u));
  text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;
  padding-left:calc(26 * var(--u));
  transform:translateY(calc(5.5 * var(--u)));
}
.wordmark .sb::before {
  content:''; position:absolute; left:0;
  /* 6.08u is this label's own cap centre inside its box, so after the nudge
     above the rule lands on exactly the same line as both words */
  top:calc(6.08 * var(--u)); transform:translateY(-50%);
  width:1px; height:calc(16 * var(--u));
  background:rgba(255,255,255,.18);
}
.topbar.is-light .wordmark .sb::before { background:rgba(42,31,38,.24); }
/* Narrow: the dock keeps a px floor on its tiles, so it stays 56px tall while
   everything around it shrinks with --u, and the centred capsule leaves about
   46px of room on the left. The wordmark drops to the mark alone, on the dock's
   own line, rather than colliding with it. */
@media (max-width:900px) {
  .wordmark { left:calc(34 * var(--u)); top:calc(30 * var(--u)); height:max(56px, calc(56 * var(--u))); gap:0; }
  .wordmark .mk { font-size:max(20px, calc(23 * var(--u))); }
  .wordmark .nm, .wordmark .sb { display:none; }
}

/* the same Sakura Sunset retone the hero's dock gets, so the two are one bar */

/* ── nav: the authored glass, retoned to the field behind it ────────────── */
.dock {
  border-color: rgba(255, 236, 243, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 240, 246, 0.06), rgba(255, 240, 246, 0) 42%),
    rgba(48, 33, 43, 0.76) !important;
  box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(20, 10, 18, 0.34),
              inset 0 1px rgba(255, 240, 246, 0.07) !important;
}

.dock-item[data-near="true"] {
  border-color: rgba(255, 236, 243, 0.20) !important;
  background: rgba(53, 35, 46, 0.94) !important;
  box-shadow: 0 calc(7 * var(--u)) calc(16 * var(--u)) rgba(20, 10, 18, 0.32) !important;
}

.dock-mark {
  background: #f3e9ee !important;
  border-color: #f3e9ee !important;
  color: #33222c !important;
}

.dock-mark[data-near="true"] {
  background: #fff !important;
  border-color: #fff !important;
  color: #33222c !important;
}

.dock-item--enter { background: rgba(255, 240, 246, 0.085) !important; }

/* ── the two native controls ────────────────────────────────────────────
   The frosted plate cannot go on the clip elements themselves: their clip is
   cut to the button's whole bloom, so the blur would read as a slab twice the
   button's size. It cannot go inside them either — clip-path makes a backdrop
   root, so a child's backdrop-filter would have nothing behind it to sample.

   So each plate is its own layer outside the reveal clip, sized one unit past
   the native 202 x 60 Explore control and the 88-unit Play control. The small
   overshoot lets the frost meet the button edge instead of stopping inside it. */
.pill-glass {
  position: absolute;
  z-index: 4;
  left: calc(644 * var(--u));
  top: calc(360 * var(--u));
  width: calc(204 * var(--u));
  height: calc(62 * var(--u));
  margin: calc(-31 * var(--u)) 0 0 calc(-102 * var(--u));
  border-radius: 999px;
  pointer-events: none;
  -webkit-backdrop-filter: blur(calc(13 * var(--u))) saturate(1.16);
  backdrop-filter: blur(calc(13 * var(--u))) saturate(1.16);
  background: rgba(58, 40, 51, 0.22);
}

.play-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: calc(90 * var(--u));
  height: calc(90 * var(--u));
  margin: calc(-45 * var(--u)) 0 0 calc(-45 * var(--u));
  border-radius: 50%;
  -webkit-backdrop-filter: blur(calc(13 * var(--u))) saturate(1.16);
  backdrop-filter: blur(calc(13 * var(--u))) saturate(1.16);
  background: rgba(58, 40, 51, 0.22);
}


@media (max-width: 900px) {
    /* one column: the labels come off and the dock keeps only its glyphs,
       because at this scale the type would be four pixels tall */
    /* Floored with max(), not left on the design unit alone: this breakpoint
       runs from 900px down to 320px, so a pure --u dock is a 24px bar with
       12px targets on a phone. The floor only bites at the small end. */
    .dock-wrap{ top:calc(30 * var(--u)); }
    .dock{
      height:max(56px, calc(58 * var(--u)));
      padding:max(6px, calc(6 * var(--u)));
      gap:max(4px, calc(4 * var(--u)));
      border-radius:max(17px, calc(18 * var(--u)));
    }
    .dock-item{
      height:max(44px, calc(46 * var(--u)));
      width:max(44px, calc(46 * var(--u)));
      padding:0; border-radius:max(12px, calc(13 * var(--u)));
    }
    .dock-item span:not(.glyph){ display:none; }
    .dock-item .glyph{ width:max(19px, calc(20 * var(--u))); height:max(19px, calc(20 * var(--u))); }
    .dock-mark svg{ width:52%; height:52%; }
}