/* Табак Lunify — /smoke (основа из food.css) */
.fd{--warm:#F2A65A;--hot:#F2701E;--ok:#5BD18B;--bad:#FF6B6B;--ice:#7FD3FF;--cell:32px;position:relative;overflow-x:clip}
.fd-wrap{max-width:var(--container);margin:0 auto;padding:0 16px}
.fd section{padding:72px 0 8px;scroll-margin-top:84px}
.fd h2{font-family:var(--font-display);font-size:clamp(26px,4vw,40px);font-weight:700;line-height:1.1;margin:0 0 12px;letter-spacing:-.01em}
.fd h3{font-family:var(--font-display);font-size:20px;font-weight:600;margin:0 0 8px}
.fd .lead{color:var(--text-dim);font-size:17px;line-height:1.6;max-width:720px;margin:0 0 28px}
.fd p{line-height:1.6}
.fd kbd{font-family:var(--font-body);font-size:.86em;font-weight:600;padding:1px 7px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-strong);border-bottom-width:2px;white-space:nowrap}
.fd .mut{color:var(--text-dim)}
.fd .px{font-family:var(--font-pixel);font-size:11px;letter-spacing:.02em}

/* иконки из атласа */
.ic{display:inline-block;width:var(--s,32px);height:var(--s,32px);background-image:url(/assets/smoke/atlas.webp?v=b);background-size:calc(var(--s,32px)*16) auto;background-position:calc(var(--x)*var(--s,32px)*-1) calc(var(--y)*var(--s,32px)*-1);image-rendering:pixelated;flex:none;vertical-align:middle}
.ic.st{image-rendering:auto}
.ic.none{background:var(--surface-2);border-radius:6px}
button.ic,.ic.link{cursor:pointer;border:0;padding:0;background-color:transparent;transition:transform .15s var(--ease)}
button.ic:hover,.ic.link:hover{transform:scale(1.15)}

/* герой */
.fd-hero{padding:140px 0 40px;text-align:center;position:relative}
.fd-hero::before{content:"";position:absolute;inset:0 0 auto;height:620px;background:radial-gradient(60% 50% at 50% 30%,rgba(242,112,30,.18),transparent 70%);pointer-events:none;z-index:-1}
.fd-kicker{font-family:var(--font-pixel);font-size:11px;color:var(--warm);letter-spacing:.08em;margin-bottom:18px}
.fd-hero h1{font-family:var(--font-display);font-size:clamp(38px,7vw,76px);font-weight:800;line-height:1;margin:0 0 18px;letter-spacing:-.02em}
.fd-hero h1 span{background:linear-gradient(90deg,var(--warm),var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent}
.fd-hero .lead{margin:0 auto 34px}
.fd-stations-row{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:0 auto 30px;max-width:1120px;flex-wrap:wrap}
.fd-stations-row img{width:clamp(64px,10.5vw,118px);height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45));transition:transform .4s var(--ease)}
.fd-stations-row img:hover{transform:translateY(-8px) scale(1.06)}
.fd-stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.fd-stat{background:var(--surface-fade);border:1px solid var(--line);border-radius:14px;padding:12px 18px;min-width:120px}
.fd-stat b{display:block;font-family:var(--font-display);font-size:28px;color:var(--warm)}
.fd-stat span{font-size:13px;color:var(--text-dim)}

/* липкая навигация по разделам */
.fd-toc{position:sticky;top:72px;z-index:5;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px;margin:20px auto 0;max-width:max-content;max-width:100%;width:max-content;background:var(--veil);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px}
.fd-toc::-webkit-scrollbar{display:none}
.fd-toc a{white-space:nowrap;font-size:14px;font-weight:600;color:var(--text-dim);text-decoration:none;padding:7px 14px;border-radius:999px;transition:background .2s,color .2s}
.fd-toc a:hover,.fd-toc a.on{background:var(--surface-2);color:var(--text)}

/* карточки */
.card{background:var(--surface-fade);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* шаги */
.fsteps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-bottom:28px}
.fstep{position:relative;padding-top:52px}
.fstep::before{counter-increment:s;content:counter(s);position:absolute;top:18px;left:22px;font-family:var(--font-pixel);font-size:14px;color:var(--warm)}
.fstep p{margin:0;color:var(--text-dim)}

