:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; color: #e8e7ee; background: #151515; font-size: 16px; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; }
main { max-width: 1000px; margin: 0 auto; }
button, input, select { font: inherit; }
button, select { min-height: 44px; }
.btn { padding: 10px 14px; border: 1px solid #49474f; border-radius: 7px; color: inherit; background: #26252a; cursor: pointer; }
.btn:hover { background: #34323a; }
.btn[aria-pressed="true"] { background: #e8e7ee; color: #17161c; border-color: #e8e7ee; }
:focus-visible { outline: 2px solid #b9a0eb; outline-offset: 3px; }
.viz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.viz-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.tv-primary { grid-template-columns: 1fr; }
.form-label { display: block; min-width: 0; line-height: 1.5; }
.form-select { display: block; width: 100%; color: inherit; background: #26252a; border: 1px solid #49474f; border-radius: 7px; padding: 8px 12px; }
.form-range { display: block; width: 100%; min-height: 36px; margin: 5px 0 0; accent-color: #baa9dc; cursor: pointer; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.tv-actions { align-items: end; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.access-gate { min-height: calc(100svh - 48px); display: grid; place-items: center; }
.access-form { width: min(100%, 320px); }
.access-form h1 { margin: 0 0 12px; font-size: 26px; font-weight: 500; }
.access-form > p { color: #aaa7b2; margin: 0 0 28px; line-height: 1.5; }
.access-input { width: 100%; min-height: 48px; margin-top: 8px; padding: 10px 12px; border: 1px solid #49474f; border-radius: 7px; background: #26252a; color: #e8e7ee; }
.access-form .access-error { min-height: 24px; margin: 8px 0 12px; color: #eeb8c5; font-size: 14px; }
.access-submit { width: 100%; background: #e8e7ee; color: #17161c; }
.access-submit:hover { background: #baa9dc; }
main:focus { outline: none; }
@media (max-width: 540px) { body { padding: 12px; } .viz-controls { grid-template-columns: 1fr; gap: 16px; } }

/* Material stage */

 #touch-vapor-depth {width:100%;}
 #touch-vapor-depth .tv-stage {position:relative;height:560px;overflow:hidden;background:#000;}
 #touch-vapor-depth .tv-canvas {display:block;width:100%;height:100%;touch-action:none;cursor:url("assets/material-cursor.svg") 16 16,crosshair;}
 #touch-vapor-depth .tv-primary {margin-top:18px;}
 #touch-vapor-depth .tv-depth {margin-top:14px;}
 #touch-vapor-depth .tv-actions {margin:14px 0;}
 #touch-vapor-depth output {float:right;margin-left:12px;}
 #touch-vapor-depth .tv-error {position:absolute;inset:45% 20px auto;color:#eee;text-align:center;}
 @media(max-width:480px){#touch-vapor-depth .tv-stage {height:440px;}}


.tv-depth-slider {display:flex;align-items:center;gap:10px;flex:0 1 300px;min-width:160px;}
.tv-depth-track {position:relative;display:block;flex:1;min-width:80px;}
.tv-depth-slider .form-range {margin:0;width:100%;}
.tv-depth-dots {position:absolute;left:8px;right:8px;bottom:2px;pointer-events:none;}
.tv-depth-dots span {position:absolute;width:4px;height:4px;border-radius:50%;background:#aaa7b2;transform:translateX(-50%);}
.tv-depth-end {font-size:13px;color:#aaa7b2;}
@media(max-width:540px){.tv-depth-slider {flex-basis:180px;}}