@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root {
  --bg: #0b0c12;
  --bg-deep: #07080d;
  --bg-soft: #11131c;
  --panel: rgba(20, 22, 32, .72);
  --panel-solid: #171923;
  --panel-raised: #1c1f2c;
  --text: #f8f4ee;
  --muted: #a8a4af;
  --muted-2: #6f7180;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --accent: #d9a6ff;
  --accent-2: #ff937f;
  --accent-3: #a8d8af;
  --rose: #e7869d;
  --good: #9cdaa8;
  --shadow: 0 28px 90px rgba(0,0,0,.32);
  --shadow-soft: 0 16px 42px rgba(0,0,0,.18);
  --max: 1180px;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
}

:root[data-theme='light'] {
  --bg: #f6f1e9;
  --bg-deep: #eee7dc;
  --bg-soft: #fbf8f3;
  --panel: rgba(255,255,255,.70);
  --panel-solid: #fffdfa;
  --panel-raised: #ffffff;
  --text: #1d1a22;
  --muted: #6f6872;
  --muted-2: #918891;
  --line: rgba(44,34,47,.12);
  --line-strong: rgba(44,34,47,.20);
  --accent: #8d55b9;
  --accent-2: #c96557;
  --accent-3: #4d8460;
  --rose: #b9526d;
  --good: #3d9560;
  --shadow: 0 25px 70px rgba(83,62,50,.12);
  --shadow-soft: 0 14px 34px rgba(83,62,50,.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg);
  color: var(--text);
  font: 13px/1.6 var(--sans);
  transition: background .45s ease, color .45s ease;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 9% 2%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
    radial-gradient(circle at 92% 30%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 28%),
    linear-gradient(180deg, var(--bg-soft), var(--bg) 48%, var(--bg-deep));
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: .12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
a, button, input, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { color: inherit; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

/* Ambient botanical layer */
.cursor-glow { position: fixed; z-index: 1; width: 280px; height: 280px; pointer-events: none; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%); transition: opacity .3s ease; }
.botanical-stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.botanical-stage::before, .botanical-stage::after { content: ''; position: absolute; border-radius: 50%; filter: blur(46px); opacity: .25; }
.botanical-stage::before { width: 420px; height: 420px; left: -230px; top: 23%; background: var(--accent-3); }
.botanical-stage::after { width: 520px; height: 520px; right: -300px; top: 48%; background: var(--accent-2); }
.petal { position: absolute; width: 15px; height: 22px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 100% 0 100% 0; background: linear-gradient(140deg, color-mix(in srgb, var(--accent-2) 60%, transparent), color-mix(in srgb, var(--accent) 28%, transparent)); filter: blur(.1px); opacity: .5; transform: rotate(30deg); }
.petal-1 { top: 18%; left: 7%; }
.petal-2 { top: 55%; left: 88%; width: 20px; height: 28px; opacity: .38; transform: rotate(75deg); }
.petal-3 { top: 78%; left: 12%; width: 11px; height: 18px; opacity: .3; transform: rotate(140deg); }
.petal-4 { top: 42%; left: 54%; width: 9px; height: 14px; opacity: .32; transform: rotate(210deg); }
.petal-5 { top: 86%; left: 73%; width: 13px; height: 20px; opacity: .28; transform: rotate(290deg); }
.petal-6 { top: 11%; left: 78%; width: 12px; height: 18px; opacity: .35; transform: rotate(15deg); }
.vine { position: absolute; width: 380px; height: 380px; border: 1px solid color-mix(in srgb, var(--accent-3) 24%, transparent); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: .45; }
.vine-left { left: -260px; top: 48%; transform: rotate(22deg); }
.vine-right { right: -255px; top: 8%; transform: rotate(-35deg); border-color: color-mix(in srgb, var(--accent-2) 22%, transparent); border-right-color: transparent; border-bottom-color: transparent; }
.scroll-progress { position: fixed; left: 0; top: 0; z-index: 110; width: 0; height: 3px; background: linear-gradient(90deg, var(--accent-3), var(--accent), var(--accent-2)); box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 80%, transparent); }

/* Fixed pill navigation */
.topbar { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; z-index: 50; width: min(calc(100% - 28px), 1250px); height: 60px; margin: 0; transform: translateX(-50%); }
.nav-pill { position: relative; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 8px 0 13px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel-solid) 78%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(1.35); transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.topbar.scrolled .nav-pill { border-color: var(--line-strong); box-shadow: 0 18px 54px rgba(0,0,0,.21), inset 0 1px 0 rgba(255,255,255,.1); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 178px; }
.brand-mark, .footer-brand-mark { position: relative; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line)); border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent-3) 30%, transparent), color-mix(in srgb, var(--accent) 20%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.17); }
.brand-mark::after, .footer-brand-mark::after { content: ''; position: absolute; width: 10px; height: 16px; border: 1px solid color-mix(in srgb, var(--accent-2) 65%, transparent); border-radius: 100% 0 100% 0; transform: translate(9px,-8px) rotate(30deg); opacity: .85; }
.brand-mark img, .footer-brand-mark img { width: 23px; height: 23px; position: relative; z-index: 2; }
.brand-word, .footer-brand strong { font-weight: 800; letter-spacing: -.045em; }
.brand-word span, .footer-brand strong span { color: var(--muted-2); font-weight: 600; }
.desktop-nav { display: flex; align-items: center; gap: 3px; height: 44px; margin: auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 42%, transparent); }
.desktop-nav a { position: relative; padding: 9px 14px; border-radius: 999px; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: -.02em; transition: color .25s ease, background .25s ease, transform .25s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); transform: translateY(-1px); }
.desktop-nav a.active::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); transform: translateX(-50%); }
.top-actions { display: flex; align-items: center; gap: 7px; }
.admin-link { display: inline-flex; align-items: center; justify-content: center; height: 40px; gap: 8px; padding: 0 15px; border: 1px solid color-mix(in srgb, var(--accent-2) 38%, var(--line)); border-radius: 999px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 13%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); font: 500 10px/1 var(--mono); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.admin-link::before { content: '✦'; color: var(--accent-2); font-size: 9px; }
.admin-link:hover { border-color: var(--accent-2); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-2) 20%, transparent); transform: translateY(-2px); }
.menu-btn { display: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.mobile-nav { display: none; }

/* Hero */
.hero { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 20px; min-height: 670px; padding: 145px 0 95px; }
.hero-copy-wrap { position: relative; z-index: 2; }
.eyebrow, .kicker { color: var(--muted-2); font: 500 9px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--panel) 75%, transparent); }
.eyebrow i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px var(--good); }
.eyebrow span { opacity: .45; }
.hero h1 { max-width: 720px; margin: 22px 0 25px; font-size: clamp(54px, 6.4vw, 88px); line-height: .96; letter-spacing: -.078em; }
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 600; letter-spacing: -.065em; background: linear-gradient(100deg, var(--accent-3), var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy { max-width: 500px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 0 17px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 800; cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.btn:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--accent-3), var(--accent)); box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 22%, transparent); }
.btn.primary:hover { box-shadow: 0 18px 38px color-mix(in srgb, var(--accent-2) 24%, transparent); }
.btn.ghost { background: color-mix(in srgb, var(--panel-solid) 68%, transparent); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 26px; color: var(--muted-2); font: 500 8px/1 var(--mono); letter-spacing: .13em; }
.live-dot, .footer-status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }

