/* ARNAS — главная страница.
   Общие вещи (шапка, типографика, подвал, переключатель языка) — в site.css.
   Здесь только лендинг: герой с дышащим цветком, виджеты, секции.
   Палитра та же, что в приложении; смелость потрачена на героя, остальное спокойно. */

.landing{
  --ember-soft:rgba(255,158,122,.14);
  --mint-soft:rgba(94,234,212,.10);
  --mint-line:rgba(94,234,212,.30);
  --ease:cubic-bezier(.2,.7,.2,1);
}
.landing{--maxw:1120px}          /* главной нужно больше воздуха, чем текстовым страницам */
.landing main.wrap{overflow-x:clip}

/* ── кнопки ─────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 22px; border-radius:999px;
  font:inherit; font-size:15.5px; font-weight:600; line-height:1.2; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn .apple{width:15px; height:18px; flex:none; margin-top:-2px}
.btn-primary{background:var(--mint); color:var(--bg-top)}
.btn-primary:hover{transform:translateY(-1px); background:#7ff0de}
.btn-soon{background:var(--mint-soft); color:var(--mint); border-color:var(--mint-line); cursor:default}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--card-line)}
.btn-ghost:hover{border-color:var(--mint-dim); color:var(--mint)}
.btn:focus-visible{outline:2px solid var(--mint); outline-offset:3px}
.btn-big{min-height:56px; padding:0 30px; font-size:17px}

/* ── герой ──────────────────────────────────────────── */
.hero{
  display:grid; gap:28px; align-items:center;
  padding:48px 0 12px; position:relative;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 20px;
  color:var(--muted); font-size:13.5px; font-weight:500; letter-spacing:.04em;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 4px rgba(94,234,212,.16);
}
.hero h1{
  font-size:clamp(30px,3.9vw,52px); line-height:1.08; letter-spacing:-.035em;
  margin:0 0 22px; max-width:19ch;
  hyphens:manual; -webkit-hyphens:manual;   /* слова в заголовке короткие, переносы по слогам его только рвут */
}
.hero h1 .soft{display:block; color:var(--mint)}
.hero .sub{font-size:clamp(17px,1.7vw,19.5px); line-height:1.6; color:var(--ink-soft); max-width:40ch; margin:0 0 28px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px}

.hero-visual{position:relative; width:100%; max-width:500px; margin:0 auto 56px; aspect-ratio:1}
.breath{position:absolute; inset:0; display:grid; place-items:center}
.breath::before{   /* мягкое свечение за цветком */
  content:""; position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(94,234,212,.20), rgba(94,234,212,0) 72%);
  filter:blur(8px);
}
.breath canvas{position:absolute; inset:0; width:100%; height:100%}
.breath-label{
  position:relative; text-align:center; pointer-events:none;
  display:grid; gap:4px; justify-items:center;
}
.breath-word{
  font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:clamp(22px,3.2vw,32px);
  letter-spacing:-.02em; color:var(--ink); text-shadow:0 2px 24px rgba(11,14,16,.8);
}
.breath-count{font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:clamp(28px,4vw,42px);
  color:var(--mint); line-height:1; font-variant-numeric:tabular-nums}
.breath-meta{color:var(--ink-soft); font-size:14px; text-shadow:0 1px 12px rgba(11,14,16,.9)}
.breath-idle{
  position:absolute; left:50%; top:100%; margin-top:8px; transform:translateX(-50%);
  width:max-content; max-width:92%; text-align:center;
  color:var(--muted); font-size:14px; line-height:1.45;
}
.breath-stop{
  position:absolute; left:50%; top:100%; margin-top:4px; transform:translateX(-50%);
  background:rgba(19,24,27,.8); color:var(--ink-soft); border:1px solid var(--card-line);
  border-radius:999px; padding:8px 18px; font:inherit; font-size:14px; cursor:pointer;
}
.breath-stop:hover{color:var(--mint); border-color:var(--mint-dim)}
.breath-done{
  position:relative; text-align:center; display:grid; gap:10px; justify-items:center;
  max-width:30ch; padding:0 12px;
}
.breath-done b{font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:clamp(24px,3vw,30px)}
.breath-done p{margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.5}
.breath-done button{margin-top:6px}

