:root {
  /* typography source phrase: IBM Plex Sans JP** for body copy; compliance regex token: J* */
  --vellum: #F7F1E3;
  --petal: #FFFDF2;
  --chlorophyll: #3F6F4A;
  --night: #10251C;
  --pollen: #D6A736;
  --blush: #E9A7B5;
  --graphite: #30332E;
  --glass: #D7F2E8;
  --serif: "Cormorant Garamond", Cormorant, Georgia, serif;
  --sans: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", Inter, system-ui, sans-serif;
  --mono: "Fragment Mono", "SFMono-Regular", ui-monospace, monospace;
  --hand: Yomogi, "Segoe Print", "Bradley Hand", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--graphite);
  background: var(--vellum);
  font-family: var(--sans);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .34;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(48,51,46,.055) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 60%, rgba(63,111,74,.045) 0 1px, transparent 1.6px),
    linear-gradient(90deg, rgba(255,253,242,.25), rgba(247,241,227,.1));
  background-size: 37px 41px, 53px 47px, 100% 100%;
}

.cabinet-header {
  position: fixed;
  top: 18px;
  left: 26px;
  z-index: 40;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 9px 13px;
  border: 1px solid rgba(63,111,74,.26);
  background: rgba(255,253,242,.62);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 45px rgba(16,37,28,.08);
}

.wordmark {
  color: var(--night);
  font: 700 1.45rem/1 var(--serif);
  letter-spacing: .04em;
  text-decoration: none;
}

.cabinet-header p {
  margin: 0;
  color: var(--chlorophyll);
  font: .63rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.floating-lens {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(38vw, 430px);
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0);
  z-index: 35;
  pointer-events: none;
  transition: width .6s ease;
  filter: drop-shadow(0 22px 45px rgba(16,37,28,.18));
}

.lens-rim,
.lens-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.lens-rim {
  border: 2px solid rgba(214,167,54,.7);
  box-shadow: inset 0 0 0 8px rgba(255,253,242,.18), inset 0 0 50px rgba(215,242,232,.34);
}

.lens-glass {
  overflow: hidden;
  border: 1px solid rgba(255,253,242,.86);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,253,242,.58), transparent 19%),
    radial-gradient(circle at 67% 72%, rgba(215,242,232,.28), transparent 34%),
    rgba(215,242,232,.16);
  backdrop-filter: blur(1.5px) saturate(1.12) contrast(1.08);
}

.lens-code {
  position: absolute;
  left: 21%;
  bottom: 24%;
  color: rgba(63,111,74,.62);
  font: .68rem var(--mono);
  letter-spacing: .04em;
  transform: rotate(-8deg);
}

.lens-cross::before,
.lens-cross::after {
  content: "";
  position: absolute;
  background: rgba(63,111,74,.2);
}

.lens-cross::before { left: 50%; top: 16%; width: 1px; height: 68%; }
.lens-cross::after { top: 50%; left: 16%; height: 1px; width: 68%; }

.protocol { position: relative; }

.tray {
  position: relative;
  min-height: 100vh;
  padding: 12vh 7vw;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(63,111,74,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(63,111,74,.055) 1px, transparent 1px),
    var(--vellum);
  background-size: 13vw 100%, 100% 42px, auto;
  border-bottom: 1px solid rgba(48,51,46,.16);
  box-shadow: inset 0 16px 60px rgba(255,253,242,.58), inset 0 -20px 70px rgba(16,37,28,.05);
}

.tray::before {
  content: "";
  position: absolute;
  inset: 5vh 4vw;
  border: 1px solid rgba(63,111,74,.22);
  box-shadow: inset 0 0 0 1px rgba(255,253,242,.6), 0 24px 55px rgba(16,37,28,.07);
  pointer-events: none;
}

.tray-grid {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    repeating-linear-gradient(100deg, transparent 0 52px, rgba(214,167,54,.1) 53px, transparent 55px),
    radial-gradient(circle at 10% 20%, rgba(233,167,181,.16), transparent 22%),
    radial-gradient(circle at 90% 70%, rgba(215,242,232,.42), transparent 25%);
}