/* Hero dimensional flower/orbit */
.orbit-stage { position: relative; display: grid; place-items: center; height: 430px; isolation: isolate; }
.orbit-stage::before { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 68%); filter: blur(14px); opacity: .55; }
.planet { position: relative; z-index: 2; width: 164px; height: 164px; border-radius: 50%; background: radial-gradient(circle at 32% 24%, #f8dbd2 0 8%, #e8a4b8 18%, #9b67ad 44%, #302642 78%); box-shadow: 0 0 70px color-mix(in srgb, var(--accent-2) 28%, transparent), inset -24px -20px 32px rgba(0,0,0,.42), inset 13px 10px 20px rgba(255,255,255,.18); transform: translateZ(20px); }
.planet::before, .planet::after { content: ''; position: absolute; border-radius: 50%; background: rgba(65,38,72,.24); filter: blur(1px); }
.planet::before { width: 22px; height: 14px; left: 80px; top: 73px; }
.planet::after { width: 13px; height: 10px; left: 48px; top: 103px; }
.planet-light { position: absolute; top: 22px; left: 28px; width: 45px; height: 30px; border-radius: 50%; background: #fff9ef; filter: blur(11px); opacity: .5; }
.planet-crater { display: none; }
.orbit-ring { position: absolute; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 50%; }
.ring-1 { width: 380px; height: 188px; transform: rotate(-18deg); }
.ring-2 { width: 430px; height: 280px; border-color: color-mix(in srgb, var(--accent-2) 28%, transparent); transform: rotate(31deg); }
.ring-3 { width: 294px; height: 294px; border-color: color-mix(in srgb, var(--accent-3) 18%, transparent); transform: rotate(55deg); }
.orbit-node, .space-card { position: absolute; z-index: 3; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-solid) 70%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); }
.orbit-node { padding: 6px 9px; border-radius: 999px; color: var(--muted); font: 500 7px/1 var(--mono); letter-spacing: .14em; }
.node-a { top: 15%; left: 2%; }
.node-b { top: 67%; right: 0; }
.node-c { bottom: 8%; left: 27%; }
.space-card { min-width: 108px; padding: 12px 14px; border-radius: 15px; }
.space-card small, .space-card span { display: block; color: var(--muted-2); font: 500 7px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.space-card strong { display: block; margin: 4px 0; font-size: 18px; letter-spacing: -.05em; }
.card-a { top: 10%; right: 2%; }
.card-b { bottom: 10%; left: 0; }

/* Sections and shared cards */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--panel-solid) 48%, transparent); }
.ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; height: 42px; color: var(--muted-2); font: 500 8px/1 var(--mono); letter-spacing: .17em; animation: marquee 34s linear infinite; }
.ticker-track b { color: var(--accent-2); font-size: 11px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.section { padding: 96px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.section-head h2, .mini-section h2, .vault h2, .about-space h2 { margin: 7px 0 0; font-size: 34px; line-height: 1; letter-spacing: -.065em; }
.section-head h2::after, .mini-section h2::after, .about-space h2::after { content: '✦'; display: inline-block; margin-left: 9px; color: var(--accent-2); font: 14px/1 var(--serif); vertical-align: top; opacity: .8; }
.count, .text-link { color: var(--muted-2); font: 500 9px/1 var(--mono); letter-spacing: .08em; }
.text-link { border: 0; background: none; cursor: pointer; }
.text-link:hover { color: var(--text); }
.archive-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.collection { position: relative; display: grid; grid-template-columns: 30px 1fr 22px; gap: 12px; min-height: 150px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 72%, transparent), color-mix(in srgb, var(--panel) 88%, transparent)); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.collection::before { content: ''; position: absolute; inset: -50%; opacity: .25; background: radial-gradient(circle at 25% 50%, var(--accent-3), transparent 28%); transform: translateX(-40%) rotate(12deg); transition: transform .5s ease; }
.collection::after { content: ''; position: absolute; right: -13px; bottom: -16px; width: 72px; height: 90px; border: 1px solid color-mix(in srgb, var(--accent-2) 32%, transparent); border-radius: 100% 0 100% 0; transform: rotate(32deg); opacity: .5; }
.collection > * { position: relative; z-index: 1; }
.collection:hover, .work-card:hover, .link-card:hover, .system-grid div:hover, .tool-card:hover { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); box-shadow: var(--shadow); transform: translateY(-5px); }
.collection:hover::before { transform: translateX(30%) rotate(12deg); }
.collection.featured { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-3) 15%, var(--panel-solid)), color-mix(in srgb, var(--accent) 13%, var(--panel-solid))); }
.number { color: var(--muted-2); font: 500 9px/1.2 var(--mono); }
.collection small, .work-meta small { color: var(--muted-2); font: 500 8px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.collection h3 { margin: 6px 0; font-size: 17px; letter-spacing: -.04em; }
.collection p, .work-meta p, .mini-section > p, .vault p, .about-space p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.arrow { color: var(--accent-2); font-size: 15px; }

/* Works */
.works-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.work-card, .link-card, .tool-card, .system-grid div { border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 88%, transparent); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.work-card { overflow: hidden; border-radius: 18px; }
.work-visual { position: relative; display: grid; place-items: center; height: 226px; overflow: hidden; }
.large .work-visual { height: 264px; }
.work-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,7,13,.32)); pointer-events: none; }
.visual-one { background: radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--accent-3) 35%, transparent), transparent 25%), linear-gradient(145deg, #171927, #31233e); }
.visual-two { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 36%), linear-gradient(145deg, #18162b, #2d1d2f); }
.visual-three { background: radial-gradient(circle at 32% 20%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 30%), linear-gradient(145deg, #151a24, #25222e); }
.visual-chip { position: absolute; top: 13px; left: 13px; z-index: 2; padding: 5px 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(8,7,13,.38); color: #f8f4ee; font: 500 8px/1 var(--mono); backdrop-filter: blur(8px); }
.fake-window { width: 70%; height: 62%; padding: 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(11,11,20,.6); box-shadow: 0 20px 50px rgba(0,0,0,.35); transform: perspective(700px) rotateX(5deg) rotateY(-7deg); }
.fake-top { width: 35%; height: 5px; border-radius: 4px; background: var(--accent-3); opacity: .72; }
.fake-lines { display: flex; gap: 5px; margin-top: 14px; }
.fake-lines i { display: block; flex: 1; height: 34px; border-radius: 5px; background: rgba(255,255,255,.1); }
.fake-chart { height: 67px; margin-top: 10px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); background: linear-gradient(170deg, transparent 54%, color-mix(in srgb, var(--accent) 22%, transparent) 55%, transparent 57%); }
.visual-orbit { position: absolute; width: 195px; height: 78px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transform: rotate(-18deg); }
.grid-sphere { width: 116px; height: 116px; border-radius: 50%; background: repeating-radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0 2px, transparent 3px 11px), repeating-linear-gradient(0deg, transparent 0 9px, color-mix(in srgb, var(--accent-2) 24%, transparent) 10px 11px); box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 24%, transparent); }
.visual-cross { position: absolute; right: 16%; bottom: 16%; color: var(--accent-2); font-size: 18px; opacity: .8; }
.stacked-cards { width: 140px; position: relative; }
.stacked-cards i { display: block; height: 67px; margin: -13px auto 0; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(20,22,34,.74); box-shadow: 0 14px 20px rgba(0,0,0,.26); }
.stacked-cards i:nth-child(1) { width: 82%; }
.stacked-cards i:nth-child(2) { width: 93%; }
.stacked-cards i:nth-child(3) { width: 100%; }
.work-meta { display: flex; justify-content: space-between; gap: 12px; padding: 15px; }
.work-meta h3 { margin: 5px 0; font-size: 15px; letter-spacing: -.04em; }
.tag { height: max-content; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 999px; color: var(--muted); font: 500 8px/1 var(--mono); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; grid-auto-rows: 128px; gap: 9px; }
.g { position: relative; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); color: #fff; text-align: left; cursor: pointer; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.g::before { content: ''; position: absolute; inset: 14% 22%; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; transform: rotate(-24deg); opacity: .72; }
.g::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 20%, rgba(255,255,255,.12), transparent 70%); opacity: .55; transition: transform .5s ease; }
.g:hover { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); box-shadow: var(--shadow); transform: translateY(-4px) scale(1.01); }
.g:hover::after { transform: translateX(28%); }
.g span, .g b { position: absolute; z-index: 2; }
.g span { top: 11px; left: 11px; color: rgba(255,255,255,.66); font: 500 8px/1 var(--mono); }
.g b { bottom: 11px; left: 11px; font-size: 11px; font-weight: 700; }
.g1 { grid-row: span 2; background: radial-gradient(circle at 65% 22%, #d895a966, transparent 30%), linear-gradient(145deg, #273c35, #18182a); }
.g2 { background: radial-gradient(circle at 30% 30%, #b18adf66, transparent 32%), linear-gradient(145deg, #2a223c, #121421); }
.g3 { background: radial-gradient(circle at 55% 54%, #e78d8d66, transparent 35%), linear-gradient(145deg, #3b2631, #181723); }
.g4 { background: linear-gradient(145deg, #20322d, #141621); }
.g5 { background: radial-gradient(circle at 30% 30%, #b8d7a955, transparent 30%), linear-gradient(145deg, #243a34, #151923); }
.g6 { background: linear-gradient(135deg, #402632, #151521); }
.gallery-grid .g img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: .84; }
.gallery-grid .g img + span, .gallery-grid .g img + span + b { position: relative; z-index: 2; }

/* Links and notes */
.split-section { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 96px 0; }
.links-directory, .notes-directory { grid-column: 1/-1; }
.directory-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.directory-head h2 { font-size: 31px; }
.directory-head p { max-width: 560px; margin: 0; color: var(--muted); font-size: 11px; }
.links-controls { display: flex; align-items: center; gap: 10px; margin-top: 23px; }
.links-search { display: flex; align-items: center; gap: 9px; flex: 1; max-width: 440px; height: 44px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--muted-2); }
.links-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.links-search input::placeholder { color: var(--muted-2); }
.links-categories { display: flex; flex-wrap: wrap; gap: 7px; }
.link-filter { height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 500 9px/1 var(--mono); cursor: pointer; }
.link-filter.active, .link-filter:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--text); }
.orbit-viewport { position: relative; overflow: hidden; margin-top: 15px; border-radius: 18px; }
.orbit-track { display: flex; width: 100%; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.orbit-track.is-dragging { transition: none; cursor: grabbing; }
.orbit-page { display: grid; flex: 0 0 100%; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; align-content: start; }
.link-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 17px; }
.link-preview { position: relative; display: block; height: 145px; overflow: hidden; background: linear-gradient(135deg, #24203a, #14251f); }
.link-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(4,5,9,.6)); }
.link-preview img.preview-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-favicon { position: absolute; bottom: 11px; left: 11px; z-index: 2; width: 35px; height: 35px; padding: 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 11px; background: rgba(10,8,15,.78); object-fit: contain; backdrop-filter: blur(10px); }
.link-index { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 5px 7px; border-radius: 999px; background: rgba(5,5,9,.5); color: #fff; font: 500 8px/1 var(--mono); }
.link-favorite { position: absolute; top: 10px; right: 10px; z-index: 4; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(5,5,9,.52); color: rgba(255,255,255,.7); cursor: pointer; backdrop-filter: blur(10px); }
.link-favorite.active { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 28%, transparent); color: #fff; }
.link-card-body { display: flex; flex-direction: column; min-height: 120px; padding: 14px; }
.link-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.link-card-title { margin: 0; font-size: 13px; line-height: 1.3; letter-spacing: -.03em; }
.link-card-domain { margin-top: 4px; overflow: hidden; color: var(--muted-2); font: 500 9px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.link-card-desc { display: -webkit-box; margin: 9px 0 12px; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.link-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.link-card-category { color: var(--muted-2); font: 500 8px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.link-open { color: var(--accent-2); font: 500 9px/1 var(--mono); }
.links-empty { grid-column: 1/-1; padding: 32px; border: 1px dashed var(--line-strong); border-radius: 15px; color: var(--muted); text-align: center; font-size: 10px; }
.orbit-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.orbit-nav { padding: 8px 0; border: 0; background: transparent; color: var(--muted); font: 500 9px/1 var(--mono); cursor: pointer; }
.orbit-nav:hover:not(:disabled) { color: var(--text); }
.orbit-nav:disabled { cursor: not-allowed; opacity: .3; }
.orbit-page-indicator { color: var(--muted-2); font: 500 9px/1 var(--mono); }
.notes-directory { padding-top: 34px; border-top: 1px solid var(--line); }
.note-list { margin-top: 21px; border-top: 1px solid var(--line); }
.note-list article { padding: 16px 0; border-bottom: 1px solid var(--line); }
.note-list time { color: var(--muted-2); font: 500 8px/1 var(--mono); letter-spacing: .08em; }
.note-list h3 { margin: 7px 0 4px; font-size: 13px; letter-spacing: -.03em; }
.note-list p { margin: 0; color: var(--muted); font-size: 10px; }

/* Vault / about / tools / footer */
.vault { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; position: relative; overflow: hidden; margin-bottom: 96px; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent-3) 11%, var(--panel-solid)), color-mix(in srgb, var(--panel-solid) 90%, transparent)); }
.vault::after { content: ''; position: absolute; right: -95px; top: -140px; width: 260px; height: 260px; border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); border-radius: 50%; box-shadow: 0 0 0 23px color-mix(in srgb, var(--accent-2) 7%, transparent), 0 0 0 47px color-mix(in srgb, var(--accent-2) 4%, transparent); }
.vault-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.vault-row div { padding-left: 15px; border-left: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.vault-row b { display: block; font-size: 18px; }
.vault-row span { color: var(--muted); font: 500 8px/1.4 var(--mono); }
.vault-row .btn { grid-column: 1/-1; margin-top: 7px; width: max-content; }
.vault-public-card { display: grid; grid-template-columns: 66px 1fr auto; align-items: center; gap: 19px; padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.vault-lock { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid color-mix(in srgb, var(--accent-3) 35%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--accent-3) 12%, var(--panel-raised)); color: var(--accent-3); font-size: 22px; }
.vault-public-card h3 { margin: 7px 0; font-size: 22px; letter-spacing: -.05em; }
.vault-public-card p { max-width: 650px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.about-space { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding: 96px 0; border-top: 1px solid var(--line); }
.about-space p { max-width: 430px; margin-top: 18px; font-size: 13px; line-height: 1.8; }
.system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.system-grid div { position: relative; overflow: hidden; padding: 17px; border-radius: 15px; }
.system-grid div::after { content: '✦'; position: absolute; right: 15px; bottom: 11px; color: var(--accent-2); opacity: .6; }
.system-grid span { color: var(--muted-2); font: 500 8px/1 var(--mono); }
.system-grid b { display: block; margin: 8px 0 3px; font-size: 12px; }
.system-grid small { color: var(--muted); font-size: 9px; }
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.tool-card { position: relative; overflow: hidden; padding: 20px; border-radius: 20px; }
.tool-card::before { content: ''; position: absolute; right: -30px; top: -35px; width: 100px; height: 100px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; opacity: .6; }
.tool-card h3 { margin: 11px 0 5px; font-size: 18px; letter-spacing: -.04em; }
.tool-card p { margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.tool-number { color: var(--accent-2); font: 500 9px/1 var(--mono); letter-spacing: .14em; }
.tool-input, .tool-output { display: block; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: color-mix(in srgb, var(--bg) 30%, transparent); color: var(--text); font: 500 13px/1.55 var(--sans); resize: vertical; }
.tool-input:focus, .tool-output:focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.footer { display: block; padding: 30px 0 20px; border-top: 1px solid var(--line); color: var(--muted-2); }
.footer-main { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand strong { display: block; font-size: 12px; }
.footer-brand small { display: block; margin-top: 4px; color: var(--muted-2); font: 500 7px/1 var(--mono); letter-spacing: .1em; }
.footer-brand-mark { width: 34px; height: 34px; border-radius: 12px; }
.footer-copy { color: var(--muted); font-size: 10px; text-align: center; }
.footer-signal { display: flex; justify-content: end; align-items: center; gap: 11px; }
.footer-signal strong, .footer-signal small { display: block; }
.footer-signal strong { color: var(--text); font: 500 9px/1 var(--mono); }
.footer-signal small { margin-top: 5px; font: 500 7px/1 var(--mono); letter-spacing: .08em; }
.footer-signal-orbit { position: relative; display: block; width: 28px; height: 28px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 50%; transform: rotate(-30deg); }
.footer-signal-orbit::after { content: ''; position: absolute; inset: 6px -5px; border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); border-radius: 50%; }
.footer-signal-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); }
.footer-signal-orbit i:first-child { right: -2px; top: 9px; }
.footer-signal-orbit i:last-child { left: 4px; bottom: 1px; background: var(--accent-3); }
.footer-bottom { display: flex; justify-content: space-between; gap: 14px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font: 500 8px/1 var(--mono); letter-spacing: .08em; }

/* Modals, toasts, animation */
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 90; padding: 11px 15px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--panel-solid) 90%, transparent); color: var(--text); font-size: 10px; box-shadow: var(--shadow); backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.gallery-modal { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 20px; }
.gallery-modal.open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8,6,12,.76); backdrop-filter: blur(15px); }
.modal-card { position: relative; width: min(640px,100%); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 21px; background: var(--panel-solid); box-shadow: 0 35px 100px rgba(0,0,0,.5); animation: modalIn .28s ease; }
.modal-close { position: absolute; top: 13px; right: 13px; z-index: 3; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; font-size: 18px; }
.modal-art { position: relative; height: 320px; background: radial-gradient(circle at 55% 35%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 26%), linear-gradient(145deg, #273c35, #211a2c); }
.modal-art::before, .modal-art::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; inset: 20% 18%; transform: rotate(-18deg); }
.modal-art::after { inset: 30% 8%; border-color: color-mix(in srgb, var(--accent) 42%, transparent); transform: rotate(28deg); }
.modal-info { padding: 20px; }
.modal-info h3 { margin: 7px 0; font-size: 20px; }
.modal-info p { margin: 0; color: var(--muted); font-size: 11px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1); animation: revealFallback .001s .85s forwards; }
.reveal.in { opacity: 1; transform: none; }
@keyframes revealFallback { to { opacity: 1; transform: none; } }
.delay-1 { transition-delay: .1s; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Theme-specific refinements */
:root[data-theme='light'] .nav-pill { background: rgba(255,253,250,.84); box-shadow: 0 18px 45px rgba(83,62,50,.11), inset 0 1px 0 #fff; }
:root[data-theme='light'] .desktop-nav { background: rgba(246,241,233,.75); }
:root[data-theme='light'] .visual-chip, :root[data-theme='light'] .link-index { background: rgba(27,22,30,.44); }
:root[data-theme='light'] .fake-window { border-color: rgba(255,255,255,.58); background: rgba(255,255,255,.45); box-shadow: 0 18px 44px rgba(74,47,73,.18); }
:root[data-theme='light'] .fake-lines i { background: rgba(255,255,255,.5); }
:root[data-theme='light'] .stacked-cards i { border-color: rgba(255,255,255,.54); background: rgba(255,255,255,.38); }
:root[data-theme='light'] .modal-backdrop { background: rgba(62,43,54,.42); }
:root[data-theme='light'] .modal-close { background: rgba(255,255,255,.7); color: var(--text); }
:root[data-theme='light'] .link-favorite { background: rgba(255,253,250,.82); color: var(--muted); }

/* Responsive */
@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .menu-btn { display: grid; place-items: center; }
  .topbar { width: min(calc(100% - 28px), 760px); }
  .mobile-nav { position: absolute; top: 68px; left: 0; right: 0; display: none; grid-template-columns: repeat(2,1fr); gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--panel-solid) 94%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
  .mobile-nav.open { display: grid; }
  .mobile-nav a { padding: 12px; border-radius: 11px; color: var(--muted); font: 500 10px/1 var(--mono); }
  .mobile-nav a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 150px; }
  .orbit-stage { height: 350px; }
  .archive-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .works-grid { grid-template-columns: 1fr 1fr; }
  .work-card.large { grid-column: 1/-1; }
  .orbit-page { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .vault { grid-template-columns: 1fr; }
  .about-space { grid-template-columns: 1fr; gap: 38px; }
  .tools-grid { grid-template-columns: 1fr 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-copy { grid-column: 1/-1; grid-row: 2; text-align: left; }
  .footer-signal { justify-content: end; }
}

@media (max-width: 600px) {
  html { scroll-padding-top: 82px; }
  .shell { width: calc(100% - 26px); }
  .topbar { top: max(8px, env(safe-area-inset-top)); width: calc(100% - 16px); height: 54px; }
  .nav-pill { height: 54px; padding: 0 7px 0 9px; border-radius: 18px; gap: 7px; }
  .brand { min-width: 0; gap: 7px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .brand-word { font-size: 12px; }
  .top-actions { margin-left: auto; }
  .admin-link { width: 40px; height: 38px; padding: 0; border-radius: 12px; }
  .admin-link span { display: none; }
  .menu-btn { width: 38px; height: 38px; }
  .mobile-nav { top: 62px; grid-template-columns: repeat(2,1fr); border-radius: 15px; }
  .hero { padding: 118px 0 50px; gap: 2px; }
  .eyebrow { font-size: 7px; letter-spacing: .14em; }
  .hero h1 { margin: 18px 0; font-size: clamp(43px, 13vw, 56px); }
  .hero-copy { font-size: 12px; line-height: 1.75; }
  .hero-actions { margin-top: 22px; }
  .hero-actions .btn { min-height: 45px; padding-inline: 15px; }
  .hero-meta { gap: 10px; margin-top: 20px; font-size: 7px; }
  .orbit-stage { height: 275px; margin-top: 10px; }
  .planet { width: 126px; height: 126px; }
  .ring-1 { width: 284px; height: 142px; }
  .ring-2 { width: 316px; height: 208px; }
  .ring-3 { width: 230px; height: 230px; }
  .space-card { min-width: 83px; padding: 9px 10px; transform: scale(.86); }
  .space-card strong { font-size: 15px; }
  .card-a { top: 7%; right: 0; }
  .card-b { bottom: 4%; left: 0; }
  .node-a { top: 8%; left: 2%; }
  .node-b { top: 62%; right: 0; }
  .node-c { bottom: 2%; left: 25%; }
  .ticker-track { height: 38px; font-size: 7px; }
  .section, .split-section, .about-space { padding: 65px 0; }
  .section-head, .directory-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .section-head h2, .mini-section h2, .vault h2, .about-space h2, .directory-head h2 { font-size: 27px; }
  .archive-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .works-grid { grid-template-columns: 1fr; }
  .work-card.large { grid-column: auto; }
  .collection { min-height: 105px; padding: 15px; border-radius: 15px; }
  .work-visual, .large .work-visual { height: 210px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 108px; }
  .g1 { grid-row: span 2; }
  .links-controls { align-items: stretch; flex-direction: column; }
  .links-search { max-width: none; min-height: 46px; }
  .links-categories { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .link-filter { flex: 0 0 auto; min-height: 38px; }
  .orbit-page { grid-template-columns: 1fr; }
  .link-preview { height: 158px; }
  .vault { margin-bottom: 65px; padding: 20px; }
  .vault-row { grid-template-columns: 1fr 1fr; }
  .vault-row div:last-of-type { grid-column: 1/-1; }
  .vault-public-card { grid-template-columns: 1fr; padding: 19px; }
  .vault-lock { width: 54px; height: 54px; }
  .vault-public-card h3 { font-size: 20px; }
  .system-grid { gap: 7px; }
  .system-grid div { padding: 14px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 17px; }
  .footer-main { grid-template-columns: 1fr; gap: 17px; }
  .footer-copy { grid-column: auto; grid-row: auto; text-align: left; }
  .footer-signal { justify-content: start; }
  .footer-bottom { flex-direction: column; gap: 9px; line-height: 1.4; }
  .modal-art { height: 230px; }
  input, select, textarea { font-size: 16px !important; }
  .cursor-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Premium scrollbars */
:root { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 72%, transparent) transparent; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 72%, transparent) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: linear-gradient(180deg, var(--accent-3), var(--accent), var(--accent-2)); background-clip: padding-box; box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 24%, transparent); }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--accent-2), var(--accent)); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }


/* =========================================================
   ANDOVA BOTANICAL ENVIRONMENT OVERRIDE
   The public page is one connected garden. Legacy space hooks
   remain only where required by the existing link carousel.
   ========================================================= */
:root {
  --garden-ink: #0d130f;
  --garden-moss: #18261a;
  --garden-leaf: #9fc18a;
  --garden-petal: #e5a4b6;
  --garden-petal-deep: #9a5a77;
  --garden-gold: #efc985;
  --garden-cream: #fbf1df;
  --garden-line: rgba(245,235,211,.14);
  --garden-shadow: 0 30px 90px rgba(0,0,0,.30);
}
:root[data-theme=light] {
  --garden-ink: #f4ecdd;
  --garden-moss: #d7e0c8;
  --garden-leaf: #5b875d;
  --garden-petal: #c57b91;
  --garden-petal-deep: #8b4d6b;
  --garden-gold: #af7a39;
  --garden-cream: #2b271f;
  --garden-line: rgba(62,54,41,.14);
  --garden-shadow: 0 26px 75px rgba(85,62,38,.13);
}
body {
  background:
    radial-gradient(ellipse at 12% 8%, color-mix(in srgb, var(--garden-leaf) 11%, transparent), transparent 34%),
    radial-gradient(ellipse at 92% 28%, color-mix(in srgb, var(--garden-petal) 10%, transparent), transparent 29%),
    linear-gradient(180deg, var(--bg-soft), var(--bg) 48%, var(--bg-deep));
}
body::before { opacity: .12; }
.cursor-glow { background: radial-gradient(circle, color-mix(in srgb, var(--garden-gold) 15%, transparent), transparent 68%); }
.botanical-world { display: block; position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.botanical-world::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 57%, color-mix(in srgb, var(--garden-leaf) 10%, transparent) 84%, transparent); }
.botanical-world::after { content: ''; position: absolute; left: 50%; top: 38%; width: 680px; height: 680px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, color-mix(in srgb, var(--garden-gold) 13%, transparent), transparent 63%); filter: blur(25px); opacity: .52; }
.world-vine { position: absolute; width: 540px; height: 780px; border: 1px solid color-mix(in srgb, var(--garden-leaf) 30%, transparent); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: .34; }
.wv-left { left: -370px; top: 4%; transform: rotate(25deg); }
.wv-right { right: -380px; top: 18%; transform: rotate(-24deg); border-color: color-mix(in srgb, var(--garden-petal) 27%, transparent); }
.world-petal { position: absolute; width: 17px; height: 28px; border: 1px solid color-mix(in srgb, var(--garden-petal) 53%, transparent); border-radius: 100% 0 100% 0; background: linear-gradient(145deg, color-mix(in srgb, var(--garden-petal) 70%, transparent), color-mix(in srgb, var(--garden-petal-deep) 28%, transparent)); opacity: .50; }
.wp-1 { left: 8%; top: 21%; transform: rotate(32deg); }
.wp-2 { left: 88%; top: 24%; transform: rotate(120deg) scale(.8); opacity: .35; }
.wp-3 { left: 14%; top: 67%; transform: rotate(186deg) scale(.76); opacity: .32; }
.wp-4 { left: 79%; top: 72%; transform: rotate(246deg); opacity: .30; }
.wp-5 { left: 58%; top: 11%; transform: rotate(300deg) scale(.66); opacity: .28; }
.wp-6 { left: 47%; top: 86%; transform: rotate(72deg) scale(.55); opacity: .22; }
.world-firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--garden-gold); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--garden-gold) 58%, transparent); opacity: .72; }
.wf-1 { left: 18%; top: 38%; }
.wf-2 { left: 76%; top: 34%; opacity: .44; }
.wf-3 { left: 68%; top: 79%; opacity: .38; }
.wf-4 { left: 35%; top: 82%; opacity: .42; }

