:root {
  /* Design typography note retained for compliance: Cormorant Garamond, Fraunces, and Inter are requested design faces; use Inter sparingly for small functional UI labels. Interactions should feel tactile and ritualistic: hovering over a card reveals a hidden brush annotation. */
  --deep-moss: #172A21;
  --temple-pine: #244F3A;
  --celadon: #9DBFA3;
  --pale-jade: #DDE8D1;
  --misted-aqua: #B9D8CF;
  --bruised-teal: #3F6F68;
  --black-ink: #11110E;
  --oxblood: #7A1F2B;
  --paper: #edf3e5;
  --display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --eccentric: Fraunces, Lora, Georgia, serif;
  --ui: Inter, "Space Grotesk", "Space Mono", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--black-ink);
  background: var(--deep-moss);
  font-family: var(--ui);
}

button { font: inherit; color: inherit; }

.zen-dashboard {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(185, 216, 207, .65), transparent 34%),
    radial-gradient(circle at 62% 54%, rgba(157, 191, 163, .34), transparent 30%),
    linear-gradient(120deg, var(--pale-jade), #eef4e7 47%, var(--misted-aqua));
  transition: background 900ms ease, color 900ms ease;
}

.zen-dashboard.dark-moss {
  color: var(--pale-jade);
  background:
    radial-gradient(circle at 20% 18%, rgba(63, 111, 104, .42), transparent 35%),
    radial-gradient(circle at 70% 62%, rgba(122, 31, 43, .18), transparent 26%),
    linear-gradient(120deg, var(--deep-moss), #102017 56%, var(--temple-pine));
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  z-index: 1;
  background-image:
    linear-gradient(90deg, rgba(17,17,14,.035) 1px, transparent 1px),
    linear-gradient(rgba(17,17,14,.03) 1px, transparent 1px);
  background-size: 27px 31px;
  mix-blend-mode: multiply;
}

.watercolor-wash {
  position: fixed;
  border-radius: 44% 56% 61% 39% / 54% 35% 65% 46%;
  filter: blur(16px);
  opacity: .48;
  pointer-events: none;
  z-index: 0;
  animation: pigmentDrift 16s ease-in-out infinite alternate;
}

.wash-one { width: 44vw; height: 44vw; left: -9vw; top: 4vh; background: rgba(157, 191, 163, .7); }
.wash-two { width: 34vw; height: 31vw; right: 8vw; bottom: 5vh; background: rgba(185, 216, 207, .62); animation-delay: -7s; }

.pressed-flower {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  font-family: var(--display);
  color: rgba(36, 79, 58, .16);
  filter: blur(.2px);
  mix-blend-mode: multiply;
  animation: flowerDrift 18s ease-in-out infinite alternate;
}

.flower-a { left: 6vw; bottom: 15vh; font-size: 130px; transform: rotate(-19deg); }
.flower-b { right: 17vw; top: 15vh; font-size: 90px; color: rgba(122, 31, 43, .13); animation-delay: -8s; }
.flower-c { left: 44vw; top: 8vh; font-size: 58px; color: rgba(17, 17, 14, .12); animation-delay: -4s; }

.ink-slash {
  position: absolute;
  background: var(--black-ink);
  transform: rotate(-8deg);
  box-shadow: 0 8px 24px rgba(17,17,14,.22);
}

.slash-top { width: 22vw; height: 13px; top: 9vh; right: 16vw; z-index: 3; opacity: .9; }

.nav-tablets {
  position: fixed;
  right: clamp(18px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 12px;
}

.nav-tablet {
  width: 142px;
  padding: 13px 12px;
  border: 1px solid rgba(36, 79, 58, .35);
  background: rgba(221, 232, 209, .72);
  backdrop-filter: blur(10px);
  font-family: var(--display);
  font-size: 19px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px 22px 5px 18px;
  box-shadow: 0 12px 34px rgba(23,42,33,.14);
  transition: transform 240ms ease, background 240ms ease, border-color 240ms ease;
}

.nav-tablet span { display: inline-block; margin-right: 10px; color: var(--oxblood); font-family: var(--eccentric); }
.nav-tablet:hover, .nav-tablet.active { transform: translateX(-10px) rotate(-1deg); background: var(--black-ink); color: var(--pale-jade); border-color: var(--oxblood); }

.clearing {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: clamp(42px, 7vw, 92px) clamp(190px, 17vw, 250px) clamp(42px, 7vw, 92px) clamp(28px, 6vw, 86px);
  display: grid;
  align-items: center;
}

.hero-clearing { grid-template-columns: minmax(320px, 1.05fr) minmax(340px, .95fr); gap: 34px; }

.kicker, .coordinate, .panel-topline, .petal-badge {
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  color: var(--temple-pine);
}

.zen-dashboard.dark-moss .kicker, .zen-dashboard.dark-moss .coordinate, .zen-dashboard.dark-moss .panel-topline { color: var(--misted-aqua); }

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 16px;
  font-family: var(--display);
  font-size: clamp(76px, 14vw, 190px);
  line-height: .78;
  font-weight: 600;
  letter-spacing: -.065em;
  color: var(--deep-moss);
  text-shadow: 0 22px 55px rgba(36,79,58,.12);
}

.zen-dashboard.dark-moss h1 { color: var(--pale-jade); }

.haiku-line {
  max-width: 520px;
  font-family: var(--eccentric);
  color: var(--temple-pine);
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.04;
}

.zen-dashboard.dark-moss .haiku-line { color: var(--celadon); }

.seal-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--oxblood);
  color: var(--pale-jade);
  font-family: var(--eccentric);
  font-size: 25px;
  transform: rotate(7deg);
  border-radius: 8px 3px 10px 4px;
}

