@scope (#morse-trainer-native-root) {

#morse-trainer-native-root{--navy:#12304a;--navy2:#1c4565;--ocean:#1479b8;--pale:#e8f4fc;--bg:#f4f7fb;--white:#fff;--ink:#19344a;--muted:#718398;--line:#e1e8f0;--amber:#f0b84b;--ok:#16805d;--bad:#c0392b}
#morse-trainer-native-root *{box-sizing:border-box}
button,input,select{font:inherit}.mw{max-width:1180px;margin:0 auto;padding:18px}.hero{padding:26px 28px;border-radius:16px;background:radial-gradient(ellipse at 88% 0%,rgba(70,174,220,.35),transparent 42%),linear-gradient(115deg,#12304a,#17517b 62%,#1479b8);color:#fff;margin-bottom:18px}.hero .eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:800;opacity:.8}.hero h1{margin:9px 0;font-size:clamp(24px,3vw,32px);letter-spacing:-.6px}.hero p{margin:0;color:#d8e9f5;line-height:1.65;font-size:13px}
.nav{display:flex;gap:7px;overflow-x:auto;padding:4px 0 13px;margin-bottom:16px;border-bottom:1px solid var(--line)}.nav button{flex:none;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy);padding:10px 14px;font-size:12px;font-weight:700;cursor:pointer}.nav button.on{background:var(--ocean);border-color:var(--ocean);color:#fff}
.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;margin-bottom:16px}.panel h2{font-size:18px;color:var(--navy);margin:0 0 10px}.panel h3{font-size:14px;color:var(--navy);margin:18px 0 8px}.muted{color:var(--muted);font-size:12px;line-height:1.65}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:9px}.card{background:#f8fbfd;border:1px solid var(--line);border-bottom:3px solid #b9d9ee;border-radius:10px;padding:10px 6px;text-align:center;min-width:0}.card b{display:block;color:var(--navy);font-size:20px;font-weight:750}.card .marks{gap:3px;max-width:100%;overflow:hidden}.card .dot{width:6px;height:6px;flex-basis:6px;min-width:6px;min-height:6px}.card .dash{width:13px;height:6px;flex-basis:13px;min-width:13px;min-height:6px}.grid.number-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.number-grid .card .marks{overflow:visible;gap:3px}.number-grid .card .dash{width:12px;flex-basis:12px;min-width:12px}.number-grid .card .dot{width:7px;flex-basis:7px;min-width:7px;height:7px;min-height:7px}.marks{min-height:18px;display:flex;justify-content:center;align-items:center;gap:3px;margin-top:7px}.dot{display:inline-block;flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#1479b8;min-width:8px;min-height:8px}.dash{display:inline-block;flex:0 0 20px;width:20px;height:7px;border-radius:3px;background:#1479b8;min-width:20px;min-height:7px}.marks{min-height:18px;display:flex;justify-content:center;align-items:center;gap:3px;margin-top:7px}.big .marks{gap:14px;min-height:30px}.big .dot{width:13px;height:13px;flex-basis:13px;min-width:13px;min-height:13px}.big .dash{width:32px;height:10px;flex-basis:32px;min-width:32px;min-height:10px}.card.start{background:var(--pale);border-bottom-color:var(--ocean)}.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0}.btn{border:0;border-radius:9px;background:var(--ocean);color:#fff;padding:10px 15px;font-size:12px;font-weight:750;cursor:pointer}.btn:hover{background:var(--navy2)}.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}.btn.secondary.on{background:var(--pale);border-color:#b9d9ee;color:var(--ocean)}.btn:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #83c8ee;outline-offset:2px}
.tip{background:var(--pale);border-left:4px solid var(--ocean);border-radius:8px;padding:13px 15px;font-size:12px;line-height:1.65;margin:12px 0}.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border:1px solid var(--line);border-radius:12px;padding:12px;margin:9px 0}.chain-label{flex:1 1 165px}.chain-label b{display:block;font-size:12px;color:var(--navy)}.chain-label span{font-size:11px;color:var(--muted)}.sequence{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.pair-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}.pair{display:flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px}.big{font-size:34px;font-weight:800;text-align:center;color:var(--navy);margin:20px 0}.big:has(.dot),.big:has(.dash){display:flex;justify-content:center;align-items:center;gap:14px;min-height:30px}.input-answer{display:block;margin:12px auto;width:min(280px,100%);font-size:26px;text-align:center;letter-spacing:.25em;padding:10px;border:2px solid #b9cbd9;border-radius:9px;background:#fff;color:var(--navy);text-transform:uppercase}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.options button{display:flex;align-items:center;justify-content:center;min-height:76px;background:#f8fbfd;color:var(--navy);border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer}.option-code{display:block;min-width:4ch;font-family:Arial,sans-serif;font-size:24px;font-weight:900;letter-spacing:.08em;line-height:1.5;text-align:center;color:#075985;white-space:pre-wrap;overflow-wrap:anywhere}.hud{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.lamp{width:92px;height:92px;border-radius:50%;background:#263b4e;margin:15px auto;border:4px solid #b9cbd9}.lamp.on{background:var(--lamp,#ffd54a);box-shadow:0 0 28px 8px var(--lamp,#ffd54a)}.review{border:1px solid var(--line);border-left:5px solid var(--muted);border-radius:9px;padding:12px;margin:8px 0;font-size:12px}.review.ok{border-left-color:var(--ok)}.review.no{border-left-color:var(--bad)}.setting{font-size:12px;color:var(--ink)}.setting input{vertical-align:middle}.hidden{display:none!important}
.pro-lock{border:1px solid #b9d9ee;background:#f5fbff;border-radius:13px;padding:22px;margin-bottom:16px}
.pro-lock h2{color:var(--navy);margin:0 0 8px}.pro-lock p,.pro-lock li{font-size:13px;line-height:1.7;color:var(--muted)}
.pro-lock ul{padding-left:20px}.pro-lock .btn{margin-top:8px}
.nav button.pro-locked::after{content:" 🔒 Pro";font-size:10px;color:#a66b00}
@media(max-width:600px){.mw{padding:12px}.hero{padding:22px 19px}.panel{padding:15px}.nav button{padding:9px 11px}.grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.grid.number-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}.options{grid-template-columns:1fr 1fr}.big{font-size:28px}}

}

body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root{--bg:#101c28;--white:#182838;--ink:#edf4fa;--muted:#b8c9d8;--line:#30485a;--pale:#20384b;color:var(--ink);background:var(--bg)}
body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .panel,body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .chain,body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .pair,body.mw-dark-theme #morse-trainer-native-root .review{background:#182838;color:#edf4fa;border-color:#30485a}
body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .panel h2,body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .panel h3,body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .card b,body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .big,body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .chain-label b,body.mw-dark-theme #morse-trainer-native-root .setting{color:#edf4fa}
body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .card,body.mw-dark-theme #morse-trainer-native-root .options button{background:#203447;color:#edf4fa;border-color:#385267}
body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .card.start,body.mw-dark-theme #morse-trainer-native-root .tip{background:#203f56;color:#e7f4fc;border-color:#1479b8}
body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .nav button,body.mw-dark-theme #morse-trainer-native-root .btn.secondary{background:#182838;color:#edf4fa;border-color:#40586a}
body.mw-dark-theme #morse-trainer-native-root #morse-trainer-native-root .nav button.on,body.mw-dark-theme #morse-trainer-native-root .btn{background:#1479b8;color:#fff;border-color:#1479b8}
body.mw-dark-theme #morse-trainer-native-root .input-answer{background:#111f2c;color:#edf4fa;border-color:#40586a}
body.mw-dark-theme #morse-trainer-native-root .option-code{color:#8bd2ff}