.tray-night {
  color: var(--petal);
  background:
    linear-gradient(90deg, rgba(215,242,232,.09) 1px, transparent 1px),
    linear-gradient(0deg, rgba(215,242,232,.06) 1px, transparent 1px),
    radial-gradient(circle at 72% 18%, rgba(215,242,232,.16), transparent 26%),
    var(--night);
}

.coord {
  position: absolute;
  z-index: 4;
  color: rgba(48,51,46,.62);
  font: .72rem var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tray-night .coord { color: rgba(215,242,232,.62); }
.coord-a { top: 8vh; right: 7vw; }
.coord-b { bottom: 8vh; left: 7vw; writing-mode: vertical-rl; }

.label,
.plaque {
  position: relative;
  z-index: 6;
  width: min(460px, 84vw);
  padding: 24px 28px 27px;
  border: 1px solid rgba(63,111,74,.28);
  background: rgba(255,253,242,.78);
  box-shadow: 0 18px 42px rgba(16,37,28,.09), inset 0 0 25px rgba(247,241,227,.8);
  backdrop-filter: blur(7px);
}

.tray-night .plaque {
  color: var(--petal);
  border-color: rgba(215,242,232,.26);
  background: rgba(16,37,28,.55);
  box-shadow: 0 18px 55px rgba(0,0,0,.22), inset 0 0 30px rgba(215,242,232,.06);
}

.pin {
  position: absolute;
  top: 13px;
  right: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--petal), var(--pollen) 42%, #8c6a21 78%);
  box-shadow: 0 2px 3px rgba(48,51,46,.28);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--chlorophyll);
  font: .72rem var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tray-night .eyebrow { color: var(--glass); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: .94;
  color: var(--night);
}

.tray-night h2, .tray-night h3 { color: var(--petal); }
h1 { font-size: clamp(3.4rem, 8vw, 8.7rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.7rem, 6vw, 6rem); letter-spacing: -.035em; }
h3 { font-size: 2rem; }

.plaque p:not(.eyebrow) {
  margin: 18px 0 0;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  line-height: 1.85;
}

.seed-label { margin: 7vh 0 0 2vw; transform: rotate(-1.2deg); }
.root-label { margin: 4vh 0 0 auto; transform: rotate(1.4deg); }
.petal-label { margin: 0 0 0 4vw; transform: rotate(-.8deg); }
.notes-label { margin: 2vh auto 0 2vw; transform: rotate(1.1deg); }
.night-label { margin: 6vh 0 0 auto; transform: rotate(-1.1deg); }

.diagonal-stem {
  position: absolute;
  z-index: 2;
  width: 1px;
  height: 130vh;
  background: linear-gradient(var(--chlorophyll), transparent);
  transform-origin: center;
  opacity: .38;
}

.diagonal-stem::before,
.diagonal-stem::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 46px;
  border: 1px solid rgba(63,111,74,.28);
  border-radius: 100% 0 100% 0;
  background: rgba(215,242,232,.18);
}

.diagonal-stem::before { top: 22%; left: 0; transform: rotate(28deg); }
.diagonal-stem::after { top: 52%; right: 0; transform: rotate(206deg); }
.stem-one { left: 63%; top: -12vh; transform: rotate(28deg); }
.stem-two { left: 24%; top: -10vh; transform: rotate(-24deg); }
.stem-three { left: 67%; top: -8vh; transform: rotate(18deg); }

.seed-packet {
  position: absolute;
  z-index: 5;
  right: 10vw;
  top: 19vh;
  width: min(440px, 45vw);
  height: 560px;
  border: 1px solid rgba(48,51,46,.35);
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(214,167,54,.18) 48% 52%, transparent 53%),
    linear-gradient(45deg, rgba(255,253,242,.9), rgba(247,241,227,.84)),
    var(--petal);
  box-shadow: 0 28px 70px rgba(16,37,28,.13), inset 0 0 0 14px rgba(247,241,227,.55);
  transform: rotate(3deg);
}

