*{box-sizing:border-box}html{background:#090e13;color:#edf2f5;font-family:Arial,Helvetica,sans-serif}body{margin:0;background:radial-gradient(ellipse at 85% 45%,#13233080,transparent 48%)}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #8be5fa;outline-offset:6px}.skip{position:fixed;top:-100px;background:#fff;color:#080e13;padding:12px;z-index:5}.skip:focus{top:10px}header,main,footer{width:min(1400px,88%);margin:auto}
header{display:flex;align-items:center;justify-content:space-between;padding:30px 0;border-bottom:1px solid #ffffff1c;gap:28px}.brand{font-size:25px;font-weight:800;letter-spacing:3px}.brand span{color:#8be5fa}.brand small{display:block;font-size:9px;letter-spacing:5px;margin-top:7px;font-weight:400}nav{display:flex;gap:32px;font-size:12px}nav a{padding:12px 0;color:#a8b6c1}nav a:hover,nav a[aria-current]{color:#8be5fa}nav span{margin-left:8px}
main{min-height:calc(100svh - 202px);display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;padding:64px 0 75px}.intro{animation:entrance 1s ease-out both}.eyebrow{font-size:9px;letter-spacing:2px;display:flex;align-items:center;gap:10px;margin:0 0 34px;color:#bac6cf}.status{width:6px;height:6px;flex-shrink:0;background:#8be5fa;border-radius:50%;box-shadow:0 0 14px #70e6ff}h1{font-size:clamp(55px,6.3vw,96px);line-height:1.03;letter-spacing:-.07em;margin:0;font-weight:500}h1 em{font-family:Georgia,serif;font-weight:400;color:#a1dceb;letter-spacing:-.065em}.description{font-size:16px;line-height:1.85;color:#a8b6c1;max-width:370px;margin:30px 0}.services{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;padding:24px 0;margin:0;max-width:420px;border-top:1px solid #ffffff20;font-size:11px;color:#dae3e9}.services li:before{content:'↗';color:#8be5fa;margin-right:8px}.back{display:inline-flex;gap:45px;align-items:center;border-bottom:1px solid #637985;padding:14px 0;margin-top:15px;font-size:12px}.back:hover{color:#8be5fa}
.art{min-width:0;border:1px solid #34444f;background:#111c24;box-shadow:0 30px 80px #0004;animation:entrance 1.4s ease-out both}.art-label{display:flex;justify-content:space-between;padding:18px 20px;font-size:8px;letter-spacing:1.5px;color:#a8b6c1}.art-label b{display:inline-block;width:5px;height:5px;background:#8be5fa;border-radius:50%;margin-right:7px}.composition{position:relative;aspect-ratio:1.14;overflow:hidden;color:#183549;background-color:#dae7e9;background-image:linear-gradient(#1835490c 1px,transparent 1px),linear-gradient(90deg,#1835490c 1px,transparent 1px);background-size:28px 28px;animation:paper 12s ease-in-out infinite}.canvas-label,.canvas-bottom,.canvas-plus{position:absolute;font-size:8px;letter-spacing:1.4px;z-index:2}.canvas-label{top:18px;left:20px}.canvas-bottom{bottom:18px;left:20px}.canvas-plus{right:20px;bottom:12px;font-size:25px}.identity{position:absolute;width:68%;aspect-ratio:1;top:13%;left:16%;border:1px solid #1677a86b;animation:identity 12s ease-in-out infinite}.identity>svg{width:100%;height:100%;overflow:visible}.mark-fill{fill:#153d53;animation:ink 12s ease-in-out infinite}.mark-path{stroke:#1c7fba;stroke-width:1;stroke-dasharray:1050;stroke-dashoffset:0;animation:draw 12s ease-in-out infinite}.handle{position:absolute;width:6px;height:6px;background:#edf9ff;border:1px solid #297cb6}.h1{top:-3px;left:-3px}.h2{top:-3px;right:-3px}.h3{bottom:-3px;left:-3px}.h4{bottom:-3px;right:-3px}.measurement{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:6px;letter-spacing:1.6px}.guide{position:absolute;background:#218dc446;z-index:1}.guide-x{height:1px;width:100%;top:50%;animation:guide-x 12s ease-in-out infinite}.guide-y{width:1px;height:100%;left:50%;animation:guide-y 12s ease-in-out infinite}.orbit{position:absolute;width:62%;aspect-ratio:1;top:16%;left:19%;border:1px solid #1c7fba30;border-radius:50%;animation:orbit 12s ease-in-out infinite}.orbit-two{width:42%;top:27%;left:29%;animation-direction:reverse}.design-cursor{position:absolute;z-index:3;left:72%;top:72%;display:flex;align-items:flex-start;animation:cursor 12s ease-in-out infinite}.design-cursor svg{width:18px;height:24px;fill:#247db1;stroke:#ecfaff;stroke-width:1.4}.design-cursor b{font-size:8px;font-weight:400;padding:5px 7px;border-radius:3px;background:#247db1;color:#fff;margin-top:21px}.design-tools{display:flex;align-items:center;justify-content:space-between;padding:20px}.swatches{display:flex;gap:6px}.swatches i{width:27px;height:30px;background:#153d53;animation:swatch 12s ease-in-out infinite}.swatches i:nth-child(2){background:#247db1;animation-delay:.15s}.swatches i:nth-child(3){background:#a1dceb;animation-delay:.3s}.swatches i:nth-child(4){background:#dae7e9;animation-delay:.45s}.swatches i:nth-child(5){background:#e4c8a6;animation-delay:.6s}.type-study{font-family:Georgia,serif;font-size:32px;line-height:.8}.type-study span{display:block;font:6px Arial,sans-serif;letter-spacing:1.2px;margin-top:9px;color:#a8b6c1}.art-foot{height:48px;padding:0 20px;position:relative;font-size:8px;letter-spacing:1.4px;color:#b6c8d5}.phase{position:absolute;top:5px;animation:phase 12s steps(1) infinite}.phase-two{animation-delay:-8s;opacity:0}.phase-three{animation-delay:-4s;opacity:0}.progress{position:absolute;left:20px;right:20px;bottom:15px;height:2px;background:#2c3b47}.progress i{display:block;height:100%;background:#8be5fa;transform-origin:left;animation:progress 12s linear infinite}
footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff1c;padding:25px 0 65px;color:#90a1ae;font-size:9px;letter-spacing:1px}.motion-input{position:fixed;bottom:20px;right:175px;width:1px;height:1px;opacity:0}.motion-control{position:fixed;bottom:14px;right:20px;z-index:4;display:flex;gap:18px;align-items:center;padding:11px 14px;border:1px solid #3d505e;border-radius:3px;background:#101b23;color:#bed0dd;font-size:10px;cursor:pointer}.motion-control:hover{border-color:#8be5fa}.motion-input:focus-visible+.motion-control{outline:2px solid #8be5fa;outline-offset:3px}.play-label{display:none}#pause-motion:checked~.motion-control .pause-label{display:none}#pause-motion:checked~.motion-control .play-label{display:inline}#pause-motion:checked~main *,#pause-motion:checked~main{animation-play-state:paused!important}
@keyframes entrance{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes draw{0%,5%{stroke-dashoffset:1050}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:1050}}@keyframes ink{0%,26%,100%{opacity:0}45%,83%{opacity:1}}@keyframes identity{0%,12%,100%{transform:scale(.9)}45%,80%{transform:scale(1)}}@keyframes guide-x{0%,100%{transform:translateY(-75px)}42%,80%{transform:translateY(65px)}}@keyframes guide-y{0%,100%{transform:translateX(-80px)}42%,80%{transform:translateX(80px)}}@keyframes orbit{0%,100%{transform:scale(.8);opacity:.4}50%{transform:scale(1.2);opacity:1}}@keyframes cursor{0%,100%{transform:translate(-140px,-100px)}28%{transform:translate(0,-120px)}50%{transform:translate(5px,10px)}75%{transform:translate(-110px,25px)}}@keyframes swatch{0%,40%,90%,100%{transform:translateY(0)}55%,70%{transform:translateY(-6px)}}@keyframes paper{0%,30%,100%{background-color:#dae7e9}55%,80%{background-color:#c5e5ee}}@keyframes phase{0%,33%{opacity:1}34%,100%{opacity:0}}@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:760px){header{flex-wrap:wrap;padding:24px 0;gap:19px}nav{gap:23px;font-size:12px}main{grid-template-columns:1fr;gap:42px;padding:43px 0 45px}h1{font-size:clamp(55px,11vw,80px)}.art{width:min(480px,100%);justify-self:center}.description{font-size:15px;margin:25px 0}.eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:27px}.services{font-size:10px}.swatches i{width:24px}.art-label{font-size:7px;letter-spacing:1px}footer{flex-direction:column;gap:12px;font-size:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.phase-two,.phase-three{display:none}.motion-control{display:none}.mark-fill{opacity:1}}