:root {
  /* compliance tokens: `a6c.quest` IBM Plex Mono Noto Serif JP Azeret Mono Mon Mono Monoo Monooo Mono* Mono** Interactions should be minimal and tactile. Hovering a panel should not lift dramatically */
  --cream: #F8F0DE;
  --clay: #EFE2C8;
  --sage: #C9D8B6;
  --petal: #E9B9AE;
  --blue: #A7BFD1;
  --charcoal: #4E4A43;
  --gold: #D8C7A4;
  --mono: "IBM Plex Mono", "Azeret Mono", "Space Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Lora, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--cream); color: var(--charcoal); }

body { font-family: var(--mono); overflow-x: hidden; }

.ceramic-field {
  position: relative;
  min-height: 100vh;
  padding: clamp(22px, 4vw, 58px);
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(233, 185, 174, .25), transparent 28%),
    radial-gradient(circle at 78% 70%, rgba(167, 191, 209, .23), transparent 32%),
    radial-gradient(circle at 48% 44%, rgba(201, 216, 182, .18), transparent 30%),
    linear-gradient(135deg, #F8F0DE 0%, #EFE2C8 100%);
}

.grain-layer {
  position: absolute;
  inset: 0;
  opacity: .38;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(78,74,67,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 61%, rgba(216,199,164,.16) 0 1.5px, transparent 1.5px),
    linear-gradient(92deg, transparent 0 49%, rgba(255,255,255,.18) 50%, transparent 51%);
  background-size: 29px 31px, 43px 47px, 137px 100%;
}

.botanical-map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .66; }
.root-thread, .ink-ring { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 7 12; }
.pressed-leaf, .six-petal-seal ellipse, .six-petal-seal circle { fill: var(--sage); opacity: .18; stroke: var(--sage); stroke-width: 1; }
.ink-ring { stroke: var(--petal); stroke-width: 1; stroke-dasharray: 120 18 16 12; opacity: .5; }

.tableau-shell { position: relative; z-index: 2; min-height: calc(100vh - clamp(44px, 8vw, 116px)); display: grid; grid-template-rows: auto 1fr auto; gap: clamp(18px, 3vw, 34px); }

.quest-header { display: flex; justify-content: space-between; align-items: flex-start; width: min(1040px, 100%); margin-left: clamp(8px, 7vw, 96px); padding: 0 0 13px; }
.imperfect-rule { border-bottom: 1px solid rgba(216, 199, 164, .78); box-shadow: 0 1px 0 rgba(248,240,222,.9); }
.twig-prompt, .coordinate, .small-annotation, .terminal-strip, .season-label { letter-spacing: .08em; text-transform: lowercase; font-size: 11px; }
.twig-prompt { margin: 0 0 14px; color: rgba(78,74,67,.58); }
.wordmark { margin: 0; font: 500 clamp(34px, 6vw, 78px)/.9 var(--mono); letter-spacing: -.07em; }
.wordmark-line { width: min(360px, 56vw); margin-top: 15px; }
.season-label { margin: 5px 5vw 0 20px; writing-mode: vertical-rl; line-height: 1.8; color: rgba(78,74,67,.62); }

.marginalia {
  position: absolute;
  left: clamp(16px, 3vw, 42px);
  top: 33%;
  display: grid;
  gap: 7px;
  color: rgba(78,74,67,.46);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: lowercase;
  transform: rotate(-90deg) translateX(-20%);
  transform-origin: left top;
}

.marginalia em { font-family: var(--serif); font-style: normal; letter-spacing: .06em; color: rgba(78,74,67,.55); }

