@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');
:root{--bg:#070c18;--panel:#101827;--line:#25334b;--mint:#86f6bf;--cyan:#71d7fb;--text:#f1f6ff;--muted:#8896ad;--amber:#ffc76e}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'Space Mono',Consolas,monospace;font-size:12px;min-height:100vh;overflow-x:hidden}
button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}
.stars{pointer-events:none;position:fixed;inset:0;z-index:-1;background-repeat:repeat;opacity:.28}
.stars-one{background-image:radial-gradient(1px 1px at 25px 27px,#dceeff 98%,transparent),radial-gradient(1px 1px at 85px 120px,#dceeff 98%,transparent);background-size:180px 150px}
.stars-two{background-image:radial-gradient(2px 2px at 45px 55px,#83e3fa 75%,transparent);background-size:337px 241px;opacity:.17}
.app-shell{width:min(1200px,calc(100% - 64px));margin:0 auto}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid #233046}
.brand{display:flex;align-items:center;gap:9px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:30px;letter-spacing:1.2px;font-weight:900;white-space:nowrap}.brand-mark{font-size:40px;color:var(--mint);transform:rotate(-28deg);line-height:1}.brand-accent{color:var(--mint)}.brand small{font:700 11px 'Space Mono',monospace;letter-spacing:1px;color:var(--muted)}
.topbar nav{display:flex;gap:29px;font-size:10px;font-weight:700;color:#b4c1d6;letter-spacing:.6px}.topbar nav a:hover{color:var(--mint)}
.online-tag{color:var(--mint);font-size:10px;letter-spacing:.6px;white-space:nowrap}.online-dot{display:inline-block;background:var(--mint);width:7px;height:7px;border-radius:50%;box-shadow:0 0 12px var(--mint);margin-right:5px}.version{color:#59677c}
.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;min-height:600px;padding:75px 0 85px;gap:15px}.hero-copy{position:relative;z-index:2}
.eyebrow{font:700 10px 'Space Mono',monospace;letter-spacing:2px;color:var(--mint);display:flex;align-items:center;gap:12px}.eyebrow-line{background:var(--mint);height:1px;width:31px}.muted{color:#78b2b4}
h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;line-height:.99}h1{font-size:clamp(58px,6.7vw,102px);font-weight:900;letter-spacing:-.9px;margin:26px 0 26px}
.gradient-text{color:var(--mint);background:linear-gradient(100deg,#80f7b9,#78d9fd);background-clip:text;-webkit-text-fill-color:transparent}
.hero-desc{max-width:460px;color:#acbad0;font-size:12px;line-height:2.05;margin-bottom:27px}.hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.btn{border:1px solid #39526c;border-radius:2px;padding:16px 21px;font:700 11px 'Space Mono',monospace;letter-spacing:.6px;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;transition:.18s}
.btn-primary{background:var(--mint);border-color:var(--mint);color:#07111c;box-shadow:0 0 26px #82efb522}.btn-primary:hover{background:#b1ffd3;transform:translateY(-2px)}.btn-ghost{color:#d2dded;background:#111b2b80}.btn-ghost:hover{border-color:var(--mint);color:var(--mint)}
.hero-stats{display:flex;gap:35px;margin-top:52px}.hero-stats>div{display:flex;flex-direction:column;gap:2px}.hero-stats strong{font:800 28px 'Barlow Condensed',sans-serif;color:#e4edf9}.hero-stats span{color:#64748b;font-size:9px;letter-spacing:.7px}
.hero-visual{position:relative;min-height:500px;display:grid;place-items:center}.hero-visual:before{content:"";position:absolute;inset:14%;background:radial-gradient(ellipse,#24478560,transparent 67%);filter:blur(20px)}
.orbit{position:absolute;border:1px solid #37506d5e;border-radius:50%;aspect-ratio:1}.orbit-1{width:75%;transform:rotate(13deg) scaleY(.65)}.orbit-2{width:105%;transform:rotate(-25deg) scaleY(.56);border-style:dashed}
.planet{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle at 25% 18%,#24456b88 0%,#11253c60 43%,#091020 73%);box-shadow:inset -24px -24px 48px #020712a8,0 0 95px #2864a021;right:4%;top:17%}
.spacecraft-showcase{width:100%;max-width:540px;filter:drop-shadow(0 20px 30px #0009);z-index:2;animation:float 6s ease-in-out infinite}
.spacecraft-showcase svg{width:100%;height:350px;transform:rotate(-13deg)}@keyframes float{50%{transform:translateY(-13px) rotate(1.5deg)}}
.ship-caption{position:absolute;right:0;bottom:8%;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:3}.ship-caption span{font-size:9px;color:var(--mint)}.ship-caption strong{font:800 24px 'Barlow Condensed',sans-serif;letter-spacing:1px}.ship-caption small{font-size:8px;color:#8194ad}.crosshair{position:absolute;left:8%;top:18%;color:#5c8ca7;font-size:25px}
.console-panel{background:linear-gradient(135deg,#101d2dcf,#0c1522ef);border:1px solid #2c3e54;box-shadow:0 20px 100px #0005;padding:40px 43px 43px}
.panel-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:33px}.panel-heading h2,.instructions h2{font-size:48px;letter-spacing:1px;margin:14px 0 0}.panel-heading h2 span,.instructions h2 span{color:var(--mint)}
.small-code{color:#5d8395;font-size:9px}.blink{color:var(--mint);animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.1}}
.game-setup{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:35px}.section-title{display:flex;align-items:center;gap:11px;font-size:10px;font-weight:700;color:#dce5f3;letter-spacing:1.1px;margin:16px 0}
.section-title>span:first-child{color:var(--mint);font-size:10px}.hairline{height:1px;flex:1;background:#2d4057}.section-title small{color:#677d90;font-size:8px}
.ship-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 29px}
.ship-card{padding:12px;background:#111f31;border:1px solid #34445c;min-height:158px;color:#e2eafb;text-align:left;position:relative;overflow:hidden}
.ship-card:hover,.ship-card.selected{border-color:var(--mint);background:#112639}.ship-card.selected:after{content:"◉ SELECTED";position:absolute;top:8px;right:7px;color:var(--mint);font-size:7px}
.ship-card .ship-art{height:95px;display:grid;place-items:center;filter:drop-shadow(0 6px 13px #0008)}.ship-card svg{width:100%;height:93px}.ship-card strong{display:block;font:800 17px 'Barlow Condensed',sans-serif;letter-spacing:1px}.ship-card small{font-size:8px;color:#8da0ba}
.setup-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:31px}.setup-row label,.local-box label{font-size:9px;color:#8ea2b9;font-weight:700;letter-spacing:1px}
select,.local-box input{width:100%;display:block;margin-top:8px;background:#081321;border:1px solid #32475e;color:#ebf4ff;padding:13px 11px;border-radius:2px;outline:0}
select:focus,.local-box input:focus{border-color:var(--mint)}.mode-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.mode{display:flex;flex-direction:column;align-items:flex-start;background:#0c1726;border:1px solid #314257;padding:14px 11px;color:#e3edfa;text-align:left;gap:5px;min-height:99px}
.mode.selected{border-color:var(--mint);background:#17322f}.mode:hover:not(:disabled){border-color:var(--mint)}.mode.disabled{opacity:.45}.mode-icon{font-size:21px;color:var(--mint);line-height:1}.mode strong{font-size:9px}.mode small{font-size:8px;color:#8da2b9;line-height:1.6}
.battle-toggle{display:flex;align-items:center;gap:11px;margin:21px 0;color:#e1edfa;cursor:pointer}.battle-toggle input{position:absolute;opacity:0}.toggle-ui{width:37px;height:20px;border:1px solid #597189;background:#152235;position:relative;flex-shrink:0}.toggle-ui:after{content:"";width:12px;height:12px;position:absolute;left:3px;top:3px;background:#7a8a9e;transition:.15s}.battle-toggle input:checked+.toggle-ui{border-color:var(--mint)}.battle-toggle input:checked+.toggle-ui:after{left:20px;background:var(--mint)}.battle-toggle strong{display:block;font-size:10px}.battle-toggle small{display:block;font-size:9px;color:#889bae;margin-top:4px;line-height:1.6}
.local-box{background:#0b1825;border:1px solid #324557;padding:15px;margin-bottom:15px}.local-box small{display:block;color:#94a6b8;line-height:1.6;margin-top:8px}.launch-btn{width:100%;margin-top:8px}
.mission-card{align-self:stretch;border:1px solid #345065;background:radial-gradient(circle at 65% 25%,#285e5c3d,transparent 50%),#101f30;padding:18px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.mission-top{display:flex;justify-content:space-between;color:var(--mint);font-size:9px}.mission-orbit{height:146px;display:grid;place-items:center;color:#507a8a;font-size:40px}.mission-orbit span{color:var(--mint);font-size:86px;text-shadow:0 0 40px #6ce8beaa}
.mission-num{color:#84f8ba;font-size:10px}.mission-num span{color:#799bad}.mission-card h3{font-size:35px;line-height:1.03;margin:12px 0}.mission-card p{font-size:10px;color:#99acc1;line-height:1.9;flex:1}.mission-line{border-top:1px solid #355064;padding:11px 0;font-size:8px;color:#7996a9;display:flex;justify-content:space-between}.mission-line b{color:var(--mint)}
.instructions{padding:85px 0 82px}.instructions h2{margin-bottom:35px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.steps>div{border-top:1px solid #4e6b6d;padding:19px 9px}.steps b{color:var(--mint)}.steps h3{font-size:24px;margin:18px 0 9px}.steps p{color:#91a1b7;line-height:1.9;font-size:10px;max-width:320px}footer{border-top:1px solid #27394e;display:flex;justify-content:space-between;padding:25px 0 35px;color:#678096;font-size:9px}footer span:first-child,footer span:last-child{color:var(--mint)}
.hidden{display:none!important}.overlay{position:fixed;inset:0;background:#040911f7;z-index:50;overflow-y:auto;padding:25px 18px;display:grid;place-items:start center}
.race-shell{position:relative;width:min(1060px,100%);border:1px solid #3b526d;background:radial-gradient(ellipse at 50% 0%,#1b355359,transparent 65%),#0c1524;box-shadow:0 40px 120px #000e}
.race-head{padding:18px 24px;border-bottom:1px solid #2c4157;display:flex;justify-content:space-between;align-items:center}.race-title{color:var(--mint);font-size:23px}.race-title b{font-family:'Barlow Condensed',sans-serif;letter-spacing:1px}.race-title span{color:#fff}.race-title i{font-size:10px;font-style:normal;color:#83a8b6}.exit-btn{background:none;border:1px solid #3a5566;color:#a9c1d5;padding:8px 11px}
.race-subhead{display:flex;justify-content:space-between;gap:15px;background:#101e30;color:#a6d9d5;font-size:10px;padding:14px 24px}.race-subhead span:nth-child(2){font-weight:700;color:#fff;font-size:16px}
.race-track{background:radial-gradient(ellipse at right center,#25507738,transparent 65%),repeating-linear-gradient(90deg,transparent 0,transparent 18%,#4c708226 calc(18% + 1px));padding:23px 26px;min-height:184px;display:flex;flex-direction:column;gap:20px;border-bottom:1px solid #34485d}
.track-row{height:53px;position:relative;border-bottom:1px dashed #385069}.track-label{position:absolute;top:0;left:0;font-size:10px;z-index:2;color:#a9bbd0}.track-label b{color:var(--mint)}.track-ship{position:absolute;top:7px;left:0;transition:left .16s linear;filter:drop-shadow(0 0 10px #6bdbbf6b)}.track-ship svg{width:92px;height:48px}.track-finish{position:absolute;right:0;top:0;height:100%;border-right:4px dashed #a1c9db6f}
.race-content{padding:30px 30px 23px}.race-info{display:flex;justify-content:space-between;color:#82f6c0;font-size:10px;margin-bottom:13px}.prompt{font:19px/1.9 'Space Mono',monospace;overflow-wrap:anywhere;min-height:130px;border:1px solid #2f4862;background:#081321;padding:19px;color:#8fa2b5;max-height:215px;overflow-y:auto}
.prompt .correct{color:var(--mint)}.prompt .wrong{color:#ff8c93;background:#512d3e}.prompt .current{border-bottom:2px solid var(--cyan);color:#e9f7ff}
.type-label{display:flex;justify-content:space-between;margin:18px 0 8px;color:#e0f5f9;font-size:10px}.type-label small{color:#7693a6}#typeInput{width:100%;resize:vertical;min-height:75px;border:1px solid #4d7280;background:#0f2230;color:#e5f6ff;padding:13px;outline:0;font-size:16px}#typeInput:focus{border-color:var(--mint);box-shadow:0 0 0 1px #81f3b421}
.race-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px}.charge{margin-right:auto;color:#81a2b6;font-size:9px}.charge strong{display:block;color:var(--mint);font-size:15px}.ability{border:1px solid #527184;background:#15283a;color:#f2faff;padding:9px 12px;font-size:10px}.ability small{color:#7b9baf;margin-left:5px}.ability:hover:not(:disabled){border-color:var(--mint)}.ability:disabled{opacity:.36}.ability.active{border-color:var(--mint);color:var(--mint)}
.race-notice{padding-top:16px;min-height:35px;color:#a9c5d5;font-size:10px}.countdown{position:absolute;inset:0;z-index:4;background:#071421e8;display:grid;place-items:center;font:900 140px 'Barlow Condensed',sans-serif;color:var(--mint);text-shadow:0 0 40px #4ef0ba44}
.race-result{position:absolute;inset:55px 0 0;z-index:5;min-height:550px;background:#091827f9;display:flex;align-items:center;flex-direction:column;padding:65px 25px 45px;text-align:center}
.race-result h2{font-size:60px;margin:16px 0 26px}.result-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}.result-stats>div{display:flex;flex-direction:column;gap:7px;color:#8ba5bd}.result-stats b{color:#fff;font-size:25px}.result-board{margin:28px 0 20px;width:min(470px,100%)}.board-row{display:flex;justify-content:space-between;text-align:left;border-bottom:1px solid #334962;padding:11px;color:#cde7ee}.board-row strong{color:var(--mint)}.result-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
@media(max-width:950px){.game-setup{grid-template-columns:1fr}.mission-card{display:none}.hero{grid-template-columns:1fr;gap:0;padding-top:65px}.hero-visual{min-height:360px;max-width:560px;width:100%;margin:auto}.hero-visual svg{height:260px}.planet{width:240px;height:240px}.ship-caption{bottom:0}.topbar nav{display:none}}
@media(max-width:640px){.app-shell{width:min(100% - 30px,1200px)}.topbar{height:72px}.brand{font-size:24px}.online-tag{font-size:8px}.version{display:none}.hero{padding:50px 0 55px}.hero-desc{line-height:1.7}.hero-stats{margin-top:32px;gap:20px}.hero-visual{min-height:270px}.hero-visual svg{height:230px}.console-panel{padding:24px 15px}.panel-heading h2,.instructions h2{font-size:39px}.small-code{display:none}.ship-cards{gap:5px}.ship-card{padding:7px;min-height:130px}.ship-card svg{height:79px}.ship-card .ship-art{height:80px}.ship-card strong{font-size:14px}.ship-card small{font-size:7px}.mode-cards{gap:5px}.mode{padding:9px 7px}.mode strong{font-size:8px}.steps{grid-template-columns:1fr}.instructions{padding:50px 0}.steps>div{padding:12px}.steps h3{margin:8px 0}footer{flex-wrap:wrap;gap:12px}.race-head,.race-subhead{padding:12px}.race-title{font-size:17px}.race-subhead{flex-wrap:wrap;font-size:9px}.race-track{padding:20px 12px}.race-content{padding:20px 12px}.prompt{font-size:15px;line-height:1.85;max-height:160px}.track-ship svg{width:68px}.race-result h2{font-size:38px}.race-result{padding-top:45px}.ability{font-size:9px;padding:9px 7px}.ability small{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* TypingFleet v0.2 — online lobby and compact brand mark */
.brand-icon{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 0 8px #67f7c336);flex-shrink:0}
.online-box{margin:18px 0 12px;padding:20px;border:1px solid #3a616a;background:linear-gradient(130deg,#102734,#0b1729)}
.online-box .setup-row{margin-bottom:14px}
.online-box label{font-size:9px;color:#98aec2;letter-spacing:.6px}
.online-box input{width:100%;display:block;margin-top:8px;background:#071322;border:1px solid #385672;color:#edfdff;padding:13px 11px;outline:0;border-radius:2px}
.online-box input:focus{border-color:var(--mint)}
.online-buttons{display:flex;gap:9px;flex-wrap:wrap}
.online-buttons .btn{flex:1;min-width:155px}
.online-status{margin:15px 0 0;color:var(--mint);line-height:1.7;font-size:10px;letter-spacing:.3px}
.online-lobby{border-top:1px dashed #3e5e72;margin-top:15px;padding-top:17px;font-size:11px}
.online-lobby strong{color:var(--mint);font-size:17px;letter-spacing:3px}
.online-lobby>div:first-child{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.online-lobby .ability{font-size:9px}
#onlinePilots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:13px 0}
.online-pilot{padding:11px 12px;border:1px solid #345264;background:#0e2334;color:#d8edfa;font-size:10px}
#onlineStart,#onlineLeave{margin:6px 8px 0 0}
@media(max-width:640px){.brand-icon{width:34px;height:34px}.online-box{padding:13px}.online-box .setup-row{grid-template-columns:1fr}.online-buttons .btn{flex:1 1 100%}#onlinePilots{grid-template-columns:1fr}}

/* v0.3: hands-on Vim and shortcut training */
.training-course-note{margin:14px 0;padding:12px;border:1px solid #47716a;background:#10332e;color:#a2f6d5;font-size:9px;line-height:1.8}
.training-shell{position:relative;width:min(900px,100%);background:radial-gradient(ellipse at 60% -10%,#28576576,transparent 66%),#0b1524;border:1px solid #3b5b6e;box-shadow:0 30px 100px #000a}
.training-top{padding:18px 25px;border-bottom:1px solid #31495b;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#e5fff5;font:800 21px 'Barlow Condensed',sans-serif;letter-spacing:1px}
.training-body,.training-complete{padding:30px 35px 36px}
.training-body h2,.training-complete h2{font-size:clamp(35px,5.3vw,59px);margin:16px 0 26px}
.training-progress-track{height:5px;background:#223b4d;overflow:hidden}
.training-progress-track>span{display:block;width:0;height:100%;background:linear-gradient(90deg,#83f9b6,#5fd6f7);transition:width .2s}
.training-meta{display:flex;justify-content:space-between;gap:10px;margin:10px 0 20px;color:#86eab9;font-size:10px}
.training-meta>span:last-child{color:#9bc8d8}
.training-task{border:1px solid #396479;background:linear-gradient(110deg,#183848c9,#112133);padding:19px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.training-task small,.training-editor-head{color:#88eabf;font-size:9px;letter-spacing:1px}
.training-task h3{font-size:25px;line-height:1.1;margin:11px 0 0;font-family:'Barlow Condensed',sans-serif}
.training-target{display:inline-flex;align-items:center;justify-content:center;min-width:66px;min-height:55px;white-space:nowrap;padding:9px 14px;color:#081725;background:#88f4bb;border-bottom:5px solid #3b9f90;font-size:18px;font-weight:900;box-shadow:0 0 30px #89f8bd38}
.training-editor-head{display:flex;justify-content:space-between;gap:9px;align-items:center;margin:27px 0 8px}
.training-editor-head small{color:#7c9aae;letter-spacing:0}
.training-editor{min-height:154px;background:#050e1b;border:1px solid #486477;color:#b4d5e6;padding:18px 20px;font:17px/2 'Space Mono',monospace;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.training-caret{color:#05151a;background:#8df8c0;box-shadow:0 0 11px #83fabe5e}
.training-text.selected{background:#3a7392;color:#fff;outline:1px solid #82d9fc}
.training-saved{margin-top:14px;color:#8ff8bd;font-size:12px}
.training-keyboard{margin:22px 0 12px;display:flex;flex-direction:column;gap:8px}
.training-key-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.training-key{border:1px solid #3b5369;border-bottom:3px solid #23374b;background:#172b40;color:#829bab;min-width:42px;min-height:38px;padding:8px 10px;display:grid;place-items:center;font-weight:700;font-size:11px;border-radius:4px}
.training-key.target{border-color:#88f6b8;background:#244c4d;color:#caffdf;box-shadow:0 0 22px #78f4b94d}
.training-feedback{color:#a6bdd0;font-size:10px;min-height:20px;line-height:1.6}
.training-actions{margin-top:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.training-hint{max-width:570px;padding:12px 15px;background:#122f34;border-left:3px solid #8ef4b9;color:#bef9df;font-size:11px;line-height:1.7}
.training-complete{min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.training-complete p{color:#a9c4d8;line-height:2}
@media(max-width:640px){.training-body,.training-complete{padding:20px 13px}.training-top{padding:12px 13px;font-size:17px}.training-task{padding:13px}.training-task h3{font-size:21px}.training-target{min-width:49px;font-size:13px;padding:7px}.training-editor{font-size:13px;padding:12px;min-height:120px}.training-key{min-width:34px;min-height:33px;padding:6px;font-size:10px}.training-editor-head small{display:none}}

/* v0.3: leaderboard and direct social invitations */
.wall-section{padding-top:15px}.wall-controls{display:flex;gap:10px;margin:20px 0}.wall-tab{padding:13px 17px;border:1px solid #3a5c70;background:#112236;color:#d2e8f8;font-size:10px;letter-spacing:.6px;font-weight:700}.wall-tab.active,.wall-tab:hover{border-color:#86f6bf;color:#86f6bf;background:#143632}
.wall-table{overflow-x:auto;border:1px solid #395269;background:#0a1727}.wall-row{display:grid;grid-template-columns:36px minmax(100px,1.1fr) minmax(128px,1.35fr) minmax(80px,.8fr) 55px 57px;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid #284057;color:#b8c8db;min-width:640px;font-size:10px}
.wall-header{color:#7ea6b8;letter-spacing:.9px;background:#14283a;font-size:9px;font-weight:700}.wall-rank,.wall-number{color:#85f7be}.wall-row strong{font-size:11px;color:#e0f5f6}.wall-mode{color:#849fb6;font-size:9px}.wall-empty{padding:25px;color:#9cb3c9;line-height:1.8}
.share-links{display:flex;flex-wrap:wrap;gap:6px}.share-links button{border-color:#41616c!important;color:#bff4db}.room-name-field{display:block;margin:9px 0 17px}.online-room-label{color:#b5edeb;font-size:11px;letter-spacing:0}.online-privacy{color:#90a4b8;font-size:9px;line-height:1.7;margin:10px 0}

/* v0.3 beginner QWERTY finger guide: optional and low-profile */
.finger-guide-control{display:flex;align-items:center;gap:12px;margin:12px 0 0;flex-wrap:wrap}
.finger-guide-control>span{font-size:9px;color:#829fb2}
.finger-toggle{font-size:9px;border-color:#4b7e7b;color:#a4f6d9;letter-spacing:.35px}
.finger-guide{padding:14px 15px 12px;margin-top:10px;border:1px solid #355d63;border-radius:4px;background:linear-gradient(110deg,#0b2029,#101a2a);box-shadow:inset 0 1px 0 #ffffff10}
.finger-status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#91aebe;font-size:10px;letter-spacing:.5px}
.finger-status b{font-size:16px;color:#c9ffe5;margin-left:9px}
#fingerName{color:#81e9d1;font-weight:700}
.finger-keyboard{display:flex;flex-direction:column;gap:5px;margin:12px auto 9px;max-width:630px}
.finger-row{display:flex;align-items:center;justify-content:center;gap:5px}
.finger-row-1{padding-left:9px}.finger-row-2{padding-left:19px}.finger-row-3{padding-left:28px}
.finger-key{position:relative;flex:1;min-width:0;height:30px;display:grid;place-items:center;border:1px solid #415363;border-bottom:2px solid #273b4b;border-radius:3px;background:#192c3a;color:#c0d5e1;font:700 10px 'Space Mono',monospace;transition:background .12s,border-color .12s,box-shadow .12s}
.finger-space-row{padding:0 22%}.finger-space{height:23px;font-size:9px}
.home-bump{position:absolute;bottom:1px;width:9px;height:2px;background:#b9e8e4;border-radius:2px}
.finger-zone-0{--finger:#da9099}.finger-zone-1{--finger:#edc18a}.finger-zone-2{--finger:#f2e09b}.finger-zone-3{--finger:#8cdda8}.finger-zone-4{--finger:#7ddbd1}.finger-zone-5{--finger:#89bced}.finger-zone-6{--finger:#b4a3e8}.finger-zone-7{--finger:#dba5d7}.finger-zone-8{--finger:#97dcda}
.finger-key:not(.next){border-top-color:var(--finger);border-top-width:2px}
.finger-key.next{background:var(--finger);border-color:#ecffff;color:#091522;font-weight:900;transform:translateY(-2px);box-shadow:0 0 16px var(--finger)}
.finger-hands{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;max-width:630px;margin:0 auto}
.finger-label{padding:5px 2px;border:1px solid #43566a;border-radius:2px;border-top:2px solid var(--finger);background:#122331;color:#a9bfce;text-align:center;font-size:7px;white-space:nowrap}
.finger-label.next{background:var(--finger);color:#0b1a23;border-color:#eafffc;font-weight:900}
.finger-message{margin:10px 0 0;color:#849fad;font-size:9px;text-align:center;line-height:1.6}
@media(max-width:640px){.finger-guide{padding:10px 6px}.finger-row{gap:2px}.finger-key{height:26px;font-size:9px}.finger-hands{gap:2px}.finger-label{font-size:6px;overflow:hidden}.finger-keyboard{margin:10px auto}}