/* верстак */
.crafts{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.craft{display:flex;align-items:center;gap:14px;padding:14px}
.cgrid{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:2px;background:#8b8b8b;padding:3px;border-radius:4px;box-shadow:inset 2px 2px 0 #373737,inset -2px -2px 0 #fff;flex:none}
.cgrid i{background:#8b8b8b;box-shadow:inset 2px 2px 0 #373737,inset -2px -2px 0 #fff;display:flex;align-items:center;justify-content:center}
.cgrid .ic{--s:28px}
.craft .arrow{color:var(--text-dim);font-size:22px}
.craft .res{display:flex;flex-direction:column;gap:4px;min-width:0}
.craft .res .ic{--s:44px}
.craft .res b{font-size:14px;line-height:1.25}
.craft .res small{font-size:12px;color:var(--text-dim);line-height:1.35}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:rgba(242,166,90,.14);color:var(--warm)}
.tag.tool{background:rgba(127,211,255,.12);color:var(--ice)}

/* продукты */
.crops{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.crop{display:flex;gap:12px;align-items:center;padding:12px 14px}
.crop img{width:92px;height:92px;flex:none;image-rendering:auto}
.crop .meta{min-width:0}
.crop .meta b{display:flex;align-items:center;gap:6px;font-size:15px}
.crop .meta .ic{--s:24px}
.crop .meta p{margin:4px 0 0;font-size:13px;color:var(--text-dim);line-height:1.4}
.biome{display:inline-block;font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--surface-2);margin:3px 3px 0 0;color:var(--text)}
.leaves{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.leaf{display:flex;align-items:center;gap:10px;padding:10px 12px}
.leaf .ic{--s:30px}
.leaf .pct{margin-left:auto;font-family:var(--font-pixel);font-size:10px;color:var(--warm)}
.facts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin:18px 0 26px}
.fact{padding:14px 16px;font-size:14px;line-height:1.45;color:var(--text-dim)}
.fact b{display:block;color:var(--text);font-size:15px;margin-bottom:2px}

/* станции */
.station{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:start;padding:28px;margin-bottom:22px}
.station .pic{position:sticky;top:140px;text-align:center}
.station .pic img{width:100%;max-width:260px;height:auto;aspect-ratio:1;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.station .pic .craftline{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.station .num{font-family:var(--font-pixel);font-size:10px;color:var(--warm);margin-bottom:10px}
.station h3{font-size:26px}
.station .what{color:var(--text-dim);margin:0 0 16px}
.how{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:8px}
.how li{position:relative;padding-left:26px;line-height:1.5}
.how li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--warm);transform:rotate(45deg)}
.nums{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.nums>span{font-size:13px;padding:6px 10px;border-radius:10px;background:var(--inset);border:1px solid var(--line)}
.nums>span b{color:var(--warm)}
.st-recipes{display:flex;flex-wrap:wrap;gap:4px;margin-top:14px}
.st-recipes .ic{--s:30px}
.st-more{font-size:13px;color:var(--text-dim);margin-top:8px}
.st-more a{color:var(--warm)}

/* демки */
.demo{border:1px dashed var(--line-strong);border-radius:16px;padding:16px;background:var(--inset);margin-top:4px}
.demo-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warm);margin-bottom:12px}
.demo-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(91,209,139,.18)}
.demo-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.demo .msg{min-height:1.5em;font-size:14px;margin-top:10px}
.msg .good{color:var(--ok)}.msg .bad{color:var(--bad)}.msg .warn{color:var(--warm)}
.btn-k{font:600 14px var(--font-body);color:var(--text);background:var(--surface-2);border:1px solid var(--line-strong);border-bottom-width:3px;border-radius:10px;padding:9px 14px;cursor:pointer;user-select:none;touch-action:manipulation;transition:transform .08s,background .2s}
.btn-k:hover{background:var(--surface)}
.btn-k:active{transform:translateY(2px);border-bottom-width:1px;margin-bottom:2px}
.btn-k.hot{background:linear-gradient(180deg,var(--orange-soft),var(--hot));border-color:rgba(0,0,0,.25);color:#fff}
.btn-k[aria-pressed=true]{background:var(--warm);color:#1a1205}
.btn-k:disabled{opacity:.45;cursor:default}
.meter{position:relative;height:14px;border-radius:7px;background:var(--surface-2);overflow:hidden;flex:1;min-width:120px}
.meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ice);border-radius:7px;transition:width .1s linear}
.meter.burn i{background:linear-gradient(90deg,var(--warm),var(--bad))}
.meter.done i{background:var(--ok)}
.mlabel{font-size:12px;color:var(--text-dim);width:74px;flex:none}
.mval{font-family:var(--font-pixel);font-size:10px;width:52px;text-align:right;flex:none}
.stars{color:var(--warm);letter-spacing:2px;font-size:16px}
.stars s{color:var(--surface-2);text-decoration:none}