@media (min-width:900px){
  .hero{grid-template-columns:1.08fr .92fr; gap:48px; padding:72px 0 32px; min-height:min(760px, calc(100svh - 60px))}
}

/* ── полоса чисел ───────────────────────────────────── */
.stats{
  list-style:none; margin:40px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--card-line); border-bottom:1px solid var(--card-line);
}
.stats li{margin:0; padding:20px 8px; text-align:center; border-left:1px solid var(--card-line)}
.stats li:nth-child(3n+1){border-left:0}
.stats li:nth-child(n+4){border-top:1px solid var(--card-line)}
.stats b{
  display:block; font-family:Unbounded,Inter,sans-serif; font-weight:700;
  font-size:clamp(26px,3.6vw,36px); line-height:1; letter-spacing:-.02em; color:var(--mint);
  font-variant-numeric:tabular-nums;
}
.stats span{display:block; margin-top:8px; color:var(--muted); font-size:13.5px; line-height:1.35}
@media (min-width:760px){
  .stats{grid-template-columns:repeat(6,1fr)}
  .stats li{border-left:1px solid var(--card-line)}
  .stats li:first-child{border-left:0}
  .stats li:nth-child(n+4){border-top:0}
}

/* ── секции ─────────────────────────────────────────── */
.landing .sec{margin-top:clamp(80px,11vw,136px)}
.landing .sec > h2, .sec .dip-text h2, .priv-text h2{
  font-size:clamp(26px,3.6vw,42px); line-height:1.12; letter-spacing:-.025em; max-width:20ch; margin-bottom:18px;
}
.landing .lead{max-width:58ch; font-size:clamp(16.5px,1.5vw,18px); line-height:1.65}
.kicker{color:var(--mint); font-weight:600; font-size:clamp(16.5px,1.5vw,18px); margin-top:4px}

/* появление секций при прокрутке — только когда работает JS и не просили без анимаций */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}

/* ── провал третьего дня + лента курса ──────────────── */
.dip-sec{display:grid; gap:36px}
@media (min-width:960px){ .dip-sec{grid-template-columns:1fr 1fr; gap:56px; align-items:start} }
.course .hint{color:var(--muted); font-size:14.5px; margin:0 0 14px}
.days{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
}
@media (min-width:560px){ .days{grid-template-columns:repeat(10,1fr)} }
.days li{margin:0}
.days button{
  width:100%; aspect-ratio:1; border-radius:10px; position:relative;
  background:var(--card); border:1px solid var(--card-line); color:var(--ink-soft);
  font:inherit; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer;
  transition:border-color .2s, background-color .2s, color .2s, transform .2s var(--ease);
}
.days button:hover{border-color:var(--mint-dim); color:var(--ink)}
.days button.dip{background:var(--ember-soft); border-color:rgba(255,158,122,.35); color:var(--ember)}
.days button[aria-pressed="true"]{border-color:var(--mint); color:var(--mint); background:var(--mint-soft); transform:translateY(-2px)}
.days button.dip[aria-pressed="true"]{border-color:var(--ember); color:var(--ember); background:rgba(255,158,122,.2)}
.dip-legend{display:flex; align-items:center; gap:8px; margin:12px 0 0; color:var(--muted); font-size:13.5px}
.dip-legend i{width:12px; height:12px; border-radius:4px; background:var(--ember-soft); border:1px solid rgba(255,158,122,.45)}
.day-card{
  margin-top:18px; padding:22px 22px 20px; border-radius:18px;
  background:var(--card); border:1px solid var(--card-line); min-height:190px;
}
.day-card .n{color:var(--mint); font-size:13.5px; font-weight:600; letter-spacing:.04em; margin:0 0 6px}
.day-card.is-dip .n{color:var(--ember)}
.day-card h3{font-family:Unbounded,Inter,sans-serif; font-weight:500; font-size:clamp(18px,2vw,21px); line-height:1.3; margin:0 0 10px; color:var(--ink)}
.day-card p{margin:0; font-size:15.5px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}

