body{background:radial-gradient(ellipse 85% 650px at 78% 8%,#10313955,transparent 78%),#07191e}
.hero{min-height:min(740px,84vh);padding-block:72px}.line{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}.line>span{display:block}.ocean{aspect-ratio:1.12}.pin{top:14%;left:0;width:100%;text-align:center;font-size:8px}.animal{inset:20% 25% 18%}.ocean figcaption small,.figlabel,.insight>small{font:500 9px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.13em;color:#afd0c9}.sonar{position:absolute;inset:19% 16% 11%;display:grid;place-items:center;transform:rotate(-18deg)}.sonar i{position:absolute;height:65%;width:100%;border:1px solid #a6e8d22e;border-radius:50%;background:transparent}.sonar i:nth-child(2){height:79%;width:116%;opacity:.65}.sonar i:nth-child(3){height:95%;width:132%;opacity:.4}
.break-scene,.pro-scene{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;padding:clamp(64px,8vw,120px) 0}.chapter h2,.experience h2{font-size:clamp(48px,5.4vw,80px)}.chapter p:not(.kicker){color:var(--sub);font-size:18px;max-width:40ch;margin:22px 0}.break-art{isolation:isolate;overflow:hidden;position:relative;display:grid;place-items:center;min-height:320px;background:radial-gradient(ellipse at 50% 55%,#205453 0,#0d2a30 60%,#0a2429 90%);border-radius:20px}.ripple{position:absolute;width:76%;height:66%;bottom:0;border:1px solid #80d9cb55;border-radius:50%;transform:rotateX(40deg);z-index:-1}.r2{width:102%;height:86%;bottom:-10%;opacity:.65}.r3{width:135%;height:108%;bottom:-20%;opacity:.35}.reminder{width:min(66%,280px);display:grid;justify-items:center;padding:18px;background:linear-gradient(130deg,#17373e,#0c262de8);border:1px solid #4e7374;border-radius:18px;box-shadow:0 16px 40px #04121355}.reminder img{width:38px}.reminder strong{font-size:20px;font-weight:550}.reminder span,.reminder small,.insight p{font-size:13px;color:var(--sub)}.reminder small{border:1px solid #4a6569;border-radius:8px;padding:1px 11px}.meter{margin:12px 0;width:70%;height:3px;background:linear-gradient(90deg,#9fe5d4 52%,#325157 52%)}.figlabel{position:absolute;bottom:14px;left:18px}.experience{padding:clamp(64px,8vw,120px) 0}.dashboard{margin:32px 0 16px}.stat,.chart{padding:clamp(20px,3vw,42px)}#plot{height:86px}.insight{border-block:1px solid #466165;padding:32px 12px}.spark{color:var(--sea);font-size:37px;margin:15px 0 8px;text-shadow:0 0 18px #6fc8b755}.insight h3{font-size:clamp(25px,3vw,42px);font-weight:480;letter-spacing:-.045em;line-height:1.12;max-width:15ch;margin:0 0 16px}.footmail a{color:var(--sub);font-size:13px}.button,.navbuy{transition:background-color .2s,color .2s}.button:hover{background:#c3ffef}.doc>details[open] p{animation:settle .36s ease-out}
@keyframes settle{from{opacity:.15;transform:translateY(8px)}}
@keyframes bar-in{from{transform:scaleY(.05);opacity:.35}}@keyframes session-in{from{transform:scaleX(.05);opacity:.35}}
@media(prefers-reduced-motion:no-preference){
.chart.chart-visible #plot i{transform-origin:0 50%;animation:session-in .65s cubic-bezier(.2,.75,.2,1) backwards;animation-delay:var(--lag,0ms)}
.chart.chart-visible #plot.week i{animation-name:bar-in;transform-origin:50% 100%}
}
@media(max-width:700px){.hero{min-height:0;padding-block:42px}.ocean{aspect-ratio:1.55}.pin{top:6%}.break-scene,.pro-scene{grid-template-columns:1fr;gap:24px}.break-art{order:2;min-height:270px}.chapter p:not(.kicker){font-size:16px}.footmail{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0s!important;transition-duration:0s!important}}
h1,h2{letter-spacing:-.048em}em{letter-spacing:-.055em}