.stone-cluster { position: relative; min-height: 620px; }

.botanical-panel {
  position: relative;
  border: 1px solid rgba(36, 79, 58, .24);
  background:
    radial-gradient(circle at 8% 0%, rgba(185, 216, 207, .45), transparent 36%),
    rgba(221, 232, 209, .74);
  box-shadow: 0 24px 60px rgba(23,42,33,.16);
  backdrop-filter: blur(12px);
  border-radius: 24px 9px 34px 12px;
  padding: 24px;
  overflow: hidden;
}

.botanical-panel::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -18%;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(36,79,58,.18);
  border-radius: 50%;
}

.botanical-panel::after {
  content: attr(data-annotation);
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(122,31,43,.35);
  font-family: var(--eccentric);
  font-size: 15px;
  color: var(--oxblood);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.botanical-panel:hover::after { opacity: 1; transform: translateY(0); }

.stone { position: absolute; animation: bounceEnter 900ms cubic-bezier(.2, 1.45, .42, 1) both; }
.panel-breath { width: 285px; right: 20%; top: 1%; animation-delay: 120ms; }
.panel-vow { width: 335px; right: 1%; top: 36%; transform: rotate(2deg); animation-delay: 280ms; }
.panel-signal { width: 245px; left: 2%; bottom: 3%; animation-delay: 440ms; }

.dark-stone { background: linear-gradient(145deg, var(--black-ink), var(--deep-moss)); color: var(--pale-jade); border-color: rgba(185,216,207,.18); }
.dark-stone .panel-topline { color: var(--misted-aqua); }

.panel-topline { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-topline em { font-style: normal; color: var(--oxblood); }

.moss-ring {
  --ring: 60;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin: 4px auto 18px;
  background: conic-gradient(var(--temple-pine) calc(var(--ring) * 1%), rgba(157,191,163,.32) 0);
  position: relative;
}

.moss-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--pale-jade); box-shadow: inset 0 0 25px rgba(63,111,104,.25); }
.zen-dashboard.dark-moss .moss-ring::before { background: var(--deep-moss); }
.moss-ring span { position: relative; font-family: var(--display); font-size: 38px; color: var(--oxblood); }

.panel-vow h2, .section-heading h2, .rebel-note h2, .halo-field h2 {
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 76px);
  line-height: .9;
  letter-spacing: -.035em;
}

.bamboo-bars { display: flex; align-items: end; gap: 10px; height: 90px; }
.bamboo-bars i { width: 11px; background: var(--temple-pine); border-radius: 20px; transform: rotate(5deg); }
.bamboo-bars i:nth-child(1){ height:40%; }.bamboo-bars i:nth-child(2){ height:78%; }.bamboo-bars i:nth-child(3){ height:58%; }.bamboo-bars i:nth-child(4){ height:92%; background: var(--oxblood); }
.signal-glyph { font-family: var(--display); font-size: 118px; line-height: .7; color: var(--misted-aqua); }

.diagnostics-clearing, .manifesto-clearing, .stillness-clearing { align-content: center; gap: 32px; }
.section-heading { max-width: 720px; }
.thorn-axis { position: absolute; inset: 20vh 14vw auto 5vw; width: 66vw; height: 34vh; overflow: visible; opacity: .78; }
.vine-path { fill: none; stroke: var(--temple-pine); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1040; stroke-dashoffset: 1040; animation: drawVine 2600ms ease forwards; }
.thorn-ticks path { fill: none; stroke: var(--oxblood); stroke-width: 4; stroke-linecap: round; }

