*,*::before,*::after{box-sizing:border-box}
:root{
  --ground:#EFF3EA;
  --surface:#FFFFFF;
  --surface-2:#E6EDE1;
  --ink:#15241B;
  --ink-2:#435448;
  --ink-3:#6B7A6F;
  --line:#D3DCCF;
  --leaf:#1F5A36;
  --sprout:#2E8749;
  --sprout-ink:#FFFFFF;
  --wattle:#D8961C;
  --wattle-soft:#FAEDCF;
  --brand-bg:#1F5A36;
  --lead-bg:#1F5A36;
  --lead-ink:#FFFFFF;
  --lead-sub:rgba(255,255,255,.72);
  --ok:#22703C;  --ok-soft:#DDEFDF;
  --warn:#9A5F00; --warn-soft:#FAEDCF;
  --danger:#B3382C; --danger-soft:#F8E2DD;
  --info:#23566E; --info-soft:#E0EDF2;
  --sky-top:#CBE4D6;
  --sky-bottom:#EFF3EA;
  --sun-glow:rgba(255,224,150,.72);
  --stage-top:#EEF5EA;
  --stage-bottom:#D5E4CF;
  --footer-bg:#11251A;
  --footer-ink:#B7C9BC;
  --shadow:0 1px 2px rgba(21,36,27,.05),0 10px 28px -16px rgba(21,36,27,.22);
  --shadow-lg:0 30px 70px -34px rgba(21,36,27,.42);
  --r:14px; --r-lg:22px;
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1611; --surface:#13221A; --surface-2:#1A2D22; --ink:#E3EDE2; --ink-2:#B1C3B4; --ink-3:#86998B; --line:#27402F;
    --leaf:#9CD6A6; --sprout:#4DB368; --sprout-ink:#05130A; --wattle:#F0BA4A; --wattle-soft:#382B0F;
    --brand-bg:#2E8749; --lead-bg:#1D4A2E; --lead-ink:#F1F7EF; --lead-sub:rgba(241,247,239,.7);
    --ok:#7DD492; --ok-soft:#163323; --warn:#F0BA4A; --warn-soft:#382B0F; --danger:#FF8C7C; --danger-soft:#3A1914; --info:#8CC6DC; --info-soft:#132E39;
    --sky-top:#0A1A20; --sky-bottom:#0C1611; --sun-glow:rgba(140,180,255,.16);
    --stage-top:#1C3024; --stage-bottom:#0E1A14; --footer-bg:#070F0A; --footer-ink:#93A898;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -16px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.75);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1611; --surface:#13221A; --surface-2:#1A2D22; --ink:#E3EDE2; --ink-2:#B1C3B4; --ink-3:#86998B; --line:#27402F;
  --leaf:#9CD6A6; --sprout:#4DB368; --sprout-ink:#05130A; --wattle:#F0BA4A; --wattle-soft:#382B0F;
  --brand-bg:#2E8749; --lead-bg:#1D4A2E; --lead-ink:#F1F7EF; --lead-sub:rgba(241,247,239,.7);
  --ok:#7DD492; --ok-soft:#163323; --warn:#F0BA4A; --warn-soft:#382B0F; --danger:#FF8C7C; --danger-soft:#3A1914; --info:#8CC6DC; --info-soft:#132E39;
  --sky-top:#0A1A20; --sky-bottom:#0C1611; --sun-glow:rgba(140,180,255,.16);
  --stage-top:#1C3024; --stage-bottom:#0E1A14; --footer-bg:#070F0A; --footer-ink:#93A898;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 30px -16px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.75);
  color-scheme:dark;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s ease}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--wattle);outline-offset:2px}
.container{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--font-mono)}

/* ===== HEADER ===== */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ground);background:color-mix(in srgb,var(--ground) 74%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;min-height:66px;padding-block:10px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0}
.brand-mark{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;background:var(--brand-bg);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.brand-mark svg{width:28px;height:28px;overflow:visible}
.m-leaf{transform-box:fill-box;animation:unfurl 1.1s var(--ease) both}
.m-l{transform-origin:100% 100%;animation-delay:.2s}
.m-r{transform-origin:0 100%;animation-delay:.38s}
.brand:hover .m-leaf{animation:leafSway 1.6s ease-in-out infinite alternate}
@keyframes unfurl{from{transform:scale(0) rotate(-25deg)}}
@keyframes leafSway{to{transform:rotate(-8deg)}}
.brand-name{font-size:1.1rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand>span:last-child{min-width:0}
.brand-sub{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-3);letter-spacing:.02em;margin-top:3px;white-space:nowrap}
@media (max-width:1180px){.brand-sub{display:none}}
.header-actions{display:flex;gap:8px;align-items:center}
.hbtn{appearance:none;white-space:nowrap;border:1px solid var(--line);background:var(--surface);color:var(--ink);height:40px;padding:0 14px;border-radius:999px;font:600 .85rem/1 var(--font-body);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:transform .2s var(--ease),border-color .2s,background .2s}
.hbtn:hover{border-color:var(--sprout);transform:translateY(-1px)}
.hbtn svg{width:18px;height:18px;flex:none}
.hbtn-icon{width:40px;padding:0;justify-content:center}
.theme-ico-moon{display:none}
:root[data-theme="dark"] .theme-ico-sun{display:none}
:root[data-theme="dark"] .theme-ico-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-ico-sun{display:none}
  :root:not([data-theme="light"]) .theme-ico-moon{display:block}
}

