:root{--instrument-size: min(26.25rem, 90vw);--bezel-radius: 2.5rem;--dial-size: calc(var(--instrument-size) * 340 / 420);--bezel-color: #1a1a1a;--bezel-dark: #0d0d0d;--bezel-highlight: #333;--screw-color: #222;--screw-slot: #111;--knob-color: #1a1a1a;--knob-text: #ccc;--tick-color: #fff;--text-color: #fff}.title{margin-bottom:1.5rem;font-size:0.9375rem;letter-spacing:0.125rem;text-transform:uppercase;color:#fff;text-align:center}.controls{margin-top:1.875rem;text-align:center}.controls p{font-size:0.8125rem;opacity:0.6;margin-bottom:0.5rem}.readout{font-family:'Courier New', monospace;font-size:0.875rem;color:#8cf;margin-top:0.625rem}.instrument-wrapper{position:relative;width:var(--instrument-size);height:var(--instrument-size)}.bezel{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23000' fill-opacity='0'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23fff' fill-opacity='0.03'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000' fill-opacity='0.05'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23fff' fill-opacity='0.02'/%3E%3Crect x='1' y='3' width='1' height='1' fill='%23000' fill-opacity='0.04'/%3E%3C/svg%3E"),linear-gradient(145deg, var(--bezel-highlight), var(--bezel-color) 30%, var(--bezel-dark) 80%);background-size:0.25rem 0.25rem, 100% 100%;border-radius:var(--bezel-radius);box-shadow:0 0.25rem 1.25rem rgba(0,0,0,0.8),inset 0 0.0625rem 0 rgba(255,255,255,0.05),inset 0 -0.0625rem 0 rgba(0,0,0,0.5)}.screw{--screw-size: calc(var(--instrument-size) * 0.043);--screw-pos: calc(var(--instrument-size) * 0.043);position:absolute;width:var(--screw-size);height:var(--screw-size);background:radial-gradient(circle at 40% 40%, #444, var(--screw-color));border-radius:50%;box-shadow:inset 0 0.0625rem 0.125rem rgba(0,0,0,0.8),0 0.0625rem 0.0625rem rgba(255,255,255,0.05)}.screw::after{content:'';position:absolute;top:50%;left:25%;right:25%;height:0.125rem;background:var(--screw-slot);transform:translateY(-50%) rotate(var(--screw-rotation, 30deg));border-radius:0.0625rem}.screw.tl{top:var(--screw-pos);left:var(--screw-pos);--screw-rotation: 30deg}.screw.tr{top:var(--screw-pos);right:var(--screw-pos);--screw-rotation: -45deg}.screw.bl{bottom:var(--screw-pos);left:var(--screw-pos);--screw-rotation: 60deg}.screw.br{bottom:var(--screw-pos);right:var(--screw-pos);--screw-rotation: -20deg}.dial-container{position:absolute;top:50%;left:50%;width:var(--dial-size);height:var(--dial-size);transform:translate(-50%, -50%);border-radius:50%;overflow:hidden;isolation:isolate;box-shadow:inset 0 0 1.875rem rgba(0,0,0,0.6),0 0 0 0.25rem #111,0 0 0 0.375rem #222}.dial-glass{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 40% 35%, rgba(255,255,255,0.08) 0%, transparent 60%);pointer-events:none;z-index:20}.scratches{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:21;opacity:0.03;background-size:100% 100%;background-repeat:no-repeat}.dial-inner-shadow{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 2.5rem rgba(0,0,0,0.5);pointer-events:none;z-index:19}.cage-knob{--knob-size: calc(var(--instrument-size) * 0.17);position:absolute;bottom:calc(var(--instrument-size) * 0.052);right:calc(var(--instrument-size) * 0.052);width:var(--knob-size);height:var(--knob-size);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='3' height='3' fill='%23000' fill-opacity='0'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23fff' fill-opacity='0.04'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23000' fill-opacity='0.06'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23fff' fill-opacity='0.03'/%3E%3C/svg%3E"),radial-gradient(circle at 40% 35%, #333, var(--knob-color));background-size:0.1875rem 0.1875rem, 100% 100%;border-radius:50%;box-shadow:0 0.125rem 0.375rem rgba(0,0,0,0.7),inset 0 0.0625rem 0.0625rem rgba(255,255,255,0.1);cursor:pointer;z-index:25;user-select:none;transition:transform 0.15s ease, box-shadow 0.15s ease}.cage-knob:active{transform:scale(1.12);box-shadow:0 0.25rem 0.75rem rgba(0,0,0,0.9),inset 0 0.0625rem 0.0625rem rgba(255,255,255,0.15)}.cage-knob svg{position:absolute;inset:0;width:100%;height:100%}.cage-knob-text{fill:var(--knob-text);font-size:0.59375rem;font-weight:bold;letter-spacing:0.09375rem;font-family:Arial, sans-serif}.airspeed-indicator .dial-face{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle, #1a1a1a 0%, #111 70%, #0a0a0a 100%)}.airspeed-indicator .dial-face svg{width:100%;height:100%}.airspeed-indicator .hand{position:absolute;bottom:50%;left:50%;width:0.25rem;height:38%;background:#fff;border-radius:0.125rem;transform-origin:bottom center;transform:translateX(-50%) rotate(0deg);transition:transform 0.3s ease-out;z-index:10;box-shadow:0 0 0.25rem rgba(0,0,0,0.5)}.airspeed-indicator .hand::after{content:'';position:absolute;top:-0.25rem;left:50%;transform:translateX(-50%);width:0;height:0;border-left:0.375rem solid transparent;border-right:0.375rem solid transparent;border-bottom:0.75rem solid #fff}.airspeed-indicator .center-cap{position:absolute;top:50%;left:50%;width:0.875rem;height:0.875rem;background:radial-gradient(circle at 40% 40%, #555, #222);border-radius:50%;transform:translate(-50%, -50%);z-index:12;box-shadow:0 0.0625rem 0.125rem rgba(0,0,0,0.8)}
