:root{color-scheme:light;--paper:#f5f2e9;--ink:#293e37;--muted:#67756b;--green:#365d49;--line:#dce0d2;--soft:#eaf0e4;font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input{accent-color:var(--green)}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9b7039;outline-offset:4px}button,select{min-height:48px}button{border:0;border-radius:12px}button:hover:enabled{filter:brightness(.95)}[hidden]{display:none!important}
.app{max-width:1120px;margin:auto;padding:38px 28px 24px}.hero{margin-bottom:28px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted);margin:0 0 14px}.eyebrow span{font-size:21px;vertical-align:middle;margin-right:8px}h1{font-family:Georgia,"STSong","SimSun",serif;font-size:clamp(30px,4vw,44px);font-weight:500;letter-spacing:2px;margin:0 0 10px}h1 span{font-family:Georgia,serif;font-size:24px;letter-spacing:4px;color:var(--green);margin-left:22px}.intro{color:var(--muted);font-size:14px;line-height:1.8;margin:0}
.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:20px}.session,.controls{border:1px solid var(--line);border-radius:22px}.session{background:#fdfcf6;padding:24px;overflow:hidden}.session-heading,.session-bottom{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}.session-heading i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#66845a;margin-right:8px}.visual{height:354px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative}.face-scene{width:min(280px,100%);height:224px;flex-shrink:0;overflow:hidden}.breathing-face{display:block;width:100%;height:100%}.face-character{transform-box:fill-box;transform-origin:50% 80%;transform:translateY(var(--face-lift,0px)) scale(var(--face-scale,1))}.face-cheeks{transform-box:fill-box;transform-origin:center;transform:scale(var(--cheek-scale,1))}.mouth-hold,.mouth-exhale,.inhale-air,.exhale-air{display:none}.visual[data-phase="hold"] .mouth-rest,.visual[data-phase="exhale"] .mouth-rest{display:none}.visual[data-phase="hold"] .mouth-hold,.visual[data-phase="exhale"] .mouth-exhale,.visual[data-phase="inhale"] .inhale-air,.visual[data-phase="exhale"] .exhale-air{display:block}.inhale-air{animation:air-in 1.8s ease-in-out infinite}.exhale-air{animation:air-out 2s ease-out infinite}.visual[data-phase="hold"] .face-halo{fill:#e2ebdb}.visual[data-phase="exhale"] .face-halo{fill:#e7eee7}.readout{text-align:center;max-width:100%}.readout p{margin:0;font-size:17px;font-weight:600;letter-spacing:2px}.readout p:last-child{font-size:12px;color:#455d4c;letter-spacing:0;margin-top:2px;font-weight:400;max-width:270px;line-height:1.6}.count{min-height:52px;display:flex;align-items:baseline;justify-content:center;gap:6px;line-height:1.2;padding:4px 0}#count{font-family:Georgia,serif;font-size:40px;font-variant-numeric:tabular-nums;letter-spacing:2px}#unit{font-size:12px;color:var(--muted)}.visual[data-state="idle"] #count{font-size:32px;padding:4px 0}.visual[data-state="paused"] #count,.visual[data-state="complete"] #count{font-family:inherit;font-size:26px;padding:7px 0}@keyframes air-in{0%{opacity:0;transform:translateY(5px)}45%{opacity:.8}100%{opacity:0;transform:translateY(-6px)}}@keyframes air-out{0%{opacity:0;transform:translateX(-3px)}35%{opacity:.85}100%{opacity:0;transform:translateX(12px)}}
.phase-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.phase-list>div{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px 10px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:#fafaf3}.phase-list b{font-size:10px;font-weight:500}.phase-list span{font-size:13px}.phase-list strong{font:23px Georgia,serif;color:var(--ink)}.phase-list small{font:10px system-ui;margin-left:3px;color:var(--muted)}.phase-list .active{border-color:#718961;background:var(--soft);color:var(--green)}.session-bottom{margin:20px 0 10px;flex-wrap:wrap}.progress-track{height:4px;background:#e6e9dc;border-radius:5px;overflow:hidden}.progress-track span{display:block;background:#61835b;height:100%;width:0}
.controls{background:#ffffff80;padding:28px;display:flex;flex-direction:column}.controls-heading h2{font-size:20px;font-weight:500;margin:0 0 8px}.controls-heading p{font-size:13px;color:var(--muted);margin:0 0 28px}.field-label{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:10px}.field-label span{font-size:11px;color:var(--muted)}select{width:100%;border:1px solid #cbd4c3;border-radius:10px;background:#fbfcf6;padding:0 12px;color:var(--ink)}.field-hint{margin:9px 0 20px;font-size:11px;color:var(--muted)}.sound-option{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;margin-bottom:24px}.sound-option input{width:18px;height:18px;margin:0}.sound-option small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.primary{background:var(--green);color:#fff;text-align:left;padding:0 18px;display:flex;justify-content:space-between;align-items:center}.primary span{font-size:21px}.secondary-actions{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;margin-top:10px}.secondary-actions button{color:var(--ink);border:1px solid #cfd7c7;background:transparent;font-size:13px}.status{font-size:12px;line-height:1.7;color:var(--muted);margin:14px 0 20px;min-height:40px}.gentle-note{display:flex;gap:10px;background:#eaf0e37a;padding:14px;border-radius:12px;margin-top:auto}.gentle-note>span{color:var(--green);font-size:22px}.gentle-note p{font-size:11px;line-height:1.8;color:#52614f;margin:0}.gentle-note strong{font-weight:600;display:block;margin-top:4px}.guide{margin:22px 0 0;padding:0 6px}.guide h2{font-size:14px;font-weight:600;margin:0 0 8px}.guide p{font-size:12px;color:var(--muted);line-height:1.9;margin:4px 0}.footer{font-size:10px;color:var(--muted);margin-top:22px;text-align:center;letter-spacing:1px}.no-script{padding:15px;background:#f1dfbb;font-size:14px}
html[data-embedded="true"]{background:transparent}html[data-embedded="true"] .app{padding:12px;max-width:1120px}html[data-embedded="true"] .hero,html[data-embedded="true"] .guide,html[data-embedded="true"] .footer{display:none}
@media(max-width:760px){.app{padding:24px 16px}.workspace{grid-template-columns:1fr}.hero{margin-bottom:22px}h1 span{display:block;margin:10px 0 0;font-size:20px}.session{padding:20px 16px}.visual{height:340px}.controls{padding:22px}.controls-heading p{margin-bottom:22px}.status{min-height:0}.guide{padding:0}.gentle-note p{font-size:12px}.footer{letter-spacing:0}}
@media(max-width:360px){.phase-list>div{display:block;text-align:center;padding:9px 4px}.phase-list span{display:block;margin-bottom:3px}.phase-list b{display:none}.visual{height:326px}.face-scene{height:210px}.readout p:last-child{max-width:200px}.primary{font-size:14px}.session-heading{font-size:11px}}
@media(prefers-reduced-motion:reduce){.face-character,.face-cheeks{transform:none!important}.inhale-air,.exhale-air{animation:none;opacity:.65}}