/* ===== HERO ===== */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(1100px 520px at 80% 6%,var(--sun-glow),transparent 62%),linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%)}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1;pointer-events:none}
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:clamp(540px,76vh,740px);padding-block:clamp(40px,7vw,84px)}
.hero-copy{max-width:580px;position:relative}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf);display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--surface);background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid var(--line)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--wattle);box-shadow:0 0 0 4px color-mix(in srgb,var(--wattle) 25%,transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--wattle) 0%,transparent)}}
.hero-title{font-size:clamp(2.5rem,5.8vw,4.7rem);font-weight:800;letter-spacing:-.04em;line-height:.96;margin-top:20px}
.hero-title .w{display:inline-block;animation:rise .9s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 120ms)}
@keyframes rise{from{transform:translateY(.45em) rotate(2deg)}}
.hero-title em{font-style:normal;color:var(--sprout);position:relative;display:inline-block}
.hero-title em::after{content:'';position:absolute;left:.02em;right:.02em;bottom:.02em;height:.13em;border-radius:99px;background:var(--wattle);transform-origin:left center;animation:draw 1s .8s var(--ease) both;z-index:-1}
@keyframes draw{from{transform:scaleX(0)}}
.lede{font-size:clamp(1.04rem,1.4vw,1.18rem);color:var(--ink-2);margin-top:20px;max-width:50ch}
.hero-cta{display:flex;gap:16px;align-items:center;margin-top:30px;flex-wrap:wrap}
.hero-note{font:500 .8rem/1.3 var(--font-mono);color:var(--ink-3)}
.hero-badges{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.hero-badges li{font:600 .78rem/1 var(--font-body);padding:8px 12px;border-radius:999px;background:var(--surface);background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);color:var(--ink-2);display:inline-flex;gap:8px;align-items:center}
.hero-badges li::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--sprout);transform:rotate(45deg)}
.hero-caption{position:absolute;right:clamp(16px,4vw,32px);bottom:18px;font:500 .7rem/1.3 var(--font-mono);color:var(--ink-3);letter-spacing:.04em;text-align:right}

.hero-tags{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-tag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;font:600 .64rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);padding:5px 8px;border-radius:999px;white-space:nowrap;opacity:0;will-change:transform,opacity;box-shadow:0 6px 16px -10px rgba(0,0,0,.45)}
.hero-tag-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-tag-lines path{fill:none;stroke:var(--ink-2);stroke-width:1.4;opacity:0}
.hero-tag-lines circle{fill:var(--wattle);stroke:var(--surface);stroke-width:2;opacity:0}
@media (max-width:560px){.hero-tags{display:none}}

/* ===== BUTTONS ===== */
.btn{appearance:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .92rem/1 var(--font-body);padding:13px 20px;border-radius:12px;cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s,background .2s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--sprout);color:var(--sprout-ink);box-shadow:0 12px 26px -14px var(--sprout)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px -16px var(--sprout)}
.btn-lg{padding:17px 26px;font-size:1rem;border-radius:14px}
.btn-lg svg{transition:transform .3s var(--ease)}
.btn-lg:hover svg{transform:translateY(3px)}
.btn-ghost{background:transparent;color:var(--ink-2);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--sprout);color:var(--sprout)}
.btn-sm{padding:9px 12px;font-size:.8rem;border-radius:10px}
.btn-danger{background:transparent;color:var(--danger);border:1.5px solid color-mix(in srgb,var(--danger) 35%,var(--line))}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger)}
/* ===== PLANNER ===== */
.planner{padding-block:clamp(20px,4vw,40px) 8px;scroll-margin-top:70px}
.project-bar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:12px 12px 12px 18px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.project-bar label{font:600 .7rem/1 var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.project-bar input{flex:1 1 220px;min-width:0}
.project-bar select{flex:0 0 auto;width:auto;font-weight:600}
.input,.field input,.field select,.layer-row select,.layer-row input,.project-bar input,.project-bar select,.modal-box input{font:500 .95rem/1.25 var(--font-body);color:var(--ink);background:var(--ground);border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field select:focus,.layer-row select:focus,.layer-row input:focus,.project-bar input:focus,.project-bar select:focus{outline:none;border-color:var(--sprout);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--sprout) 20%,transparent)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d8b80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important}
.project-bar #selCurrency{flex:0 0 auto;width:auto}
.unit-wrap.pre input{padding-left:28px;padding-right:12px}
.unit-wrap.pre .unit{left:12px;right:auto}
.workbench{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(16px,3vw,32px);align-items:start;margin-top:32px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.kicker{display:block;font:600 .7rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sprout);margin-bottom:10px}
.section-head h2{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:800}
.section-head p{color:var(--ink-3);font-size:.88rem}
.example-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--wattle-soft);border:1px solid color-mix(in srgb,var(--wattle) 35%,transparent);font-size:.88rem;margin-bottom:14px;color:var(--ink)}
.example-note b{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);padding-top:3px;flex:none}