/* Garden navigation */
.topbar { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; width: min(calc(100% - 28px), 1250px); height: 60px; margin: 0; transform: translateX(-50%); }
.nav-pill { height: 60px; border-color: var(--garden-line); background: color-mix(in srgb, var(--panel-solid) 80%, transparent); box-shadow: 0 18px 52px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.11); backdrop-filter: blur(23px) saturate(1.3); }
.brand-mark, .footer-brand-mark { border-color: color-mix(in srgb, var(--garden-petal) 44%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--garden-leaf) 28%, transparent), color-mix(in srgb, var(--garden-petal) 23%, transparent)); }
.brand-mark::after, .footer-brand-mark::after { border-color: color-mix(in srgb, var(--garden-gold) 74%, transparent); }
.desktop-nav a:hover, .desktop-nav a.active { background: color-mix(in srgb, var(--garden-leaf) 18%, transparent); }
.desktop-nav a.active::after { background: var(--garden-petal); box-shadow: 0 0 10px var(--garden-petal); }
.admin-link { border-color: color-mix(in srgb, var(--garden-petal) 42%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--garden-petal) 14%, transparent), color-mix(in srgb, var(--garden-leaf) 12%, transparent)); }
.admin-link::before { color: var(--garden-gold); }
.admin-link:hover { border-color: var(--garden-petal); box-shadow: 0 12px 30px color-mix(in srgb, var(--garden-petal) 21%, transparent); }

