: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; }
@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:crosshair;}
 #touch-vapor-depth .tv-heading,#touch-vapor-depth .tv-caption {position:absolute;pointer-events:none;color:#b7b5c0;}
 #touch-vapor-depth .tv-heading {left:22px;top:19px;}
 #touch-vapor-depth .tv-caption {bottom:18px;left:16px;right:16px;text-align:center;}
 #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;}}