@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0d0f0f;--ink:#ecede8;--muted:#9a9e98;--line:#2b2e2b;--accent:#d9f99a;--ball:#7ee5f6;--brand:#2c67c5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;font-size:14px}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.4' d='M0 0h160v160H0z'/%3E%3C/svg%3E");z-index:8}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:7px}button{background:none;border:0}header{height:100px;padding:0 4.5%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10}.wordmark{font-size:27px;letter-spacing:-1.4px;font-weight:700}.triple{color:var(--brand)}.header-right{display:flex;align-items:center;gap:36px}.stage-label{display:flex;align-items:center;gap:9px;color:#aeb4a9;font-size:10px;letter-spacing:1.8px;text-transform:uppercase}.status-dot{width:5px;height:5px;background:var(--accent);border-radius:50%}.project-link{font-size:12px;display:flex;align-items:center;gap:28px;border-bottom:1px solid #6b7065;padding:10px 0}.project-link span{font-size:18px}.home{height:calc(100svh - 175px);min-height:560px;max-height:1050px;position:relative;isolation:isolate}.home-title{text-align:center;position:absolute;top:18px;left:0;right:0;z-index:2}.eyebrow{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--muted);margin:0 0 16px}.home h1{font-size:clamp(27px,3.3vw,49px);font-weight:500;letter-spacing:-1.7px;margin:0;line-height:1.2}.home h1 .slogan-accent{font:inherit;color:inherit}.ghost-word{position:absolute;top:37%;width:100%;text-align:center;font-weight:600;letter-spacing:-1.2vw;font-size:18vw;line-height:1;color:#191c19;z-index:-1;user-select:none;overflow:hidden}.stage{position:absolute;top:51%;left:50%;transform:translate(-50%,-43%);width:min(830px,76vw);height:470px}.device{position:absolute;height:460px;width:600px;top:0;left:50%;transform:translateX(-50%)}.device-svg{display:block;width:100%;height:100%;overflow:visible;shape-rendering:geometricPrecision}.device-svg .corner{fill:url(#button);stroke:#666a6d;stroke-opacity:.18;stroke-width:1.4;stroke-linejoin:round;transition:filter .25s,stroke .25s}.device-svg a:hover .corner,.device-svg a:focus .corner{stroke:var(--accent);filter:brightness(1.5)}.device-svg a{outline:none}.device-svg a:focus-visible .corner{stroke:var(--accent);stroke-opacity:1;stroke-width:3}.ball-lit{fill:var(--ball);transition:fill .5s}.orb-glow{fill:var(--ball);opacity:.15;filter:url(#blur);transition:fill .5s}.ball-link:hover .ball-lit{filter:brightness(1.08)}.ball-link:focus-visible .ball-outline{stroke:var(--accent);stroke-width:2}.callout{position:absolute;color:#aeb4aa;font-size:12px;display:flex;gap:13px;align-items:center;z-index:3;padding:12px 0}.callout b{font-size:9px;color:#69715e;font-weight:500}.callout:hover{color:var(--accent)}.callout:after{content:'';position:absolute;height:1px;background:#59604b88}.callout.top{top:-5px;left:52%;transform:translateX(-50%)}.callout.top:after{width:1px;height:23px;top:36px;left:50%}.callout.left{left:0;top:299px}.callout.left:after{width:68px;left:100%;top:50%;margin-left:15px}.callout.right{right:0;top:299px}.callout.right:after{width:68px;right:100%;top:50%;margin-right:15px}.callout.center{right:-16px;top:165px}.callout.center:after{width:125px;right:100%;margin-right:15px;top:50%}.home-bottom{position:absolute;bottom:12px;left:4.5%;right:4.5%;display:flex;align-items:flex-end;justify-content:space-between}.hint{font-size:11px;color:var(--muted);line-height:1.8;display:flex;gap:12px;align-items:center}.hint-icon{width:26px;height:26px;border:1px solid #454a40;border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:17px}.color-control{display:flex;align-items:center;gap:12px}.color-control>span{font-size:9px;text-transform:uppercase;letter-spacing:1.7px;color:var(--muted);margin-right:8px}.swatch{width:22px;height:22px;border-radius:50%;padding:5px;display:grid;place-items:center;border:1px solid transparent}.swatch:after{content:'';width:10px;height:10px;background:var(--swatch);border-radius:50%}.swatch[aria-pressed=true]{border-color:var(--swatch)}footer{height:75px;margin:0 4.5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}.footer-center{letter-spacing:2px;color:#bfc6b6}.footer-number{color:var(--accent)}.detail{min-height:calc(100svh - 175px);padding:35px 7% 55px;display:grid;grid-template-columns:1.04fr 1fr;gap:8%;align-items:center}.detail-copy{max-width:530px}.back{display:inline-flex;gap:12px;align-items:center;color:#a9b09f;font-size:11px;margin-bottom:45px}.detail h1{font-size:clamp(40px,4.3vw,60px);line-height:1.06;letter-spacing:-2.5px;font-weight:500;margin:15px 0 25px}.detail h1 .slogan-accent{font:inherit;color:var(--ball);transition:color .5s}.lead{font-size:15px;line-height:1.9;color:#acb1a7;max-width:440px}.facts{margin:33px 0 0;border-top:1px solid var(--line)}.fact{padding:16px 0;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);font-size:11px;gap:20px}.fact span{color:var(--muted)}.fact strong{text-align:right;font-weight:500}.note{font-size:10px;line-height:1.8;color:#858e7a;margin-top:20px}.detail-art{position:relative;min-width:0;aspect-ratio:1/1.1;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#22271e55 0%,transparent 65%)}.detail-art .device{width:115%;height:auto;aspect-ratio:600/460;position:relative;left:auto;top:auto;transform:none}.art-index{position:absolute;left:0;top:0;color:#58614c;font-size:11px;letter-spacing:2px}.art-caption{position:absolute;bottom:15px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted);letter-spacing:1px}.detail-nav{display:flex;gap:20px;margin-top:28px;flex-wrap:wrap}.text-link{font-size:11px;border-bottom:1px solid #606950;padding:9px 0;color:var(--accent)}.detail .color-control{margin:26px 0}.mode-preview{margin-top:16px;font-size:11px;color:#adb6a1}.big-orb{width:72%;aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle at 32% 25%,#edfffc 0%,var(--ball) 12%,#072c35 78%,#051213 100%);box-shadow:0 0 100px -35px var(--ball),0 25px 45px #000;transition:box-shadow .4s,background .4s}.big-orb:after{content:'';position:absolute;inset:12%;border-radius:50%;border:1px solid #ffffff17;transform:rotate(-30deg) scaleX(.43)}.orbit{position:absolute;width:94%;aspect-ratio:1;border:1px solid #343b2d;border-radius:50%}.orbit:after{content:'04';position:absolute;right:2%;top:24%;background:var(--bg);padding:8px;font-size:10px;color:var(--accent)}.profile{width:100%;filter:drop-shadow(0 30px 20px #000)}.project-visual{width:90%;aspect-ratio:1;position:relative;display:grid;place-items:center}.project-visual:before,.project-visual:after{content:'';position:absolute;inset:0;border:1px solid #394330;transform:rotate(30deg);border-radius:50%}.project-visual:after{inset:13%;border-style:dashed}.project-ls{font-size:clamp(110px,16vw,230px);font-weight:400;letter-spacing:2px;color:var(--accent);line-height:1;transform:rotate(-10deg)}.project-visual .project-caption{position:absolute;bottom:0;font-size:10px;letter-spacing:3px;color:#a8b49b}.page-enter{animation:appear .55s ease-out both}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.stage{transform:translate(-50%,-43%) scale(1.2)}}
@media(max-width:1000px){.stage{width:86vw}.callout.center{right:0}.callout.center:after{width:60px}.callout.left:after,.callout.right:after{width:25px}.device{width:540px}.detail{gap:4%;padding-left:5%;padding-right:5%}.detail h1{letter-spacing:-2px}}
@media(max-width:700px){header{height:80px;padding:0 6%}.wordmark{font-size:24px}.stage-label{display:none}.project-link{gap:14px;font-size:11px}.home{height:calc(100svh - 145px);min-height:620px;max-height:850px}.home-title{top:28px}.eyebrow{font-size:9px;letter-spacing:1.8px}.home h1{font-size:30px;letter-spacing:-1px;padding:0 20px}.ghost-word{top:37%;font-size:20vw}.stage{width:100%;height:380px;top:49%;transform:translate(-50%,-37%)}.device{width:390px;height:320px;max-width:100%;top:24px}.callout{font-size:11px;gap:7px}.callout.top{top:8px;left:50%}.callout.top:after{height:15px}.callout.left{top:300px;left:8%}.callout.right{top:300px;right:8%}.callout.left:after,.callout.right:after{height:20px;width:1px;top:-15px;left:50%;margin:0}.callout.center{top:137px;right:4%;flex-direction:column;gap:1px;align-items:flex-end}.callout.center:after{width:20px;margin-right:5px;top:36px}.home-bottom{left:6%;right:6%;bottom:22px;gap:22px}.hint{font-size:10px;max-width:175px}.hint-icon{min-width:22px;width:22px;height:22px}.color-control{gap:6px}.color-control>span{display:none}.home-bottom .swatch{width:27px;height:27px}footer{height:65px;margin:0 6%;font-size:8px;letter-spacing:.8px}.footer-center{display:none}.detail{display:flex;flex-direction:column;padding:20px 7% 35px;min-height:calc(100svh - 145px);gap:30px;align-items:stretch}.detail-copy{max-width:none}.back{margin-bottom:28px}.detail h1{font-size:46px;letter-spacing:-2px}.lead{font-size:14px}.detail-art{aspect-ratio:1.2;max-height:400px;order:2}.detail-art .device{width:95%;max-height:100%}.detail-art .color-control{display:flex}.art-caption{bottom:0}.big-orb{width:60%}.orbit{width:78%}.project-visual{width:70%}.project-ls{font-size:150px}.fact{font-size:10px}.profile{width:94%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.text-link svg{vertical-align:middle;margin-left:6px}.back svg{flex-shrink:0}
@media(min-width:701px) and (max-height:850px){.detail{padding-top:10px;padding-bottom:25px}.detail h1{font-size:45px;letter-spacing:-1.8px;margin:12px 0 18px}.back{margin-bottom:22px}.lead{font-size:13px;line-height:1.8}.facts{margin-top:20px}.fact{padding:12px 0}.note{margin-top:14px}.detail-nav{margin-top:16px}}

/* Brand colour is independent of the product illumination and editorial accents. */
.sideball-color{stop-color:var(--ball)}
.language-control{position:relative;display:flex;align-items:center;color:#c5c9c1;flex-shrink:0}
.language-control select{appearance:none;border:1px solid #3b4038;border-radius:5px;background:#141714;color:inherit;padding:10px 28px 10px 12px;font:500 11px Manrope,Arial,sans-serif;cursor:pointer;min-width:106px}
.language-control>svg{position:absolute;right:10px;pointer-events:none}
.language-control select:hover{border-color:#737f66}
.language-control select:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media(max-width:1000px){.header-right{gap:20px}.stage-label{display:none}}
@media(max-width:700px){.header-right{gap:14px}.header-right .project-link{display:none}.language-control select{font-size:11px}.callout.center>svg{margin-top:3px}.detail h1{font-size:clamp(33px,8.4vw,46px)}.detail .color-control{flex-wrap:wrap}.detail .color-control>span{display:block;letter-spacing:1px}}

/* The product inscription is part of the illustration, not selectable page copy. */
.device-inscription{-webkit-user-select:none;user-select:none;pointer-events:none}