/* ── рубежи восстановления ──────────────────────────── */
.when{display:grid; gap:12px; margin:28px 0 22px}
.when > span{color:var(--muted); font-size:13.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; margin:0 -18px; padding-left:18px; padding-right:18px}
.chips::-webkit-scrollbar{display:none}
@media (min-width:700px){ .chips{flex-wrap:wrap; overflow:visible; margin:0; padding-left:0; padding-right:0} }
.chip{
  flex:none; border-radius:999px; padding:9px 16px; cursor:pointer;
  background:transparent; border:1px solid var(--card-line); color:var(--ink-soft);
  font:inherit; font-size:14.5px; font-weight:500; white-space:nowrap;
  transition:border-color .2s, color .2s, background-color .2s;
}
.chip:hover{border-color:var(--mint-dim); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--mint); border-color:var(--mint); color:var(--bg-top)}
.date-row{display:flex}
.date-row input{
  background:var(--card); border:1px solid var(--mint-line); border-radius:12px; color:var(--ink);
  font:inherit; font-size:16px;   /* меньше 16px — и iOS увеличивает страницу при фокусе */
  padding:10px 14px; color-scheme:dark; min-width:0;
}
.date-row input:focus{outline:2px solid var(--mint); outline-offset:2px}

.progress{display:grid; gap:10px; margin:6px 0 22px}
.progress-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.progress-top b{font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em}
.progress-top span{color:var(--muted); font-size:14.5px; font-variant-numeric:tabular-nums}
.bar{height:6px; border-radius:6px; background:var(--card-line); overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--mint-dim),var(--mint)); border-radius:6px;
  transition:width .6s var(--ease)}