/* ритм доски */
.rhythm{position:relative;height:38px;border-radius:8px;background:repeating-linear-gradient(90deg,#2a2f4a 0 6px,#232842 6px 12px);overflow:hidden;cursor:pointer;touch-action:manipulation;margin-bottom:10px}
.rhythm .zone{position:absolute;top:0;bottom:0;left:37%;width:26%;background:repeating-linear-gradient(90deg,rgba(91,209,139,.55) 0 6px,rgba(91,209,139,.35) 6px 12px)}
.rhythm .cur{position:absolute;top:3px;bottom:3px;width:10px;margin-left:-5px;background:#fff;border-radius:3px;box-shadow:0 0 12px rgba(255,255,255,.8)}
.board-view{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.board-view .ic{--s:48px;transition:transform .15s}
.board-pieces{display:flex;gap:2px}
.board-pieces .ic{--s:26px;animation:pop .25s var(--ease)}
@keyframes pop{from{transform:scale(.3) translateY(-10px);opacity:0}}
.shake{animation:shake .25s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* помешивание */
.stir{display:flex;gap:18px 24px;align-items:center;flex-wrap:wrap}
.bowl{position:relative;width:180px;height:180px;border-radius:50%;flex:none;touch-action:none;cursor:grab;background:radial-gradient(circle at 50% 50%,var(--fill,#e9e2d0) 0 calc(var(--lvl,0)*1%),#3a4166 calc(var(--lvl,0)*1% + 1%) 62%,#5a6290 63% 70%,#2b3150 71%);box-shadow:inset 0 8px 24px rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.3);user-select:none}
.bowl.pot{background:radial-gradient(circle,var(--fill,#6fb8e8) 0 58%,#b9bfd0 59% 66%,#7e8597 67% 72%,transparent 73%)}
.bowl .ring{position:absolute;inset:26%;border:2px dashed rgba(255,255,255,.18);border-radius:50%}
.bowl .tool{position:absolute;left:50%;top:50%;width:0;height:0}
.bowl .tool .ic{--s:46px;position:absolute;left:-23px;top:-23px;transform:translate(var(--tx,0),var(--ty,0))}
.bowl .hint{position:absolute;inset:auto 0 -26px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:var(--text-dim);pointer-events:none;padding:0}
.bowl .bits{position:absolute;inset:0;pointer-events:none}
.bowl .bits .ic{--s:30px;position:absolute;left:calc(50% - 15px);top:calc(50% - 15px);transition:transform .15s linear,opacity .3s}
.stir-side{flex:1;min-width:220px;display:grid;gap:8px}
.mrow{display:flex;align-items:center;gap:8px}

/* сковорода */
.pan{position:relative;width:150px;height:150px;flex:none;border-radius:50%;background:radial-gradient(circle,#3b3b42 0 58%,#1d1d22 59% 70%,transparent 71%);perspective:400px}
.pan::after{content:"";position:absolute;right:-56px;top:66px;width:62px;height:16px;border-radius:6px;background:#4a3020}
.pan .ic{--s:72px;position:absolute;left:39px;top:39px;transition:filter .3s}
.pan.heat{box-shadow:0 18px 30px -10px rgba(242,112,30,.6)}
.flip{animation:flip .4s var(--ease)}
@keyframes flip{50%{transform:translateY(-46px) rotateX(180deg)}100%{transform:rotateX(360deg)}}

/* духовка */
.oven{position:relative;width:150px;flex:none}
.oven img{width:150px;height:150px;display:block}
.oven .smell{position:absolute;left:0;right:0;top:-6px;text-align:center;font-size:13px;font-weight:600}
.heatsel{display:flex;gap:4px}

/* тарелка */
.plate-demo{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.plate{position:relative;width:170px;height:190px;flex:none;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;padding-bottom:20px}
.plate::before{content:"";position:absolute;bottom:4px;left:0;right:0;height:26px;border-radius:50%;background:radial-gradient(ellipse,#fff 0 55%,#9ec9ef 56% 62%,#eef3fb 63%);box-shadow:0 8px 16px rgba(0,0,0,.35)}
.plate .ic{--s:56px;margin-top:-34px;position:relative;animation:drop .3s var(--ease)}
.plate .ic:first-child{margin-top:0}
@keyframes drop{from{transform:translateY(-60px);opacity:0}}
.palette{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:220px}
.palette button{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:5px;cursor:pointer;transition:transform .12s,border-color .2s}
.palette button:hover{transform:translateY(-2px);border-color:var(--warm)}
.palette .ic{--s:34px}

/* газировка */
.gauge{position:relative;height:26px;border-radius:8px;overflow:hidden;background:linear-gradient(90deg,#1f3b55 0 59%,#1d4a33 59% 83.6%,#4a1f24 83.6%)}
.gauge i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--ice) 0 calc(59% / var(--k,1)),var(--ok) 0 calc(83.6% / var(--k,1)),var(--bad) 0);transition:width .08s linear}
.gauge b{position:absolute;top:0;bottom:0;left:72.7%;width:2px;background:#fff;opacity:.8}
.fizz{animation:shake .3s 2}

/* бочка */
.timeline{position:relative;height:46px;border-radius:10px;overflow:hidden;display:flex;font-size:12px;font-weight:600}
.timeline div{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px}
.timeline .t1{flex:1;background:repeating-linear-gradient(135deg,#3a2b1c 0 10px,#33261a 10px 20px);color:var(--warm)}
.timeline .t2{flex:1;background:rgba(91,209,139,.25);color:var(--ok)}
.timeline .t3{flex:.7;background:rgba(255,107,107,.15);color:var(--bad)}
.tl-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-top:4px}

/* качество */
.qrow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.q{padding:16px;text-align:center}
.q .stars{display:block;font-size:15px;margin-bottom:6px}
.q b{display:block;font-size:15px;margin-bottom:4px}
.q small{color:var(--text-dim);font-size:12.5px;line-height:1.4;display:block}
.q.q5{border-color:rgba(242,166,90,.5);box-shadow:0 0 30px -8px rgba(242,166,90,.5)}
.formula{font-family:var(--font-pixel);font-size:11px;line-height:2;background:var(--inset);border-radius:12px;padding:14px 16px;overflow-x:auto;white-space:nowrap}
.qcalc{display:grid;gap:14px;align-content:start}
.qcalc label{display:block;font-size:15px}
.qcalc input[type=range]{width:100%;accent-color:var(--warm)}
.heat-list{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.heat-list div{display:flex;align-items:center;gap:10px;padding:8px 12px}
.heat-list .ic{--s:30px}
.flames{margin-left:auto;color:var(--hot);letter-spacing:1px}

/* каталог */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{font:600 13px var(--font-body);color:var(--text-dim);background:var(--surface-fade);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip .ic{--s:20px}
.chip[aria-pressed=true]{color:#1a1205;background:var(--warm);border-color:var(--warm)}
.search{width:100%;font:500 16px var(--font-body);color:var(--text);background:var(--surface-fade);border:1px solid var(--line-strong);border-radius:14px;padding:13px 16px;margin-bottom:12px}
.search:focus{outline:2px solid var(--warm);outline-offset:1px}
.rlist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr))}
.rc{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;position:relative;overflow:hidden;transition:transform .2s var(--ease),border-color .2s}
.rc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cat,var(--line-strong))}
.rc.c-dish{--cat:var(--hot)}.rc.c-dessert{--cat:#F27FB8}.rc.c-drink{--cat:var(--ice)}.rc.c-none{--cat:#8a90b0}
.rlist .rc:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.rc-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim)}
.rc-st{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--text);letter-spacing:.02em}
.rc-st .ic{--s:22px}
.rc-par{margin-left:auto;text-align:right}
.rc-body{display:flex;align-items:center;gap:10px}
.rc-ins{display:flex;flex-wrap:wrap;gap:4px;align-items:center;flex:1;min-width:0}
.slot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;background:var(--inset);border:1px solid var(--line);box-shadow:inset 0 2px 0 rgba(0,0,0,.25);flex:none}
.slot .ic{--s:30px}
.slot.tool{border-style:dashed;border-color:rgba(127,211,255,.35)}
.slot.out{width:58px;height:58px;border-radius:12px;border-color:color-mix(in srgb,var(--cat,var(--warm)) 55%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--cat,var(--warm)) 22%,transparent),var(--inset) 70%)}
.slot.out .ic{--s:42px}
.cnt{position:absolute;right:2px;bottom:0;font-family:var(--font-pixel);font-size:9px;color:#fff;text-shadow:1px 1px 0 #3f3f3f,2px 2px 0 #000;pointer-events:none}
.rc-sep{color:var(--text-dim);font-size:12px}
.rc-arrow{width:26px;height:16px;flex:none;background:linear-gradient(var(--text-dim),var(--text-dim)) left center/18px 3px no-repeat;position:relative;opacity:.7}
.rc-arrow::after{content:"";position:absolute;right:2px;top:2px;border:6px solid transparent;border-left:8px solid var(--text-dim);border-right:0}
.rc-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rc-name b{font-size:15px}
.rc-name .n{font-family:var(--font-pixel);font-size:10px;color:var(--warm)}
.rc-list{font-size:12.5px;color:var(--text-dim);line-height:1.45;margin-top:-6px}
.empty{padding:30px;text-align:center;color:var(--text-dim)}

/* модалка предмета */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,7,15,.7);backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.mbox{width:min(640px,100%);max-height:min(86vh,900px);overflow:auto;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:22px;padding:22px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.mhead{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-right:40px}
.mhead .ic{--s:64px}
.mhead h3{margin:0;font-size:22px}
.mclose,.mback{position:absolute;top:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:18px;cursor:pointer}
.mclose{right:16px}
.mbox h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--warm);margin:18px 0 8px}
.mbox .src{background:var(--inset);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.5;margin-bottom:6px}
.mbox .rc{background:var(--surface-fade);border-radius:14px;margin-bottom:8px;border:1px solid var(--line)}
.mbox .slot{background:var(--bg)}
.crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px;color:var(--text-dim);margin-bottom:10px}
.crumbs button{background:none;border:0;color:var(--warm);cursor:pointer;font:inherit;padding:0}

/* таблица еды */
.ftable{width:100%;border-collapse:collapse;font-size:14px}
.ftable th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);padding:10px 8px;border-bottom:1px solid var(--line-strong);cursor:pointer;white-space:nowrap}
.ftable td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.ftable td:first-child{display:flex;align-items:center;gap:8px}
.ftable .ic{--s:28px}
.legs{display:inline-flex;gap:1px;vertical-align:middle}
.legs i{width:9px;height:9px;background:var(--hot);clip-path:polygon(30% 0,100% 0,100% 60%,55% 100%,0 70%);display:inline-block}
.legs i.h{background:linear-gradient(90deg,var(--hot) 50%,var(--surface-2) 50%)}
.eff{font-size:12px;padding:2px 7px;border-radius:999px;background:rgba(127,211,255,.1);color:var(--ice);white-space:nowrap;margin:1px 2px 1px 0;display:inline-block}
.eff.fire{background:rgba(255,107,107,.12);color:var(--bad)}
.twrap{overflow-x:auto}

.note{border-left:3px solid var(--warm);padding:10px 14px;background:rgba(242,166,90,.06);border-radius:0 12px 12px 0;font-size:14px;line-height:1.55;margin:14px 0}

@media (max-width:820px){
  .station{grid-template-columns:1fr;padding:20px}
  .station .pic{position:static}
  .station .pic img{max-width:200px}
  .qrow{grid-template-columns:1fr 1fr}
  .fd-toc{top:64px}
}
@media (max-width:480px){
  .qrow{grid-template-columns:1fr}
  .bowl{width:160px;height:160px}
  .fd-hero{padding-top:110px}
}
@media (prefers-reduced-motion:reduce){
  .flip,.shake,.plate .ic,.board-pieces .ic{animation:none}
}
:root[data-theme="light"] .fd .card{background:var(--surface)}
:root[data-theme="light"] .rhythm{background:repeating-linear-gradient(90deg,#c9cfe6 0 6px,#bfc6e0 6px 12px)}

/* подсказка в стиле Minecraft */
.mctip{position:fixed;z-index:90;left:0;top:0;pointer-events:none;max-width:260px;padding:7px 10px 8px;background:rgba(16,1,16,.95);border:2px solid transparent;border-radius:4px;background-clip:padding-box;box-shadow:0 0 0 2px rgba(16,1,16,.95),inset 0 0 0 1px #5000ff,inset 0 -1px 0 1px #28007f,0 10px 30px rgba(0,0,0,.5);font-size:14px;line-height:1.35;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.mctip.on{opacity:1;transform:none}
.mctip b{display:block;color:#fff;font-weight:600;text-shadow:2px 2px 0 #3f3f3f}
.mctip .src{display:block;font-size:12px;font-style:italic;color:#5555ff;margin-top:2px}
.mctip .src.mc{color:#aaa}
.mctip .fd{display:block;font-size:12px;color:#ffaa00;margin-top:3px}
.mctip .hint{display:block;font-size:11px;color:#777;margin-top:3px}

/* лоск */
.station .pic::before{content:"";position:absolute;left:50%;top:40%;width:80%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(242,166,90,.16),transparent 65%);z-index:-1;pointer-events:none}
.station{position:relative;isolation:isolate}
.station::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(242,166,90,.06),transparent 40%);pointer-events:none;z-index:-1}
@media (prefers-reduced-motion:no-preference){
  .fd-stations-row img{animation:bob 4s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.45s)}
  .fd-stations-row img:hover{animation-play-state:paused}
}
@keyframes bob{50%{transform:translateY(-8px)}}
.crop,.leaf,.craft{transition:transform .2s var(--ease),border-color .2s}
.crop:hover,.leaf:hover,.craft:hover{transform:translateY(-2px);border-color:var(--line-strong)}
/* мангал, вок, кофе */
.grill{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));padding:12px;border-radius:14px;background:repeating-linear-gradient(90deg,#2a2a30 0 6px,#3a3a42 6px 9px),#2a2a30;box-shadow:inset 0 -18px 30px -12px rgba(242,112,30,.55)}
.skw{display:grid;gap:6px;justify-items:stretch;padding:10px;border-radius:12px;background:rgba(10,10,14,.55)}
.skw .mrow .meter{min-width:60px}
.skw-ic{justify-self:center;background:none;border:0;padding:4px;cursor:pointer;border-radius:10px}
.skw-ic:hover{background:rgba(255,255,255,.06)}
.skw-ic .ic{--s:56px}
.skw.off{opacity:.75}
.wok{position:relative;width:170px;height:120px;flex:none;border-radius:0 0 90px 90px;background:radial-gradient(ellipse at 50% 0,#4a4a52 0 55%,#25252b 56% 70%,transparent 71%);box-shadow:0 18px 30px -10px rgba(242,112,30,.6)}
.wok-food{position:absolute;left:18px;right:18px;top:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.wok-food .ic{--s:30px}
.wok-food.up{animation:wokup .5s var(--ease)}
@keyframes wokup{40%{transform:translateY(-46px) rotate(-8deg)}}
.wok-arrow{position:absolute;right:8px;top:-34px;font-size:28px;color:var(--line-strong);transition:color .1s,transform .1s}
.wok.open .wok-arrow{color:var(--warm);transform:translateY(-6px);text-shadow:0 0 12px var(--warm)}
canvas.cup{width:220px;height:220px;max-width:100%;flex:none;border-radius:50%;touch-action:none;cursor:crosshair;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
@media (prefers-reduced-motion: reduce){.wok-food.up{animation:none}}
.demo .flames{margin-left:0}
.skw .mrow{gap:6px}.skw .mlabel{width:30px}.skw .mval{width:40px}
.wok{margin-top:30px}

/* ---------- /smoke: свои блоки ---------- */
.sm{--warm:#E8B07A;--hot:#C8743A;--smoke:#cfc8bd}
.sm .fd-hero::before{background:radial-gradient(60% 50% at 50% 30%,rgba(200,150,110,.16),transparent 70%)}
.vars{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.var{display:flex;gap:16px;align-items:flex-start;padding:16px 18px}
.var img{width:48px;height:96px;image-rendering:pixelated;flex:none;align-self:center}
.var .var-ic{width:48px;display:flex;justify-content:center;align-self:center;flex:none}
.var .var-ic .ic{--s:46px}
.var .meta{min-width:0;flex:1}
.var .meta b{display:flex;align-items:center;gap:6px;font-size:16px}
.var .meta p{margin:4px 0 0;font-size:13px;color:var(--text-dim);line-height:1.4}
.var .meta .where{color:var(--text);opacity:.8}
.var .meta .note{color:var(--warm)}
.str-l{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);margin:10px 0 4px}.str-l b{color:var(--warm)}
.strength{position:relative;height:6px;border-radius:3px;background:var(--surface-2);margin:0 0 8px;overflow:hidden}
.strength i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#8ab86a,var(--warm));border-radius:3px}
.growth{padding:16px 18px}
.stages{display:flex;align-items:flex-end;justify-content:center;gap:10px 22px;flex-wrap:wrap;margin-top:18px;padding:16px 0 4px;border-radius:12px;background:linear-gradient(180deg,transparent 70%,rgba(120,85,50,.18))}
.stages figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;width:82px}
.stages img{width:48px;height:96px;image-rendering:pixelated}
.stages figcaption{font-size:13px;font-weight:600;text-align:center;line-height:1.25}
.stages small{display:block;font-weight:400;color:var(--text-dim);font-size:11px}
.stages figure.alt{opacity:.85}
.stages .sep{width:1px;align-self:stretch;background:var(--line-strong);margin:0 4px}
.flow{padding:20px}
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow>.frow{justify-content:center}
.fn{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;width:150px;height:118px;padding:10px 8px;border-radius:12px;background:var(--inset);border:1px solid var(--line);flex:none}
.fn b{font-size:13px;line-height:1.2}
.fn small{font-size:11px;color:var(--text-dim);line-height:1.2}
.fa{color:var(--warm);font-size:20px}
.fbranches{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));margin-top:16px;padding-top:16px;border-top:1px dashed var(--line-strong)}
.fb{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fb-h{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--warm)}
.bench{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.brow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.brow b{margin-left:4px}
.brow .mut{font-size:12px;margin-left:auto}
.brow .slot{width:38px;height:38px}
.brow .slot .ic{--s:30px}
.rhythm .zone.perfect{background:rgba(91,209,139,.85)}
.speed{position:relative;height:14px;border-radius:7px;background:var(--surface-2);margin:10px 0 2px}
.speed .sz{position:absolute;top:0;bottom:0;background:rgba(91,209,139,.45);border-radius:7px;transition:left .3s,width .3s}
.speed i{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:#fff;border-radius:2px;box-shadow:0 0 8px rgba(255,255,255,.7);left:0}
.speed-l{display:flex;justify-content:space-between;font-size:11px;color:var(--text-dim);margin-bottom:8px}
.speed-l .sw,.speed-l .hw,.speed-l .pw{color:var(--ok);font-weight:700}
.rack-view{position:relative;height:96px;margin-bottom:10px;border-radius:10px;background:linear-gradient(180deg,#2a2f4a,#1f2338)}
.rack-view .rope{position:absolute;left:8%;right:8%;top:14px;height:3px;background:#9a8a70;border-radius:2px}
.rack-view .hang{position:absolute;left:8%;right:8%;top:16px;display:flex;justify-content:space-around;transition:filter .3s}
.rack-view .lf{display:block;transform:rotate(-35deg);transform-origin:50% 0}
.rack-view .fire-under{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:22px;letter-spacing:30px}
.fbox{position:relative;height:84px;border-radius:10px;background:linear-gradient(180deg,#4a3420,#3a2818);border:3px solid #6a4a2c;margin-bottom:12px;overflow:hidden}
.fbox .leafs{position:absolute;inset:auto 8px 8px;display:flex;justify-content:center;flex-wrap:wrap;gap:2px}
.fbox .lid{position:absolute;left:0;right:0;top:0;height:0;background:repeating-linear-gradient(90deg,#5c3f24 0 20px,#553a21 20px 40px);transition:height .4s var(--ease);z-index:1}
.fbox.closed .lid{height:100%}
.fbox .alert{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-weight:800;color:#ffd75a;z-index:2;text-shadow:0 2px 0 #000;animation:sm-blink .6s steps(2) infinite}
.fbox.alarm .alert{display:flex}
@keyframes sm-blink{50%{opacity:.35}}
.ftl{position:relative;height:16px;border-radius:8px;background:linear-gradient(90deg,var(--surface-2) 0 50%,rgba(91,209,139,.25) 50% 100%)}
.ftl .w{position:absolute;top:0;bottom:0;background:rgba(242,166,90,.75);border-radius:4px}
.ftl .ok{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ok)}
.ftl i{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:#fff;border-radius:2px;left:0}
.hk,.puff{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hk-l,.puff-l{flex:1;min-width:min(100%,280px)}
.hk-r,.puff-r{position:relative;width:150px;height:150px;flex:none;margin:0 auto}
.thermo,.hold{position:relative;height:22px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.thermo .tz{position:absolute;top:0;bottom:0;left:45%;width:33%;background:rgba(91,209,139,.3)}
.thermo::after{content:"";position:absolute;top:0;bottom:0;left:88%;right:0;background:rgba(255,107,107,.25)}
.thermo i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--ice),var(--ok) 60%,var(--warm) 85%,var(--bad));opacity:.8;transition:width .1s linear}
.hold .hz{position:absolute;top:0;bottom:0;background:rgba(91,209,139,.3)}
.hold i{position:absolute;inset:0 auto 0 0;width:0;background:var(--ice);opacity:.8}
.hold i.in{background:var(--ok)}.hold i.over{background:var(--bad)}
.cloud{position:absolute;inset:0;pointer-events:none;--c:#ddd;--o:.9}
.cloud i{position:absolute;left:50%;bottom:20%;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:radial-gradient(circle,var(--c) 0 40%,transparent 70%);opacity:0;filter:blur(2px)}
.cloud.go i{animation:sm-puff 2.2s ease-out forwards}
.cloud.go i:nth-child(2){animation-delay:.12s;--dx:-24px}
.cloud.go i:nth-child(3){animation-delay:.24s;--dx:22px}
.cloud.go i:nth-child(4){animation-delay:.36s;--dx:-6px}
.cloud.nose i{bottom:45%}
.cloud.nose.go i{animation-name:sm-nose}
@keyframes sm-puff{0%{opacity:var(--o);transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx,8px),-90px) scale(2.6)}}
@keyframes sm-nose{0%{opacity:var(--o);transform:translate(0,0) scale(.3)}100%{opacity:0;transform:translate(var(--dx,8px),60px) scale(2.2)}}
.cloud.big{position:relative;inset:auto;width:120px;height:120px;flex:none}
.cloud.big i{opacity:.85;animation:sm-drift 4s ease-in-out infinite;width:56px;height:56px;margin-left:-28px;bottom:24%}
.cloud.big i:nth-child(2){--dx:-22px;animation-delay:-1s}.cloud.big i:nth-child(3){--dx:20px;animation-delay:-2s}.cloud.big i:nth-child(4){--dx:-4px;animation-delay:-3s}
@keyframes sm-drift{0%,100%{transform:translate(var(--dx,0),0) scale(1)}50%{transform:translate(var(--dx,0),-14px) scale(1.25)}}
.rings{position:absolute;inset:0;pointer-events:none;--c:#ddd}
.rings b{position:absolute;left:50%;bottom:25%;width:30px;height:16px;margin-left:-15px;border:4px solid var(--c);border-radius:50%;opacity:0;filter:blur(.6px)}
.rings.go b{animation:sm-ring 2.4s ease-out forwards}
.rings.go b:nth-child(2){animation-delay:.35s}.rings.go b:nth-child(3){animation-delay:.7s}
.rings.go.n1 b:nth-child(n+2){display:none}
@keyframes sm-ring{0%{opacity:.9;transform:translateY(0) scale(.5)}100%{opacity:0;transform:translateY(-100px) scale(2.2)}}
.flavors{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr))}
.flv{display:flex;align-items:center;gap:12px;padding:12px 14px}
.flv .puffdot{width:30px;height:30px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--c) 0 45%,transparent 72%);box-shadow:0 0 18px var(--c)}
.flv b{font-size:15px}
.mixer{padding:18px}
.mx-out{display:flex;align-items:center;gap:18px;margin-top:10px}
.mx-out b{font-size:18px}
.demo.solo{padding:18px}
.sm-note{font-size:13px;margin-top:28px;text-align:center}
.eff{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(91,209,139,.12);color:var(--ok);margin:2px 4px 2px 0;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cloud.big i,.fbox .alert{animation:none}}
.qformula{font-size:15px;line-height:1.55}
.qformula p{margin:0 0 10px}
.qformula p:last-child{margin:0}
.sm .heatsel{flex-wrap:wrap}
.sm .fd-stations-row img{width:clamp(72px,12vw,140px);margin:0 -4px}