.component-explorer{padding-block:88px 90px;border-top:1px solid var(--line)}
.component-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.component-choices button{min-height:94px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-content:center;align-items:center;text-align:left;gap:2px 12px;padding:16px 20px;border:1px solid #c5f3ec24;border-radius:18px;background:#07191f;color:var(--fg);cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.component-choices button:hover{transform:translateY(-2px);border-color:#a8ece055;background:#0c252b}
.component-choices button[aria-selected=true]{border-color:#b7e5de9c;background:linear-gradient(130deg,#0d3035,#08191e);box-shadow:0 14px 38px #01070b55}
.component-choices button span{grid-row:1/3;color:#9ab8b3;font:11px/1.5 monospace}
.component-choices button strong{font-size:15px;font-weight:600}
.component-choices button small{color:var(--muted);font-size:11px}
.component-demo{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(250px,.72fr);gap:14px;padding:14px;border:1px solid #b7e5de2e;border-radius:28px;background:#07161b;box-shadow:0 28px 80px #0005}
.component-demo.no-inspector{grid-template-columns:minmax(0,1fr)}
.component-main{min-width:0}
.component-stage{position:relative;min-height:380px;aspect-ratio:1.56;background:radial-gradient(ellipse at 50% 48%,#182b3d 0,#07101c 43%,#02050d 78%);border:1px solid #8bcacb35;border-radius:20px;overflow:hidden}
.component-stage:after{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid #b5ded31b;border-radius:14px}
#orb-demo,#component-image,#component-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
#rocket-demo{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#rocket-demo:active{cursor:grabbing}
#orb-demo{touch-action:none;cursor:grab;outline:none}
#orb-demo:active{cursor:grabbing}
#component-image,#component-fallback{object-fit:contain;background:#040712}
#orb-demo[hidden],#rocket-demo[hidden],#component-image[hidden],#component-fallback[hidden],.component-inspector[hidden]{display:none}
.component-stage.void-mode .component-stage-top,.component-stage.void-mode .component-stage-bottom{display:none}
.void-interface{position:absolute;inset:0;z-index:1;overflow:auto;padding:16px 20px 14px;background:radial-gradient(ellipse at 50% 44%,#12293b 0,#07111d 55%,#03050c 100%);color:#e9f7fa}
.void-interface[hidden]{display:none}
.void-room-head,.void-room-foot{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#8daabd;font:9px/1.5 monospace;letter-spacing:.16em;text-transform:uppercase}
.void-room-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(210px,.8fr);gap:18px;align-items:center;min-height:285px;margin:9px auto 0;max-width:900px}
.void-monitors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;perspective:800px;transform:perspective(800px) rotateX(3deg)}
.void-monitor{position:relative;aspect-ratio:1.55;overflow:hidden;border:1px solid #66dff175;border-radius:8px;padding:0;background:linear-gradient(155deg,#0d2638,#030813);color:#aeeeff;cursor:pointer;box-shadow:0 7px 16px #0008;transition:transform .18s,border-color .18s,box-shadow .18s;background-position:center;background-size:cover}
.void-monitor:hover,.void-monitor[aria-pressed=true]{transform:translateY(-3px) scale(1.03);border-color:#d5b4ff;box-shadow:0 0 18px #a678f977}
.void-monitor small{position:absolute;right:5px;bottom:3px;color:#e7d8ff;font:9px monospace;text-shadow:0 1px 4px #000}
.void-mini-graph{position:absolute;inset:18% 8% 22%;opacity:.8;background:linear-gradient(transparent 48%,#65dbf366 49%,transparent 51%),linear-gradient(135deg,transparent 10%,#a78bfa 11%,transparent 13%,transparent 42%,#70ebf0 43%,transparent 45%);background-size:100% 100%}
.void-monitor:nth-child(3n) .void-mini-graph{background:radial-gradient(ellipse at 50% 45%,#a38eff99 0 4%,transparent 5% 23%,#63d9eb88 24% 25%,transparent 26%)}
.void-monitor:nth-child(4n) .void-mini-graph{background:repeating-linear-gradient(0deg,transparent 0 6px,#79daf366 7px 8px)}
.void-monitor.has-local-image .void-mini-graph{display:none}
.void-controls{padding:15px;border:1px solid #7edff036;border-radius:15px;background:#07111ddd;box-shadow:0 15px 35px #0007}
.void-controls .eyebrow{margin:0 0 4px;font-size:9px}
.void-controls h3{margin:0 0 5px;font-size:18px}
.void-controls>p:not(.eyebrow){font-size:10px;line-height:1.45;color:#a9bbc8}
.void-controls label{display:block;margin:10px 0;color:#c8d6e0;font-size:10px}
.void-controls select,.void-controls input{display:block;width:100%;margin-top:5px;border:1px solid #71c8da4a;border-radius:8px;padding:8px;background:#081722;color:#eff9ff;font:11px 'Segoe UI',sans-serif}
.void-controls button{width:100%;border:1px solid #b9a0ff7a;border-radius:8px;padding:8px;background:#18182b;color:#f7f0ff;font-size:10px;cursor:pointer}
.void-image-input{border-top:1px solid #81c9da29;padding-top:8px}
.void-private-note{font-size:9px!important;color:#8797a8!important}
.void-room-foot{justify-content:center;margin-top:10px;letter-spacing:.08em;text-transform:none}
.component-stage-top,.component-stage-bottom{position:absolute;z-index:2;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#b7c6d6;font:9px/1.5 monospace;letter-spacing:.13em;text-transform:uppercase;pointer-events:none;text-shadow:0 1px 8px #000}
.component-stage-top{top:19px}
.component-stage-bottom{bottom:17px;letter-spacing:.025em;text-transform:none;font:11px/1.5 'Segoe UI',Arial,sans-serif;color:#c4d0d8}
.component-stage-bottom a{pointer-events:auto;color:#d1c4ff;text-decoration:none}
.component-stage-bottom a:hover{text-decoration:underline}
.component-copy{padding:25px 10px 6px}
.component-copy .eyebrow{margin-bottom:10px}
.component-copy h3{font-size:26px;margin-bottom:8px}
.component-copy>p:not(.eyebrow){font-size:13px;color:#b4b4c0;max-width:720px;margin-bottom:16px}
.component-tags{display:flex;flex-wrap:wrap;gap:8px}
.component-tags span{border:1px solid #b7e5de38;border-radius:99px;padding:5px 10px;color:#bfe5dd;font-size:10px}
.component-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.component-action,.trip-planner button{border:1px solid #b7e5de4a;border-radius:999px;padding:8px 13px;background:#0a2025;color:#e8f4f0;font-size:11px;cursor:pointer}
.component-action:hover,.trip-planner button:hover{background:#12363a;border-color:#b7e5de99}
.screen-theme,.trip-planner,.earth-overlays,.nasa-briefings{margin-top:17px;padding:14px;border:1px solid #b7e5de2e;border-radius:14px;background:#061217}
.geo-style-controls,.jarvis-style-controls,.rocket-study-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:17px;padding:14px;border:1px solid #aaa0ff38;border-radius:14px;background:linear-gradient(145deg,#111321,#071016)}
.rocket-reference{max-width:360px;margin:14px 0 0;padding:10px;border:1px solid #c3c7d033;border-radius:12px;background:#070a12}
.rocket-reference[hidden]{display:none}
.rocket-reference img{display:block;width:100%;max-height:420px;object-fit:contain;background:#10151e}
.rocket-reference figcaption{padding-top:8px;color:#9daab4;font-size:10px;line-height:1.5}
.geo-style-controls[hidden],.jarvis-style-controls[hidden],.rocket-study-controls[hidden]{display:none}
.geo-style-controls label,.jarvis-style-controls label,.rocket-study-controls label{display:block;color:#cbd4df;font-size:11px}
.geo-style-controls select,.jarvis-style-controls select,.rocket-study-controls select{display:block;width:100%;margin-top:6px;padding:9px;border:1px solid #aab4c53d;border-radius:9px;background:#080c15;color:#f4f6fa;font:12px 'Segoe UI',Arial,sans-serif}
.rocket-study-controls button{align-self:end;border:1px solid #a99aff6b;border-radius:999px;padding:9px 13px;background:#151427;color:#f4efff;font-size:11px;cursor:pointer}
.geo-style-controls output,.jarvis-style-controls output,.rocket-study-controls output{grid-column:1/-1;display:block;color:#9daab4;font-size:10px;line-height:1.5}
.component-stage.geo-view{background-color:#08090b;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px),radial-gradient(ellipse at 50% 50%,#25282d,#050608 76%);background-size:42px 42px,42px 42px,cover}
.component-stage.geo-view #component-image{filter:grayscale(1) contrast(1.2) brightness(.88)}
.component-stage.geo-view[data-map-layout=orbital]{background-image:radial-gradient(ellipse at 52% 50%,#1c252b 0,#05080b 72%),repeating-radial-gradient(ellipse at 50% 50%,#c8d1dc18 0 1px,transparent 2px 32px),linear-gradient(90deg,transparent 49.9%,#dce4ec18 50%,transparent 50.1%)}
.component-stage.geo-view[data-map-layout=quiet]{background-image:linear-gradient(135deg,#0b0d10,#16191c 52%,#07090c)}
.component-stage.geo-view[data-map-layout=quiet] #component-image{filter:grayscale(1) contrast(1.04) brightness(.72)}
.component-stage.geo-view[data-map-layout=orbital] #component-image{filter:grayscale(1) contrast(1.35) brightness(.98)}
#component-copy[data-geo-font=technical]{font-family:ui-monospace,Consolas,monospace;letter-spacing:.01em}
#component-copy[data-geo-font=technical] h3{text-transform:uppercase;letter-spacing:.07em;font-size:21px}
#component-copy[data-geo-font=editorial]{font-family:Georgia,'Times New Roman',serif}
#component-copy[data-geo-font=editorial] h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:30px}
#component-copy[data-geo-font=clean]{font-family:'Segoe UI',Arial,sans-serif}
#component-copy[data-map-layout=interzone] .component-tags span{border-radius:2px;text-transform:uppercase;letter-spacing:.08em}
#component-copy[data-map-layout=orbital] .component-tags span{border-color:#d7e2ef69;background:#a8bac00e}
#component-copy[data-map-layout=quiet] .component-tags span{border-color:#858b9438;color:#c8cbd0}
.component-stage.jarvis-view{background:#030711}
.component-stage.jarvis-view[data-jarvis-backdrop=graphite]{background:radial-gradient(ellipse at center,#252b34,#080a0e 78%)}
.component-stage.jarvis-view[data-jarvis-backdrop=aurora]{background:radial-gradient(ellipse at 32% 28%,#123a42,#17102e 42%,#030711 80%)}
.component-stage.jarvis-view[data-jarvis-appearance=signal] #component-image{filter:hue-rotate(18deg) saturate(1.55) contrast(1.12)}
.component-stage.jarvis-view[data-jarvis-appearance=spectral] #component-image{filter:hue-rotate(76deg) saturate(1.8) brightness(1.07)}
.screen-theme[hidden],.trip-planner[hidden],.nasa-briefings[hidden]{display:none}
.earth-overlays[hidden]{display:none}
.screen-theme label,.trip-planner label,.earth-overlays label{display:block;margin-bottom:9px;color:#c4d5d2;font-size:11px}
.screen-theme select,.trip-planner input,.earth-overlays select{display:block;width:100%;margin-top:6px;border:1px solid #aecbc13b;border-radius:9px;background:#08141b;color:#f2f0f7;padding:9px;font:12px 'Segoe UI',Arial,sans-serif}
.screen-theme p,.trip-planner output,.earth-overlays output,.nasa-briefings>.small{display:block;margin:8px 0 0;color:#9daab4;font-size:10px;line-height:1.5}
.trip-planner{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;align-items:end}
.trip-planner button,.trip-planner output{grid-column:1/-1}
.nasa-briefings{display:grid;gap:8px}
.nasa-briefings>.eyebrow{margin:0 0 2px}
.nasa-card{display:grid;gap:3px;padding:10px;border:1px solid #b7e5de24;border-radius:10px;color:#e8f4f0;text-decoration:none;background:#0a1b22}
.nasa-card:hover{border-color:#b7e5de88}
.nasa-card span{color:#9daab4;font-size:10px}
.component-stage[data-theme=aurora]{background:radial-gradient(ellipse at 24% 18%,#163c41 0,#101633 34%,#030710 78%)}
.component-stage[data-theme=dawn]{background:radial-gradient(ellipse at 70% 14%,#56402c 0,#2c2038 32%,#070b16 78%)}
.component-inspector{align-self:stretch;padding:22px 18px;border:1px solid #b7e5de25;border-radius:20px;background:linear-gradient(160deg,#10262b,#091319 65%)}
.component-inspector>.eyebrow{margin-bottom:20px}
.component-inspector label{display:block;margin:0 0 18px;color:#c4d5d2;font-size:12px}
.component-inspector select,.component-inspector input{display:block;width:100%;margin-top:8px}
.component-inspector select{border:1px solid #aecbc13b;border-radius:10px;background:#061217;color:#f2f0f7;padding:11px 12px;font:12px 'Segoe UI',Arial,sans-serif}
.component-inspector input{accent-color:#baa0ff}
.component-inspector output{float:right;color:#d8caff;font-family:monospace}
.component-inspector-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.component-inspector-actions button{border:1px solid #b7e5de4a;border-radius:99px;background:#0a2025;color:#e7f3ef;padding:9px 13px;font-size:11px;cursor:pointer}
.component-inspector-actions button:hover{background:#12363a}
.component-inspector-note,.component-disclosure{color:#939aa8;font-size:11px;line-height:1.65}
.component-inspector-note{margin-top:18px}
.component-disclosure{margin:16px 5px 0;max-width:1000px}
@media(max-width:1100px){.component-choices{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.component-demo,.component-demo.no-inspector{grid-template-columns:1fr}.component-inspector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.component-inspector>.eyebrow,.component-inspector-note,.component-inspector-actions{grid-column:1/-1}.component-inspector label{margin-bottom:14px}}
@media(max-width:600px){.component-explorer{padding-block:62px}.component-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.component-choices button{min-height:70px;padding:11px}.component-choices button strong{font-size:13px}.component-stage{min-height:290px;aspect-ratio:1.12}.component-stage-top,.component-stage-bottom{left:16px;right:16px}.component-copy{padding-inline:2px}.component-inspector{display:block;padding:18px}.component-inspector label{margin-bottom:16px}.component-stage-bottom{align-items:flex-start;font-size:10px}.trip-planner{grid-template-columns:1fr}.void-room-layout{grid-template-columns:1fr;gap:10px}.void-controls{padding:10px}.void-monitors{gap:5px}.void-room-head{font-size:8px}}
@media(max-width:380px){.component-choices{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.component-choices button{transition:none;transform:none}}
