:root{--chassis-base:#242528;--chassis-dark:#1a1a1c;--chassis-highlight:#3a3b3f;--metal-light:#e6e7e9;--metal-mid:#b0b2b5;--metal-dark:#7a7c7f;--screen-bg:#050605;--phosphor-amber:#f25b29;--phosphor-dim:#5c2615;--text-dim:#77797c;--radius-outer:24px;--radius-inner:8px}*,:before,:after{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}html{background:radial-gradient(circle at 50% 30%,#4a4b4e 0%,#151516 100%);min-height:100%}body{background:0 0;justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;display:flex;overflow:hidden}.app-shell{box-sizing:border-box;flex-direction:column;align-items:center;gap:20px;display:flex}.location-panel{background:var(--chassis-base);border-radius:16px;width:680px;padding:14px 20px;box-shadow:0 20px 40px -10px #0009,0 4px #111112,inset 0 1px 1px #ffffff1a,inset 0 -1px 2px #0000004d}.location-label{letter-spacing:2px;color:#ffffff40;margin-bottom:10px;font-size:9px;font-weight:700}.location-grid{flex-wrap:nowrap;gap:6px;display:flex}.loc-btn{background:var(--chassis-dark);cursor:pointer;color:#ffffff8c;letter-spacing:.5px;white-space:nowrap;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:4px;min-width:0;padding:7px 4px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:9px;font-weight:600;transition:all 80ms;display:flex;box-shadow:0 2px 5px #0006,inset 0 1px 1px #ffffff12,inset 0 -1px 2px #0003}.loc-btn:active{transform:translateY(1px);box-shadow:0 1px 2px #0006,inset 0 2px 4px #0000004d}.loc-btn.loc-active{color:var(--phosphor-amber);background:#111213;transform:translateY(1px);box-shadow:inset 0 2px 6px #000c,inset 0 0 0 1px #000,0 0 8px #f25b2926}.loc-flag{font-size:13px;line-height:1}.loc-name{line-height:1}.instrument{background:var(--chassis-base);border-radius:var(--radius-outer);grid-template-columns:320px 180px 100px;align-items:stretch;gap:20px;width:680px;height:320px;padding:24px;display:grid;position:relative;box-shadow:0 60px 100px -20px #000c,0 12px #111112,0 13px 4px #00000080,inset 0 1px 1px #ffffff26,inset 0 -1px 2px #0006}.engraving{letter-spacing:1.5px;color:#ffffff40;z-index:2;pointer-events:none;font-size:9px;font-weight:700;position:absolute}.engraving.top-left{top:12px;left:24px}.engraving.top-right{top:12px;right:24px}.engraving.bottom-center{bottom:12px;left:50%;transform:translate(-50%)}.display-module{background:var(--chassis-dark);border-radius:var(--radius-inner);z-index:5;flex-direction:column;padding:12px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 4px 12px #000000e6,inset 0 0 0 1px #000,0 1px 1px #ffffff1a}.screen-glass{background:var(--screen-bg);border-radius:6px;position:absolute;inset:2px;overflow:hidden;box-shadow:inset 0 0 20px #000c}.screen-glass:after{content:"";pointer-events:none;z-index:10;background:linear-gradient(#ffffff08 0%,#fff0 100%);position:absolute;inset:0 0 50%}.screen-content{z-index:2;color:var(--phosphor-amber);text-shadow:0 0 6px #f25b2966;pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:16px}.screen-top,.screen-bottom{justify-content:space-between;align-items:baseline;display:flex}.label-small{letter-spacing:2px;color:#ffffff73;font-size:10px}.value-large{letter-spacing:-2px;color:#fff;text-shadow:0 0 10px #f25b2980;font-size:42px;font-weight:300;line-height:1}.value-medium{color:#fff;text-shadow:0 0 8px #f25b2966;font-size:14px;font-weight:400}.station-name-display{color:#fff;text-shadow:0 0 12px #f25b2966;letter-spacing:.04em;-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;font-size:17px;font-weight:500;line-height:1.25;display:-webkit-box;overflow:hidden}.dial-module{z-index:5;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.dial-well{background:#18191a;border-radius:50%;width:140px;height:140px;padding:6px;position:relative;box-shadow:inset 0 3px 8px #000c,inset 0 -1px 2px #ffffff14,0 1px 1px #ffffff0d}.dial-rotator{width:100%;height:100%;transform:rotate(var(--rotation,0deg));background:repeating-radial-gradient(circle at 50% 50%, var(--metal-light) 0, var(--metal-light) 1px, var(--metal-mid) 1.5px, var(--metal-mid) 2.5px);cursor:grab;border-radius:50%;position:absolute;top:0;left:0}.dial-rotator:active{cursor:grabbing}.dial-indicator{background:var(--chassis-dark);border-radius:50%;justify-content:center;align-items:center;width:8px;height:8px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:inset 0 2px 4px #000c}.dial-indicator:after{content:"";background:var(--phosphor-amber);border-radius:50%;width:4px;height:4px}.dial-static-lighting{pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(135deg,#ffffffe6 0%,#fff0 40%,#0009 100%),conic-gradient(from 180deg,#fff0 0deg,#fff6 45deg,#fff0 90deg,#fff3 180deg,#fff0 270deg,#fff6 315deg,#fff0 360deg);border-radius:50%;position:absolute;inset:6px;box-shadow:-4px -4px 8px #ffffff4d,12px 16px 20px #000000b3,inset 0 2px 3px #fffc}.dial-label{color:#fff6;letter-spacing:1px;text-align:center;margin-top:20px;font-size:10px}.controls-module{z-index:5;flex-direction:column;justify-content:space-between;padding-bottom:20px;display:flex}.status-cluster{justify-content:flex-end;gap:8px;padding-top:8px;display:flex}.led{background:#111;border-radius:50%;width:8px;height:8px;transition:all .1s;box-shadow:inset 0 1px 3px #000000e6,0 1px #ffffff0d}.led.active{background:var(--phosphor-amber);box-shadow:inset 0 1px 2px #ffffff80, 0 0 10px var(--phosphor-amber)}.button-group{background:#1b1c1e;border-radius:12px;flex-direction:column;gap:6px;padding:6px;display:flex;box-shadow:inset 0 2px 6px #0009,0 1px 1px #ffffff0d}.btn{background:var(--chassis-base);color:#fff9;cursor:pointer;border:none;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;height:44px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:16px;font-weight:400;transition:all 50ms linear;display:flex;box-shadow:0 3px 6px #0006,inset 0 1px 1px #ffffff1a,inset 0 -1px 2px #0003}.btn-label{letter-spacing:1px;margin-top:3px;font-size:7px;font-weight:700;line-height:1}.btn:active{transform:translateY(2px);box-shadow:0 1px 2px #0006,inset 0 2px 4px #0000004d}.btn.selected{color:var(--phosphor-amber);background:var(--chassis-dark);transform:translateY(1px);box-shadow:inset 0 2px 6px #000c,inset 0 0 0 1px #000}@media (width<=700px) and (orientation:landscape),(orientation:landscape) and (height<=500px){body{overflow:hidden}.app-shell{flex-direction:row-reverse;justify-content:center;align-items:center;gap:12px;width:100%;padding:12px}.instrument{zoom:.75;flex-shrink:0}.location-panel{border-radius:12px;flex-direction:column;flex:1;width:auto;min-width:80px;max-width:240px;height:240px;padding:8px;display:flex;overflow:hidden}.location-label{letter-spacing:1.5px;flex-shrink:0;margin-bottom:4px;font-size:7px}.location-grid{flex-wrap:wrap;flex:1;align-content:flex-end;gap:3px;overflow:hidden}.loc-btn{border-radius:4px;flex-direction:column;flex:0 0 calc(50% - 1.5px);justify-content:center;align-items:center;gap:2px;padding:5px 4px}.loc-flag{font-size:13px;line-height:1}.loc-name{letter-spacing:.3px;color:inherit;font-size:7px;line-height:1;display:block}}@media (width<=700px) and (orientation:portrait){body{justify-content:center;align-items:center;min-height:100svh;padding:0;overflow:hidden}}.m-chassis{background:var(--chassis-base);border-radius:var(--radius-outer);-webkit-tap-highlight-color:transparent;box-sizing:border-box;flex-direction:column;justify-content:flex-start;gap:clamp(8px,1.3svh,14px);width:min(94vw,400px);height:auto;padding:clamp(28px,4svh,44px) 20px clamp(18px,3svh,32px);display:flex;position:relative;overflow:hidden;box-shadow:0 32px 64px #000000b3,0 8px #111112,0 9px 4px #0006,inset 0 1px 1px #ffffff26,inset 0 -1px 2px #0006}.m-display-wrap{background:var(--chassis-dark);border-radius:var(--radius-inner);flex:0 0 clamp(175px,35svh,260px);position:relative;overflow:hidden;box-shadow:inset 0 4px 12px #000000e6,inset 0 0 0 1px #000,0 1px 1px #ffffff1a}.m-middle-row{flex-direction:row;flex:0 0 clamp(130px,22svh,160px);justify-content:space-between;align-items:center;display:flex;overflow:hidden}.m-dial-side{zoom:.78;flex-shrink:0}.m-controls-side{flex-direction:column;flex-shrink:0;justify-content:center;align-items:flex-end;height:100%;display:flex}.m-btn-group-v{background:#1b1c1e;border-radius:12px;flex-direction:column;gap:5px;width:108px;padding:5px;display:flex;box-shadow:inset 0 2px 6px #0009,0 1px 1px #ffffff0d}.m-btn-group-v .btn{width:100%;height:clamp(34px,4.8svh,44px)}.m-loc-panel{box-sizing:border-box;flex:0 0 clamp(160px,28svh,200px);width:auto;padding:8px 10px 10px;overflow:hidden}.m-loc-grid{grid-template-columns:repeat(3,1fr);gap:4px;height:calc(100% - 26px);display:grid}.m-loc-grid .loc-btn{border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:2px;height:100%;padding:6px 4px}.m-loc-grid .loc-flag{font-size:clamp(14px,2.4svh,20px)}.m-loc-grid .loc-name{letter-spacing:.4px;font-size:clamp(7px,1svh,9px);line-height:1}
