:root { --ink:#153f3b; --deep:#0f302d; --paper:#f7f4ec; --sage:#9fb7a6; --sage-light:#dfe9e2; --terracotta:#ba684e; --muted:#55706c; --line:#d6dfd9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 Arial,sans-serif; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
.topbar { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:16px clamp(20px,5vw,70px); border-bottom:1px solid var(--line); background:rgba(247,244,236,.95); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:21px; font-weight:800; text-decoration:none; }
.brand span { color:#789786; font-size:28px; }
.back-link { border-radius:999px; padding:9px 15px; color:var(--ink); border:1px solid var(--line); font-size:13px; font-weight:700; text-decoration:none; }
main { width:min(1120px,calc(100% - 36px)); margin:0 auto; }
.intro { min-height:calc(100vh - 74px); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(35px,8vw,95px); align-items:center; padding:60px 0; }
.eyebrow { margin:0 0 10px; color:var(--terracotta); font-size:11px; font-weight:800; letter-spacing:.15em; }
h1 { margin:0; font:400 clamp(54px,8vw,92px)/.94 Georgia,serif; }
.lead { max-width:590px; margin:25px 0 32px; color:var(--muted); font-size:clamp(18px,2.2vw,23px); line-height:1.55; }
.how { display:grid; gap:9px; }
.how span { display:flex; align-items:center; gap:11px; color:var(--muted); font-size:14px; }
.how b { display:grid; place-items:center; flex:0 0 28px; height:28px; border-radius:50%; background:var(--sage-light); color:var(--ink); font-size:11px; }
.setup-card { padding:clamp(25px,4vw,42px); border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 22px 70px rgba(21,63,59,.09); }
.setup-label { margin:0 0 18px; font:400 23px/1.3 Georgia,serif; }
.duration-options { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.duration { min-height:92px; border:1px solid var(--line); border-radius:17px; background:var(--paper); color:var(--ink); cursor:pointer; }
.duration strong, .duration span { display:block; }
.duration strong { font:400 30px Georgia,serif; }
.duration span { color:var(--muted); font-size:11px; }
.duration.active { border-color:var(--ink); background:var(--ink); color:white; }
.duration.active span { color:#c9d9d2; }
.sound-option { display:grid; grid-template-columns:20px 1fr; gap:11px; align-items:start; margin:22px 0; cursor:pointer; }
.sound-option input { margin-top:4px; accent-color:var(--ink); }
.sound-option b, .sound-option small { display:block; }
.sound-option small { color:var(--muted); }
.start-button { width:100%; border:0; border-radius:999px; padding:16px 20px; background:var(--terracotta); color:#fff; cursor:pointer; font-weight:800; }
.start-button span { margin-left:10px; }
.safety-note { margin:17px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.practice { min-height:calc(100vh - 75px); padding:35px 0 50px; }
.practice-head { display:flex; justify-content:space-between; align-items:center; }
.remaining { margin:0; font:400 25px Georgia,serif; }
.exit-button, .control-button { border:1px solid var(--line); border-radius:999px; padding:10px 17px; background:transparent; color:var(--ink); cursor:pointer; font-weight:700; }
.breathing-stage { position:relative; width:min(620px,82vw); aspect-ratio:1; display:grid; place-items:center; margin:0 auto; }
.orbit { position:absolute; border:1px solid rgba(89,123,109,.22); border-radius:50%; }
.orbit-one { inset:13%; }
.orbit-two { inset:3%; }
.breath-orb { position:absolute; width:48%; height:48%; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 36% 30%,#dceadf,#9fbcab 64%,#789888); box-shadow:0 25px 85px rgba(21,63,59,.22); transform:scale(.62); will-change:transform; }
.inner-orb { width:72%; height:72%; border:1px solid rgba(255,255,255,.65); border-radius:50%; }
.phase-copy { position:relative; z-index:2; max-width:250px; text-align:center; pointer-events:none; }
.phase-copy p { margin:0 0 5px; color:var(--deep); font:400 clamp(34px,6vw,58px)/1 Georgia,serif; }
.phase-copy span { color:var(--deep); font-size:12px; }
.progress-wrap { width:min(540px,82vw); height:4px; margin:-15px auto 23px; overflow:hidden; border-radius:99px; background:#dce5df; }
.progress-wrap span { display:block; width:0; height:100%; border-radius:inherit; background:var(--terracotta); }
.practice-controls { display:flex; justify-content:center; align-items:center; gap:18px; }
.practice-controls p { margin:0; color:var(--muted); font-size:12px; }
.completion { max-width:780px; min-height:calc(100vh - 75px); margin:0 auto; padding:75px 0 55px; text-align:center; }
.completion-mark { display:grid; place-items:center; width:75px; height:75px; margin:0 auto 22px; border-radius:50%; background:var(--sage-light); color:var(--ink); font-size:42px; }
.completion h2 { margin:0; font:400 clamp(38px,6vw,62px)/1.06 Georgia,serif; }
.completion > p:not(.eyebrow) { max-width:620px; margin:22px auto 35px; color:var(--muted); font-size:18px; }
fieldset { margin:0; padding:23px; border:1px solid var(--line); border-radius:22px; }
legend { padding:0 12px; font-weight:700; }
.feeling-options { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.feeling-options button { border:1px solid var(--line); border-radius:999px; padding:11px 15px; background:white; color:var(--ink); cursor:pointer; }
.feeling-options button.selected { border-color:var(--ink); background:var(--ink); color:white; }
#feelingThanks { min-height:22px; margin:13px 0 0; color:var(--muted); font-size:12px; }
.completion-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:28px; }
.completion-actions button, .completion-actions a { border:0; border-radius:999px; padding:14px 19px; cursor:pointer; font-weight:800; text-decoration:none; }
.start-again { background:var(--sage-light); color:var(--ink); }
.completion-actions a { background:var(--ink); color:white; }
.home-link { display:inline-block; margin-top:23px; color:var(--muted); }
.responsibility { margin:0 0 45px; padding:20px 23px; border-left:3px solid var(--sage); background:#edf2ee; }
.responsibility strong { display:block; margin-bottom:3px; }
.responsibility p { margin:0; color:var(--muted); font-size:12px; }
footer { padding:28px 18px; background:var(--ink); color:#dce7e2; text-align:center; font-size:13px; }
@media (max-width:760px) {
  .intro { grid-template-columns:1fr; min-height:auto; padding:45px 0; }
  .intro-copy { text-align:center; }
  .how { width:max-content; max-width:100%; margin:0 auto; text-align:left; }
  .setup-card { padding:23px 18px; border-radius:22px; }
  .breathing-stage { width:min(94vw,520px); margin-top:25px; }
  .practice-controls { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .breath-orb { will-change:auto; }
}