600;700&family=Manrope:wght@400;500;600;700&display=swap'); #yz-time-concept{--aqua:#59bfc1;--ink:#171919;--sub:#a7b4b4;--panel:#191d1d;font-family:Manrope,Arial,sans-serif;color:#fff;color-scheme:dark;background:#0c0f0f;border-radius:22px;overflow:hidden}#yz-time-concept *{box-sizing:border-box}#yz-time-concept button,#yz-time-concept input{font:inherit}#yz-time-concept button{min-height:44px;color:inherit;border:1px solid #343d3d;background:transparent;border-radius:12px;padding:10px 14px}#yz-time-concept button:disabled{opacity:.4}#yz-time-concept button:focus-visible,#yz-time-concept input:focus-visible{outline:3px solid #fff;outline-offset:3px}#yz-time-concept .header{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid #293030;gap:14px}#yz-time-concept .brand-logo{width:116px;height:45px;object-fit:contain}#yz-time-concept .brand-name{font-family:'Barlow Condensed',sans-serif;font-size:25px;letter-spacing:.5px}#yz-time-concept .eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--sub)}#yz-time-concept .toolbar{display:flex;gap:8px;align-items:center}#yz-time-concept .toolbar button{padding:10px}#yz-time-concept .toolbar svg{width:18px;height:18px}#yz-time-concept .layout{display:grid;grid-template-columns:280px minmax(0,1fr)}#yz-time-concept aside{padding:28px 24px;border-right:1px solid #293030;background:#111616}#yz-time-concept h2{font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:600;margin:6px 0 20px}#yz-time-concept .presets{display:grid;gap:8px}#yz-time-concept .preset{text-align:left;display:flex;justify-content:space-between;align-items:center;gap:8px}#yz-time-concept .preset span{color:var(--sub);font-size:12px}#yz-time-concept button[aria-pressed=true]{border-color:var(--aqua);background:#59bfc11a}#yz-time-concept .fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}#yz-time-concept label{font-size:12px;color:#b7c3c3;display:grid;gap:7px}#yz-time-concept input{width:100%;min-height:46px;border:1px solid #3d4848;background:#202727;color:#fff;border-radius:10px;padding:10px;font-size:16px}#yz-time-concept .aside-foot{margin-top:22px;color:#a7b4b4;font-size:12px;line-height:1.8}#yz-time-concept .main{min-width:0;padding:25px 30px 24px;position:relative;background:radial-gradient(ellipse at 50% 32%,#182d2b 0,transparent 63%)}#yz-time-concept .tabs{display:flex;background:#202727;padding:4px;gap:4px;border-radius:14px;max-width:440px;margin:0 auto 24px}#yz-time-concept .tabs button{flex:1;border:0;padding:10px 8px;font-size:13px}#yz-time-concept .tabs button[aria-pressed=true]{background:#59bfc1;color:#102323;font-weight:700}#yz-time-concept .phase-line{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:#b8caca}#yz-time-concept .phase-line strong{color:#fff;font-weight:600}#yz-time-concept .dial{width:min(100%,330px);aspect-ratio:1;margin:18px auto;position:relative;display:grid;place-items:center}#yz-time-concept .dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}#yz-time-concept .dial circle{fill:none;stroke-width:5}#yz-time-concept .dial .track{stroke:#ffffff0d}#yz-time-concept .dial .time-path{stroke:var(--aqua);stroke-linecap:round}#yz-time-concept .dial-content{position:relative;text-align:center;min-width:0}#yz-time-concept .phase{display:inline-flex;align-items:center;gap:8px;color:var(--aqua);font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700}#yz-time-concept .phase:before{content:'';width:6px;height:6px;background:currentColor;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}#yz-time-concept .clock{font-family:'Barlow Condensed',sans-serif;font-size:clamp(72px,12vw,100px);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#fff}#yz-time-concept .caption{font-size:12px;color:#b8caca;margin-top:7px}#yz-time-concept .next{max-width:430px;margin:auto;padding:15px 18px;background:#202727;border-radius:12px;display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:10px}#yz-time-concept .next small{display:block;font-size:10px;text-transform:uppercase;color:#b7c3c3;letter-spacing:1.5px;margin-bottom:4px}#yz-time-concept .next b{font-variant-numeric:tabular-nums;font-weight:500}#yz-time-concept .controls{display:flex;gap:12px;justify-content:center;align-items:center;margin:23px auto 20px;max-width:430px}#yz-time-concept .controls .start{background:var(--aqua);color:#102323;border:0;flex:1;font-weight:700;min-height:60px;display:flex;gap:10px;justify-content:center;align-items:center}#yz-time-concept .controls .secondary{width:60px;min-height:60px;display:grid;place-items:center}#yz-time-concept .controls svg{width:20px;height:20px}#yz-time-concept .segments{display:flex;gap:5px;margin:0 auto 12px;max-width:430px}#yz-time-concept .segments span{height:5px;border-radius:3px;flex:1;background:#303c3b}#yz-time-concept .segments span.done{background:var(--aqua)}#yz-time-concept .bottomline{display:flex;justify-content:space-between;max-width:430px;margin:auto;font-size:11px;color:#acbdbd}#yz-time-concept .mobile-editor{display:none}#yz-time-concept .laps{max-width:430px;margin:18px auto 0;font-size:12px}#yz-time-concept .lap{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #303c3b;font-variant-numeric:tabular-nums}#yz-time-concept .notice{font-size:12px;padding:14px 26px;background:#182323;color:#c7dada;display:flex;justify-content:space-between;gap:12px}#yz-time-concept .focus aside,#yz-time-concept .focus .tabs{display:none}#yz-time-concept .focus .layout{display:block}#yz-time-concept .focus .dial{width:min(100%,420px)}#yz-time-concept .focus .clock{font-size:clamp(84px,16vw,140px)}#yz-time-concept .light{--ink:#fff}#yz-time-concept [hidden]{display:none!important} @media(max-width:650px){#yz-time-concept .layout{display:flex;flex-direction:column}#yz-time-concept aside{order:2;border:0;border-top:1px solid #293030;padding:22px}#yz-time-concept .main{padding:22px 18px}#yz-time-concept .header{padding:16px 18px}#yz-time-concept .brand-name{font-size:22px}#yz-time-concept .header .eyebrow{font-size:10px;letter-spacing:1px}#yz-time-concept .toolbar button{padding:8px}#yz-time-concept .tabs{margin-bottom:22px}#yz-time-concept .dial{width:min(100%,290px);margin:16px auto}#yz-time-concept .clock{font-size:88px}#yz-time-concept .presets{grid-template-columns:1fr 1fr}#yz-time-concept .preset{flex-direction:column;align-items:start}#yz-time-concept .fields{grid-template-columns:1fr 1fr}#yz-time-concept .notice{font-size:11px;padding:13px 18px}#yz-time-concept .mobile-editor{display:block;text-align:center;color:#b7c3c3;font-size:12px;margin:18px auto 0}#yz-time-concept .focus .mobile-editor{display:none}} @media(prefers-reduced-motion:reduce){#yz-time-concept *{transition:none!important}} #yz-time-concept .result-layout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:30px;align-items:center}#yz-time-concept #yz-share-art{aspect-ratio:4/5;background-color:#070b0b;background-image:linear-gradient(135deg,#59bfc126,transparent 62%);background-size:cover;background-position:center;position:relative;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}#yz-time-concept .share-top{display:flex;justify-content:space-between;align-items:start;padding:22px 22px 0;font-size:10px;letter-spacing:2px;color:#bcd4d3}#yz-time-concept #yz-share-logo{width:96px;height:55px;object-fit:contain}#yz-time-concept .share-content{padding:20px 24px 24px;background:linear-gradient(transparent,#070b0bf0 35%)}#yz-time-concept .share-headline{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:70px;line-height:.9;color:#59bfc1;margin:14px 0 24px}#yz-time-concept .share-metrics{display:grid;grid-template-columns:1fr 1fr;gap:15px}#yz-time-concept .share-metrics strong{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:600;display:block}#yz-time-concept .share-metrics span{font-size:9px;letter-spacing:1px}#yz-time-concept .share-interval{font-size:9px;letter-spacing:.6px;margin-top:18px;color:#c9d8d8}#yz-time-concept .share-finish{font-size:11px;letter-spacing:2px;border-top:1px solid #59bfc140;margin-top:20px;padding-top:14px}#yz-time-concept .share-options p{font-size:13px;line-height:1.7;color:#b7c3c3}#yz-time-concept .share-options button{display:block;width:100%;margin:10px 0;text-align:center}#yz-time-concept #yz-share-community{background:#59bfc1;border:0;color:#102323;font-weight:700}#yz-time-concept .photo-option{margin-top:16px}#yz-time-concept .photo-option input{font-size:12px}#yz-time-concept #yz-share-feedback{font-size:11px}@media(max-width:650px){#yz-time-concept .result-layout{grid-template-columns:1fr}#yz-time-concept #yz-share-art{width:100%;max-width:340px;margin:auto}} #yz-time-concept .dial circle{stroke-width:18} #yz-time-concept .dial .track{stroke:#ffffff20} #yz-time-concept .dial .time-path{transition:stroke-dashoffset 90ms linear,stroke 160ms ease} #yz-time-concept #yz-share-art{isolation:isolate;min-height:420px;background-color:#090909;border-radius:16px;background-image:radial-gradient(ellipse at 80% 15%,#59bfc14d,transparent 65%)} #yz-time-concept #yz-share-art:before,#yz-time-concept #yz-share-art:after{content:'';position:absolute;pointer-events:none;z-index:-1} #yz-time-concept #yz-share-art[data-look=interval]:before{inset:-40px -130px -30px 20%;background:repeating-linear-gradient(110deg,transparent 0 25px,#59bfc1b3 25px 38px,transparent 38px 49px,#ffffff35 49px 51px,transparent 51px 89px);transform:skewY(-16deg);opacity:.55} #yz-time-concept #yz-share-art[data-look=interval]:after{width:220px;height:190px;top:85px;right:-60px;background:#59bfc144;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);transform:rotate(15deg)} #yz-time-concept #yz-share-art[data-look=timer]{background-color:#101313;background-image:radial-gradient(ellipse at 78% 22%,#59bfc159,transparent 70%)} #yz-time-concept #yz-share-art[data-look=timer]:before{width:340px;height:340px;top:40px;right:-170px;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 22px,#dcffff50 23px 24px,transparent 25px 44px);transform:rotateX(24deg);opacity:.8} #yz-time-concept #yz-share-art[data-look=timer]:after{width:90px;height:400px;right:55px;top:-140px;transform:rotate(30deg);background:linear-gradient(90deg,transparent,#59bfc14d,transparent);filter:blur(10px)} #yz-time-concept #yz-share-art[data-look=watch]{background-image:radial-gradient(ellipse at 100% 0,#59bfc14d,transparent 65%)} #yz-time-concept #yz-share-art[data-look=watch]:before{inset:40px -90px -80px 30%;background:repeating-linear-gradient(90deg,transparent 0 53px,#f1ffff85 54px 56px,transparent 57px 95px);transform:perspective(250px) rotateX(29deg) rotateZ(27deg);opacity:.5} #yz-time-concept #yz-share-art[data-look=watch]:after{width:260px;height:50px;top:145px;right:-50px;background:repeating-linear-gradient(0deg,#59bfc1dd 0 3px,transparent 3px 11px);transform:rotate(-20deg);opacity:.55} #yz-time-concept .share-top{align-items:center;padding:20px 20px 0;position:relative;z-index:1} #yz-time-concept #yz-share-logo{width:150px;height:auto;max-height:58px;object-fit:contain;filter:brightness(0) invert(1)} #yz-time-concept .share-top>span{font-size:9px;letter-spacing:1.2px;color:#e0eeee;line-height:1.7} #yz-time-concept .share-content{padding-top:56px;background:linear-gradient(transparent,#080808e8 40%,#080808 100%);position:relative;z-index:1} #yz-time-concept .share-headline{font-size:66px;line-height:.95;overflow-wrap:normal} #yz-time-concept #yz-share-art[data-look=watch] .share-headline{font-size:46px} #yz-time-concept #yz-share-art[data-look=timer] .share-headline{font-size:65px} #yz-time-concept .share-metrics strong{font-size:36px;white-space:nowrap} #yz-time-concept .share-metrics span{font-size:10px} #yz-time-concept .share-interval{font-size:10px;line-height:1.6} #yz-time-concept #yz-share-look{display:inline-block;font-size:12px;line-height:1.6;color:#59bfc1;margin:0 0 8px} #yz-time-concept #yz-share-art[data-look=timer] .share-finish{letter-spacing:3px} #yz-time-concept #yz-share-art[data-look=watch] .share-finish{font-style:italic} @media(max-width:360px){#yz-time-concept #yz-share-logo{width:125px}#yz-time-concept .share-headline{font-size:58px}#yz-time-concept .share-metrics strong{font-size:31px}#yz-time-concept .share-content{padding-inline:18px}} @media(prefers-reduced-motion:reduce){#yz-time-concept .dial .time-path{transition:none}} #yz-time-concept .tabs{max-width:520px;flex-wrap:nowrap} #yz-time-concept .tabs button{min-width:0;padding:10px 7px;font-size:12px} #yz-time-concept .dial{width:min(100%,336px);container-type:inline-size} #yz-time-concept .dial-content{width:66%;padding:15px 0;display:flex;flex-direction:column;align-items:center} #yz-time-concept .clock{font-size:clamp(54px,24cqi,80px);letter-spacing:0;line-height:1.15;max-width:100%;white-space:nowrap} #yz-time-concept[data-mode=watch] .clock{font-size:clamp(48px,21cqi,70px)} #yz-time-concept .focus .clock{font-size:clamp(60px,24cqi,102px)} #yz-time-concept .phase{font-size:11px;letter-spacing:1.3px;white-space:nowrap} #yz-time-concept .caption{max-width:100%;font-size:11px} #yz-time-concept .breath-flower{display:none;position:absolute;inset:13%;border-radius:50%;transform:scale(.4);will-change:transform;pointer-events:none;background:radial-gradient(circle,#8ce5dc22,transparent 68%)} #yz-time-concept .breath-flower span{position:absolute;width:65%;height:65%;left:17.5%;top:17.5%;border-radius:50%;background:radial-gradient(circle at 45% 40%,#d8fff64d,#59bfc12b 55%,transparent 75%);mix-blend-mode:screen;transform:rotate(var(--angle)) translateY(-25%)} #yz-time-concept[data-mode=breath]{--aqua:#89d8d5;background:#0c1515} #yz-time-concept[data-mode=breath] .main{background:radial-gradient(ellipse at 50% 38%,#59bfc11f,transparent 70%)} #yz-time-concept[data-mode=breath] aside{background:#142020} #yz-time-concept[data-mode=breath] .breath-flower{display:block} #yz-time-concept[data-mode=breath] .dial .track{stroke:#89d8d51a} #yz-time-concept[data-mode=breath] .dial circle{stroke-width:14} #yz-time-concept[data-mode=breath] .clock{color:#f1fffe;text-shadow:0 2px 12px #0c1515} #yz-time-concept[data-mode=breath] .tabs button[aria-pressed=true]{background:#c9eeeb} #yz-time-concept .retention-option{display:flex;align-items:center;gap:10px;margin-top:20px;line-height:1.6;color:#dfefed} #yz-time-concept .retention-option input{width:20px;min-height:20px;height:20px;flex:none;accent-color:#89d8d5} #yz-time-concept .breath-hint{font-size:11px;color:#b2c5c3;line-height:1.7;margin:16px 0 0} #yz-time-concept .breath-actions{display:flex;gap:10px;max-width:430px;margin:0 auto 16px} #yz-time-concept .breath-actions button{flex:1;font-size:12px;line-height:1.5} #yz-time-concept .retention-hint{font-size:11px;color:#bddad6;text-align:center;max-width:400px;margin:0 auto 15px;line-height:1.6} #yz-time-concept #yz-result{padding:24px;background:#fff;color:#171919;border-top:1px solid #dce1e1} #yz-time-concept .result-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:20px} #yz-time-concept .result-heading .eyebrow{color:#626b6b;font-size:10px} #yz-time-concept .result-heading h2{margin:4px 0 0} #yz-time-concept .result-layout{grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:28px} #yz-time-concept .share-image-panel{background:#e9efef;padding:18px;border-radius:18px;display:flex;justify-content:center} #yz-time-concept #yz-result-image{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:11px;object-fit:contain;box-shadow:0 10px 25px #1719191a} #yz-time-concept .share-options p{color:#626b6b;font-size:13px;line-height:1.7} #yz-time-concept .share-options h2{margin:6px 0 15px} #yz-time-concept #yz-share-look{color:#147f82;font-size:12px} #yz-time-concept .share-action-grid{display:grid;grid-template-columns:1fr;gap:10px} #yz-time-concept .share-action-grid button{border:1px solid #dce1e1;background:#fff;display:flex;justify-content:center;align-items:center;gap:8px;margin:0;color:#171919} #yz-time-concept #yz-share-file{background:#147f82;color:#fff;border-color:#147f82} #yz-time-concept .share-action-grid svg{width:18px;height:18px} #yz-time-concept .share-caption{font-size:11px!important} @media(max-width:650px){#yz-time-concept .dial{width:min(100%,310px)}#yz-time-concept .tabs{gap:1px}#yz-time-concept .tabs button{font-size:11px;padding-inline:4px}#yz-time-concept .result-layout{grid-template-columns:1fr}#yz-time-concept .share-image-panel{max-width:360px;width:100%;margin:auto}#yz-time-concept .share-action-grid{grid-template-columns:1fr 1fr}#yz-time-concept #yz-share-view{grid-column:1/-1}#yz-time-concept .focus .clock{font-size:clamp(54px,23cqi,94px)}} @media(prefers-reduced-motion:reduce){#yz-time-concept .breath-flower{transform:scale(.65)!important;opacity:.8!important}} #yz-time-concept .dial .time-path{transition:none;will-change:stroke-dashoffset}#yz-time-concept .breath-flower{contain:layout style;backface-visibility:hidden}#yz-time-concept .share-action-grid button:focus-visible{outline-color:#147f82}#yz-time-concept .expanded{max-width:540px} #yz-time-concept{--aqua:#59bfc1;--ink:#171919;--sub:#b8b8b8;--panel:#202020;background:#101010;font-family:Manrope,Arial,sans-serif;font-size:13px} #yz-time-concept button,#yz-time-concept input,#yz-time-concept label,#yz-time-concept p,#yz-time-concept small,#yz-time-concept .caption,#yz-time-concept .phase,#yz-time-concept .next,#yz-time-concept .bottomline,#yz-time-concept .preset,#yz-time-concept .preset span{font-family:Manrope,Arial,sans-serif;font-style:normal} #yz-time-concept button{font-size:13px;font-weight:600;border-color:#444;border-radius:12px} #yz-time-concept .tabs button{font-size:12px;font-weight:600} #yz-time-concept label,#yz-time-concept .aside-foot,#yz-time-concept .preset span,#yz-time-concept .caption,#yz-time-concept .next,#yz-time-concept .breath-hint,#yz-time-concept .retention-hint{font-size:12px;font-weight:400;line-height:1.65} #yz-time-concept .phase{font-size:12px;font-weight:600} #yz-time-concept .eyebrow,#yz-time-concept .next small,#yz-time-concept .bottomline{font-size:11px;font-weight:500} #yz-time-concept h2,#yz-time-concept .brand-name,#yz-time-concept .clock,#yz-time-concept .phase-line strong{font-family:'Barlow Condensed',Arial,sans-serif;font-weight:600} #yz-time-concept .phase-line strong{font-size:23px;letter-spacing:.7px;color:#fff;text-transform:uppercase} #yz-time-concept aside{background:#171717;border-color:#363636} #yz-time-concept .header{background:#101010;border-color:#363636} #yz-time-concept .main{background:#101010} #yz-time-concept .tabs,#yz-time-concept .next{background:#252525} #yz-time-concept input{background:#252525;border-color:#484848;color:#fff} #yz-time-concept .eyebrow,#yz-time-concept .phase-line,#yz-time-concept .caption,#yz-time-concept .next small,#yz-time-concept .bottomline,#yz-time-concept label,#yz-time-concept .aside-foot,#yz-time-concept .preset span{color:#b8b8b8} #yz-time-concept .notice{background:#1b1b1b;color:#d4d4d4} #yz-time-concept .dial circle,#yz-time-concept[data-mode=breath] .dial circle{stroke-width:18} #yz-time-concept .dial .time-path{transition:none} #yz-time-concept .dial .track{stroke:#ffffff26} #yz-time-concept .controls .start{background:#59bfc1;color:#111} #yz-time-concept .tabs button[aria-pressed=true],#yz-time-concept[data-mode=breath] .tabs button[aria-pressed=true]{background:#59bfc1;color:#111} #yz-time-concept .preset[aria-pressed=true]{background:#59bfc11a;border-color:#59bfc1} #yz-time-concept .session-progress{height:8px;max-width:430px;margin:0 auto 12px;background:#3c3c3c;border-radius:4px;position:relative;overflow:hidden} #yz-time-concept .session-progress-fill{position:absolute;inset:0;background:#59bfc1;transform:scaleX(0);transform-origin:left center;will-change:transform} #yz-time-concept .session-progress[data-open=true][data-running=true] .session-progress-fill{width:26%;transform:none!important;animation:yz-open-progress 2.4s ease-in-out infinite alternate} #yz-time-concept .progress-caption{display:flex;justify-content:space-between;gap:10px;max-width:430px;margin:0 auto 8px;color:#b8b8b8;font:500 11px Manrope,Arial,sans-serif} #yz-time-concept[data-mode=breath]{--aqua:#59bfc1;--sub:#626b6b;background:#f4f5f5;color:#171919;color-scheme:light} #yz-time-concept[data-mode=breath] aside{background:#fff;border-color:#dce1e1} #yz-time-concept[data-mode=breath] .main{background:#f4f5f5;isolation:isolate} #yz-time-concept[data-mode=breath] .main:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#f4f5f5db,#ffffffed 70%,#f4f5f5f7),var(--breath-nature);background-position:center;background-size:cover;pointer-events:none} #yz-time-concept[data-mode=breath] .header{color:#fff} #yz-time-concept[data-mode=breath] .header .eyebrow{color:#bbb} #yz-time-concept[data-mode=breath] .main .eyebrow,#yz-time-concept[data-mode=breath] .phase-line,#yz-time-concept[data-mode=breath] .caption,#yz-time-concept[data-mode=breath] .next small,#yz-time-concept[data-mode=breath] .bottomline,#yz-time-concept[data-mode=breath] label,#yz-time-concept[data-mode=breath] .aside-foot,#yz-time-concept[data-mode=breath] .preset span,#yz-time-concept[data-mode=breath] .breath-hint,#yz-time-concept[data-mode=breath] .retention-hint,#yz-time-concept[data-mode=breath] .progress-caption{color:#626b6b} #yz-time-concept[data-mode=breath] .phase-line strong,#yz-time-concept[data-mode=breath] .clock{color:#171919;text-shadow:none} #yz-time-concept[data-mode=breath] .phase{color:#171919} #yz-time-concept[data-mode=breath] .tabs{background:#e4e7e7} #yz-time-concept[data-mode=breath] button{border-color:#c6cece} #yz-time-concept[data-mode=breath] input{background:#fff;border-color:#ccd3d3;color:#171919} #yz-time-concept[data-mode=breath] .next{background:#ffffffde;color:#171919} #yz-time-concept[data-mode=breath] .dial .track{stroke:#17191919} #yz-time-concept[data-mode=breath] .session-progress{background:#dce1e1} #yz-time-concept[data-mode=breath] .retention-option{color:#171919} #yz-time-concept[data-mode=breath] .controls .secondary,#yz-time-concept[data-mode=breath] #yz-finish{background:#ffffffc9;color:#171919} #yz-time-concept .breath-flower{inset:7%;overflow:hidden;border-radius:50%;background:radial-gradient(circle,#59bfc135,#59bfc11a 65%,transparent 71%);will-change:transform;mix-blend-mode:multiply} #yz-time-concept .breath-flower span{background:radial-gradient(circle at 45% 45%,#59bfc16b,#59bfc130 65%,transparent 76%);mix-blend-mode:multiply} #yz-time-concept #yz-retention-start{min-height:56px;background:#171919;color:#fff;border:2px solid #59bfc1;border-radius:12px;font:600 13px Manrope,Arial,sans-serif;box-shadow:0 5px 15px #17191914;display:flex;align-items:center;justify-content:center;gap:10px;padding-inline:18px} #yz-time-concept #yz-retention-start:before{content:'';display:block;width:9px;height:9px;background:#59bfc1;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);flex:none} #yz-time-concept #yz-retention-start[data-measuring=true]{background:#59bfc1;color:#171919} #yz-time-concept #yz-retention-start[data-measuring=true]:before{background:#171919} #yz-time-concept #yz-share-file{background:#59bfc1;border-color:#59bfc1;color:#171919} #yz-time-concept #yz-share-look{color:#626b6b} @keyframes yz-open-progress{from{translate:0 0}to{translate:285% 0}} @media(max-width:650px){#yz-time-concept .phase-line strong{font-size:22px}#yz-time-concept .tabs button{font-size:11px}} @media(prefers-reduced-motion:reduce){#yz-time-concept .session-progress[data-open=true] .session-progress-fill{animation:none}} #yz-time-concept{--breath-nature:none} #yz-time-concept[data-mode=breath] .main{background:#101010;color:#fff} #yz-time-concept[data-mode=breath] .main:before{background-image:linear-gradient(180deg,#00000066 0%,#0000004d 35%,#00000080 68%,#000000d9 100%),var(--breath-person);background-position:center,center 42%;background-size:cover;filter:grayscale(1);opacity:1} #yz-time-concept[data-mode=breath] .main .phase-line strong,#yz-time-concept[data-mode=breath] .main .clock,#yz-time-concept[data-mode=breath] .main .phase{color:#fff;text-shadow:0 2px 10px #00000073} #yz-time-concept[data-mode=breath] .main .phase-line,#yz-time-concept[data-mode=breath] .main .caption,#yz-time-concept[data-mode=breath] .main .next small,#yz-time-concept[data-mode=breath] .main .bottomline,#yz-time-concept[data-mode=breath] .main .progress-caption,#yz-time-concept[data-mode=breath] .main .retention-hint,#yz-time-concept[data-mode=breath] .main .mobile-editor{color:#f1f1f1} #yz-time-concept[data-mode=breath] .main .tabs{background:#171919e8} #yz-time-concept[data-mode=breath] .main .tabs button{color:#fff} #yz-time-concept[data-mode=breath] .main .tabs button[aria-pressed=true]{color:#111;background:#59bfc1} #yz-time-concept[data-mode=breath] .main .next{background:#101010c9;color:#fff} #yz-time-concept[data-mode=breath] .main .controls .secondary,#yz-time-concept[data-mode=breath] .main #yz-finish{background:#101010b8;color:#fff;border-color:#ffffff66} #yz-time-concept[data-mode=breath] .main .dial .track{stroke:#ffffff42} #yz-time-concept[data-mode=breath] .main .session-progress{background:#ffffff40} #yz-time-concept[data-mode=breath] .main .breath-flower{mix-blend-mode:screen;background:radial-gradient(circle,#59bfc15c,#59bfc126 65%,transparent 72%)} #yz-time-concept[data-mode=breath] .main .breath-flower span{mix-blend-mode:screen;background:radial-gradient(circle at 45% 45%,#59bfc16b,#59bfc130 65%,transparent 76%)} #yz-time-concept[data-mode=breath] .main .dial-content{background:radial-gradient(ellipse,#00000038,transparent 72%);border-radius:50%} #yz-time-concept[data-mode=breath] .main #yz-retention-start{background:#101010e8;border-color:#59bfc1;color:#fff} #yz-time-concept[data-mode=breath] .main #yz-retention-start[data-measuring=true]{background:#59bfc1;color:#111} @media(max-width:650px){#yz-time-concept[data-mode=breath] .main:before{background-position:center,center 40%}} #yz-time-concept{--breath-person:url("./assets/css-photo-0.jpg")} #yz-time-concept[data-mode=breath] .main:before{background-image:linear-gradient(180deg,#000000b8 0%,#0000009e 25%,#000000ad 56%,#000000e0 84%,#000000eb 100%),var(--breath-person)} #yz-time-concept[data-mode=breath] .main .phase-line,#yz-time-concept[data-mode=breath] .main .caption,#yz-time-concept[data-mode=breath] .main .next small,#yz-time-concept[data-mode=breath] .main .bottomline,#yz-time-concept[data-mode=breath] .main .progress-caption,#yz-time-concept[data-mode=breath] .main .retention-hint,#yz-time-concept[data-mode=breath] .main .mobile-editor{color:#fff;text-shadow:0 1px 4px #000000} #yz-time-concept[data-mode=breath] .main .phase-line strong,#yz-time-concept[data-mode=breath] .main .clock,#yz-time-concept[data-mode=breath] .main .phase{color:#fff;text-shadow:0 2px 5px #000,0 0 18px #000000b3} #yz-time-concept[data-mode=breath] .main .tabs{background:#171717;border:1px solid #ffffff38} #yz-time-concept[data-mode=breath] .main .tabs button:not([aria-pressed=true]){color:#fff} #yz-time-concept[data-mode=breath] .main .next{background:#111111ed;border:1px solid #ffffff26;color:#fff} #yz-time-concept[data-mode=breath] .main .controls .secondary,#yz-time-concept[data-mode=breath] .main #yz-finish{background:#171717;color:#fff;border-color:#ffffff99;font-weight:600} #yz-time-concept[data-mode=breath] .main .controls .start{background:#59bfc1;color:#080808;font-weight:700;box-shadow:0 4px 16px #00000040} #yz-time-concept[data-mode=breath] .main #yz-retention-start{background:#080808;color:#fff;border-color:#59bfc1;box-shadow:0 0 0 1px #59bfc140,0 5px 18px #00000066} #yz-time-concept[data-mode=breath] .main #yz-retention-start[data-measuring=true]{background:#59bfc1;color:#080808} #yz-time-concept[data-mode=breath] .main .dial .track{stroke:#ffffff38} #yz-time-concept[data-mode=breath] .main .breath-flower{mix-blend-mode:screen;background:radial-gradient(circle,#59bfc1c4 0%,#59bfc1a8 36%,#59bfc163 58%,#59bfc126 69%,transparent 73%);box-shadow:inset 0 0 25px #59bfc12b} #yz-time-concept[data-mode=breath] .main .breath-flower span{mix-blend-mode:screen;background:radial-gradient(circle at 45% 45%,#89d8d5e0 0%,#59bfc1c9 40%,#59bfc180 60%,#59bfc12e 72%,transparent 78%)} #yz-time-concept[data-mode=breath] .main .dial-content{background:radial-gradient(ellipse,#000000bd 0%,#0000008f 35%,#00000052 56%,transparent 73%)} #yz-time-concept[data-mode=breath] .main .session-progress{background:#ffffff40} #yz-time-concept[data-mode=breath] .main button:focus-visible,#yz-time-concept[data-mode=breath] .main a:focus-visible{outline:3px solid #fff;outline-offset:3px} #yz-time-concept{--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px} #yz-time-concept .header{padding:var(--space-lg);gap:var(--space-md)} #yz-time-concept aside{padding:var(--space-lg)} #yz-time-concept .main{padding:var(--space-lg)} #yz-time-concept h2{margin:var(--space-xs) 0 var(--space-lg)} #yz-time-concept .presets{gap:var(--space-xs)} #yz-time-concept .preset{padding:var(--space-sm) var(--space-md)} #yz-time-concept .fields{gap:var(--space-md);margin-top:var(--space-lg)} #yz-time-concept label{gap:var(--space-xs)} #yz-time-concept .aside-foot,#yz-time-concept .retention-option{margin-top:var(--space-lg)} #yz-time-concept .breath-hint{margin-top:var(--space-md)} #yz-time-concept .tabs{margin-bottom:var(--space-lg)} #yz-time-concept .dial{margin:var(--space-lg) auto} #yz-time-concept .next{padding:var(--space-md)} #yz-time-concept .next small{margin-bottom:var(--space-xs)} #yz-time-concept .controls{gap:var(--space-sm);margin:var(--space-lg) auto var(--space-md)} #yz-time-concept .breath-actions{margin:0 auto var(--space-md)} #yz-time-concept .retention-hint{margin:0 auto var(--space-md)} #yz-time-concept .finish-row{max-width:430px;margin:0 auto var(--space-lg);text-align:center} #yz-time-concept .finish-row button{padding:var(--space-sm) var(--space-lg)} #yz-time-concept .progress-caption{margin-bottom:var(--space-xs)} #yz-time-concept .session-progress{margin-bottom:var(--space-sm)} #yz-time-concept #yz-result{padding:var(--space-lg)} #yz-time-concept .result-heading{gap:var(--space-md);margin-bottom:var(--space-lg)} #yz-time-concept .result-heading h2{margin:var(--space-xs) 0 0} #yz-time-concept .result-layout{gap:var(--space-lg);align-items:start} #yz-time-concept .share-image-panel{padding:var(--space-md)} #yz-time-concept .share-options{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-xs) 0;min-width:0} #yz-time-concept .share-options h2,#yz-time-concept .share-options p,#yz-time-concept #yz-share-look{margin:0} #yz-time-concept .share-options h2{margin-top:calc(-1 * var(--space-xs))} #yz-time-concept .share-action-grid{gap:var(--space-sm);margin-top:var(--space-xs)} #yz-time-concept .share-action-grid button{padding:var(--space-sm) var(--space-md);min-height:48px;gap:var(--space-xs)} #yz-time-concept .share-caption{padding-top:0} @media(max-width:650px){#yz-time-concept .header,#yz-time-concept aside,#yz-time-concept .main,#yz-time-concept #yz-result{padding:20px}#yz-time-concept .result-layout{gap:var(--space-lg)}#yz-time-concept .share-image-panel{padding:var(--space-sm)}} @media(max-width:360px){#yz-time-concept .header,#yz-time-concept aside,#yz-time-concept .main,#yz-time-concept #yz-result{padding:var(--space-md)}} #yz-time-concept #yz-result-image{aspect-ratio:auto} #yz-time-concept[data-mode=interval] .main{isolation:isolate;background:#101010;color:#fff} #yz-time-concept[data-mode=interval] .main:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(180deg,#00000061,#00000070 55%,#000000d4),var(--interval-background);background-position:center;background-size:cover;pointer-events:none} #yz-time-concept[data-mode=interval] .main .tabs{background:#171717ed} #yz-time-concept[data-mode=interval] .main .next{background:#111111e8} #yz-time-concept[data-mode=interval] .main .controls .secondary,#yz-time-concept[data-mode=interval] .main #yz-finish{background:#171717e8;color:#fff;border-color:#ffffff66} #yz-time-concept[data-mode=interval] .main .clock,#yz-time-concept[data-mode=interval] .main .phase-line,#yz-time-concept[data-mode=interval] .main .bottomline,#yz-time-concept[data-mode=interval] .main .progress-caption,#yz-time-concept[data-mode=interval] .main .caption{color:#fff;text-shadow:0 2px 7px #000} #yz-time-concept .interval-photo-layer{display:none;position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:0;transition:opacity 240ms ease;pointer-events:none;contain:paint} #yz-time-concept[data-mode=interval] .interval-photo-layer{display:block} #yz-time-concept .interval-photo-layer.photo-active{opacity:1} #yz-time-concept[data-mode=interval] .main:before{background:none} #yz-time-concept[data-mode=interval] .main{isolation:isolate;background:#101010} @media(prefers-reduced-motion:reduce){#yz-time-concept .interval-photo-layer{transition:none}} #yz-time-concept .interval-photo-layer{filter:grayscale(1);background-position:center 42%} #yz-time-concept .ci-hexagons{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;display:none} #yz-time-concept[data-mode=interval] .ci-hexagons{display:block} #yz-time-concept[data-mode=interval] .dial{filter:drop-shadow(0 3px 12px #0008)} #yz-time-concept[data-mode=interval] .dial-content{text-shadow:0 2px 12px #000} #yz-time-concept .interval-photo-layer[data-photo=run]{filter:grayscale(1) brightness(.64);background-repeat:no-repeat;background-color:#101010} #yz-time-concept .coach-switch{display:flex;gap:8px;padding:16px 24px;border-bottom:1px solid #333} #yz-time-concept .coach-view{padding:28px;max-width:900px;margin:auto} #yz-time-concept .coach-note{color:#b8b8b8;font-size:13px;margin:0 0 24px} #yz-time-concept .coach-latest{background:#202020;border-radius:16px;padding:20px 24px;margin-bottom:32px} #yz-time-concept .coach-latest>span{color:#59bfc1;font-size:12px} #yz-time-concept .coach-latest h3{font-family:'Barlow Condensed',sans-serif;font-size:30px;margin:10px 0} #yz-time-concept .coach-latest p{font-size:14px;line-height:1.7;margin:0} #yz-time-concept .coach-entry{padding:18px 0;border-bottom:1px solid #333;display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px} #yz-time-concept .coach-entry time{color:#b8b8b8;font-size:13px} #yz-time-concept .coach-entry strong{font-size:15px;font-weight:600;display:block} #yz-time-concept .coach-entry p{color:#c8c8c8;font-size:13px;line-height:1.7;margin:6px 0 0;overflow-wrap:anywhere} #yz-time-concept .coach-view[hidden],#yz-time-concept .shell[hidden]{display:none} @media(max-width:450px){#yz-time-concept .coach-view{padding:24px 18px}#yz-time-concept .coach-switch{padding:14px 18px}#yz-time-concept .coach-entry{grid-template-columns:52px minmax(0,1fr);gap:10px}} #yz-time-concept .interval-photo-layer[data-photo=core]{filter:grayscale(1) brightness(.52)} #yz-time-concept .interval-photo-layer[data-photo=core]{background-repeat:no-repeat;background-color:#101010} #yz-time-concept .interval-photo-layer[data-photo=hiit]{filter:grayscale(1) brightness(.82)} #yz-time-concept .main .next,#yz-time-concept[data-mode] .main .next{background:rgba(17,17,17,.56);color:#fff} #yz-time-concept[data-mode] .main .next small{color:#e3e3e3} #yz-time-concept .interval-photo-layer[data-photo=tabata]{filter:grayscale(1);background-size:cover;background-position:center} #yz-time-concept[data-mode=timer] .main,#yz-time-concept[data-mode=watch] .main{isolation:isolate;background:#101010} #yz-time-concept[data-mode=timer] .main:before,#yz-time-concept[data-mode=watch] .main:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(180deg,#00000080,#00000094 55%,#000000e0),var(--time-nature);background-position:center;background-size:cover;filter:grayscale(1);pointer-events:none} #yz-time-concept[data-mode=watch] .main:before{background-position:85% center} #yz-time-concept[data-mode=watch] .main:before{background-image:linear-gradient(180deg,#00000066,#00000059 55%,#000000ad),var(--watch-equipment);background-position:center;background-size:cover;filter:grayscale(1)} #yz-time-concept[data-mode=watch] .ci-hexagons{display:block} #yz-time-concept[data-mode=watch] .main:before{filter:grayscale(1) brightness(.32)} /* Production integration: local fonts, accessible modal and an owner-only dashboard. */ .yz-training-overlay{position:fixed;inset:0;margin:auto;border:0;padding:0;width:min(1080px,100%);max-width:100%;max-height:calc(100dvh - 32px);background:#101010;color:#fff;border-radius:20px;overscroll-behavior:contain} .yz-training-overlay::backdrop{background:#000b} body.yz-training-open{overflow:hidden} #yz-time-concept button{cursor:pointer} #yz-time-concept .header{flex-wrap:wrap} #yz-time-concept #yz-time-save-status{flex-basis:100%;font:400 12px Manrope,Arial,sans-serif;color:#c8c8c8;margin:0} #yz-time-concept .toolbar svg{width:20px;height:20px} #yz-time-concept .start svg{width:20px;height:20px} #yz-time-concept .main .next,#yz-time-concept[data-mode] .main .next{background:rgba(17,17,17,.56);color:#fff} #yz-portal .yz-training-row,.yz-training-history .yz-training-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:18px 0;border-bottom:1px solid #d9e1e1} #yz-portal .yz-training-row strong,.yz-training-history .yz-training-row strong{font:600 14px Manrope,Arial,sans-serif} #yz-portal .yz-training-row small,.yz-training-history .yz-training-row small{display:block;font:400 12px Manrope,Arial,sans-serif;color:#626b6b;margin-top:6px} #yz-portal .yz-training-duration,.yz-training-history .yz-training-duration{font:600 22px 'Barlow Condensed',sans-serif;text-align:right;white-space:nowrap} #yz-portal .yz-training-row details,.yz-training-history .yz-training-row details{grid-column:1/-1;font:400 13px Manrope,Arial,sans-serif} #yz-portal .yz-training-row details p,.yz-training-history .yz-training-row details p{line-height:1.6;margin-top:10px} .yz-training-status{color:#9b3434;font:400 13px Manrope,Arial,sans-serif} #yz-time-concept .result-layout button{min-height:48px} @media(max-width:650px){.yz-training-overlay{max-height:100dvh;border-radius:0;width:100%;height:100dvh;padding-bottom:env(safe-area-inset-bottom)}#yz-time-concept{border-radius:0}#yz-time-concept .header{padding-top:max(18px,env(safe-area-inset-top))}} /* Visible, stateful toolbar labels on desktop and mobile. */ #yz-time-concept .toolbar{flex-wrap:wrap;gap:8px} #yz-time-concept .toolbar button{display:inline-flex;align-items:center;justify-content:center;min-width:88px;min-height:44px;padding:10px 14px;font:600 13px Manrope,Arial,sans-serif;white-space:nowrap} @media(max-width:650px){#yz-time-concept .header>.toolbar{width:100%;display:grid;grid-template-columns:1fr 1.35fr 1fr}#yz-time-concept .toolbar button{min-width:0;padding:10px 6px;font-size:12px}} /* Self-contained controls: visible SVGs plus labels, independent of the app icon registry. */ #yz-time-concept{--sub:#bdbdbd;--panel:#191919} #yz-time-concept button{font-family:Manrope,Arial,sans-serif;color:#fff;border-color:#ffffff66;transition:background-color .16s,border-color .16s} #yz-time-concept input{font-family:Manrope,Arial,sans-serif;background:#242424;color:#fff;border-color:#6d6d6d;accent-color:#59bfc1} #yz-time-concept label,#yz-time-concept .preset span{color:#c9c9c9} #yz-time-concept .tabs{background:#222} #yz-time-concept .tabs button[aria-pressed=true],#yz-time-concept .controls .start{background:#59bfc1;color:#101010} #yz-time-concept .controls{display:grid;grid-template-columns:94px minmax(0,1fr) 94px;gap:10px;max-width:470px} #yz-time-concept .controls .secondary{width:100%;min-height:72px;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;padding:10px 4px;color:#fff;background:#171717e8;border:1px solid #ffffff80} #yz-time-concept .control-label{font:600 11px Manrope,Arial,sans-serif;line-height:1.3;white-space:nowrap} #yz-time-concept .controls .start{min-height:72px;padding:12px 10px;line-height:1.4} #yz-time-concept .yz-control-icon{display:block;width:24px;height:24px;flex-shrink:0;stroke:currentColor;fill:none;visibility:visible;opacity:1} #yz-time-concept button:disabled{opacity:1;color:#c3c3c3;border-color:#ffffff40;background:#242424cc;cursor:not-allowed} #yz-time-concept button:not(:disabled):hover{border-color:#59bfc1} #yz-time-concept button:not(:disabled):active{background-color:#303030} #yz-time-concept .controls .start:not(:disabled):active{background-color:#83d1d2} #yz-time-concept[data-mode=breath] .controls{grid-template-columns:94px minmax(0,1fr)} #yz-time-concept .result-heading>button,#yz-time-concept .share-action-grid>button{display:flex;align-items:center;justify-content:center;gap:8px} @media(max-width:650px){#yz-time-concept .controls{grid-template-columns:78px minmax(0,1fr) 78px;gap:8px}#yz-time-concept .control-label{font-size:10px}#yz-time-concept .controls .start{font-size:13px}#yz-time-concept[data-mode=breath] .controls{grid-template-columns:78px minmax(0,1fr)}} /* Shared control system: one width, one surface, one type scale. */ #yz-time-concept{--control-width:470px;--control-radius:14px;--control-border:#ffffff30;--control-surface:rgba(20,20,20,.9)} #yz-time-concept[data-mode] .main .tabs,#yz-time-concept[data-mode] .main .next,#yz-time-concept .training-console{width:100%;max-width:var(--control-width);margin-left:auto;margin-right:auto;border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-surface);box-shadow:none} #yz-time-concept[data-mode] .main .tabs{padding:4px;gap:4px} #yz-time-concept[data-mode] .main .tabs button{border-radius:10px;min-height:44px;font:600 12px Manrope,Arial,sans-serif} #yz-time-concept[data-mode] .main .next{padding:16px 20px} #yz-time-concept .training-console{padding:22px 20px 20px;margin-top:20px} #yz-time-concept[data-mode] .main .controls{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;align-items:start;width:100%;max-width:none;padding:0;margin:0 0 20px;background:none;border:0;border-radius:0;box-shadow:none} #yz-time-concept[data-mode] .main .controls button.start,#yz-time-concept[data-mode] .main .controls button.secondary{display:grid;grid-template-rows:80px 32px;justify-items:center;align-items:center;align-content:start;gap:6px;width:100%;min-width:0;min-height:118px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;box-shadow:none;transform:none} #yz-time-concept #yz-reset{grid-column:1;grid-row:1} #yz-time-concept #yz-start{grid-column:2;grid-row:1} #yz-time-concept #yz-finish{grid-column:3;grid-row:1} #yz-time-concept .controls .media-key{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#282828;border:1px solid #ffffff50;box-shadow:inset 0 1px 0 #ffffff12;transition:transform .15s,border-color .15s} #yz-time-concept .controls .start .media-key{width:76px;height:76px;background:#59bfc1;border-color:#59bfc1;color:#101010;box-shadow:none} #yz-time-concept .controls .start .yz-control-icon{width:30px;height:30px;stroke:#101010} #yz-time-concept .controls .play-glyph path{fill:currentColor;stroke:none} #yz-time-concept .controls .pause-glyph path{stroke-width:4} #yz-time-concept .controls .pause-glyph,#yz-time-concept .controls [data-playing=true] .play-glyph{display:none} #yz-time-concept .controls [data-playing=true] .pause-glyph{display:block} #yz-time-concept .controls .control-label{font:600 11px/1.4 Manrope,Arial,sans-serif;color:#eee;text-align:center;white-space:normal;align-self:start} #yz-time-concept .controls .start .control-label{font-weight:700;color:#fff} #yz-time-concept .controls button:disabled .media-key{background:#202020;border-color:#ffffff25;color:#aaa} #yz-time-concept .controls button:disabled .control-label{color:#aaa} #yz-time-concept .controls button:not(:disabled):hover .media-key{border-color:#59bfc1} #yz-time-concept .controls button:not(:disabled):active .media-key{transform:scale(.95)} #yz-time-concept .controls button:focus-visible{outline:none} #yz-time-concept .controls button:focus-visible .media-key{outline:3px solid #fff;outline-offset:4px} #yz-time-concept .console-actions{display:grid;grid-template-columns:1fr;gap:12px;padding-top:18px;border-top:1px solid #ffffff20} #yz-time-concept[data-mode=breath] .console-actions{grid-template-columns:1fr 1fr} #yz-time-concept .training-console .breath-actions,#yz-time-concept .training-console .finish-row{width:100%;max-width:none;margin:0;display:block} #yz-time-concept[data-mode] .main .training-console .console-actions button,#yz-time-concept .training-console #yz-result-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;height:100%;padding:12px;border:1px solid #ffffff40;border-radius:10px;background:#242424;color:#fff;box-shadow:none;font:600 12px/1.45 Manrope,Arial,sans-serif} #yz-time-concept[data-mode] .main .training-console #yz-retention-start{border-color:#59bfc180;background:#59bfc110;color:#fff} #yz-time-concept[data-mode] .main .training-console #yz-retention-start:before{display:none} #yz-time-concept[data-mode] .main .training-console #yz-retention-start[data-measuring=true]{background:#59bfc1;color:#101010;border-color:#59bfc1} #yz-time-concept[data-mode] .main .training-console button:disabled{color:#a3a3a3;cursor:not-allowed} #yz-time-concept .training-console #yz-result-open{margin-top:12px} #yz-time-concept .training-console .progress-caption{max-width:none;margin:22px 0 10px;font:500 11px Manrope,Arial,sans-serif} #yz-time-concept .training-console .session-progress{max-width:none;margin:0 0 10px;height:6px} #yz-time-concept .training-console .bottomline{max-width:none;margin:0;font:400 11px Manrope,Arial,sans-serif;color:#bdbdbd} #yz-time-concept .training-console .retention-hint{margin:12px 0 0;font-size:11px;text-align:center} #yz-time-concept .preset,#yz-time-concept input,#yz-time-concept .toolbar button{border-radius:10px;box-shadow:none} #yz-time-concept .preset{background:#202020;border:1px solid #ffffff35;min-height:64px} #yz-time-concept .preset[aria-pressed=true]{background:#59bfc118;border-color:#59bfc1;box-shadow:none} #yz-time-concept input:focus{border-color:#59bfc1;outline:2px solid #59bfc1;outline-offset:2px} @media(max-width:650px){#yz-time-concept .training-console{padding:18px 12px 16px}#yz-time-concept[data-mode] .main .controls{grid-template-columns:1fr 1.4fr 1fr;gap:4px}#yz-time-concept .controls .control-label{font-size:10px}#yz-time-concept .training-console .console-actions{gap:10px}#yz-time-concept[data-mode] .main .training-console .console-actions button{font-size:11px;padding:10px 6px}#yz-time-concept[data-mode] .main .tabs button{font-size:11px}} @media(prefers-reduced-motion:reduce){#yz-time-concept .controls .media-key{transition:none}} /* One visual surface with a consistent transport row in every mode. */ #yz-time-concept[data-mode] .main .training-console .next{width:100%;max-width:none;margin:0 0 18px;padding:0 0 16px;border:0;border-bottom:1px solid #ffffff20;border-radius:0;background:none;box-shadow:none} #yz-time-concept[data-mode] .training-console .console-actions{grid-template-columns:1fr} #yz-time-concept .console-secondary .media-key{display:contents} #yz-time-concept .console-secondary .yz-control-icon{width:18px;height:18px} #yz-time-concept[data-mode] .main .training-console #yz-retention-start{background:#242424;color:#bce7e8;border-color:#ffffff30} #yz-time-concept .training-console .next small{font-size:10px;letter-spacing:1px;font-weight:500} #yz-time-concept .training-console .next span,#yz-time-concept .training-console .next b{font-size:13px} /* Transparent surfaces preserve the photography without expensive animated blur. */ #yz-time-concept{--control-surface:rgba(15,15,15,.52);--control-border:rgba(255,255,255,.22)} #yz-time-concept[data-mode] .main .training-console{background:linear-gradient(150deg,rgba(28,28,28,.48),rgba(9,9,9,.62));border-color:#ffffff38} #yz-time-concept .controls .media-key{background:rgba(255,255,255,.07);border-color:#ffffff60;box-shadow:none} #yz-time-concept .controls button:disabled .media-key{background:rgba(255,255,255,.035);border-color:#ffffff30} #yz-time-concept[data-mode] .main .training-console .console-actions button,#yz-time-concept .training-console #yz-result-open{background:rgba(255,255,255,.045);border-color:#ffffff38} #yz-time-concept[data-mode] .main .training-console #yz-retention-start{background:rgba(89,191,193,.055);border-color:#ffffff38;color:#d0eeee} #yz-time-concept .preset,#yz-time-concept input{background:rgba(255,255,255,.055)} @media(prefers-reduced-transparency:reduce){#yz-time-concept{--control-surface:#171717}#yz-time-concept[data-mode] .main .training-console{background:#171717}#yz-time-concept .preset,#yz-time-concept input{background:#242424}} #yz-time-concept[data-mode] .main .training-console .controls #yz-finish{background:transparent;border:0;box-shadow:none;color:#fff} #yz-time-concept[data-mode] .main .training-console #yz-retention-start{border-width:1px;border-radius:10px;min-height:48px;padding:12px;box-shadow:none;font:600 12px/1.45 Manrope,Arial,sans-serif} /* Breath editor: yourZone turquoise, dark text and exactly aligned inputs. */ #yz-time-concept .fields{align-items:stretch} #yz-time-concept .fields>label{display:flex;flex-direction:column;justify-content:flex-end;gap:8px} #yz-time-concept .fields input[type=number]{height:48px;min-height:48px;max-height:48px;flex:0 0 48px;line-height:24px;margin:0} #yz-time-concept[data-mode=breath] aside{background:#59bfc1;color:#111;border-color:#1112;color-scheme:light} #yz-time-concept[data-mode=breath] aside h2,#yz-time-concept[data-mode=breath] aside .eyebrow,#yz-time-concept[data-mode=breath] aside label,#yz-time-concept[data-mode=breath] aside .aside-foot,#yz-time-concept[data-mode=breath] aside .breath-hint{color:#111} #yz-time-concept[data-mode=breath] aside .preset{background:#ffffff38;border:1px solid #1115;color:#111;box-shadow:none} #yz-time-concept[data-mode=breath] aside .preset span{color:#202020} #yz-time-concept[data-mode=breath] aside .preset[aria-pressed=true]{background:#111;color:#fff;border-color:#111} #yz-time-concept[data-mode=breath] aside .preset[aria-pressed=true] span{color:#eee} #yz-time-concept[data-mode=breath] aside input{background:#ffffffb8;color:#111;border-color:#1115;box-shadow:none} #yz-time-concept[data-mode=breath] aside input:focus-visible,#yz-time-concept[data-mode=breath] aside button:focus-visible{outline:2px solid #111;outline-offset:3px} #yz-time-concept[data-mode=breath] aside input[type=checkbox]{accent-color:#111} #yz-time-concept[data-mode=breath] aside button:disabled,#yz-time-concept[data-mode=breath] aside input:disabled{opacity:1;-webkit-text-fill-color:currentColor} #yz-time-concept[data-mode=breath] aside .preset:disabled{color:#111} #yz-time-concept[data-mode=breath] aside .preset[aria-pressed=true]:disabled{color:#fff} /* Explicit contrast on the light result surface, including the close action. */ #yz-time-concept #yz-result button{color:#171717;border-color:#17171755;background:#fff;font-family:Manrope,Arial,sans-serif} #yz-time-concept #yz-result #yz-result-close{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;color:#171717;background:#fff;border:1px solid #17171755;border-radius:10px} #yz-time-concept #yz-result button svg{color:inherit;stroke:currentColor} #yz-time-concept #yz-result #yz-share-file{background:#59bfc1;color:#111;border-color:#59bfc1} #yz-time-concept #yz-result button:focus-visible{outline:3px solid #171717;outline-offset:3px} #yz-time-concept #yz-result button:not(:disabled):hover{border-color:#171717;background:#eff5f5} #yz-time-concept #yz-result #yz-share-file:not(:disabled):hover{background:#83d1d2} #yz-time-concept .audio-status{font:500 12px/1.5 Manrope,Arial,sans-serif;color:#fff;background:#0005;border:1px solid #59bfc180;border-radius:10px;padding:12px;margin:0 0 16px} /* Explicit SVG replaces the platform/Bluefy disclosure marker. */ #yz-portal .yz-training-row summary,.yz-training-history .yz-training-row summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer} #yz-portal .yz-training-row summary::marker,.yz-training-history .yz-training-row summary::marker{content:''} #yz-portal .yz-training-row summary::-webkit-details-marker,.yz-training-history .yz-training-row summary::-webkit-details-marker{display:none} #yz-portal .yz-training-row summary::before,#yz-portal .yz-training-row summary::after,.yz-training-history .yz-training-row summary::before,.yz-training-history .yz-training-row summary::after{content:none!important;display:none!important} #yz-portal .yz-training-row summary svg,.yz-training-history .yz-training-row summary svg{width:20px;height:20px;flex:0 0 20px;position:static;transform:none;color:#329698} #yz-portal .yz-training-row details[open]>summary svg,.yz-training-history .yz-training-row details[open]>summary svg{transform:rotate(90deg)} #yz-portal .yz-training-row summary,.yz-training-history .yz-training-row summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer} #yz-portal .yz-training-row summary::marker,.yz-training-history .yz-training-row summary::marker{content:''} #yz-portal .yz-training-row summary::-webkit-details-marker,.yz-training-history .yz-training-row summary::-webkit-details-marker{display:none} #yz-portal .yz-training-row summary::before,#yz-portal .yz-training-row summary::after,.yz-training-history .yz-training-row summary::before,.yz-training-history .yz-training-row summary::after{content:none!important;display:none!important} #yz-portal .yz-training-row summary svg,.yz-training-history .yz-training-row summary svg{width:20px;height:20px;flex:0 0 20px;position:static;transform:none;color:#329698} #yz-portal .yz-training-row details[open]>summary svg,.yz-training-history .yz-training-row details[open]>summary svg{transform:rotate(90deg)}