/* Shared design tokens. All pages intentionally share one canvas and one header. */
:root {
  color-scheme:light;
  --canvas:#f6f5f0; --surface:#fdfcf8; --forest:#294d3b; --ink:#2b392e; --muted:#707668; --dim:#858b7a; --line:#dedfd4; --leaf:#5e7e47; --panel:#fafaf5; --panel-2:#edf0e5; --max:1200px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-display:"Iowan Old Style","Palatino Linotype","Songti SC","STSong","Noto Serif CJK SC",serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --ink-soft:#707668; --paper:#f6f5f0; --paper-2:#fdfcf8; --mint:#e5ecd7; --mint-dark:#42653c; --coral:#68834e; --yellow:#ccb972; --blue:#719079;
  --green:#42653c; --green-soft:#e9eedd; --amber:#956c2e; --amber-soft:#f1ead8; --berry:#a1686f; --tea:#806141;
  --bg:#f6f5f0; --bg-canvas:#f6f5f0; --bg-surface:#fdfcf8; --bg-surface-elevated:#eef0e5; --bg-surface-card:#fdfcf8; --bg-surface-hover:#e9eddf;
  --border-subtle:#e1e3d7; --border-card:#d7dcca; --border-focus:#5f7f48;
  --accent-emerald:#4e7340; --accent-emerald-subtle:#e8efdc; --accent-amber:#9b712f; --accent-amber-subtle:#f3ead6; --accent-blue:#597b8b; --accent-blue-subtle:#e7eef0; --accent-rose:#a56471; --accent-purple:#896896;
  --text-primary:#2b392e; --text-secondary:#6e7765; --text-muted:#7d8772;
  --shadow:0 10px 30px #34433309; --shadow-sm:0 1px 4px #34433308; --shadow-md:0 10px 28px #3443330c; --shadow-lg:0 22px 70px #14241826;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --transition-fast:.18s cubic-bezier(.2,.7,.3,1); --transition-normal:.24s cubic-bezier(.2,.7,.3,1);
}
* { box-sizing:border-box; }
html { background:var(--canvas); color:var(--ink); scroll-behavior:smooth; scroll-padding-top:100px; font-size:16px; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font-sans); line-height:1.65; -webkit-font-smoothing:antialiased; }
body.lh-nav-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }button,input,select,textarea { font:inherit; }button { cursor:pointer; }img { max-width:100%; display:block; }
::selection { background:#d9e4ba; color:#244731; }
:focus-visible { outline:2px solid #6b8b50; outline-offset:4px; }
[hidden] { display:none!important; }
.lh-skip { position:fixed; z-index:2000; left:20px; top:12px; padding:10px 18px; border-radius:7px; color:white; background:var(--forest); transform:translateY(-150%); }.lh-skip:focus { transform:none; }
.lh-header { position:sticky; top:0; z-index:100; background:#f6f5f0f5; border-bottom:1px solid #e1e2d7; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); view-transition-name:leafhaven-header; }
.lh-header .lh-nav { width:min(1200px,calc(100% - 80px)); min-height:76px; margin:0 auto; padding:0; display:flex; justify-content:space-between; align-items:center; gap:30px; overflow:visible; }
.lh-brand { display:flex; align-items:center; flex-shrink:0; gap:10px; padding:0!important; background:none!important; }
.lh-mark { display:grid; place-items:center; width:37px; height:42px; color:var(--forest); }.lh-mark svg { width:35px; height:35px; }
.lh-brand strong { display:block; font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1.15; letter-spacing:-.04em; color:var(--forest); }
.lh-brand-dot { color:#7b965a; }.lh-brand small { display:block; margin-top:4px; font-size:8px; letter-spacing:.12em; color:#7b826d; font-weight:400; }
.lh-links { display:flex; align-items:center; gap:26px; }.lh-header .lh-links>a { padding:8px 0; border-radius:0; background:transparent; font-size:12px; font-weight:500; color:#6a7561; white-space:nowrap; transition:color .18s; position:relative; }
.lh-header .lh-links>a:not(.lh-join)::after { content:''; position:absolute; bottom:2px; left:0; right:0; height:1px; background:#7b955d; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.lh-header .lh-links>a:hover,.lh-header .lh-links>a[aria-current] { color:var(--forest); }.lh-header .lh-links>a:hover::after,.lh-header .lh-links>a[aria-current]::after { transform:scaleX(1); }
.lh-header .lh-links>a.lh-join { margin-left:5px; padding:10px 18px; background:var(--forest); color:#fff; border-radius:7px; font-size:11px; }.lh-join span { margin-left:9px; }.lh-header .lh-links>a.lh-join:hover { background:#38614b; }
.lh-menu { display:none; position:relative; width:42px; height:42px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--forest); flex-shrink:0; }
.lh-menu span { position:absolute; width:18px; height:1.5px; background:currentColor; left:11px; top:16px; transition:transform .2s,top .2s; }.lh-menu span+span { top:23px; }.lh-menu[aria-expanded="true"] span { top:20px; transform:rotate(45deg); }.lh-menu[aria-expanded="true"] span+span { transform:rotate(-45deg); }
.lh-footer { padding:38px 0; border-top:1px solid var(--line); background:#efefe5; text-align:left; color:#7a826d; font-size:11px; }
.lh-footer-inner { width:min(1200px,calc(100% - 80px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.lh-footer-brand { font-family:var(--font-display); font-size:25px; letter-spacing:-.04em; color:var(--forest); }.lh-footer-brand>span { color:#799454; }.lh-footer-brand small { display:block; font-family:var(--font-sans); font-size:10px; letter-spacing:.04em; margin-top:5px; color:#7a826d; }
.lh-footer nav { display:flex; gap:24px; padding:0; width:auto; margin:0; overflow:visible; }.lh-footer nav a { padding:0; font-size:11px; font-weight:400; border-radius:0; color:#737e65; background:transparent; }.lh-footer a:hover { color:var(--forest); }.lh-copyright { font-size:10px; line-height:1.9; }
.lh-eyebrow { margin:0 0 18px; color:#68844e; font-size:11px; letter-spacing:.12em; font-weight:600; }
/* Content is readable before JavaScript runs. Reveals are a progressive enhancement. */
.reveal { opacity:1; transform:none; }
.toast { border-radius:9px; background:var(--forest); color:#fff; box-shadow:0 8px 28px #24473122; position:fixed; z-index:1100; bottom:24px; right:24px; left:auto; width:max-content; max-width:calc(100% - 40px); padding:12px 18px; font-size:12px; opacity:0; transform:translateY(7px); pointer-events:none; transition:opacity .18s,transform .18s; }.toast.show { opacity:1; transform:none; }
/* Native navigation keeps the header still while the page springs into place. */
@view-transition { navigation:auto; }
::view-transition { pointer-events:none; }
::view-transition-group(root) { animation-duration:640ms; }
::view-transition-old(root) { animation:lh-page-out 180ms ease-in both; }
::view-transition-new(root) { animation:lh-page-in 640ms both; transform-origin:50% 120px; }
::view-transition-group(leafhaven-header) { animation-duration:640ms; }
::view-transition-old(leafhaven-header) { animation:none; opacity:0; }
::view-transition-new(leafhaven-header) { animation:none; }
@keyframes lh-page-out { to { opacity:0; transform:translateY(-12px) scale(.99); } }
@keyframes lh-page-in {
  0% { opacity:0; transform:translateY(38px) scale(.975); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  58% { opacity:1; transform:translateY(-7px) scale(1.006); animation-timing-function:ease-in-out; }
  80% { transform:translateY(3px) scale(.998); animation-timing-function:ease-out; }
  100% { opacity:1; transform:none; }
}
/* Field guide */
.page-guide .app-shell { align-items:flex-start; min-height:calc(100vh - 76px); }
.page-guide .side-rail { flex:0 0 230px; position:sticky; inset:auto; top:76px; width:230px; height:calc(100vh - 76px); padding:32px 21px; background:#edf0e5; color:var(--ink); border-right:1px solid var(--line); z-index:6; }
.rail-heading { display:grid; gap:8px; padding:0 12px 28px; }.rail-heading span { font-size:9px; letter-spacing:.13em; color:#849373; }.rail-heading strong { font-family:var(--font-display); font-size:25px; font-weight:600; color:var(--forest); }
.page-guide .rail-label { color:#899178; font-size:10px; }.page-guide .nav-item { font-size:12px; color:#718166; padding:11px 12px; border-radius:7px; transition:background-color .18s,color .18s; }.page-guide .nav-item:hover { color:var(--forest); background:#e2e7d6; }.page-guide .nav-item.active { background:#dce5cc; color:#37532e; }.page-guide .rail-note { color:#77836a; border-color:#d5ddc8; background:#f7f7ef; }.page-guide .rail-note p { color:#77836a; font-size:11px; }.page-guide .rail-note strong { color:#5d7446; }
.page-guide .main { width:calc(100% - 230px); margin:0; min-width:0; }.page-guide .topbar { top:76px; padding:0 40px; min-height:62px; height:auto; background:#f6f5f0ed; gap:15px; }.page-guide .crumbs { font-size:11px; }.page-guide .crumbs>a { display:none; }.page-guide .crumbs>svg { display:none; }
.page-guide .top-actions .ghost-btn:not(.mobile-menu) { display:none; }.page-guide .ghost-btn,.page-guide .menu-trigger { font-size:11px; padding:7px 10px; background:transparent; border-radius:7px; font-weight:500; }.page-guide kbd { font-family:var(--font-mono); background:#f3f4e9; border-color:#d7dccd; color:#748265; font-size:9px; }
.page-guide .content { max-width:1160px; padding:35px 40px 70px; }.page-guide .hero { min-height:350px; grid-template-columns:1.05fr .95fr; gap:35px; padding:10px 0 44px; }.page-guide .hero h1 { font-family:var(--font-display); font-size:clamp(34px,3.8vw,54px); font-weight:600; line-height:1.45; letter-spacing:-.04em; }.page-guide .hero h1 em { color:#6b844f; }.page-guide .eyebrow { padding:0; background:none; color:#6e8654; font-size:10px; font-weight:500; letter-spacing:.03em; }.page-guide .eyebrow i { display:none; }.page-guide .hero-copy { font-size:13px; line-height:1.9; }.page-guide .metric { font-size:10px; border-radius:6px; padding:6px 8px; font-weight:400; }.page-guide .hero-metrics { gap:6px; margin-top:20px; }
.guide-photo { margin:0; padding:8px; border:1px solid var(--line); border-radius:70px 12px 12px 12px; background:#fdfcf8; transform:rotate(2deg); }.guide-photo img { width:100%; height:250px; object-fit:cover; border-radius:62px 7px 7px 7px; }.guide-photo figcaption { padding:12px 5px 5px; color:#79846a; font-size:10px; }
.page-guide .section-heading h3 { font-family:var(--font-display); font-weight:600; }.page-guide .quick-card { background:#fafaf5; box-shadow:none; border-radius:10px; transition:transform .2s,border-color .2s,background-color .2s; }.page-guide .quick-card:hover { border-color:#b8c7a3; background:#eef1e5; }.page-guide .lesson { background:#fafaf5; border-radius:12px; padding:26px; }.page-guide .lesson h4 { font-weight:600; }.page-guide .lesson-no { background:#e8eedc; border:1px solid #dce3ce; color:#6e8454; border-radius:9px; }.page-guide .command-box { background:#edf0e5; border-color:#dbe1ce; border-radius:7px; }.page-guide .command-box code { color:#405c36; }.page-guide .copy-btn { background:#e5ebd8; color:#5c7448; }.page-guide .info-card { background:#f1f2e9; }.page-guide .footer-note { background:var(--forest); }.page-guide .footer-note strong { color:#e0e9c6; }.page-guide .back-top { color:#cad9b9; }
/* Tea garden */
.page-tea .hero { min-height:350px; background:none; color:var(--ink); }
.page-tea .hero::before { background:none; }.page-tea .hero-inner { padding:64px 0 48px; border-bottom:1px solid var(--line); width:min(1200px,calc(100% - 80px)); }.page-tea .kicker { color:#718654; font-size:10px; letter-spacing:.12em; margin-bottom:18px; }.page-tea h1 { font-family:var(--font-display); font-size:clamp(36px,4.3vw,58px); font-weight:600; line-height:1.4; color:var(--forest); }.page-tea .hero-copy { color:var(--muted); font-size:14px; line-height:1.9; max-width:680px; }.page-tea .facts { margin-top:24px; }.page-tea .fact { background:#eef0e3; border-color:#dce1ce; color:#6a7c54; font-size:11px; border-radius:6px; }
.page-tea .nav-wrap { top:76px; background:#f6f5f0f2; border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }.page-tea .nav-wrap nav { width:min(1200px,calc(100% - 80px)); margin:auto; padding:10px 0; }.page-tea .nav-wrap a { color:#71825e; font-size:12px; border-radius:5px; }.page-tea .nav-wrap a[href="index.html"] { display:none; }.page-tea main { overflow:visible; }.page-tea main section { padding:65px 0; scroll-margin-top:145px; background:transparent; }.page-tea main section:nth-child(even) { background:#edf0e5; }.page-tea .inner { width:min(1200px,calc(100% - 80px)); }.page-tea h2 { font-family:var(--font-display); font-weight:600; font-size:34px; line-height:1.45; }.page-tea .section-head p { font-size:13px; line-height:1.9; }.page-tea .crop-card,.page-tea .drink-card { border-radius:12px; box-shadow:none; background:#fafaf5; }.page-tea .crop-card { padding:23px; }.page-tea .crop-icon { border-color:#dae2ca; border-radius:8px; }.page-tea h3 { font-size:17px; font-weight:600; }.page-tea .segmented button { padding:8px 16px; border-radius:7px; font-size:12px; transition:background-color .18s,color .18s,border-color .18s; }.page-tea .crafting { background:#e9ecdf; border-radius:12px; }.page-tea .flow-item { border-radius:0 8px 8px 0; }.page-tea .drink-band { height:5px; }.page-tea .callout { border-width:2px; border-radius:0 8px 8px 0; font-size:13px; }
/* Brewery */
.page-brew .hero-strip { padding:58px 40px 34px; background:var(--canvas); border:0; }.page-brew .hero-strip-inner { max-width:1200px; align-items:end; gap:30px; }.page-brew .hero-title { color:var(--forest); font-family:var(--font-display); font-size:clamp(34px,4vw,54px); line-height:1.4; font-weight:600; margin:0 0 16px; }.page-brew .hero-desc { font-size:13px; line-height:1.9; }.page-brew .quick-stat-pills { gap:8px; }.page-brew .stat-pill { min-width:90px; border:0; border-left:1px solid #d5dcc5; border-radius:0; background:transparent; padding:4px 12px; }.page-brew .stat-pill-val { color:#5c7543; font-size:21px; }.page-brew .stat-pill-label { font-size:10px; margin-top:4px; }
.brew-chapters { display:flex; gap:27px; width:min(1200px,calc(100% - 80px)); margin:0 auto; padding:20px 0; border-block:1px solid var(--line); color:#6e7d5b; font-size:12px; }.brew-chapters a:hover { color:var(--forest); }
.page-brew .workflow-section,.page-brew .codex-section,.page-brew .blueprint-strip,.page-brew .timer-section { max-width:1280px; padding-left:40px; padding-right:40px; scroll-margin-top:100px; }.page-brew .workflow-section { margin-top:30px; }.page-brew .workflow-card { background:#f0f2e8; padding:22px; border-radius:10px; }.page-brew .workflow-title { margin:9px 0; }.page-brew .workflow-rule { line-height:1.85; font-size:12px; }.page-brew .workflow-tip { font-size:10px; line-height:1.7; }.page-brew .codex-toolbar { background:#f9faf3; border-radius:12px; box-shadow:none; }.page-brew .search-input { background:#fffef9; }.page-brew .cat-pill { font-size:11px; }.page-brew .compact-card { border-radius:12px; box-shadow:none; transition:border-color .2s,box-shadow .2s,transform .2s; }.page-brew .compact-card:hover { border-color:#bac9a4; box-shadow:0 8px 22px #3443330a; }.page-brew .badge-alcohol { color:#98712c; border-color:#d7bc8066; }.page-brew .badge-sober { color:#54768c; border-color:#7b9da766; }.page-brew .badge-glint { color:#8a6596; background:#eee6ef; border-color:#c9afd166; }.page-brew .btn-primary { background:var(--forest); color:#fff; }.page-brew .btn-primary:hover { background:#3d634b; }.page-brew .btn-secondary:hover,.page-brew .modal-close-btn:hover { color:var(--ink); }.page-brew .difficulty-stars { color:#a38135; }.page-brew .codex-table { font-size:12px; }.page-brew .codex-table th { color:#6e7a5d; }.page-brew .modal-overlay { background:#1b302666; backdrop-filter:blur(4px); }.page-brew .modal-card { transform:translateY(10px) scale(.99); transition:transform .24s cubic-bezier(.2,.7,.3,1); }.page-brew .modal-overlay.active .modal-card { transform:none; }.page-brew .modal-card h2 { padding-right:28px; }.page-brew .modal-close-btn { z-index:2; }.page-brew .timer-digits-display { color:#4a6939; }.page-brew .compact-timer-box { background:#edf1e3; box-shadow:none; }.page-brew .timer-section { margin-bottom:45px; }.page-brew .compact-card:focus-visible { border-color:#6b8b50; outline-offset:2px; }
/* Title atelier */
.page-title .shell { width:min(1200px,calc(100% - 80px)); }.page-title main { padding:62px 0 80px; }.page-title h1 { font-family:var(--font-display); color:var(--forest); font-size:clamp(36px,4.4vw,58px); font-weight:600; line-height:1.4; }.page-title .eyebrow { font-size:10px; font-weight:500; }.page-title .lead { font-size:14px; line-height:1.9; margin-top:18px; }.page-title .tool { border:0; background:none; padding:0; gap:22px; margin-top:40px; grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr); }.page-title .controls,.page-title .preview { background:#fafaf5; border-radius:12px; padding:30px; border-color:var(--line); }.page-title .preview { align-content:start; }.page-title .field { font-size:12px; font-weight:500; }.page-title .field input[type="text"] { border-radius:6px; background:#fdfcf8; font-size:13px; }.page-title .mode-switch { background:#edf0e4; border:0; border-radius:8px; padding:4px; margin-top:20px; }.page-title .mode-button { font-size:12px; font-weight:500; border-radius:5px; }.page-title .mode-button.active { background:var(--forest); color:white; }.page-title .color-row input[type="color"] { background:#fdfcf8; border-radius:6px; }.page-title .preview-label { font-size:10px; font-weight:600; }.page-title .preview-stage { margin:20px 0 28px; padding:25px 12px; border-radius:10px; background:#24372b; }.page-title .preview-name { margin:0; min-height:140px; padding:12px; font-size:clamp(32px,4vw,54px); border-radius:8px; }.page-title .output { border-radius:6px; background:#eff2e6; color:#4a633d; font-size:12px; }.page-title .copy { background:var(--forest); color:white; font-size:12px; border-radius:6px; font-weight:500; }.page-title .copy:hover { background:#3c634b; }.page-title .code-label { font-size:11px; font-weight:500; }.page-title .code-label small { font-size:9px; }.page-title .hint { font-size:11px; font-weight:400; }.page-title .note { border-left:2px solid #a7b787; border-radius:0 8px 8px 0; background:#edf0e3; color:var(--muted); font-size:12px; }.page-title code { color:#516c3f; }.page-title .swatch,.page-title .gradient-swatch { border-color:#fafaf5; border-radius:6px; }.page-title .swatch-label { color:#839071; font-size:10px; font-weight:500; }
/* Chapter modal shares timing and keyboard handling with recipe dialogs. */
.page-guide .menu-overlay { display:grid; opacity:0; visibility:hidden; pointer-events:none; background:#1b302666; backdrop-filter:blur(4px); transition:opacity .2s,visibility .2s; z-index:1000; }.page-guide .menu-overlay.open { opacity:1; visibility:visible; pointer-events:auto; }.page-guide .menu-modal { transform:translateY(10px) scale(.99); transition:transform .24s cubic-bezier(.2,.7,.3,1); background:var(--canvas); }.page-guide .menu-overlay.open .menu-modal { transform:none; }.page-guide .menu-link { background:#fafaf5; }.page-guide .menu-link:hover { background:#edf1e3; }
@media (max-width:1100px) { .lh-header .lh-nav { width:calc(100% - 64px); gap:20px; }.lh-links { gap:18px; }.lh-brand strong { font-size:22px; }.lh-brand small { font-size:7px; }.page-guide .side-rail { flex-basis:200px; width:200px; padding:30px 14px; }.page-guide .main { width:calc(100% - 200px); }.page-guide .content { padding:30px; }.page-guide .topbar { padding:15px 30px; }.page-guide .hero { grid-template-columns:1fr; gap:25px; }.guide-photo { max-width:480px; }.guide-photo img { height:220px; } }
@media (max-width:900px) { .lh-menu { display:block; }.lh-header .lh-nav { min-height:70px; width:calc(100% - 40px); }.lh-links { position:absolute; left:0; top:100%; right:0; display:grid; gap:0; padding:14px 20px 22px; border-bottom:1px solid var(--line); background:#f6f5f0; box-shadow:0 15px 25px #203c2a0a; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px); transition:opacity .2s,transform .2s,visibility .2s; max-height:calc(100dvh - 70px); overflow:auto; }.lh-links.open { visibility:visible; pointer-events:auto; opacity:1; transform:none; }.lh-header .lh-links>a { padding:13px 10px; font-size:13px; border-bottom:1px solid #e5e7db; }.lh-header .lh-links>a::after { display:none; }.lh-header .lh-links>a[aria-current] { color:#4d6b3b; background:#e9eedc; border-radius:7px; }.lh-header .lh-links>a.lh-join { margin:14px 0 0; padding:13px; text-align:center; }.page-guide .side-rail { top:70px; height:calc(100vh - 70px); }.page-guide .topbar { top:70px; }.page-tea .nav-wrap { top:70px; }.page-brew .workflow-grid { grid-template-columns:repeat(2,1fr); }.page-title .tool { grid-template-columns:1fr 1fr; gap:15px; }.page-title .controls,.page-title .preview { padding:22px; } }
@media (max-width:760px) { html { scroll-padding-top:94px; }.lh-brand strong { font-size:23px; }.lh-brand small { font-size:7px; }.lh-footer { padding:32px 0; }.lh-footer-inner { width:calc(100% - 40px); display:grid; gap:25px; }.lh-footer nav { gap:22px; }.lh-copyright { font-size:9px; }.page-guide .side-rail { display:none; }.page-guide .main { width:100%; }.page-guide .topbar { padding:10px 20px; min-height:54px; }.page-guide .content { padding:30px 20px 50px; }.page-guide .hero { display:block; padding:0 0 35px; min-height:0; }.page-guide .hero h1 { font-size:39px; }.page-guide .hero-copy { font-size:13px; }.guide-photo { margin:30px 0 0; max-width:none; border-radius:45px 12px 12px 12px; }.guide-photo img { height:210px; border-radius:38px 7px 7px 7px; }.page-guide .lesson { padding:20px; }.page-guide .menu-trigger { display:none; }.page-guide .mobile-menu { display:inline-flex; }.page-guide .quick-card { padding:16px; }.page-guide .quick-card p { font-size:11px; }.page-guide .menu-grid { grid-template-columns:repeat(2,1fr); }.page-guide .menu-modal { max-height:85dvh; overflow:auto; padding:20px; }.page-guide .menu-link { padding:12px; }
.page-tea .hero { min-height:0; }.page-tea .hero-inner { width:calc(100% - 40px); padding:42px 0 32px; }.page-tea h1 { font-size:38px; }.page-tea .hero-copy { font-size:13px; }.page-tea .facts { gap:7px; }.page-tea .fact { padding:6px 8px; font-size:10px; }.page-tea .nav-wrap nav { width:calc(100% - 40px); }.page-tea .nav-wrap a { font-size:11px; }.page-tea .inner { width:calc(100% - 40px); }.page-tea main section { padding:48px 0; }.page-tea h2 { font-size:29px; }.page-tea .crop-card { padding:20px; }.page-tea .crop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.page-tea .crop-top { flex-wrap:wrap; gap:8px; }.page-tea .crop-meta { font-size:12px; }.page-tea .source { font-size:13px; }.page-tea .drink-grid { grid-template-columns:1fr; }.page-tea .crop-grid h3 { font-size:16px; }
.page-brew .hero-strip { padding:38px 20px 25px; }.page-brew .hero-strip-inner { display:block; }.page-brew .hero-title { font-size:35px; }.page-brew .hero-desc { font-size:12px; }.page-brew .quick-stat-pills { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:24px; }.page-brew .stat-pill { min-width:0; padding:2px 10px; }.page-brew .stat-pill:first-child { border-left:0; padding-left:0; }.page-brew .stat-pill-val { font-size:16px; }.page-brew .stat-pill-label { font-size:8px; }.brew-chapters { width:calc(100% - 40px); gap:20px; padding:16px 0; font-size:10px; overflow-x:auto; white-space:nowrap; }.page-brew .workflow-section,.page-brew .codex-section,.page-brew .blueprint-strip,.page-brew .timer-section { padding-left:20px; padding-right:20px; }.page-brew .workflow-grid { gap:10px; }.page-brew .workflow-card { padding:15px; }.page-brew .workflow-title { font-size:13px; }.page-brew .workflow-rule { font-size:11px; }.page-brew .workflow-step-badge { font-size:10px; }.page-brew .workflow-tip { font-size:9px; }.page-brew .search-input { font-size:12px; }.page-brew .codex-toolbar { padding:16px; }.page-brew .cat-pill { font-size:10px; }.page-brew .modal-overlay { padding:16px; }.page-brew .modal-card { max-height:88dvh; }.page-brew .modal-scroll { padding:24px 20px; }.page-brew .modal-card h2 { font-size:23px; }.page-brew .modal-flow-grid { grid-template-columns:repeat(2,1fr); }.page-brew .timer-section { margin-bottom:30px; }
.page-title .shell { width:calc(100% - 40px); }.page-title main { padding:40px 0 50px; }.page-title h1 { font-size:38px; max-width:330px; }.page-title .lead { font-size:13px; }.page-title .tool { grid-template-columns:1fr; margin-top:30px; }.page-title .controls,.page-title .preview { padding:23px; }.page-title .preview-name { font-size:42px; }.page-title .code-row { grid-template-columns:1fr auto; }.page-title .copy { padding:0 12px; }.page-title .code-label { font-size:11px; }.toast { bottom:18px; right:20px; left:20px; width:auto; text-align:center; max-width:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } *,*::before,*::after { animation-duration:.01ms!important; animation-delay:0s!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none!important; }.reveal { opacity:1!important; transform:none!important; } }

.page-guide .hero h1 { margin:17px 0 13px; }
@media(max-width:760px) { .page-tea .crop-top { flex-direction:column-reverse; align-items:flex-start; gap:14px; }.page-tea .crop-grid h3 { font-size:15px; } }

.page-brew .codex-section { margin-top:26px; margin-bottom:45px; }
.page-brew .workflow-section { margin-top:45px; margin-bottom:35px; }
.brew-section-title { font-family:var(--font-display); font-size:30px; line-height:1.5; font-weight:600; color:var(--forest); margin:0 0 24px; }
.table-open { padding:0; border:0; background:none; text-align:left; color:var(--forest); font-weight:600; }
.page-title .copy:disabled { background:#d5dbc9; color:#8d9880; cursor:default; }
@media(max-width:760px) { .page-brew .toolbar-top-row { display:grid; grid-template-columns:1fr; gap:12px; }.page-brew .search-input-wrap { width:100%; }.page-brew .view-switcher { justify-self:end; }.page-brew .search-shortcut-hint { display:none; }.page-brew .search-input { padding-right:2.4rem; }.brew-section-title { font-size:27px; }.page-brew .workflow-rule { font-size:12px; } }

@media(max-width:760px) { .page-title .title-next { display:block; } }
@media (min-width:761px) and (max-width:1000px) { .page-guide .side-rail { display:none; }.page-guide .main { width:100%; }.page-guide .lesson-grid { grid-template-columns:1fr; }.page-guide .hero { grid-template-columns:1fr 1fr; align-items:center; }.page-guide .hero h1 { font-size:43px; }.guide-photo { margin:0; }.guide-photo img { height:240px; } }

/* Elastic interaction layer: quick compression, softer release, a small overshoot. */
:root { --spring:cubic-bezier(.22,1.5,.4,1); --transition-fast:.24s cubic-bezier(.22,1.3,.4,1); --transition-normal:.3s ease; }
body[class] :is(button,.button,.lh-join,.quick-card,.workshop-card,.compact-card,.menu-link) {
  -webkit-tap-highlight-color:transparent;
  transition:scale .5s var(--spring),translate .5s var(--spring),background-color .2s,border-color .2s,box-shadow .25s;
}
body[class] :is(button:enabled,.button,.lh-join):active { scale:.94; transition-duration:90ms; }
body[class] :is(.quick-card,.workshop-card,.compact-card,.menu-link):active { scale:.97; transition-duration:90ms; }
@media (hover:hover) {
  :where(button:not(:disabled),.button,.lh-join):hover { translate:0 -2px; }
  :where(.quick-card,.workshop-card,.compact-card,.crop-card,.drink-card):hover { translate:0 -6px; box-shadow:0 12px 28px #34433312; }
}
.page-guide .quick-card,.page-brew .compact-card,.workshop-card,.page-tea .crop-card,.page-tea .drink-card {
  transition:translate .55s var(--spring),scale .5s var(--spring),background-color .2s,border-color .2s,box-shadow .25s;
}
.workshop-card:hover,.page-guide .quick-card:hover,.page-brew .compact-card:hover { transform:none; }
.button:hover { transform:none; }
.workshop-card h3 span,.button-icon { display:inline-block; transition:translate .5s var(--spring); }
.workshop-card:hover h3 span,.button:hover .button-icon { translate:4px 0; }
.lh-menu span { transition:transform .5s var(--spring),top .4s var(--spring); }
.page-brew .modal-overlay { transition:opacity .2s ease; }
.page-guide .menu-modal,.page-brew .modal-card { transform:translateY(32px) scale(.92); transition:transform .2s ease-in; }
.page-guide .menu-overlay.open .menu-modal,.page-brew .modal-overlay.active .modal-card { animation:lh-dialog-in 660ms both; }
@keyframes lh-dialog-in {
  0% { transform:translateY(40px) scale(.88); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  58% { transform:translateY(-8px) scale(1.025); animation-timing-function:ease-in-out; }
  80% { transform:translateY(3px) scale(.992); animation-timing-function:ease-out; }
  100% { transform:none; }
}
.toast { transition:opacity .2s ease,transform .5s var(--spring); transform:translateY(20px) scale(.92); }
.toast.show { transform:none; }
@media (max-width:900px) {
  .lh-links { transform:translateY(-16px) scale(.97); transform-origin:50% 0; transition:none; }
  .lh-links.open { transform:none; }
  .lh-links.closing { pointer-events:none; }
  .lh-links.open>a { animation:lh-nav-item-in .5s both; }
  .lh-links.open>a:nth-child(2) { animation-delay:35ms; }
  .lh-links.open>a:nth-child(3) { animation-delay:70ms; }
  .lh-links.open>a:nth-child(4) { animation-delay:105ms; }
  .lh-links.open>a:nth-child(5) { animation-delay:140ms; }
  .lh-links.open>a:nth-child(6) { animation-delay:175ms; }
}
@keyframes lh-nav-item-in { from { opacity:0; translate:0 -10px; } to { opacity:1; translate:0 0; } }
@media (prefers-reduced-motion:reduce) {
  :where(button,.button,.lh-join,.quick-card,.workshop-card,.compact-card,.crop-card,.drink-card,.menu-link) { translate:none!important; scale:1!important; }
}