.spatial-page-header{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.06)}.spatial-page-badge{font-size:11px;padding:4px 10px;background:#00e5ff14;border:1px solid rgba(0,229,255,.3);color:#00e5ff;border-radius:999px;display:flex;align-items:center;gap:6px}.spatial-studio-main{padding:40px 0 80px}.studio-workspace-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:36px}@media(min-width:1024px){.studio-workspace-grid{grid-template-columns:1.4fr 1fr;gap:28px}}.studio-viewport-card{background:#0e0e14cc;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;box-shadow:0 24px 60px #0009}.viewport-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#ffffff08;border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap;gap:8px}.viewport-title{font-size:12px;color:#fff;display:flex;align-items:center;gap:6px}.studio-three-container{position:relative;width:100%;height:480px;background:#08080c;outline:none;cursor:grab}.studio-three-container:active{cursor:grabbing}.viewport-hud{position:absolute;top:14px;left:14px;right:14px;display:flex;flex-wrap:wrap;gap:12px;font-size:11px;pointer-events:none;z-index:10}.hud-item{padding:4px 8px;background:#0a0a0ebf;border:1px solid rgba(255,255,255,.08);border-radius:4px;color:#fff}.hud-label{color:#ffffff80;margin-right:4px}.hud-engine{margin-left:auto;border-color:#00e5ff4d;color:#00e5ff}.viewport-drag-hint{position:absolute;bottom:14px;left:50%;transform:translate(-50%);padding:4px 10px;background:#0a0a0e99;border:1px solid rgba(255,255,255,.06);border-radius:999px;font-size:10px;color:#fff6;pointer-events:none;z-index:10}.studio-optics-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;padding:16px 20px;background:#ffffff05;border-top:1px solid rgba(255,255,255,.06)}.optic-control{display:flex;flex-direction:column;gap:6px}.optic-control label{font-size:10px;color:#ffffff80;display:flex;justify-content:space-between}.optic-control label span{color:#00e5ff}.optic-control input[type=range]{width:100%;accent-color:#00e5ff}.studio-side-column{display:flex;flex-direction:column;gap:20px}.studio-program-card,.studio-inspector-card{background:#0e0e14cc;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden}.program-card-header,.inspector-header{padding:10px 16px;background:#ffffff08;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#fff}.program-rec-indicator{color:#ff4633}.program-res,.inspector-badge{color:#ffffff73}.studio-program-screen{position:relative;width:100%;aspect-ratio:16 / 9;background:#060608;overflow:hidden;display:flex;align-items:center;justify-content:center}.program-media-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0e111a}.media-layer-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:20px 20px}.media-layer-metadata{position:relative;z-index:2;text-align:center}.media-tag{display:block;font-size:10px;color:#00e5ff}.media-desc{font-size:10px;color:#fff6}.program-composite-layer{position:relative;z-index:5;text-align:center}.composite-kinetic-title{font-size:36px;font-weight:800;background:linear-gradient(135deg,#fff,#00e5ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:transform .1s ease-out}.composite-subtext{font-size:9px;color:#ffffff80;margin-top:4px}.program-safe-guides{position:absolute;inset:12px;border:1px dashed rgba(255,255,255,.12);pointer-events:none}.guide-label{position:absolute;bottom:4px;right:6px;font-size:8px;color:#ffffff4d}.program-timeline-bar{padding:8px 14px;background:#ffffff05;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;font-size:10px;color:#ffffff73}.timeline-status-badge{color:#00e5ff}.transform-sliders{padding:16px;display:flex;flex-direction:column;gap:12px}.transform-row{display:flex;align-items:center;gap:10px}.axis-pill{width:20px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}.axis-x{background:#ff463333;color:#ff4633}.axis-y{background:#2ed57333;color:#2ed573}.axis-z{background:#00e5ff33;color:#00e5ff}.transform-row input[type=range]{flex:1;accent-color:#00e5ff}.axis-val{font-size:11px;color:#ffffffb3;width:32px;text-align:right}.kinetic-presets-row{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px}.kinetic-presets-row .micro{font-size:9px;font-family:var(--font-mono, monospace);color:#fff6;text-transform:uppercase}.preset-btn-group{display:flex;gap:8px}.preset-btn{flex:1;padding:6px;font-size:10px;font-family:var(--font-mono, monospace);background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:4px;color:#ffffffb3;cursor:pointer;transition:all .2s ease}.preset-btn.is-active,.preset-btn:hover{background:#00e5ff1f;border-color:#00e5ff59;color:#00e5ff}.studio-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:48px}.feature-box{padding:24px;background:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:8px}.feature-box .micro{color:#00e5ff;font-size:10px;font-family:var(--font-mono, monospace);text-transform:uppercase;margin-bottom:6px}.feature-box h4{font-size:16px;color:#fff;margin:0 0 8px}.feature-box p{font-size:13px;line-height:1.5;color:#fff9;margin:0}