.diagnostic-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; max-width: 940px; align-items: end; }
.diag-card { min-height: 285px; animation: bounceEnter 850ms cubic-bezier(.2, 1.45, .42, 1) both; }
.diag-card:nth-child(2) { animation-delay: 160ms; }
.diag-card:nth-child(3) { animation-delay: 320ms; }
.tilted { transform: rotate(-3deg); }
.petal-badge { display: inline-block; padding: 9px 18px; margin-bottom: 24px; border-radius: 60% 40% 54% 46% / 44% 66% 34% 56%; background: var(--misted-aqua); transition: transform 220ms ease, background 220ms ease; }
.petal-badge.oxblood { background: var(--oxblood); color: var(--pale-jade); }
.diag-card:hover .petal-badge { transform: scale(1.12) rotate(-4deg); }
.diag-card h3 { font-family: var(--eccentric); font-size: 31px; }
.thorn-chart { height: 120px; display: flex; align-items: end; gap: 14px; border-bottom: 2px solid var(--black-ink); }
.thorn-chart span { width: 18px; background: var(--temple-pine); border-radius: 20px 20px 0 0; position: relative; }
.thorn-chart span::after { content:""; position:absolute; top:-8px; left:4px; width:18px; height:2px; background:var(--oxblood); transform:rotate(-34deg); }
.large-metric { font-family: var(--display); font-size: 94px; line-height: .8; color: var(--temple-pine); }

.manifesto-clearing { grid-template-columns: 1fr 320px; }
.manifesto-stack { display: grid; gap: 28px; max-width: 760px; }
.rebel-note { min-height: 255px; animation: bounceEnter 900ms cubic-bezier(.2, 1.45, .42, 1) both; }
.offset-note { margin-left: 12%; transform: rotate(1.5deg); animation-delay: 170ms; }
.note-slash { width: 48%; height: 17px; top: 34px; right: -30px; }
.control-altar { align-self: center; min-height: 330px; background: rgba(17,17,14,.88); color: var(--pale-jade); border-color: rgba(122,31,43,.6); }
.control-altar .coordinate { color: var(--misted-aqua); }
.petal-toggle { margin: 34px 0 28px; width: 190px; height: 88px; border: 0; cursor: pointer; background: var(--celadon); border-radius: 65% 35% 52% 48% / 46% 62% 38% 54%; position: relative; box-shadow: inset 0 0 0 2px rgba(221,232,209,.45), 0 16px 34px rgba(0,0,0,.25); transition: transform 240ms ease, background 240ms ease; }
.petal-toggle span { position: absolute; width: 54px; height: 54px; border-radius: 50%; left: 18px; top: 17px; background: var(--pale-jade); transition: transform 280ms cubic-bezier(.2, 1.45, .42, 1), background 240ms ease; }
.petal-toggle b { position: relative; margin-left: 40px; font-family: var(--eccentric); }
.petal-toggle:hover { transform: scale(1.05) rotate(-2deg); }
.dark-moss .petal-toggle { background: var(--oxblood); }
.dark-moss .petal-toggle span { transform: translateX(96px); background: var(--black-ink); }

.stillness-clearing { place-items: center; text-align: center; padding-right: clamp(28px, 6vw, 86px); }
.halo-field { max-width: 720px; position: relative; }
.halo-field::before { content:""; position:absolute; left:50%; top:50%; width: min(70vw, 620px); height: min(70vw, 620px); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(185,216,207,.52), transparent 62%); z-index:-1; animation: haloPulse 6s ease-in-out infinite; }
.final-ring { width: 170px; height: 170px; margin-bottom: 34px; }
.final-ring span { font-size: 44px; }
.glyph-row { display: flex; justify-content: center; gap: 34px; margin-top: 34px; color: var(--oxblood); font-family: var(--display); font-size: 46px; }

.is-rearranging .botanical-panel { animation: smallRebound 520ms cubic-bezier(.2, 1.45, .42, 1); }

@keyframes bounceEnter {
  0% { opacity: 0; transform: translateY(70px) scale(.9) rotate(-4deg); }
  62% { opacity: 1; transform: translateY(-13px) scale(1.03) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes smallRebound {
  0% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(-16px) rotate(-1deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes pigmentDrift { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(34px, -24px, 0) rotate(10deg); } }
@keyframes flowerDrift { from { margin-top: 0; margin-left: 0; } to { margin-top: 18px; margin-left: -14px; } }
@keyframes drawVine { to { stroke-dashoffset: 0; } }
@keyframes haloPulse { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .68; } }

@media (max-width: 980px) {
  .clearing { padding-right: 28px; }
  .nav-tablets { right: 12px; top: auto; bottom: 14px; transform: none; grid-template-columns: repeat(4, 1fr); left: 12px; }
  .nav-tablet { width: auto; font-size: 15px; padding: 10px; }
  .hero-clearing, .manifesto-clearing { grid-template-columns: 1fr; }
  .stone-cluster { min-height: 760px; }
  .diagnostic-grid { grid-template-columns: 1fr; }
  .thorn-axis { display: none; }
}

@media (max-width: 620px) {
  .panel-breath, .panel-vow, .panel-signal { position: relative; width: auto; inset: auto; margin-bottom: 18px; }
  .stone-cluster { min-height: 0; }
  .nav-tablet span { display: none; }
}