:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;scrollbar-gutter:stable}h1{font-size:3.2em;line-height:1.1}@media (max-width: 768px){h1{font-size:2.5em;margin:.5em 0}}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s;min-height:44px;touch-action:manipulation}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (max-width: 768px){button{padding:.8em 1.5em;font-size:1.1em;min-height:48px}}input,select,textarea{font-size:16px}*{-webkit-overflow-scrolling:touch}.compass,.tab,button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%;margin:0;padding:0;text-align:center;min-height:100vh;height:100vh;box-sizing:border-box;display:flex;flex-direction:column}#root>h1{flex-shrink:0;margin:0;padding:1rem}#root>.tabs-root{flex:1;min-height:0}@media (max-width: 768px){#root{padding:.5rem}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.tabs-root{display:flex;flex-direction:column;gap:0;width:100%;max-width:100%;flex:1;min-height:0;box-sizing:border-box}.tabs-list{display:flex;gap:0;justify-content:center;flex-wrap:wrap;background:#0f0f0f;border-radius:12px 12px 0 0;padding:6px;border:1px solid #333;border-bottom:none}.tab{padding:14px 24px;background:transparent;border:none;color:#888;font-size:16px;font-weight:500;min-height:48px;display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:1;min-width:140px;border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.tab:hover{background:#646cff1a;color:#b4b8ff;transform:translateY(-1px)}.tab.active{background:linear-gradient(135deg,#646cff,#7c84ff);color:#fff;font-weight:600;box-shadow:0 4px 12px #646cff4d,0 2px 6px #0003;transform:translateY(-2px)}.tab.active:before{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #646cff}.tabs-content{border:1px solid #333;border-top:none;padding:24px;border-radius:0 0 12px 12px;width:100%;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;background:#111;flex:1;min-height:0}.tabs-content:has(.rote-memorization){padding:0;display:flex;flex-direction:column}.tabs-content>div:has(.rote-memorization){flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.tabs-content>div:has(.rote-memorization) .rote-memorization{padding:0}@media (max-width: 768px){.tabs-list{flex-direction:column;gap:3px;padding:4px;border-radius:8px 8px 0 0}.tab{width:100%;min-width:unset;padding:16px 20px;font-size:16px;min-height:52px}.tab.active:before{display:none}.tabs-content{padding:20px 16px;border-radius:0 0 8px 8px}.tabs-content>div:has(.rote-memorization){padding:0}}.heading-game{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;justify-items:center;max-width:100%}.heading-game>.panel{min-width:240px;width:100%;max-width:600px;order:2}.compass-wrapper{position:relative;width:300px;height:300px;margin:0 auto;order:1}.compass-container{width:100%;height:100%;overflow:hidden;flex-shrink:0;box-sizing:border-box;border-radius:50%;border:1px solid #333}.compass-container.rotated{transform:rotate(-45deg);transform-origin:50% 50%}.forward-heading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:50px}.forward-heading-line{width:2px;height:40px;background-color:orange;margin-bottom:10px}.forward-heading-label{color:orange;font-weight:700;font-size:14px;font-family:system-ui;text-align:center}@media (max-width: 768px){.heading-game>.panel{min-width:unset;width:100%;max-width:100%}.compass-wrapper{width:min(300px,90vw);height:min(300px,90vw)}.compass-container,.compass{width:100%;height:100%}.panel{text-align:left;justify-items:stretch}.panel>div{font-size:18px;text-align:center}.actions{justify-content:center}.actions button{flex:1;min-width:100px}.preset-selector label{flex-direction:column;align-items:stretch;gap:8px;text-align:center}.preset-selector select{min-width:unset;width:100%}.checkbox-group{gap:12px}.checkbox-group label{font-size:18px;padding:8px 0}}@media (max-width: 480px){.compass-wrapper{width:min(280px,85vw);height:min(280px,85vw)}.panel{padding:4px;gap:8px}.checkbox-group label{font-size:16px}}.runway-game{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;justify-items:center;max-width:100%}.runway-game>.panel{min-width:240px;width:100%;max-width:600px;order:2}.compass-container{width:300px;height:300px;overflow:hidden;flex-shrink:0;box-sizing:border-box;border-radius:50%;border:1px solid #333;margin:0 auto;order:1}.compass-container.rotated{transform:rotate(-90deg);transform-origin:50% 50%}.panel>div{font-size:16px;font-weight:500}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{color:#fff;background-color:#1a1a1a;border:1px solid #333;padding:12px 16px;font-size:16px;min-height:44px;border-radius:6px}.skill-level{margin:12px 0;width:100%}.preset-selector{margin-bottom:12px}.preset-selector label{display:flex;align-items:center;gap:8px;font-size:16px;color:#ccc;flex-wrap:wrap}.preset-selector select{background-color:#2a2a2a;color:#ccc;border:1px solid #444;border-radius:4px;padding:8px 12px;font-size:16px;min-height:44px;flex:1;min-width:200px}.checkbox-group{display:grid;gap:8px}.checkbox-group label{display:flex;align-items:center;gap:8px;font-size:16px;color:#ccc;cursor:pointer;padding:4px 0;min-height:44px}.checkbox-group input[type=checkbox]{margin:0;width:18px;height:18px;flex-shrink:0}.compass{border:none;border-radius:0;background:radial-gradient(circle,#1f1f1f,#121212 70%);width:300px;height:300px;display:block;box-sizing:border-box;flex-shrink:0;touch-action:manipulation}@media (max-width: 768px){.runway-game>.panel{min-width:unset;width:100%;max-width:100%}.compass-container{width:min(300px,90vw);height:min(300px,90vw)}.compass{width:100%;height:100%}.panel{text-align:left;justify-items:stretch}.panel>div{font-size:18px;text-align:center}.actions{justify-content:center}.actions button{flex:1;min-width:100px}.preset-selector label{flex-direction:column;align-items:stretch;gap:8px;text-align:center}.preset-selector select{min-width:unset;width:100%}.checkbox-group{gap:12px}.checkbox-group label{font-size:18px;padding:8px 0}}@media (max-width: 480px){.compass-container{width:min(280px,85vw);height:min(280px,85vw)}.panel{padding:4px;gap:8px}.checkbox-group label{font-size:16px}}.altimeter-game{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;justify-items:center;max-width:100%}.altimeter-game>.panel{min-width:240px;width:100%;max-width:600px;order:2}.altimeter-container{width:320px;height:320px;overflow:hidden;flex-shrink:0;box-sizing:border-box;margin:0 auto;order:1;display:flex;align-items:center;justify-content:center}.panel{display:grid;gap:12px;justify-items:start;padding:8px}.panel>div{font-size:16px;font-weight:500;color:#ccc}.input-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.input-group input{flex:1;min-width:150px;padding:8px 12px;font-size:16px;border:1px solid #444;border-radius:4px;background-color:#2a2a2a;color:#ccc;min-height:44px;box-sizing:border-box}.input-group input:focus{outline:none;border-color:#646cff;background-color:#333}.input-group button{padding:8px 16px;font-size:16px;min-height:44px;background-color:#646cff;color:#fff;border:none;border-radius:4px;cursor:pointer}.input-group button:hover:not(:disabled){background-color:#535bf2}.input-group button:disabled{background-color:#444;cursor:not-allowed}.feedback{padding:12px;border-radius:4px;margin:8px 0;text-align:center}.feedback.correct{background-color:#2ecc7133;border:1px solid #2ecc71;color:#2ecc71}.feedback.incorrect{background-color:#e74c3c33;border:1px solid #e74c3c;color:#e74c3c}.altimeter-svg{width:100%;height:100%;max-width:320px;max-height:320px;object-fit:contain}@media (max-width: 768px){.altimeter-game>.panel{min-width:unset;width:100%;max-width:100%}.altimeter-container{width:min(320px,90vw);height:min(320px,90vw)}.altimeter-svg{width:100%;height:100%}.panel{text-align:left;justify-items:stretch}.panel>div{font-size:18px;text-align:center}}@media (max-width: 480px){.altimeter-container{width:min(300px,85vw);height:min(300px,85vw)}.panel{padding:4px;gap:8px}}.maneuvers-game{display:flex;flex-direction:column;gap:20px;max-width:1000px;margin:0 auto;padding:20px}.panel{background:#f8f9fa;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.header-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px}.header-section h2{margin:0;color:#333}.score-display{font-weight:700;color:#646cff;font-size:1.1em}.maneuver-selector{margin-bottom:20px}.maneuver-selector label{display:block;margin-bottom:8px;font-weight:700;color:#555}.maneuver-selector select{width:100%;max-width:300px;padding:10px;border:2px solid #ddd;border-radius:4px;font-size:16px;background:#fff}.maneuver-selector select:focus{outline:none;border-color:#646cff}.game-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.start-button,.submit-button,.new-round-button,.reset-button{padding:10px 20px;border:none;border-radius:4px;font-size:16px;cursor:pointer;transition:background-color .2s}.start-button{background:#646cff;color:#fff}.start-button:hover:not(:disabled){background:#5a5fcf}.start-button:disabled{background:#ccc;cursor:not-allowed}.submit-button{background:#2ecc71;color:#fff;margin-top:20px;width:100%;padding:15px;font-size:18px;font-weight:700}.submit-button:hover{background:#27ae60}.new-round-button{background:#646cff;color:#fff}.new-round-button:hover{background:#5a5fcf}.reset-button{background:#e74c3c;color:#fff}.reset-button:hover{background:#c0392b}.results-actions{display:flex;gap:10px}.game-info p{margin:0;color:#666;font-style:italic}.form-container{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.maneuver-form h3{margin:0 0 20px;color:#333;text-align:center;font-size:1.5em;border-bottom:2px solid #646cff;padding-bottom:10px}.phase-section{margin-bottom:25px}.phase-title{margin:0 0 15px;color:#666;font-size:1.2em;font-weight:400;text-align:center;font-family:monospace}.callout-row{display:flex;align-items:center;margin-bottom:10px;gap:10px}.callout-dash{color:#666;font-weight:700;width:20px;flex-shrink:0}.callout-input{flex:1;padding:8px 12px;border:2px solid #ddd;border-radius:4px;font-size:14px;transition:border-color .2s}.callout-input:focus{outline:none;border-color:#646cff}.callout-input.correct{border-color:#2ecc71;background-color:#d5f4e6}.callout-input.incorrect{border-color:#e74c3c;background-color:#fdf2f2}.expected-callout{color:#666;font-size:12px;font-style:italic;min-width:200px;margin-left:10px}@media (max-width: 768px){.maneuvers-game{padding:10px}.panel{padding:15px}.header-section{flex-direction:column;align-items:flex-start}.callout-row{flex-direction:column;align-items:stretch;gap:5px}.callout-dash{width:auto;text-align:left}.expected-callout{min-width:auto;margin-left:0;margin-top:5px}.results-actions{flex-direction:column;width:100%}.results-actions button{width:100%}}@media (max-width: 480px){.maneuver-selector select{max-width:100%}.form-container{padding:15px}.maneuver-form h3{font-size:1.3em}}.rote-memorization{padding:20px;width:100%;height:100%;display:flex;flex-direction:column;margin:0;box-sizing:border-box}.rote-header{text-align:center;margin-bottom:20px;flex-shrink:0}.rote-header h2{color:#2c3e50;margin-bottom:10px}.rote-header p{color:#7f8c8d;font-size:16px}.svg-selection-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-shrink:0;gap:20px}.svg-selector{display:flex;align-items:center;gap:10px}.svg-selector label{color:#2c3e50;font-size:16px;font-weight:500}.svg-selector select{padding:8px 12px;font-size:16px;border:2px solid #bdc3c7;border-radius:6px;background-color:#fff;color:#2c3e50;cursor:pointer;min-width:200px}.svg-selector select:focus{outline:none;border-color:#3498db}.score-display{font-size:18px;font-weight:600;color:#2c3e50}.practice-area{flex:1;display:flex;flex-direction:column;min-height:0}.controls{display:flex;justify-content:center;gap:15px;margin-bottom:20px;flex-shrink:0}.reset-button,.give-up-button,.reset-score-button{padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:all .3s ease}.reset-button{background-color:#e74c3c;color:#fff}.reset-button:hover{background-color:#c0392b}.give-up-button{background-color:#f39c12;color:#fff}.give-up-button:hover:not(:disabled){background-color:#e67e22}.give-up-button:disabled{background-color:#bdc3c7;cursor:not-allowed}.reset-score-button{background-color:#95a5a6;color:#fff}.reset-score-button:hover{background-color:#7f8c8d}.game-container{display:flex;gap:20px;flex:1;min-height:0;align-items:stretch}.text-labels-panel{flex:0 0 300px;background-color:#f8f9fa;border:2px solid #e9ecef;border-radius:8px;padding:20px;display:flex;flex-direction:column;box-sizing:border-box;align-self:stretch;min-height:0;max-height:100%;overflow-y:auto;overflow-x:hidden}.text-labels-panel h3{margin:0 0 15px;color:#2c3e50;font-size:16px;font-weight:600}.text-labels-list{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}.text-label-item{background-color:#fff;border:2px solid #3498db;border-radius:6px;padding:8px 12px;cursor:grab;transition:all .3s ease;-webkit-user-select:none;user-select:none;text-align:center;font-weight:500;box-shadow:0 2px 4px #0000001a}.text-label-item:hover{background-color:#ebf3fd;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.text-label-item:active{cursor:grabbing;transform:translateY(0)}.canvas-panel{flex:1;background-color:#fff;border:2px solid #e9ecef;border-radius:8px;overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:0}.svg-canvas{width:100%;flex:1;position:relative;overflow:auto;background-color:#fafafa;background-image:radial-gradient(circle,#e0e0e0 1px,transparent 1px);background-size:20px 20px;min-height:0}.rote-memorization .svg-container{width:100%;min-height:100%;display:flex;justify-content:center;align-items:center;position:relative;padding:20px;box-sizing:border-box}.rote-memorization .svg-container svg{max-width:calc(100% - 40px);max-height:none;height:auto;width:auto;display:block}.target-location{z-index:5}.target-indicator{width:20px;height:20px;border:2px dashed #e74c3c;border-radius:50%;background-color:#e74c3c1a;position:relative;animation:pulse-target 2s infinite}.target-indicator:before{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;background-color:#e74c3c;border-radius:50%;transform:translate(-50%,-50%)}.placed-text-item{background-color:#3498db1a;border:1px solid #3498db;border-radius:3px;padding:2px 4px;font-weight:500;z-index:10;white-space:nowrap;transition:all .3s ease}.placed-text-item.correct{background-color:#27ae6033;border-color:#27ae60;animation:success-dock .5s ease-in-out}.placed-text-item.incorrect{background-color:#e74c3c1a;border-color:#e74c3c}.svg-canvas.drag-over{background-color:#e8f4fd;border-color:#3498db}@media (max-width: 768px){.rote-memorization{padding:10px}.game-container{flex-direction:column;height:0}.text-labels-panel{flex:0 0 200px;min-height:200px}.svg-canvas{flex:1;min-height:300px}}@keyframes pulse-target{0%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}to{opacity:.6;transform:scale(1)}}@keyframes success-dock{0%{transform:translate(-50%,-50%) scale(1.2);box-shadow:0 0 20px #27ae6099}50%{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 15px #27ae6066}to{transform:translate(-50%,-50%) scale(1);box-shadow:0 2px 4px #0000001a}}@keyframes success-pulse{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1)}}