.howToOpen{flex:none;width:min(360px,95%);background:#103963;color:#f2d68b;border:1px solid #6a9fce;border-radius:16px;padding:11px;font:800 13px system-ui;letter-spacing:.035em}
.howToOverlay{position:fixed;inset:0;z-index:260;display:none;justify-content:center;align-items:center;background:#041326e9;padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px)}
.howToOverlay.open{display:flex}
.howToPanel{width:min(640px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:linear-gradient(#133764,#061d3c);color:#f4f8ff;border:1px solid #6a9ac8;border-radius:20px;padding:20px 17px;box-shadow:0 20px 80px #0008}
.howToPanel h2{font:900 26px system-ui;color:#f4d37e;margin:8px 0}
.howToPanel h3{font:800 17px system-ui;color:#f4d37e;margin:0 0 8px}
.howToLead{font:600 13px system-ui;letter-spacing:.07em;color:#b9d6f3}
.howToPanel section{border-top:1px solid #5880a655;padding-top:15px;margin-top:15px}
.howToPanel p,.howToPanel li{font:14px/1.58 system-ui}
.howToPanel ul{padding-left:20px;margin:0}
.howToPanel li{margin:5px 0}
.howToClose{float:right}
.howToDone{margin-top:18px;width:100%;padding:14px;background:#315e95;color:#fff;font-weight:800}
body.light-mode .howToOpen{background:#d7eafb;color:#795713;border-color:#90b6d8}
body.light-mode .howToOverlay{background:#dcecf9ed}
body.light-mode .howToPanel{background:linear-gradient(#fff,#e7f3ff);color:#1b3a54;border-color:#9dbdd7}
body.light-mode .howToPanel h2,body.light-mode .howToPanel h3{color:#8e670f}
body.light-mode .howToLead{color:#53728c}
body.light-mode .howToPanel section{border-color:#a8c2db}