:root { color: #edfff3; background: #06150d; font-family: Inter, system-ui, sans-serif; }
body { margin: 0; }
.shell { display: grid; grid-template-columns: 18rem 1fr; min-height: 100vh; }
.shell--navigation-collapsed { grid-template-columns: 4.5rem 1fr; }
.navigation-panel { background: linear-gradient(180deg, #0d2b19, #06150d); border-right: 1px solid #1b8b45; box-shadow: inset -1px 0 #70ff9c33; padding: 1.25rem; }
.navigation-panel__header { align-items: center; display: flex; gap: .65rem; justify-content: space-between; margin-bottom: 1.5rem; }
.brand { align-items: center; color: #a5ffbd; display: flex; font-size: 1.05rem; font-weight: 700; gap: .55rem; letter-spacing: .03em; min-width: 0; text-decoration: none; text-shadow: 0 0 14px #43f87599; }
.brand img { filter: drop-shadow(0 0 7px #43f87599); flex: none; }
.brand span { overflow: hidden; white-space: nowrap; }
.navigation-toggle { background: #07170d; border: 1px solid #43f875; border-radius: .35rem; color: #a5ffbd; cursor: pointer; flex: none; font: 700 1.25rem/1 system-ui, sans-serif; height: 2rem; padding: 0; width: 2rem; }
.navigation-toggle:hover, .navigation-toggle:focus-visible { background: #124326; box-shadow: 0 0 12px #43f87566; outline: 1px solid #a5ffbd; }
.shell--navigation-collapsed .navigation-panel { padding-inline: .7rem; }
.shell--navigation-collapsed .navigation-panel__header { flex-direction: column; }
.shell--navigation-collapsed .brand span { display: none; }
main { padding: 3rem; }
.route-content { min-width: 0; }
.advertising-slot { border-top: 1px solid #1b8b4566; display: grid; margin-top: 5rem; min-height: 7.5rem; padding-top: 1rem; place-items: center; }
.advertising-slot__label { color: #83f7a7aa; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.advertising-slot .adsbygoogle { display: block; max-height: 7.5rem; max-width: 60rem; width: 100%; }
.privacy-settings { color: #83f7a7; display: inline-block; font-size: .78rem; margin-top: 1rem; }
.privacy-settings:hover, .privacy-settings:focus-visible { color: #ffffff; }
.privacy-page { max-width: 52rem; }
.privacy-settings-list { display: grid; gap: .75rem; margin: 2rem 0; max-width: 32rem; }
.privacy-settings-list div { background: #0d2b19; border: 1px solid #1b8b45; padding: 1rem; }
.privacy-settings-list dt { color: #83f7a7; font-size: .78rem; }
.privacy-settings-list dd { margin: .35rem 0 0; }
.privacy-note { color: #b8f8ca; }
.tree { list-style: none; margin: 0; padding-left: 1rem; }
.tree:first-child { padding-left: 0; }
.tree li { margin: .45rem 0; }
.tree a { color: #83f7a7; text-decoration: none; }
.tree a:hover, .tree a:focus-visible { color: #ffffff; outline: none; text-decoration: underline; text-shadow: 0 0 10px #43f875; }
.openvdb-demo { display: grid; gap: 2rem; grid-template-columns: minmax(16rem, 1fr) minmax(16rem, 28rem); max-width: 62rem; }
.openvdb-demo__intro { align-self: center; }
.eyebrow { color: #83f7a7; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.lantern-button { background: #21b653; border: 1px solid #9affb9; border-radius: .45rem; box-shadow: 0 0 20px #43f87588; color: #031008; cursor: pointer; font: inherit; font-weight: 800; margin: .5rem 0; padding: .75rem 1rem; }
.lantern-button:disabled { cursor: wait; opacity: .7; }
.demo-status { color: #b8f8ca; min-height: 2.75rem; }
.lantern-frame { background: radial-gradient(circle, #214c2d 0%, #0b2112 48%, #041008 78%); border: 1px solid #2aa85a; box-shadow: 0 0 32px #43f87544, inset 0 0 28px #43f87522; min-height: 12rem; overflow: hidden; position: relative; }
.lantern-frame canvas { display: block; height: auto; image-rendering: pixelated; position: relative; width: 100%; z-index: 1; }
.lantern-frame__glow { background: radial-gradient(circle, #8dffac55 0%, transparent 65%); inset: 0; pointer-events: none; position: absolute; }
.openvdb-metrics { display: grid; gap: .75rem; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.openvdb-metrics div { background: #0d2b19; border: 1px solid #1b8b45; padding: .75rem; }
.openvdb-metrics dt { color: #83f7a7; font-size: .78rem; }
.openvdb-metrics dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.ax-demo { grid-template-columns: minmax(22rem, 1.2fr) minmax(20rem, 30rem); }
.ax-source-label { color: #83f7a7; display: block; font-size: .8rem; font-weight: 700; margin: 1rem 0 .4rem; }
.ax-source { background: #020b06; border: 1px solid #2aa85a; border-radius: .35rem; box-sizing: border-box; color: #caffd8; font: .85rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; padding: .75rem; resize: vertical; width: 100%; }
.ax-source:focus { border-color: #8dffac; box-shadow: 0 0 16px #43f87555; outline: none; }
.ax-frame { align-self: center; }
.world-demo { display: grid; gap: 1rem; max-width: 76rem; }
.world-demo__header { align-items: end; display: flex; gap: 2rem; justify-content: space-between; }
.world-demo__header h1 { margin-bottom: .35rem; }
.world-demo__header p { max-width: 58rem; }
.world-viewport { background: #020b06; border: 1px solid #2aa85a; box-shadow: 0 0 30px #43f87533; overflow: hidden; position: relative; }
.world-viewport canvas { aspect-ratio: 16 / 9; display: block; height: auto; width: 100%; }
.world-hud { align-items: center; background: #031008dd; bottom: 0; display: flex; gap: 1rem; left: 0; padding: .65rem .8rem; position: absolute; right: 0; }
.world-mode { border: 1px solid; border-radius: 999px; flex: none; font-size: .75rem; font-weight: 800; padding: .3rem .6rem; text-transform: uppercase; }
.world-mode--open { border-color: #70ff9c; color: #9affb9; }
.world-mode--tunnel { border-color: #c792ff; color: #dfc1ff; }
.world-controls { align-items: center; display: flex; gap: .75rem; }
.world-controls button { background: #0d2b19; border: 1px solid #43f875; border-radius: .35rem; color: #dffff0; cursor: pointer; padding: .55rem .8rem; }
.world-controls button:disabled { cursor: not-allowed; opacity: .45; }
.world-controls select { background: #07170d; border: 1px solid #43f875; border-radius: .35rem; color: #dffff0; padding: .5rem .65rem; }
.world-controls span { margin-left: auto; }
.world-metrics { grid-column: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .shell, .shell--navigation-collapsed { grid-template-columns: 1fr; } .navigation-panel { border-bottom: 1px solid #1b8b45; border-right: 0; } .shell--navigation-collapsed .navigation-panel { padding-block: .65rem; } .shell--navigation-collapsed .navigation-panel__header { flex-direction: row; margin: 0; } .openvdb-demo { grid-template-columns: 1fr; } .openvdb-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .advertising-slot { margin-top: 3.5rem; } }