:root{
  --bg:#fff7f3; --card:#fdeee6; --brand:#a45645; --accent:#d28a74;
  --text:#4a2e2a; --muted:#7a5a54; --shadow:0 10px 30px rgba(164,86,69,.16);
  --radius:20px;
}

.howto{
  position:relative; padding:clamp(16px,3vw,28px);
  border-radius:28px; box-shadow:var(--shadow);
  background:radial-gradient(120% 140% at 100% 0%, #fff0ea 0%, var(--bg) 40%, #fff 100%);
  overflow:hidden;
}
.howto::after{
  content:""; position:absolute; inset:auto -40% -40% auto; width:60%; height:60%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(210,138,116,.12), transparent 60%);
  pointer-events:none;
}
.howto__title{display:flex;align-items:center;gap:.6rem;color:var(--brand);
  font-weight:800;letter-spacing:.2px;margin:0 0 18px;font-size:clamp(22px,2.5vw,36px)}
.howto__moon{width:1.4em;height:1.4em;opacity:.9}

.howto__steps{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5, minmax(260px, 1fr));
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; position:relative;
}
.howto__steps::-webkit-scrollbar{display:none}

.howto__step{
  scroll-snap-align:start; background:linear-gradient(180deg,#f9e1d5 0%, var(--card) 60%);
  border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:340px; position:relative; isolation:isolate;
  overflow:hidden; transform:translateY(0) scale(1);
  transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.howto__step.is-active{ transform:translateY(-2px) scale(1.012); box-shadow:0 16px 44px rgba(164,86,69,.22) }

.howto__art{ height:160px; display:grid; place-items:center; opacity:.95; will-change:transform }
.howto__step:hover .howto__art svg{ transform:translateY(-2px); transition:transform .3s ease }

.howto__body{
  background:#fff8f4; padding:18px clamp(12px,2vw,18px) 22px;
  border-top:1px solid rgba(0,0,0,.04); border-radius:18px 18px var(--radius) var(--radius);
  flex:1; display:grid; align-content:start; gap:8px;
}
.howto__num{ --size:46px; width:var(--size); height:var(--size); border-radius:999px;
  background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800;
  position:absolute; left:16px; top:138px; box-shadow:0 10px 20px rgba(210,138,116,.35) }
.howto__name{ font-weight:800; color:var(--text); font-size:18px }
.howto__desc{ color:var(--muted); line-height:1.5; font-size:15px }
.howto__meta{ color:var(--muted); font-size:13px; margin-top:6px }

.reveal{ opacity:.02; transform:translateY(14px) }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease }
@media (prefers-reduced-motion:reduce){
  .reveal,.howto__step,.howto__art svg{ transition:none!important }
}

/* Навигация */
.howto__nav{ position:absolute; bottom:12px; right:12px; z-index:5 }
.howto__nav--right{
  width:44px;height:44px;border:none;border-radius:999px; cursor:pointer;
  background:rgba(164,86,69,.12); color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow); transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.howto__nav--right:hover{ transform:translateX(2px); background:rgba(164,86,69,.18) }
.howto__nav--right:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
.howto__nav--right svg{ width:18px;height:18px }
@keyframes howtoPulse{ 0%,100%{opacity:.85; transform:translateX(0)} 50%{opacity:1; transform:translateX(2px)} }
.howto__nav--pulse{ animation:howtoPulse 1.8s ease-in-out infinite }

/* Мобила */

 @media (max-width:960px){
  .howto__steps{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:92vw;
    gap:14px;
    padding-inline:0; /* убрали общий отступ */
    scroll-snap-stop:always;
    scroll-padding:0 8px; /* мягкий заход для снапа */
    touch-action:pan-x pan-y;
  }
  .howto__steps > .howto__step:first-child{ margin-left:8px; }
  .howto__steps > .howto__step:last-child{ margin-right:8px; }

  .howto__step{ min-height:calc(100vh - 170px); scroll-snap-align:center }
  .howto__art{ height:clamp(180px,38vh,320px) }
  .howto__body{ display:flex; flex-direction:column; justify-content:space-between }
  .howto__name{ font-size:20px }
  .howto__desc{ font-size:16px }
  .howto__num{ top:140px }
}