@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@400;500&display=swap');
:root{color-scheme:dark;--bg:#0E2029;--line:#a4d2ec20;--muted:#a2b9c4;--accent:#9FEBE5;font-family:Lato,Arial,sans-serif;color:#e1edf1;background:var(--bg)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 35%,#25454535,transparent 60%)}main{max-width:1800px;margin:auto;padding:20px 42px 12px}header{height:86px;display:flex;justify-content:space-between;align-items:flex-start}.brand{width:clamp(240px,22vw,270px);max-width:100%;flex-shrink:0;transform:translateY(-8px)}.brand img{display:block;width:100%;height:auto;object-fit:contain}.header-note{color:var(--muted);font-size:13px;padding-top:18px}.header-note small{font:8px Montserrat,sans-serif;letter-spacing:1.3px;border:1px solid var(--line);border-radius:20px;padding:7px 10px;margin-left:20px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px;height:calc(100dvh - 240px);min-height:490px;max-height:780px}aside{padding:18px 20px 12px;border:1px solid var(--line);border-radius:13px;background:#142c3680;min-height:0}.section-title{display:flex;gap:12px;font:500 14px Montserrat,sans-serif;margin:0 0 15px}.section-title span{font-size:10px;color:#6F9DB8}.configuration{display:flex;flex-direction:column;gap:13px}.pattern{order:3;display:flex;align-items:center;gap:12px;justify-content:space-between}.pattern span{font:9px Montserrat,sans-serif;color:var(--muted);letter-spacing:1px}.pattern strong{font:18px Lato,sans-serif;color:#A4D2EC;overflow-wrap:anywhere}label,legend{display:block;font:500 11px Montserrat,sans-serif;color:#c0d3dd;margin:0 0 8px}button,select,input{font:inherit}button,select{cursor:pointer}select,input[type=number],input:not([type]){width:100%;background:#0e202980;color:#e1edf1;border:1px solid #6f9db83b;border-radius:6px;padding:9px 10px;font-size:12px}select{padding-right:15px}fieldset{border:0;padding:0;margin:0;min-width:0}button{border:1px solid #6f9db83b;border-radius:6px;padding:9px 12px;background:transparent;color:#b7d1df;font:500 11px Montserrat,sans-serif}button:hover{background:#25454588}button:disabled,fieldset:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.step{width:27px;height:27px;padding:0;flex-shrink:0;font-size:18px;background:#25454570}.duration-picker,.tempo-slider{display:flex;gap:10px;align-items:center}.custom-duration{display:flex;align-items:center;gap:8px;margin-top:8px}.custom-duration input{width:100px}.rhythm{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}.tempo-label{display:flex;align-items:baseline;justify-content:space-between;gap:6px}.tempo-label output{font-size:10px;color:#A4D2EC;text-align:right}.tempo-slider input,input[type=range]{accent-color:var(--accent);width:100%;min-width:0;height:4px;cursor:pointer}.duration-note{font-size:10px;line-height:1.35;color:var(--muted);margin:8px 0}#tempo-original{border:0;padding:2px 0;font-size:9px;color:#A4D2EC}#tempo-detail{min-height:26px;margin:6px 0 0}#sound-toggle{width:100%;text-align:left;margin:8px 0 12px;border:0;padding:0;min-height:22px;position:relative}#sound-toggle:after{content:'';position:absolute;right:0;top:1px;width:32px;height:18px;border-radius:14px;background:radial-gradient(circle at 9px 9px,#0E2029 6px,transparent 7px),#4B7489}#sound-toggle[aria-pressed=true]:after{background:radial-gradient(circle at 23px 9px,#0E2029 6px,transparent 7px),var(--accent)}.sound-volume{margin-top:12px}.sound-volume label{display:flex;justify-content:space-between}#sound-notice{font-size:11px;color:#ffceba}.practice{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}.counters{display:grid;grid-template-columns:repeat(4,1fr);height:66px;flex-shrink:0;align-items:center;border:1px solid var(--line);border-radius:11px;background:#142c364d}.counters>div{padding:0 22px;border-right:1px solid var(--line)}.counters>div:last-child{border:0}.counters span{display:block;font:500 8px Montserrat,sans-serif;letter-spacing:1px;color:var(--muted);margin-bottom:7px}.counters strong{font:22px/1 Lato,sans-serif;font-variant-numeric:tabular-nums}#retention-counter{visibility:hidden}#retention-counter.visible{visibility:visible}#retention-counter span,#retention-time{color:var(--accent)}.player{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border:1px solid #6f9db838;border-radius:13px;background:radial-gradient(ellipse at 50% 45%,#25454555,transparent 65%),#122a3460}.player-heading{padding:20px 27px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{font:8px Montserrat,sans-serif;letter-spacing:2px;color:var(--muted)}#practice-title{font:500 18px Montserrat,sans-serif;margin:9px 0 0}#session{font-size:10px;border:1px solid var(--line);border-radius:15px;padding:7px 11px;color:#A4D2EC;max-width:230px}.graph{flex:1;min-height:180px;margin:10px 16px 0;position:relative}canvas{position:absolute;width:100%;height:100%;display:block}.graph-caption{display:flex;justify-content:space-between;padding:0 28px;font:7px Montserrat,sans-serif;letter-spacing:1px;color:#8ba6b5}.status{text-align:center;padding:12px 20px 0}#phase{min-height:22px;line-height:22px;font-variant-numeric:tabular-nums;font:500 18px Montserrat,sans-serif;letter-spacing:4px;color:var(--accent);margin:0}#status-detail{font-size:13px;color:#b0c4ce;margin:0;min-height:17px}.buttons{display:flex;justify-content:center;gap:22px;align-items:center;min-height:68px;padding:12px}.buttons>button{border:0;font-size:11px;min-width:90px}.primary-slot{display:flex;align-items:center;justify-content:center;gap:10px}.primary{background:var(--accent);color:#0E2029;border:0;min-width:155px;padding:13px 25px;font-weight:600}.primary:hover{background:#c1f9f4}#toggle.hold-pause{background:transparent;color:#A4D2EC;min-width:65px;padding:10px;order:2}.primary-slot:has(.hold-pause){position:relative}.hold-pause{position:absolute;left:100%}.buttons:has(.hold-pause){gap:65px}#duration-note{border-top:1px solid var(--line);text-align:center;color:#91aebb;font-size:10px;padding:11px 15px;margin:0;min-height:35px}.lower{margin-top:20px;padding:0 20px;border:1px solid var(--line);border-radius:12px;background:#142c3640}.lower details+details{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:14px 0;font:500 12px Montserrat,sans-serif;display:flex;justify-content:space-between}summary:after{content:'+';color:#A4D2EC}details[open]>summary:after{content:'−'}summary::-webkit-details-marker{display:none}.lower p{font-size:13px;line-height:1.6;color:#b0c4ce;max-width:1000px;white-space:pre-wrap}.lower fieldset{padding:12px 0 18px}.library-actions{display:flex;gap:10px;margin-top:12px}#json-file{margin:0 0 18px;max-width:100%;font-size:12px}.personal-times{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}.personal-controls label{margin-top:10px}footer{display:flex;justify-content:space-between;gap:30px;align-items:center;font-size:9px;color:#8faab7;padding-top:12px}footer p{margin:0}.error{color:#ffceba;font-size:13px}[hidden]{display:none!important}@media(min-width:1000px) and (max-height:800px){.rhythm{margin-top:13px;padding-top:13px}.configuration{gap:10px}.section-title{margin-bottom:12px}#tempo-detail{font-size:9px;min-height:23px}.sound-volume{margin-top:10px}.graph{min-height:180px}.player-heading{padding-top:16px}.lower{margin-top:16px}summary{padding:12px 0}}
@media(max-width:999px){main{padding:20px}.workspace{grid-template-columns:250px minmax(0,1fr);height:auto;max-height:none}.practice{min-height:560px}.header-note{display:none}.counters>div{padding:0 10px}.counters span{letter-spacing:0;font-size:7px}.counters strong{font-size:18px}#session{display:none}.player-heading{padding:20px 16px 0}.buttons{gap:0}.buttons>button{min-width:70px;padding:7px}.primary{min-width:115px;padding:12px}.buttons:has(.hold-pause){gap:15px}.hold-pause{position:static}.graph{min-height:240px}}@media(max-width:680px){.workspace{grid-template-columns:1fr}.practice{grid-row:1}.personal-times{grid-template-columns:1fr 1fr}footer{flex-direction:column;align-items:flex-start;gap:10px}.library-actions{flex-wrap:wrap}#practice-title{font-size:16px}}

/* Recover the removed explanations for ~20% more 0–100% plot height. */
.graph{flex:0 1 auto;height:calc(120% - 326px)}.status{margin-top:auto;padding-top:6px}#phase{line-height:22px;min-height:22px}

/* Keep all four playback actions reachable on narrow public web screens. */
@media(max-width:680px){
 .buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr);gap:4px;padding:8px 4px}
 .buttons>button{min-width:0;padding:7px 2px;font-size:10px}
 .primary-slot{display:grid;grid-template-columns:minmax(0,1fr);position:relative}
 .primary{min-width:0;width:100%;padding:12px 5px}
 .buttons:has(.hold-pause){gap:4px}
 #toggle.hold-pause{position:static;grid-row:2;min-width:0;width:100%;padding:6px 2px}
 #continue-breathing{grid-row:1;grid-column:1}
}