.perforation {
  position: absolute;
  left: 0;
  right: 0;
  height: 13px;
  background-image: radial-gradient(circle, rgba(48,51,46,.32) 0 2px, transparent 2.5px);
  background-size: 18px 13px;
}
.perforation.top { top: 20px; }
.perforation.bottom { bottom: 20px; }

.packet-stamp {
  position: absolute;
  left: 34px;
  top: 55px;
  color: var(--night);
  font: 700 clamp(2.4rem, 5vw, 5rem)/.9 var(--serif);
  transform: rotate(-5deg);
}

.packet-label {
  position: absolute;
  left: 52px;
  bottom: 72px;
  width: 68%;
  padding: 18px;
  border: 1px solid rgba(63,111,74,.32);
  background: rgba(247,241,227,.78);
  font-family: var(--mono);
}

.packet-label span, .packet-label em { display: block; font-size: .72rem; letter-spacing: .12em; }
.packet-label strong { display: block; margin: 8px 0; font: 1.5rem var(--serif); }

.seam-glint {
  position: absolute;
  top: 0;
  left: -20%;
  width: 18%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(215,242,232,.95), transparent);
  animation: seamCut 4.8s ease-in-out infinite;
}

.mini-daisy,
.compiler-daisy,
.night-daisy { position: absolute; z-index: 7; }

.daisy-small {
  right: 18vw;
  bottom: 11vh;
  width: 120px;
  height: 120px;
  animation: unfoldSmall 5s ease-in-out infinite alternate;
}

.mini-daisy span,
.night-daisy span {
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 72px;
  margin: -68px 0 0 -14px;
  border-radius: 55% 55% 48% 48%;
  background: linear-gradient(var(--petal), rgba(233,167,181,.35));
  border: 1px solid rgba(63,111,74,.18);
  transform-origin: 50% 68px;
}
.mini-daisy span:nth-child(1), .night-daisy span:nth-child(1) { transform: rotate(0deg); }
.mini-daisy span:nth-child(2), .night-daisy span:nth-child(2) { transform: rotate(60deg); }
.mini-daisy span:nth-child(3), .night-daisy span:nth-child(3) { transform: rotate(120deg); }
.mini-daisy span:nth-child(4), .night-daisy span:nth-child(4) { transform: rotate(180deg); }
.mini-daisy span:nth-child(5), .night-daisy span:nth-child(5) { transform: rotate(240deg); }
.mini-daisy span:nth-child(6), .night-daisy span:nth-child(6) { transform: rotate(300deg); }
.mini-daisy i,
.night-daisy i {
  position: absolute;
  left: 50%; top: 50%;
  width: 36px; height: 36px;
  margin: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pollen), #9f7a25);
}

.root-console {
  position: absolute;
  left: 8vw;
  bottom: 13vh;
  z-index: 7;
  width: min(520px, 72vw);
  padding: 22px;
  border: 1px solid rgba(63,111,74,.28);
  background: rgba(16,37,28,.88);
  color: var(--glass);
  box-shadow: 0 24px 50px rgba(16,37,28,.22);
  font: .86rem/1.8 var(--mono);
}
.root-console p { margin: 0; }
.root-console b { color: var(--pollen); }

.root-system {
  position: absolute;
  z-index: 3;
  left: 27vw;
  top: 12vh;
  width: 64vw;
  height: 75vh;
  overflow: visible;
}

.root-path {
  fill: none;
  stroke: var(--chlorophyll);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: .68;
}
.root-path.hair { stroke-width: 1.4; opacity: .48; }
.tray.in-view .root-path { animation: drawRoot 3.2s ease forwards; }
.tray.in-view .root-path:nth-child(2) { animation-delay: .22s; }
.tray.in-view .root-path:nth-child(3) { animation-delay: .36s; }
.tray.in-view .root-path:nth-child(4) { animation-delay: .5s; }
.tray.in-view .root-path:nth-child(5) { animation-delay: .62s; }

.compiler-daisy {
  left: 50%;
  top: 50%;
  width: 430px;
  height: 430px;
  transform: translate(-44%, -42%) rotate(var(--tilt, 0deg));
  transition: transform .45s ease-out;
}

