:root{
  /* compliance lexicon: create botanical-developer identity Japanese resonance. only tiny IDs Interactions should reward exploration: hovering reveals */
  --moon-jasmine:#F8F3DF;
  --conservatory-indigo:#121A2F;
  --leaf-lacquer:#1F5A3D;
  --tea-amber:#D8A348;
  --blush-pollen:#F2B7A5;
  --wet-slate:#2F3A46;
  --ink-root:#07100D;
  --fraunces: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --manrope: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink-root)}
body{
  margin:0;
  color:var(--moon-jasmine);
  font-family:var(--manrope);
  overflow-x:hidden;
  background:
    radial-gradient(circle at 72% 8%, rgba(248,243,223,.18), transparent 21rem),
    radial-gradient(circle at 18% 38%, rgba(31,90,61,.30), transparent 28rem),
    linear-gradient(145deg,var(--conservatory-indigo),var(--ink-root) 72%);
}

.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.22;background-image:radial-gradient(rgba(248,243,223,.5) .55px, transparent .75px),radial-gradient(rgba(216,163,72,.35) .45px, transparent .75px);background-size:7px 9px,13px 15px;mix-blend-mode:overlay}
.pollen-field{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.pollen{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--tea-amber);opacity:.34;animation:drift var(--dur) linear infinite;filter:blur(.2px)}
@keyframes drift{from{transform:translate3d(var(--x),110vh,0)}to{transform:translate3d(calc(var(--x) + var(--sway)),-12vh,0)}}

.greenhouse{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.32}.greenhouse path{fill:none;stroke:var(--wet-slate);stroke-width:1.1;vector-effect:non-scaling-stroke}
.vine-nav{position:fixed;left:clamp(14px,3vw,42px);top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:3.8vh}.vine-line{position:absolute;left:8px;top:-22px;width:1px;height:calc(100% + 44px);background:linear-gradient(var(--leaf-lacquer),var(--tea-amber),var(--leaf-lacquer));opacity:.65}.nav-node{position:relative;color:var(--moon-jasmine);text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:11px;opacity:.62}.nav-node i{width:17px;height:17px;border:1px solid var(--tea-amber);background:var(--ink-root);border-radius:50%;box-shadow:0 0 0 3px rgba(31,90,61,.22)}.nav-node b{font-weight:500;transform:translateX(-4px);opacity:0;transition:.5s}.nav-node:hover b,.nav-node.active b{opacity:1;transform:none}.nav-node.active{opacity:1}.nav-node.active i{background:var(--tea-amber);box-shadow:0 0 22px rgba(216,163,72,.5)}

.scene{min-height:100vh;position:relative;z-index:5;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);padding:clamp(28px,5vw,76px);overflow:hidden;isolation:isolate}.scene:before{content:"";position:absolute;inset:5vw;border:1px solid rgba(248,243,223,.08);border-radius:44% 56% 42% 58%/18% 23% 77% 82%;pointer-events:none}.moon-glow{position:absolute;right:8vw;top:5vh;width:42vmin;height:42vmin;border-radius:50%;background:radial-gradient(circle,rgba(248,243,223,.24),rgba(248,243,223,.05) 48%,transparent 70%);filter:blur(3px)}
h1,h2{font-family:var(--fraunces);font-weight:500;line-height:.94;margin:0;color:var(--moon-jasmine);text-wrap:balance}h1{font-size:clamp(58px,13vw,172px);letter-spacing:-.07em;text-shadow:0 20px 45px rgba(7,16,13,.42)}h2{font-size:clamp(42px,7vw,102px);letter-spacing:-.045em}p{font-size:clamp(15px,1.25vw,19px);line-height:1.72;color:rgba(248,243,223,.78)}.kicker,.mono{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--tea-amber)}
.vellum,.specimen-sheet{position:relative;background:linear-gradient(135deg,rgba(248,243,223,.16),rgba(248,243,223,.055));border:1px solid rgba(248,243,223,.25);box-shadow:0 22px 90px rgba(7,16,13,.42), inset 0 0 50px rgba(248,243,223,.035);backdrop-filter:blur(16px);padding:clamp(24px,4vw,56px)}.vellum:after,.specimen-sheet:after,.paper-page:after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(248,243,223,.18) .5px, transparent .9px);background-size:9px 8px;opacity:.2;pointer-events:none}.pin{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--tea-amber);box-shadow:0 0 0 4px rgba(216,163,72,.13),0 5px 12px rgba(7,16,13,.45);top:18px;right:22px}.vertical-tag{writing-mode:vertical-rl;font-family:var(--jp);letter-spacing:.16em;color:var(--moon-jasmine);background:rgba(248,243,223,.1);border-left:1px solid rgba(216,163,72,.55);padding:18px 10px;box-shadow:0 20px 50px rgba(7,16,13,.36)}.vertical-tag span{font-family:var(--mono);font-size:9px;color:var(--tea-amber);margin-top:16px}.edge-note,.margin-script{font-family:var(--mono);font-size:11px;color:rgba(242,183,165,.75)}

