:root { color-scheme:light; --paper:#f4f1e9; --surface:#fcfbf7; --ink:#102b22; --muted:#607168; --line:#d7ddd5; --accent:#d85020; --accent-dark:#af3f17; --soft:#e7eee7; --shadow:0 20px 55px rgba(13,41,31,.11); --hero-bg:#123c2e; --hero-ink:#fffaf1; --hero-muted:#d7e4dc; --hero-kicker:#a8cdbb; --hero-line:rgba(255,255,255,.18); --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
:root[data-theme="dark"] { color-scheme:dark; --paper:#091a14; --surface:#112a21; --ink:#fffaf1; --muted:#c0d0c7; --line:#3e5b4f; --accent:#ff8b5f; --accent-dark:#ffae8d; --soft:#1b372c; --shadow:0 22px 65px rgba(0,0,0,.38); --hero-bg:#06150f; --hero-ink:#fffdf8; --hero-muted:#cfdfd6; --hero-kicker:#86cbaa; --hero-line:rgba(220,245,231,.22); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 Inter,Arial,sans-serif; }
button,input,select { font:inherit; }
button,select { cursor:pointer; }
button { transition:transform 150ms var(--ease-out),background-color 180ms ease,color 180ms ease,border-color 180ms ease; }
button:active { transform:scale(.97); }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.catalog-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.catalog-heading .micro { margin-bottom:8px; color:var(--accent); }
.catalog-heading h2 { margin:0; font:700 clamp(1.6rem,3vw,2.4rem)/1 Georgia,serif; letter-spacing:-.04em; }
.catalog-heading > p { max-width:250px; margin:0; color:var(--muted); font-size:.85rem; }
.catalog-heading + .field { margin-top:28px; }
.catalog-helper { margin:-8px 0 0; color:var(--muted); font-size:.78rem; }
.vapor-quantity { margin-top:28px; padding:20px 18px 14px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface) 92%,transparent); }
.vapor-quantity__heading { display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.vapor-quantity__heading > span { font:700 .69rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.vapor-quantity__heading output { color:var(--accent-dark); font:700 1.15rem/1 Georgia,serif; }
.vapor-quantity__range { --range-progress:33.333%; display:block; width:100%; min-height:48px; margin:9px 0 0; padding:10px 0; border:0; border-radius:0; appearance:none; background:transparent; touch-action:pan-y; cursor:pointer; }
.vapor-quantity__range::-webkit-slider-runnable-track { height:8px; border-radius:999px; background:linear-gradient(to right,var(--ink) 0 var(--range-progress),var(--line) var(--range-progress) 100%); }
.vapor-quantity__range::-webkit-slider-thumb { width:30px; height:30px; margin-top:-11px; border:5px solid var(--surface); border-radius:50%; appearance:none; background:var(--ink); box-shadow:0 1px 0 rgba(0,0,0,.08),0 0 0 1px var(--ink); }
.vapor-quantity__range::-moz-range-track { height:8px; border-radius:999px; background:var(--line); }
.vapor-quantity__range::-moz-range-progress { height:8px; border-radius:999px; background:var(--ink); }
.vapor-quantity__range::-moz-range-thumb { width:20px; height:20px; border:5px solid var(--surface); border-radius:50%; background:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.vapor-quantity__marks { display:grid; grid-template-columns:repeat(4,1fr); align-items:center; margin-top:-2px; }
.vapor-quantity__marks button { min-width:44px; min-height:38px; padding:5px 3px; border:0; background:transparent; color:var(--muted); font:700 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.vapor-quantity__marks button:first-child { justify-self:start; }
.vapor-quantity__marks button:last-child { justify-self:end; }
.vapor-quantity__marks button[aria-pressed="true"] { color:var(--ink); }
.catalog-list { display:grid; gap:10px; margin-top:4px; }
.catalog-card { border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms var(--ease-out); }
.catalog-card:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); box-shadow:0 8px 24px rgba(13,41,31,.08); transform:translateY(-1px); }
.catalog-card.is-selected,.catalog-card:has(.strain-chip.is-selected) { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent); }
.catalog-card__main,.catalog-card--universal { width:100%; padding:15px 16px; text-align:left; color:var(--ink); background:transparent; border:0; }
.catalog-card__main { display:block; }
.catalog-card__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.catalog-card__top strong { font-size:1rem; }
.catalog-card__top span { color:var(--muted); font:500 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.03em; }
.catalog-card__name { display:block; margin-top:6px; color:var(--muted); font-size:.82rem; }
.catalog-card--universal { display:block; text-align:left; cursor:pointer; }
.catalog-card--universal .catalog-card__name { color:var(--ink); }
.catalog-card__empty { margin:0; padding:0 16px 13px; color:var(--muted); font-size:.76rem; }
.strain-list { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 14px; }
.strain-chip { padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--paper); font-size:.76rem; }
.strain-chip:hover,.strain-chip.is-selected { border-color:var(--accent); color:var(--accent-dark); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); }
.catalog-selection { min-height:24px; margin:14px 0 0; color:var(--accent-dark); font-size:.82rem; font-weight:600; }
.skip-link { position:fixed; left:12px; top:-80px; z-index:10; padding:10px 14px; background:var(--ink); color:var(--paper); border-radius:4px; }
.skip-link:focus { top:12px; }
.topbar { position:sticky; top:0; z-index:20; min-height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:10px clamp(18px,4vw,64px); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 96%,transparent); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; width:max-content; }
.brand img { display:block; width:125px; height:auto; }
.topbar__name { font:500 .7rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.topbar__side { justify-self:end; display:flex; align-items:center; gap:22px; }
.theme-control { display:flex; align-items:center; gap:9px; color:var(--muted); font:500 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.theme-control select { min-height:38px; padding:0 29px 0 11px; border:1px solid var(--line); border-radius:4px; appearance:auto; background:var(--surface); color:var(--ink); width:auto; }
.authority { margin:0; text-align:right; color:var(--muted); font-size:.72rem; line-height:1.6; }
.authority strong { color:var(--ink); }
.container { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.hero { position:relative; overflow:hidden; border-bottom:1px solid var(--hero-line); background:var(--hero-bg); color:var(--hero-ink); }
.hero-caustics-bg { position:absolute; inset:0; width:100%; height:100%; opacity:0.65; mix-blend-mode:screen; pointer-events:none; z-index:0; }
.hero::after { position:absolute; inset:0; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.025) 42%,rgba(255,255,255,.025) 43%,transparent 43%); content:""; pointer-events:none; }
.hero__content { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); align-items:center; gap:32px; min-height:390px; padding-block:46px; }
.hero__copy { align-self:center; }
.eyebrow,.micro { margin:0 0 16px; color:var(--hero-kicker); font:500 .68rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:760px; margin-bottom:24px; color:var(--hero-ink); font:700 clamp(2.8rem,5.2vw,4.8rem)/1.12 Georgia,serif; letter-spacing:-.025em; }
.hero__copy > p:last-child { max-width:540px; margin:0; color:var(--hero-muted); font-size:1.04rem; }
.oil-visual { position:relative; width:min(100%,430px); justify-self:end; }
.oil-visual svg { display:block; width:100%; height:auto; overflow:visible; }
.oil-visual__glow { transform-origin:center; animation:oil-glow 6.8s var(--ease-in-out) infinite; will-change:transform,opacity; }
.oil-visual__auras { transform-origin:220px 145px; animation:aura-drift 8.4s var(--ease-in-out) infinite; will-change:transform; }
.oil-visual__aura { fill:none; transform-origin:220px 145px; }
.oil-visual__aura--haze { stroke:#f8b34b; stroke-opacity:.18; stroke-width:7; animation:aura-breathe 6.8s var(--ease-in-out) -.45s infinite; will-change:transform,opacity; }
.oil-visual__aura--outer { stroke:url(#aura-gradient); stroke-width:1.5; stroke-dasharray:286 124; animation:aura-turn 18s linear infinite; }
.oil-visual__aura--inner { stroke:url(#aura-gradient); stroke-opacity:.7; stroke-width:1; stroke-dasharray:92 72; animation:aura-turn-reverse 13s linear infinite; }
.oil-visual__aura-accent { fill:none; stroke:#fff1b6; stroke-linecap:round; stroke-opacity:.5; stroke-width:2.2; animation:aura-accent 6.8s var(--ease-in-out) -.25s infinite; will-change:transform,opacity; }
.oil-visual__drop { transform-origin:221px 143px; animation:oil-float 6.8s var(--ease-in-out) infinite; will-change:transform; }
.oil-visual__core { transform-origin:221px 155px; animation:oil-core-pulse 6.8s var(--ease-in-out) -.2s infinite; will-change:transform,opacity; }
.oil-visual__sheen { transform-origin:190px 148px; animation:oil-sheen 6.8s var(--ease-in-out) infinite; will-change:transform,opacity; }
.oil-visual__bead { transform-box:fill-box; transform-origin:center; }
.oil-visual__bead--one { animation:oil-bead 4.7s var(--ease-in-out) -.8s infinite alternate; }
.oil-visual__bead--two { animation:oil-bead 6.1s var(--ease-in-out) -2.2s infinite alternate-reverse; }
.oil-visual__bead--three { animation:oil-bead 5.2s var(--ease-in-out) -1.5s infinite alternate; }
@keyframes oil-float { 0%,100% { transform:translateY(2px) rotate(-.35deg) scale(.992); } 50% { transform:translateY(-7px) rotate(.45deg) scale(1.012); } }
@keyframes oil-core-pulse { 0%,100% { transform:scale(.94); opacity:.42; } 50% { transform:scale(1.06); opacity:.88; } }
@keyframes oil-sheen { 0%,100% { transform:translate(-2px,2px) scale(.98); opacity:.48; } 50% { transform:translate(5px,-3px) scale(1.015); opacity:.72; } }
@keyframes oil-glow { 0%,100% { transform:scale(.94); opacity:.42; } 50% { transform:scale(1.08); opacity:.76; } }
@keyframes aura-turn { to { transform:rotate(360deg); } }
@keyframes aura-turn-reverse { to { transform:rotate(-360deg); } }
@keyframes aura-drift { 0%,100% { transform:rotate(-9deg) scale(.99); } 50% { transform:rotate(-6deg) scale(1.015); } }
@keyframes aura-breathe { 0%,100% { transform:scale(.94); opacity:.28; } 50% { transform:scale(1.06); opacity:.62; } }
@keyframes aura-accent { 0%,100% { transform:translate(-2px,2px); opacity:.42; } 50% { transform:translate(3px,-4px); opacity:.8; } }
@keyframes oil-bead { to { transform:translate(7px,-9px) scale(1.12); opacity:.68; } }
.workspace { padding-block:clamp(32px,6vw,76px) 96px; }
.tool-tabs { display:flex; gap:4px; width:max-content; max-width:100%; margin:0 0 14px; padding:4px; overflow:auto; border:1px solid var(--line); border-radius:7px; background:var(--surface); box-shadow:0 8px 24px rgba(13,41,31,.06); }
.tool-tabs button { min-height:38px; padding:8px 16px; border:0; border-radius:4px; background:transparent; color:var(--muted); font:700 .66rem/1.1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.tool-tabs button[aria-selected="true"] { background:var(--ink); color:var(--paper); }
.calculator { display:grid; grid-template-columns:minmax(0,.93fr) minmax(340px,1.07fr); min-height:560px; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:color-mix(in srgb,var(--surface) 88%,transparent); -webkit-backdrop-filter:blur(16px) saturate(130%); backdrop-filter:blur(16px) saturate(130%); box-shadow:var(--shadow); }
.panel { min-width:0; padding:clamp(24px,4vw,48px); }
.panel--form { border-right:1px solid var(--line); }
.panel .micro { color:var(--accent); }
.panel h2 { margin-bottom:9px; font:700 clamp(1.6rem,3vw,2.4rem)/1.05 Georgia,serif; letter-spacing:-.03em; overflow-wrap:anywhere; }
.subtabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.subtabs button { flex:1 1 auto; min-height:46px; padding:8px 14px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--muted); font:700 .66rem/1.25 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.05em; text-transform:uppercase; }
.subtabs button[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.recipe-configurator { display:grid; gap:16px; }
.recipe-configurator__intro { padding:4px 2px 8px; }
.recipe-configurator__intro .micro { margin-bottom:10px; }
.recipe-configurator__intro h2 { margin-bottom:10px; font-size:clamp(2rem,4vw,3.4rem); }
.recipe-configurator__intro > p:last-child { margin:0; color:var(--muted); font-size:.9rem; }
.recipe-step { margin:0; padding:24px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface) 80%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.recipe-step > span:first-child { margin-bottom:15px; font-size:.76rem; letter-spacing:.13em; }
.recipe-step select { min-height:58px; padding:10px 44px 10px 18px; border-radius:999px; font-size:1rem; font-weight:750; }
.volume-readout { display:flex; align-items:center; justify-content:space-between; min-height:68px; margin-top:2px; padding:12px 18px; border:1px solid var(--line); background:var(--paper); }
.volume-readout output { color:var(--ink); font-size:1.35rem; font-weight:750; }
.volume-readout span { color:var(--muted); font:700 .75rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; }
.recipe-step small { display:block; margin:14px 0 10px; color:var(--muted); font:500 .68rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; }
.recipe-step .presets { margin:0; }
.recipe-step .preset { min-height:48px; padding:9px 16px; font-size:.74rem; font-weight:700; }
.recipe-step .preset[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.field { display:block; margin:0 0 22px; }
.field > span { display:block; margin-bottom:8px; font:700 .69rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
select,input { width:100%; min-height:52px; padding:10px 13px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); }
select[data-susz-catalog] .catalog-producer-group,
select[data-oil-flower] .catalog-producer-group { color:var(--ink); background:color-mix(in srgb,var(--surface) 92%,transparent); font-weight:900; }
select[data-susz-catalog] .catalog-producer-group > option,
select[data-oil-flower] .catalog-producer-group > option { color:var(--ink); background:color-mix(in srgb,var(--surface) 92%,transparent); font-weight:600; }
@supports (appearance: base-select) {
  select[data-susz-catalog],
  select[data-oil-flower],
  select[data-susz-catalog]::picker(select),
  select[data-oil-flower]::picker(select) { appearance:base-select; }
  select[data-susz-catalog]::picker(select),
  select[data-oil-flower]::picker(select) { max-height:min(70vh,620px); padding:8px; overflow-y:auto; overscroll-behavior:contain; border:1px solid color-mix(in srgb,#fff 46%,var(--line)); border-radius:16px; background-color:color-mix(in srgb,var(--surface) 74%,transparent); background-image:linear-gradient(145deg,rgba(255,255,255,.34),transparent 44%); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); box-shadow:0 24px 64px rgba(3,16,11,.24),inset 0 1px 0 rgba(255,255,255,.46); opacity:0; transform:translateY(-5px) scale(.985); transform-origin:top center; transition:opacity 170ms var(--ease-out),transform 170ms var(--ease-out),display 170ms allow-discrete,overlay 170ms allow-discrete; }
  select[data-susz-catalog]::picker(select):popover-open,
  select[data-oil-flower]::picker(select):popover-open { opacity:1; transform:none; }
  @starting-style {
    select[data-susz-catalog]::picker(select):popover-open,
    select[data-oil-flower]::picker(select):popover-open { opacity:0; transform:translateY(-5px) scale(.985); }
  }
  select[data-susz-catalog] .catalog-producer-group,
  select[data-oil-flower] .catalog-producer-group { margin:3px 0 9px; padding:0 6px 7px; border:0; border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent); background:transparent; color:var(--ink); }
  select[data-susz-catalog] .catalog-producer-group > legend,
  select[data-oil-flower] .catalog-producer-group > legend { width:100%; padding:10px 4px 7px; color:var(--ink); font-size:.86rem; font-weight:900; letter-spacing:.01em; }
  select[data-susz-catalog] .catalog-producer-group > option,
  select[data-oil-flower] .catalog-producer-group > option { min-height:44px; margin-top:2px; padding:10px; border-radius:7px; background:color-mix(in srgb,var(--surface) 66%,transparent); color:var(--ink); font-weight:600; }
  select[data-susz-catalog] .catalog-producer-group > option:is(:hover,:focus-visible,:checked),
  select[data-oil-flower] .catalog-producer-group > option:is(:hover,:focus-visible,:checked) { background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
}
:root[data-theme="dark"] select[data-susz-catalog]::picker(select),
:root[data-theme="dark"] select[data-oil-flower]::picker(select) { background-color:color-mix(in srgb,var(--surface) 80%,transparent); background-image:linear-gradient(145deg,rgba(255,255,255,.13),transparent 44%); border-color:color-mix(in srgb,#fff 20%,var(--line)); box-shadow:0 26px 70px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.2); }
@media (prefers-reduced-transparency: reduce) {
  select[data-susz-catalog]::picker(select),select[data-oil-flower]::picker(select) { background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (forced-colors: active) {
  select[data-susz-catalog]::picker(select),select[data-oil-flower]::picker(select) { border-color:CanvasText; background:Canvas; color:CanvasText; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
input[aria-invalid="true"] { border-color:var(--accent); }
.presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.preset { min-height:40px; padding:7px 13px; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--ink); font:500 .68rem ui-monospace,SFMono-Regular,Menlo,monospace; }
.preset[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:white; }
.panel--result { display:flex; flex-direction:column; background:color-mix(in srgb,var(--soft) 60%,var(--surface)); }
.result-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding-bottom:22px; border-bottom:1px solid var(--line); }
.result-head h2 { max-width:420px; margin-bottom:0; }
.grams { flex:0 0 auto; color:var(--accent); font:700 clamp(2rem,3.4vw,3.1rem)/.9 Georgia,serif; letter-spacing:-.06em; white-space:nowrap; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-block:20px; }
.facts--two { grid-template-columns:repeat(2,1fr); }
.facts div { min-width:0; padding:13px; border:1px solid var(--line); border-radius:5px; background:var(--surface); }
.facts span { display:block; margin-bottom:5px; color:var(--muted); font:.58rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.facts strong { display:block; font-size:.79rem; line-height:1.3; }
.fact-explained { position:relative; cursor:help; }
.fact-explained:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.fact-explanation { position:absolute; left:10px; bottom:calc(100% + 10px); z-index:8; width:min(310px,72vw); padding:11px 13px; border-radius:6px; background:var(--ink); color:var(--paper); font:500 .72rem/1.5 Inter,Arial,sans-serif; letter-spacing:normal; text-transform:none; opacity:0; visibility:hidden; transform:translateY(4px) scale(.98); transform-origin:22px 100%; transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s linear 160ms; pointer-events:none; box-shadow:var(--shadow); }
.fact-explanation::after { position:absolute; top:100%; left:22px; border:6px solid transparent; border-top-color:var(--ink); content:""; }
.fact-explained:focus .fact-explanation,.fact-explained:focus-within .fact-explanation { opacity:1; visibility:visible; transform:translateY(0) scale(1); transition-delay:0s; }
@media (hover:hover) and (pointer:fine) { .fact-explained:hover .fact-explanation { opacity:1; visibility:visible; transform:translateY(0) scale(1); transition-delay:0s; } }
.strains { margin:0 0 18px; color:var(--muted); font-size:.8rem; }
.strains strong { color:var(--ink); font-weight:600; }
.strains__label { display:block; margin-bottom:9px; font:700 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; }
.strains__list { display:flex; flex-wrap:wrap; gap:7px; }
.strain-chip { min-height:36px; padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:.79rem; font-weight:600; line-height:1.2; text-align:left; transition:transform 140ms var(--ease-out),box-shadow 140ms var(--ease-out),border-color 140ms ease,background-color 140ms ease,color 140ms ease; }
@media (hover:hover) and (pointer:fine) {
  .strain-chip:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 16px rgba(13,41,31,.14); }
}
.strain-chip:active { transform:scale(.97); }
.strain-chip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(216,80,32,.26); }
@media (hover:hover) and (pointer:fine) {
  .strain-chip[aria-pressed="true"]:hover { transform:translateY(-2px); background:var(--accent-dark); border-color:var(--accent-dark); }
}
:root[data-theme="dark"] .strain-chip[aria-pressed="true"] { color:#14261d; }
.strains__hint { display:block; margin-top:9px; font-size:.72rem; }
@media (prefers-reduced-motion:reduce) {
  .strain-chip { transition-duration:.01ms; }
  .strain-chip:hover,.strain-chip[aria-pressed="true"]:hover { transform:none; }
}
.draft-label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 8px; color:var(--muted); font:600 .65rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.09em; text-transform:uppercase; }
.copy { min-height:34px; padding:6px 9px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--accent); font:700 .63rem Inter,Arial,sans-serif; }
.copy:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
pre { min-height:188px; margin:0; padding:18px; overflow:auto; border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink); font:.77rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.rx-total { display:grid; gap:7px; margin:14px 0 0; color:var(--muted); font-size:.8rem; }
.rx-total p { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; }
.rx-total strong { color:var(--ink); }
.tip { position:relative; display:inline-flex; }
.tip__trigger { display:grid; place-items:center; width:20px; height:20px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--muted); font:700 .62rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.tip__trigger:hover { border-color:var(--accent); color:var(--accent); }
.tip__bubble { position:absolute; right:-6px; bottom:calc(100% + 10px); z-index:6; width:min(280px,72vw); padding:10px 12px; border-radius:6px; background:var(--ink); color:var(--paper); font:400 .72rem/1.55 Inter,Arial,sans-serif; letter-spacing:normal; text-transform:none; opacity:0; visibility:hidden; transition:opacity 150ms ease,visibility 150ms ease; pointer-events:none; box-shadow:var(--shadow); }
.tip:hover .tip__bubble,.tip:focus-within .tip__bubble { opacity:1; visibility:visible; }
.equation { margin:16px 0 0; color:var(--muted); font-size:.75rem; }
.equation span { display:block; font:600 .6rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.equation code { display:block; margin-top:6px; color:var(--ink); font:.72rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.error { margin:14px 0 0; color:var(--accent); font-weight:700; }
.professional-notice { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr) auto; align-items:center; gap:24px; margin:0 0 14px; padding:20px 22px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface) 82%,transparent); -webkit-backdrop-filter:blur(14px) saturate(130%); backdrop-filter:blur(14px) saturate(130%); box-shadow:0 8px 24px rgba(13,41,31,.06); }
.professional-notice .micro { margin-bottom:7px; color:var(--accent); }
.professional-notice h2 { margin:0; font:700 clamp(1.2rem,2vw,1.55rem)/1.12 Georgia,serif; letter-spacing:-.025em; }
.professional-notice > p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.55; }
.access-exit,.access-submit { min-height:42px; padding:9px 14px; border:1px solid var(--ink); border-radius:5px; background:var(--ink); color:var(--paper); font-size:.72rem; font-weight:750; }
.access-exit { white-space:nowrap; }
.professional-access { width:min(100%,760px); margin-inline:auto; padding:clamp(30px,5vw,54px); border:1px solid var(--line); border-radius:9px; background:var(--surface); box-shadow:var(--shadow); }
.professional-access .micro { color:var(--accent); }
.access-heading h2 { margin:0 0 14px; font:700 clamp(2rem,4vw,3.2rem)/1.12 Georgia,serif; letter-spacing:-.04em; }
.access-heading > p { max-width:650px; margin:0; color:var(--muted); font-size:.94rem; line-height:1.65; }
.access-heading > .access-disclaimer { margin-top:16px; padding-left:16px; border-left:3px solid var(--accent); font-size:.82rem; }
.access-form { display:grid; gap:18px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.access-check { display:grid; grid-template-columns:20px 1fr; align-items:start; gap:12px; padding:18px; border:1px solid var(--line); border-radius:7px; background:color-mix(in srgb,var(--soft) 48%,var(--surface)); color:var(--ink); font-size:.82rem; line-height:1.6; cursor:pointer; transition:border-color 180ms ease,background-color 180ms ease; }
.access-check input { width:18px; min-height:18px; height:18px; margin:2px 0 0; padding:0; accent-color:var(--accent); }

/* Wariant z tłem WebGL. Dokładany dopiero, gdy jade-caustics.js jest wczytany. */
.professional-access--jade { position:relative; isolation:isolate; overflow:hidden; border-color:var(--hero-line); background:var(--hero-bg); color:var(--hero-ink); }
.access-caustics-bg { position:absolute; inset:0; width:100%; height:100%; opacity:.62; mix-blend-mode:screen; pointer-events:none; z-index:0; }
.professional-access--jade > *:not(.access-caustics-bg) { position:relative; z-index:1; }
.professional-access--jade .micro { color:var(--hero-kicker); }
.professional-access--jade .access-heading h2 { color:var(--hero-ink); }
.professional-access--jade .access-heading > p { color:var(--hero-muted); }
.professional-access--jade .access-heading > .access-disclaimer { border-left-color:var(--hero-kicker); }
.professional-access--jade .access-form { border-top-color:var(--hero-line); }
.professional-access--jade .access-check { border-color:var(--hero-line); background:rgba(6,21,15,.42); color:var(--hero-ink); backdrop-filter:blur(2px); }
.professional-access--jade .access-check:hover { border-color:rgba(220,245,231,.4); }
.professional-access--jade .access-check:has(input:checked) { border-color:var(--hero-kicker); background:rgba(6,21,15,.56); }
.professional-access--jade .access-check input { accent-color:var(--hero-kicker); }
.professional-access--jade .access-submit { border:1px solid transparent; border-radius:6px; background:var(--hero-ink); color:#0d2b20; font-weight:700; }
.professional-access--jade .access-submit:not(:disabled):hover { background:#fff; }
.professional-access--jade .access-back { color:var(--hero-muted); }
.professional-access--jade .access-back:hover { color:var(--hero-ink); }
.professional-access--jade .field-error { color:#ffb59a; }
.access-footer-links { margin-top:16px; text-align:center; font-size:.85rem; }
.access-footer-links a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.professional-access--jade .access-footer-links a { color:var(--hero-muted); }
.professional-access--jade .access-footer-links a:hover { color:var(--hero-ink); }
@media (prefers-reduced-motion:reduce) { .access-caustics-bg { opacity:.4; } }
.access-privacy { margin:0; color:var(--muted); font-size:.72rem; line-height:1.55; }
.field-error { margin:0; color:var(--accent); font-size:.78rem; font-weight:700; }
.access-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; }
.access-submit { min-height:48px; padding-inline:18px; }
.access-submit:disabled { cursor:not-allowed; opacity:.45; transform:none; }
.access-back { display:inline-flex; align-items:center; min-height:44px; padding-block:8px; color:var(--muted); font-size:.72rem; font-weight:700; text-underline-offset:3px; }
.access-back:hover { color:var(--accent-dark); }
.credit { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; padding:20px max(20px,calc((100% - 1180px) / 2)); border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; line-height:1.6; }
.credit strong { color:var(--ink); font-weight:700; }
@media (max-width:860px) { .hero__content { grid-template-columns:1fr; padding-block:52px; } .oil-visual { width:min(86vw,400px); justify-self:center; margin-top:-16px; } }
@media (max-width:780px) { .topbar { grid-template-columns:1fr auto; } .topbar__name { display:none; } .calculator { grid-template-columns:1fr; } .panel--form { border-right:0; border-bottom:1px solid var(--line); } .result-head { display:block; } .grams { display:inline-block; margin-top:16px; } .facts { grid-template-columns:1fr; } .professional-notice { grid-template-columns:1fr; align-items:start; } .access-exit { justify-self:start; } .credit { display:block; } }
@media (max-width:560px) { .topbar__side { flex-direction:column-reverse; align-items:flex-end; gap:8px; padding-block:8px; } }
@media (max-width:440px) { .container { width:min(100% - 28px,1180px); } .topbar { padding-inline:14px; } .brand img { width:110px; } .theme-control > span { display:none; } h1 { font-size:3.35rem; } .panel { padding:24px 18px; } .tool-tabs { width:100%; } .tool-tabs button { flex:1 0 auto; } .recipe-step { padding:20px 16px; } .recipe-step select { font-size:.92rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .oil-visual__glow,.oil-visual__auras,.oil-visual__aura,.oil-visual__aura-accent,.oil-visual__drop,.oil-visual__core,.oil-visual__sheen,.oil-visual__bead { animation:none; } select[data-susz-catalog]::picker(select),select[data-oil-flower]::picker(select),.fact-explanation { transform:none; transition-duration:.01ms; } }

/* ===== CANNPATH: pelnostronicowe falujace tlo, szklo, plaskie zakladki ===== */
body { background:var(--hero-bg); }
.page-caustics-bg { position:fixed; inset:0; z-index:0; width:100%; height:100%; opacity:.6; mix-blend-mode:screen; pointer-events:none; }
.skip-link,.topbar,main,.credit { position:relative; z-index:1; }
.hero { background:transparent; }
.hero-signature { position:absolute; right:clamp(18px,4vw,64px); bottom:16px; z-index:2; margin:0; color:var(--hero-muted); font:italic 500 .85rem/1 Georgia,serif; letter-spacing:.05em; }
.topbar { background:rgba(6,21,15,.55); border-bottom-color:var(--hero-line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.brand { gap:12px; padding:5px 12px; border:1px solid var(--hero-line); border-radius:12px; background:radial-gradient(120% 140% at 30% 20%,#10281e 0%,#061510 72%); }
.brand img { width:auto; height:52px; }
.topbar__name { color:var(--hero-muted); }
.theme-control { color:var(--hero-muted); }
.theme-control select { border-color:var(--hero-line); background:rgba(6,21,15,.5); color:var(--hero-ink); }
.credit { border-top-color:var(--hero-line); color:var(--hero-muted); }
.credit a { color:var(--hero-muted); }
.credit strong { color:var(--hero-ink); }
.tool-tabs { display:flex; width:100%; gap:4px; border-color:color-mix(in srgb,#fff 18%,var(--line)); background:color-mix(in srgb,var(--surface) 78%,transparent); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); }
.tool-tabs button { flex:1 1 0; min-width:0; }
.professional-access--jade { border-color:var(--hero-line); background:rgba(6,21,15,.58); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); }
.rule-note { margin:14px 0 0; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:6px; color:var(--muted); font-size:.78rem; line-height:1.55; background:var(--surface); }
.rule-note span { display:block; margin-bottom:4px; color:var(--accent); font:700 .6rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
/* Te trzy selecty (docelowe stężenie, susz z katalogu w obu widokach) dzielą ten
   sam szklany wygląd wyzwalacza, żeby "ekstrakt 10%" i "susz z katalogu" wyglądały
   spójnie w obu motywach. Susz z katalogu dostaje dodatkowo mocniejszą przejrzystość. */
select[data-oil-strength],select[data-susz-catalog],select[data-oil-flower] { border-color:color-mix(in srgb,#fff 24%,var(--line)); background:color-mix(in srgb,var(--paper) 82%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
select[data-susz-catalog],select[data-oil-flower] { background:color-mix(in srgb,var(--paper) 72%,transparent); -webkit-backdrop-filter:blur(14px) saturate(135%); backdrop-filter:blur(14px) saturate(135%); }
@media (max-width:700px) { .tool-tabs { overflow-x:auto; } .tool-tabs button { flex:1 0 auto; padding-inline:10px; } .brand img { height:42px; } }
@media (prefers-reduced-transparency: reduce) { .topbar,.tool-tabs,.professional-access--jade,.calculator,.professional-notice,.recipe-step,.option-card,select[data-oil-strength],select[data-susz-catalog],select[data-oil-flower] { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface); } .professional-access--jade { background:var(--hero-bg); } }
@media (prefers-reduced-motion: reduce) { .page-caustics-bg { opacity:.4; } }

/* ===== Pulsowanie odmian w katalogu, dopóki żadna nie jest wybrana ===== */
.strains__list--pulse .strain-chip { animation:strain-chip-pulse 1.9s var(--ease-in-out) infinite; }
@media (hover:hover) and (pointer:fine) { .strains__list--pulse .strain-chip:hover { animation-play-state:paused; } }
@keyframes strain-chip-pulse {
  0%,100% { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent); border-color:var(--accent); }
  50% { box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 0%,transparent); border-color:var(--line); }
}
@media (prefers-reduced-motion:reduce) {
  .strains__list--pulse .strain-chip { animation:none; box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); }
}

/* ===== Preparaty jako karty do kliknięcia zamiast rozwijanej listy (extractum,
   extractum purum, pastylki) - wypełniają puste miejsce i nie wymagają otwierania. ===== */
.option-list { display:grid; gap:10px; }
.option-card { display:block; width:100%; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--surface) 82%,transparent); color:var(--ink); text-align:left; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms var(--ease-out),background-color 180ms ease; }
.option-card__top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.option-card__top strong { font-size:.98rem; }
.option-card__top span { flex:0 0 auto; color:var(--muted); font:600 .66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.05em; text-transform:uppercase; }
.option-card__meta { display:block; margin-top:6px; color:var(--muted); font-size:.8rem; line-height:1.45; }
@media (hover:hover) and (pointer:fine) {
  .option-card:not(.option-card--static):hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); transform:translateY(-1px); box-shadow:0 8px 20px rgba(13,41,31,.1); }
}
.option-card[aria-checked="true"] { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent); }
.option-card[aria-checked="true"] .option-card__top span { color:var(--accent-dark); }
.option-card--static { cursor:default; border-style:dashed; }
@media (prefers-reduced-motion:reduce) { .option-card:hover { transform:none; } }