@font-face{font-family:OcciFlow;src:url('/assets/studio-sans.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--gold:#e8bd73;--text:#f0f0ed;--muted:#939ca9;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}body{margin:0;background:#000;color:var(--text);font:15px/1.6 OcciFlow,system-ui,sans-serif;min-height:100svh;overflow-x:clip}button,select,a{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #ffe0a0;outline-offset:6px}[hidden]{display:none!important}
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;background:#000;overflow:hidden}.site-header{position:relative;z-index:3;max-width:1440px;margin:auto;padding:27px 6%;display:flex;align-items:center;justify-content:space-between;gap:24px}.site-header>span{font-size:12px;color:var(--muted);letter-spacing:.02em}.wordmark{text-decoration:none;font-size:30px;letter-spacing:-1.3px}.brand-dot{color:var(--gold)}main{min-height:calc(100svh - 200px);display:grid;align-items:center}.hero{width:100%;max-width:1200px;margin:auto;padding:0 36px 20px;text-align:center}.scene{position:relative;width:min(100%,1000px);aspect-ratio:1000/580;margin:-12px auto -32px;isolation:isolate}.eye{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.eye-contour{fill:none;stroke:url('#gold');stroke-width:2.7;stroke-linecap:round}.contour-shadow{stroke:#f6b748;stroke-width:8;opacity:.09}.circuit{fill:none;stroke:url('#gold');stroke-width:1.8;stroke-linejoin:round}.circuit-decoration{opacity:.55;stroke-width:1.2}.terminal{fill:url('#gold')}.sun{position:absolute;left:41.5%;top:18.1%;width:17%;aspect-ratio:1;z-index:2;pointer-events:none;transform-origin:center}.solar-disk{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#030202}.solar-disk img{width:100%;height:100%;display:block;object-fit:cover;animation:solar-drift 100s linear infinite}.solar-shade{position:absolute;inset:-1px;border-radius:50%;background:#010203;opacity:.998}.corona{position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(circle,transparent 42%,#ffb73738 47%,#ed891717 56%,transparent 71%);animation:corona-breathe 9s ease-in-out infinite}.glint{position:absolute;left:83%;top:14%;width:21%;height:21%;opacity:0;background:radial-gradient(circle,#fffce8 0%,#ffe5b68c 7%,transparent 38%);animation:glint 13s ease-in-out infinite 6s}.glint:before,.glint:after{content:'';position:absolute;left:49%;top:0;width:2%;height:100%;background:linear-gradient(transparent,#fff5d6,transparent)}.glint:after{transform:rotate(90deg)}
.nodes{position:absolute;inset:0;pointer-events:none}.tool-node{position:absolute;width:6.8%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:auto;z-index:4;isolation:isolate}.node-button{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;border:1px solid #ae8447;background:radial-gradient(circle at 35% 20%,#282115,#0b0d10 70%);box-shadow:inset 0 0 0 4px #0c1015,0 4px 18px #0008;text-decoration:none;transition:transform .28s var(--ease),border-color .28s,background .28s;cursor:pointer}.node-button img{width:52%;height:52%;object-fit:contain;border-radius:22%;transition:opacity .2s}.node-button .initials{color:#e7c68e;font-size:17px;letter-spacing:-1px}.tool-node:before{content:'';position:absolute;inset:-7px;border-radius:50%;box-shadow:0 0 19px 3px #eeb44a55,inset 0 0 9px #eeb44a44;border:1px solid #f3cc7977;opacity:0;pointer-events:none}.tool-node.usable:before{animation:node-pulse 5s ease-in-out infinite;animation-delay:var(--pulse-delay,0s)}.tool-node.active:before{animation:none;opacity:.8}.tool-node.active .node-button{border-color:#ffe0a1;transform:scale(1.07);background:radial-gradient(circle at 35% 20%,#40301b,#111214 75%)}.tool-node.preview .node-button{border-color:#61523a}.tool-node.preview img,.tool-node.preview .initials{opacity:.55}.tool-node.preview:after{content:'';position:absolute;bottom:9%;right:9%;width:5px;height:5px;border-radius:50%;background:#93836b;pointer-events:none}.circuit.selected{stroke:#ffe0a0;stroke-width:2.5}.tool-detail{position:absolute;z-index:8;width:260px;text-align:left;border:1px solid #8b6c3c80;border-radius:12px;padding:17px 19px;background:#0c1119;box-shadow:0 16px 50px #0009;pointer-events:auto}.tool-detail strong{display:block;font-weight:500;font-size:17px;color:#f4e7cd}.tool-detail p{color:#aeb5bf;font-size:12px;line-height:1.65;margin:7px 0 0}.tool-detail .detail-open{display:inline-block;margin-top:13px;font-size:12px;color:#efd39c;text-decoration:none}.tool-detail .preview-tag{display:block;margin-top:11px;font-size:10px;color:#b39465;letter-spacing:.08em;text-transform:uppercase}.hero-copy{position:relative;z-index:1;pointer-events:none}.eyebrow{color:#af8d56;font-size:10px;letter-spacing:.22em;margin:0 0 12px}h1{font-size:clamp(28px,3.2vw,43px);font-weight:400;line-height:1.2;letter-spacing:-1.5px;margin:0}h1 span{color:#cdd0d5}.subhead{color:var(--muted);font-size:14px;margin:17px 0 0}.access-note{font-size:11px;color:#7f8793;margin:25px 0 0}.page-switch{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:20px;font-size:12px;color:var(--muted)}.page-switch button{border:1px solid #6b5636;border-radius:50%;background:#131720;color:var(--gold);width:32px;height:32px}.page-switch button:disabled{opacity:.3;cursor:default}footer{max-width:1440px;margin:0 auto;padding:27px 6% 90px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#687281}.footer-separator{margin:0 10px;color:#aa8751}.local-note{letter-spacing:.15em}.demo-controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:14px;background:#111720f5;border:1px solid #303846;border-radius:12px;padding:10px 14px;box-shadow:0 10px 30px #0007;white-space:nowrap;font-size:11px;color:#aeb7c4}.preview-dot{width:5px;height:5px;border-radius:50%;background:#ddbb79}.demo-controls button{background:#252b34;border:1px solid #3f4856;border-radius:6px;color:#eee1cb;padding:5px 10px}.demo-controls button:hover{background:#333c49}.capacity-label{display:flex;align-items:center;gap:7px}.demo-controls select{background:#141a24;color:#e9ddc8;border:1px solid #3f4856;border-radius:5px;padding:5px}.skip{position:fixed;top:-100px;left:20px;z-index:30;background:#171e28;padding:12px}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.fallback{text-align:center;padding:20px}.intro-running .scene{z-index:10}.intro-running .tool-node{pointer-events:none}.intro-running .solar-disk img,.intro-running .corona,.intro-running .glint{animation-play-state:paused}.intro-running .glint{visibility:hidden}body:not(.ready) .eye,body:not(.ready) .nodes,body:not(.ready) .hero-copy{opacity:0}.intro-running .site-header,.intro-running footer,.intro-running .access-note,.intro-running .page-switch{opacity:0}.site-header,footer,.access-note{transition:opacity .5s ease}
@keyframes node-pulse{0%,12%,48%,100%{opacity:0}28%{opacity:.65}}
@keyframes solar-drift{to{transform:rotate(360deg)}}
@keyframes corona-breathe{0%,100%{opacity:.6;transform:scale(.97)}50%{opacity:.9;transform:scale(1.03)}}
@keyframes glint{0%,68%,77%,100%{opacity:0;transform:scale(.6)}71%{opacity:.85;transform:scale(1)}74%{opacity:.2;transform:scale(.75)}}
@media(min-width:1500px){.scene{width:1100px;max-width:100%}.hero{max-width:1280px}}
@media(max-width:700px){.site-header{padding:23px 6%}.site-header>span{font-size:10px}.wordmark{font-size:26px}.hero{padding:12px 16px 24px}.scene{margin:0 auto 18px}.sun{width:22%;left:39%;top:13.8%}.eye-contour{stroke-width:3}.tool-node{width:9.5%}.node-button{box-shadow:inset 0 0 0 2px #0c1015}.node-button .initials{font-size:12px}.scene.many{aspect-ratio:auto;padding-bottom:0;margin-bottom:25px}.scene.many .eye{position:relative;display:block;height:auto;aspect-ratio:1000/580}.scene.many .sun{top:0;width:22%;margin-top:8%}.scene.many .nodes{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px;width:80%;margin:-15px auto 0}.scene.many .tool-node{position:relative;transform:none;width:58px;justify-self:center}.scene.many .tool-node .initials{font-size:16px}.scene.many .circuit-app{opacity:.25}.tool-detail{position:fixed;left:20px!important;right:20px;bottom:85px;top:auto!important;width:auto}h1{font-size:30px;letter-spacing:-1px}h1 span{display:block;margin-top:4px}.subhead{font-size:12px}.eyebrow{font-size:9px}.local-note{display:none}footer{padding-bottom:100px}.demo-controls{gap:8px;padding:9px;bottom:12px;font-size:10px}.demo-label{display:none}.capacity-label{gap:4px}.demo-controls button{padding:5px 7px}.preview-dot{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.tool-node.usable:before{opacity:.18}.glint{display:none}}

/* Keep the complete composition in view on shorter desktop displays. */
@media(min-width:701px){.scene{width:min(100%,1000px,calc((100svh - 310px)*1.724));min-width:560px;margin:-5px auto -36px}.hero{padding-top:0}.tool-node{width:7.4%}main{min-height:calc(100svh - 210px)}}

.intro-running .sun{will-change:transform}.tool-node .node-button:active{transform:scale(.96)}

.scene{z-index:2}.solar-disk img{transform:scale(1.045)}@keyframes solar-drift{from{transform:scale(1.045) rotate(0deg)}to{transform:scale(1.045) rotate(360deg)}}

@media(max-width:700px){.tool-node{min-width:44px;min-height:44px}}
/* Revision 2: the eye's tips, not its height, determine the composition. */
.site-header{max-width:none;padding:24px 4vw}.site-header>span{font-size:13px}
main{min-height:calc(100svh - 100px);display:flex;align-items:center;padding-bottom:65px}
.hero{max-width:none;width:100%;padding:0;margin:auto}
.scene{width:102.2222vw;max-width:none;min-width:0;aspect-ratio:1000/580;margin:0 0 0 -1.1111vw}
.sun{left:40.5%;top:30.17241379%;width:19%;margin:0;aspect-ratio:1}
.solar-disk{background:transparent;overflow:hidden;border-radius:50%}
.solar-disk img{animation:none;transform:none}
.solar-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s linear;transform:none;border-radius:50%;background:#000}
.film-ready #solar-texture{visibility:hidden}
.corona{animation:none;opacity:.2;background:radial-gradient(circle,transparent 43%,#e7a95119 49%,transparent 67%)}
.tool-node{width:6.5%}.node-button{border-color:#a58044;background:radial-gradient(circle at 35% 20%,#211c14,#080b10 70%)}
.eye-contour{stroke-width:2}.circuit{stroke-width:2.2;opacity:.9}
.page-switch{margin:0 0 20px}.page-switch #page-label{font-size:0}.page-switch #page-label:after{content:'••';font-size:16px;letter-spacing:6px}
@media(max-width:700px){
 .site-header{padding:22px 5vw}.site-header>span{font-size:10px}.wordmark{font-size:25px}
 main{min-height:calc(100svh - 90px);padding-bottom:90px}.hero{padding:0}.scene{width:102.2222vw;margin:0 0 0 -1.1111vw;min-width:0}
 .sun,.scene.many .sun{left:40.5%;top:30.17241379%;width:19%;margin:0}
 .scene.many .sun{top:0;margin-top:17.5%}
 .scene.many{margin-bottom:24px}.scene.many .nodes{margin:2px auto 0;gap:27px 18px;width:76%}
 .scene.many .tool-node{width:58px}.scene.many .circuit-app{opacity:0}
 .tool-node{width:9%;min-width:40px;min-height:40px}
}
/* The tight viewBox removes unused space without changing the tip margin rule. */
.scene{aspect-ratio:1000/460}.sun{top:29.34782609%}
.solar-disk{mix-blend-mode:screen;mask-image:radial-gradient(circle,#000 55%,#000 58%,transparent 68%)}
.tool-node.preview:after{display:none}
main{padding-bottom:45px}
@media(max-width:700px){
 .scene{aspect-ratio:1000/460}.sun{top:29.34782609%}
 .scene.many .eye{aspect-ratio:1000/460}.scene.many .sun{top:0;margin-top:13.5%}
 main{padding-bottom:90px}
}

html{overflow-x:hidden}main{overflow-x:clip;min-width:0}.hero{min-width:0}
/* One composited solar surface; no nested video masks or blending contexts. */
.solar-disk{overflow:visible;mix-blend-mode:normal;mask-image:none;background:none;border-radius:0}
.solar-video{display:none!important}.solar-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
.solar-shade{z-index:3;inset:0;border-radius:0;background:radial-gradient(circle,#010203 0%,#010203 55%,transparent 68%)}
.film-ready #solar-texture{display:none}
.gold-terminal{fill:url('#gold');stroke:#ffdb8f;stroke-width:.45;pointer-events:none}
.circuit-ambient{stroke-width:1.35;opacity:.82;pointer-events:none}
.tool-node{width:6.5%}.tool-node.preview{display:none}
@media(max-width:700px){.tool-node{min-width:0;min-height:0;width:6.5%}.node-button{min-width:0;min-height:0}.scene:not(.many) .node-button:after{content:'';position:absolute;inset:-9px;border-radius:50%}.scene.many .tool-node{width:58px}}

/* Capacity previews use real disc footprints, with no interactive fake apps. */
.tool-node,.scene.many .tool-node{width:var(--node-size,6.5%)}
.tool-node.preview{display:block;pointer-events:none}.tool-node.preview:before,.tool-node.preview:after{display:none}
.tool-node.preview .node-button{border:1px solid #8c713e;background:radial-gradient(circle at 35% 20%,#211c14,#080b10 70%);cursor:default;box-shadow:inset 0 0 0 4px #0c1015}
@media(max-width:700px){
 .scene.many{aspect-ratio:1000/460;margin-bottom:0}
 .scene.many .eye{position:absolute;inset:0;width:100%;height:100%}
 .scene.many .sun{left:40.5%;top:29.34782609%;width:19%;margin:0}
 .scene.many .nodes{position:absolute;inset:0;display:block;width:auto;margin:0}
 .scene.many .tool-node{position:absolute;transform:translate(-50%,-50%)}
 .scene.many .circuit-app{opacity:.9}
}

/* True-black space: static points plus independently timed, restrained twinkles. */
html{background:#000}
.star-map{position:absolute;inset:0;width:100%;height:100%}
.twinkle-star{position:absolute;width:var(--star-size);height:var(--star-size);border-radius:50%;background:#e1eaff;box-shadow:0 0 5px 1px #b4ceff55;opacity:.22;animation:star-twinkle var(--twinkle-duration) ease-in-out var(--twinkle-delay) infinite}
@keyframes star-twinkle{0%,16%,78%,100%{opacity:.16}37%{opacity:.48}48%{opacity:.9}59%{opacity:.38}64%{opacity:.52}}
/* The aura is revealed separately, after the camera, circuits and app nodes. */
.eye-contour.contour-shadow{stroke:#e8b75d;stroke-width:5;opacity:0;filter:url('#eye-aura')}

main{position:relative;z-index:1}

/* Fine, outward plasma motion shares the final aura fade; the rim stays crisp. */
.eye-radiance{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;z-index:-1}

/* The existing native app link covers the complete description card, including
   its padding. Keeps keyboard activation and normal browser link actions. */
.tool-detail .detail-open::after{content:'';position:absolute;inset:0;border-radius:12px;cursor:pointer}
.tool-detail .detail-open:focus-visible{outline:none}
.tool-detail .detail-open:focus-visible::after{outline:2px solid #ffe0a0;outline-offset:4px}