.hero { isolation: isolate; overflow: hidden; }
.depth-stage { position: absolute; z-index: 1; right: 9%; top: 29%; width: 270px; height: 270px; perspective: 900px; pointer-events: none; }
.depth-orbit { position: absolute; inset: -38px; border: 1px solid #76eaff66; border-radius: 50%; transform: rotateX(68deg) rotateZ(-24deg); box-shadow: 0 0 35px #4be4ff22, inset 0 0 35px #4be4ff11; }
.depth-orbit::after { content: ''; position: absolute; width: 12px; height: 12px; top: 20%; left: 9%; border-radius: 50%; background: #9affcf; box-shadow: 0 0 24px #9affcf; }
.depth-cube { position: absolute; inset: 55px; transform-style: preserve-3d; animation: depth-spin 24s linear infinite; }
.depth-face { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid #8beeffaa; background: linear-gradient(135deg, #172852bb, #39176a88); box-shadow: inset 0 0 35px #4be4ff22; color: #dcfcff; font-size: 58px; font-weight: 900; text-shadow: 0 0 22px #4be4ff; backface-visibility: visible; }
.depth-face:nth-child(1) { transform: translateZ(80px); }
.depth-face:nth-child(2) { transform: rotateY(180deg) translateZ(80px); }
.depth-face:nth-child(3) { transform: rotateY(90deg) translateZ(80px); }
.depth-face:nth-child(4) { transform: rotateY(-90deg) translateZ(80px); }
.depth-face:nth-child(5) { transform: rotateX(90deg) translateZ(80px); }
.depth-face:nth-child(6) { transform: rotateX(-90deg) translateZ(80px); }
.depth-stage::after { content: ''; position: absolute; bottom: -55px; left: 12%; width: 76%; height: 30px; background: #53cfff55; filter: blur(22px); border-radius: 50%; }
.hero-content { position: relative; z-index: 2; }
.game-card, .universe-card, .news-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
@media (hover: hover) and (pointer: fine) {
  .depth-card:hover { transform: perspective(1000px) rotateX(var(--depth-x, 0deg)) rotateY(var(--depth-y, 0deg)) translateY(-5px); box-shadow: 0 22px 45px #0006, 0 0 24px #4be4ff15; border-color: #8bdfff66; }
}
@keyframes depth-spin { from { transform: rotateX(-18deg) rotateY(0deg) rotateZ(-12deg); } to { transform: rotateX(-18deg) rotateY(360deg) rotateZ(-12deg); } }
@media (max-width: 1050px) { .depth-stage { right: 3%; opacity: .6; transform: scale(.75); transform-origin: right center; } }
@media (max-width: 760px) { .depth-stage { top: 110px; right: -65px; opacity: .24; transform: scale(.65); } }
@media (prefers-reduced-motion: reduce) { .depth-cube { animation: none; transform: rotateX(-18deg) rotateY(30deg) rotateZ(-12deg); } .depth-card { transition: none; } .depth-card:hover { transform: none; } }

/* A self-contained CSS 3D showroom. Every object has real depth planes. */
.holo-lab { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; margin: 0 0 90px; }
.holo-intro h2 { margin: 18px 0; font-size: clamp(2.8rem, 4.8vw, 4.7rem); line-height: 1.02; letter-spacing: -.055em; }
.holo-intro h2 span { color: var(--cyan); text-shadow: 0 6px #163945, 0 15px 35px #4be4ff20; }
.holo-intro > p:not(.kicker) { color: var(--muted); max-width: 350px; line-height: 1.8; }
.holo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.holo-tabs button, .holo-pause { font: inherit; cursor: pointer; border: 1px solid #c2d2ff26; color: #b4bfd9; background: #10172a; border-radius: 9px; padding: 11px 13px; font-size: .76rem; }
.holo-tabs button[aria-pressed="true"] { border-color: #74e9ff; color: #bdf6ff; background: #4be4ff12; box-shadow: 0 0 25px #4be4ff0c; }
.holo-tabs button:hover, .holo-pause:hover { border-color: #74e9ff; color: white; }
.holo-lab button:focus-visible, .holo-explore:focus-visible, #holo-rotation:focus-visible { outline: 2px solid #9affcf; outline-offset: 5px; }
.holo-explore { display: inline-flex; gap: 20px; align-items: center; color: #e3edff; font-weight: 750; font-size: .86rem; }
.holo-explore span { color: var(--cyan); font-size: 1.4rem; }
.holo-display { min-width: 0; border: 1px solid #768fba40; border-radius: 24px; background: radial-gradient(ellipse at 50% 40%,#24335b60,transparent 65%),linear-gradient(135deg,#101a2b,#0a0d1a 70%); box-shadow: 0 28px 70px #0004, inset 0 1px #efffff0d; overflow: hidden; }
.holo-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; }
.holo-topline > span { color: #b2c5de; font-size: .61rem; letter-spacing: .16em; }
.holo-topline i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #79efc0; box-shadow: 0 0 12px #79efc0; }
.holo-pause { font-size: .65rem; padding: 8px 10px; background: transparent; }
.holo-viewport { height: 340px; position: relative; perspective: 950px; overflow: hidden; }
.holo-stars { position: absolute; inset: 0; opacity: .7; background-image: radial-gradient(circle at 13% 22%,#9dcaff 1px,transparent 2px),radial-gradient(circle at 77% 18%,#8d76ff 1px,transparent 2px),radial-gradient(circle at 85% 67%,#4be4ff 1px,transparent 2px),radial-gradient(circle at 30% 70%,#4be4ff 1px,transparent 2px); }
.holo-floor { position: absolute; width: 800px; height: 600px; left: calc(50% - 400px); top: 70%; transform-origin: center top; transform: rotateX(70deg); background-image: linear-gradient(#4be4ff14 1px,transparent 1px),linear-gradient(90deg,#4be4ff14 1px,transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at top,#000,transparent 65%); }
.holo-pedestal { position: absolute; width: 260px; height: 110px; left: calc(50% - 130px); bottom: 23px; border-radius: 50%; border: 1px solid #4be4ff88; background: radial-gradient(ellipse,#4be4ff15,transparent 65%); box-shadow: 0 10px 0 #0b1729,0 11px 0 #427987,0 17px 24px #0008,0 0 35px #4be4ff1a; }
.holo-angle { position: absolute; width: 280px; height: 160px; left: calc(50% - 140px); top: 65px; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(var(--holo-angle,-24deg)); }
.holo-spinner { position: absolute; inset: 0; transform-style: preserve-3d; animation: holo-hover 6s ease-in-out infinite; }
.holo-object { position: absolute; inset: 0; transform-style: preserve-3d; }
.pad-layer { position: absolute; inset: 0; border-radius: 65px 65px 78px 78px; background: linear-gradient(145deg,#263957,#101a2d 70%); border: 1px solid #657b9f; }
.pad-back { transform: translateZ(-26px); background: #080e1d; box-shadow: 0 0 0 1px #4be4ff40; }
.pad-middle { transform: translateZ(-13px); background: #294462; box-shadow: 0 0 22px #4be4ff30; }
.pad-front { transform: translateZ(2px); box-shadow: inset 0 2px 3px #ffffff35,inset 0 -8px 16px #0007; }
.pad-brand { position: absolute; top: 18px; left: 110px; font-size: 11px; letter-spacing: .16em; color: #99bbd5; }
.pad-cross { position: absolute; left: 34px; top: 38px; font-size: 44px; color: #07101f; text-shadow: 0 1px #a5bedb70; transform: translateZ(12px); }
.pad-stick { position: absolute; width: 43px; height: 43px; border-radius: 50%; bottom: 25px; background: radial-gradient(circle at 40% 30%,#35455e,#091223 65%); border: 3px solid #08101d; box-shadow: 0 0 0 1px #546783,2px 7px 5px #0009; transform: translateZ(16px); }
.stick-left { left: 85px; } .stick-right { right: 68px; }
.pad-key { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 25%,#d3ffff,#3fabc4); box-shadow: 0 3px 0 #145267,0 0 12px #4be4ff33; transform: translateZ(12px); }
.key-one { right: 46px; top: 32px; } .key-two { right: 22px; top: 56px; background: #a38aff; } .key-three { right: 70px; top: 56px; background: #9affcf; } .key-four { right: 46px; top: 80px; background: #ff9ac7; }
.pad-led { position: absolute; top: 47px; left: 117px; width: 42px; height: 3px; border-radius: 4px; background: #6aebff; box-shadow: 0 0 16px #4be4ff; }
.pad-trigger { position: absolute; top: -10px; width: 67px; height: 24px; border-radius: 15px 15px 4px 4px; background: linear-gradient(#596c8c,#17253a); transform: translateZ(-16px); }
.trigger-left { left: 30px; } .trigger-right { right: 30px; }
.holo-crystal,.holo-portal { display: none; }
[data-model="crystal"] .holo-controller,[data-model="portal"] .holo-controller { display: none; }
[data-model="crystal"] .holo-crystal,[data-model="portal"] .holo-portal { display: block; }
.holo-crystal { width: 130px; height: 200px; left: 75px; top: -25px; }
.crystal-crown { position: absolute; inset: 0; transform-style: preserve-3d; }
.crystal-facet { position: absolute; left: 0; top: 0; width: 130px; height: 150px; clip-path: polygon(50% 0,100% 100%,0 100%); transform-origin: 50% 100%; background: linear-gradient(135deg,#c9ffffbb,#4be4ff55 50%,#7053f4bb); border-bottom: 2px solid #c2ffff; }
.crystal-bottom { transform: translateY(300px) rotateX(180deg); }
.crystal-core { position: absolute; left: 48px; top: 110px; width: 35px; height: 60px; border-radius: 50%; background: #b7feff; filter: blur(20px); box-shadow: 0 0 65px #7974ff; }
.holo-portal { width: 210px; height: 210px; left: 35px; top: -28px; }
.portal-ring { position: absolute; inset: 0; border-radius: 50%; border: 9px solid #81edff; box-shadow: 0 0 0 2px #172849,inset 0 0 16px #4be4ff,0 0 25px #4be4ff66; }
.ring-one { transform: rotateY(25deg); } .ring-two { transform: rotateY(85deg) rotateX(35deg); border-color: #a58aff; } .ring-three { transform: rotateX(75deg) rotateY(-20deg); border-width: 5px; border-color: #a0ffdb; }
.portal-heart { position: absolute; inset: 44px; display: grid; place-items: center; font-size: 78px; font-weight: 900; color: #d4ffff; text-shadow: 0 0 35px #4be4ff; transform: translateZ(20px); }
.holo-coordinate { position: absolute; left: 22px; bottom: 14px; font: .55rem/1.8 ui-monospace,monospace; color: #7190b6; letter-spacing: .12em; }
.holo-controls { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px; border-top: 1px solid #8fb8df20; background: #080e1b99; }
.holo-controls strong { display: block; font-size: .9rem; } .holo-controls span { display: block; color: #8fa3bf; font-size: .7rem; margin-top: 7px; }
.holo-controls label { display: grid; gap: 9px; color: #99abc5; font-size: .66rem; min-width: 120px; } #holo-rotation { width: 100%; accent-color: #70e6f9; cursor: ew-resize; }
.holo-paused .holo-spinner,.holo-paused .depth-cube { animation-play-state: paused; }
.depth-stage { right: 10%; top: 26%; }
.depth-satellite { position: absolute; width: 38px; height: 38px; border: 1px solid #b6a3ff; background: linear-gradient(135deg,#a994ff99,#4be4ff22); transform: rotateX(35deg) rotateY(-30deg) rotateZ(45deg); box-shadow: 8px 10px 0 #252c57,0 0 30px #a58aff44; }
.depth-satellite.satellite-one { top: -18px; right: -5px; } .depth-satellite.satellite-two { bottom: -12px; left: -30px; width: 23px; height: 23px; }
.depth-card { position: relative; transform-style: preserve-3d; }
.depth-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(400px circle at var(--shine-x,50%) var(--shine-y,50%),#b1eaff18,transparent 65%); transition: opacity .25s; }
.depth-card:hover::after { opacity: 1; }
.section-heading h2 { text-shadow: 0 3px 0 #26324b55; }
.holo-lab + section { scroll-margin-top: 32px; }
@keyframes holo-hover { 0%,100% { transform: translateY(0) rotateY(-8deg) rotateZ(-3deg); } 50% { transform: translateY(-18px) rotateY(12deg) rotateZ(3deg); } }
@media (max-width: 980px) { .holo-lab { gap: 24px; grid-template-columns: 1fr 1.2fr; } .holo-tabs { flex-direction: column; align-items: stretch; } .holo-tabs button { text-align: left; } .holo-controls { align-items: start; flex-direction: column; gap: 18px; } .holo-controls label { width: 100%; } }
@media (max-width: 680px) { .holo-lab { grid-template-columns: 1fr; gap: 28px; margin-bottom: 60px; } .holo-intro h2 { font-size: 3.1rem; } .holo-tabs { flex-direction: row; } .holo-tabs button { flex: 1; padding: 11px 8px; font-size: .7rem; } .holo-viewport { height: 310px; } .holo-topline { padding: 16px; } .holo-topline > span { font-size: .52rem; } .holo-controls { padding: 18px; } .depth-stage { right: -65px; top: 110px; } }
@media (prefers-reduced-motion: reduce) { .holo-spinner { animation: none; } .depth-card::after { transition: none; } }

/* Universe destinations: immersive previews with a clear route into each scene. */
#universo-3d { margin-bottom: 88px; }
#universo-3d .section-heading { align-items: end; margin-bottom: 32px; }
#universo-title { font-size: clamp(2rem,3.5vw,3.2rem); line-height: 1.12; letter-spacing: -.045em; }
#universo-title span { color: #9faecb; }
#universo-3d .section-note { max-width: 340px; line-height: 1.8; color: #9cacc7; font-size: .9rem; }
.universe-grid { gap: 24px; }
.universe-card { --cosmic-accent: #ffbe83; padding: 0; overflow: hidden; border: 1px solid #7e8dad36; border-radius: 24px; background: linear-gradient(145deg,#111729,#090d18); box-shadow: 0 20px 50px #0003; }
.universe-planetary { --cosmic-accent: #86dfff; }
.universe-card .universe-art { height: 280px; margin: 0; border-radius: 0; position: relative; background: radial-gradient(ellipse at 50% 50%,#33203670,transparent 68%),#050811; border-bottom: 1px solid #7e8dad25; }
.universe-planetary .universe-art { background: radial-gradient(ellipse at 50% 50%,#16366588,transparent 70%),#050811; }
.universe-art::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 22%,#b6c8ef 1px,transparent 1.5px),radial-gradient(circle at 80% 16%,#b6c8ef 1px,transparent 1.5px),radial-gradient(circle at 68% 76%,#b6c8ef 1px,transparent 1.5px),radial-gradient(circle at 23% 80%,#b6c8ef 1px,transparent 1.5px),radial-gradient(circle at 90% 62%,#b6c8ef 1px,transparent 1.5px); opacity: .5; }
.cosmic-index,.cosmic-caption { position: absolute; z-index: 3; left: 24px; font: .58rem ui-monospace,monospace; letter-spacing: .16em; color: #8796b5; }
.cosmic-index { top: 24px; }.cosmic-caption { bottom: 21px; font-size: .53rem; color: var(--cosmic-accent); }
.singularity-scene { position: absolute; left: 50%; top: 49%; width: 260px; height: 170px; transform: translate(-50%,-50%) rotate(-16deg); }
.accretion-disk,.accretion-front { position: absolute; left: -25px; right: -25px; top: 54px; height: 65px; border-radius: 50%; background: repeating-radial-gradient(ellipse at center,transparent 0 8px,#ffdfad88 9px 10px,#ff8a3344 11px 14px,transparent 15px 19px); box-shadow: 0 0 25px #fc813b44,inset 0 0 24px #ffcf8d88; transform: rotate(-6deg); }
.accretion-disk { filter: blur(1px); }
.photon-ring { position: absolute; width: 128px; height: 128px; left: 66px; top: 20px; border: 4px solid #ffdfab; border-radius: 50%; box-shadow: 0 0 5px #fff4d5,inset 0 0 18px #ff9d44,0 0 25px #ff9d44,0 0 55px #eb743a66; }
.event-horizon { position: absolute; width: 116px; height: 116px; left: 72px; top: 26px; border-radius: 50%; background: #010205; box-shadow: inset -6px 0 10px #3c1a1255; }
.accretion-front { clip-path: inset(50% 0 0); opacity: .95; filter: drop-shadow(0 0 7px #ffae6b); }
.planetary-scene { position: absolute; left: 50%; top: 49%; width: 300px; height: 200px; transform: translate(-50%,-50%) rotate(-18deg); }
.solar-star { position: absolute; width: 76px; height: 76px; top: 62px; left: 112px; border-radius: 50%; background: radial-gradient(circle at 30% 26%,#fffbd0,#ffd36b 30%,#ff9b20 65%,#db5015); box-shadow: 0 0 26px #ffb32d88,0 0 70px #ff9b2033,inset -6px -5px 14px #ed6c21; }
.solar-orbit { position: absolute; border: 1px solid #789ed64d; border-radius: 50%; top: 50%; left: 50%; animation: cosmic-orbit 32s linear infinite; }
.orbit-inner { width: 142px; height: 68px; margin: -34px 0 0 -71px; animation-duration: 20s; }
.orbit-earth { width: 230px; height: 112px; margin: -56px 0 0 -115px; animation-duration: 34s; }
.orbit-outer { width: 322px; height: 170px; margin: -85px 0 0 -161px; animation-duration: 50s; }
.solar-planet { position: absolute; left: 12%; top: 10%; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#e3c7a1,#725b53); box-shadow: 3px 4px 8px #0008; }
.planet-earth { width: 19px; height: 19px; left: 82%; top: 19%; background: radial-gradient(circle at 30% 25%,#a5f9ed,#55ac9e 25%,#2869a1 50%,#102841); }
.planet-saturn { width: 24px; height: 24px; left: 13%; top: 76%; background: radial-gradient(circle at 30% 25%,#ffedca,#bca075 60%,#544738); }
.planet-saturn::after { content: ''; position: absolute; inset: 7px -9px; border-radius: 50%; border: 3px solid #cfba9388; transform: rotate(-25deg); }
.cosmic-body { padding: 27px 28px 28px; }
.cosmic-category { display: flex; align-items: center; gap: 8px; font-size: .58rem; font-weight: 750; letter-spacing: .13em; color: var(--cosmic-accent); margin-bottom: 14px; }
.cosmic-category > span:last-child { margin-left: auto; color: #60728f; font-family: ui-monospace,monospace; }
.cosmic-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cosmic-accent); box-shadow: 0 0 10px var(--cosmic-accent); }
.universe-card h3 { font-size: 1.7rem; letter-spacing: -.03em; margin: 0 0 12px; }
.universe-card p { font-size: .88rem; line-height: 1.85; color: #a7b5cd; margin: 0; min-height: 78px; }
.cosmic-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 19px 0 25px; }
.cosmic-tags span { font-size: .63rem; color: #9baecb; border: 1px solid #8fa6c529; border-radius: 6px; padding: 6px 9px; background: #8fa6c505; }
.cosmic-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; font-size: .85rem; font-weight: 800; border-top: 1px solid #8fa6c529; padding-top: 18px; color: #e4efff; }
.cosmic-cta > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #8fa6c53d; font-size: 1.2rem; color: var(--cosmic-accent); transition: background .2s,transform .2s; }
.cosmic-cta:hover > span { background: #8fa6c51a; transform: translate(2px,-2px); }
.cosmic-cta:focus-visible { outline: 2px solid var(--cosmic-accent); outline-offset: 6px; border-radius: 4px; }
.holo-paused .solar-orbit { animation-play-state: paused; }
@keyframes cosmic-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media(max-width:800px) { #universo-3d .section-heading { display: block; } #universo-3d .section-note { max-width: 500px; margin-top: 18px; } .universe-card .universe-art { height: 240px; } .cosmic-body { padding: 23px; } .universe-card p { min-height: 104px; } }
@media(max-width:650px) { #universo-3d { margin-bottom: 62px; } .universe-grid { gap: 22px; } .universe-card { padding: 0; } .universe-card p { min-height: 0; } .universe-card .universe-art { height: 260px; } }
@media(prefers-reduced-motion:reduce) { .solar-orbit { animation: none; } .cosmic-cta > span { transition: none; } }
.ebook-cover[src*="capa-v2"] { object-fit: contain; background: #070a12; }