/* ===== STRUCTURE CARDS ===== */
.s-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);margin-bottom:16px;transition:border-color .25s,box-shadow .25s;scroll-margin-top:90px}
.s-card.is-active{border-color:var(--sprout);box-shadow:0 0 0 3px color-mix(in srgb,var(--sprout) 18%,transparent),var(--shadow)}
.s-card.is-new{animation:cardIn .55s var(--ease)}
@keyframes cardIn{from{transform:translateY(16px) scale(.98)}}
.s-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line)}
.s-title{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.s-title h4{font-size:1.08rem;font-weight:800}
.type-badge{font:600 .64rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:6px}
.type-badge.bed{background:var(--ok-soft);color:var(--ok)}
.type-badge.pot{background:var(--wattle-soft);color:var(--warn)}
.vol-chip{font:600 .76rem/1 var(--font-mono);color:var(--ink-2);background:var(--surface-2);padding:6px 9px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.s-head-actions{display:flex;gap:8px;align-items:center;flex:none}
.s-body{padding:16px 18px 18px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font:600 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.unit-wrap{position:relative}
.unit-wrap input{padding-right:38px}
.unit-wrap .unit{position:absolute;right:11px;top:50%;transform:translateY(-50%);font:500 .76rem/1 var(--font-mono);color:var(--ink-3);pointer-events:none}
.layers{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.layers-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.layers-head strong{font-size:.92rem}
.layer-edge{font:500 .64rem/1 var(--font-mono);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin:4px 0 8px}
.layer-edge::after{content:'';flex:1;height:1px;background:var(--line)}
.layer-row{display:grid;grid-template-columns:12px minmax(0,1fr) 98px 40px;gap:8px;align-items:center;margin-bottom:8px}
.layer-row.is-new{animation:layerIn .45s var(--ease)}
@keyframes layerIn{from{transform:translateY(-10px)}}
.swatch{width:12px;height:40px;border-radius:5px;background:var(--mat,#777);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.layer-row .unit-wrap input{padding-right:34px}
.btn-del-layer{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:border-color .2s,color .2s,background .2s}
.btn-del-layer:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.btn-del-layer svg{width:16px;height:16px}
.no-layers{font-size:.86rem;color:var(--ink-3);padding:6px 0 4px}
.depth{margin-top:12px;padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:12px;font:600 .84rem/1.3 var(--font-body);transition:background .3s,color .3s}
.depth.ok{background:var(--ok-soft);color:var(--ok)}
.depth.warn{background:var(--warn-soft);color:var(--warn)}
.depth.error{background:var(--danger-soft);color:var(--danger)}
.depth .meter{flex:1;min-width:60px;height:8px;border-radius:99px;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden;position:relative}
.depth .meter i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:currentColor;transition:width .5s var(--ease)}
.add-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn-add{border:1.5px dashed color-mix(in srgb,var(--sprout) 50%,var(--line));background:transparent;color:var(--leaf);border-radius:var(--r-lg);padding:18px 12px;font:700 .92rem/1.2 var(--font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,transform .2s var(--ease),border-color .2s}
.btn-add:hover{background:var(--ok-soft);border-style:solid;transform:translateY(-2px)}
.btn-add svg{width:22px;height:22px;flex:none}

/* ===== 3D VIEWER ===== */
.viewer{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px)}
.viewer-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.viewer-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 18px 0;flex-wrap:wrap}
.viewer-title{font:800 1.08rem/1.2 var(--font-display);letter-spacing:-.02em}
.viewer-dims{font:500 .76rem/1 var(--font-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.viewer-stage{position:relative;height:clamp(260px,32vw,350px);margin:12px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 95% at 50% 0%,var(--stage-top),var(--stage-bottom) 75%)}
#bedCanvas{width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;outline:none}
#bedCanvas:active{cursor:grabbing}
#bedCanvas:focus-visible{box-shadow:inset 0 0 0 3px var(--wattle)}
.viewer-hint{position:absolute;left:10px;bottom:10px;font:500 .66rem/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-2);background:var(--surface);background:color-mix(in srgb,var(--surface) 78%,transparent);padding:7px 9px;border-radius:999px;pointer-events:none}
.viewer-status{position:absolute;left:10px;right:10px;top:10px;font:600 .8rem/1.35 var(--font-body);padding:9px 12px;border-radius:10px;background:var(--danger-soft);color:var(--danger);pointer-events:none}
.viewer-status.info{background:var(--surface);color:var(--ink-2)}
.viewer-loading{position:absolute;inset:0;display:grid;place-items:center;font:500 .75rem/1 var(--font-mono);color:var(--ink-3);letter-spacing:.06em}
:root[data-3d="ready"] .viewer-loading{display:none}
:root[data-3d="off"] .viewer-stage{display:none}
.viewer-body{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:4px 18px 18px;align-items:start}
.core{position:relative;height:150px;width:34px;border-radius:9px;border:1.5px solid var(--line);overflow:hidden;background:repeating-linear-gradient(45deg,transparent 0 5px,color-mix(in srgb,var(--line) 75%,transparent) 5px 6px)}
.core-fill{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;flex-direction:column-reverse}
.core-fill span{display:block;flex:none;background:var(--mat);transition:height .5s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.core-rim{position:absolute;left:-2px;right:-2px;height:0;border-top:2px dashed var(--danger);transition:bottom .5s var(--ease)}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.legend li{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:9px;align-items:center;font-size:.86rem}
.legend .sw{width:12px;height:12px;border-radius:3px;background:var(--mat)}
.legend .val{font:500 .74rem/1.2 var(--font-mono);color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.legend .gap .sw{background:repeating-linear-gradient(45deg,var(--line) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--line)}
.legend .gap{color:var(--ink-3)}
.legend-foot{font:500 .72rem/1.4 var(--font-mono);color:var(--ink-3);margin-top:6px}

/* ===== RESULTS ===== */
.results{margin-top:36px;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow-lg);padding:clamp(18px,3.4vw,36px);scroll-margin-top:80px}
.results-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.results-head h2{font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:800}
.results-name{font:500 .78rem/1.3 var(--font-mono);color:var(--ink-3)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{padding:18px 16px;border-radius:18px;background:var(--surface-2);min-width:0}
.stat-label{font:600 .66rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.stat-value{font:800 clamp(1.8rem,3.3vw,2.6rem)/1 var(--font-display);letter-spacing:-.03em;margin-top:12px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat-sub{font:500 .76rem/1.2 var(--font-mono);color:var(--ink-3);margin-top:8px}
.stat.lead{background:var(--lead-bg);color:var(--lead-ink)}
.stat.lead .stat-label,.stat.lead .stat-sub{color:var(--lead-sub)}
.warn-note{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--danger-soft);color:var(--danger);font-weight:600;font-size:.88rem}
.cost{margin-top:28px;padding-top:24px;border-top:1px dashed var(--line)}
.cost-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cost-head h3{font-size:1.3rem;font-weight:800}
.example-tag{font:600 .64rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--warn);background:var(--wattle-soft);padding:7px 9px;border-radius:6px}
.cost-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.cost-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;perspective:900px}
.cost-card{position:relative;padding:18px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);transition:transform .35s var(--ease),border-color .3s,background .3s;will-change:transform}
.cost-card.winner{border-color:var(--sprout);background:var(--ok-soft)}
.cc-label{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.best-pill{display:none;background:var(--sprout);color:var(--sprout-ink);padding:5px 8px;border-radius:999px;letter-spacing:.08em}
.cost-card.winner .best-pill{display:inline-block;animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(.6)}}
.cc-price{font:800 clamp(1.7rem,3vw,2.3rem)/1 var(--font-display);margin-top:14px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cost-card.winner .cc-price{color:var(--ok)}
.cc-detail{font:500 .74rem/1.45 var(--font-mono);color:var(--ink-3);margin-top:8px;overflow-wrap:anywhere}
.cc-bar{height:8px;border-radius:99px;background:var(--surface-2);margin-top:14px;overflow:hidden}
.cc-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--ink-3);transition:width .8s var(--ease)}
.cost-card.winner .cc-bar i{background:var(--sprout)}
.savings{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--lead-bg);color:var(--lead-ink);font-weight:700;display:flex;gap:10px;align-items:center}
.savings svg{width:22px;height:22px;flex:none}

/* ===== SHOPPING LIST ===== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(18px,3vw,30px);box-shadow:var(--shadow);margin-top:28px}
.panel-head{display:flex;justify-content:space-between;align-items:end;gap:10px;flex-wrap:wrap}
.panel-head h2{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:800}
.table-wrap{overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch}
.shop-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.shop-table th{text-align:left;font:600 .66rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:12px;border-bottom:1.5px solid var(--line);white-space:nowrap}
.shop-table td{padding:14px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.shop-table td.num{font-family:var(--font-mono);font-size:.84rem;white-space:nowrap}
.shop-table tr:last-child td{border-bottom:0}
.shop-table tbody tr{transition:background .2s}
.shop-table tbody tr:hover{background:var(--surface-2)}
.mat-cell{display:flex;align-items:center;gap:10px;font-weight:700}
.mat-cell .sw{width:14px;height:14px;border-radius:4px;background:var(--mat);flex:none}
.disclaimer{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--info-soft);color:var(--info);font-size:.84rem;line-height:1.55}
.disclaimer strong{color:inherit}

/* ===== INFO ===== */
.info{padding-block:clamp(40px,7vw,88px) 0}
.info-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,64px);align-items:center}
.prose h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800;margin-bottom:16px}
.prose p,.prose li{color:var(--ink-2);max-width:62ch}
.prose p+p,.prose ul+p{margin-top:12px}
.prose ul{padding-left:1.15em;margin:14px 0}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--sprout)}
.prose strong{color:var(--ink)}
.stack-fig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;justify-items:center}
.stack3d{width:260px;height:300px;display:grid;place-items:center;perspective:1000px;max-width:100%}
.iso{position:relative;width:170px;height:170px;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-40deg);animation:isoSpin 14s ease-in-out infinite alternate}
@keyframes isoSpin{to{transform:rotateX(58deg) rotateZ(-58deg)}}
.slab{position:absolute;inset:0;transform-style:preserve-3d;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.14) 0 1.5px,transparent 2.5px) 0 0/13px 13px,radial-gradient(circle at 70% 60%,rgba(0,0,0,.18) 0 1.5px,transparent 2.5px) 0 0/17px 17px,var(--c);transform:translateZ(calc(var(--z) * 1px));animation:breathe 6s ease-in-out infinite;animation-delay:calc(var(--n) * -.25s)}
.slab::before,.slab::after{content:'';position:absolute;background:var(--c);filter:brightness(.72)}
.slab::before{left:0;top:100%;width:100%;height:calc(var(--t) * 1px);transform-origin:top;transform:rotateX(-90deg)}
.slab::after{left:100%;top:0;width:calc(var(--t) * 1px);height:100%;transform-origin:left;transform:rotateY(90deg);filter:brightness(.55)}
@keyframes breathe{0%,100%{transform:translateZ(calc(var(--z) * 1px))}50%{transform:translateZ(calc(var(--z) * 1px + var(--n) * 16px))}}
.stack-key{list-style:none;padding:0;margin:0;display:flex;flex-direction:column-reverse;gap:10px;justify-self:start}
.stack-key li{display:grid;grid-template-columns:14px auto;gap:10px;align-items:center;font-size:.9rem;color:var(--ink-2)}
.stack-key .sw{width:14px;height:14px;border-radius:4px;background:var(--c)}
.stack-key small{display:block;font:500 .72rem/1.2 var(--font-mono);color:var(--ink-3)}
.calc-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.calc-lines{margin:0;padding:8px 0}
.calc-lines div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:12px 20px;border-bottom:1px dashed var(--line)}
.calc-lines div:last-child{border-bottom:0}
.calc-lines dt{font-weight:600;font-size:.9rem}
.calc-lines dd{margin:0;font:500 .84rem/1.5 var(--font-mono);color:var(--ink-2);text-align:right;overflow-wrap:anywhere}
.calc-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;background:var(--lead-bg);color:var(--lead-ink);font-weight:700;flex-wrap:wrap}
.calc-total span:last-child{font:800 1.5rem/1 var(--font-display)}
.faq{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:color-mix(in srgb,var(--sprout) 55%,var(--line));box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;font-weight:700;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:28px;height:28px;flex:none;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;transition:transform .35s var(--ease),background .2s}
.faq summary .plus svg{width:14px;height:14px}
.faq details[open] .plus{transform:rotate(45deg);background:var(--ok-soft);color:var(--ok)}
.faq .answer{padding:0 18px 18px;color:var(--ink-2);max-width:70ch;animation:faqIn .4s var(--ease)}
@keyframes faqIn{from{transform:translateY(-6px)}}