.next{
  display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:center;
  padding:20px 22px; border-radius:18px; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(94,234,212,.12), rgba(94,234,212,.03));
  border:1px solid var(--mint-line);
}
.next small{color:var(--mint); font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.next h3{font-family:Unbounded,Inter,sans-serif; font-weight:500; font-size:clamp(17px,2vw,20px); margin:0; color:var(--ink); line-height:1.3}
.next .eta{font-family:Unbounded,Inter,sans-serif; font-weight:700; color:var(--mint); font-size:clamp(18px,2.2vw,22px);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.next p{grid-column:1 / -1; margin:8px 0 0; font-size:15.5px; line-height:1.6}

.mlist{list-style:none; margin:0; padding:0; display:grid; gap:8px}
@media (min-width:700px){ .mlist{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .mlist{grid-template-columns:1fr 1fr 1fr} }
.mlist li{margin:0}
.m{
  width:100%; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:center; text-align:left;
  padding:12px 14px; border-radius:14px; cursor:pointer;
  background:var(--card); border:1px solid var(--card-line); color:inherit; font:inherit;
  transition:border-color .2s, opacity .2s, background-color .2s;
}
.m .lbl{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.m .t{font-size:14.5px; font-weight:600; color:var(--ink-soft); line-height:1.35}
.m.done{border-color:var(--mint-line); background:linear-gradient(135deg, rgba(94,234,212,.07), rgba(94,234,212,0))}
.m.done .t{color:var(--ink)}
.m.done .lbl{color:var(--mint)}
.m.is-next{border-color:var(--mint)}
.m:hover{border-color:var(--mint-dim)}
.m-text{grid-column:1 / -1; margin:8px 0 2px; font-size:14.5px; line-height:1.55; color:var(--ink-soft); font-weight:400}
.more{margin-top:14px; background:none; border:0; color:var(--mint); font:inherit; font-size:15px; font-weight:600; cursor:pointer; padding:6px 0}
.more:hover{text-decoration:underline; text-underline-offset:3px}

/* ── три шага ───────────────────────────────────────── */
.steps{list-style:none; margin:28px 0 0; padding:0; counter-reset:step;
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.step{
  counter-increment:step; position:relative; margin:0;
  background:var(--card); border:1px solid var(--card-line); border-radius:20px; padding:26px 24px 24px;
}
.step::before{
  content:"0" counter(step); display:block; margin-bottom:18px;
  font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:34px; line-height:1;
  color:transparent; -webkit-text-stroke:1px var(--mint-dim);
}
.step h3{font-family:Unbounded,Inter,sans-serif; font-weight:500; font-size:18px; letter-spacing:-.01em; margin:0 0 10px; color:var(--ink)}
.step p{margin:0; font-size:15.5px; line-height:1.6}

/* ── экраны: лента с прокруткой ─────────────────────── */
.shots{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(200px,58vw,250px); gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  margin:28px -18px 0; padding:4px 18px 18px; scrollbar-width:thin; scrollbar-color:var(--card-line) transparent;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
@media (min-width:980px){ .shots{grid-auto-flow:row; grid-template-columns:repeat(6,1fr); overflow:visible; margin:28px 0 0; padding:0;
  -webkit-mask-image:none; mask-image:none} }
.shot{margin:0; scroll-snap-align:start}
.shot img{
  width:100%; height:auto; display:block; border-radius:22px;
  border:1px solid var(--card-line); box-shadow:0 22px 50px rgba(0,0,0,.5);
  transition:transform .4s var(--ease);
}
.shot:hover img{transform:translateY(-4px)}
.shot figcaption{margin-top:14px; color:var(--muted); font-size:14px; line-height:1.5}

/* ── ситуации: вкладки ──────────────────────────────── */
.tabs{display:flex; gap:8px; margin:26px -18px 22px; padding:0 18px 4px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
@media (min-width:700px){ .tabs{flex-wrap:wrap; margin:26px 0 22px; padding:0} }
.tabs button{
  flex:none; white-space:nowrap; border-radius:999px; padding:10px 18px; cursor:pointer;
  background:transparent; border:1px solid var(--card-line); color:var(--ink-soft);
  font:inherit; font-size:15px; font-weight:500; transition:all .2s;
}
.tabs button:hover{color:var(--ink); border-color:var(--mint-dim)}
.tabs button[aria-selected="true"]{background:var(--mint-soft); border-color:var(--mint); color:var(--mint)}
.panel{
  display:grid; gap:24px; align-items:center;
  padding:26px; border-radius:24px; background:var(--card); border:1px solid var(--card-line);
}
.panel + .panel{margin-top:14px}
.js .panel:not(.on){display:none}
.js .panel + .panel{margin-top:0}
.panel h3{font-family:Unbounded,Inter,sans-serif; font-weight:500; font-size:clamp(20px,2.4vw,26px); line-height:1.25; margin:0 0 14px; color:var(--ink)}
.panel p{margin:0; font-size:16.5px; line-height:1.7}
.panel img{width:100%; max-width:240px; height:auto; border-radius:22px; border:1px solid var(--card-line);
  box-shadow:0 22px 50px rgba(0,0,0,.5); justify-self:center}
@media (min-width:760px){ .panel{grid-template-columns:1.3fr .7fr; padding:36px 40px; gap:40px} }

/* ── калькулятор ────────────────────────────────────── */
.calc-form{display:grid; gap:12px; margin:26px 0 18px; grid-template-columns:1fr}
@media (min-width:640px){ .calc-form{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .calc-form{grid-template-columns:1.2fr 1fr 1fr 1fr} }
.field-currency select{
  width:100%; min-height:36px; background:transparent; border:0; color:var(--ink);
  font:inherit; font-size:16px; font-weight:600; cursor:pointer; color-scheme:dark;
  appearance:none; -webkit-appearance:none; padding-right:22px;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size:6px 6px; background-repeat:no-repeat;
}
.field-currency select:focus{outline:none}
.field-currency select option{background:var(--card); color:var(--ink)}
.field{display:grid; gap:8px; padding:14px 16px; border-radius:16px; background:var(--card); border:1px solid var(--card-line)}
.field span{color:var(--muted); font-size:13.5px; font-weight:500}
.stepper{display:flex; align-items:center; gap:8px}
.stepper button{
  width:36px; height:36px; flex:none; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid var(--card-line); color:var(--ink-soft); font:inherit; font-size:18px; line-height:1;
}
.stepper button:hover{border-color:var(--mint-dim); color:var(--mint)}
.stepper input{
  width:100%; min-width:0; background:transparent; border:0; color:var(--ink); text-align:center;
  font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:22px; font-variant-numeric:tabular-nums;
  -moz-appearance:textfield; appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.stepper input:focus{outline:none}
.field:focus-within{border-color:var(--mint-dim)}
.results{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (min-width:760px){ .results{grid-template-columns:repeat(4,1fr)} }
.res{padding:20px 18px; border-radius:18px; background:var(--card); border:1px solid var(--card-line)}
.res b{display:block; font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:clamp(16px,4.6vw,26px);
  letter-spacing:-.02em; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
@media (min-width:760px){ .res b{font-size:clamp(19px,2.3vw,26px)} }
.res span{display:block; margin-top:8px; color:var(--muted); font-size:13.5px; line-height:1.35}
.res.big{grid-column:1 / -1; background:linear-gradient(135deg, rgba(94,234,212,.12), rgba(94,234,212,.02)); border-color:var(--mint-line)}
.res.big b{color:var(--mint); font-size:clamp(28px,4.4vw,48px)}
@media (min-width:760px){ .res.big{grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end} }
.calc-note{color:var(--muted); font-size:14px; margin-top:16px; max-width:62ch}

/* ── приватность ────────────────────────────────────── */
.priv{display:grid; gap:34px}
@media (min-width:900px){ .priv{grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center} }
.zeros{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.zeros li{margin:0; text-align:center; padding:22px 6px; border-radius:20px; background:var(--card); border:1px solid var(--card-line)}
.zeros b{display:block; font-family:Unbounded,Inter,sans-serif; font-weight:700; font-size:clamp(46px,7vw,76px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--mint)}
.zeros span{display:block; margin-top:10px; color:var(--ink-soft); font-size:14px}
.page-too{color:var(--muted); font-size:15px; margin-top:14px; max-width:58ch}

/* ── письмо автора ──────────────────────────────────── */
.letter{
  max-width:64ch; margin-top:24px; padding:6px 0 6px clamp(18px,3vw,30px);
  border-left:2px solid var(--mint-line);
}
.letter p{font-size:clamp(16.5px,1.6vw,18.5px); line-height:1.75; color:var(--ink-soft); margin:0 0 18px}
.letter p:first-child::first-letter{
  font-family:Unbounded,Inter,sans-serif; font-weight:700; color:var(--mint);
  float:left; font-size:3.1em; line-height:.9; margin:6px 10px 0 0;
}
.letter .sign{color:var(--muted); font-style:italic; font-size:15.5px; margin:8px 0 0}

/* ── финал ──────────────────────────────────────────── */
.final{
  position:relative; text-align:center; margin-top:clamp(90px,12vw,150px);
  padding:clamp(56px,8vw,96px) 20px; border-radius:32px; overflow:hidden;
  background:var(--card); border:1px solid var(--card-line); isolation:isolate;
}
.final-bloom{
  position:absolute; left:50%; top:50%; width:620px; height:620px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(94,234,212,.20), transparent 70%); z-index:-1;
}
.final h2{font-size:clamp(28px,4.4vw,52px); letter-spacing:-.03em; line-height:1.08; max-width:16ch; margin:0 auto 14px}
.final p{color:var(--ink-soft); max-width:44ch; margin:0 auto 28px}

/* ── мобильные уточнения ────────────────────────────── */
@media (max-width:480px){
  .hero{padding-top:34px}
  .cta-row .btn{width:100%}
  .hero-visual{max-width:360px}
  .panel{padding:22px}
  .next{padding:18px}
}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none}
  .shot:hover img,.btn-primary:hover{transform:none}
}

/* Текстовые версии курса и рубежей: видны без JS и поисковику, скрипт заменяет их виджетами */
.seo{margin:18px 0 0; padding-left:1.2em; display:grid; gap:10px; color:var(--ink-soft); font-size:15px; line-height:1.55; max-width:72ch}
.seo b{color:var(--ink)}
.seo-ms{list-style:none; padding-left:0}
.seo[hidden]{display:none}

/* Значок рубежа — стеклянная плитка, как MilestoneMark в приложении:
   открыт — мятный, следующий — угольковый, впереди — приглушённый. */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ic{
  --s:40px; width:var(--s); height:var(--s); flex:none; display:grid; place-items:center;
  border-radius:calc(var(--s) * .3); position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05);
  color:rgba(126,146,145,.7); transition:color .3s, background .3s;
}
.ic svg{width:calc(var(--s) * .5); height:calc(var(--s) * .5);
  fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.m .ic{grid-row:span 2}
.m.done .ic, .next .ic{
  background:linear-gradient(135deg, rgba(94,234,212,.20), rgba(94,234,212,.09));
  color:var(--mint);
}
.m.is-next .ic, .next .ic.is-next{
  background:linear-gradient(135deg, rgba(255,158,122,.16), rgba(255,158,122,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1.5px rgba(255,158,122,.7);
  color:var(--ember);
}
.next .ic{--s:58px; grid-row:span 3}