#tutorial-overlay{position:fixed;inset:0;z-index:10000;pointer-events:none;font-family:'Gridfire Pixel',monospace}#tutorial-overlay[hidden]{display:none}.tutorial-shade{position:fixed;background:#000a;pointer-events:none}.tutorial-shade[hidden]{display:none}#tutorial-ring{position:fixed;border:2px solid #e5edf5;border-radius:5px;box-shadow:0 0 0 2px #0a1016;pointer-events:none}#tutorial-ring[hidden]{display:none}#tutorial-card{position:fixed;box-sizing:border-box;pointer-events:auto;background:#252a30;border:2px solid #a3aab5;border-radius:7px;padding:14px;color:#f2f5f9;box-shadow:0 5px 0 #0b1018;overflow:auto;overscroll-behavior:contain;max-width:calc(100vw - 24px)}.tutorial-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}#tutorial-progress{font-size:10px;color:#c7d1dd;flex:1}#tutorial-fold{font-size:20px;min-width:44px;min-height:44px;padding:4px;background:#3b4653;border:1px solid #9daaba;border-radius:4px}#tutorial-title{font-size:14px;line-height:1.6;margin:0 0 10px;letter-spacing:0}#tutorial-text{font-size:11px;line-height:1.85;margin:0 0 12px}.tutorial-actions{display:flex;gap:8px;align-items:center}.tutorial-actions button{min-height:44px;padding:8px 10px;border-radius:4px;font-size:10px}#tutorial-next{flex:1;background:#4a5869;border:1px solid #b0bfd2;color:#fff}#tutorial-next:disabled{background:#303842;border-color:#697686;color:#c4cedb}#tutorial-skip{background:#252a30;color:#cbd4df;border:1px solid #75808e}.collapsed #tutorial-title,.collapsed #tutorial-text,.collapsed .tutorial-actions{display:none}#tutorial-card.collapsed{padding:6px 10px;width:180px!important}.collapsed .tutorial-head{margin:0}#tutorial-replay{width:100%;margin-top:12px;min-height:48px;text-align:left}#tutorial-replay span{line-height:1.6}@media(max-height:500px){#tutorial-card{padding:10px}#tutorial-text{font-size:10px;line-height:1.65;max-height:100px;overflow:auto}#tutorial-title{font-size:12px;margin-bottom:6px}.tutorial-head{margin-bottom:4px}}@media(max-width:380px){#tutorial-title{font-size:12px}#tutorial-text{font-size:10px;line-height:1.7}#tutorial-card{padding:10px}.tutorial-head{margin-bottom:6px}}

body:has(#flight:not([hidden])) #tutorial-text{max-height:150px;overflow-y:auto;overscroll-behavior:contain}body:has(#flight:not([hidden])) #tutorial-card{background:#252a30f5}@media(max-height:650px){body:has(#flight:not([hidden])) #tutorial-text{max-height:100px}}