/* ===== FOOTER ===== */
.site-footer{position:relative;margin-top:clamp(64px,9vw,120px);background:var(--footer-bg);color:var(--footer-ink);padding-block:44px 36px;font-size:.84rem}
.grass-edge{position:absolute;left:0;right:0;bottom:100%;height:46px;color:var(--footer-bg);pointer-events:none;overflow:hidden}
.grass-edge svg{position:absolute;left:-2%;width:104%;height:100%;bottom:-1px;transform-origin:bottom}
.grass-edge .g1{animation:grass 5s ease-in-out infinite alternate;opacity:.55}
.grass-edge .g2{animation:grass 4s ease-in-out -2s infinite alternate-reverse}
@keyframes grass{from{transform:skewX(-6deg)}to{transform:skewX(6deg)}}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.footer-brand{font:800 1.05rem/1.2 var(--font-display);color:#fff;letter-spacing:-.02em}
.footer-grid p{margin-top:6px}
.footer-grid p a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.footer-grid p a:hover{border-bottom-color:#fff}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{color:var(--footer-ink);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.footer-links a:hover{color:#fff;border-color:currentColor}

/* ===== TOAST / MODAL ===== */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);opacity:0;background:var(--ink);color:var(--ground);padding:14px 18px;border-radius:14px;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-lg);transition:transform .45s var(--ease),opacity .45s;z-index:100;width:max-content;max-width:min(92vw,420px)}
.toast.visible{transform:translate(-50%,0);opacity:1}
.modal-bg{position:fixed;inset:0;background:rgba(6,14,9,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;z-index:90}
.modal-box{background:var(--surface);color:var(--ink);border-radius:22px;padding:clamp(18px,4vw,28px);width:min(520px,100%);box-shadow:var(--shadow-lg);animation:cardIn .35s var(--ease);border:1px solid var(--line)}
.modal-box h3{font-size:1.4rem;font-weight:800;margin-bottom:8px}
.modal-box p{color:var(--ink-2);font-size:.9rem;margin-bottom:16px}
.modal-box input{font-family:var(--font-mono);font-size:.8rem;margin-bottom:16px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;align-items:start;min-height:0;padding-bottom:min(96vw,440px)}
  .hero-caption{left:clamp(16px,4vw,32px);right:auto;text-align:left}
  .workbench{grid-template-columns:1fr}
  .viewer{position:relative;top:auto;margin-top:8px}
  .info-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .stats{grid-template-columns:1fr 1fr}
  .cost-inputs{grid-template-columns:1fr 1fr}
  .header-actions .hbtn-label{display:none}
  .header-actions .hbtn{width:40px;padding:0;justify-content:center}
}
@media (max-width: 520px){
  .cost-cards{grid-template-columns:1fr}
  .add-row{grid-template-columns:1fr}
  .layer-row{grid-template-columns:10px minmax(0,1fr) 84px 40px;gap:6px}
  .stack-fig{grid-template-columns:1fr}
  .stack-key{justify-self:center}
  .calc-lines div{grid-template-columns:1fr}
  .calc-lines dd{text-align:left}
  .brand-sub{display:none}
  .header-inner{flex-wrap:nowrap;min-height:60px}
  .brand{gap:10px}
  .brand-name{font-size:.98rem}
  .brand-mark{width:36px;height:36px;border-radius:11px}
  .brand-mark svg{width:24px;height:24px}
  .header-actions{gap:6px;flex:none}
  .header-actions .hbtn{width:36px;height:36px}
}
@media (max-width: 420px){
  #btnPrint{display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important}
}

