:root { --canvas:#060d15; --canvas-soft:#0a1522; --panel:#0d1c2b; --ink:#edf6ff; --muted:#9aafc2; --dim:#668198; --line:rgba(139,194,226,.22); --line-strong:rgba(113,211,239,.52); --cyan:#48d9ef; --blue:#68a8ff; --mint:#69e3bc; --violet:#9c7bff; --content:76rem; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--canvas); color:var(--ink); font:400 16px/1.6 "IBM Plex Sans",sans-serif; } a { color:inherit; } img { max-width:100%; } .shell { width:min(calc(100% - 3rem),var(--content)); margin-inline:auto; }
.skip-link { position:fixed; z-index:90; top:1rem; left:1rem; transform:translateY(-200%); padding:.7rem .9rem; background:var(--mint); color:#06131a; font:600 .72rem/1 "IBM Plex Mono",monospace; }.skip-link:focus { transform:translateY(0); }
.project-header { position:relative; z-index:30; border-bottom:1px solid var(--line); background:rgba(6,13,21,.84); backdrop-filter:blur(18px); }.header-inner { display:flex; min-height:4.5rem; align-items:center; justify-content:space-between; gap:1rem; }.brand { display:inline-flex; align-items:center; gap:.65rem; color:#f7fbff; font:600 .92rem/1 "IBM Plex Sans",sans-serif; text-decoration:none; }.mark { display:inline-grid; width:1.8rem; height:1.8rem; place-items:center; border:1px solid var(--cyan); color:var(--cyan); font:500 .48rem/1 "IBM Plex Mono",monospace; box-shadow:inset 0 0 0 3px rgba(72,217,239,.08); }.language-links { display:flex; gap:.25rem; }.language-links a { padding:.42rem .5rem; color:var(--muted); font:500 .67rem/1 "IBM Plex Mono",monospace; text-decoration:none; }.language-links a:hover { color:var(--ink); }.language-links a[aria-current="page"] { color:var(--mint); box-shadow:inset 0 -1px 0 var(--mint); }
.sentinel-hero { position:relative; isolation:isolate; overflow:hidden; padding:clamp(4.5rem,10vw,9rem) 0 clamp(5rem,10vw,9.5rem); background:radial-gradient(circle at 76% 26%,rgba(20,79,122,.36),transparent 29rem),radial-gradient(circle at 12% 91%,rgba(47,116,136,.18),transparent 27rem),var(--canvas); }.sentinel-hero::before,.sentinel-hero::after { position:absolute; z-index:-1; content:""; pointer-events:none; }.sentinel-hero::before { inset:0; opacity:.72; background-image:linear-gradient(rgba(113,194,234,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(113,194,234,.055) 1px,transparent 1px); background-size:4.5rem 4.5rem; mask-image:linear-gradient(105deg,#000,rgba(0,0,0,.4) 53%,transparent 88%); }.sentinel-hero::after { top:-15rem; right:-14rem; width:44rem; height:44rem; border:1px solid rgba(72,217,239,.1); border-radius:50%; box-shadow:0 0 0 5rem rgba(72,217,239,.02),0 0 0 10rem rgba(72,217,239,.018); }.hero-grid { position:relative; display:grid; grid-template-columns:minmax(17rem,.78fr) minmax(30rem,1.22fr); gap:clamp(3rem,8vw,7rem); align-items:center; }.hero-copy { position:relative; }.eyebrow,.section-kicker { margin:0 0 1rem; color:var(--mint); font:500 .7rem/1.4 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }.eyebrow span { display:inline-block; width:.5rem; height:.5rem; margin-right:.55rem; transform:rotate(45deg); background:var(--mint); box-shadow:0 0 1rem rgba(105,227,188,.62); } h1,h2,h3 { margin:0; font-family:"Space Grotesk",sans-serif; line-height:1.04; } h1 { max-width:7ch; font-size:clamp(4rem,8.5vw,7.3rem); letter-spacing:-.077em; } h2 { max-width:14ch; font-size:clamp(2.25rem,4.5vw,4rem); letter-spacing:-.065em; }.hero-lede { max-width:32rem; margin:1.65rem 0 0; color:#f5fbff; font-size:clamp(1.15rem,2vw,1.53rem); line-height:1.42; }.hero-detail { max-width:33rem; margin:1rem 0 0; color:var(--muted); }.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }.button-primary,.button-secondary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:3rem; padding:.78rem 1rem; border:1px solid transparent; font:500 .72rem/1 "IBM Plex Mono",monospace; letter-spacing:.03em; text-decoration:none; transition:transform 180ms ease,background 180ms ease,border-color 180ms ease; }.button-primary { background:var(--mint); color:#06141a; box-shadow:.45rem .45rem 0 rgba(105,227,188,.16); }.button-secondary { border-color:var(--line-strong); color:#e5f1fb; }.button-primary:hover { transform:translate(-2px,-2px); background:#a6f4d8; }.button-secondary:hover,.release-links > a:not(.button-primary):hover { border-color:var(--cyan); color:var(--cyan); }.platform-note { margin:1rem 0 0; color:var(--dim); font:400 .68rem/1.5 "IBM Plex Mono",monospace; }.hero-signals { display:flex; flex-wrap:wrap; gap:.45rem 1rem; margin-top:2rem; padding-top:.9rem; border-top:1px solid var(--line); color:var(--dim); font:500 .57rem/1.4 "IBM Plex Mono",monospace; letter-spacing:.06em; }.hero-signals span { display:inline-flex; align-items:center; gap:.35rem; }.hero-signals i { width:.35rem; height:.35rem; border:1px solid var(--cyan); border-radius:50%; }.hero-signals b { color:#c0d6e7; font-weight:500; }
.hero-screen { position:relative; z-index:1; margin:0; padding:1rem; border:1px solid var(--line-strong); background:linear-gradient(135deg,rgba(24,63,93,.54),rgba(8,18,29,.88)); box-shadow:1.2rem 1.2rem 0 rgba(41,131,166,.12),0 2.5rem 6rem rgba(0,0,0,.45); }.hero-screen::before,.hero-screen::after { position:absolute; width:5rem; height:5rem; content:""; pointer-events:none; }.hero-screen::before { top:-.35rem; left:-.35rem; border-top:3px solid var(--cyan); border-left:3px solid var(--cyan); }.hero-screen::after { right:-.35rem; bottom:-.35rem; border-right:3px solid var(--mint); border-bottom:3px solid var(--mint); }.hero-frame-label { display:flex; justify-content:space-between; gap:1rem; margin:0 0 .75rem; color:var(--muted); font:500 .6rem/1 "IBM Plex Mono",monospace; letter-spacing:.1em; }.hero-frame-label span:last-child { color:var(--mint); }.hero-screen .shot-open { position:relative; display:block; overflow:hidden; width:100%; padding:0; border:1px solid rgba(116,190,239,.42); background:#081019; cursor:zoom-in; }.hero-screen .shot-open::after { position:absolute; inset:0; background:linear-gradient(105deg,transparent 44%,rgba(109,214,246,.1) 49%,transparent 54%); content:""; pointer-events:none; }.hero-screen img { display:block; width:100%; height:auto; }.hero-rail { display:flex; flex-wrap:wrap; gap:.8rem 1.25rem; margin:.9rem 0 0; color:#8da9be; font:400 .66rem/1.6 "IBM Plex Mono",monospace; }.hero-rail span { position:relative; padding-left:.85rem; }.hero-rail span::before { position:absolute; left:0; top:.52em; width:.34rem; height:.34rem; transform:rotate(45deg); background:var(--blue); content:""; }.hero-rail b { color:var(--mint); font-weight:500; }.hero-orbit { position:absolute; z-index:2; top:-2rem; right:-1.25rem; display:grid; width:7.3rem; height:7.3rem; place-items:center; border:1px solid rgba(105,227,188,.66); border-radius:50%; background:rgba(7,17,27,.88); box-shadow:0 0 0 .55rem rgba(7,17,27,.86),0 0 2.4rem rgba(72,217,239,.23); }.hero-orbit img { width:3.6rem; height:3.6rem; border-radius:1rem; }.hero-orbit::before,.hero-orbit::after { position:absolute; border:1px solid rgba(72,217,239,.42); border-radius:50%; content:""; }.hero-orbit::before { inset:.55rem -1.55rem; }.hero-orbit::after { inset:-1.25rem .65rem; transform:rotate(38deg); }.hero-orbit i { position:absolute; width:.38rem; height:.38rem; border-radius:50%; background:var(--mint); box-shadow:0 0 .7rem var(--mint); }.hero-orbit i:nth-of-type(1) { top:.5rem; right:1.8rem; }.hero-orbit i:nth-of-type(2) { right:-.32rem; bottom:1.5rem; }.hero-orbit i:nth-of-type(3) { bottom:.8rem; left:.9rem; }.shot-open { -webkit-tap-highlight-color:transparent; }
.sentinel-section { position:relative; padding:clamp(5rem,10vw,10rem) 0; }.facts-section { background:linear-gradient(180deg,#e5f0f3,#cadce2); color:#0c2638; }.facts-section::before { position:absolute; inset:0; opacity:.32; background-image:radial-gradient(#3a7093 .7px,transparent .7px); background-size:.8rem .8rem; content:""; mask-image:linear-gradient(90deg,#000,transparent 70%); }.facts-layout { position:relative; display:grid; grid-template-columns:minmax(16rem,.8fr) minmax(29rem,1.2fr); gap:clamp(3rem,8vw,8rem); align-items:start; }.facts-section .section-kicker { color:#147366; }.facts-intro h2 { max-width:9ch; }.facts-axis { display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:center; margin-top:3rem; color:#47718a; font:500 .62rem/1 "IBM Plex Mono",monospace; letter-spacing:.08em; }.facts-axis i { height:1px; background:#78a4ba; }.facts-axis span:nth-of-type(2) { grid-column:1; }.facts-axis i:nth-of-type(2) { grid-column:2; }.facts-axis span:nth-of-type(3) { grid-column:1; }.facts-grid { display:grid; gap:1rem; }.signal-card { position:relative; min-height:10.5rem; padding:1.5rem 1.6rem 1.6rem 2rem; border:1px solid rgba(51,101,130,.42); background:rgba(247,252,253,.72); box-shadow:.5rem .5rem 0 rgba(37,93,120,.09); }.signal-card::before { position:absolute; top:1.5rem; bottom:1.5rem; left:.75rem; width:3px; background:var(--blue); content:""; }.signal-upstream::before { background:var(--mint); }.signal-reference::before { background:var(--violet); }.signal-card > span { color:#276a95; font:500 .63rem/1 "IBM Plex Mono",monospace; letter-spacing:.08em; }.signal-upstream > span { color:#16806b; }.signal-reference > span { color:#7052c9; }.signal-card h3 { margin-top:.9rem; font-size:1.35rem; letter-spacing:-.035em; }.signal-card p { max-width:37rem; margin:.6rem 0 0; color:#42647b; }
.operation-section { overflow:hidden; background:#091521; }.operation-section::before { position:absolute; inset:0; opacity:.46; background:linear-gradient(90deg,transparent 0 49.8%,rgba(93,182,219,.16) 50% 50.2%,transparent 50.4%),radial-gradient(circle at 50% 50%,rgba(40,142,171,.19),transparent 31rem); content:""; pointer-events:none; }.operation-console { position:relative; display:grid; grid-template-columns:minmax(16rem,.75fr) minmax(25rem,1.25fr); gap:clamp(3rem,8vw,8rem); padding:clamp(1.5rem,4vw,3rem); border:1px solid var(--line-strong); background:linear-gradient(135deg,rgba(16,43,64,.9),rgba(8,19,30,.84)); }.operation-console::after { position:absolute; right:0; bottom:0; width:10rem; height:4rem; border-top:1px solid var(--cyan); border-left:1px solid var(--cyan); content:""; opacity:.45; }.operation-heading { display:flex; flex-direction:column; align-items:flex-start; }.operation-heading h2 { max-width:10ch; }.operation-stamp { margin:auto 0 0; padding-top:2rem; color:var(--mint); font:500 .63rem/1.5 "IBM Plex Mono",monospace; letter-spacing:.09em; }.operation-list { display:grid; gap:1rem; margin:0; padding:0; list-style:none; counter-reset:operation; }.operation-list li { position:relative; display:grid; grid-template-columns:2.2rem 1fr; gap:.85rem 1rem; padding:1.15rem 1.2rem; border:1px solid var(--line); background:rgba(7,18,28,.38); }.operation-list li::before { counter-increment:operation; content:"0" counter(operation); color:var(--mint); font:500 .68rem/1.6 "IBM Plex Mono",monospace; }.operation-list li::after { position:absolute; top:calc(50% - .3rem); left:-.37rem; width:.58rem; height:.58rem; transform:rotate(45deg); background:var(--cyan); content:""; }.operation-list strong { grid-column:2; font-size:1.05rem; }.operation-list span { grid-column:2; color:var(--muted); }
.gallery-section { background:#050a10; }.gallery-section::before { position:absolute; inset:0; opacity:.55; background:radial-gradient(ellipse at 15% 25%,rgba(49,130,154,.15),transparent 28rem),radial-gradient(ellipse at 88% 75%,rgba(100,69,183,.13),transparent 31rem); content:""; pointer-events:none; }.gallery-section .shell { position:relative; }.section-heading { display:flex; gap:2rem; align-items:end; justify-content:space-between; }.section-heading > p { max-width:29rem; margin:0; color:var(--muted); }.gallery { position:relative; margin-top:3rem; padding:.7rem; border:1px solid var(--line-strong); background:rgba(12,25,37,.75); box-shadow:1rem 1rem 0 rgba(75,134,169,.1); }.gallery::before { position:absolute; top:-.25rem; left:8%; width:30%; height:2px; background:var(--cyan); content:""; }.gallery-viewport { position:relative; border:1px solid var(--line); background:#08131e; }.gallery-status { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; margin:0; padding:.82rem 1rem; border-bottom:1px solid var(--line); color:#cfe1f2; font:500 .68rem/1 "IBM Plex Mono",monospace; letter-spacing:.04em; }.gallery-mode { color:var(--mint); font-size:.58rem; letter-spacing:.1em; }.gallery-name::before { display:inline-block; width:.4rem; height:.4rem; margin-right:.5rem; transform:rotate(45deg); background:var(--cyan); content:""; }.gallery-status .gallery-count { color:var(--dim); }.gallery-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }.gallery-track::-webkit-scrollbar { display:none; }.gallery-track figure { flex:0 0 100%; scroll-snap-align:center; margin:0; }.gallery-track figure figcaption { padding:.65rem 1rem; color:#8ba6bc; font:500 .64rem/1 "IBM Plex Mono",monospace; }.gallery-track .shot-open { display:block; width:100%; padding:0; border:0; border-bottom:1px solid var(--line); background:#0c1621; cursor:zoom-in; }.gallery-track img { display:block; width:100%; height:auto; aspect-ratio:1907 / 900; object-fit:cover; object-position:top; }.has-js .gallery-track { overflow:hidden; scroll-snap-type:none; }.has-js .gallery-track figure { transition:opacity 320ms ease; }.has-js .gallery-track figure[hidden] { display:none; }.gallery-arrow { position:absolute; top:calc(50% + .8rem); display:none; width:2.7rem; height:2.7rem; align-items:center; justify-content:center; transform:translateY(-50%); border:1px solid var(--line-strong); background:rgba(6,13,21,.9); color:var(--ink); font-size:1rem; cursor:pointer; }.gallery-arrow:hover { border-color:var(--cyan); color:var(--cyan); }.gallery-prev { left:.8rem; }.gallery-next { right:.8rem; }.has-js .gallery-arrow { display:inline-flex; }.gallery-thumbs { display:flex; gap:.6rem; overflow-x:auto; margin-top:.8rem; padding-bottom:.4rem; scrollbar-width:thin; }.gallery-thumbs a { position:relative; flex:0 0 auto; width:8.5rem; border:1px solid var(--line); background:#0c1621; text-decoration:none; }.gallery-thumbs a img { display:block; width:100%; height:4.4rem; object-fit:cover; object-position:top; opacity:.48; transition:opacity 200ms ease; }.gallery-thumbs a span { display:block; padding:.38rem .5rem; color:#8ba6bc; font:500 .6rem/1 "IBM Plex Mono",monospace; }.gallery-thumbs a:hover img { opacity:.8; }.gallery-thumbs a[aria-selected="true"] { border-color:var(--mint); box-shadow:inset 0 2px 0 var(--mint); }.gallery-thumbs a[aria-selected="true"] img { opacity:1; }.gallery-thumbs a[aria-selected="true"] span { color:var(--mint); }
.release-section { background:linear-gradient(125deg,#0a1c29,#102b3a); }.release-section::before { position:absolute; inset:0; background:linear-gradient(90deg,rgba(105,227,188,.08) 1px,transparent 1px),linear-gradient(rgba(105,227,188,.08) 1px,transparent 1px); background-size:3rem 3rem; content:""; mask-image:linear-gradient(90deg,#000,transparent 75%); }.release-panel { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(1.5rem,4vw,4rem); padding:clamp(2rem,5vw,4rem); border:1px solid rgba(105,227,188,.55); background:rgba(6,15,23,.68); box-shadow:.8rem .8rem 0 rgba(105,227,188,.1); }.release-beacon { position:relative; display:grid; width:6.2rem; height:6.2rem; place-items:center; border:1px solid var(--mint); border-radius:50%; }.release-beacon::before { position:absolute; inset:.45rem; border:1px solid rgba(72,217,239,.7); border-radius:50%; content:""; }.release-beacon img { width:3.7rem; height:3.7rem; border-radius:1rem; }.release-beacon span { position:absolute; right:-1rem; bottom:-.55rem; padding:.24rem .35rem; background:#0a1c29; color:var(--mint); font:500 .56rem/1 "IBM Plex Mono",monospace; }.release-panel h2 { max-width:12ch; }.release-panel p:not(.section-kicker):not(.release-targets) { max-width:34rem; margin:1rem 0 0; color:var(--muted); }.release-targets { margin:1.25rem 0 0; color:var(--mint); font:500 .68rem/1.5 "IBM Plex Mono",monospace; letter-spacing:.03em; }.release-links { display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; min-width:11rem; }.release-links > a:not(.button-primary) { color:#a9c4d4; font:500 .7rem/1.4 "IBM Plex Mono",monospace; text-decoration:none; }
.project-footer { border-top:1px solid var(--line); padding:1.4rem 0; background:#050a10; }.project-footer .shell { display:flex; justify-content:space-between; gap:1rem; color:#7892a7; font:400 .68rem/1.5 "IBM Plex Mono",monospace; }.project-footer a { color:var(--mint); } a:focus-visible,button:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.lightbox { position:fixed; z-index:80; inset:0; width:100%; max-width:100%; height:100%; max-height:100%; margin:0; padding:0; border:0; background:transparent; color:var(--ink); }.lightbox:not([open]) { display:none; }.lightbox::backdrop { background:rgba(3,7,11,.94); }.lightbox[open] { display:flex; align-items:center; justify-content:center; background:rgba(3,7,11,.94); }.lightbox-figure { display:flex; flex-direction:column; gap:.8rem; align-items:center; max-width:min(94vw,90rem); margin:0; }.lightbox-figure img { max-width:94vw; max-height:82vh; width:auto; height:auto; border:1px solid rgba(116,190,239,.5); object-fit:contain; }.lightbox-status { display:flex; gap:1rem; color:#cfe1f2; font:500 .72rem/1 "IBM Plex Mono",monospace; letter-spacing:.04em; }.lightbox-status span:last-child { color:var(--dim); }.lightbox-close,.lightbox-nav { position:absolute; display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem; border:1px solid var(--line-strong); background:rgba(6,13,21,.86); color:var(--ink); font-size:1.4rem; cursor:pointer; }.lightbox-close { top:1rem; right:1rem; }.lightbox-nav { top:50%; transform:translateY(-50%); font-size:1.2rem; }.lightbox-prev { left:1rem; }.lightbox-next { right:1rem; }.lightbox-close:hover,.lightbox-nav:hover { border-color:var(--cyan); color:var(--cyan); } body.lightbox-open { overflow:hidden; }
@media (max-width:960px) { .hero-grid,.facts-layout,.operation-console { grid-template-columns:1fr; }.hero-copy { max-width:43rem; }.hero-screen { max-width:52rem; }.facts-intro h2 { max-width:15ch; }.facts-axis { max-width:30rem; }.section-heading { align-items:start; flex-direction:column; }.release-panel { grid-template-columns:auto 1fr; }.release-links { grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; } }
@media (max-width:680px) { .shell { width:min(calc(100% - 2rem),var(--content)); }.sentinel-hero { padding-top:4rem; }.hero-screen { padding:.6rem; }.hero-orbit { top:-1.6rem; right:.3rem; width:5.5rem; height:5.5rem; }.hero-orbit img { width:2.8rem; height:2.8rem; }.hero-orbit::before { inset:.4rem -.8rem; }.hero-orbit::after { inset:-.8rem .5rem; }.hero-orbit i { display:none; }.hero-frame-label { padding-right:4.8rem; }.facts-layout { gap:2.5rem; }.signal-card { min-height:0; padding:1.3rem 1.2rem 1.35rem 1.7rem; }.operation-console { padding:1.25rem; }.operation-list li { grid-template-columns:1.8rem 1fr; }.gallery { margin-inline:-.2rem; padding:.45rem; }.gallery-status { grid-template-columns:auto 1fr; }.gallery-count { grid-column:2; }.gallery-mode { grid-row:1 / span 2; }.gallery-thumbs a { width:6.5rem; }.gallery-thumbs a img { height:3.4rem; }.release-panel { grid-template-columns:1fr; }.release-beacon { width:4.8rem; height:4.8rem; }.release-beacon img { width:2.8rem; height:2.8rem; } h1 { font-size:clamp(3.3rem,16vw,4.8rem); }.project-footer .shell { align-items:flex-start; flex-direction:column; }.lightbox-nav { width:2.6rem; height:2.6rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.button-primary,.gallery-thumbs a img,.has-js .gallery-track figure { transition:none; } }