:root{color-scheme:dark; --bg:#05070F; --card:#0C1120; --line:rgba(231,234,242,.09); --line-2:rgba(231,234,242,.05); --ink:#EEF0F6; --muted:#A3AABA; --faint:#6B7384; --primary:#6E95FF; --primary-soft:rgba(110,149,255,.12)}
html{background:#05070F}
body{background:transparent}
.wm-light{display:none!important}
.wm-dark{display:inline!important}
html{scrollbar-gutter:stable}
/* TAZQ'lı bir gün: sayfa aşağı indikçe sabahtan geceye akar; her bölümün üst rengi öncekinin alt rengidir. */
.sky{position:fixed; top:0; left:0; right:0; bottom:0; height:100vh; height:100lvh; z-index:-1; background:#05070F}
.sky i,.sky b{position:absolute; inset:0; opacity:0; will-change:opacity}
.sky b{background-image:radial-gradient(1px 1px at 24px 38px,rgba(235,240,255,0.9),transparent),radial-gradient(1.3px 1.3px at 92px 142px,rgba(235,240,255,0.7),transparent),radial-gradient(1px 1px at 170px 66px,rgba(235,240,255,0.6),transparent),radial-gradient(1.5px 1.5px at 214px 208px,rgba(235,240,255,0.85),transparent),radial-gradient(1px 1px at 58px 232px,rgba(235,240,255,0.5),transparent),radial-gradient(1px 1px at 130px 12px,rgba(235,240,255,0.75),transparent),radial-gradient(1px 1px at 248px 118px,rgba(235,240,255,0.55),transparent),radial-gradient(1.2px 1.2px at 12px 150px,rgba(235,240,255,0.6),transparent),radial-gradient(1px 1px at 60px 90px,rgba(200,215,255,0.6),transparent),radial-gradient(1.4px 1.4px at 300px 40px,rgba(200,215,255,0.8),transparent),radial-gradient(1px 1px at 210px 300px,rgba(200,215,255,0.5),transparent),radial-gradient(1.2px 1.2px at 370px 240px,rgba(200,215,255,0.7),transparent),radial-gradient(1px 1px at 120px 380px,rgba(200,215,255,0.55),transparent); background-size:260px 260px,410px 410px}
.sky::after{content:""; position:absolute; inset:0; opacity:.028; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero{background:transparent}
.hero::before,.hero::after{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 200px),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - 200px),transparent); animation:none}
.hero-fade{display:none}
.day{--w:1060px; position:relative; color:#fff; overflow-x:clip; overflow-y:visible}
.day-in{width:min(var(--w),100% - 40px); margin-inline:auto; position:relative}
.day h2{font-size:clamp(30px,4.2vw,56px); line-height:.98; letter-spacing:-.04em; font-weight:800; margin:0; text-wrap:balance}
.day p{margin:0}
.clock{display:inline-flex; align-items:center; gap:9px; font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; margin-bottom:22px}
.clock i{width:9px; height:9px; border-radius:50%; background:currentColor}
.lead2{font-size:clamp(16px,1.35vw,18px); line-height:1.55; font-weight:500; max-width:34em; margin-top:22px!important; text-wrap:pretty}

.phone{text-align:left; will-change:transform}

/* 07:30 */
.d-dawn{padding:110px 0 100px}
.d-dawn .lead2{color:#CFC6CC}
.d-dawn .clock{color:#E6B58E}
.say{margin-top:56px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:44px; align-items:start}
.say-text{font-size:clamp(21px,2.5vw,32px); line-height:1.32; font-weight:600; letter-spacing:-.02em; min-height:5.3em; color:#E7E6EE}
.say-text em{font-style:normal; border-radius:.2em; padding:0 .12em; transition:background .35s,color .35s}
.say-text em.hit{color:#F2CFA2; background:rgba(242,190,130,.14)}
.say-text .caret{display:inline-block; width:3px; height:.9em; background:#fff; vertical-align:-.08em; margin-left:2px; animation:blink 1s steps(1) infinite}
.say-out{display:flex; flex-direction:column; gap:10px}
.say-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:rgba(255,255,255,.055); color:#E7E9F0; border-radius:16px; padding:13px 15px; opacity:0; transform:translateY(22px) scale(.97); transition:opacity .5s,transform .7s cubic-bezier(.2,1.2,.3,1)}
.say-row.in{opacity:1; transform:none}
.say-row u{width:18px; height:18px; border-radius:50%; border:1.5px solid #6F7689; flex:none}
.say-row b{font-size:15px; font-weight:600; flex:1; min-width:110px}
.say-row span{font-size:12px; font-weight:700; border-radius:99px; padding:4px 10px}

/* 09:41 */
.d-day{color:#E7E9F0; padding:100px 0}
.d-day .clock{color:#E6B58E}
.d-day .lead2{color:#AEB6C6}
.at-glance{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center}
.bloom{width:min(100%,280px); aspect-ratio:1; display:block; margin-inline:auto; overflow:visible}
.bloom circle{fill:#2A3146; transition:fill .45s,transform .6s cubic-bezier(.2,1.5,.4,1); transform-box:fill-box; transform-origin:center}
.bloom circle.on{fill:#7FA0E8; transform:scale(1.06)}
.bigline{font-size:clamp(21px,2.4vw,31px); line-height:1.42; letter-spacing:-.02em; font-weight:700}
.bigline mark{color:#A9C3F5; background:rgba(127,160,232,.12); border-radius:.22em; padding:0 .16em; display:inline-block}
.mom{display:flex; align-items:center; gap:14px; margin-top:26px}
.mom .o{width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 34% 30%,#C9D6F5,#6E8FD8 52%,#2B4FA8); animation:orb 3.4s ease-in-out infinite}
.mom strong{display:block; font:600 28px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:#A9C3F5; font-variant-numeric:tabular-nums}
.mom small{font-size:11px; font-weight:700; letter-spacing:.12em; color:#8E98AC}
.mom .wk{margin-left:auto; display:flex; align-items:flex-end; gap:6px; height:40px}
.mom .wk i{width:12px; border-radius:4px; background:#39415A; height:calc(var(--h)*100%); transform-origin:bottom; transform:scaleY(.06); transition:transform .9s cubic-bezier(.2,1,.3,1) calc(var(--n)*70ms)}
.mom .wk i:last-child{background:#7FA0E8}
.seen .mom .wk i{transform:none}
.zen{margin-top:84px; padding:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center}
.zen h3{font-size:clamp(22px,2.1vw,30px); letter-spacing:-.025em; line-height:1.12; font-weight:800; margin:0 0 12px}
.zen p{font-size:15.5px; line-height:1.55; color:#AEB6C6}
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; height:205px; align-items:end}
.wd{display:flex; flex-direction:column-reverse; gap:4px; height:100%; position:relative; padding-bottom:28px}
.wd>small{position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:11.5px; font-weight:600; color:#8E98AC}
.wd b{height:15px; border-radius:5px; background:#5F7FC8; transition:transform .85s cubic-bezier(.3,1.2,.3,1),opacity .4s}
.wd b.over{background:#C98460}

/* 13:00 */
.d-noon{color:#E7E9F0; padding:100px 0}
.d-noon .clock{color:#8FBBDD}
.goals{margin-top:44px; display:grid; grid-template-columns:190px minmax(0,1fr); gap:30px; align-items:stretch}
.g-tabs{display:flex; flex-direction:column; gap:4px}
.g-tabs button{all:unset; box-sizing:border-box; cursor:pointer; padding:11px 15px; border-radius:12px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:#AAB5C8; transition:background .25s,color .25s}
.g-tabs button:hover{background:rgba(255,255,255,.05)}
.g-tabs button:focus-visible{outline:2px solid #A9C3F5; outline-offset:2px}
.g-tabs button.on{background:rgba(127,160,232,.15); color:#F0F2F7}
.g-stage{position:relative; border-radius:24px; background:#1A2233; min-height:330px; overflow:hidden}
.g-s{position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); opacity:0; visibility:hidden; transition:opacity .45s,visibility .45s}
.g-s.on{opacity:1; visibility:visible}
.g-t{padding:32px 10px 28px 32px; display:flex; flex-direction:column}
.g-t strong{font:300 60px/1 "Plus Jakarta Sans",sans-serif; letter-spacing:-.05em}
.g-t small{font-size:13px; font-weight:600; color:#96A2B8; margin-top:6px}
.g-t p{font-size:15px; line-height:1.5; color:#BAC3D3; margin-top:14px}
.g-t .today{margin-top:auto; padding-top:16px; display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600}
.g-t .today i{width:18px; height:18px; border-radius:50%; border:2px solid var(--g); flex:none}
.g-art{background:var(--bgg); display:flex; align-items:center; justify-content:center; padding:26px}
.g-art svg{width:100%; max-width:230px; height:auto; overflow:visible}
.draw{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1) calc(var(--n,0)*.13s)}
.g-s.on .draw{stroke-dashoffset:0}
.grow{transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; transition:transform 1.3s cubic-bezier(.2,1,.3,1) calc(var(--n,0)*.1s)}
.g-s.on .grow{transform:none}
.lit{opacity:.14; transition:opacity .4s calc(var(--n,0)*.07s)}
.g-s.on .lit{opacity:1}

/* 18:00 */
.d-dusk{--acc:#3B6FE0; --acc2:#86AEFF; padding:100px 0 120px}
.d-dusk .clock{color:#DDB0A2}
.d-dusk .lead2{color:#CFC8DA}
.plats{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px; font-size:14px; font-weight:600; color:#E7E6EE}
.plats span{display:inline-flex; gap:7px; align-items:center}
.plats em{font-style:normal; font-size:11px; font-weight:600; padding:2px 7px; border-radius:99px; background:rgba(255,255,255,.1); color:#BDB6CA}
.sw{display:flex; gap:6px; margin-top:22px; align-items:center; flex-wrap:wrap}
.sw label{font-size:14px; font-weight:700; margin-right:4px}
.sw button{all:unset; cursor:pointer; position:relative; width:28px; height:28px; border-radius:50%; background:var(--s); display:flex; align-items:center; justify-content:center; margin:5px; transition:transform .2s}
.sw button::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid transparent; transition:border-color .2s}
.sw button svg{opacity:0; transition:opacity .2s}
.sw button.on svg{opacity:1}
.sw button.on::after{border-color:var(--s)}
.sw button:hover{transform:scale(1.1)}
.sw button:focus-visible{outline:2px solid #fff; outline-offset:2px}
.devices{position:relative; margin-top:44px; display:flex; align-items:center; justify-content:space-between}
.tablet{position:relative; flex:1 1 0; min-width:0; max-width:780px; aspect-ratio:1.36; border-radius:3.4% / 4.6%; padding:1.5%; background:#08080B; box-shadow:0 0 0 1px #4A4A52,0 0 0 2.5px #1B1B20,0 44px 70px -36px rgba(0,0,0,.9)}
.tablet::before{content:""; position:absolute; top:.62%; left:50%; width:.8%; aspect-ratio:1; margin-left:-.4%; border-radius:50%; background:#1D2230; box-shadow:inset 0 0 0 1px #2B3142}
.t-scr{position:relative; height:100%; border-radius:2.2% / 3%; overflow:hidden; container-type:inline-size; background:#0B1020; display:flex; flex-direction:column}
.t-wall{position:absolute; inset:-14%; background:url(/images/focus-aurora.webp) 50% 40%/cover; filter:blur(26px) saturate(.8) brightness(.5)}
.t-bar{position:relative; display:flex; justify-content:space-between; align-items:center; padding:1.2cqw 2.6cqw .4cqw; font-size:1.55cqw; font-weight:600; color:#E7E9F0}
.t-bar svg{height:1.5cqw; width:auto; margin-left:.6cqw}
.t-view{position:relative; flex:1; min-height:0; overflow:hidden}
.t-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:19.6cqw; gap:1.9cqw; padding:1.4cqw 3.4cqw 3.4cqw; will-change:transform}
.wg{border-radius:2.7cqw; padding:1.75cqw 1.9cqw; background:linear-gradient(160deg,color-mix(in srgb,var(--acc2) 16%,#1E2233),#191B27); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); color:#EDEFF4; display:flex; flex-direction:column; min-width:0; transition:background .5s}
.wg.w2{grid-column:span 2} .wg.tall{grid-row:span 2}
.wg .h{display:flex; justify-content:space-between; align-items:flex-start; font-size:1.12cqw; font-weight:700; letter-spacing:.09em; color:#9CA5B7}
.wg .h img{height:1.55cqw; width:auto; opacity:.82}
.wg .h span{position:relative; padding-bottom:.55cqw}
.wg .h span::after{content:""; position:absolute; left:0; bottom:0; width:2.2cqw; height:.22cqw; border-radius:1px; background:#C98460}
.wg .mn{display:flex; align-items:center; gap:1.4cqw; margin-top:auto}
.wg .mn>div{flex:1; min-width:0}
.wg .why{font-size:1.12cqw; font-weight:700; letter-spacing:.07em; color:var(--acc2); transition:color .4s}
.wg .tt{font-size:2.2cqw; line-height:1.18; font-weight:600; letter-spacing:-.015em; margin-top:.3cqw}
.wg .mt{font-size:1.32cqw; color:#A4ACBC; margin-top:.2cqw}
.wg .ck{width:2.9cqw; height:2.9cqw; border-radius:50%; border:.26cqw solid var(--acc2); flex:none; transition:border-color .4s}
.wg .seg{display:flex; gap:.5cqw; margin-top:1.1cqw}
.wg .seg i{flex:1; height:.5cqw; border-radius:.3cqw; background:rgba(255,255,255,.12); transition:background .4s}
.wg .seg i.d{background:var(--acc2)}
.wg .big{font-weight:200; font-size:6.6cqw; line-height:1; letter-spacing:-.04em; margin-top:auto}
.wg .big.s{font-size:3.9cqw; font-weight:300}
.wg .rw{display:flex; gap:.9cqw; align-items:center; font-size:1.5cqw; font-weight:500; margin-top:1.05cqw; color:#D8DCE5}
.wg .rw i{width:1.5cqw; height:1.5cqw; border-radius:50%; border:.17cqw solid #7A8296; flex:none}
.wg .sts{display:grid; grid-template-columns:repeat(3,1fr); gap:.8cqw; margin-top:auto}
.wg .sts div{background:rgba(255,255,255,.055); border-radius:1.2cqw; padding:.8cqw .9cqw; font-size:.98cqw; font-weight:700; letter-spacing:.05em; color:#9CA5B7}
.wg .sts b{display:block; font:500 1.95cqw/1.15 ui-monospace,SFMono-Regular,Menlo,monospace; color:#EDEFF4; letter-spacing:-.02em; margin-top:.3cqw}
.watch{--ww:clamp(132px,16vw,178px); position:relative; flex:none; width:var(--ww); aspect-ratio:41/48.6; z-index:2; margin:calc(var(--ww)*.72) 0 calc(var(--ww)*.72) clamp(30px,5vw,68px)}
.band{position:absolute; left:13%; right:13%; height:64%; background:linear-gradient(90deg,color-mix(in srgb,var(--acc2) 12%,#17181F),color-mix(in srgb,var(--acc2) 26%,#2C2D38) 16%,color-mix(in srgb,var(--acc2) 34%,#3A3B47) 50%,color-mix(in srgb,var(--acc2) 26%,#2C2D38) 84%,color-mix(in srgb,var(--acc2) 12%,#17181F)); box-shadow:inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(0,0,0,.4); transition:background .5s}
.band.u{bottom:92%; border-radius:14% 14% 0 0 / 7% 7% 0 0}
.band.d{top:92%; border-radius:0 0 14% 14% / 0 0 7% 7%}
.band::after{content:""; position:absolute; left:0; right:0; height:13%; background:linear-gradient(var(--bd,180deg),rgba(0,0,0,.6),transparent)}
.band.u::after{bottom:0; --bd:0deg}
.band.d::after{top:0}
.band.d::before{content:""; position:absolute; left:50%; top:60%; width:7%; aspect-ratio:1; margin-left:-3.5%; border-radius:50%; background:rgba(0,0,0,.5); box-shadow:0 calc(var(--ww)*.15) 0 rgba(0,0,0,.5)}
.w-case{position:absolute; inset:0; border-radius:29% / 24.5%; padding:2.7%; background:linear-gradient(142deg,#9A9AA3 0,#4A4A52 13%,#1F1F25 42%,#17171C 58%,#3C3C44 86%,#85858E 100%); box-shadow:inset 0 0 0 .75px rgba(255,255,255,.34),inset 0 -1px 2px rgba(0,0,0,.7),0 24px 34px -16px rgba(0,0,0,.9)}
.w-crown{position:absolute; right:-3%; top:25%; width:3.6%; height:15.5%; border-radius:0 34% 34% 0 / 0 9% 9% 0; background:repeating-linear-gradient(180deg,#83838C 0 1px,#2B2B32 1px 2px); box-shadow:inset -1px 0 1px rgba(0,0,0,.6)}
.w-side{position:absolute; right:-1.3%; top:53%; width:1.6%; height:23%; border-radius:0 40% 40% 0 / 0 8% 8% 0; background:linear-gradient(90deg,#34343B,#62626B)}
.w-scr{position:relative; height:100%; border-radius:27.5% / 23%; overflow:hidden; container-type:inline-size; background:#000; color:#fff; box-shadow:inset 0 0 0 1.5px #0B0B0D}
.w-scr::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.075),transparent 34%); pointer-events:none}
.w-pages{height:100%; will-change:transform}
.w-in{height:100%; box-sizing:border-box; display:flex; flex-direction:column; padding:8.5cqw 9cqw 9.5cqw; background:#000}
.w-top{display:flex; justify-content:space-between; align-items:baseline; font-size:7cqw; font-weight:600; color:#fff}
.w-top span:first-child{font-size:6.6cqw; font-weight:600; letter-spacing:0; color:var(--acc2); transition:color .4s}
.w-pl{display:flex; align-items:center; gap:3cqw; font:500 5.2cqw/1 ui-monospace,SFMono-Regular,Menlo,monospace; margin-top:6cqw; color:#C7CCD6}
.w-pl .sg{flex:1; display:flex; gap:1.6cqw}
.w-pl .sg i{flex:1; height:1.6cqw; border-radius:1cqw; background:rgba(255,255,255,.16); transition:background .4s}
.w-pl .sg i.d{background:var(--acc2)}
.w-card{margin-top:auto; border-radius:11cqw; padding:6.4cqw 7cqw; background:#1C1C1F}
.w-card .y{font-size:4.6cqw; font-weight:600; letter-spacing:.02em; color:var(--acc2)}
.w-card .t{font-size:8.2cqw; font-weight:600; line-height:1.14; letter-spacing:-.012em; margin-top:1.4cqw}
.w-btn{margin-top:3.6cqw; text-align:center; background:color-mix(in srgb,var(--acc2) 24%,#1C1C1F); color:var(--acc2); border-radius:99px; padding:4.4cqw 0; font-size:7cqw; font-weight:600; transition:background .4s,color .4s}
.w-ringb{position:relative; width:62cqw; height:62cqw; margin:auto}
.w-ringb svg{width:100%; height:100%; display:block; transform:rotate(-90deg)}
.w-ringb circle{fill:none; stroke-width:7; stroke-linecap:round}
.w-ringb .tr{stroke:#26262B}
.w-ringb .pr{stroke:var(--acc2); stroke-dasharray:264; stroke-dashoffset:158; transition:stroke .4s}
.w-ft{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:300; font-size:16cqw; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.w-sub{display:none}
.w-pages .w-in:nth-child(2) .w-btn{margin-top:0}
.w-hs{display:flex; flex-direction:column; gap:3cqw; margin-top:auto}
.w-h{display:flex; align-items:center; gap:4.4cqw; padding:5.6cqw 6.4cqw; border-radius:10cqw; background:#1C1C1F; font-size:7.6cqw; font-weight:500}
.w-h i{position:relative; width:7.4cqw; height:7.4cqw; border-radius:50%; border:.75cqw solid var(--acc2); flex:none; box-sizing:border-box; transition:background .4s,border-color .4s}
.w-h.d i{background:var(--acc2)}
.w-h.d span{color:#8E8E93}

.sounds button.play::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:7px; vertical-align:1px; animation:breath 3.4s ease-in-out infinite}
.s-hint{font-size:13px; color:#AEB8C8; margin-top:12px!important}
.route{padding:10px 12px; border:0; border-radius:18px; display:flex; flex-direction:column; gap:6px}
.rt{display:flex; align-items:center; gap:8px}
.rt div{flex:1; min-width:0}
.rt small{display:block; font-size:8px; font-weight:800; letter-spacing:.07em; color:#2B5BCE}
.rt span{font-size:12px; font-weight:700; color:#1C1F2A}
.rt .rt-go{font-size:9.5px; font-weight:800; color:#fff; background:#2B5BCE; border-radius:99px; padding:5px 10px}
.rt-seg{display:flex; gap:3px}
.rt-seg i{flex:1; height:4px; border-radius:2px; background:#E3E6ED}
.rt-seg i.d{background:#2B5BCE}

/* 22:00 */
.d-night{min-height:86vh; display:flex; flex-direction:column; justify-content:center; padding:100px 0 110px; text-align:center}
#aur{position:absolute; inset:-12% 0 -6%; width:100%; height:118%}
.ridge{position:absolute; left:0; right:0; bottom:-2%; width:100%; height:30%; display:block; opacity:.9; -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%); mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
.d-night .day-in{z-index:2}
.d-night .clock{color:#8CCFB3}
.d-night .lead2{margin-inline:auto; color:#DDE4EE; text-shadow:0 1px 16px rgba(2,6,20,.8)}
.d-night h2{text-shadow:0 2px 34px rgba(2,6,20,.55)}
.fclock{font-weight:200; font-size:clamp(68px,10.5vw,132px); line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; margin:22px 0 14px; color:#EDF0F6; text-shadow:0 6px 50px rgba(3,10,30,.55)}
.sounds{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.sounds button{all:unset; cursor:pointer; padding:7px 14px; border-radius:99px; font-size:13.5px; font-weight:600; background:rgba(8,14,30,.74); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); transition:background .25s,color .25s}
.sounds button:hover{background:rgba(255,255,255,.18)}
.sounds button:focus-visible{outline:2px solid #fff; outline-offset:2px}
.sounds button.on{background:#8CCFB3; color:#08130E}

/* 23:30 */
.d-end{padding:96px 0 30px}
.d-end .clock{color:#A9B8E8}
.d-end .lead2{color:#B9C1D2}
.skyw{display:grid; grid-template-columns:repeat(7,1fr); gap:10px; height:190px; margin-top:38px; border-bottom:1px solid rgba(231,234,242,.16); position:relative}
.skyc{position:relative}
.skyc small{position:absolute; bottom:-30px; left:0; right:0; text-align:center; font-size:13px; font-weight:700; color:#99A3B8}
.sk{position:absolute; width:var(--z); height:var(--z); left:var(--x); bottom:var(--y); border-radius:50%; background:#E9EEFF; box-shadow:0 0 calc(var(--z)*2) rgba(190,210,255,.8); opacity:0; transform:scale(.2); transition:opacity .35s,transform .5s cubic-bezier(.2,1.6,.4,1)}
.sk.on{opacity:1; transform:none}
.wtot{display:flex; align-items:baseline; gap:10px; margin-top:54px}
.wtot strong{font-size:clamp(34px,4.2vw,52px); font-weight:800; letter-spacing:-.04em; line-height:1}
.wtot span{font-size:16px; color:#B9C1D2; font-weight:600}
.quiet{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:58px; padding-top:34px; border-top:1px solid rgba(231,234,242,.12)}
.quiet b{display:block; font-size:17px; font-weight:800; margin-bottom:5px}
.quiet p{font-size:14.5px; line-height:1.5; color:#A9B2C4}
.priv{margin-top:60px}
.priv h3{font-size:clamp(22px,2.1vw,30px); letter-spacing:-.03em; font-weight:800; margin:0 0 26px}
.priv ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.priv li b{display:block; font-size:16px; font-weight:800; margin-bottom:4px}
.priv li span{font-size:14px; line-height:1.5; color:#A9B2C4}


.moon{position:absolute; right:13%; top:150px; width:62px; height:62px; border-radius:50%; box-shadow:inset -15px 7px 0 0 #D4DBEC; will-change:transform; opacity:.85}
.rail{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:40; display:none; flex-direction:column; align-items:center; gap:9px; opacity:0; transition:opacity .4s; pointer-events:none}
.rail.on{opacity:1}
.rail b{font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; padding:5px 7px; border-radius:8px; background:rgba(14,18,32,.72); color:#DDE2EC; font-variant-numeric:tabular-nums}
.rail span{display:block; width:2px; height:150px; border-radius:2px; background:rgba(140,148,170,.32); position:relative}
.rail span i{position:absolute; left:50%; top:0; will-change:transform; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:#E6B58E; transition:background .4s}
.rail.night span i{background:#D4DBEC}
@media(min-width:1240px){.rail{display:flex}}

@media(max-width:860px){
  .say,.at-glance,.zen{grid-template-columns:minmax(0,1fr); gap:38px}
  .bloom{max-width:220px}
  .quiet{grid-template-columns:minmax(0,1fr); gap:20px}
  .goals{grid-template-columns:minmax(0,1fr)}
  .g-tabs{flex-direction:row; overflow-x:auto; scrollbar-width:none; margin-inline:-20px; padding-inline:20px}
  .g-tabs button{font-size:16px; white-space:nowrap; padding:11px 15px}
  .g-stage{min-height:520px}
  .g-s{grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr}
  .g-t{padding:30px 26px 18px}
  .g-t strong{font-size:52px}
  .g-t .today{margin-top:14px}
  .devices{flex-direction:column; align-items:center}`n  .tablet{flex:none; width:100%}`n  .watch{margin:calc(var(--ww)*.82) 0 calc(var(--ww)*.72)}
  .priv ul{grid-template-columns:repeat(2,1fr); gap:20px}
  .week{height:190px} .wd b{height:14px}
  .skyw{height:150px}
  .d-dawn,.d-day,.d-noon,.d-dusk{padding-block:76px}
}
@media(prefers-reduced-motion:reduce){
  .day *,.day *::before{animation:none!important; transition:none!important}
  .say-row,.sk{opacity:1; transform:none}
  .moon{transform:none!important}
  .grow{transform:none} .draw{stroke-dashoffset:0} .lit{opacity:1}
}

.hero::after,.sky::after{display:none}

.dot{position:relative}
.dot::after{content:""; position:absolute; inset:-14px -6px}
.nav-links a{padding:9px 2px}
footer a{display:inline-block; padding:4px 0}

.screen.s3{background:#F2F3F6; gap:9px; padding:52px 12px 0}
.s3 .nav3{height:26px}
.big3{font-size:19px; font-weight:800; letter-spacing:-.4px; padding:0 3px}
.grp{font-size:11px; font-weight:700; color:#5C6372; padding:2px 4px 0}
.lst{border:0; border-radius:18px; padding:0 12px}
.lr{display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px solid rgba(15,18,30,.06)}
.lr:first-child{border-top:0}
.lr .chk{width:18px; height:18px; flex:none; background:transparent}
.lr div{flex:1; min-width:0}
.lr b{display:block; font-size:12px; font-weight:600; color:#1C1F2A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lr em{display:inline-block; font-style:normal; font-size:8.5px; font-weight:700; border-radius:99px; padding:1px 6px; margin-top:2px}
.lr strong{font-size:12px; font-weight:700; color:#1C1F2A; font-variant-numeric:tabular-nums}
.pi{width:30px; height:30px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center}
.wk7{border:0; border-radius:18px; display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:6px}
.wc{display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0 7px; border-radius:12px}
.wc small{font-size:8.5px; font-weight:600; color:#6B7180}
.wc b{font-size:13px; font-weight:700; color:#1C1F2A}
.wc i{display:flex; gap:2px; height:4px}
.wc u{width:3px; height:3px; border-radius:50%; background:#2B5BCE}
.wc.on{background:#2B5BCE}
.wc.on small,.wc.on b{color:#fff}
.wc.on u{background:#fff}
.skym{position:relative; height:92px; border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#0B1230,#24306B)}
.skym span{position:absolute; left:12px; top:10px; font-size:8.5px; font-weight:800; letter-spacing:1.2px; color:rgba(255,255,255,.72)}
.skym>b{position:absolute; right:12px; bottom:9px; color:#fff; font-size:13px; font-weight:700}
.skym i{position:absolute; width:var(--z); height:var(--z); border-radius:50%; background:#EAF0FF}
.cal{border:0; border-radius:18px; padding:11px 11px 8px}
.ch{display:flex; justify-content:space-between; font-size:12px; color:#1C1F2A}
.ch b{font-weight:700} .ch span{font-weight:700; font-variant-numeric:tabular-nums; color:#5C6372}
.cg{display:grid; grid-template-columns:repeat(7,1fr); row-gap:1px; margin-top:7px}
.cg span{position:relative; height:27px; display:flex; align-items:flex-start; justify-content:center; padding-top:4px; font-size:10.5px; font-weight:500; color:#454C5C; border-radius:9px}
.cg span u{position:absolute; bottom:4px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%}
.cg .sel{background:rgba(43,91,206,.13); color:#2B5BCE; font-weight:700}
.stack [data-go]{pointer-events:auto; cursor:pointer}
.hero-phone{perspective:1400px}

.tb small{font-size:7.6px; white-space:nowrap}
.tb svg{padding:2px 7px; width:32px; height:22px}
.tabbar{padding:0 3px}
.tb.on svg{background:rgba(43,91,206,.12)}
.pchips{display:flex; gap:13px; padding:0 4px; font-size:11.5px; font-weight:600; color:#6B7180; white-space:nowrap; overflow:hidden}
.pchips span{position:relative; padding-bottom:5px}
.pchips .on{color:#1C1F2A}
.pchips .on::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:1px; background:var(--g)}
.phero{border:0; border-radius:18px; padding:13px; display:flex; flex-direction:column; gap:9px}
.pnum{display:flex; align-items:baseline; gap:6px}
.pnum strong{font-size:38px; font-weight:300; letter-spacing:-.04em; line-height:1}
.pnum small{font-size:11.5px; font-weight:600; color:#5C6372}
.pmeta{font-size:11px; font-weight:500; color:#5C6372}
.grs{width:100%; height:auto; display:block}
.gr{opacity:.25; transform:scale(.4); transform-box:fill-box; transform-origin:center; transition:opacity .35s calc(var(--n)*16ms),transform .5s cubic-bezier(.3,1.5,.4,1) calc(var(--n)*16ms)}
.screen.active .gr,.g-s.on .gr{opacity:1; transform:none}
.phero.save{flex-direction:row; align-items:center; gap:13px}
.phero.save>div{flex:1; min-width:0}
.tin{width:92px; flex:none; overflow:visible}
.g-art .tin{width:100%; max-width:210px}
.coin{opacity:0}
.screen.active .coin,.g-s.on .coin{animation:coinDrop 2.4s cubic-bezier(.55,0,.8,.45) infinite}
@keyframes coinDrop{0%{transform:translateY(-44px); opacity:0}14%{opacity:1}58%{transform:translateY(70px); opacity:1}59%,100%{transform:translateY(70px); opacity:0}}
.pbar{height:6px; border-radius:3px; background:#E6E9EF; margin-top:7px; overflow:hidden}
.pbar i{display:block; height:100%; border-radius:3px; background:#068E89}
.ptabs{display:flex; gap:15px; padding:0 4px; font-size:11.5px; font-weight:600; color:#6B7180}
.ptabs .on{color:#1C1F2A}
.mode[data-go],.stack [data-back]{pointer-events:auto; cursor:pointer}
.sky em{position:absolute; left:0; top:0; opacity:0; will-change:transform,opacity; font-style:normal}
.sky .sn{width:84vmin; height:84vmin; margin:-42vmin 0 0 -42vmin; border-radius:50%; background:radial-gradient(circle,rgba(255,232,185,.5) 0,rgba(255,205,145,.2) 26%,rgba(255,175,115,0) 66%)}
.sky .cl{width:160vw; height:100vh; left:-30vw; background:radial-gradient(38vw 7vh at 22% 26%,rgba(255,255,255,.11),transparent 70%),radial-gradient(26vw 5vh at 56% 18%,rgba(255,255,255,.09),transparent 70%),radial-gradient(44vw 8vh at 76% 42%,rgba(255,255,255,.09),transparent 70%),radial-gradient(30vw 6vh at 36% 66%,rgba(255,255,255,.07),transparent 70%)}

.pchips span{pointer-events:auto; cursor:pointer}
.troad{position:relative; height:46px; margin:8px 14px 0}
.troad>i{position:absolute; left:0; right:0; top:7px; height:3px; border-radius:2px; background:#E6E2F0}
.troad>i.p{right:auto; width:48%; background:#8A68B9}
.troad span{position:absolute; top:0; width:0; display:flex; flex-direction:column; align-items:center}
.troad u{width:17px; height:17px; border-radius:50%; background:#fff; border:3px solid #DCD6E8; box-sizing:border-box; flex:none}
.troad .d u{border-color:#8A68B9; background:#8A68B9}
.troad small{font-size:9.5px; font-weight:600; color:#5C6372; margin-top:5px; white-space:nowrap}
@media(max-width:860px){.devices .tablet{flex:0 0 auto; width:100%; max-width:none; align-self:stretch}}
.tablet .t-scr{position:absolute; inset:1.5%; height:auto}

.sky .hl{top:auto; bottom:0; height:44vh; background-size:100% 100%; background-repeat:no-repeat}
.sky .sn{background:radial-gradient(circle,rgba(255,246,222,.98) 0,rgba(255,236,190,.92) 9%,rgba(255,214,150,.34) 17%,rgba(255,190,120,.12) 38%,rgba(255,175,115,0) 66%)}
.sky .cl{background:radial-gradient(38vw 6vh at 22% 22%,rgba(255,255,255,.34),transparent 70%),radial-gradient(26vw 4vh at 56% 14%,rgba(255,255,255,.28),transparent 70%),radial-gradient(44vw 7vh at 76% 32%,rgba(255,255,255,.26),transparent 70%),radial-gradient(30vw 5vh at 36% 48%,rgba(255,255,255,.18),transparent 70%)}
.d-dawn h2,.d-day h2,.d-noon h2,.d-dusk h2,.d-day .bigline,.zen h3{text-shadow:0 2px 22px rgba(6,14,38,.45)}
.d-dawn .lead2,.d-day .lead2,.d-dusk .lead2,.zen p,.say-text,.plats{color:#fff; text-shadow:0 1px 12px rgba(6,14,38,.55)}
.d-dawn .clock,.d-day .clock,.d-noon .clock,.d-dusk .clock{color:#fff; text-shadow:0 1px 8px rgba(6,14,38,.5)}
.say-text em.hit{color:#FFE2B5; background:rgba(40,18,40,.36)}
.say-row{background:rgba(16,16,36,.62)}
.bloom circle{fill:rgba(10,24,52,.42)}
.bloom circle.on{fill:#fff}
.bigline mark{color:#fff; background:rgba(10,30,70,.42)}
.mom strong{color:#fff}
.mom small,.wd>small{color:#EAF1F8}
.mom .wk i{background:rgba(10,24,52,.42)}
.mom .wk i:last-child{background:#fff}
.wd b{background:#fff}
.wd b.over{background:#FFC58A}
.g-tabs button{color:#fff; text-shadow:0 1px 8px rgba(6,14,38,.5)}
.g-tabs button:hover{background:rgba(10,24,52,.24)}
.g-tabs button.on{background:rgba(10,24,52,.62); text-shadow:none}
.g-stage{background:rgba(13,20,36,.9)}
.sw label{color:#fff}
.sw button.on::after{border-color:#fff}

.sky .sn{background:radial-gradient(circle,rgba(255,240,214,.62) 0,rgba(255,226,180,.5) 8%,rgba(255,206,150,.18) 18%,rgba(255,190,130,.06) 40%,rgba(255,175,115,0) 66%)}
.sky .cl{opacity:.6}
.bloom circle.on{fill:#C6D6F7}
.mom .wk i:last-child,.wd b{background:#C6D6F7}