.quest-dashboard { position: relative; min-height: 590px; width: min(1120px, 100%); margin: 0 auto; }
.quest-tile {
  position: absolute;
  padding: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.38), transparent 38%),
    linear-gradient(145deg, rgba(239,226,200,.88), rgba(248,240,222,.72));
  border: 1px solid rgba(216, 199, 164, .88);
  color: var(--charcoal);
  box-shadow: 11px 16px 34px rgba(78,74,67,.06), -4px -4px 24px rgba(255,255,255,.32) inset;
  opacity: 0;
  transform: translateY(13px) rotate(var(--tilt, 0deg));
  animation: inkSettle .95s ease forwards;
  transition: border-color .7s ease, background .7s ease, filter .7s ease;
}
.quest-tile::before { content: attr(data-symbol); position: absolute; right: 12px; bottom: 8px; color: rgba(78,74,67,.2); font-size: 22px; }
.quest-tile::after { content: ""; position: absolute; inset: -1px; pointer-events: none; border: 1px solid transparent; border-radius: 1px 9px 2px 6px; clip-path: polygon(0 0, 96% 0, 100% 8%, 100% 100%, 6% 100%, 0 91%); }
.quest-tile:hover { border-color: rgba(233,185,174,.95); filter: saturate(1.04); }
.quest-tile:hover .drawn-underline::after { transform: scaleX(1); }
.quest-tile:hover .tile-vein { opacity: .34; transform: translateY(0); }

.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.coordinate { color: rgba(78,74,67,.68); }
.petal-status { width: 9px; height: 9px; border-radius: 60% 42% 58% 40%; background: var(--sage); box-shadow: 0 0 0 4px rgba(201,216,182,.18); transition: transform .7s ease; }
.petal-status.active, .petal-status.peach { background: var(--petal); box-shadow: 0 0 0 4px rgba(233,185,174,.16); }
.petal-status.blue { background: var(--blue); box-shadow: 0 0 0 4px rgba(167,191,209,.16); }
.quest-tile:hover .petal-status { transform: translate(3px, -2px) rotate(18deg); }

.quest-tile h2 { margin: 0; max-width: 310px; font: 500 clamp(17px, 2.1vw, 24px)/1.25 var(--mono); letter-spacing: -.045em; text-transform: lowercase; }
.quest-tile p { margin: 14px 0 0; font-size: 12px; line-height: 1.65; color: rgba(78,74,67,.65); }
.serif-note { font-family: var(--serif); letter-spacing: .04em; }
.drawn-underline { display: block; position: relative; height: 10px; margin-top: 11px; overflow: hidden; }
.drawn-underline::before { content: ""; position: absolute; left: 2%; top: 6px; width: 96%; height: 1px; background: rgba(216,199,164,.58); transform: skewX(-12deg); }
.drawn-underline::after { content: ""; position: absolute; left: 0; top: 4px; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--petal) 8%, var(--petal) 42%, rgba(233,185,174,.7) 64%, var(--petal) 82%, transparent); border-radius: 48% 40% 56% 38%; transform: scaleX(.34) translateY(.5px); transform-origin: left; transition: transform 1.1s cubic-bezier(.2,.7,.1,1); }
.wordmark-line::after { animation: lineWake 2.2s .5s ease forwards; transform: scaleX(.08); }
.long { width: 88%; }
.tile-vein { position: absolute; inset: 22px 20px auto auto; width: 92px; height: 72px; opacity: 0; transform: translateY(5px); transition: opacity .9s ease, transform .9s ease; background: radial-gradient(ellipse at 10% 100%, transparent 50%, rgba(201,216,182,.38) 51% 52%, transparent 53%); border-top: 1px solid rgba(201,216,182,.4); border-radius: 60% 0; }

.corner-seal { position: absolute; left: 14px; bottom: 12px; width: 38px; height: 31px; border: 1px solid rgba(233,185,174,.42); border-radius: 48% 52% 45% 55%; transform: rotate(-11deg); opacity: .52; }
.corner-seal.soft { left: auto; right: 18px; bottom: 16px; border-color: rgba(167,191,209,.42); transform: rotate(9deg); }

.tile-root { --tilt: -1.2deg; left: 4%; top: 46px; width: 310px; min-height: 210px; animation-delay: .05s; }
.tile-moss { --tilt: .9deg; left: 39%; top: 6px; width: 235px; height: 230px; animation-delay: .18s; }
.tile-signal { --tilt: -.5deg; right: 7%; top: 82px; width: 150px; height: 372px; animation-delay: .28s; }
.breath-log { --tilt: .4deg; left: 16%; top: 315px; width: 520px; min-height: 155px; animation-delay: .38s; }
.tile-bloom { --tilt: -1deg; left: 1%; top: 402px; width: 218px; height: 175px; animation-delay: .5s; }
.tile-return { --tilt: 1.1deg; right: 21%; top: 390px; width: 260px; height: 165px; animation-delay: .62s; }

