:root{color-scheme:dark;--ink:#030710;--white:#eff5ff;--blue:#68bcff;--muted:#8499bb;--scale:min(1,calc(100vw / 1664px),calc(100dvh / 936px));--reel-parallax:0;--font:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow-x:hidden;background:var(--ink)}body{font-family:var(--font);color:var(--white);overflow:hidden;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible,section:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #a6dcff;outline-offset:6px}button:hover{color:white}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:-70px;left:20px;z-index:90;background:#07172c;padding:14px}.skip:focus{top:12px}#universe{position:fixed;inset:0;overflow:hidden;pointer-events:none}#world-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}.renderer-ready #world-canvas{opacity:1}.css-universe{position:absolute;inset:0;background:radial-gradient(ellipse at 82% 32%,#08152d66,transparent 32%),radial-gradient(ellipse at 50% 75%,#102d4888,transparent 56%),#02060d;transform:translate3d(calc(var(--reel-parallax) * -28px),0,0) scale(1.012);transition:opacity 1s,transform .08s linear}.renderer-ready .css-universe{opacity:0}.css-stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 41px 88px,#c6d9ff 90%,transparent),radial-gradient(1px 1px at 120px 29px,#557dba 90%,transparent),radial-gradient(.7px .7px at 190px 174px,#ced3d9 90%,transparent);background-size:253px 271px,317px 213px,179px 229px}.css-ring{position:absolute;width:35%;height:14%;left:-1%;top:14%;border:22px dotted #669cff66;border-radius:50%;transform:rotate(-30deg);box-shadow:0 0 30px #377aff22,inset 0 0 15px #306fff55}.css-planet{position:absolute;left:88%;top:13%;width:3.5%;aspect-ratio:1;border-radius:50%;box-shadow:inset 3px 3px 6px #779ecc88;background:radial-gradient(circle at 18% 12%,#223044,#04070d 60%)}.css-terrain{position:absolute;bottom:0;width:100%;height:39%}.atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 76%,#3168ac0a,transparent 45%)}.vignette{position:absolute;inset:0;background:linear-gradient(180deg,#01030725,transparent 16%,transparent 78%,#01030862),radial-gradient(ellipse at 50% 45%,transparent 43%,#00050e30 100%)}.composition{position:absolute;left:50%;top:50%;width:1664px;height:936px;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;isolation:isolate;overflow:hidden}.site-header{position:absolute;z-index:20;left:24px;right:24px;top:18px;display:flex;align-items:flex-start;justify-content:space-between}.identity{width:290px;display:block}.wordmark{display:block}.wordmark svg{display:block;width:100%;height:100%;overflow:visible}.identity>.wordmark{width:289px;height:21px}.identity-sub{display:block;font-size:9px;letter-spacing:5px;padding-top:9px;color:#9badce;white-space:nowrap}.main-nav{height:32px;display:flex;gap:51px;align-items:flex-start;position:relative;padding:0 6px 0 31px}.main-nav:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,#16366199,#3c556a80)}.nav-item{font-size:12px;letter-spacing:2.5px;height:32px;line-height:16px;padding:0 0 15px;position:relative}.nav-item.active:after{content:"";position:absolute;bottom:3px;height:2px;left:0;right:0;background:#b7deff;box-shadow:0 0 4px 1px #148dff,0 0 20px 3px #0086ff66}.nav-separator{width:1px;height:15px;background:#53607170;margin-left:19px}.icon-button{padding:0;width:20px;height:20px}.icon-button svg{width:100%;height:100%}.search-toggle{margin-left:-22px}.edge-copy{position:absolute;top:98px;font-size:10px;line-height:16.5px;letter-spacing:2.3px;color:#8b9bbf;text-shadow:2px 2px 3px #000}.edge-left{left:25px}.edge-right{right:24px;text-align:right}.hero-title{position:absolute;top:89px;left:50%;width:620px;text-align:center;transform:translateX(-50%);z-index:2}.eyebrow{font-size:14px;letter-spacing:8px;font-weight:400;margin:0}.hero-title h1{margin:19px auto 0;width:565px;height:42px}.hero-subtitle{margin:22px 0 0;font-size:18px;letter-spacing:12px;color:#b4c0db;text-indent:12px}.carousel{position:absolute;inset:188px 0 204px;outline:0;touch-action:pan-y;z-index:5}.card-space{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 50%;transform-style:preserve-3d}.project-card{position:absolute;top:50%;left:50%;height:444px;width:590px;transform-style:preserve-3d;will-change:transform,width;cursor:pointer;outline:none;user-select:none;-webkit-user-select:none}.card-shell{position:absolute;inset:0;border:1.4px solid #b8ddedc9;border-radius:8px;overflow:hidden;background:#050b13;box-shadow:0 0 2px #7eaeeb,0 0 19px #0a294f44;backface-visibility:hidden}.project-card[data-active="true"] .card-shell{border-color:#89cfff;box-shadow:0 0 2px #c6e9ff,0 0 18px #1688fc44,0 20px 35px -22px #267cffbb}.card-art{position:absolute;inset:0;overflow:hidden}.card-art img{position:absolute;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;pointer-events:none;filter:saturate(.84) brightness(.84)}.card-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00051073 0,transparent 21%,transparent 46%,#01070d80 66%,#00050afc 100%)}.project-card[data-project="vtv"] .card-art img{height:86%;object-fit:fill;filter:saturate(.95) brightness(.96)}.project-card[data-project="vtv"] .card-art:after{background:linear-gradient(180deg,transparent 0,transparent 57%,#01070d3b 67%,#00050afb 91%)}.project-card[data-project="press"] .card-art img{object-position:65% 46%}.project-card[data-project="kroniki"] .card-art img{filter:sepia(.16) saturate(.6) brightness(.94)}.project-card[data-project="games"] .card-art img{object-position:51% 40%}.card-topline{position:absolute;top:25px;left:28px;right:18px;font-family:Impact,'Arial Narrow',var(--font);font-stretch:condensed;font-weight:700;letter-spacing:.2px;font-size:40px;line-height:1.04;text-shadow:1px 3px 8px #02040855}.project-card[data-project="vtv"] .card-topline{display:none}.project-card[data-project="kroniki"] .card-topline{font-family:Georgia,serif;font-size:39px;letter-spacing:0;font-weight:400}.card-caption{position:absolute;left:28px;right:24px;bottom:23px;text-align:left;color:white;text-shadow:2px 2px 3px #000}.card-heading{font-size:16px;line-height:1.4;letter-spacing:3.6px;margin:0 0 9px;font-weight:500}.card-tagline{font-size:11px;letter-spacing:2.5px;line-height:1.6;text-transform:uppercase;margin:0;max-width:260px}.card-expanded{display:none}.project-card[data-active="true"] .card-caption{left:20px;right:20px;bottom:34px;text-align:center}.project-card[data-active="true"] .card-heading{font-size:28px;font-weight:600;letter-spacing:5px;margin-bottom:3px;line-height:1.2}.project-card[data-active="true"] .card-expanded{display:block;font-size:15px;letter-spacing:3.7px;line-height:1.5;margin:0}.project-card[data-active="true"] .card-tagline{font-size:18px;letter-spacing:0;line-height:1.4;max-width:none;text-transform:none;margin-top:6px}.project-card[data-active="true"] .card-topline{font-size:48px}.project-card[data-active="true"][data-project="kroniki"] .card-topline{font-size:45px}.card-enter{position:absolute;left:50%;bottom:-23px;transform:translateX(-50%) translateZ(3px);height:47px;width:205px;border:1.4px solid #e3f3ff;border-radius:50px;background:linear-gradient(#030a14,#01050a);box-shadow:0 0 3px #7fcaff,0 0 22px #247cf366;display:flex;align-items:center;justify-content:center;gap:18px;font-size:14px;letter-spacing:1.7px;opacity:0;pointer-events:none;transition:opacity .2s,box-shadow .2s;white-space:nowrap}.card-enter svg{width:23px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}.project-card[data-active="true"] .card-enter{opacity:1;pointer-events:auto}.card-enter:hover{box-shadow:0 0 5px #90ddff,0 0 35px #338cffb0;background:#081527}.card-reflection{position:absolute;left:3%;right:3%;height:35px;bottom:-47px;background:radial-gradient(ellipse,#307bcb38,transparent 65%);filter:blur(8px);pointer-events:none}.carousel-arrow{position:absolute;z-index:100;top:50%;transform:translateY(-50%);width:48px;height:48px;border:1px solid #879bb585;border-radius:50%;background:#030a12ce;backdrop-filter:blur(8px);display:grid;place-items:center;transition:background .2s,border-color .2s}.carousel-arrow:hover{background:#102339;border-color:#c7e4ff}.carousel-arrow svg{width:24px;height:24px;fill:none;stroke:#c4d0e6;stroke-width:1.3}.previous{left:17px}.next{right:17px}.pagination{position:absolute;bottom:61px;left:50%;transform:translateX(-50%);text-align:center;z-index:20}.page-count{font-size:13px;letter-spacing:4px;display:flex;gap:11px;align-items:center;justify-content:center}.count-slash{font-size:12px;color:#b4bfd0}.count-total{font-size:9px;color:#c4cee4}.pagination-dots{display:flex;gap:8px;margin-top:18px;align-items:center;justify-content:center}.pagination-dot{width:24px;height:16px;padding:6px 0;position:relative}.pagination-dot:before{content:"";display:block;height:5px;border:1px solid #61708780;border-radius:6px;box-sizing:border-box}.pagination-dot[aria-current="true"]{width:32px}.pagination-dot[aria-current="true"]:before{background:#d9f0ff;border-color:#689ffe;box-shadow:0 0 4px 1px #2875ff,0 0 14px #2875ffbb}.site-footer{position:absolute;left:26px;right:26px;bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.site-footer p{font-size:9px;letter-spacing:2.7px;line-height:17px;color:#8a9cbf;margin:0}.footer-left{position:relative}.footer-left svg{width:200px;height:12px;position:absolute;left:0;bottom:-6px;fill:none;stroke:#536776;stroke-width:1}.footer-right{text-align:right}.boot{position:fixed;z-index:60;inset:0;background:#030710;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:25px;pointer-events:none;transition:opacity .55s,visibility .55s;animation:boot-safety 1s 7s forwards}.boot .wordmark{width:min(380px,80vw);height:32px}.boot p{font-size:10px;letter-spacing:4px;text-align:center}.boot-track{width:150px;height:2px;background:linear-gradient(90deg,transparent,#83ceff,transparent);animation:boot-light 1.3s ease-in-out infinite}.boot.done{opacity:0;visibility:hidden}@keyframes boot-light{50%{opacity:.3;transform:scaleX(.4)}}@keyframes boot-safety{to{opacity:0;visibility:hidden}}.system-toggle{position:fixed;z-index:40;bottom:4px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:1.6px;display:flex;align-items:center;gap:9px;padding:4px 12px;color:#6581a2;background:#02060c9e;opacity:.65}.system-toggle:hover,.system-toggle:focus-visible{opacity:1}.system-toggle span:last-child{font-size:12px}.system-panel{position:fixed;bottom:0;left:0;right:0;z-index:80;background:#030914ed;backdrop-filter:blur(20px);padding:16px 24px 12px;box-shadow:0 -12px 50px #0009}.system-heading{display:flex;justify-content:space-between;align-items:center;letter-spacing:2px;font-size:10px;color:#a4cbee}.system-heading button{font-size:25px}.system-settings{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:10px;letter-spacing:1px;margin-bottom:8px}.system-settings select{background:#0c1c2e;color:#c0e4ff;border:0;padding:5px;margin-left:8px}.system-settings button{font-size:10px;padding:7px 8px;background:#122033}.system-settings output{color:#a2bfdc}#console-log{white-space:pre-wrap;overflow:auto;max-height:105px;font-size:10px;line-height:1.7;color:#7496b4;margin:0}dialog{background:#06101beF;color:#edf5ff;border:1px solid #4f719457;border-radius:4px;width:min(580px,calc(100vw - 32px));padding:48px;box-shadow:0 25px 150px #000c;max-height:85dvh;overflow:auto}dialog::backdrop{background:#000711bc;backdrop-filter:blur(10px)}dialog .eyebrow{font-size:10px;letter-spacing:3px;color:#90adc8}dialog h2{font-size:42px;font-weight:400;line-height:1.08;letter-spacing:-1px;margin:28px 0 20px}dialog p:not(.eyebrow){line-height:1.8;font-size:14px;color:#a1b1c3}.dialog-close{position:absolute;top:14px;right:18px;font-size:28px}.dialog-action{margin-top:28px;padding:0;font-size:11px;letter-spacing:2px;display:flex;justify-content:space-between;width:100%}.contact-projects{display:flex;flex-wrap:wrap;gap:20px;padding-top:20px;font-size:11px;letter-spacing:2px}#project-search{display:block;border:0;border-bottom:1px solid #304961;width:100%;background:transparent;font-size:28px;padding:26px 0 18px;color:white;outline-offset:8px}.search-results{margin-top:20px;display:grid}.search-result{padding:15px 5px;display:flex;justify-content:space-between;align-items:center;text-align:left}.search-result:hover{background:#132a3c}.search-result strong{display:block;font-size:14px;font-weight:500;letter-spacing:2px}.search-result small{display:block;font-size:11px;color:#8eabc5;margin-top:5px}.noscript{position:fixed;z-index:30;inset:32% 10% auto;background:#06101bf0;padding:30px}.noscript a{display:inline-block;margin:15px}
@media(max-width:1023px){.composition{left:0;top:0;width:100%;height:100dvh;min-height:530px;transform:none}.site-header{left:22px;right:22px;top:24px}.identity{width:213px}.identity>.wordmark{width:213px;height:17px}.identity-sub{font-size:7px;letter-spacing:3px;padding-top:7px}.main-nav{gap:24px}.nav-item{font-size:10px;letter-spacing:1.6px}.nav-separator{margin-left:0}.search-toggle{margin-left:-6px}.hero-title{top:12%;width:80%}.hero-title h1{width:72%;height:40px;margin-top:17px}.hero-title .eyebrow{font-size:11px;letter-spacing:7px}.hero-subtitle{font-size:13px;letter-spacing:8px;margin-top:16px}.edge-copy{display:none}.carousel{inset:26% 0 17%;}.card-space{perspective:1000px}.pagination{bottom:8%}.site-footer{left:24px;right:24px;bottom:30px}.site-footer p{font-size:8px;letter-spacing:2px}.footer-left svg{width:120px}.carousel-arrow{width:42px;height:42px}.previous{left:15px}.next{right:15px}.project-card .card-caption{left:24px;right:20px}.project-card[data-active="true"] .card-heading{font-size:26px}.project-card[data-active="true"] .card-tagline{font-size:16px}}
@media(max-width:600px){.site-header{left:19px;right:18px;top:max(23px,env(safe-area-inset-top))}.identity{width:187px}.identity>.wordmark{width:187px;height:15px}.identity-sub{font-size:6px;letter-spacing:2.6px;padding-top:8px}.main-nav{gap:0;padding:0;height:28px}.main-nav .nav-item,.nav-separator{display:none}.main-nav:after{display:none}.search-toggle{width:22px;height:22px;margin:0;padding:2px}.hero-title{width:100%}.hero-title .eyebrow{font-size:9px;letter-spacing:6px}.hero-title h1{width:81%;height:28px;margin-top:17px}.hero-subtitle{font-size:10px;letter-spacing:5.8px;margin-top:13px}.carousel-arrow{top:auto;bottom:-42px;transform:none;width:43px;height:43px}.previous{left:30px}.next{right:30px}.pagination-dots{margin-top:12px;gap:5px}.page-count{font-size:11px}.site-footer{bottom:27px;left:19px;right:18px}.site-footer p{font-size:6px;line-height:12px;letter-spacing:1.45px}.footer-left svg{width:103px}.footer-right{max-width:170px}.project-card .card-topline{top:20px;left:22px}.project-card[data-active="true"] .card-topline{font-size:38px}.project-card[data-active="true"] .card-caption{bottom:40px;left:16px;right:16px}.project-card[data-active="true"] .card-heading{font-size:24px;letter-spacing:4px}.project-card[data-active="true"] .card-expanded{font-size:11px;letter-spacing:2.4px}.project-card[data-active="true"] .card-tagline{font-size:14px;line-height:1.5;margin:9px auto 0;max-width:250px}.card-enter{height:44px;width:174px;font-size:12px;bottom:-22px}.system-toggle{font-size:7px;bottom:3px}.system-panel{padding:10px 15px}.system-settings{gap:10px}.system-settings output{width:100%}dialog{padding:40px 25px}dialog h2{font-size:36px}.css-ring{width:85%;height:11%;left:-37%;top:19%}.css-planet{width:10%;top:19%;left:87%}}
@media(max-height:650px) and (min-width:601px) and (max-width:1023px){.hero-title{top:11%}.hero-title h1{height:25px;width:47%;margin-top:10px}.hero-subtitle{margin-top:9px;font-size:10px}.carousel{inset:25% 0 17%}.pagination{bottom:4%}.pagination-dots{margin-top:5px}.site-footer{bottom:22px}.site-header{top:14px}.card-enter{height:35px;bottom:-17px}.project-card[data-active="true"] .card-caption{bottom:22px}.project-card[data-active="true"] .card-heading{font-size:22px}.project-card[data-active="true"] .card-tagline{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.boot{animation:none}.project-card{will-change:auto}}
/* Keep the photographed card illustration at its original portrait scale. */
.project-card:not([data-active="true"]):not([data-project="vtv"]) .card-art img{object-fit:fill}
.project-card:not([data-project="vtv"]) .card-art:after{background:linear-gradient(180deg,#01050d55 0,transparent 24%,transparent 52%,#01070dcf 72%,#01060eff 80%)}
.css-ring{border:0;background-image:radial-gradient(1px 1px at 25% 40%,#b3c9ffcc 60%,transparent),radial-gradient(.8px .8px at 70% 65%,#648fe6bb 65%,transparent);background-size:9px 7px,13px 11px;mask-image:radial-gradient(ellipse closest-side,transparent 48%,#000 54%,#000 89%,transparent 99%);box-shadow:none;height:20%}
.project-card:not([data-active="true"]) .card-tagline{font-size:13px;letter-spacing:2.4px}

/* Mobile utility pages remain reachable through the search/menu control. */
.mobile-utility{display:none}
@media(max-width:600px){.mobile-utility{display:flex;gap:28px;margin-top:22px}.mobile-utility button{padding:12px 0;font-size:11px;letter-spacing:2px}}
@media(max-height:650px) and (min-width:601px) and (max-width:1023px){.composition{min-height:0}}


/* 2026-09-25: fallback/overlay counterpart to the native majestic 3D idle motion. */
.css-stars{will-change:transform,opacity;animation:cyb-stars-majestic 120s ease-in-out infinite alternate}
.css-ring{will-change:transform;transform-origin:46% 52%;animation:cyb-ring-majestic 155s ease-in-out infinite alternate}
.css-planet{will-change:transform;animation:cyb-planet-majestic 96s ease-in-out infinite alternate}
.css-terrain{will-change:transform;transform-origin:50% 100%;animation:cyb-terrain-majestic 112s ease-in-out infinite alternate}
.atmosphere{will-change:transform,opacity;transform-origin:50% 70%;animation:cyb-atmosphere-breathe 38s ease-in-out infinite alternate}
.vignette{will-change:opacity;animation:cyb-vignette-breathe 74s ease-in-out infinite alternate}
body.motion-paused .css-universe *,body.motion-paused .atmosphere,body.motion-paused .vignette{animation-play-state:paused!important}
@keyframes cyb-stars-majestic{0%{transform:translate3d(-.12%,-.05%,0) scale(1.002);opacity:.93}50%{transform:translate3d(.15%,.09%,0) scale(1.004);opacity:1}100%{transform:translate3d(.04%,-.12%,0) scale(1.003);opacity:.96}}
@keyframes cyb-ring-majestic{0%{transform:translate3d(-.6%,-.2%,0) rotate(-30.4deg) scale(.996)}50%{transform:translate3d(.35%,.35%,0) rotate(-28.7deg) scale(1.007)}100%{transform:translate3d(.8%,-.15%,0) rotate(-27.6deg) scale(1.002)}}
@keyframes cyb-planet-majestic{0%{transform:translate3d(-4%,1.5%,0) scale(.99)}50%{transform:translate3d(1%,-2.2%,0) scale(1.006)}100%{transform:translate3d(5%,.6%,0) scale(1.012)}}
@keyframes cyb-terrain-majestic{0%{transform:translate3d(-.08%,.02%,0) scale(1.0005)}50%{transform:translate3d(.06%,-.05%,0) scale(1.0015)}100%{transform:translate3d(.1%,.01%,0) scale(1.0008)}}
@keyframes cyb-atmosphere-breathe{0%{transform:scale(1);opacity:.82}50%{transform:scale(1.012);opacity:1}100%{transform:scale(1.006);opacity:.88}}
@keyframes cyb-vignette-breathe{0%{opacity:.94}50%{opacity:1}100%{opacity:.96}}

/* 2026-09-25: spiral-galaxy + forward-flight refinement.  The CSS layer is only
   the no-GPU fallback; native WebGPU/WebGL2 uses the particle/differential model. */
.css-ring{
  width:39%;height:21%;left:-2.5%;top:10.5%;border-radius:50%;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 50%,#fff3cde6 0 1.4%,#e9d1a49c 2.8%,#8caee559 7%,#315b9c24 18%,transparent 47%),
    radial-gradient(ellipse at 50% 50%,#557fd338,transparent 68%);
  mask-image:radial-gradient(ellipse closest-side,#000 0 72%,#000b 86%,transparent 100%);
  transform:rotate(-29deg);filter:drop-shadow(0 0 14px #427dce35);box-shadow:none;
  animation:cyb-galaxy-drift 74s ease-in-out infinite alternate;
}
.css-ring::before{
  content:"";position:absolute;inset:-34%;border-radius:50%;opacity:.92;
  background:
    repeating-conic-gradient(from 11deg,transparent 0 9deg,#9ebbf2a3 11deg 13deg,transparent 15deg 31deg),
    repeating-radial-gradient(ellipse at center,transparent 0 7px,#7da0e243 8px 9px,transparent 10px 17px);
  mask-image:radial-gradient(ellipse at center,transparent 0 4%,#000 10% 81%,transparent 97%);
  animation:cyb-galaxy-spin 42s linear infinite;
}
.css-ring::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(ellipse at 49% 50%,#fff8e9e8 0 1.1%,#e3c48e89 2.8%,transparent 8%),
    radial-gradient(ellipse at 50% 50%,transparent 0 15%,#07111d44 44%,transparent 72%);
  mix-blend-mode:screen;
}
body.motion-paused .css-ring::before{animation-play-state:paused!important}
.css-terrain{animation:cyb-terrain-forward 68s cubic-bezier(.18,.72,.25,1) 1 forwards}
@keyframes cyb-galaxy-spin{to{transform:rotate(360deg)}}
@keyframes cyb-galaxy-drift{0%{transform:translate3d(-.35%,-.16%,0) rotate(-29.7deg) scale(.995)}50%{transform:translate3d(.18%,.18%,0) rotate(-29deg) scale(1.005)}100%{transform:translate3d(.48%,-.08%,0) rotate(-28.4deg) scale(1.001)}}
@keyframes cyb-terrain-forward{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,3.4%,0) scale(1.11)}}
@media(max-width:600px){.css-ring{width:89%;height:16%;left:-39%;top:15.5%}}


/* 2026-09-25: active showcase artwork becomes a living window. Only the
   currently centred project animates; neighbouring thumbnails stay quiet. */
.card-art img{z-index:0;transform-origin:50% 48%;will-change:transform,filter}
.card-art:after{z-index:3;pointer-events:none}
.card-motion{position:absolute;inset:0;z-index:2;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .45s ease;background:radial-gradient(ellipse at 54% 60%,#3bbcff10,transparent 38%)}
.project-card[data-active="true"] .card-motion{opacity:1}
.project-card[data-active="true"] .card-art img{animation:cyb-active-art-drift 10.5s cubic-bezier(.42,0,.58,1) infinite alternate;filter:saturate(.98) brightness(.98)}
.project-card[data-active="true"] .card-motion:before{content:"";position:absolute;left:-18%;right:-18%;height:18%;top:-24%;background:linear-gradient(180deg,transparent,#9fdcff18 42%,#dff5ff4a 50%,#72c8ff16 58%,transparent);transform:skewY(-7deg);filter:blur(.2px);animation:cyb-card-scan 5.6s linear infinite}
.project-card[data-active="true"] .card-motion:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(112deg,transparent 0 31px,#76bfff10 32px 33px,transparent 34px 72px),radial-gradient(circle at 74% 41%,#b8e4ff24 0 1px,transparent 2px),radial-gradient(circle at 31% 29%,#88c7ff20 0 1px,transparent 2px);background-size:auto,83px 71px,97px 89px;animation:cyb-card-grid-drift 16s linear infinite}
.card-motion i{position:absolute;width:3px;height:3px;border-radius:50%;background:#c6edff;box-shadow:0 0 7px #5abaff;opacity:0;animation:cyb-card-particle 6.2s linear infinite}
.card-motion i:nth-child(1){left:18%;top:64%;animation-delay:-.4s}.card-motion i:nth-child(2){left:31%;top:48%;animation-delay:-1.3s}.card-motion i:nth-child(3){left:47%;top:57%;animation-delay:-2.1s}.card-motion i:nth-child(4){left:62%;top:41%;animation-delay:-3.4s}.card-motion i:nth-child(5){left:76%;top:53%;animation-delay:-4.6s}.card-motion i:nth-child(6){left:84%;top:33%;animation-delay:-5.3s}.card-motion i:nth-child(7){left:55%;top:26%;animation-delay:-2.8s}.card-motion i:nth-child(8){left:24%;top:35%;animation-delay:-5.8s}
@keyframes cyb-active-art-drift{0%{transform:scale(1.025) translate3d(-.45%,.28%,0)}45%{transform:scale(1.045) translate3d(.25%,-.2%,0)}100%{transform:scale(1.032) translate3d(.55%,.34%,0)}}
@keyframes cyb-card-scan{0%{top:-26%;opacity:0}12%{opacity:.65}72%{opacity:.28}100%{top:118%;opacity:0}}
@keyframes cyb-card-grid-drift{to{background-position:92px -34px,31px 19px,-27px 43px}}
@keyframes cyb-card-particle{0%{transform:translate3d(0,18px,0) scale(.65);opacity:0}16%{opacity:.65}58%{opacity:.9}100%{transform:translate3d(18px,-42px,0) scale(1.15);opacity:0}}

/* CSS-only fallback counterparts for the stormy cosmic traffic. */
.css-universe:before{content:"";position:absolute;inset:-5%;background:radial-gradient(ellipse at 72% 34%,#101e3655 0 11%,#07101d44 25%,transparent 46%),radial-gradient(ellipse at 63% 42%,#17294438,transparent 31%);opacity:.72;animation:cyb-storm-clouds 19s ease-in-out infinite alternate}
.css-universe:after{content:"";position:absolute;left:70%;top:23%;width:2px;height:38%;background:linear-gradient(180deg,transparent,#d9eeff 16%,#83bdff 56%,transparent);box-shadow:10px 42px 0 -1px #8bbfff99,-8px 85px 0 -1px #b9dfff88;transform:rotate(7deg) skewX(-11deg);transform-origin:top;opacity:0;animation:cyb-lightning-fallback 8.7s steps(1,end) infinite}
body.motion-paused .css-universe:before,body.motion-paused .css-universe:after{animation-play-state:paused!important}
@keyframes cyb-storm-clouds{0%{transform:translate3d(-.3%,.1%,0) scale(1)}100%{transform:translate3d(.55%,-.25%,0) scale(1.025)}}
@keyframes cyb-lightning-fallback{0%,67%,70%,100%{opacity:0}68%{opacity:.95}68.7%{opacity:.16}69.2%{opacity:.72}}

/* 2026-09-25 / depth-flight refinement -------------------------------------------------
   The centred showcase becomes a small 2.5D scene rather than a flat Ken-Burns image.
   Two phase-shifted camera passes cross-fade while moving forward in Z; masked mid and
   foreground copies sit on nearer planes. The reset happens while a pass is invisible,
   so the push-in can loop forever without a visible snap. */
.card-art{perspective:820px;transform-style:preserve-3d}
.card-scene{position:absolute;inset:0;z-index:0;overflow:hidden;transform-style:preserve-3d;background:#02060c;transition:transform .12s linear}
.scene-pass{position:absolute;inset:-7%;opacity:0;transform-style:preserve-3d;pointer-events:none;will-change:transform,opacity}
.scene-pass-a{opacity:1;transform:translate3d(0,0,0) scale(1)}
.scene-pass-b{opacity:0}
.scene-plane{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;transform-origin:50% 52%;backface-visibility:hidden;will-change:transform,opacity,filter}
.scene-mid,.scene-front{opacity:0}
.project-card{--scene-mid-opacity:.17;--scene-front-opacity:.22;--scene-mid-z:24px;--scene-front-z:56px;--scene-drift-x:0px}
.project-card[data-project="vtv"],.project-card[data-project="games"]{--scene-mid-opacity:.24;--scene-front-opacity:.29;--scene-mid-z:31px;--scene-front-z:72px}
.project-card[data-project="kroniki"]{--scene-mid-opacity:.20;--scene-front-opacity:.24;--scene-mid-z:28px;--scene-front-z:64px}
.project-card[data-project="trade"]{--scene-mid-opacity:.18;--scene-front-opacity:.23;--scene-mid-z:26px;--scene-front-z:58px}
.project-card[data-project="press"]{--scene-mid-opacity:.085;--scene-front-opacity:.07;--scene-mid-z:16px;--scene-front-z:34px}
.project-card[data-active="true"] .card-art img{animation:none!important;filter:saturate(.99) brightness(.985)}
.project-card[data-active="true"] .scene-pass-a,.project-card[data-active="true"] .scene-pass-b{animation:cyb-scene-camera-pass 14s linear infinite}
.project-card[data-active="true"] .scene-pass-b{animation-delay:-7s}
.project-card[data-active="true"] .scene-mid{opacity:var(--scene-mid-opacity);transform:translate3d(-.18%,.10%,var(--scene-mid-z)) scale(.985);-webkit-mask-image:linear-gradient(to bottom,transparent 0 24%,#000 39% 78%,transparent 94%);mask-image:linear-gradient(to bottom,transparent 0 24%,#000 39% 78%,transparent 94%)}
.project-card[data-active="true"] .scene-front{opacity:var(--scene-front-opacity);transform:translate3d(.14%,.34%,var(--scene-front-z)) scale(.962);-webkit-mask-image:linear-gradient(to bottom,transparent 0 54%,#000 72% 100%);mask-image:linear-gradient(to bottom,transparent 0 54%,#000 72% 100%)}
.project-card[data-active="true"] .scene-pass .scene-mid{animation:cyb-scene-mid-parallax 7s ease-in-out infinite alternate}
.project-card[data-active="true"] .scene-pass .scene-front{animation:cyb-scene-front-parallax 5.8s ease-in-out infinite alternate}
.project-card[data-active="true"] .card-scene:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 0 52%,#02060c30 79%,#02060c7d 100%),linear-gradient(110deg,transparent 15%,#b9e5ff0c 48%,transparent 72%);mix-blend-mode:screen}
body.motion-paused .scene-pass,body.motion-paused .scene-plane{animation-play-state:paused!important}
@keyframes cyb-scene-camera-pass{
  0%{opacity:0;transform:translate3d(-.35%,.26%,-46px) rotateX(.35deg) rotateY(-.20deg) scale(1.008)}
  6%{opacity:1}
  28%{opacity:1;transform:translate3d(.06%,-.10%,-8px) rotateX(.10deg) rotateY(.08deg) scale(1.026)}
  56%{opacity:1;transform:translate3d(.40%,-.42%,44px) rotateX(-.24deg) rotateY(.22deg) scale(1.066)}
  66%{opacity:0;transform:translate3d(.58%,-.55%,68px) rotateX(-.32deg) rotateY(.28deg) scale(1.086)}
  100%{opacity:0;transform:translate3d(.58%,-.55%,68px) rotateX(-.32deg) rotateY(.28deg) scale(1.086)}
}
@keyframes cyb-scene-mid-parallax{0%{translate:-.16% .08%}100%{translate:.18% -.16%}}
@keyframes cyb-scene-front-parallax{0%{translate:.18% .32%}100%{translate:-.24% -.06%}}

/* More obvious but restrained terrain lighting in the CSS-only safety layer. Native
   renderers use actual world-space additive particles and emissive flare lines. */
.css-terrain:before{content:"";position:absolute;inset:11% 4% 0;background:radial-gradient(circle at 14% 58%,#bdeaff 0 1px,#4ba9ffb8 2px,transparent 11px),radial-gradient(circle at 31% 42%,#87cfff 0 1px,#318cf69c 2px,transparent 13px),radial-gradient(circle at 64% 51%,#d8f3ff 0 1px,#55b5ffb8 2px,transparent 12px),radial-gradient(circle at 82% 34%,#ffd59a 0 1px,#ff8d3e91 2px,transparent 10px);filter:drop-shadow(0 0 8px #4db4ff88);opacity:1;animation:cyb-terrain-flare-pulse 2.8s ease-in-out infinite alternate}
body.motion-paused .css-terrain:before{animation-play-state:paused!important}
@keyframes cyb-terrain-flare-pulse{0%{opacity:.72;filter:drop-shadow(0 0 7px #4db4ff88)}55%{opacity:1;filter:drop-shadow(0 0 18px #8bd7ffcc)}100%{opacity:.84;filter:drop-shadow(0 0 12px #5fc0ff99)}}
.project-card[data-project="vtv"] .scene-plane{height:86%!important}
/* Keep only one expensive depth scene alive: the active card. Inactive cards retain
   a single ordinary image, which also keeps mobile/GPU memory predictable. */
.card-scene{opacity:0}
.card-base-art{opacity:1}
.project-card[data-active="true"] .card-scene{opacity:1}
.project-card[data-active="true"] .card-base-art{opacity:0!important}
/* Lightweight depth planes: the image itself is only duplicated twice for seamless
   cross-fade. Procedural mid/foreground geometry supplies the extra Z separation. */
.project-card[data-active="true"] .scene-pass:before,.project-card[data-active="true"] .scene-pass:after{content:"";position:absolute;pointer-events:none;will-change:transform,opacity}
.project-card[data-active="true"] .scene-pass:before{z-index:1;inset:21% 4% 11%;opacity:.17;background:repeating-linear-gradient(92deg,transparent 0 38px,#7ac5ff20 39px 40px,transparent 41px 79px),linear-gradient(180deg,transparent 0 42%,#64bfff10 43% 44%,transparent 45%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38% 83%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 38% 83%,transparent 100%);transform:translate3d(-.2%,.1%,30px) scale(.98);animation:cyb-scene-procedural-mid 6.8s ease-in-out infinite alternate}
.project-card[data-active="true"] .scene-pass:after{z-index:2;left:-10%;right:-10%;bottom:-24%;height:54%;opacity:.22;background:repeating-linear-gradient(90deg,transparent 0 28px,#8bd3ff24 29px 30px,transparent 31px 59px),repeating-linear-gradient(0deg,transparent 0 23px,#5aaaf716 24px 25px,transparent 26px 51px);transform-origin:50% 100%;transform:perspective(440px) rotateX(69deg) translate3d(.1%,3%,52px);-webkit-mask-image:linear-gradient(to top,#000 0 42%,transparent 88%);mask-image:linear-gradient(to top,#000 0 42%,transparent 88%);animation:cyb-scene-procedural-front 4.9s linear infinite}
.project-card[data-project="press"][data-active="true"] .scene-pass:before,.project-card[data-project="press"][data-active="true"] .scene-pass:after{opacity:.07}
body.motion-paused .scene-pass:before,body.motion-paused .scene-pass:after{animation-play-state:paused!important}
@keyframes cyb-scene-procedural-mid{0%{transform:translate3d(-.22%,.12%,26px) scale(.985);background-position:0 0,0 0}100%{transform:translate3d(.26%,-.16%,38px) scale(.975);background-position:54px -8px,0 0}}
@keyframes cyb-scene-procedural-front{0%{background-position:0 0,0 0;transform:perspective(440px) rotateX(69deg) translate3d(.1%,3%,48px)}100%{background-position:64px 108px,0 88px;transform:perspective(440px) rotateX(69deg) translate3d(-.15%,8%,64px)}}
/* Stable scene DOM: preloaded once per card; only the centred one participates in layout
   and painting. This avoids decode churn while the reel passes quickly between cards. */
.project-card:not([data-active="true"]) .card-scene{display:none!important}
.project-card[data-active="true"] .card-scene{display:block}

/* 2026-09-25 / orbital-holographic reel ---------------------------------------------
   The project reel now reads as five thin volumetric glass/hologram slabs in a wider
   3D volume. The active card contains three actual image planes per camera pass, so
   its endless push-in has parallax rather than a flat zoom. */
.project-card{--holo-depth:0;--holo-side:1;transform-style:preserve-3d}
.project-card::before,.project-card::after{content:"";position:absolute;pointer-events:none;opacity:calc(.14 + var(--holo-depth) * .28);filter:drop-shadow(0 0 9px #54b8ff55);transition:opacity .35s ease;backface-visibility:hidden}
.project-card::before{top:7px;bottom:7px;right:-9px;width:10px;transform-origin:left center;transform:rotateY(90deg);background:linear-gradient(90deg,#07111d,#4fb9ff88 48%,#d8f4ffcc 51%,#0a1b2d 58%,#02060b)}
.project-card::after{left:7px;right:7px;bottom:-9px;height:10px;transform-origin:center top;transform:rotateX(-90deg);background:linear-gradient(180deg,#07111d,#5bbdff7d 44%,#d9f4ffbf 48%,#061321 57%,#02060b)}
.project-card[data-active="true"]::before,.project-card[data-active="true"]::after{opacity:.68;filter:drop-shadow(0 0 13px #67c8ff88)}
.card-shell{transform:translateZ(0);isolation:isolate}
.card-shell::before,.card-shell::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:9;border-radius:inherit;opacity:0;transition:opacity .35s ease}
.card-shell::before{background:repeating-linear-gradient(180deg,transparent 0 3px,#9bdfff0b 4px 5px,transparent 6px 9px),linear-gradient(112deg,transparent 0 34%,#bcecff14 46%,#7cc7ff28 49%,transparent 56% 100%);mix-blend-mode:screen;animation:cyb-holo-scanlines 8s linear infinite}
.card-shell::after{inset:5px;border:1px solid #bdeaff31;box-shadow:inset 0 0 24px #2c8fff20,inset 0 0 2px #e8f8ff7a;transform:translateZ(4px)}
.project-card[data-active="true"] .card-shell::before{opacity:.72}
.project-card[data-active="true"] .card-shell::after{opacity:.95}
.project-card[data-active="true"] .card-shell{box-shadow:0 0 2px #e1f6ff,0 0 22px #2aa5ff88,0 0 64px #1175df35,0 28px 50px -28px #2e9fffcc}
.project-card[data-active="true"] .card-reflection{height:49px;bottom:-59px;background:radial-gradient(ellipse,#5bbcff5c 0,#2d7bd238 32%,transparent 70%);filter:blur(10px)}
@keyframes cyb-holo-scanlines{to{background-position:0 36px,78px -22px}}

/* Stronger volumetric depth inside only the selected project. */
.project-card[data-active="true"] .card-art{perspective:650px;overflow:hidden}
.project-card[data-active="true"] .scene-pass-a,.project-card[data-active="true"] .scene-pass-b{animation-duration:10.8s}
.project-card[data-active="true"] .scene-pass-b{animation-delay:-5.4s}
.project-card[data-active="true"] .scene-mid{opacity:calc(var(--scene-mid-opacity) * 1.35);transform:translate3d(-.8%,.2%,var(--scene-mid-z)) scale(.99);filter:saturate(1.06) contrast(1.02);mix-blend-mode:screen;-webkit-mask-image:linear-gradient(to bottom,transparent 0 18%,#000 32% 78%,transparent 96%);mask-image:linear-gradient(to bottom,transparent 0 18%,#000 32% 78%,transparent 96%)}
.project-card[data-active="true"] .scene-front{opacity:calc(var(--scene-front-opacity) * 1.42);transform:translate3d(.9%,.8%,var(--scene-front-z)) scale(.97);filter:saturate(1.12) brightness(1.03);mix-blend-mode:screen;-webkit-mask-image:linear-gradient(to bottom,transparent 0 48%,#000 64% 100%);mask-image:linear-gradient(to bottom,transparent 0 48%,#000 64% 100%)}
.project-card[data-active="true"] .scene-pass .scene-mid{animation:cyb-scene-mid-parallax-holo 5.4s ease-in-out infinite alternate}
.project-card[data-active="true"] .scene-pass .scene-front{animation:cyb-scene-front-parallax-holo 3.9s ease-in-out infinite alternate}
.project-card[data-active="true"] .scene-pass:before{opacity:.26;transform:translate3d(-.3%,.12%,44px) scale(.978)}
.project-card[data-active="true"] .scene-pass:after{opacity:.32;transform:perspective(390px) rotateX(71deg) translate3d(.1%,3%,82px)}
.project-card[data-active="true"] .card-motion{background:radial-gradient(ellipse at 50% 58%,#50c8ff16,transparent 40%),linear-gradient(90deg,#1a7dc309,transparent 22% 78%,#7dd9ff0d)}
.project-card[data-active="true"] .card-motion:after{opacity:.82;mix-blend-mode:screen}
@keyframes cyb-scene-camera-pass{
  0%{opacity:0;transform:translate3d(-1.2%,.55%,-88px) rotateX(.70deg) rotateY(-.72deg) scale(1.000)}
  7%{opacity:1}
  26%{opacity:1;transform:translate3d(-.2%,.05%,-25px) rotateX(.25deg) rotateY(-.18deg) scale(1.027)}
  53%{opacity:1;transform:translate3d(.72%,-.62%,52px) rotateX(-.38deg) rotateY(.48deg) scale(1.083)}
  68%{opacity:0;transform:translate3d(1.22%,-1.02%,112px) rotateX(-.72deg) rotateY(.76deg) scale(1.135)}
  100%{opacity:0;transform:translate3d(1.22%,-1.02%,112px) rotateX(-.72deg) rotateY(.76deg) scale(1.135)}
}
@keyframes cyb-scene-mid-parallax-holo{0%{translate:-1.15% .30%}100%{translate:1.05% -.70%}}
@keyframes cyb-scene-front-parallax-holo{0%{translate:1.45% 1.10%}100%{translate:-1.65% -.55%}}

@media(max-width:600px){
 .project-card::before{right:-6px;width:7px}.project-card::after{bottom:-6px;height:7px}
 .project-card[data-active="true"] .scene-mid{opacity:calc(var(--scene-mid-opacity) * 1.05)}
 .project-card[data-active="true"] .scene-front{opacity:calc(var(--scene-front-opacity) * 1.10)}
}

/* CSS fallback approximation of the top-right Earth/orbit system. Native GPU renderers
   draw actual 3D orbit paths and moving satellite particles. */
.css-planet{left:84.2%;top:13.2%;width:5.8%;background:radial-gradient(circle at 30% 24%,#d9f5ff 0 1%,#3d85bd 4%,#0d4d78 25%,#06233c 58%,#02070e 73%);box-shadow:inset -10px -8px 15px #000b,0 0 19px #4bbcff38;overflow:visible}
.css-planet::before,.css-planet::after{content:"";position:absolute;left:50%;top:50%;border:1px solid #66bfff4d;border-radius:50%;transform-style:preserve-3d;pointer-events:none}
.css-planet::before{width:280%;height:118%;transform:translate(-50%,-50%) rotate(-18deg);box-shadow:0 0 8px #4bbcff18;animation:cyb-css-orbit-a 12s linear infinite}
.css-planet::after{width:235%;height:205%;transform:translate(-50%,-50%) rotate(64deg);border-color:#9ad8ff36;animation:cyb-css-orbit-b 17s linear infinite}
@keyframes cyb-css-orbit-a{to{transform:translate(-50%,-50%) rotate(342deg)}}
@keyframes cyb-css-orbit-b{to{transform:translate(-50%,-50%) rotate(424deg)}}
body.motion-paused .css-planet::before,body.motion-paused .css-planet::after{animation-play-state:paused!important}

/* WordPress / CYBERNOID Landing Core runtime controls */
.project-card{--project-accent:#78cfff;--project-scene-duration:10.8s;--project-mid-duration:5.4s;--project-front-duration:3.9s;--project-holo-alpha:1;--project-holo-glow:17px;--project-holo-overlay:.42;--project-holo-overlay2:.36}
.project-card[data-active="true"] .scene-pass-a,.project-card[data-active="true"] .scene-pass-b{animation-duration:var(--project-scene-duration)!important}
.project-card[data-active="true"] .scene-pass-b{animation-delay:calc(var(--project-scene-duration) / -2)!important}
.project-card[data-active="true"] .scene-pass .scene-mid{animation-duration:var(--project-mid-duration)!important}
.project-card[data-active="true"] .scene-pass .scene-front{animation-duration:var(--project-front-duration)!important}
.project-card[data-active="true"] .card-shell{filter:drop-shadow(0 0 var(--project-holo-glow) color-mix(in srgb,var(--project-accent) 48%,transparent))}
.project-card[data-active="true"] .card-shell::before{opacity:var(--project-holo-overlay)}
.project-card[data-active="true"] .card-shell::after{opacity:var(--project-holo-overlay2)}

/* Keep the mobile reel inside the visible viewport, below the linked logo. */
@media(max-width:600px){.composition{min-height:0}.hero-title{width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media(max-width:600px) and (orientation:portrait){
 .composition{--mobile-safe-shift:max(0px,calc(env(safe-area-inset-top) - 23px));--mobile-card-height:min(40dvh,400px);--mobile-reel-top:80px}
 .site-header .identity{position:relative;left:0;width:min(250px,calc(100vw - 120px));transform:none;text-align:left}
 .site-header .identity>.wordmark{width:100%;height:auto;aspect-ratio:289/21}
 .site-header .main-nav{margin-left:auto}
 .carousel{top:calc(var(--mobile-reel-top) + var(--mobile-safe-shift));bottom:auto;height:var(--mobile-card-height,min(40dvh,400px));transform:none}
 .pagination{top:calc(var(--mobile-reel-top) + var(--mobile-card-height,min(40dvh,400px)) + 40px + var(--mobile-safe-shift));bottom:auto;transform:translateX(-50%)}
}
@media(max-width:1023px){.project-card{max-height:min(48dvh,465px)}}
@media(max-width:600px) and (orientation:portrait){.project-card{max-height:min(40dvh,400px)}}

/* Shared interface tokens. Scene artwork keeps its own contrast-safe art palette. */
:root {
  color-scheme: dark;
  --ink: #030710;
  --white: #eff5ff;
  --blue: #8ed0ff;
  --muted: #a7b8d3;
  --surface: #091421;
  --surface-hover: #192d43;
  --border: #65809c;
  --glow: #328aff55;
  --shadow: #0009;
  --backdrop: #000711bc;
  --scene-veil: transparent;
  --scan-shadow: #0008;
  --art-text: #fff;
  --art-shadow: #000;
  --art-surface: #050b13;
}
:root[data-color-mode="light"] {
  color-scheme: light;
  --ink: #edf3fa;
  --white: #14253c;
  --blue: #17568c;
  --muted: #41546e;
  --surface: #f9fbfe;
  --surface-hover: #dce8f5;
  --border: #71859d;
  --glow: #17568c33;
  --shadow: #19314d33;
  --backdrop: #bccbdc99;
  --scene-veil: #edf3fadd;
  --scan-shadow: #14253c18;
}
:root[data-color-mode="amber"] {
  color-scheme: dark;
  --ink: #151009;
  --white: #fff1ce;
  --blue: #ffd080;
  --muted: #d0bc96;
  --surface: #211a10;
  --surface-hover: #3a2e1b;
  --border: #a18a5b;
  --glow: #e6ad4255;
  --shadow: #080500aa;
  --backdrop: #100a02bc;
  --scene-veil: #261a06aa;
  --scan-shadow: #08050088;
}
@media (prefers-color-scheme: light) {
  :root:not([data-color-mode]) {
    color-scheme: light;
    --ink: #edf3fa; --white: #14253c; --blue: #17568c; --muted: #41546e;
    --surface: #f9fbfe; --surface-hover: #dce8f5; --border: #71859d;
    --glow: #17568c33; --shadow: #19314d33; --backdrop: #bccbdc99;
    --scene-veil: #edf3fadd; --scan-shadow: #14253c18;
  }
}
#universe::after { content: ""; position: absolute; inset: 0; background: var(--scene-veil); }
.identity-sub,.edge-copy,.hero-subtitle,.count-slash,.count-total,.site-footer p,
.system-heading,.system-settings output,#console-log,dialog .eyebrow,
dialog p:not(.eyebrow),.search-result small { color: var(--muted); }
.edge-copy { text-shadow: 0 1px 3px var(--shadow); }
.footer-left svg { stroke: var(--muted); }
.card-shell,.card-scene { background-color: var(--art-surface); }
.card-topline,.card-caption { color: var(--art-text); text-shadow: 1px 2px 4px var(--art-shadow); }
.card-enter { color: var(--white); background: var(--surface); border-color: var(--blue); box-shadow: 0 0 20px var(--glow); }
.card-enter:hover { background: var(--surface-hover); box-shadow: 0 0 30px var(--glow); }
.carousel-arrow { background: var(--surface); border-color: var(--border); }
.carousel-arrow:hover { background: var(--surface-hover); border-color: var(--blue); }
.carousel-arrow svg { stroke: var(--white); }
.pagination-dot::before { border-color: var(--border); }
.pagination-dot[aria-current="true"]::before { background: var(--blue); border-color: var(--blue); box-shadow: 0 0 10px var(--glow); }
.boot { background: var(--ink); color: var(--white); }
.boot-track { background: linear-gradient(90deg,transparent,var(--blue),transparent); }
.system-toggle { color: var(--muted); background: var(--surface); opacity: 1; }
.system-panel { color: var(--white); background: var(--surface); box-shadow: 0 -12px 50px var(--shadow); max-height: 45dvh; overflow: auto; }
.system-settings select,.system-settings button { color: var(--white); background: var(--surface-hover); }
dialog { background: var(--surface); color: var(--white); border-color: var(--border); box-shadow: 0 25px 150px var(--shadow); }
dialog::backdrop { background: var(--backdrop); }
#project-search { color: var(--white); border-color: var(--border); }
#project-search::placeholder { color: var(--muted); opacity: 1; }
.search-result:hover,.search-result:focus-visible { background: var(--surface-hover); }
.noscript { color: var(--white); background: var(--surface); max-height: 60dvh; overflow: auto; }
/* The shared loader, if invoked on this page, follows the same complete modes. */
.cybcorp-gui-loader__dialog,.cybcorp-gui-loader__head { background: var(--surface); color: var(--white); border-color: var(--border); }
.cybcorp-gui-loader__backdrop { background: var(--backdrop); }
.cybcorp-gui-loader__close,.cybcorp-gui-loader__message,.cybcorp-gui-loader__progress-meta,.cybcorp-gui-loader__notice { color: var(--muted); }
.cybcorp-gui-loader__close:hover,.cybcorp-gui-loader__close:focus-visible,.cybcorp-gui-loader__badge { background: var(--surface-hover); color: var(--white); }
.cybcorp-gui-loader__progress-track { background: var(--surface-hover); }
.cybcorp-gui-loader__progress-fill,.cybcorp-gui-loader__action { background: var(--blue); color: var(--ink); }
.cybcorp-gui-loader__action:hover,.cybcorp-gui-loader__action:focus-visible { color: var(--ink); }
/* A native disclosure starts closed and never occupies the entire viewport. */
.main-nav { display: block; height: auto; padding: 0; }
.main-nav::after { display: none; }
.main-nav summary { list-style: none; cursor: pointer; padding: 8px 10px; border: 1px solid var(--border); background: var(--surface); color: var(--white); font-size: 11px; letter-spacing: 2px; }
.main-nav summary::-webkit-details-marker { display: none; }
.main-nav summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.main-nav[open] summary { border-color: var(--blue); }
.main-nav[open] summary span { display: inline-block; transform: rotate(180deg); }
.nav-items { position: absolute; top: calc(100% + 8px); right: 0; display: grid; gap: 2px; width: min(240px,calc(100vw - 38px)); max-height: 65dvh; overflow: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 36px var(--shadow); }
.main-nav .nav-item { display: block; width: 100%; height: auto; padding: 12px 8px; text-align: left; }
.main-nav .nav-item:hover,.main-nav .nav-item:focus-visible { background: var(--surface-hover); }
.main-nav .nav-item.active::after { display: none; }
.main-nav .search-toggle { margin: 0; }
.color-mode-label { display: grid; gap: 8px; padding: 12px 8px 4px; color: var(--muted); font-size: 11px; letter-spacing: 2px; }
#color-mode { width: 100%; padding: 8px; border: 1px solid var(--border); color: var(--white); background: var(--surface-hover); }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .main-nav .search-toggle { width: 100%; height: auto; }
  .main-nav summary { font-size: 10px; letter-spacing: 1px; }
}
/* Project runtime durations are declared !important above; reduced motion wins. */
@media (prefers-reduced-motion: reduce) {
  .project-card .scene-pass,.project-card .scene-plane { animation: none !important; }
  .project-card[data-active="true"] .scene-pass-a { opacity: 1; transform: none; }
  .project-card[data-active="true"] .scene-pass-b { opacity: 0; }
}

button:focus-visible,a:focus-visible,section:focus-visible,input:focus-visible,select:focus-visible { outline-color: var(--blue); }
button:hover { color: var(--white); }
.skip { background: var(--surface); }