/* ===== PRINT ===== */
@media print{
  .site-header,.hero,.site-nav,.breadcrumbs,.related,.page-cta,.project-bar,.btn,.hbtn,.btn-add,.no-print,.viewer,.site-footer,.toast,.modal-bg,.cost,.info,.example-note,.btn-del-layer{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .workbench{display:block}
  .results,.panel,.s-card{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .stat.lead{background:#eee;color:#000}
  .container{max-width:100%}
}

/* ===== SITE NAV ===== */
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:8px}
.site-nav a,.site-nav summary{font:600 .86rem/1 var(--font-body);color:var(--ink-2);text-decoration:none;padding:10px 12px;border-radius:10px;transition:background .2s,color .2s;white-space:nowrap;cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px}
.site-nav summary::-webkit-details-marker{display:none}
.site-nav a:hover,.site-nav summary:hover,.site-nav a[aria-current="page"]{background:var(--surface-2);color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--leaf)}
.site-nav details{position:relative}
.site-nav summary svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.site-nav details[open] summary svg{transform:rotate(180deg)}
.nav-menu{position:absolute;left:0;top:calc(100% + 8px);min-width:270px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;display:grid;gap:2px;z-index:60;animation:cardIn .25s var(--ease)}
.nav-menu a{display:flex;flex-direction:column;gap:2px;align-items:flex-start;white-space:normal;padding:10px 12px}
.nav-menu a small{font:500 .72rem/1.3 var(--font-body);color:var(--ink-3)}
@media (min-width:1001px){.nav-menu.wide{grid-template-columns:repeat(2,minmax(0,1fr));width:min(600px,calc(100vw - 48px));left:auto;right:0}}
.nav-toggle{display:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;place-items:center;flex:none}
.nav-toggle svg{width:20px;height:20px}
@media (max-width:1000px){
  .nav-toggle{display:grid}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg);flex-direction:column;align-items:stretch;padding:10px clamp(16px,4vw,32px) 16px;margin:0;gap:2px}
  .site-header.nav-open .site-nav{display:flex}
  .site-nav a,.site-nav summary{padding:12px 12px;font-size:.95rem}
  .site-nav details{position:static}
  .nav-menu{position:static;box-shadow:none;border:0;background:var(--surface-2);margin:4px 0 8px;animation:none}
}

/* ===== PAGE HERO (sub-pages) ===== */
.page-hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%);padding-block:clamp(28px,5vw,56px) clamp(28px,5vw,48px)}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;max-width:22ch}
.page-hero .lede{max-width:62ch}
.breadcrumbs{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px;font:500 .74rem/1 var(--font-mono);color:var(--ink-3)}
.breadcrumbs li{display:inline-flex;align-items:center;gap:6px}
.breadcrumbs li+li::before{content:"/";opacity:.5}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{color:var(--leaf)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:22px;font:500 .78rem/1.4 var(--font-mono);color:var(--ink-3)}
.byline a{color:var(--leaf);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--leaf) 40%,transparent)}

/* ===== QUICK ANSWER ===== */
.quick{margin-top:clamp(22px,4vw,36px);padding:clamp(16px,3vw,24px) clamp(18px,3vw,28px);border-radius:20px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--sprout);box-shadow:var(--shadow)}
.quick .kicker{margin-bottom:8px}
.quick p{font-size:1.02rem;color:var(--ink);max-width:72ch;line-height:1.6}
.quick p+p{margin-top:8px;color:var(--ink-2);font-size:.95rem}