/* Hero garden */
.hero { min-height: 710px; padding: 150px 0 100px; gap: 24px; }
.eyebrow { border-color: var(--garden-line); background: color-mix(in srgb, var(--panel) 82%, transparent); }
.eyebrow i, .live-dot, .footer-status-dot { background: var(--garden-leaf); box-shadow: 0 0 12px var(--garden-leaf); }
.hero h1 { font-family: var(--sans); letter-spacing: -.085em; }
.hero h1 em { font-family: var(--serif); background: linear-gradient(100deg, var(--garden-leaf), var(--garden-petal), var(--garden-gold)); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 510px; }
.btn.primary { background: linear-gradient(135deg, var(--garden-leaf), var(--garden-petal-deep)); box-shadow: 0 15px 34px color-mix(in srgb, var(--garden-petal-deep) 23%, transparent); }
.btn.primary:hover { box-shadow: 0 18px 40px color-mix(in srgb, var(--garden-petal) 26%, transparent); }
.btn.ghost { background: color-mix(in srgb, var(--panel-solid) 72%, transparent); }

.garden-stage { position: relative; display: grid; place-items: center; height: 455px; isolation: isolate; }
.garden-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--garden-gold) 17%, transparent), transparent 67%); filter: blur(18px); opacity: .66; }
.garden-haze { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--garden-leaf) 17%, transparent); filter: blur(28px); }
.haze-back { width: 310px; height: 210px; top: 11%; left: 10%; transform: rotate(-25deg); opacity: .54; }
.haze-front { right: 5%; bottom: 10%; width: 260px; height: 155px; transform: rotate(19deg); opacity: .42; background: color-mix(in srgb, var(--garden-petal) 18%, transparent); }
.stem { position: absolute; z-index: 1; bottom: 9%; width: 2px; height: 330px; border-radius: 100%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--garden-leaf) 78%, transparent)); transform-origin: bottom center; }
.stem-a { left: 31%; transform: rotate(18deg); }
.stem-b { left: 61%; height: 290px; transform: rotate(-17deg); opacity: .72; }
.leaf { position: absolute; z-index: 2; width: 74px; height: 32px; border: 1px solid color-mix(in srgb, var(--garden-leaf) 68%, transparent); border-radius: 100% 0 100% 0; background: linear-gradient(135deg, color-mix(in srgb, var(--garden-leaf) 41%, transparent), transparent); }
.leaf-a { left: 22%; bottom: 30%; transform: rotate(24deg); }
.leaf-b { left: 63%; bottom: 38%; transform: rotate(163deg) scale(.75); }
.hero-bloom { position: relative; z-index: 3; width: 255px; height: 255px; filter: drop-shadow(0 25px 28px rgba(0,0,0,.28)); transform: translateY(-5px); }
.hero-bloom::after { content: ''; position: absolute; left: 50%; bottom: -72px; width: 190px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--garden-leaf) 20%, transparent); filter: blur(18px); transform: translateX(-50%); }
.hero-bloom .petal { position: absolute; left: 50%; top: 50%; width: 116px; height: 174px; border: 1px solid rgba(255,241,225,.24); border-radius: 88% 12% 82% 18%; background: linear-gradient(145deg, rgba(255,214,197,.94), color-mix(in srgb, var(--garden-petal) 77%, transparent) 58%, color-mix(in srgb, var(--garden-petal-deep) 78%, transparent)); box-shadow: inset 14px 8px 23px rgba(255,255,255,.22), inset -16px -16px 24px rgba(50,24,49,.28); transform-origin: 50% 92%; }
.hero-bloom .petal-a { transform: translate(-50%,-92%) rotate(0); }
.hero-bloom .petal-b { transform: translate(-50%,-92%) rotate(45deg); }
.hero-bloom .petal-c { transform: translate(-50%,-92%) rotate(90deg); }
.hero-bloom .petal-d { transform: translate(-50%,-92%) rotate(135deg); }
.hero-bloom .petal-e { transform: translate(-50%,-92%) rotate(180deg); }
.hero-bloom .petal-f { transform: translate(-50%,-92%) rotate(225deg); }
.hero-bloom .petal-g { transform: translate(-50%,-92%) rotate(270deg); }
.hero-bloom .petal-h { transform: translate(-50%,-92%) rotate(315deg); }
.bloom-core { position: absolute; z-index: 5; left: 50%; top: 50%; width: 74px; height: 74px; border: 1px solid rgba(255,240,202,.48); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffe4a2, #d28b52 48%, #633a4d 86%); box-shadow: 0 0 34px color-mix(in srgb, var(--garden-gold) 62%, transparent), inset 9px 8px 11px rgba(255,255,255,.35), inset -12px -14px 18px rgba(54,25,42,.3); transform: translate(-50%,-50%); }
.bloom-core::after { content: ''; position: absolute; inset: 18px; border: 1px dotted rgba(255,238,185,.6); border-radius: 50%; }
.garden-label, .garden-card { position: absolute; z-index: 6; border: 1px solid var(--garden-line); background: color-mix(in srgb, var(--panel-solid) 75%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(15px); }
.garden-label { padding: 6px 9px; border-radius: 999px; color: var(--muted); font: 500 7px/1 var(--mono); letter-spacing: .14em; }
.label-a { top: 16%; left: 4%; }
.label-b { top: 57%; right: 1%; }
.label-c { bottom: 12%; left: 30%; }
.garden-card { min-width: 108px; padding: 12px 14px; border-radius: 15px; }
.garden-card small, .garden-card span { display: block; color: var(--muted-2); font: 500 7px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.garden-card strong { display: block; margin: 4px 0; font-size: 18px; letter-spacing: -.05em; }
.garden-card.card-a { top: 10%; right: 0; }
.garden-card.card-b { bottom: 8%; left: 1%; }

/* Continuity across all sections */
.ticker { border-color: var(--garden-line); background: color-mix(in srgb, var(--panel-solid) 48%, transparent); }
.ticker-track b { color: var(--garden-petal); }
.section, .split-section, .about-space { position: relative; }
.section::before, .split-section::before, .about-space::before { content: '✦'; position: absolute; top: 27px; right: max(0px, calc((100vw - var(--max)) / 2)); color: color-mix(in srgb, var(--garden-gold) 62%, transparent); font: 16px/1 var(--serif); opacity: .75; }
.section-head h2::after, .mini-section h2::after, .about-space h2::after { color: var(--garden-petal); }
.collection, .work-card, .link-card, .tool-card, .system-grid div, .vault-public-card { border-color: var(--garden-line); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 80%, transparent), color-mix(in srgb, var(--panel) 88%, transparent)); }
.collection::before { content: ''; position: absolute; right: -23px; bottom: -30px; width: 100px; height: 100px; border: 1px solid color-mix(in srgb, var(--garden-leaf) 35%, transparent); border-radius: 100% 0 100% 0; transform: rotate(28deg); opacity: .75; }
.collection::after { content: ''; position: absolute; left: -30px; top: -30px; width: 86px; height: 86px; border-radius: 50%; background: color-mix(in srgb, var(--garden-leaf) 12%, transparent); filter: blur(16px); }
.collection.featured { background: linear-gradient(135deg, color-mix(in srgb, var(--garden-leaf) 20%, var(--panel-solid)), color-mix(in srgb, var(--garden-petal) 12%, var(--panel-solid))); }
.collection:hover, .work-card:hover, .link-card:hover, .tool-card:hover, .system-grid div:hover { border-color: color-mix(in srgb, var(--garden-petal) 45%, var(--line)); box-shadow: var(--garden-shadow); }
.arrow, .link-open { color: var(--garden-petal); }

/* Work specimens */
.visual-one { background: radial-gradient(circle at 68% 31%, color-mix(in srgb, var(--garden-gold) 25%, transparent), transparent 28%), linear-gradient(145deg, #1d2b1d, #382639); }
.visual-two { background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--garden-petal) 26%, transparent), transparent 36%), linear-gradient(145deg, #17271e, #2c2339); }
.visual-three { background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--garden-petal-deep) 28%, transparent), transparent 28%), linear-gradient(145deg, #18261d, #37252e); }
.visual-chip { background: rgba(10,14,8,.38); border-color: rgba(255,255,255,.16); }
.specimen-frame { position: relative; width: 70%; height: 74%; overflow: hidden; border: 1px solid rgba(235,224,196,.25); border-radius: 50% 50% 14px 14px; background: linear-gradient(180deg, rgba(170,188,132,.18), rgba(16,23,14,.23)); box-shadow: inset 0 0 30px rgba(255,233,183,.08), 0 20px 40px rgba(0,0,0,.28); }
.specimen-frame::before { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(235,224,196,.16); border-radius: 50% 50% 12px 12px; }
.specimen-frame b { position: absolute; left: 16px; bottom: 13px; color: rgba(255,242,218,.78); font: 500 8px/1 var(--mono); letter-spacing: .13em; }
.specimen-stem { position: absolute; left: 51%; bottom: 22px; width: 2px; height: 170px; background: linear-gradient(180deg, transparent, #a5c27d); transform: rotate(12deg); transform-origin: bottom; }
.specimen-flower { position: absolute; left: 46%; top: 48px; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, #f5c177 0 10%, #d88979 12% 24%, #bc79a8 26% 52%, transparent 55%); box-shadow: 0 0 28px rgba(227,164,186,.42); transform: translateX(-50%); }
.specimen-flower::before, .specimen-flower::after { content: ''; position: absolute; width: 55px; height: 86px; border-radius: 90% 10% 90% 10%; background: linear-gradient(145deg, rgba(245,192,202,.8), rgba(121,75,120,.7)); }
.specimen-flower::before { left: -41px; top: -23px; transform: rotate(-34deg); }
.specimen-flower::after { right: -41px; top: -23px; transform: rotate(34deg); }
.visual-spark { position: absolute; right: 18%; top: 27%; width: 6px; height: 6px; border-radius: 50%; background: var(--garden-gold); box-shadow: 0 0 15px 4px color-mix(in srgb, var(--garden-gold) 60%, transparent); }
.moonflower { position: relative; width: 132px; height: 132px; }
.moonflower i { position: absolute; left: 50%; top: 50%; width: 72px; height: 110px; border: 1px solid rgba(237,214,245,.25); border-radius: 88% 12% 88% 12%; background: linear-gradient(145deg, rgba(235,195,240,.72), rgba(105,69,139,.62) 55%, rgba(24,26,47,.65)); transform-origin: 50% 88%; }
.moonflower i:nth-child(1) { transform: translate(-50%,-90%) rotate(0); }
.moonflower i:nth-child(2) { transform: translate(-50%,-90%) rotate(90deg); }
.moonflower i:nth-child(3) { transform: translate(-50%,-90%) rotate(180deg); }
.moonflower i:nth-child(4) { transform: translate(-50%,-90%) rotate(270deg); }
.moonflower b { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 50%; background: #e9bd79; box-shadow: 0 0 25px #e9bd79aa; transform: translate(-50%,-50%); }
.pressed-bloom { position: relative; width: 145px; height: 128px; border: 1px solid rgba(231,216,190,.2); border-radius: 11px; background: linear-gradient(160deg, rgba(196,210,156,.18), rgba(99,69,88,.12)); box-shadow: 0 22px 40px rgba(0,0,0,.25); }
.pressed-bloom::before { content: ''; position: absolute; left: 50%; bottom: 20px; width: 2px; height: 90px; background: #b2cb8e; transform: rotate(-11deg); transform-origin: bottom; }
.pressed-bloom i { position: absolute; left: 50%; top: 38px; width: 40px; height: 58px; border-radius: 90% 10% 90% 10%; background: linear-gradient(145deg, rgba(227,160,175,.8), rgba(115,78,119,.65)); transform-origin: 50% 83%; }
.pressed-bloom i:nth-child(1) { transform: translate(-50%,-75%) rotate(0); }
.pressed-bloom i:nth-child(2) { transform: translate(-50%,-75%) rotate(120deg); }
.pressed-bloom i:nth-child(3) { transform: translate(-50%,-75%) rotate(240deg); }

/* Gallery, directory, vault, and tools carry the same material language. */
.g { border-color: var(--garden-line); }
.g::before { border-color: rgba(255,229,215,.28); border-radius: 100% 0 100% 0; transform: rotate(33deg); }
.g::after { background: linear-gradient(135deg, transparent 18%, rgba(255,255,255,.12), transparent 72%); }
.g1 { background: radial-gradient(circle at 65% 22%, #e1a78c66, transparent 30%), linear-gradient(145deg, #263e30, #292035); }
.g2 { background: radial-gradient(circle at 30% 30%, #c19adb66, transparent 32%), linear-gradient(145deg, #2d2340, #17241d); }
.g3 { background: radial-gradient(circle at 55% 54%, #e99aa966, transparent 35%), linear-gradient(145deg, #462c38, #1b271d); }
.g4 { background: linear-gradient(145deg, #253a2b, #252034); }
.g5 { background: radial-gradient(circle at 30% 30%, #c8d99455, transparent 30%), linear-gradient(145deg, #304630, #20252d); }
.g6 { background: linear-gradient(135deg, #4b2b35, #1b271e); }
.notes-directory { border-color: var(--garden-line); }
.vault { background: linear-gradient(110deg, color-mix(in srgb, var(--garden-leaf) 12%, var(--panel-solid)), color-mix(in srgb, var(--panel-solid) 92%, transparent)); }
.vault::after { border-color: color-mix(in srgb, var(--garden-petal) 33%, transparent); }
.vault-lock { border-color: color-mix(in srgb, var(--garden-leaf) 40%, var(--line)); background: color-mix(in srgb, var(--garden-leaf) 14%, var(--panel-raised)); color: var(--garden-leaf); }
.system-grid div::after, .tool-card::before { color: var(--garden-petal); border-color: color-mix(in srgb, var(--garden-petal) 35%, transparent); }
.footer { border-color: var(--garden-line); }
.footer-signal-orbit { border-color: color-mix(in srgb, var(--garden-leaf) 45%, transparent); }
.footer-signal-orbit::after { border-color: color-mix(in srgb, var(--garden-petal) 45%, transparent); }
.footer-signal-orbit i:first-child { background: var(--garden-petal); }
.footer-signal-orbit i:last-child { background: var(--garden-leaf); }

/* Motion-safe parallax stage */
.reveal { animation: revealFallback .001s .85s forwards; }
@keyframes revealFallback { to { opacity: 1; transform: none; } }
@media (max-width: 980px) { .reveal { opacity: 1; transform: none; animation: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; animation: none; } }

@media (max-width: 980px) {
  .hero { padding-top: 150px; }
  .garden-stage { height: 360px; }
  .garden-card.card-a { right: 2%; }
  .orbit-page { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 82px; }
  .shell { width: calc(100% - 26px); }
  .topbar { top: max(8px, env(safe-area-inset-top)); width: calc(100% - 16px); height: 54px; }
  .nav-pill { height: 54px; padding: 0 7px 0 9px; border-radius: 18px; gap: 7px; }
  .brand { min-width: 0; gap: 7px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .brand-word { font-size: 12px; }
  .top-actions { margin-left: auto; }
  .admin-link { width: 40px; height: 38px; padding: 0; border-radius: 12px; }
  .admin-link span { display: none; }
  .menu-btn { display: grid; place-items: center; width: 38px; height: 38px; }
  .mobile-nav { top: 62px; grid-template-columns: repeat(2,1fr); border-radius: 15px; }
  .hero { padding: 118px 0 50px; gap: 2px; }
  .eyebrow { font-size: 7px; letter-spacing: .14em; }
  .hero h1 { margin: 18px 0; font-size: clamp(42px, 12.9vw, 56px); }
  .hero-copy { font-size: 12px; line-height: 1.75; }
  .hero-actions { margin-top: 22px; }
  .hero-actions .btn { min-height: 45px; padding-inline: 15px; }
  .hero-meta { gap: 10px; margin-top: 20px; font-size: 7px; }
  .garden-stage { height: 300px; margin-top: 12px; }
  .garden-glow { width: 300px; height: 300px; }
  .hero-bloom { width: 185px; height: 185px; }
  .hero-bloom .petal { width: 88px; height: 126px; }
  .bloom-core { width: 58px; height: 58px; }
  .stem { height: 230px; }
  .leaf { width: 58px; height: 26px; }
  .garden-card { min-width: 83px; padding: 9px 10px; transform: scale(.86); }
  .garden-card strong { font-size: 15px; }
  .garden-card.card-a { top: 7%; right: 0; }
  .garden-card.card-b { bottom: 5%; left: 0; }
  .label-a { top: 7%; left: 2%; }
  .label-b { top: 59%; right: 0; }
  .label-c { bottom: 2%; left: 26%; }
  .section, .split-section, .about-space { padding: 65px 0; }
  .section::before, .split-section::before, .about-space::before { top: 18px; right: 3px; }
  .section-head, .directory-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .section-head h2, .mini-section h2, .vault h2, .about-space h2, .directory-head h2 { font-size: 27px; }
  .archive-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .works-grid { grid-template-columns: 1fr; }
  .work-card.large { grid-column: auto; }
  .collection { min-height: 105px; padding: 15px; border-radius: 15px; }
  .work-visual, .large .work-visual { height: 210px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 108px; }
  .g1 { grid-row: span 2; }
  .links-controls { align-items: stretch; flex-direction: column; }
  .links-search { max-width: none; min-height: 46px; }
  .links-search input { font-size: 16px; }
  .links-categories { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .link-filter { flex: 0 0 auto; min-height: 38px; }
  .orbit-page { grid-template-columns: 1fr; }
  .link-preview { height: 158px; }
  .vault { margin-bottom: 65px; padding: 20px; }
  .vault-row { grid-template-columns: 1fr 1fr; }
  .vault-row div:last-of-type { grid-column: 1/-1; }
  .vault-public-card { grid-template-columns: 1fr; padding: 19px; }
  .vault-lock { width: 54px; height: 54px; }
  .vault-public-card h3 { font-size: 20px; }
  .system-grid { gap: 7px; }
  .system-grid div { padding: 14px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 17px; }
  .tool-input, .tool-output, input, select, textarea { font-size: 16px !important; }
  .footer-main { grid-template-columns: 1fr; gap: 17px; }
  .footer-copy { grid-column: auto; grid-row: auto; text-align: left; }
  .footer-signal { justify-content: start; }
  .footer-bottom { flex-direction: column; gap: 9px; line-height: 1.4; }
  .modal-art { height: 230px; }
  .cursor-glow { display: none; }
}

/* Premium botanical scrollbars */
:root { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--garden-petal) 72%, transparent) transparent; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--garden-petal) 72%, transparent) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: linear-gradient(180deg, var(--garden-leaf), var(--garden-petal), var(--garden-gold)); background-clip: padding-box; box-shadow: 0 2px 12px color-mix(in srgb, var(--garden-petal) 25%, transparent); }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--garden-gold), var(--garden-petal)); background-clip: padding-box; }


/* =========================================================
   ANDOVA / ENCHANTED BOTANICAL WORLD
   Frontend-only override. No planet, orbital, or HUD visuals.
   ========================================================= */
:root {
  --garden-ink: #0d130f;
  --garden-moss: #1b2a1b;
  --garden-leaf: #b1d28c;
  --garden-petal: #e6a6b6;
  --garden-petal-deep: #965a78;
  --garden-gold: #efc985;
  --garden-cream: #fbf0dd;
  --garden-line: rgba(245,235,211,.14);
  --garden-shadow: 0 30px 90px rgba(0,0,0,.32);
}
:root[data-theme=light] {
  --garden-ink: #f4ecdf;
  --garden-moss: #d7e0c8;
  --garden-leaf: #58845d;
  --garden-petal: #c77d94;
  --garden-petal-deep: #8c506d;
  --garden-gold: #ae7e3e;
  --garden-cream: #2b271e;
  --garden-line: rgba(62,54,41,.14);
  --garden-shadow: 0 28px 80px rgba(85,62,38,.13);
}
body {
  background:
    radial-gradient(ellipse at 12% 8%, color-mix(in srgb, var(--garden-leaf) 13%, transparent), transparent 33%),
    radial-gradient(ellipse at 93% 27%, color-mix(in srgb, var(--garden-petal) 10%, transparent), transparent 28%),
    linear-gradient(180deg, var(--bg-soft), var(--bg) 50%, var(--bg-deep));
}
body::before { opacity: .11; }
.cursor-glow { background: radial-gradient(circle, color-mix(in srgb, var(--garden-gold) 16%, transparent), transparent 68%); }
.botanical-world { display: block; position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.botanical-world::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 60%, color-mix(in srgb, var(--garden-leaf) 9%, transparent) 88%, transparent); }
.botanical-world::after { content: ''; position: absolute; left: 50%; top: 39%; width: 720px; height: 720px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, color-mix(in srgb, var(--garden-gold) 13%, transparent), transparent 65%); filter: blur(27px); opacity: .5; }
.world-vine { position: absolute; width: 540px; height: 780px; border: 1px solid color-mix(in srgb, var(--garden-leaf) 29%, transparent); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: .35; }
.wv-left { left: -370px; top: 4%; transform: rotate(25deg); }
.wv-right { right: -380px; top: 18%; transform: rotate(-24deg); border-color: color-mix(in srgb, var(--garden-petal) 28%, transparent); }
.world-petal { position: absolute; width: 17px; height: 28px; border: 1px solid color-mix(in srgb, var(--garden-petal) 54%, transparent); border-radius: 100% 0 100% 0; background: linear-gradient(145deg, color-mix(in srgb, var(--garden-petal) 72%, transparent), color-mix(in srgb, var(--garden-petal-deep) 28%, transparent)); opacity: .52; }
.wp-1 { left: 8%; top: 21%; transform: rotate(32deg); }
.wp-2 { left: 88%; top: 24%; transform: rotate(120deg) scale(.8); opacity: .35; }
.wp-3 { left: 14%; top: 67%; transform: rotate(186deg) scale(.76); opacity: .32; }
.wp-4 { left: 79%; top: 72%; transform: rotate(246deg); opacity: .30; }
.wp-5 { left: 58%; top: 11%; transform: rotate(300deg) scale(.66); opacity: .28; }
.wp-6 { left: 47%; top: 86%; transform: rotate(72deg) scale(.55); opacity: .22; }
.world-firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--garden-gold); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--garden-gold) 58%, transparent); opacity: .72; }
.wf-1 { left: 18%; top: 38%; }
.wf-2 { left: 76%; top: 34%; opacity: .44; }
.wf-3 { left: 68%; top: 79%; opacity: .38; }
.wf-4 { left: 35%; top: 82%; opacity: .42; }

.topbar { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; width: min(calc(100% - 28px), 1250px); height: 60px; margin: 0; transform: translateX(-50%); }
.nav-pill { height: 60px; border-color: var(--garden-line); background: color-mix(in srgb, var(--panel-solid) 80%, transparent); box-shadow: 0 18px 52px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.11); backdrop-filter: blur(23px) saturate(1.3); }
.brand-mark, .footer-brand-mark { border-color: color-mix(in srgb, var(--garden-petal) 45%, var(--line)); background: linear-gradient(145deg, color-mix(in srgb, var(--garden-leaf) 28%, transparent), color-mix(in srgb, var(--garden-petal) 24%, transparent)); }
.brand-mark::after, .footer-brand-mark::after { border-color: color-mix(in srgb, var(--garden-gold) 76%, transparent); }
.desktop-nav a:hover, .desktop-nav a.active { background: color-mix(in srgb, var(--garden-leaf) 18%, transparent); }
.desktop-nav a.active::after { background: var(--garden-petal); box-shadow: 0 0 10px var(--garden-petal); }
.admin-link { border-color: color-mix(in srgb, var(--garden-petal) 42%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--garden-petal) 14%, transparent), color-mix(in srgb, var(--garden-leaf) 12%, transparent)); }
.admin-link::before { color: var(--garden-gold); }
.admin-link:hover { border-color: var(--garden-petal); box-shadow: 0 12px 30px color-mix(in srgb, var(--garden-petal) 21%, transparent); }

.hero { min-height: 710px; padding: 150px 0 100px; gap: 24px; }
.eyebrow { border-color: var(--garden-line); background: color-mix(in srgb, var(--panel) 82%, transparent); }
.eyebrow i, .live-dot, .footer-status-dot { background: var(--garden-leaf); box-shadow: 0 0 12px var(--garden-leaf); }
.hero h1 { font-family: var(--sans); letter-spacing: -.085em; }
.hero h1 em { font-family: var(--serif); background: linear-gradient(100deg, var(--garden-leaf), var(--garden-petal), var(--garden-gold)); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 510px; }
.btn.primary { background: linear-gradient(135deg, var(--garden-leaf), var(--garden-petal-deep)); box-shadow: 0 15px 34px color-mix(in srgb, var(--garden-petal-deep) 23%, transparent); }
.btn.primary:hover { box-shadow: 0 18px 40px color-mix(in srgb, var(--garden-petal) 26%, transparent); }
.btn.ghost { background: color-mix(in srgb, var(--panel-solid) 72%, transparent); }

.garden-stage { position: relative; display: grid; place-items: center; height: 455px; isolation: isolate; }
.garden-glow { position: absolute; width: 430px; height: 430px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--garden-gold) 17%, transparent), transparent 67%); filter: blur(18px); opacity: .66; }
.garden-haze { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--garden-leaf) 17%, transparent); filter: blur(28px); }
.haze-back { width: 310px; height: 210px; top: 11%; left: 10%; transform: rotate(-25deg); opacity: .54; }
.haze-front { right: 5%; bottom: 10%; width: 260px; height: 155px; transform: rotate(19deg); opacity: .42; background: color-mix(in srgb, var(--garden-petal) 18%, transparent); }
.stem { position: absolute; z-index: 1; bottom: 9%; width: 2px; height: 330px; border-radius: 100%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--garden-leaf) 78%, transparent)); transform-origin: bottom center; }
.stem-a { left: 31%; transform: rotate(18deg); }
.stem-b { left: 61%; height: 290px; transform: rotate(-17deg); opacity: .72; }
.leaf { position: absolute; z-index: 2; width: 74px; height: 32px; border: 1px solid color-mix(in srgb, var(--garden-leaf) 68%, transparent); border-radius: 100% 0 100% 0; background: linear-gradient(135deg, color-mix(in srgb, var(--garden-leaf) 41%, transparent), transparent); }
.leaf-a { left: 22%; bottom: 30%; transform: rotate(24deg); }
.leaf-b { left: 63%; bottom: 38%; transform: rotate(163deg) scale(.75); }
.hero-bloom { position: relative; z-index: 3; width: 255px; height: 255px; filter: drop-shadow(0 25px 28px rgba(0,0,0,.28)); transform: translateY(-5px); }
.hero-bloom::after { content: ''; position: absolute; left: 50%; bottom: -72px; width: 190px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--garden-leaf) 20%, transparent); filter: blur(18px); transform: translateX(-50%); }
.hero-bloom .petal { position: absolute; left: 50%; top: 50%; width: 116px; height: 174px; border: 1px solid rgba(255,241,225,.24); border-radius: 88% 12% 82% 18%; background: linear-gradient(145deg, rgba(255,214,197,.94), color-mix(in srgb, var(--garden-petal) 77%, transparent) 58%, color-mix(in srgb, var(--garden-petal-deep) 78%, transparent)); box-shadow: inset 14px 8px 23px rgba(255,255,255,.22), inset -16px -16px 24px rgba(50,24,49,.28); transform-origin: 50% 92%; }
.hero-bloom .petal-a { transform: translate(-50%,-92%) rotate(0); }
.hero-bloom .petal-b { transform: translate(-50%,-92%) rotate(45deg); }
.hero-bloom .petal-c { transform: translate(-50%,-92%) rotate(90deg); }
.hero-bloom .petal-d { transform: translate(-50%,-92%) rotate(135deg); }
.hero-bloom .petal-e { transform: translate(-50%,-92%) rotate(180deg); }
.hero-bloom .petal-f { transform: translate(-50%,-92%) rotate(225deg); }
.hero-bloom .petal-g { transform: translate(-50%,-92%) rotate(270deg); }
.hero-bloom .petal-h { transform: translate(-50%,-92%) rotate(315deg); }
.bloom-core { position: absolute; z-index: 5; left: 50%; top: 50%; width: 74px; height: 74px; border: 1px solid rgba(255,240,202,.48); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ffe4a2, #d28b52 48%, #633a4d 86%); box-shadow: 0 0 34px color-mix(in srgb, var(--garden-gold) 62%, transparent), inset 9px 8px 11px rgba(255,255,255,.35), inset -12px -14px 18px rgba(54,25,42,.3); transform: translate(-50%,-50%); }
.bloom-core::after { content: ''; position: absolute; inset: 18px; border: 1px dotted rgba(255,238,185,.6); border-radius: 50%; }
.garden-label, .garden-card { position: absolute; z-index: 6; border: 1px solid var(--garden-line); background: color-mix(in srgb, var(--panel-solid) 75%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(15px); }
.garden-label { padding: 6px 9px; border-radius: 999px; color: var(--muted); font: 500 7px/1 var(--mono); letter-spacing: .14em; }
.label-a { top: 16%; left: 4%; }
.label-b { top: 57%; right: 1%; }
.label-c { bottom: 12%; left: 30%; }
.garden-card { min-width: 108px; padding: 12px 14px; border-radius: 15px; }
.garden-card small, .garden-card span { display: block; color: var(--muted-2); font: 500 7px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.garden-card strong { display: block; margin: 4px 0; font-size: 18px; letter-spacing: -.05em; }
.garden-card.card-a { top: 10%; right: 0; }
.garden-card.card-b { bottom: 8%; left: 1%; }

.ticker { border-color: var(--garden-line); background: color-mix(in srgb, var(--panel-solid) 48%, transparent); }
.ticker-track b { color: var(--garden-petal); }
.section, .split-section, .about-space { position: relative; }
.section::before, .split-section::before, .about-space::before { content: '✦'; position: absolute; top: 27px; right: max(0px, calc((100vw - var(--max)) / 2)); color: color-mix(in srgb, var(--garden-gold) 62%, transparent); font: 16px/1 var(--serif); opacity: .75; }
.section-head h2::after, .mini-section h2::after, .about-space h2::after { color: var(--garden-petal); }
.collection, .work-card, .link-card, .tool-card, .system-grid div, .vault-public-card { border-color: var(--garden-line); background: linear-gradient(145deg, color-mix(in srgb, var(--panel-solid) 82%, transparent), color-mix(in srgb, var(--panel) 88%, transparent)); }
.collection::before { content: ''; position: absolute; right: -23px; bottom: -30px; width: 100px; height: 100px; border: 1px solid color-mix(in srgb, var(--garden-leaf) 35%, transparent); border-radius: 100% 0 100% 0; transform: rotate(28deg); opacity: .75; }
.collection::after { content: ''; position: absolute; left: -30px; top: -30px; width: 86px; height: 86px; border-radius: 50%; background: color-mix(in srgb, var(--garden-leaf) 12%, transparent); filter: blur(16px); }
.collection.featured { background: linear-gradient(135deg, color-mix(in srgb, var(--garden-leaf) 20%, var(--panel-solid)), color-mix(in srgb, var(--garden-petal) 12%, var(--panel-solid))); }
.collection:hover, .work-card:hover, .link-card:hover, .tool-card:hover, .system-grid div:hover { border-color: color-mix(in srgb, var(--garden-petal) 45%, var(--line)); box-shadow: var(--garden-shadow); }
.arrow, .link-open { color: var(--garden-petal); }

.visual-one { background: radial-gradient(circle at 68% 31%, color-mix(in srgb, var(--garden-gold) 25%, transparent), transparent 28%), linear-gradient(145deg, #1d2b1d, #382639); }
.visual-two { background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--garden-petal) 26%, transparent), transparent 36%), linear-gradient(145deg, #17271e, #2c2339); }
.visual-three { background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--garden-petal-deep) 28%, transparent), transparent 28%), linear-gradient(145deg, #18261d, #37252e); }
.specimen-frame { position: relative; width: 70%; height: 74%; overflow: hidden; border: 1px solid rgba(235,224,196,.25); border-radius: 50% 50% 14px 14px; background: linear-gradient(180deg, rgba(170,188,132,.18), rgba(16,23,14,.23)); box-shadow: inset 0 0 30px rgba(255,233,183,.08), 0 20px 40px rgba(0,0,0,.28); }
.specimen-frame::before { content: ''; position: absolute; inset: 15px; border: 1px solid rgba(235,224,196,.16); border-radius: 50% 50% 12px 12px; }
.specimen-frame b { position: absolute; left: 16px; bottom: 13px; color: rgba(255,242,218,.78); font: 500 8px/1 var(--mono); letter-spacing: .13em; }
.specimen-stem { position: absolute; left: 51%; bottom: 22px; width: 2px; height: 170px; background: linear-gradient(180deg, transparent, #a5c27d); transform: rotate(12deg); transform-origin: bottom; }
.specimen-flower { position: absolute; left: 46%; top: 48px; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, #f5c177 0 10%, #d88979 12% 24%, #bc79a8 26% 52%, transparent 55%); box-shadow: 0 0 28px rgba(227,164,186,.42); transform: translateX(-50%); }
.specimen-flower::before, .specimen-flower::after { content: ''; position: absolute; width: 55px; height: 86px; border-radius: 90% 10% 90% 10%; background: linear-gradient(145deg, rgba(245,192,202,.8), rgba(121,75,120,.7)); }
.specimen-flower::before { left: -41px; top: -23px; transform: rotate(-34deg); }
.specimen-flower::after { right: -41px; top: -23px; transform: rotate(34deg); }
.visual-spark { position: absolute; right: 18%; top: 27%; width: 6px; height: 6px; border-radius: 50%; background: var(--garden-gold); box-shadow: 0 0 15px 4px color-mix(in srgb, var(--garden-gold) 60%, transparent); }
.moonflower { position: relative; width: 132px; height: 132px; }
.moonflower i { position: absolute; left: 50%; top: 50%; width: 72px; height: 110px; border: 1px solid rgba(237,214,245,.25); border-radius: 88% 12% 88% 12%; background: linear-gradient(145deg, rgba(235,195,240,.72), rgba(105,69,139,.62) 55%, rgba(24,26,47,.65)); transform-origin: 50% 88%; }
.moonflower i:nth-child(1) { transform: translate(-50%,-90%) rotate(0); }
.moonflower i:nth-child(2) { transform: translate(-50%,-90%) rotate(90deg); }
.moonflower i:nth-child(3) { transform: translate(-50%,-90%) rotate(180deg); }
.moonflower i:nth-child(4) { transform: translate(-50%,-90%) rotate(270deg); }
.moonflower b { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 50%; background: #e9bd79; box-shadow: 0 0 25px #e9bd79aa; transform: translate(-50%,-50%); }
.pressed-bloom { position: relative; width: 145px; height: 128px; border: 1px solid rgba(231,216,190,.2); border-radius: 11px; background: linear-gradient(160deg, rgba(196,210,156,.18), rgba(99,69,88,.12)); box-shadow: 0 22px 40px rgba(0,0,0,.25); }
.pressed-bloom::before { content: ''; position: absolute; left: 50%; bottom: 20px; width: 2px; height: 90px; background: #b2cb8e; transform: rotate(-11deg); transform-origin: bottom; }
.pressed-bloom i { position: absolute; left: 50%; top: 38px; width: 40px; height: 58px; border-radius: 90% 10% 90% 10%; background: linear-gradient(145deg, rgba(227,160,175,.8), rgba(115,78,119,.65)); transform-origin: 50% 83%; }
.pressed-bloom i:nth-child(1) { transform: translate(-50%,-75%) rotate(0); }
.pressed-bloom i:nth-child(2) { transform: translate(-50%,-75%) rotate(120deg); }
.pressed-bloom i:nth-child(3) { transform: translate(-50%,-75%) rotate(240deg); }

.g { border-color: var(--garden-line); }
.g::before { border-color: rgba(255,229,215,.28); border-radius: 100% 0 100% 0; transform: rotate(33deg); }
.g1 { background: radial-gradient(circle at 65% 22%, #e1a78c66, transparent 30%), linear-gradient(145deg, #263e30, #292035); }
.g2 { background: radial-gradient(circle at 30% 30%, #c19adb66, transparent 32%), linear-gradient(145deg, #2d2340, #17241d); }
.g3 { background: radial-gradient(circle at 55% 54%, #e99aa966, transparent 35%), linear-gradient(145deg, #462c38, #1b271d); }
.g4 { background: linear-gradient(145deg, #253a2b, #252034); }
.g5 { background: radial-gradient(circle at 30% 30%, #c8d99455, transparent 30%), linear-gradient(145deg, #304630, #20252d); }
.g6 { background: linear-gradient(135deg, #4b2b35, #1b271e); }
.g::after { background: linear-gradient(135deg, transparent 18%, rgba(255,255,255,.12), transparent 72%); }
.vault { background: linear-gradient(110deg, color-mix(in srgb, var(--garden-leaf) 12%, var(--panel-solid)), color-mix(in srgb, var(--panel-solid) 92%, transparent)); }
.vault-lock { border-color: color-mix(in srgb, var(--garden-leaf) 40%, var(--line)); background: color-mix(in srgb, var(--garden-leaf) 14%, var(--panel-raised)); color: var(--garden-leaf); }
.system-grid div::after, .tool-card::before { color: var(--garden-petal); border-color: color-mix(in srgb, var(--garden-petal) 35%, transparent); }
.footer { border-color: var(--garden-line); }

@media (max-width: 980px) {
  .reveal { opacity: 1; transform: none; animation: none; }
  .garden-stage { height: 360px; }
}
@media (max-width: 600px) {
  .hero { padding: 118px 0 50px; }
  .garden-stage { height: 300px; margin-top: 12px; }
  .garden-glow { width: 300px; height: 300px; }
  .hero-bloom { width: 185px; height: 185px; }
  .hero-bloom .petal { width: 88px; height: 126px; }
  .bloom-core { width: 58px; height: 58px; }
  .stem { height: 230px; }
  .leaf { width: 58px; height: 26px; }
  .garden-card { min-width: 83px; padding: 9px 10px; transform: scale(.86); }
  .garden-card strong { font-size: 15px; }
  .garden-card.card-a { top: 7%; right: 0; }
  .garden-card.card-b { bottom: 5%; left: 0; }
  .label-a { top: 7%; left: 2%; }
  .label-b { top: 59%; right: 0; }
  .label-c { bottom: 2%; left: 26%; }
  .section::before, .split-section::before, .about-space::before { top: 18px; right: 3px; }
  .tool-input, .tool-output, input, select, textarea { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
}
:root { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--garden-petal) 72%, transparent) transparent; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--garden-petal) 72%, transparent) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: linear-gradient(180deg, var(--garden-leaf), var(--garden-petal), var(--garden-gold)); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--garden-gold), var(--garden-petal)); background-clip: padding-box; }


/* Content must never depend on reveal timing for first paint. Motion enhances, never hides. */
.reveal { opacity: 1 !important; transform: none !important; animation: none !important; }


/* Theme transition used by the preserved brand toggle. */
.theme-expand { position: fixed; inset: 0; z-index: 120; pointer-events: none; background: #10130f; clip-path: circle(0 at var(--theme-x, 50%) var(--theme-y, 40px)); }
.theme-expand-light { background: #f3ecdf; }
.theme-expand.theme-reveal { animation: botanicalThemeReveal .62s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes botanicalThemeReveal { to { clip-path: circle(150vmax at var(--theme-x, 50%) var(--theme-y, 40px)); } }


/* Two tiny fireflies trace the fixed pill perimeter without affecting layout. */
.nav-pill::before, .nav-pill::after { content:''; position:absolute; z-index:4; width:5px; height:5px; border-radius:50%; pointer-events:none; background:var(--garden-gold); box-shadow:0 0 10px 3px color-mix(in srgb, var(--garden-gold) 62%, transparent), 0 0 2px 1px rgba(255,255,255,.32); offset-path:inset(0 round 999px); offset-rotate:0deg; animation: pillFirefly 13s linear infinite; }
.nav-pill::after { width:4px; height:4px; background:var(--garden-petal); box-shadow:0 0 9px 3px color-mix(in srgb, var(--garden-petal) 58%, transparent); animation-duration:17s; animation-delay:-7s; }
@keyframes pillFirefly { from { offset-distance:0%; } to { offset-distance:100%; } }

/* Connected environmental lighting as sections pass through the garden. */
#archive { background:radial-gradient(ellipse at 88% 26%, color-mix(in srgb, var(--garden-leaf) 7%, transparent), transparent 32%); }
#works { background:radial-gradient(ellipse at 16% 46%, color-mix(in srgb, var(--garden-petal) 7%, transparent), transparent 34%); }
#gallery { background:radial-gradient(ellipse at 78% 58%, color-mix(in srgb, var(--garden-gold) 6%, transparent), transparent 32%); }
#links { background:radial-gradient(ellipse at 24% 44%, color-mix(in srgb, var(--garden-leaf) 6%, transparent), transparent 32%); }
#vault { background:radial-gradient(ellipse at 82% 42%, color-mix(in srgb, var(--garden-petal) 6%, transparent), transparent 30%); }
#tools { background:radial-gradient(ellipse at 38% 42%, color-mix(in srgb, var(--garden-gold) 5%, transparent), transparent 30%); }
@media (max-width:600px) { .nav-pill::before, .nav-pill::after { animation-duration:18s; } }
@media (prefers-reduced-motion:reduce) { .nav-pill::before, .nav-pill::after { animation:none; opacity:.42; } }


/* =========================================================
   PRECISION REFINEMENT — COMPACT ARCHIVE + CALM RESPONSIVE NAV
   The botanical world remains unchanged; only directory density and
   mobile/tablet navigation chrome are refined here.
   ========================================================= */
.archive-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items:stretch;
}
.collection,
.collection.featured {
  min-height: 116px;
  padding: 15px 14px;
  border-radius: 15px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.collection:hover { transform:translateY(-4px); }
.collection .number { font-family:'DM Mono',ui-monospace,monospace; font-size:8px; letter-spacing:.1em; }
.collection small { font-family:'DM Mono',ui-monospace,monospace; font-size:7px; letter-spacing:.12em; }
.collection h3 { margin:5px 0 0; font-size:17px; letter-spacing:-.045em; }
.collection p { display:none; }
.collection .arrow { align-self:flex-end; margin-top:auto; }

/* Mobile and tablet keep all seven navigation cards compact and tactile. */
@media (max-width:1199px) {
  .archive-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:9px; }
  .collection, .collection.featured { min-height:104px; padding:14px 13px; }
}
@media (max-width:600px) {
  .topbar { width:calc(100% - 16px); }
  .nav-pill { display:flex; justify-content:flex-start; gap:8px; padding-inline:9px; }
  .desktop-nav { display:none !important; }
  .top-actions { margin-left:auto; flex:0 0 auto; }
  .admin-link { width:auto; min-width:72px; height:38px; padding:0 14px; border-radius:999px; }
  .admin-link span { display:inline !important; font-size:12px; }
  .menu-btn, .mobile-nav { display:none !important; }
  .archive-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; }
  .collection, .collection.featured { min-height:92px; padding:11px 10px; border-radius:12px; gap:5px; }
  .collection .number { font-size:7px; }
  .collection small { font-size:6px; letter-spacing:.08em; }
  .collection h3 { font-size:13px; letter-spacing:-.035em; }
  .collection .arrow { font-size:12px; }
  .collection::before { right:-25px; bottom:-34px; width:74px; height:74px; opacity:.5; }
  .collection::after { width:62px; height:62px; left:-22px; top:-22px; opacity:.6; }
}
@media (max-width:340px) {
  .brand-word { font-size:11px; }
  .admin-link { min-width:66px; padding-inline:11px; }
  .archive-grid { gap:6px; }
  .collection, .collection.featured { min-height:88px; padding:10px 8px; }
  .collection h3 { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .collection:hover { transform:none; } }


/* =========================================================
   MICRO REFINEMENT — SMALLER RECTANGULAR ARCHIVE + TABLET PILL
   ========================================================= */
.archive-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.collection, .collection.featured {
  min-height:96px;
  padding:12px 13px;
  border-radius:11px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.collection .number { align-self:start; padding-top:1px; }
.collection h3 { font-size:15px; line-height:1.1; margin:4px 0 0; }
.collection .arrow { align-self:start; margin:0; padding-top:1px; }
.collection::before { right:-18px; bottom:-25px; width:78px; height:78px; opacity:.45; }
.collection::after { left:-24px; top:-24px; width:68px; height:68px; opacity:.55; }

/* Tablet: keep only the brand and a right-anchored Admin action. */
@media (min-width:601px) and (max-width:1199px) {
  .topbar { width:calc(100% - 32px); }
  .nav-pill { display:flex; justify-content:flex-start; align-items:center; gap:10px; padding-inline:12px; }
  .desktop-nav { display:none !important; }
  .top-actions { margin-left:auto !important; flex:0 0 auto; display:flex; align-items:center; }
  .admin-link { width:auto; min-width:84px; height:40px; padding:0 16px; border-radius:999px; }
  .admin-link span { display:inline !important; font-size:12px; }
  .menu-btn, .mobile-nav { display:none !important; }
  .archive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .collection, .collection.featured { min-height:88px; padding:11px 12px; }
  .collection h3 { font-size:14px; }
}

/* Phones: compact rectangular directory buttons with readable labels. */
@media (max-width:600px) {
  .archive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .collection, .collection.featured { min-height:78px; padding:9px 8px; border-radius:10px; gap:6px; }
  .collection h3 { font-size:12px; }
  .collection .number { font-size:6.5px; }
  .collection small { font-size:5.8px; }
  .collection .arrow { font-size:11px; }
}
@media (max-width:340px) {
  .collection, .collection.featured { min-height:74px; padding-inline:7px; }
  .collection h3 { font-size:11px; }
}