:root{--ink:#27231d;--muted:#746b5e;--paper:#f5efe2;--red:#8d2824;--red-dark:#6f1f1c;--line:rgba(73,59,43,.16)}
*{box-sizing:border-box}
html{background:#ded5c5}
body{margin:0;color:var(--ink);background:radial-gradient(circle at 12% 3%,rgba(255,255,255,.8),transparent 28%),var(--paper);font-family:"Noto Serif SC","Songti SC",SimSun,serif}
button{font:inherit}
.breathing-app{width:min(100%,480px);min-height:100vh;margin:0 auto;padding:18px 20px 32px}
.breathing-header{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.breathing-header>a{display:grid;width:38px;height:38px;place-items:center;color:var(--red);border:1px solid var(--line);border-radius:50%;text-decoration:none;font-size:20px}
.breathing-header span{color:var(--red);font-size:10px;letter-spacing:.18em}.breathing-header h1{margin:5px 0 0;font-size:20px;letter-spacing:.07em}.breathing-header button{padding:7px 10px;color:var(--muted);border:1px solid var(--line);border-radius:16px;background:transparent;font-size:11px}
.breathing-panel{padding-top:18px}.breathing-intro{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.8}
fieldset{margin:0 0 18px;padding:0;border:0}legend{margin-bottom:10px;font-size:15px;font-weight:700;letter-spacing:.06em}
.choice-group{display:grid;gap:8px}.choice-group label{display:block}.choice-group input,.duration-group input,.calm-score input{position:absolute;opacity:0;pointer-events:none}.choice-group label>span{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:13px 4px 13px 4px;background:rgba(255,252,245,.54)}
.choice-group b,.choice-group small{display:block}.choice-group b{font-size:15px}.choice-group b em{float:right;padding:3px 7px;color:var(--red);border-radius:10px;background:rgba(141,40,36,.08);font-size:9px;font-style:normal;font-weight:500}.choice-group small{margin-top:5px;color:var(--muted);font-size:11px;line-height:1.45}.choice-group input:checked+span{border-color:rgba(141,40,36,.52);background:rgba(141,40,36,.07);box-shadow:inset 3px 0 var(--red)}
.duration-group{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.duration-group legend{grid-column:1/-1}.duration-group span{display:grid;min-height:42px;place-items:center;border:1px solid var(--line);border-radius:10px 3px 10px 3px;color:var(--muted);font-size:12px}.duration-group input:checked+span{color:#fff8eb;border-color:var(--red);background:var(--red)}
.calm-score>div{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.calm-score label span{display:grid;min-height:42px;padding:4px 2px;place-items:center;text-align:center;border:1px solid var(--line);border-radius:11px 3px 11px 3px;color:var(--muted);font-size:11px;line-height:1.2}.calm-score input:checked+span{color:#fff8eb;border-color:var(--red);background:var(--red)}.calm-score .calm-hint{display:block;margin:8px 2px 0;color:var(--red);font-size:11px;line-height:1.5;text-align:left}
.primary-button{display:flex;width:100%;min-height:52px;align-items:center;justify-content:center;color:#fff8eb;border:0;border-radius:4px 4px 13px 4px;background:var(--red);box-shadow:0 8px 20px rgba(111,31,28,.18);font-size:17px;letter-spacing:.1em}.safety-note{margin:14px 6px 0;color:#988d80;font-size:10px;line-height:1.7;text-align:center}
.practice-panel{padding-top:15px;text-align:center}.practice-meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:17px;font-weight:600}.practice-meta time{color:var(--red);font:700 22px Arial,sans-serif;letter-spacing:.04em}
.breath-orb{position:relative;display:grid;width:290px;height:290px;margin:32px auto 22px;place-items:center;border:1px solid rgba(141,40,36,.25);border-radius:50%;box-shadow:0 0 0 16px rgba(255,252,245,.6),0 0 0 17px rgba(141,40,36,.09);transition:transform 1s ease;background:radial-gradient(circle,rgba(141,40,36,.13),rgba(255,252,245,.2) 30%,rgba(255,252,245,.7) 72%)}
.breath-orb[data-phase="inhale"]{animation:orb-inhale 4s ease-in-out forwards}.breath-orb[data-phase="exhale"]{animation:orb-exhale 6s ease-in-out forwards}.breath-orb[data-phase="hold"]{animation:none}.phase-content{position:relative;z-index:2;display:flex;flex-direction:column;transform:translateY(46px)}.breath-orb span{color:var(--red);font-size:21px;letter-spacing:.18em}.breath-orb strong{margin:5px 0;color:var(--red);font:500 46px/1 Georgia,serif}.breath-orb small{color:var(--muted);font-size:10px}
.breath-lotus{position:absolute;top:39px;left:50%;width:112px;height:78px;transform:translateX(-50%);filter:drop-shadow(0 8px 10px rgba(141,40,36,.08))}.breath-lotus i{position:absolute;display:block}.petal{bottom:19px;left:42px;width:30px;height:48px;border:1.5px solid rgba(141,40,36,.58);border-radius:70% 8% 70% 8%;background:linear-gradient(150deg,rgba(255,252,245,.8),rgba(141,40,36,.12));transform-origin:50% 100%}.petal-center{z-index:2;transform:rotate(45deg)}.petal-left{left:28px;transform:rotate(18deg)}.petal-right{left:55px;transform:rotate(72deg)}.lotus-ripple{bottom:6px;left:8px;width:96px;height:22px;border:1px solid rgba(141,40,36,.34);border-radius:50%;transform-origin:center}.breath-orb[data-phase="inhale"] .petal-left{animation:lotus-left-open 4s ease-in-out forwards}.breath-orb[data-phase="inhale"] .petal-right{animation:lotus-right-open 4s ease-in-out forwards}.breath-orb[data-phase="inhale"] .petal-center{animation:lotus-center-open 4s ease-in-out forwards}.breath-orb[data-phase="inhale"] .lotus-ripple{animation:ripple-open 4s ease-out forwards}.breath-orb[data-phase="exhale"] .petal-left{animation:lotus-left-close 6s ease-in-out forwards}.breath-orb[data-phase="exhale"] .petal-right{animation:lotus-right-close 6s ease-in-out forwards}.breath-orb[data-phase="exhale"] .petal-center{animation:lotus-center-close 6s ease-in-out forwards}.breath-orb[data-phase="exhale"] .lotus-ripple{animation:ripple-close 6s ease-in-out forwards}
.phase-guide{min-height:24px;margin:0;color:var(--muted);font-size:13px}.practice-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.practice-controls button{min-height:44px;color:var(--red);border:1px solid rgba(141,40,36,.25);border-radius:12px 4px 12px 4px;background:rgba(255,252,245,.55)}
.complete-panel{padding:54px 5px 0;text-align:center}.complete-seal{display:grid;width:64px;height:64px;margin:0 auto 18px;place-items:center;color:#fff8eb;border-radius:5px 5px 18px 5px;background:var(--red);font-size:28px}.complete-panel h2{margin:0;font-size:25px;letter-spacing:.08em}.complete-panel>p{color:var(--muted);font-size:13px}.after-score{margin:30px 0}.secondary-button{display:flex;width:100%;min-height:46px;margin-top:12px;align-items:center;justify-content:center;color:var(--red);border:1px solid rgba(141,40,36,.38);border-radius:12px 4px 12px 4px;background:rgba(255,252,245,.58);font-size:15px;letter-spacing:.06em}.save-status{min-height:20px;color:var(--red)!important}.primary-button:focus-visible,.secondary-button:focus-visible,.practice-controls button:focus-visible,.choice-group input:focus-visible+span,.duration-group input:focus-visible+span,.calm-score input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
@keyframes orb-inhale{from{transform:scale(.78);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes orb-exhale{from{transform:scale(1);opacity:1}to{transform:scale(.78);opacity:.7}}@keyframes lotus-left-open{from{transform:rotate(38deg)}to{transform:rotate(6deg)}}@keyframes lotus-right-open{from{transform:rotate(52deg)}to{transform:rotate(84deg)}}@keyframes lotus-center-open{from{transform:rotate(45deg) scale(.84)}to{transform:rotate(45deg) scale(1.05)}}@keyframes lotus-left-close{from{transform:rotate(6deg)}to{transform:rotate(38deg)}}@keyframes lotus-right-close{from{transform:rotate(84deg)}to{transform:rotate(52deg)}}@keyframes lotus-center-close{from{transform:rotate(45deg) scale(1.05)}to{transform:rotate(45deg) scale(.84)}}@keyframes ripple-open{from{transform:scale(.55);opacity:.25}to{transform:scale(1.18);opacity:.75}}@keyframes ripple-close{from{transform:scale(1.18);opacity:.75}to{transform:scale(.55);opacity:.25}}
@media(min-width:700px){body{padding:26px 0}.breathing-app{min-height:calc(100vh - 52px);border:1px solid rgba(73,59,43,.1);border-radius:24px;box-shadow:0 22px 70px rgba(66,52,36,.13)}}
@media(max-width:370px){.breathing-app{padding-right:14px;padding-left:14px}.breath-orb{width:260px;height:260px}.breathing-header h1{font-size:18px}}
@media(prefers-reduced-motion:reduce){.breath-orb,.breath-lotus i{animation:none!important;transition:none}}
.posture-demo{margin:0 0 18px;text-align:left;border:1px solid rgba(141,40,36,.22);border-radius:12px 4px 12px 4px;background:rgba(255,252,245,.52)}.posture-demo summary{padding:10px 13px;color:var(--red);font-size:13px;cursor:pointer;list-style-position:inside}.posture-content{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;padding:2px 13px 13px}.posture-content ol{margin:0;padding-left:18px;color:var(--muted);font-size:11px;line-height:1.75}.posture-figure{position:relative;width:82px;height:96px;margin:auto}.posture-figure i{position:absolute;display:block}.posture-figure .head{top:3px;left:31px;width:21px;height:21px;border:2px solid var(--red);border-radius:50%}.posture-figure .body{top:27px;left:39px;width:4px;height:42px;border-radius:3px;background:var(--red)}.posture-figure .legs{left:15px;bottom:5px;width:54px;height:25px;border:2px solid var(--red);border-top:0;border-radius:0 0 50% 50%}.posture-figure .breath{top:33px;left:25px;width:33px;height:33px;border:1px solid rgba(141,40,36,.45);border-radius:50%;animation:posture-breath 5s ease-in-out infinite}.practice-panel .posture-demo{margin:12px 0 2px}.practice-panel .posture-content{grid-template-columns:74px 1fr}.practice-panel .posture-figure{transform:scale(.8)}@keyframes posture-breath{0%,100%{transform:scale(.72);opacity:.4}50%{transform:scale(1.18);opacity:1}}@media(prefers-reduced-motion:reduce){.posture-figure .breath{animation:none}}