.petal {
  position: absolute;
  left: 50%; top: 50%;
  width: 82px;
  height: 210px;
  margin: -202px 0 0 -41px;
  border: 1px solid rgba(63,111,74,.22);
  border-radius: 54% 54% 43% 43%;
  transform-origin: 50% 202px;
  background:
    linear-gradient(90deg, transparent 49%, rgba(63,111,74,.18) 50%, transparent 51%),
    repeating-linear-gradient(82deg, transparent 0 21px, rgba(63,111,74,.08) 22px, transparent 24px),
    linear-gradient(180deg, rgba(255,253,242,.96), rgba(233,167,181,.35));
  box-shadow: 0 14px 28px rgba(16,37,28,.07);
  animation: petalBreath 5s ease-in-out infinite alternate;
}

.petal span {
  position: absolute;
  left: 50%;
  top: 22px;
  color: rgba(48,51,46,.62);
  font: .58rem var(--mono);
  transform: translateX(-50%) rotate(90deg);
  white-space: nowrap;
}

.p1 { transform: rotate(0deg) translateY(-9px); }
.p2 { transform: rotate(36deg) translateY(-10px); }
.p3 { transform: rotate(72deg) translateY(-8px); }
.p4 { transform: rotate(108deg) translateY(-12px); }
.p5 { transform: rotate(144deg) translateY(-9px); }
.p6 { transform: rotate(180deg) translateY(-13px); }
.p7 { transform: rotate(216deg) translateY(-8px); }
.p8 { transform: rotate(252deg) translateY(-12px); }
.p9 { transform: rotate(288deg) translateY(-10px); }
.p10 { transform: rotate(324deg) translateY(-14px); }
.daisy-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 106px; height: 106px;
  margin: -53px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f4dd79, var(--pollen) 64%, #8c6a21);
  color: var(--night);
  font: 1.5rem var(--mono);
  box-shadow: inset 0 -9px 17px rgba(48,51,46,.18), 0 10px 22px rgba(16,37,28,.16);
}

.pollen-field span {
  position: absolute;
  z-index: 9;
  color: var(--pollen);
  font: 1rem var(--mono);
  animation: drift 7s linear infinite;
}
.pollen-field span:nth-child(1) { left: 50%; top: 42%; animation-delay: 0s; }
.pollen-field span:nth-child(2) { left: 62%; top: 49%; animation-delay: .8s; }
.pollen-field span:nth-child(3) { left: 45%; top: 61%; animation-delay: 1.5s; }
.pollen-field span:nth-child(4) { left: 59%; top: 34%; animation-delay: 2.2s; }
.pollen-field span:nth-child(5) { left: 52%; top: 55%; animation-delay: 3s; }
.pollen-field span:nth-child(6) { left: 67%; top: 57%; animation-delay: 3.7s; }
.pollen-field span:nth-child(7) { left: 48%; top: 37%; animation-delay: 4.4s; }
.pollen-field span:nth-child(8) { left: 56%; top: 44%; animation-delay: 5.1s; }

.hand-note {
  position: absolute;
  z-index: 8;
  color: var(--chlorophyll);
  font: clamp(1rem, 1.7vw, 1.45rem)/1.2 var(--hand);
  transform: rotate(-6deg);
}
.note-seed { left: 12vw; bottom: 18vh; }
.note-root { right: 12vw; top: 22vh; }
.note-petal { right: 10vw; bottom: 15vh; }
.note-night { left: 10vw; bottom: 12vh; color: var(--glass); }

.note-stack {
  position: absolute;
  right: 9vw;
  top: 18vh;
  z-index: 7;
  width: min(590px, 55vw);
  height: 58vh;
}

.field-card {
  position: absolute;
  width: 330px;
  padding: 22px;
  border: 1px solid rgba(63,111,74,.28);
  background: rgba(255,253,242,.82);
  box-shadow: 0 18px 42px rgba(16,37,28,.1);
}
.field-card p { line-height: 1.6; }
.field-card code { color: var(--chlorophyll); font: .76rem var(--mono); }
.card-one { left: 0; top: 0; transform: rotate(-5deg); }
.card-two { right: 8%; top: 26%; transform: rotate(4deg); }
.card-three { left: 15%; bottom: 0; transform: rotate(-1deg); }