/* ===== CALCULATOR PAGES ===== */
.calc-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(16px,3vw,32px);align-items:start;margin-top:clamp(22px,4vw,36px)}
.calc-card-ui{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(16px,3vw,24px)}
.calc-card-ui h2{font-size:1.25rem;font-weight:800;margin-bottom:14px}
.calc-card-ui .form-row+.form-row,.calc-card-ui fieldset+.form-row,.calc-card-ui .form-row+fieldset{margin-top:14px}
.calc-card-ui .form-row.wide{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.calc-card-ui fieldset{border:0;padding:0;margin:0;min-width:0}
.calc-card-ui legend{font:600 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--ground);border:1.5px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;inset:0;opacity:0;cursor:pointer}
.seg span{display:block;padding:8px 12px;border-radius:8px;font:600 .82rem/1 var(--font-body);color:var(--ink-2);transition:background .2s,color .2s}
.seg input:checked+span{background:var(--surface);color:var(--leaf);box-shadow:var(--shadow)}
.seg input:focus-visible+span{outline:2px solid var(--wattle);outline-offset:1px}
.calc-help{font-size:.8rem;color:var(--ink-3);margin-top:10px;line-height:1.5}
.calc-results{position:sticky;top:calc(env(safe-area-inset-top,0px) + 82px)}
.calc-results .stats{grid-template-columns:1fr 1fr}
.calc-results .stat-value{font-size:clamp(1.7rem,3vw,2.3rem)}
.mini-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:.9rem}
.mini-table th,.mini-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
.mini-table th{font:600 .64rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.mini-table td.num,.mini-table th.num{font-family:var(--font-mono);font-size:.84rem;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mini-table tr:last-child td{border-bottom:0}
.mini-table tr.hl td{background:var(--ok-soft);color:var(--ok);font-weight:700}
.res-note{margin-top:14px;font-size:.82rem;color:var(--ink-3);line-height:1.5}
.calc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hidden{display:none!important}
.mat-list{display:grid;gap:8px;margin-top:14px}
.mat-group{font:600 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:10px 0 2px}
.mat-group:first-child{margin-top:0}
.mat-row{display:grid;grid-template-columns:minmax(0,1fr) 76px 64px;gap:10px;align-items:center}
.mat-row label{font:600 .9rem/1.25 var(--font-body);color:var(--ink)}
.mat-row label small{display:block;margin-top:2px;font:500 .7rem/1.3 var(--font-mono);color:var(--ink-3)}
.mat-row .input{text-align:right}
.mat-share{font:500 .7rem/1.25 var(--font-mono);color:var(--ink-3);text-align:right}

/* ===== ARTICLE / PROSE ===== */
.article{max-width:780px;margin-inline:auto;padding-block:clamp(28px,5vw,56px) 0}
.article .prose h2{font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.02em;margin:clamp(30px,5vw,44px) 0 12px;scroll-margin-top:90px}
.article .prose h2:first-child{margin-top:0}
.article .prose h3{font-size:1.15rem;font-weight:800;margin:26px 0 8px}
.article .prose p,.article .prose li{max-width:none;font-size:1.02rem;line-height:1.7}
.prose a{color:var(--leaf);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--leaf) 40%,transparent);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.prose a{overflow-wrap:anywhere}
.prose ol{padding-left:1.3em;margin:14px 0}
.prose ol li{margin-bottom:8px}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.94rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prose th,.prose td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font:600 .68rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.prose tr:last-child td{border-bottom:0}
.prose td.num,.prose th.num{text-align:right;font-family:var(--font-mono);font-size:.86rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.prose th.num{font-size:.68rem}
.prose .table-wrap{margin:18px 0}
.prose .table-wrap table{margin:0}
.table-wrap>.mini-table{margin-top:0}
.callout{margin:22px 0;padding:16px 18px;border-radius:16px;background:var(--wattle-soft);border:1px solid color-mix(in srgb,var(--wattle) 35%,transparent);color:var(--ink)}
.callout.tip{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.callout.info{background:var(--info-soft);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.callout strong{display:block;font:600 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;color:var(--warn)}
.callout.tip strong{color:var(--ok)}
.callout.info strong{color:var(--info)}
.callout p{max-width:none!important;margin:0;font-size:.95rem!important;line-height:1.6!important}
.formula{margin:18px 0;padding:16px 18px;border-radius:14px;background:var(--ink);color:var(--ground);font:500 .92rem/1.6 var(--font-mono);overflow-x:auto}
.formula b{color:var(--wattle);font-weight:600}
.toc{margin:22px 0 0;padding:16px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.toc strong{font:600 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.toc ol{margin:8px 0 0;padding-left:1.2em;columns:2;column-gap:24px}
.toc li{margin:4px 0;font-size:.92rem;break-inside:avoid}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--leaf)}
@media (max-width:640px){.toc ol{columns:1}}
.toc+.prose h2:first-child{margin-top:28px}
.sources{margin-top:clamp(30px,5vw,44px);padding-top:18px;border-top:1px dashed var(--line)}
.sources h2{font-size:1rem!important;margin:0 0 8px!important}
.sources ol{font-size:.86rem;color:var(--ink-3);padding-left:1.2em;margin:0}
.sources li{margin-bottom:6px;line-height:1.5;font-size:.86rem!important}
.sources a{color:var(--ink-2)}
.updated{margin-top:18px;font:500 .76rem/1.4 var(--font-mono);color:var(--ink-3)}
.author-box{display:flex;gap:16px;align-items:flex-start;margin-top:26px;padding:18px 20px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.author-box .avatar{width:52px;height:52px;flex:none;border-radius:14px;background:var(--brand-bg);color:#fff;display:grid;place-items:center;font:800 1.2rem/1 var(--font-display)}
.author-box p{font-size:.9rem!important;line-height:1.55!important;margin:0}
.author-box strong{display:block;font-size:.95rem;margin-bottom:2px}

/* ===== RELATED / HUB CARDS ===== */
.related{padding-top:clamp(40px,7vw,80px)}
.related h2,.hub h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800;margin-bottom:6px}
.related>p,.hub>p{color:var(--ink-2);margin-bottom:22px;max-width:60ch}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tool-card{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.tool-card:hover{transform:translateY(-3px);border-color:var(--sprout);box-shadow:var(--shadow-lg)}
.tool-card .ico{width:42px;height:42px;border-radius:12px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center}
.tool-card .ico svg{width:22px;height:22px}
.tool-card h3{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.tool-card p{font-size:.88rem;color:var(--ink-2);line-height:1.5;margin:0}
.tool-card .go{margin-top:auto;font:600 .76rem/1 var(--font-mono);color:var(--leaf);display:inline-flex;align-items:center;gap:6px}
.tool-card .go svg{width:14px;height:14px;transition:transform .2s}
.tool-card:hover .go svg{transform:translateX(3px)}
.tool-card.guide .ico{background:var(--wattle-soft);color:var(--warn)}
.hub{padding-top:clamp(40px,7vw,80px)}
.page-cta{margin-top:clamp(36px,6vw,64px);padding:clamp(22px,4vw,36px);border-radius:24px;background:var(--lead-bg);color:var(--lead-ink);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.page-cta h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800}
.page-cta p{color:var(--lead-sub);margin-top:4px;max-width:52ch}
.page-cta .btn-primary{background:var(--wattle);color:#1a1200;box-shadow:none}

/* ===== MISC PAGES ===== */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:22px 0}
.contact-card{padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.contact-card h3{font-size:1rem;margin:0 0 6px!important}
.contact-card p{font-size:.9rem!important;color:var(--ink-2);margin:0}
.contact-card a{font-family:var(--font-mono);font-size:.9rem}
.notfound{text-align:center;padding-block:clamp(60px,12vw,140px)}
.notfound .big{font:800 clamp(5rem,18vw,10rem)/1 var(--font-display);letter-spacing:-.06em;color:var(--sprout);opacity:.35}
.notfound h1{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:-.2em}
.notfound p{color:var(--ink-2);margin:12px auto 24px;max-width:46ch}
.skip-link{position:absolute;left:8px;top:-60px;background:var(--sprout);color:var(--sprout-ink);padding:10px 14px;border-radius:10px;font-weight:700;z-index:100;transition:top .2s}
.skip-link:focus{top:8px}
.hero-fallback{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-fallback svg{position:absolute;right:-3%;bottom:-6%;width:min(64vw,560px);height:auto}
:root[data-hero="on"] .hero-fallback{display:none}
@media (max-width:899px){.hero-inner{padding-bottom:clamp(40px,7vw,84px)!important}.hero-fallback svg{width:min(58vw,340px);opacity:.5}.hero-caption{display:none}}
:root:not([data-hero="on"]) .hero-caption{display:none}
@media (max-width:900px){.calc-wrap{grid-template-columns:minmax(0,1fr)}.calc-results{position:static}}
.legal .prose h2{font-size:1.3rem}
.legal .prose p,.legal .prose li{font-size:.98rem}

/* ===== LIVING GARDEN (assets/garden-life.js) ===== */
/* The hero reserves a landscape band at the bottom from the first paint, so the canvas never shifts layout.
   Without JavaScript (or before it runs) a still SVG landscape fills the same band. */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(104px,13vw,168px);background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%);background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 170" preserveAspectRatio="none"%3E%3Cpath fill="%23bfdab5" d="M0 70 C150 20 260 40 380 55 S620 10 760 40 S1020 25 1200 45 V170 H0Z"/%3E%3Cpath fill="%23a2cd90" d="M0 95 C160 70 300 85 430 88 S700 60 860 80 S1080 70 1200 82 V170 H0Z"/%3E%3Crect y="104" width="1200" height="66" fill="%2374b84e"/%3E%3C/svg%3E") 0 100%/100% clamp(104px,13vw,168px) no-repeat,linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%)}
.page-hero>.container{position:relative;z-index:1}
.gl-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
:root[data-gl="on"] .page-hero{background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%)}
:root[data-theme="dark"]:not([data-gl="on"]) .page-hero{background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 170" preserveAspectRatio="none"%3E%3Cpath fill="%231b3325" d="M0 70 C150 20 260 40 380 55 S620 10 760 40 S1020 25 1200 45 V170 H0Z"/%3E%3Cpath fill="%23173021" d="M0 95 C160 70 300 85 430 88 S700 60 860 80 S1080 70 1200 82 V170 H0Z"/%3E%3Crect y="104" width="1200" height="66" fill="%2330502a"/%3E%3C/svg%3E") 0 100%/100% clamp(104px,13vw,168px) no-repeat,linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not([data-gl="on"]) .page-hero{background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 170" preserveAspectRatio="none"%3E%3Cpath fill="%231b3325" d="M0 70 C150 20 260 40 380 55 S620 10 760 40 S1020 25 1200 45 V170 H0Z"/%3E%3Cpath fill="%23173021" d="M0 95 C160 70 300 85 430 88 S700 60 860 80 S1080 70 1200 82 V170 H0Z"/%3E%3Crect y="104" width="1200" height="66" fill="%2330502a"/%3E%3C/svg%3E") 0 100%/100% clamp(104px,13vw,168px) no-repeat,linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%)}}

/* 3D tilt with a moving highlight on tool cards (fine pointers only; added by JS) */
.gl-tilt,.gl-tilt:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transform-style:preserve-3d}
.gl-tilt:hover{--ty:-4px}
.gl-tilt{position:relative}
.gl-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.42),transparent 45%);opacity:0;transition:opacity .35s}
.gl-tilt:hover::after{opacity:1}
.gl-tilt .ico{transform:translateZ(22px)}
:root[data-theme="dark"] .gl-tilt::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(190,255,200,.1),transparent 45%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .gl-tilt::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(190,255,200,.1),transparent 45%)}}

