:root{--ink:#f3f0e8;--navy:#1e3a5f;--navy-soft:#2c4a6b;--panel:#141c26cc;--chip:#ffffffb8;--chip-border:#1e3a5f2e;--accent:#f2b134;--ok:#2f9e5f;--out:#e0642e;--font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--gutter:max(16px, env(safe-area-inset-left));--bottom:max(14px, env(safe-area-inset-bottom));--bar-h:60px}html,body{height:100%;font-family:var(--font);-webkit-text-size-adjust:100%;touch-action:manipulation;background:#cfe3f5;margin:0;overflow:hidden}#app{position:fixed;inset:0}canvas{touch-action:none;display:block}#controls{pointer-events:none;color:var(--ink);font-size:15px;position:fixed;inset:0}#controls *{box-sizing:border-box}#controls .hud{left:var(--gutter);right:max(16px, env(safe-area-inset-right));top:max(12px, env(safe-area-inset-top));pointer-events:none;flex-direction:column;align-items:flex-start;gap:8px;display:flex;position:absolute}#controls .top{pointer-events:none;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%;display:flex}#controls .title{color:var(--navy);font-size:17px;font-weight:600}#controls .picker,#controls .aircraft{pointer-events:auto;appearance:none;font:inherit;color:var(--navy);background:var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%231e3a5f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;border:1px solid var(--chip-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;text-overflow:ellipsis;white-space:nowrap;border-radius:10px;height:36px;padding:0 30px 0 12px;overflow:hidden;box-shadow:0 2px 10px #00000014}#controls .picker{max-width:min(100%,380px);font-size:16px;font-weight:600}#controls .aircraft{max-width:min(100%,220px);height:32px;font-size:14px}#controls .picker[hidden],#controls .title[hidden],#controls .aircraft-pick[hidden]{display:none}#controls .aircraft-pick{pointer-events:auto;max-width:min(100%,300px);height:32px;color:var(--navy);background:var(--chip);border:1px solid var(--chip-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;align-items:center;padding-left:12px;display:inline-flex;box-shadow:0 2px 10px #00000014}#controls .aircraft-pick .for{letter-spacing:.04em;text-transform:uppercase;opacity:.7;white-space:nowrap;font-size:11px}#controls .aircraft-pick .aircraft{color:#3d2c9c;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:#ebe6fb;border:0;border-radius:7px;min-width:0;max-width:none;height:calc(100% - 6px);margin:0 3px 0 6px;padding-left:8px;font-weight:600}#controls .hud{--tile-h:62px;--gap:6px;--ctrl-w:168px;--op-w:14px;--perf-w:116px}#controls .panel{pointer-events:none;grid-template-columns:var(--ctrl-w) var(--op-w) var(--perf-w);grid-template-rows:var(--tile-h) var(--gap) var(--tile-h) var(--gap) var(--tile-h);grid-template-areas:"att eq airspeed""att eq.""att eq heading""plus eq.""power eq altitude";display:grid}#controls .panel[hidden]{display:none}#controls .panel .col{display:contents}#controls .panel .att{grid-area:att}#controls .panel .plus{grid-area:plus}#controls .panel .power{grid-area:power}#controls .panel .equals{grid-area:eq}#controls .panel [data-key=airspeed]{grid-area:airspeed}#controls .panel [data-key=heading]{grid-area:heading}#controls .panel [data-key=altitude]{grid-area:altitude}#controls .panel .op{z-index:2;width:22px;height:22px;color:var(--navy);font:700 16px/1 var(--font);background:#fff;border-radius:50%;justify-content:center;place-self:center;align-items:center;display:flex;box-shadow:0 1px 4px #0000002e}#controls .tile{background:var(--chip);min-width:0;color:var(--navy);border:1px solid var(--chip-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;border-radius:10px;padding:6px 10px 0;position:relative;overflow:hidden;box-shadow:0 2px 10px #00000014}#controls .tile:after{content:"";background:var(--ok);height:3px;position:absolute;bottom:0;left:0;right:0}#controls .tile[data-state=out]:after{background:var(--out)}#controls .tile .lbl{letter-spacing:.04em;text-transform:uppercase;opacity:.7;white-space:nowrap;font-size:11px;line-height:12px}#controls .tile .val{white-space:nowrap;margin-top:1px;font-size:17px;font-weight:700;line-height:22px}#controls .tile .tol{opacity:.75;white-space:nowrap;height:13px;font-size:11px;line-height:13px}#controls .tile .trend{opacity:.75;vertical-align:1px;margin-left:4px;font-size:11px}#controls .tile[data-state=out] .val{color:#b84a1c}#controls .tile[data-state=na]{box-shadow:none;background:#fff6;border-color:#1e3a5f1a}#controls .tile[data-state=na]:after{display:none}#controls .tile[data-state=na] .lbl{opacity:.55}#controls .tile[data-state=na] .val{opacity:.8;font-weight:600}#controls .tile[data-state=target]:after{display:none}#controls .power .val>.acn:first-child{margin-left:-5px}#controls .att{grid-template:"lbl tol""face face"1fr/auto 1fr;column-gap:6px;padding-bottom:12px;display:grid}#controls .att .lbl{grid-area:lbl}#controls .att .tol{grid-area:tol;justify-self:end;height:12px;line-height:12px}#controls .face{grid-area:face;width:100%;height:100%;min-height:0;margin-top:4px;display:block}#controls .face .bezel{fill:#23303d}#controls .face .sky{fill:#5b9fd8}#controls .face .ground{fill:#8a6a4a}#controls .face .horizon{stroke:#fff;stroke-width:1.4px}#controls .face .symbol{fill:none;stroke:var(--accent);stroke-width:3.2px;stroke-linecap:round;stroke-linejoin:round}#controls .face .dot{fill:var(--accent)}#controls .face .pointer path{fill:#fff}#controls .face .arcs path{fill:none;stroke:var(--ok);stroke-width:4.5px;stroke-linecap:round}#controls .face .arcs[data-state=out] path{stroke:var(--out)}#controls .face .arcs[data-state=target] path{stroke:#fff;stroke-width:2.4px;stroke-linecap:butt}#controls .face .marker g{fill:none;stroke-linecap:round}#controls .face .marker .halo{stroke:#fff;stroke-width:4.2px}#controls .face .marker .bird{stroke:var(--path,#0097a7);stroke-width:2.2px}#controls .acn{color:#3d2c9c;white-space:nowrap;background:#ebe6fb;border-radius:5px;padding:0 4px;font-weight:650}#controls .tile .acn{padding:0 3px}#controls .tile .val .acn{padding:0 5px;font-weight:700}#controls .credit{right:max(12px, env(safe-area-inset-right));bottom:max(6px, env(safe-area-inset-bottom));color:var(--navy-soft);opacity:.7;pointer-events:auto;font-size:11px;text-decoration:none;transition:opacity .15s;position:absolute}#controls .credit:hover,#controls .credit:focus-visible{opacity:1;text-decoration:underline}#controls .lesson{left:50%;bottom:calc(var(--bottom) + var(--bar-h) + 8px);width:min(720px, calc(100vw - 2 * var(--gutter)));color:#1a2a3a;pointer-events:none;background:#ffffffed;border-radius:14px;padding:10px 16px 11px;position:absolute;transform:translate(-50%);box-shadow:0 6px 20px #0000002e}#controls .lesson[hidden]{display:none}#controls .lesson-head{align-items:baseline;gap:10px;display:flex}#controls .lesson .step{letter-spacing:.06em;text-transform:uppercase;color:var(--navy-soft);white-space:nowrap;font-size:11px}#controls .lesson .segment{color:var(--navy);font-size:15px;font-weight:600}#controls .lesson .callout{margin-top:4px;font-size:15px;line-height:1.4}#controls .lesson .callout[hidden]{display:none}#controls .bar{left:50%;bottom:var(--bottom);height:var(--bar-h);width:min(720px, calc(100vw - 2 * var(--gutter)));background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto;z-index:3;border-radius:16px;align-items:center;gap:6px;padding:8px 10px;display:flex;position:absolute;transform:translate(-50%);box-shadow:0 6px 24px #00000040}#controls button,#controls summary{min-width:44px;height:44px;color:var(--ink);font:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff14;border:0;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:15px;list-style:none;display:inline-flex}#controls button:hover,#controls summary:hover{background:#ffffff29}#controls button:active{transform:scale(.96)}#controls button svg,#controls summary svg{width:22px;height:22px;display:block}#controls .play{color:var(--accent);background:#f2b13424}#controls .play svg{width:24px;height:24px}#controls .prev,#controls .next{opacity:.9;min-width:40px;padding:0 6px}#controls .scrubwrap{flex:1;min-width:70px;height:44px;position:relative}#controls .scrub{width:100%;height:100%;accent-color:var(--accent);cursor:pointer;touch-action:none;background:0 0;margin:0;position:absolute;inset:0}#controls .ticks{pointer-events:none;height:0;position:absolute;top:50%;left:0;right:0}#controls .ticks i{background:#ffffff8c;border-radius:1px;width:2px;height:14px;position:absolute;top:-7px;transform:translate(-50%)}#controls .time{font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.85;font-size:13px}#controls .speeds,#controls .layers{position:relative}#controls .speeds summary::-webkit-details-marker{display:none}#controls .layers summary::-webkit-details-marker{display:none}#controls .speed{font-variant-numeric:tabular-nums}#controls .speeds .menu,#controls .layers .menu{background:#131b25;border-radius:14px;flex-direction:column;gap:2px;width:max-content;padding:8px 14px 12px;display:flex;position:absolute;bottom:54px;right:0;box-shadow:0 6px 24px #00000073}#controls .menu-title{letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin:10px 0 2px;font-size:11px}#controls .menu-title:first-child{margin-top:4px}#controls .menu-title[hidden]{display:none}#controls .layers label{cursor:pointer;align-items:center;gap:10px;min-height:36px;font-size:15px;display:flex}#controls .layers label[hidden]{display:none}#controls .layers label.sub{padding-left:28px}#controls .layers label:has(input:disabled){opacity:.45;cursor:default}#controls .layers input{width:18px;height:18px;accent-color:var(--accent);margin:0}#controls .menu-button{justify-content:flex-start;height:38px;margin-top:4px;font-size:15px}#controls .menu-button[hidden]{display:none}#controls .menu-option{font-variant-numeric:tabular-nums;background:0 0;justify-content:flex-start;gap:0;height:38px;padding:0 14px 0 4px;font-size:15px}#controls .menu-option[aria-pressed=true]{color:var(--accent);font-weight:600}#controls .menu-option .tick{text-align:center;width:22px}#controls .menu-option .hint{opacity:.6;margin-left:10px;font-size:13px;font-weight:400}#controls .ar{color:var(--accent);font-weight:600}.empty{text-align:center;padding:0 var(--gutter);color:var(--navy);font:16px/1.5 var(--font);flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:fixed;inset:0}.empty span{opacity:.75;max-width:34em;font-size:14px}.empty code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.empty a{color:var(--navy);text-underline-offset:3px;text-decoration-color:#1e3a5f59}.empty a:hover{text-decoration-color:currentColor}.empty .empty-alt{opacity:.9;margin-top:10px;font-size:14px}.ask,.notepad{left:50%;bottom:calc(var(--bottom) + var(--bar-h) + 8px);width:min(720px, calc(100vw - 2 * var(--gutter)));box-sizing:border-box;z-index:2;background:var(--panel);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:15px/1.4 var(--font);border-radius:14px;flex-direction:column;gap:12px;padding:14px 16px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 8px 28px #00000059}.ask .ask-text{flex-direction:column;gap:4px;display:flex}.ask .ask-text span{opacity:.8;font-size:13px}.ask .ask-actions{gap:8px;display:flex}.ask button{height:44px;font:inherit;cursor:pointer;border:0;border-radius:10px;flex:1;font-weight:600}.ask .yes{background:var(--accent);color:#1a2a3a}.ask .no{color:var(--ink);background:#ffffff1a}.notepad{bottom:max(calc(var(--bottom) + var(--bar-h) + 8px), calc(var(--keyboard,0px) + 8px));max-height:min(70vh, 560px, calc(var(--visible,100vh) - 16px));pointer-events:auto;overflow:auto}.notepad .notepad-head{flex-direction:column;gap:2px;display:flex}.notepad .notepad-where{opacity:.75;font-variant-numeric:tabular-nums;font-size:12px}.notepad .notepad-said{color:#1a2a3a;background:#ffffffed;border-radius:10px;margin:0;padding:8px 12px;font-size:15px;line-height:1.4}.notepad .notepad-said[hidden]{display:none}.notepad textarea{box-sizing:border-box;resize:vertical;width:100%;font:inherit;color:var(--ink);background:#00000040;border:1px solid #ffffff2e;border-radius:10px;padding:10px;font-size:16px}.notepad .notepad-raw{height:40vh;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.notepad .notepad-actions{gap:8px;display:flex}.notepad .notepad-actions button{height:44px;font:inherit;cursor:pointer;color:var(--ink);background:#ffffff1a;border:0;border-radius:10px;flex:1;font-weight:600}.notepad .notepad-actions .go{background:var(--accent);color:#1a2a3a}.notepad .notepad-list{flex-direction:column;gap:10px;display:flex;overflow:auto}.notepad .notepad-note{grid-template-columns:1fr auto;align-items:start;gap:0 8px;display:grid}.notepad .notepad-note .notepad-where{grid-column:1}.notepad .notepad-note a{color:var(--ink);grid-column:1;text-decoration:none}.notepad .notepad-note a:hover{text-decoration:underline}.notepad .notepad-drop{width:32px;height:32px;color:var(--ink);cursor:pointer;background:#ffffff14;border:0;border-radius:8px;grid-area:1/2/span 2;font-size:18px;line-height:1}#controls .tip{left:50%;bottom:calc(var(--bottom) + var(--bar-h) + 108px);background:var(--panel);color:var(--ink);white-space:nowrap;pointer-events:none;border-radius:12px;padding:10px 16px;font-size:14px;transition:opacity .8s;position:absolute;transform:translate(-50%);box-shadow:0 6px 20px #00000040}#controls .tip.fade{opacity:0}#controls .hud .tip{white-space:normal;width:auto;max-width:min(calc(var(--ctrl-w) + var(--op-w) + var(--perf-w)), 100%);text-align:left;line-height:1.4;position:static;transform:none}@media (width<=560px){#controls{font-size:14px}#controls .top{gap:6px}#controls .picker{flex:100%;max-width:100%;height:36px;font-size:15px}#controls .aircraft-pick{height:30px}#controls .aircraft{font-size:13px}#controls .hud{--tile-h:58px;--ctrl-w:160px;--perf-w:106px;gap:7px}#controls .tile .val{font-size:15px;line-height:20px}#controls .tile .tol{height:12px;font-size:10px;line-height:12px}#controls .lesson{padding:8px 12px 9px}#controls .lesson .callout{font-size:14px;line-height:1.35}#controls .time{display:none}#controls .bar{gap:4px;padding:6px 8px}#controls .layers summary span{display:none}#controls button,#controls summary{min-width:40px;padding:0 8px}#controls .prev,#controls .next{min-width:34px;padding:0 2px}#controls .speed{min-width:38px;font-size:13px}#controls .credit{font-size:10px;bottom:1px;left:50%;right:auto;transform:translate(-50%)}#controls .tip{white-space:normal;text-align:center;width:calc(100vw - 64px)}}.lil-gui.root{--width:300px}