:root {
  --ink:#173c39;
  --deep:#102f2d;
  --muted:#607975;
  --cream:#f7f4ec;
  --paper:#fffdf8;
  --sage:#9fb7a6;
  --sage-light:#dfe9df;
  --blue:#bfd5d7;
  --terracotta:#c98267;
  --line:rgba(23,60,57,.14);
  --shadow:0 22px 60px rgba(29,60,55,.11);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font:16px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #d88768; outline-offset:3px; }
[hidden] { display:none !important; }
.topbar { position:sticky; top:0; z-index:20; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:13px clamp(20px,5vw,72px); border-bottom:1px solid var(--line); background:rgba(247,244,236,.92); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); font:700 23px Georgia,serif; text-decoration:none; white-space:nowrap; }
.brand span { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--ink); border-radius:50%; font-size:24px; }
.topbar p { margin:0; color:var(--muted); font-size:13px; text-align:center; }
.back-link,.text-back { border:1px solid var(--line); border-radius:999px; padding:9px 15px; background:var(--paper); color:var(--ink); font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; }
main { width:min(1180px,calc(100% - 36px)); margin:0 auto; }
.screen { min-height:calc(100vh - 76px); padding:clamp(48px,7vw,82px) 0; }
.eyebrow { margin:0 0 11px; color:#a65039; font-size:11px; font-weight:800; letter-spacing:.15em; }
h1 { margin:0; font:400 clamp(43px,6vw,72px)/1.02 Georgia,serif; }
.hero-copy { max-width:780px; margin:0 auto 42px; text-align:center; }
.hero-copy > p:last-child { max-width:650px; margin:22px auto 0; color:var(--muted); font-size:18px; }
.technique-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:stretch; }
.technique-card { grid-column:span 2; display:flex; flex-direction:column; min-height:350px; padding:27px; border:1px solid var(--line); border-radius:25px; background:var(--paper); box-shadow:0 10px 35px rgba(29,60,55,.06); transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.technique-card:nth-child(4) { grid-column:2/span 2; }
.technique-card:hover { transform:translateY(-4px); border-color:rgba(23,60,57,.3); box-shadow:var(--shadow); }
.card-icon,.large-icon { display:grid; place-items:center; border-radius:50%; background:var(--sage-light); color:var(--ink); }
.card-icon { width:56px; height:56px; margin-bottom:21px; font-size:27px; }
.technique-card small { color:#a65039; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.technique-card h2 { margin:8px 0 4px; font:400 27px/1.08 Georgia,serif; }
.technique-name { margin:0 0 12px; color:var(--ink); font-size:13px; font-weight:750; }
.technique-description { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.technique-objective { margin:14px 0 22px; color:var(--muted); font-size:12px; line-height:1.5; }
.card-start { width:100%; margin-top:auto; padding:12px 16px; border:0; border-radius:999px; background:var(--ink); color:white; cursor:pointer; font-weight:750; }
.setup { position:relative; }
.text-back { margin-bottom:30px; }
.setup-layout { display:grid; grid-template-columns:1fr .92fr; gap:clamp(38px,8vw,95px); align-items:center; }
.setup-summary { padding:20px 0; }
.large-icon { width:80px; height:80px; margin-bottom:27px; font-size:38px; }
.setup-summary strong { display:block; margin:20px 0 10px; font-size:16px; }
.setup-summary > p:last-child { max-width:570px; color:var(--muted); font-size:18px; }
.setup-card { padding:clamp(25px,4vw,40px); border:1px solid var(--line); border-radius:28px; background:var(--paper); box-shadow:var(--shadow); }
.comfort-note { margin:0 0 25px; padding:18px; border-radius:17px; background:var(--sage-light); color:var(--muted); font-size:13px; }
.comfort-note strong { display:block; margin-bottom:4px; color:var(--ink); }
fieldset { margin:0; padding:0; border:0; }
legend { margin-bottom:13px; font-weight:750; }
.duration-options { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.duration-options button { min-height:88px; border:1px solid var(--line); border-radius:16px; background:var(--cream); color:var(--ink); cursor:pointer; }
.duration-options strong,.duration-options span { display:block; }
.duration-options strong { font:400 29px Georgia,serif; }
.duration-options span { color:var(--muted); font-size:11px; }
.duration-options button.active { background:var(--ink); color:white; border-color:var(--ink); }
.duration-options button.active span { color:#d8e4df; }
.duration-options button:disabled { opacity:.38; cursor:not-allowed; }
.sound-control { display:grid; grid-template-columns:20px 1fr; gap:11px; margin:24px 0; cursor:pointer; }
.sound-control input { margin-top:5px; accent-color:var(--ink); }
.sound-control strong,.sound-control small { display:block; }
.sound-control small { color:var(--muted); }
.primary-action { width:100%; padding:15px 19px; border:0; border-radius:999px; background:var(--terracotta); color:white; cursor:pointer; font-weight:800; }
.primary-action span { margin-left:8px; }
.energy-note { margin:15px 0 0; color:var(--muted); font-size:11px; }
.exercise { padding-top:35px; }
.exercise-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; }
.exercise-heading h1 { font-size:clamp(35px,5vw,55px); }
.end-button,.pause-button,.secondary-action { padding:11px 18px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); cursor:pointer; font-weight:750; }
.exercise-status { display:flex; justify-content:center; gap:clamp(22px,7vw,90px); margin:27px auto 0; padding:15px 25px; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,248,.72); }
.exercise-status div { text-align:center; }
.exercise-status span,.exercise-status strong { display:block; }
.exercise-status span { color:var(--muted); font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.exercise-status strong { margin-top:2px; font:400 23px Georgia,serif; }
.breathing-stage { position:relative; width:min(600px,84vw); aspect-ratio:1; display:grid; place-items:center; margin:10px auto -4px; }
.stage-ring { position:absolute; border:1px solid rgba(23,60,57,.14); border-radius:50%; }
.ring-outer { inset:4%; }
.ring-inner { inset:14%; }
.breathing-circle { position:absolute; width:51%; height:51%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#e9f0e9 0,#a9c0ad 56%,#759789 100%); box-shadow:0 24px 80px rgba(23,60,57,.23); transform:scale(.62); will-change:transform; }
.phase-content { position:relative; z-index:2; display:grid; text-align:center; pointer-events:none; }
.phase-content span { font:400 clamp(28px,5vw,48px)/1 Georgia,serif; }
.phase-content strong { font:400 clamp(46px,8vw,75px)/1 Georgia,serif; }
.phase-content small { margin-top:8px; color:var(--deep); font-size:11px; }
.breathing-stage[data-phase="hold"] .breathing-circle { box-shadow:0 24px 80px rgba(67,91,130,.2); }
.breathing-stage[data-phase="exhale"] .breathing-circle { background:radial-gradient(circle at 35% 30%,#e9eff0 0,#b2cbcb 56%,#789797 100%); }
.breathing-stage[data-phase="pause"] .breathing-circle { opacity:.72; }
.exercise-controls { display:flex; align-items:center; justify-content:center; gap:17px; }
.exercise-controls p { margin:0; color:var(--muted); font-size:12px; }
.pause-button[aria-pressed="true"] { background:var(--terracotta); color:white; }
.result { max-width:900px; margin:0 auto; text-align:center; }
.result-mark { display:grid; place-items:center; width:74px; height:74px; margin:0 auto 25px; border-radius:50%; background:var(--sage-light); font-size:42px; }
.result h1 { max-width:750px; margin:0 auto; }
.feeling-options { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:35px 0 25px; }
.feeling-options button { padding:12px 17px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); cursor:pointer; }
.feeling-options button.selected { background:var(--ink); color:white; border-color:var(--ink); }
.result-response { max-width:740px; margin:0 auto; padding:27px; border-radius:23px; background:var(--paper); border:1px solid var(--line); }
.result-response > p { margin:0 0 22px; color:var(--muted); font-size:17px; }
.result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.primary-link,.quiet-link { padding:12px 18px; border-radius:999px; font-weight:750; text-decoration:none; }
.primary-link { background:var(--ink); color:white; }
.quiet-link { color:var(--muted); text-decoration:underline; }
.safety { margin:0 0 45px; padding:20px 24px; border-left:3px solid var(--sage); background:#edf2ee; }
.safety p { margin:3px 0; color:var(--muted); font-size:12px; }
.safety strong { color:var(--ink); }
footer { padding:28px 18px; background:var(--ink); color:#dce7e2; text-align:center; font-size:13px; }
@media (max-width:900px) {
  .technique-grid { grid-template-columns:repeat(2,1fr); }
  .technique-card,.technique-card:nth-child(4) { grid-column:auto; }
  .technique-card:last-child { grid-column:1/-1; width:calc(50% - 8px); justify-self:center; }
  .setup-layout { grid-template-columns:1fr; gap:25px; }
  .setup-summary { text-align:center; }
  .setup-summary > p:last-child { margin-left:auto; margin-right:auto; }
  .large-icon { margin-left:auto; margin-right:auto; }
}
@media (max-width:620px) {
  .topbar { min-height:66px; }
  .topbar p { display:none; }
  .brand { font-size:19px; }
  .brand span { width:27px; height:27px; }
  .back-link { padding:8px 11px; font-size:11px; }
  main { width:min(100% - 28px,1180px); }
  .screen { min-height:auto; padding:43px 0; }
  .hero-copy { margin-bottom:28px; }
  .hero-copy > p:last-child { font-size:16px; }
  .technique-grid { grid-template-columns:1fr; }
  .technique-card,.technique-card:last-child { grid-column:auto; width:100%; min-height:0; padding:22px; }
  .technique-objective { margin-bottom:18px; }
  .setup-card { padding:22px 17px; }
  .duration-options button { min-height:78px; }
  .exercise-heading { align-items:flex-start; }
  .exercise-heading h1 { font-size:34px; }
  .exercise-status { justify-content:space-around; gap:6px; padding:13px 8px; }
  .exercise-status span { font-size:8px; }
  .exercise-status strong { font-size:19px; }
  .breathing-stage { width:min(94vw,470px); margin-top:9px; }
  .exercise-controls { flex-direction:column; gap:8px; text-align:center; }
  .feeling-options { display:grid; grid-template-columns:1fr 1fr; }
  .result-actions { flex-direction:column; }
  .result-actions > * { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .technique-card { transition:none; }
  .technique-card:hover { transform:none; }
  .breathing-circle { will-change:auto; transform:scale(.82) !important; transition:opacity .6s ease,border-width .6s ease; }
  .breathing-stage[data-phase="inhale"] .breathing-circle { opacity:1; border:5px solid rgba(255,255,255,.65); }
  .breathing-stage[data-phase="hold"] .breathing-circle { opacity:.88; border:2px solid rgba(255,255,255,.55); }
  .breathing-stage[data-phase="exhale"] .breathing-circle,.breathing-stage[data-phase="pause"] .breathing-circle { opacity:.68; }
}