/* One-time rise-in for cards below the fold (JS adds these classes only to off-screen elements) */
.gl-rv,.gl-rv:hover{opacity:0;transform:perspective(900px) translate3d(0,28px,0) rotateX(12deg)!important;transition:opacity .7s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)!important}
.gl-rv.gl-in,.gl-rv.gl-in:hover{opacity:1;transform:perspective(900px) translate3d(0,0,0) rotateX(0deg)!important}
@media print{.gl-canvas{display:none!important}.page-hero{background:none!important;padding-bottom:12px!important}}

.info-note{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--info-soft);color:var(--info);font-size:.88rem;line-height:1.55}
.info-note b,.warn-note b{font-weight:700}

/* ===== PLANTING CALENDAR ===== */
.cal-wrap{margin:18px 0}
.cal-table,.prose .cal-table{border-collapse:separate;border-spacing:3px;min-width:680px;width:100%;font-size:.86rem;background:transparent;border:0;border-radius:0;overflow:visible;margin:0}
.cal-table th,.cal-table td,.prose .cal-table th,.prose .cal-table td{border:0;padding:0;background:none;vertical-align:middle}
.cal-table thead th,.prose .cal-table thead th{font:600 .68rem/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3);text-align:center;padding:6px 0;background:none;text-transform:none}
.cal-table thead th:first-child,.cal-table thead th:last-child{text-align:left}
.cal-table thead abbr{text-decoration:none;cursor:help}
.cal-table tbody th,.prose .cal-table tbody th{font:600 .88rem/1.2 var(--font-body);color:var(--ink);text-align:left;padding:5px 10px 5px 0;white-space:nowrap;background:none;text-transform:none;letter-spacing:0}
.cal-table tbody th a{color:inherit;text-decoration:none}
.cal-table tbody th a:hover{color:var(--leaf)}
.cal-table td,.prose .cal-table td{height:26px;min-width:24px;border-radius:6px;background:var(--surface-2)}
.cal-table td.on,.prose .cal-table td.on{background:var(--sprout);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.cal-table td.cal-when,.prose .cal-table td.cal-when{background:none;font:500 .76rem/1.3 var(--font-mono);color:var(--ink-2);padding-left:10px;white-space:nowrap;min-width:120px}
.cal-table tr.cal-cat th,.prose .cal-table tr.cal-cat th{padding:16px 0 4px;font:600 .66rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.cal-table th.now,.prose .cal-table th.now{color:var(--sprout-ink);background:var(--wattle);border-radius:6px}
.cal-table td.now:not(.on){background:color-mix(in srgb,var(--wattle) 22%,var(--surface-2))}
.cal-legend{display:flex;flex-wrap:wrap;gap:14px;font:500 .74rem/1 var(--font-mono);color:var(--ink-3);margin-top:6px}
.cal-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--sprout);vertical-align:-3px;margin-right:6px}
.cal-legend i.off{background:var(--surface-2);border:1px solid var(--line)}
.cal-legend i.nowk{background:var(--wattle)}
.month-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:18px 0}
.month-card{padding:16px 18px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);position:relative;transition:border-color .2s,box-shadow .2s}
.month-card h3,.prose .month-card h3{margin:0 0 6px;font-size:1rem;font-weight:800}
.month-card p,.prose .month-card p{font-size:.9rem;line-height:1.55;margin:0;color:var(--ink-2)}
.month-card .month-n{position:absolute;top:16px;right:16px;font:600 .66rem/1 var(--font-mono);color:var(--ink-3)}
.month-card.now{border-color:var(--sprout);box-shadow:0 0 0 3px color-mix(in srgb,var(--sprout) 18%,transparent)}
.month-card.now::before{content:"This month";position:absolute;top:-10px;left:14px;font:600 .6rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--sprout);color:var(--sprout-ink);padding:4px 7px;border-radius:999px}
.city-list{list-style:none;padding:0;margin:12px 0;columns:3;column-gap:18px;font-size:.92rem}
.city-list li{padding:3px 0;break-inside:avoid}
@media (max-width:640px){.city-list{columns:2}}
.zone-card .zone-tag{align-self:flex-start;font:700 .62rem/1 var(--font-mono);letter-spacing:.08em;padding:6px 8px;border-radius:6px;background:var(--ok-soft);color:var(--ok)}
.zone-card .zone-towns{font:500 .74rem/1.4 var(--font-mono)!important;color:var(--ink-3)!important}

