:root{
  --bg:#f3f1ec;
  --surface:rgba(255,253,249,.88);
  --surface2:#fffdfa;
  --text:#343340;
  --muted:#777382;
  --line:rgba(70,62,77,.12);
  --accent:#7f82c8;
  --accent2:#9e86b9;
  --accent-soft:#e9e6f5;
  --accent-warm:#e8d8ce;
  --good:#6d987f;
  --shadow:0 18px 55px rgba(79,70,88,.10);
  --radius:24px;
  --font:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-round:"Avenir Next Rounded","Arial Rounded MT Bold","Trebuchet MS","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-weight:520;color:var(--text);background:var(--bg);line-height:1.55;letter-spacing:.005em;-webkit-font-smoothing:antialiased}
body.dark{--bg:#17171c;--surface:rgba(34,33,41,.92);--surface2:#24222b;--text:#f0eee9;--muted:#aaa6b0;--line:rgba(242,238,232,.11);--accent:#a6a9dd;--accent2:#c1a9ca;--accent-soft:#353348;--accent-warm:#40333a;--shadow:0 20px 60px rgba(0,0,0,.28)}
button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:3px}
.ambient{position:fixed;filter:blur(90px);pointer-events:none;z-index:-1;border-radius:50%;opacity:.48}.ambient-a{width:380px;height:380px;background:#ddd9f2;top:-140px;right:-80px}.ambient-b{width:320px;height:320px;background:#ecdcd2;bottom:10%;left:-130px}.dark .ambient-a{background:#403d60}.dark .ambient-b{background:#4b3c3f}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1180px)/2));position:sticky;top:0;z-index:20;background:rgba(243,241,236,.74);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.dark .topbar{background:rgba(23,23,28,.76)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-family:var(--font-round);font-weight:800;letter-spacing:-.02em}.brand-mark{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:white;background:linear-gradient(135deg,var(--accent),var(--accent2));font-size:24px;box-shadow:0 8px 18px rgba(127,130,200,.22)}.top-actions{display:flex;gap:9px;align-items:center}.offline-pill{font-size:12px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--surface)}.icon-btn,.ghost,.filter,.secondary{background:var(--surface);border:1px solid var(--line);padding:10px 14px;border-radius:13px}.icon-btn:hover,.ghost:hover,.filter:hover,.secondary:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));background:var(--surface2)}
.page{max-width:1180px;margin:auto;padding:35px 22px 100px}.hero{min-height:440px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:30px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:800;color:var(--accent);margin-bottom:9px}.hero h1,.section h2,.practice-card h3,.modal h2{font-family:var(--font-round);font-weight:800}.hero h1{font-size:clamp(44px,7vw,76px);line-height:.98;margin:0 0 20px;letter-spacing:-.055em}.hero-copy{font-size:20px;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;padding:13px 18px;border-radius:14px;font-weight:760;box-shadow:0 10px 24px rgba(127,130,200,.22);transition:.2s}.primary:hover{transform:translateY(-2px)}.secondary{font-weight:700}.compact{padding:10px 14px}.wide{width:100%;margin-top:10px}
.hero-orb{height:300px;display:grid;place-items:center;position:relative}.hero-orb span{position:absolute;text-align:center;font-size:12px;color:var(--muted);font-weight:700;line-height:1.35}.orb-core{width:125px;height:125px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cdd0ea 50%,#8e89bc);box-shadow:0 0 0 16px rgba(127,130,200,.08),0 0 80px rgba(158,134,185,.20);animation:orb 8s ease-in-out infinite}.orb-ring{position:absolute;border:1px solid rgba(127,130,200,.22);border-radius:50%;animation:ring 6s ease-out infinite}.r1{width:180px;height:180px}.r2{width:260px;height:260px;animation-delay:2s}@keyframes orb{50%{transform:scale(1.18)}}@keyframes ring{0%,100%{transform:scale(.72);opacity:.2}50%{transform:scale(1);opacity:.7}}
.safety-card{display:flex;gap:14px;padding:18px 20px;border:1px solid var(--line);background:var(--surface);border-radius:20px;box-shadow:var(--shadow)}.safety-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent2);flex:none}.safety-card p{margin:5px 0 0;color:var(--muted);font-size:13px}.section{margin-top:76px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}.section h2{font-size:32px;letter-spacing:-.04em;margin:0}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{font-size:12px;color:var(--muted)}.filter.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.mixer {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 11px;
}

.sound {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 138px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 15px 13px;
  text-align: left;
  transition: .22s;
  box-shadow: 0 7px 25px rgba(58, 52, 68, .04);
  user-select: none;
}

.sound:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.sound.playing {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  box-shadow: 0 12px 32px rgba(127, 130, 200, .14);
  transform: translateY(-2px);
}

.sound-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-warm));
  font-size: 24px;
  align-self: center;
}