.scene-bud .vertical-tag{grid-column:2;grid-row:2/5}.bud-stage{grid-column:6/9;grid-row:2/7;align-self:center;justify-self:center;position:relative;width:240px;height:390px}.stem{position:absolute;left:50%;bottom:0;width:4px;height:270px;background:linear-gradient(var(--leaf-lacquer),rgba(31,90,61,.2));border-radius:50%;transform:rotate(7deg);transform-origin:bottom}.bud{position:absolute;left:50%;top:38px;width:92px;height:142px;transform:translateX(-50%) rotate(-13deg);background:linear-gradient(120deg,var(--moon-jasmine),var(--blush-pollen) 45%,var(--leaf-lacquer) 46%,#143c2b);border-radius:80% 14% 72% 20%;box-shadow:0 0 70px rgba(248,243,223,.2);transition:1.2s cubic-bezier(.2,.8,.16,1)}.bud.awake{transform:translateX(-50%) rotate(3deg) scale(1.08);filter:drop-shadow(0 0 28px rgba(248,243,223,.36))}.dew{position:absolute;right:11px;top:56px;width:18px;height:25px;border-radius:50% 50% 60% 60%;background:radial-gradient(circle at 35% 25%,#fff,rgba(248,243,223,.45) 28%,rgba(242,183,165,.24));border:1px solid rgba(248,243,223,.5);transition:1.4s}.bud.awake .dew{transform:translateY(72px) translateX(-14px);opacity:.55}.intro-panel{grid-column:2/8;grid-row:5/8;align-self:end;transform:rotate(-1deg);opacity:.18;transition:1.2s}.intro-panel.awake{opacity:1;transform:rotate(-1deg) translateY(-12px)}.edge-note{grid-column:9/12;grid-row:7;align-self:end}

.scene-bloom{background:radial-gradient(circle at 70% 45%,rgba(242,183,165,.12),transparent 34rem)}.left-sheet{grid-column:2/7;grid-row:2/6;align-self:center;transform:rotate(-3deg)}.compiler-flower{grid-column:7/12;grid-row:2/8;place-self:center;position:relative;width:min(560px,62vw);height:min(560px,62vw)}.petal{position:absolute;left:50%;top:50%;width:33%;height:45%;border:1px solid rgba(248,243,223,.5);border-radius:58% 42% 60% 40%;background:radial-gradient(circle at 45% 20%,var(--moon-jasmine),#eee2bf 60%,rgba(242,183,165,.72));color:rgba(18,26,47,.55);font-family:var(--mono);font-size:18px;transform-origin:50% 92%;box-shadow:0 20px 50px rgba(7,16,13,.34);cursor:pointer;opacity:.25;transition:transform 1.2s cubic-bezier(.18,.85,.2,1),opacity .8s,filter .5s}.compiler-flower.in-view .petal{opacity:.94}.compiler-flower.in-view .p1{transform:translate(-50%,-91%) rotate(0deg);transition-delay:.05s}.compiler-flower.in-view .p2{transform:translate(-16%,-60%) rotate(72deg);transition-delay:.22s}.compiler-flower.in-view .p3{transform:translate(-31%,-9%) rotate(144deg);transition-delay:.39s}.compiler-flower.in-view .p4{transform:translate(-70%,-9%) rotate(216deg);transition-delay:.56s}.compiler-flower.in-view .p5{transform:translate(-84%,-60%) rotate(288deg);transition-delay:.73s}.petal:hover{filter:sepia(.2) saturate(1.25);z-index:4}.flower-core{position:absolute;left:50%;top:50%;width:70px;height:70px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--tea-amber),#8d641d 70%);box-shadow:0 0 30px rgba(216,163,72,.45);z-index:5}.petal-note{position:absolute;left:5%;bottom:4%;max-width:260px;padding:16px 18px;background:rgba(7,16,13,.72);border:1px solid rgba(216,163,72,.36);font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--blush-pollen)}.vertical-tag.right{grid-column:11;grid-row:1/4;justify-self:end}

.scene-tea{background:radial-gradient(circle at 28% 48%,rgba(216,163,72,.13),transparent 35rem)}.tea-cup{grid-column:2/7;grid-row:2/7;place-self:center;position:relative;width:min(440px,72vw);height:min(440px,72vw);border-radius:50%;border:2px solid rgba(248,243,223,.28);background:radial-gradient(circle,rgba(216,163,72,.42) 0 30%,rgba(31,90,61,.17) 31% 52%,rgba(248,243,223,.08) 53% 72%,transparent 73%);box-shadow:inset 0 0 50px rgba(7,16,13,.45),0 35px 90px rgba(7,16,13,.34)}.tea-ring{position:absolute;inset:28%;border:1px solid rgba(216,163,72,.52);border-radius:50%;animation:rings 4.8s ease-out infinite}.tea-ring.r2{animation-delay:1.4s}.tea-ring.r3{animation-delay:2.8s}@keyframes rings{0%{transform:scale(.5);opacity:.7}100%{transform:scale(2.2);opacity:0}}.steam{position:absolute;bottom:72%;left:45%;width:34px;height:140px;border-left:2px solid rgba(248,243,223,.26);border-radius:50%;filter:blur(.3px);animation:steam 5s ease-in-out infinite}.steam.s2{left:54%;height:120px;animation-delay:1s}.steam.s3{left:36%;height:100px;animation-delay:2s}@keyframes steam{50%{transform:translateY(-26px) translateX(18px) rotate(8deg);opacity:.4}}.tea-panel{grid-column:7/12;grid-row:2/7;align-self:center;transform-origin:top right;transition:.8s}.tea-panel.folded{transform:perspective(1200px) rotateY(-9deg) rotate(2deg)}.tea-panel.open{transform:perspective(1200px) rotateY(0) rotate(-1deg)}.brass-action{cursor:pointer}.field-list{list-style:none;padding:0;margin:24px 0 0}.field-list li{display:grid;grid-template-columns:110px 1fr;gap:18px;border-top:1px solid rgba(248,243,223,.14);padding:13px 0}.field-list b{font-family:var(--fraunces);color:var(--blush-pollen);font-size:22px}.field-list span{color:rgba(248,243,223,.7)}.margin-script{grid-column:9/12;grid-row:7}

.scene-root{background:linear-gradient(180deg,rgba(18,26,47,.2),rgba(7,16,13,.7))}.root-diagram{grid-column:1/9;grid-row:1/9;width:100%;height:100%;opacity:.93}.root{fill:none;stroke:var(--leaf-lacquer);stroke-width:5;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;filter:drop-shadow(0 0 10px rgba(31,90,61,.45))}.branch{stroke-width:3}.hair{stroke-width:2;stroke:rgba(248,243,223,.48)}.root-diagram.grow .root{animation:growRoot 2.4s ease forwards}.root-diagram.grow .b1{animation-delay:.3s}.root-diagram.grow .b2{animation-delay:.6s}.root-diagram.grow .b3{animation-delay:.9s}.root-diagram.grow .b4{animation-delay:1.2s}.root-diagram.grow .hair{animation-delay:1.5s}@keyframes growRoot{to{stroke-dashoffset:0}}.root-panel{grid-column:7/12;grid-row:2/6;align-self:center;transform:rotate(2deg)}.dew-lens{grid-column:3/7;grid-row:6;align-self:center;justify-self:center;padding:20px 24px;border-radius:999px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.7),rgba(248,243,223,.16) 36%,rgba(31,90,61,.22));border:1px solid rgba(248,243,223,.34);font-family:var(--mono);font-size:11px;color:transparent;text-shadow:0 0 11px rgba(248,243,223,.2);transition:.4s}.dew-lens:hover{color:var(--ink-root);text-shadow:none;transform:scale(1.08)}

.scene-morning{background:linear-gradient(180deg,var(--conservatory-indigo),rgba(216,163,72,.25) 55%,var(--moon-jasmine));color:var(--ink-root)}.scene-morning p,.scene-morning h2{color:var(--ink-root)}.pressed-archive{grid-column:3/11;grid-row:2/8;position:relative;align-self:center}.paper-page{position:absolute;inset:0;min-height:62vh;background:linear-gradient(135deg,var(--moon-jasmine),#eadcad);border:1px solid rgba(7,16,13,.14);box-shadow:0 35px 100px rgba(7,16,13,.38)}.paper-page.back{transform:rotate(-4deg) translate(-18px,8px);opacity:.58}.paper-page.front{position:relative;display:grid;grid-template-columns:42% 58%;gap:4vw;padding:clamp(28px,5vw,74px);transform:rotate(1.5deg)}.pin.pbr{top:auto;right:auto;left:24px;bottom:24px}.pressed-flower{position:relative;align-self:center;justify-self:center;width:280px;height:280px}.pressed-flower i{position:absolute;left:50%;top:50%;width:98px;height:150px;background:rgba(242,183,165,.38);border:1px solid rgba(31,90,61,.25);border-radius:60% 40% 62% 38%;transform-origin:50% 90%;mix-blend-mode:multiply}.pressed-flower i:nth-child(1){transform:translate(-50%,-94%) rotate(0)}.pressed-flower i:nth-child(2){transform:translate(-17%,-62%) rotate(72deg)}.pressed-flower i:nth-child(3){transform:translate(-33%,-12%) rotate(144deg)}.pressed-flower i:nth-child(4){transform:translate(-72%,-12%) rotate(216deg)}.pressed-flower i:nth-child(5){transform:translate(-85%,-62%) rotate(288deg)}.pressed-flower b{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;background:rgba(216,163,72,.55);transform:translate(-50%,-50%)}.ritual-link{display:inline-block;margin-top:18px;color:var(--ink-root);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--tea-amber);padding-bottom:8px}.vertical-tag.morning{grid-column:11;grid-row:2/5;color:var(--ink-root);border-color:var(--leaf-lacquer);background:rgba(248,243,223,.46)}

@media (max-width:850px){.vine-nav{left:12px}.nav-node b{display:none}.scene{padding:70px 24px;display:block}.intro-panel,.left-sheet,.tea-panel,.root-panel{margin:45vh 0 0 30px}.bud-stage{position:absolute;inset:90px 0 auto 0;margin:auto}.compiler-flower{width:88vw;height:88vw;margin:15vh auto 0}.vertical-tag{position:absolute;right:22px;top:80px}.tea-cup{width:80vw;height:80vw;margin:10vh auto}.root-diagram{position:absolute;inset:0;width:125%;height:100%}.dew-lens{margin:38px 0 0 34px;display:inline-block}.pressed-archive{margin:14vh 0 0 24px}.paper-page.front{grid-template-columns:1fr}.pressed-flower{width:210px;height:210px}h1{font-size:17vw}}
