: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}:root{--sky-color: #2e8ad4;--sky-light: #5eaae6;--ground-color: #6b4226;--ground-dark: #4a2e1a;--horizon-line: #fff;--horizon-orange: #e85d20;--bank-pointer-color: #e85d20;--aircraft-color: #e85d20;--pitch: 0deg;--roll: 0deg;--pitch-offset: 0rem}.attitude-indicator .attitude-ball{position:absolute;inset:-80%;transform:rotate(var(--roll)) translateY(var(--pitch-offset));transition:transform 0.1s ease-out}.attitude-indicator .attitude-ball .sky{position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom, #1a6bb5, var(--sky-color) 40%, var(--sky-light) 100%)}.attitude-indicator .attitude-ball .ground{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to bottom, var(--ground-color) 0%, var(--ground-dark) 60%, #2a1a0e 100%)}.attitude-indicator .attitude-ball .horizon{position:absolute;top:50%;left:0;right:0;height:0.125rem;background:var(--horizon-line);transform:translateY(-50%)}.attitude-indicator .attitude-ball .horizon-bar{position:absolute;top:50%;height:0.1875rem;background:var(--horizon-orange);transform:translateY(-50%)}.attitude-indicator .attitude-ball .horizon-bar.left{left:25%;width:20%}.attitude-indicator .attitude-ball .horizon-bar.right{right:25%;width:20%}.attitude-indicator .attitude-ball .bottom-marker{position:absolute;bottom:calc(50% - 7.5rem);left:50%;transform:translateX(-50%);width:0;height:0;border-left:0.5rem solid transparent;border-right:0.5rem solid transparent;border-bottom:0.875rem solid var(--tick-color)}.attitude-indicator .pitch-ladder{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:calc(var(--instrument-size) * 0.476);height:calc(var(--instrument-size) * 0.952)}.attitude-indicator .pitch-line{position:absolute;left:50%;transform:translateX(-50%);height:0.125rem;background:var(--tick-color)}.attitude-indicator .pitch-line.deg10{width:calc(var(--instrument-size) * 0.143)}.attitude-indicator .pitch-line.deg20{width:calc(var(--instrument-size) * 0.19)}.attitude-indicator .pitch-line.deg5{width:calc(var(--instrument-size) * 0.071)}.attitude-indicator .pitch-label{position:absolute;color:var(--text-color);font-size:calc(var(--instrument-size) * 0.031);font-weight:bold;text-shadow:0 0.0625rem 0.125rem rgba(0,0,0,0.6)}.attitude-indicator .pitch-label.left{right:calc(50% + var(--instrument-size) * 0.119)}.attitude-indicator .pitch-label.right{left:calc(50% + var(--instrument-size) * 0.119)}.attitude-indicator .bank-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle, transparent 68%, #1a2a3a 72%, #111 85%, #0a0a0a 100%);z-index:4;pointer-events:none}.attitude-indicator .bank-marks{position:absolute;inset:0;border-radius:50%;z-index:6}.attitude-indicator .bank-marks svg{width:100%;height:100%}.attitude-indicator .roll-pointer{position:absolute;width:var(--dial-size);height:var(--dial-size);top:50%;left:50%;transform:translate(-50%, -50%) rotate(var(--roll));transition:transform 0.1s ease-out;pointer-events:none;z-index:5}.attitude-indicator .roll-pointer-triangle{position:absolute;top:calc(var(--dial-size) * 0.145);left:50%;transform:translateX(-50%);width:0;height:0;border-left:calc(var(--dial-size) * 0.027) solid transparent;border-right:calc(var(--dial-size) * 0.027) solid transparent;border-bottom:calc(var(--dial-size) * 0.042) solid var(--bank-pointer-color)}.attitude-indicator .aircraft-symbol{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:15;pointer-events:none}.attitude-indicator .aircraft-symbol .center-dot{position:absolute;top:50%;left:50%;width:calc(var(--instrument-size) * 0.019);height:calc(var(--instrument-size) * 0.019);background:var(--aircraft-color);border-radius:50%;transform:translate(-50%, -50%);box-shadow:0 0 0.125rem rgba(0,0,0,0.6)}.attitude-indicator .aircraft-symbol .wing{position:absolute;top:50%;height:calc(var(--instrument-size) * 0.01);background:var(--aircraft-color);transform:translateY(-50%);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0,0.5)}.attitude-indicator .aircraft-symbol .wing.left{right:calc(50% + var(--instrument-size) * 0.024);width:calc(var(--instrument-size) * 0.19);border-radius:0.125rem}.attitude-indicator .aircraft-symbol .wing.right{left:calc(50% + var(--instrument-size) * 0.024);width:calc(var(--instrument-size) * 0.19);border-radius:0.125rem}.attitude-indicator .aircraft-symbol .wing-tip{position:absolute;width:calc(var(--instrument-size) * 0.01);height:calc(var(--instrument-size) * 0.052);background:var(--aircraft-color);box-shadow:0 0.0625rem 0.125rem rgba(0,0,0,0.5)}.attitude-indicator .aircraft-symbol .wing-tip.left{right:calc(50% + var(--instrument-size) * 0.205);top:calc(50% - var(--instrument-size) * 0.01);border-radius:0.125rem}.attitude-indicator .aircraft-symbol .wing-tip.right{left:calc(50% + var(--instrument-size) * 0.205);top:calc(50% - var(--instrument-size) * 0.01);border-radius:0.125rem}