/* interactive calendar */
.pc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(16px,3vw,26px);margin-top:clamp(22px,4vw,36px)}
.pc-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:640px){.pc-top{grid-template-columns:1fr}}
.pc-note{font-size:.84rem;color:var(--ink-3);margin-top:8px;min-height:1.3em}
.pc-note b{color:var(--leaf)}
.month-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.month-chips button{appearance:none;border:1.5px solid var(--line);background:var(--ground);color:var(--ink-2);font:600 .8rem/1 var(--font-body);padding:9px 12px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .15s}
.month-chips button:hover{border-color:var(--sprout);transform:translateY(-1px)}
.month-chips button[aria-pressed="true"]{background:var(--sprout);border-color:var(--sprout);color:var(--sprout-ink)}
.month-chips button.today::after{content:"•";margin-left:4px;color:var(--wattle)}
.pc-summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin-top:24px}
.pc-summary h2{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800}
.pc-summary a{font:600 .8rem/1 var(--font-mono);color:var(--leaf)}
.pc-group{margin-top:18px}
.pc-group h3{font:600 .7rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--leaf);margin-bottom:8px}
.crop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.crop-card{padding:14px 14px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);animation:cardIn .35s var(--ease) both;animation-delay:var(--d,0ms)}
.crop-card h4{font-size:.98rem;font-weight:800;display:flex;justify-content:space-between;gap:8px;align-items:flex-start;line-height:1.25}
.crop-card .pill{font:600 .6rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:5px 7px;border-radius:999px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.crop-card .pill.seedlings{background:var(--wattle-soft);color:var(--warn)}
.crop-card .pill.bulb{background:var(--info-soft);color:var(--info)}
.crop-card p{font-size:.8rem;color:var(--ink-3);margin-top:6px;line-height:1.45}
.crop-card .flag{display:inline-block;margin-top:8px;font:600 .62rem/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-radius:5px;background:var(--danger-soft);color:var(--danger)}
.crop-card .flag.new{background:var(--ok-soft);color:var(--ok)}
/* frost: a cool blue, the same family as the info notes */
.crop-card .flag.frost{background:var(--info-soft);color:var(--info);margin-left:4px}
.crop-card.frosty{border-color:color-mix(in srgb,var(--info) 40%,var(--line))}
.crop-card .frost-note{color:var(--info);font-size:.78rem}
.pc-frost{margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--info-soft);color:var(--info);font-size:.86rem}
.town-table th[scope=row],.prose .town-table tbody th{font:600 .92rem/1.3 var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink);white-space:nowrap}
.town-table td.town-st{font-size:.8rem;color:var(--ink-3)}
.town-table,.prose .town-table{min-width:600px}
.town-table td:nth-child(3),.town-table td.town-st{white-space:nowrap}
.pc-empty{padding:18px;border-radius:14px;background:var(--surface-2);color:var(--ink-2);font-size:.92rem}
.pc-next{margin-top:18px;font-size:.9rem;color:var(--ink-2)}
@media print{.month-chips,.pc-top,.calc-actions{display:none!important}.crop-card{break-inside:avoid;animation:none}}
.cal-table tr.pc-hl th a{color:var(--leaf);font-weight:800}
.cal-table tr.pc-hl th a::before{content:"▸ ";color:var(--wattle)}