html[data-opening-lock] body{background:#171a1e}#portfolio-page[data-opening-reveal]{width:var(--opening-width);height:var(--opening-height);z-index:100;transform-origin:0 0;will-change:transform;pointer-events:none;position:fixed;inset:0 auto auto 0;overflow:clip}.cinematic-opening[data-page-preview]{background:0 0}.cinematic-opening{z-index:101;color:#eef1f3;perspective:1200px;background:#171a1e;position:fixed;inset:0;overflow:hidden}.cinematic-opening[data-state=idle]{animation:10s step-end forwards opening-idle-fallback}.cinematic-opening[data-state=idle] .opening-art{visibility:visible}.cinematic-opening[data-state=idle] .opening-workspace,.cinematic-opening[data-state=idle] .opening-layout,.cinematic-opening[data-state=idle] .opening-backend,.cinematic-opening[data-state=idle] .opening-build{visibility:hidden}@keyframes opening-idle-fallback{to{visibility:hidden;pointer-events:none}}.opening-art{visibility:hidden;pointer-events:none;position:absolute;inset:0}.opening-grid{background-image:linear-gradient(#6b9fc014 1px,#0000 1px),linear-gradient(90deg,#6b9fc014 1px,#0000 1px);background-size:64px 64px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000,#0000 75%);mask-image:radial-gradient(#000,#0000 75%)}.opening-caption,.opening-footer{font:10px var(--font-mono);letter-spacing:.09em;color:#a6bbc9;justify-content:space-between;display:flex;position:absolute;left:5vw;right:5vw}.opening-caption{top:5vh}.opening-footer{bottom:5vh}.opening-boot{font:clamp(20px, 3vw, 40px) var(--font-mono);position:absolute;top:40%;left:20%}.opening-boot small{color:#a6bbc9;margin-top:25px;font-size:12px;display:block}.opening-boot i{vertical-align:-.1em;background:#6b9fc0;width:.55em;height:1em;display:inline-block}.opening-workspace{transform-style:preserve-3d;background:#20262c;border:1px solid #51616e;border-radius:12px;grid-template-columns:24% 1fr;display:grid;position:absolute;inset:21% 12% 27%;box-shadow:0 40px 100px #0005}.opening-files{font:13px/1.8 var(--font-mono);border-right:1px solid #51616e;padding:25px}.opening-files>small{color:#92a3af;margin-bottom:20px;font-size:9px;display:block}.opening-file{white-space:pre;color:#b7cbd9}.opening-editor{min-width:0;position:relative}.opening-tab{font:11px var(--font-mono);color:#a6bbc9;border-bottom:1px solid #51616e;justify-content:space-between;padding:18px 24px;display:flex}.opening-editor pre{font:clamp(10px, 1.15vw, 16px)/2.3 var(--font-mono);margin:25px 0}.opening-code{white-space:pre;display:block}.opening-code small{text-align:center;color:#768895;width:45px;font-size:10px;display:inline-block}.opening-code b{color:#8dbbda;font-weight:400}.opening-code em{color:#d7c5a4;font-style:normal}.opening-autocomplete{font:10px var(--font-mono);background:#304452;border:1px solid #6b9fc0;border-radius:5px;padding:10px 18px;position:absolute;bottom:15px;right:25px}.opening-layout{perspective:900px;grid-template-rows:45px 145px minmax(0,1fr) 30px;grid-template-columns:5fr 7fr;gap:12px;display:grid;position:absolute;inset:17% 19% 28%}.opening-module{color:#15181c;transform-origin:0 0;background:#eef1f3;border:1px solid #98b6cb;border-radius:10px;position:relative}.opening-module code{color:#6b9fc0;white-space:nowrap;font:10px var(--font-mono);position:absolute;top:6px;left:12px}.module-header,.module-hero,.module-note{grid-column:1/-1}.opening-backend{font:10px var(--font-mono);position:absolute;bottom:17%;left:16%;right:16%}.opening-request,.opening-query{color:#a6bbc9;justify-content:space-between;gap:10px;display:flex}.opening-query{margin-top:12px}.opening-query>span{color:#c5dcea}.opening-services{justify-content:space-between;margin:15px 0;display:flex;position:relative}.opening-services:before{content:"";background:#6b9fc0;height:1px;position:absolute;top:50%;left:0;right:0}.opening-services>div{z-index:1;background:#20262c;border:1px solid #6b9fc0;border-radius:5px;padding:12px}.opening-packet{z-index:2;background:#eef1f3;border-radius:50%;width:6px;height:6px;position:absolute;top:calc(50% - 3px);box-shadow:0 0 12px #a3d1ee}.opening-build{font:11px var(--font-mono);color:#a6bbc9;justify-content:center;gap:25px;display:flex;position:absolute;top:70%;left:20%;right:20%}.opening-build strong{font:600 clamp(20px, 3vw, 40px) var(--font-display);color:#eef1f3;white-space:nowrap;position:absolute;top:38px}.opening-build strong span{text-align:center;font:11px var(--font-body);color:#a6bbc9;margin-top:6px;display:block}.opening-controls{align-items:center;gap:15px;display:flex;position:absolute;bottom:9vh;right:4vw}.opening-controls button{color:#eef1f3;font:10px var(--font-mono);text-transform:uppercase;background:#20262c;border:1px solid #51616e;padding:13px 17px}.opening-controls button:focus-visible{outline-offset:4px;outline:2px solid #eef1f3}@media (max-width:900px){.opening-workspace{grid-template-columns:26% 1fr;inset:23% 6% 30%}.opening-files{padding:18px 12px;font-size:11px}.opening-code small{width:28px}.opening-layout{grid-template-rows:40px 115px minmax(0,1fr) 25px;inset:22% 10% 30%}.opening-backend{bottom:17%;left:8%;right:8%}}@media (max-width:600px){.opening-caption,.opening-footer{font-size:8px}.opening-caption span:last-child,.opening-footer span:last-child{display:none}.opening-boot{font-size:24px;top:36%;left:8%}.opening-workspace{flex-direction:column;display:flex;inset:18% 5% 33%}.opening-files{border-bottom:1px solid #51616e;border-right:0;flex-wrap:wrap;gap:0 12px;padding:12px;font-size:9px;display:flex}.opening-files>small{width:100%;margin-bottom:4px}.opening-file{white-space:normal}.opening-editor{flex:1}.opening-tab{padding:10px 14px;font-size:10px}.opening-editor pre{margin:16px 0;font-size:8px;line-height:2.3}.opening-code small{width:23px;font-size:8px}.opening-autocomplete{padding:7px;font-size:8px;bottom:9px;right:10px}.opening-layout{grid-template-rows:31px 105px 80px minmax(0,1fr) 19px;grid-template-columns:1fr;gap:7px;inset:18% 8% 34%}.opening-module code{font-size:7px;left:6px}.opening-backend{font-size:8px;bottom:19%;left:6%;right:6%}.opening-request>span{display:none}.opening-services>div{padding:9px 5px;font-size:7px}.opening-query{flex-direction:column;gap:5px;font-size:7px}.opening-build{gap:12px;font-size:8px;top:68%;left:8%;right:8%}.opening-controls{gap:8px;bottom:9%;right:6%}.opening-controls button{padding:12px;font-size:9px}.opening-build strong{font-size:25px}}@media (prefers-reduced-motion:reduce){.cinematic-opening{display:none}}