.root-meter, .breath-line { height: 7px; margin-top: 18px; background: rgba(216,199,164,.34); border-radius: 99px; overflow: hidden; }
.root-meter span, .breath-line span { display: block; width: var(--meter, 43%); height: 100%; background: linear-gradient(90deg, var(--sage), var(--petal)); border-radius: inherit; }
.breath-line { height: 3px; margin: 20px 0 10px; }
.breath-line span { width: 12%; transition: width 1.8s ease; }
.breath-ticks { position: absolute; right: 20px; top: 58px; display: flex; gap: 7px; opacity: .54; }
.breath-ticks i { width: 3px; height: 16px; background: var(--gold); border-radius: 9px; transform: rotate(var(--r, 0deg)); }
.breath-ticks i:nth-child(2) { --r: 7deg; height: 23px; background: var(--sage); }.breath-ticks i:nth-child(3) { --r: -5deg; height: 12px; }.breath-ticks i:nth-child(4) { --r: 11deg; height: 28px; background: var(--petal); }.breath-ticks i:nth-child(5) { --r: -8deg; height: 18px; background: var(--blue); }.breath-ticks i:nth-child(6) { --r: 4deg; height: 10px; }
.petal-diagram { position: relative; width: 76px; height: 76px; margin: 22px auto 0; }
.petal-diagram i { position: absolute; left: 32px; top: 14px; width: 12px; height: 32px; background: rgba(201,216,182,.72); border-radius: 50% 50% 45% 45%; transform-origin: 6px 24px; }
.petal-diagram i:nth-child(2) { transform: rotate(60deg); }.petal-diagram i:nth-child(3) { transform: rotate(120deg); }.petal-diagram i:nth-child(4) { transform: rotate(180deg); }.petal-diagram i:nth-child(5) { transform: rotate(240deg); }.petal-diagram i:nth-child(6) { transform: rotate(300deg); }
.vertical-head { writing-mode: vertical-rl; height: 145px; align-items: flex-start; }
.weather-trace { position: absolute; left: 54px; bottom: 39px; width: 42px; height: 170px; border-left: 1px solid rgba(216,199,164,.9); }
.weather-trace span { position: absolute; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); opacity: .55; }
.weather-trace span:nth-child(1) { top: 3%; }.weather-trace span:nth-child(2) { top: 24%; left: 11px; }.weather-trace span:nth-child(3) { top: 49%; }.weather-trace span:nth-child(4) { top: 67%; left: 20px; }.weather-trace span:nth-child(5) { top: 88%; }
.tile-signal .small-annotation { position: absolute; bottom: 16px; left: 16px; writing-mode: vertical-rl; }
.pollen-row { display: flex; gap: 12px; margin-top: 25px; }
.pollen-row b { width: 8px; height: 8px; border-radius: 50%; background: var(--petal); opacity: .7; }
.pollen-row b:nth-child(even) { transform: translateY(8px); background: var(--sage); }
.fallen-petal { font: 54px/1 var(--serif); color: var(--petal); transform: rotate(-24deg); }

.terminal-strip { width: min(930px, 92%); margin: 0 auto; padding: 12px 4px 0; display: flex; gap: 16px; justify-content: space-between; color: rgba(78,74,67,.68); }
.cursor-firefly { width: 8px; height: 13px; border-radius: 2px; background: var(--charcoal); opacity: .46; animation: blink 2.8s steps(1) infinite; }
.terminal-count { color: rgba(78,74,67,.46); }

@keyframes inkSettle { to { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); } }
@keyframes lineWake { to { transform: scaleX(1); } }
@keyframes blink { 0%, 54% { opacity: .42; } 55%, 100% { opacity: .08; } }

@media (max-width: 900px) {
  .ceramic-field { padding: 22px; overflow: visible; }
  .quest-header { margin-left: 0; }
  .marginalia { position: relative; left: auto; top: auto; transform: none; margin: -6px 0 0; }
  .quest-dashboard { display: grid; grid-template-columns: 1fr; gap: 16px; min-height: 0; }
  .quest-tile { position: relative; inset: auto; width: 100%; height: auto; min-height: 155px; }
  .tile-signal { min-height: 250px; }
  .terminal-strip { width: 100%; }
}