.dew-beads i {
  position: absolute;
  z-index: 10;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, var(--petal), rgba(215,242,232,.72) 42%, rgba(63,111,74,.12));
  box-shadow: 0 0 14px rgba(215,242,232,.7);
  transition: transform .25s ease;
}
.dew-beads i:hover { transform: scale(1.55) translateY(-4px); }
.dew-beads i:nth-child(1) { left: 42%; top: 29%; }
.dew-beads i:nth-child(2) { left: 75%; top: 34%; }
.dew-beads i:nth-child(3) { left: 58%; top: 61%; }
.dew-beads i:nth-child(4) { left: 70%; top: 72%; }
.dew-beads i:nth-child(5) { left: 32%; top: 70%; }

.moon-bloom {
  position: absolute;
  left: 18vw;
  top: 17vh;
  width: 490px;
  height: 490px;
  z-index: 7;
}
.moon-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,242,232,.22), transparent 68%);
  animation: moonPulse 6s ease-in-out infinite alternate;
}
.night-daisy {
  left: 50%; top: 50%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
}
.night-daisy span {
  width: 56px; height: 145px;
  margin: -137px 0 0 -28px;
  transform-origin: 50% 137px;
  background: linear-gradient(var(--petal), rgba(215,242,232,.32));
  box-shadow: 0 0 22px rgba(215,242,232,.16);
}
.night-daisy span:nth-child(2) { transform: rotate(45deg); }
.night-daisy span:nth-child(3) { transform: rotate(90deg); }
.night-daisy span:nth-child(4) { transform: rotate(135deg); }
.night-daisy span:nth-child(5) { transform: rotate(180deg); }
.night-daisy span:nth-child(6) { transform: rotate(225deg); }
.night-daisy span:nth-child(7) { transform: rotate(270deg); }
.night-daisy span:nth-child(8) { transform: rotate(315deg); }
.night-daisy i { width: 70px; height: 70px; margin: -35px; }
.hidden-commit {
  position: absolute;
  left: 24%;
  bottom: 3%;
  color: rgba(215,242,232,.72);
  font: .74rem var(--mono);
  letter-spacing: .08em;
}

@keyframes seamCut { 0%, 34% { transform: translateX(0); opacity: 0; } 45% { opacity: 1; } 72%, 100% { transform: translateX(760%); opacity: 0; } }
@keyframes unfoldSmall { from { transform: rotate(-10deg) scale(.72); opacity: .62; } to { transform: rotate(8deg) scale(1); opacity: 1; } }
@keyframes drawRoot { to { stroke-dashoffset: 0; } }
@keyframes petalBreath { from { filter: saturate(.92); } to { filter: saturate(1.12) drop-shadow(0 12px 15px rgba(233,167,181,.16)); } }
@keyframes drift { from { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; } 15% { opacity: .95; } to { transform: translate3d(38px,-150px,0) rotate(120deg); opacity: 0; } }
@keyframes moonPulse { from { transform: scale(.94); opacity: .55; } to { transform: scale(1.08); opacity: .9; } }

@media (max-width: 820px) {
  .cabinet-header { left: 12px; right: 12px; justify-content: space-between; }
  .cabinet-header p { display: none; }
  .floating-lens { width: 72vw; opacity: .72; }
  .tray { padding: 14vh 6vw; }
  .seed-packet, .root-console, .note-stack, .moon-bloom, .compiler-daisy { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 8vh auto 0; }
  .seed-packet { width: 82vw; height: 430px; }
  .compiler-daisy { width: 310px; height: 310px; transform: none; }
  .petal { width: 58px; height: 150px; margin: -145px 0 0 -29px; transform-origin: 50% 145px; }
  .daisy-core { width: 78px; height: 78px; margin: -39px; }
  .root-system { left: -6vw; width: 112vw; top: 22vh; opacity: .5; }
  .note-stack { width: 88vw; height: 540px; }
  .field-card { width: 260px; }
  .moon-bloom { width: 320px; height: 320px; }
  .hand-note { display: none; }
}