/* Shared material palette, also available to standalone app pages. */
.depth-surface{--depth-accent:#80e7f5;--depth-edge:#80dbe33b;--depth-glow:#16bcd628;--depth-dark:#091720;--depth-metal:#a6d7da22}
html[data-theme="gold"] .depth-surface{--depth-accent:#ecd397;--depth-edge:#e0c57b44;--depth-glow:#b4812828;--depth-dark:#19160f;--depth-metal:#e6cc8a24}
.depth-surface{background-image:radial-gradient(ellipse at 88% 8%,var(--depth-glow),transparent 30%),repeating-linear-gradient(115deg,transparent 0 41px,#ffffff03 42px 43px,transparent 44px 84px)}
.depth-surface:before{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");background-size:160px 160px;mix-blend-mode:screen}
.depth-surface .header{box-shadow:0 14px 40px #0006,inset 0 1px #ffffff25,inset 0 -1px var(--depth-edge)}
.depth-surface .section-heading{position:relative}
.depth-surface .section-heading:after{content:"";position:absolute;bottom:-1px;left:0;width:66px;height:2px;background:var(--depth-accent);box-shadow:0 0 14px var(--depth-glow);pointer-events:none}
.depth-surface .section-number{box-shadow:inset 0 1px #ffffff1c,3px 3px 0 #0004}

/* The logo remains an unchanged, separate layer above the circuit platform. */
.experience-home.depth-surface .scene-platform-plane{position:absolute;inset:-2%;display:grid;place-items:center;pointer-events:none}
.experience-home.depth-surface .scene-platform-plane img{position:absolute;left:50%;top:50%;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 24px 22px #0008)}
.experience-home.depth-surface .scene-device{inset:17% 13% 19%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
.experience-home.depth-surface .scene-logo-frame{position:absolute;inset:0;display:grid;place-items:center;filter:drop-shadow(0 15px 15px #000b)}
.experience-home.depth-surface .scene-logo-frame:before,.experience-home.depth-surface .scene-logo-frame:after{content:"";position:absolute;inset:14% 10%;border:1px solid var(--scene-edge);transform:perspective(700px) rotateY(-14deg) rotateX(5deg);pointer-events:none}
.experience-home.depth-surface .scene-logo-frame:after{inset:19% 14%;border-color:var(--depth-metal)}
.experience-home.depth-surface .scene-logo-frame img{position:relative;width:83%;height:auto;filter:drop-shadow(0 9px 14px #000b)}
.frame-corner{position:absolute;width:24px;height:24px;border-color:var(--scene-accent);opacity:.8;z-index:1}.frame-corner-a{top:11%;left:7%;border-top:1px solid;border-left:1px solid}.frame-corner-b{bottom:11%;right:7%;border-bottom:1px solid;border-right:1px solid}.scene-coordinate{position:absolute;right:8%;top:7%;color:var(--scene-accent);font:9px var(--mono);letter-spacing:.15em}
.experience-home.depth-surface .scene-halo-inner{border-style:dashed;opacity:.7;box-shadow:0 0 0 28px #ffffff04,0 0 0 56px #ffffff03,0 0 60px var(--scene-glow)}
.experience-home.depth-surface .scene-foreground-inner{bottom:0;padding:10px 12px;border:1px solid var(--scene-edge);background:linear-gradient(90deg,var(--scene-panel),transparent);box-shadow:inset 0 1px #ffffff1c}

/* Etched lines and compact diagram add depth without covering copy or controls. */
.depth-surface .about-section{overflow:hidden;background-image:radial-gradient(ellipse at 10% 60%,var(--depth-glow),transparent 42%),repeating-linear-gradient(120deg,transparent 0 35px,#ffffff04 36px 37px,transparent 38px 72px),linear-gradient(150deg,var(--depth-dark),var(--bg) 75%)}
html[data-theme="gold"] .depth-surface .about-section{background-image:radial-gradient(ellipse at 10% 60%,var(--depth-glow),transparent 42%),repeating-linear-gradient(120deg,transparent 0 35px,#ffffff04 36px 37px,transparent 38px 72px),linear-gradient(150deg,var(--depth-dark),var(--bg) 75%)}
.idea-diagram{grid-column:1;display:block;width:min(300px,100%);height:auto;margin-top:-25px;color:var(--depth-accent);opacity:.65;pointer-events:none}
.depth-surface .principles>div{position:relative;padding-left:14px!important;border-left:1px solid var(--depth-edge)}
.depth-surface .principles>div:before{content:"";position:absolute;top:-3px;left:-3px;width:5px;height:5px;background:var(--depth-accent);box-shadow:0 0 10px var(--depth-glow);pointer-events:none}
.depth-surface .service-explorer,.depth-surface .project-brief,.depth-surface .game-console{box-shadow:0 25px 55px #0007,inset 0 1px #ffffff2a,inset 0 -1px #0008,0 0 0 5px #ffffff04}
.depth-surface .service-explorer:after,.depth-surface .project-brief:after{content:"";position:absolute;top:10px;right:10px;width:28px;height:28px;border-top:1px solid var(--depth-accent);border-right:1px solid var(--depth-accent);opacity:.5;pointer-events:none}
.depth-surface .service-choices label>span{box-shadow:inset 0 1px #ffffff1c,0 5px 10px #0004}
.depth-surface .service-choices input:checked+span{box-shadow:inset 0 1px #ffffff3a,inset 0 0 24px var(--scene-glow),0 5px 16px #0005}
.depth-surface .service-device{position:relative;box-shadow:8px 10px 0 var(--scene-panel),9px 11px 0 var(--scene-edge),17px 20px 28px #0008,0 0 28px var(--scene-glow)}
.depth-surface .service-device:after{content:"";position:absolute;inset:-8px;border:1px solid var(--scene-edge);border-radius:18px;pointer-events:none}
.depth-surface .game-console{background-image:repeating-linear-gradient(135deg,transparent 0 12px,#ffffff04 13px 14px,transparent 15px 28px)}
.depth-surface .game-art{background-image:radial-gradient(ellipse at 50% 50%,var(--scene-glow),transparent 65%),repeating-radial-gradient(ellipse at 50% 50%,transparent 0 24px,var(--scene-edge) 25px,transparent 26px 35px),linear-gradient(145deg,var(--scene-deep),var(--scene-panel))}
.depth-surface .faq-list details{padding-inline:14px;border-left:1px solid var(--depth-edge);background:linear-gradient(90deg,var(--depth-glow),transparent 50%)}
.depth-surface .footer{position:relative;border-top:1px solid var(--depth-edge);box-shadow:inset 0 1px #ffffff0b;background-image:linear-gradient(115deg,transparent 55%,var(--depth-glow)),repeating-linear-gradient(90deg,transparent 0 79px,var(--depth-edge) 80px,transparent 81px 160px);background-size:auto,100% 16px;background-repeat:no-repeat;background-position:center,bottom}
.depth-surface .apps-drawer{background-image:repeating-linear-gradient(130deg,transparent 0 42px,#ffffff04 43px 44px,transparent 45px 84px);box-shadow:0 30px 100px #000c,inset 0 1px #ffffff30,inset 1px 0 var(--depth-edge)}
.depth-surface .store-card{box-shadow:inset 0 1px #ffffff20,0 8px 20px #0004}.depth-surface .store-card-art{box-shadow:inset 0 1px #ffffff30,0 8px 15px #0006}

/* Surface accents for independently linked app detail pages. */
.depth-surface .standalone-details{background-image:repeating-linear-gradient(130deg,transparent 0 40px,#ffffff04 41px 42px,transparent 43px 80px);box-shadow:inset 0 1px #ffffff20,0 20px 50px #0004}
@media(max-width:800px){.idea-diagram{margin-top:0;width:min(250px,100%)}.experience-home.depth-surface .scene-platform-plane img{width:110%;height:110%}}
@media(max-width:480px){.idea-diagram{width:210px}.experience-home.depth-surface .scene-device{inset:17% 13% 19%}.experience-home.depth-surface .scene-platform-plane{inset:0}.depth-surface .principles>div{padding-left:14px!important}.depth-surface .faq-list details{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.experience-home.depth-surface [data-sc-parallax]{transform:none!important}.depth-surface *, .depth-surface *:before,.depth-surface *:after{scroll-behavior:auto}}