.sound-copy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.sound-name {
  font-family: var(--font-round);
  font-weight: 800;
  font-size: 13px;
}

.sound-state {
  font-size: 10px;
  color: var(--muted);
}

/* === ОБНОВЛЕННЫЙ СТИЛЬ ГРОМКОСТИ === */
.volume {
  border: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
  margin-top: auto;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

.volume:focus {
  outline: none;
}

/* Дорожка (Track) */
.volume::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: var(--line);
  border: none;
}

.volume::-moz-range-track {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  border: none;
}

/* Бегунок (Thumb) */
.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--accent);
  /* Центрирование бегунка: (4px - 14px) / 2 */
  margin-top: -5px; 
  border: none;
}

.volume::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
}

.audio-note { margin-top: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }

.practice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.practice-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:21px;min-height:230px;display:flex;flex-direction:column;transition:.22s;box-shadow:0 7px 25px rgba(58,52,68,.045);cursor:pointer}.practice-card::after{content:"";position:absolute;inset:auto -50px -50px auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 68%);opacity:.75;pointer-events:none}.practice-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}.practice-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.practice-icon{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--accent-soft),var(--accent-warm));display:grid;place-items:center;font-size:23px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}.card-category{margin:3px 0 0;letter-spacing:.08em}.practice-card h3{margin:17px 0 7px;font-size:19px;letter-spacing:-.025em}.practice-desc{font-size:13px;color:var(--muted);margin:0;max-width:36em}.practice-more{margin-top:auto;padding-top:19px;color:var(--accent);font-weight:800;font-size:12px;letter-spacing:.01em}.practice-more span{display:inline-block;transition:.2s}.practice-card:hover .practice-more span{transform:translate(3px,-2px)}
.bottom-nav{position:fixed;z-index:30;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:7px;background:rgba(255,253,249,.84);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:var(--shadow);border-radius:18px}.dark .bottom-nav{background:rgba(35,34,42,.9)}.bottom-nav a{text-decoration:none;color:var(--muted);font-size:12px;padding:9px 14px;border-radius:12px}.bottom-nav a:hover{background:var(--bg);color:var(--text)}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(25,23,30,.48);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:.2s}.modal-backdrop.show{opacity:1;pointer-events:auto}.modal{width:min(720px,100%);max-height:90vh;overflow:auto;background:var(--surface2);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:0 30px 100px rgba(0,0,0,.24);position:relative}.welcome{width:min(480px,100%)}.modal h2{font-size:30px;letter-spacing:-.04em;margin:0 0 10px}.modal p{color:var(--muted);font-size:14px}.modal label{display:block;font-size:12px;font-weight:750;margin:15px 0}.modal input,.modal select{margin-top:7px}.modal-icon{width:48px;height:48px;border-radius:15px;background:var(--accent-soft);display:grid;place-items:center;color:var(--accent);font-size:22px;margin-bottom:18px}.close{position:absolute;right:16px;top:13px;background:none;font-size:30px;color:var(--muted)}
.tech-head{display:flex;gap:15px;align-items:flex-start;margin-bottom:15px}.tech-icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent-soft),var(--accent-warm));font-size:24px;flex:none}.tech-head h2{margin:0;font-family:var(--font-round);font-size:28px;letter-spacing:-.035em}.tech-sub{color:var(--muted);font-size:13px;max-width:60ch;margin-top:4px}.tech-impact{display:flex;flex-wrap:wrap;gap:8px 12px;padding:13px 15px;margin:18px 0 22px;border-radius:16px;background:var(--bg);border:1px solid var(--line);font-size:12px}.tech-impact span{color:var(--accent);font-weight:800}.tech-impact strong{font-weight:700}.tech-body{margin-top:20px}.timer{font-size:60px;font-variant-numeric:tabular-nums;text-align:center;font-weight:850;letter-spacing:-.05em;font-family:var(--font-round)}.phase{text-align:center;color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:11px}.tech-controls{display:flex;justify-content:center;gap:8px;margin:20px 0;flex-wrap:wrap}.progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:.2s}.circle-breath{width:190px;height:190px;border-radius:50%;margin:18px auto;background:radial-gradient(circle,#fff 20%,#c9cbe4 50%,#9d99c5);display:grid;place-items:center;box-shadow:0 0 0 20px rgba(127,130,200,.08);font-size:32px;animation:none}.circle-breath.run{animation:squareBreath 16s linear infinite}@keyframes squareBreath{0%{transform:scale(.55)}25%{transform:scale(1)}50%{transform:scale(1)}75%{transform:scale(.55)}100%{transform:scale(.55)}}
.phase-track{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:15px 0}.phase-track span{height:5px;border-radius:99px;background:var(--line)}.phase-track span.on{background:var(--accent)}.steps{display:grid;gap:10px}.step{padding:13px 14px;background:var(--bg);border:1px solid var(--line);border-radius:14px}.step strong{display:block}.step.done{border-color:var(--good)}.check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.check-list label{display:flex;gap:8px;align-items:center;background:var(--bg);padding:10px;border-radius:12px;margin:0;font-weight:600}.check-list input{width:auto}.butterfly{height:170px;display:grid;place-items:center}.butterfly-dot{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#d9ddff,#eadfdc);animation:tap 1.6s ease-in-out infinite}@keyframes tap{50%{transform:scale(.68)}}
.category-word{display:flex;gap:8px}.category-word input{flex:1}.counter{text-align:center;font-size:38px;font-weight:850;font-family:var(--font-round)}.river{height:190px;position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#cfd2e6,#97b2c0);margin:12px 0}.river:before,.river:after{content:"";position:absolute;left:-10%;right:-10%;height:70px;border-radius:50%;border-top:2px solid rgba(255,255,255,.45);transform:rotate(-3deg);top:65px}.river:after{top:105px}.leaf{position:absolute;bottom:75px;left:5px;padding:8px 12px;border-radius:50% 40% 50% 40%;background:#c99c63;color:#fff;font-size:12px;animation:floatAway 4.5s ease-in forwards}@keyframes floatAway{to{left:105%;bottom:35px;transform:rotate(540deg) scale(.7);opacity:.1}}
.color-palette{display:flex;gap:9px;flex-wrap:wrap}.color-choice{width:42px;height:42px;border-radius:50%;border:3px solid transparent}.color-choice.selected{border-color:var(--text);box-shadow:0 0 0 3px var(--surface2)}.body-zone{padding:22px;text-align:center;border-radius:18px;background:linear-gradient(135deg,#efedf5,#f1e8e3);font-size:24px;font-weight:850;font-family:var(--font-round)}.dark .body-zone{background:linear-gradient(135deg,#353348,#40353a)}.quote{font-size:22px;line-height:1.35;font-weight:750;padding:20px;background:var(--bg);border-radius:18px}.feel-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
textarea,input,select{width:100%;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:15px;padding:13px;outline:none}textarea:focus,input:focus,select:focus{border-color:var(--accent)}
.toast{position:fixed;z-index:200;bottom:85px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);padding:10px 14px;border-radius:12px;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){.mixer{grid-template-columns:repeat(4,1fr)}.practice-grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr}.hero-orb{display:none}}
@media(max-width:620px){.page{padding:20px 15px 100px}.topbar{padding:0 15px}.offline-pill{display:none}.mixer{grid-template-columns:repeat(2,1fr)}.practice-grid{grid-template-columns:1fr}.section-head{align-items:flex-start;flex-direction:column}.filters{width:100%}.hero{min-height:420px}.hero h1{font-size:52px}.hero-copy{font-size:17px}.bottom-nav{width:calc(100% - 20px);justify-content:space-around}.bottom-nav a{padding:9px 10px}.check-list{grid-template-columns:1fr}.sound{min-height:126px}.sound-copy{display:block}.sound-state{margin-top:2px}.tech-head h2{font-size:24px}}
/* v3 refinement: dark-only, calmer monochrome system */
:root,body.dark{--bg:#1c1d26;--surface:rgba(29,31,39,.94);--surface2:#20222b;--text:#f2f1ee;--muted:#b6b3bd;--line:rgba(242,241,238,.12);--accent:#b9b6d8;--accent2:#8f9aa9;--accent-soft:#2b2e3a;--accent-warm:#30313a;--shadow:0 20px 55px rgba(0,0,0,.30)}
body{background:var(--bg);overflow-x:hidden}.topbar,.bottom-nav{background:rgba(18,19,24,.84)!important}.ambient{opacity:.25}.ambient-a{background:#4a4963}.ambient-b{background:#3c4652}.practice-desc,.tech-sub,.instruction{font-size:15px;line-height:1.65}.instruction{color:var(--muted);margin:0 0 16px}.practice-icon,.tech-icon,.sound-icon{font-family:var(--font-round);font-weight:500;color:var(--accent);background:var(--accent-soft);filter:grayscale(1)}
#themeBtn{display:none}.modal{overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--accent-soft) transparent}.modal::-webkit-scrollbar{width:8px}.modal::-webkit-scrollbar-track{background:transparent}.modal::-webkit-scrollbar-thumb{background:var(--accent-soft);border-radius:99px}.category-word{align-items:stretch}.category-word .primary{white-space:nowrap;min-width:96px}.category-word input{min-width:0}.guided-step{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:18px}.guided-step h3{margin:8px 0 14px;font-size:22px}.guided-step textarea{margin-bottom:12px}.body-zone{margin:14px 0}.tech-controls{clear:both}.sigh-breath{animation:sighPulse 3s ease-in-out infinite!important;transition:transform .7s cubic-bezier(.2,.9,.2,1),box-shadow .7s!important}@keyframes sighPulse{50%{box-shadow:0 0 0 28px rgba(185,182,216,.10),0 0 65px rgba(185,182,216,.22)}}
.butterfly{height:150px}.butterfly-arms{display:flex;gap:30px;align-items:center}.butterfly-arms span{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--muted);font-weight:800;transform:scale(.9);transition:.35s}.butterfly-arms span.active{transform:scale(1.08);background:var(--accent);color:#16171d;box-shadow:0 0 0 14px rgba(185,182,216,.10)}
.burn-stage {
  height: 220px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 120%, rgba(255, 140, 0, 0.15), transparent 45%), linear-gradient(180deg, #23242a, #15161a);
  margin: 12px 0;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}

/* Огонь на всю сцену */
.burn-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/static/fire.gif') center/cover no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.burn-stage.burning::after {
  animation: stageFlame 6s ease-out forwards;
}

/* Карточка (текст строго по центру) */
.burning-paper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  width: max-content;
  min-height: 50px;
  padding: 18px 24px;
  border-radius: 10px;
  background: #2b2c34;
  color: #eceef2;
  font-size: 15px;
  line-height: 1.4;

  /* Центрирование текста по обеим осям */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
  word-break: break-word;
  overflow: hidden;
  animation: burnPaper 6s ease-in forwards;
}

/* 1. Огонь разгорается, держится и потом гаснет */
@keyframes stageFlame {
  0% {
    opacity: 0;
  }
  20%, 75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media(max-width:620px){.modal{max-height:92vh;padding:22px 17px}.practice-desc{font-size:15px}.category-word{gap:7px}.category-word .primary{min-width:88px;padding:10px}.guided-step h3{font-size:19px}}