:root{--type-ink:#111827;--type-muted:#667085;--type-line:#e4e7ec;--type-blue:#2563eb;--type-surface:#fff;--type-bg:#f8fafc}
body{background:var(--type-bg);color:var(--type-ink)}
.type-page{width:min(100% - 32px,1000px);margin:0 auto 60px}
.breadcrumbs{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:12px;color:#98a2b3;margin:18px 0 28px}.breadcrumbs a{color:#667085}.breadcrumbs a:hover{color:var(--type-blue)}
.tool-heading{text-align:center;margin:0 auto 26px;max-width:760px}.tool-heading .eyebrow,.keyboard-reference .eyebrow{font-size:11px;letter-spacing:.13em;font-weight:800;color:var(--type-blue);margin:0 0 10px}.flag{font-size:16px;margin-right:5px}.tool-heading h1{font-size:clamp(32px,5vw,48px);line-height:1.08;letter-spacing:-.045em;margin:0;color:#101828}.intro{margin:14px auto 0;max-width:620px;color:var(--type-muted);line-height:1.7;font-size:15px}.intro strong{color:#111827}
.typing-card{background:var(--type-surface);border:1px solid var(--type-line);border-radius:20px;box-shadow:0 12px 36px rgba(16,24,40,.06);overflow:hidden}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--type-line);background:#fcfcfd}.mode-switch,.toolbar-actions{display:flex;align-items:center;gap:6px}.mode{border:1px solid transparent;border-radius:10px;background:transparent;padding:9px 12px;color:#667085;font-size:12px;font-weight:750;cursor:pointer}.mode.active{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:36px;height:36px;padding:0 9px;border:1px solid var(--type-line);border-radius:10px;background:#fff;color:#475467;cursor:pointer}.icon-btn:hover,.secondary-btn:hover{background:#f9fafb;border-color:#b8c0cc}
.suggestion-area{padding:13px 16px 11px;border-bottom:1px solid var(--type-line);background:#fff}.suggestion-label{display:flex;justify-content:space-between;gap:12px;font-size:11px;font-weight:750;color:#475467;margin-bottom:9px}.suggestion-label #suggestion-status{font-weight:500;color:#98a2b3}.suggestions{display:flex;flex-wrap:wrap;gap:7px;min-height:34px;align-items:center}.suggestion-empty{font-size:12px;color:#98a2b3}.suggestion{border:1px solid #dbeafe;background:#f8fbff;border-radius:9px;padding:6px 11px;color:#1d4ed8;font-size:16px;cursor:pointer}.suggestion[aria-selected=true],.suggestion:hover{background:#2563eb;border-color:#2563eb;color:white}.suggestion .number{font:10px system-ui;color:inherit;opacity:.7;margin-left:7px}
#editor{display:block;width:100%;min-height:300px;resize:vertical;border:0;outline:0;padding:22px 20px;font-family:system-ui,-apple-system,"Noto Sans Devanagari","Nirmala UI",sans-serif;font-size:23px;line-height:1.85;color:#101828;background:#fff}#editor::placeholder{color:#c0c6d0}.editor-footer{display:flex;justify-content:space-between;gap:10px;padding:10px 18px;border-top:1px solid #f2f4f7;color:#98a2b3;font-size:11px}.action-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 16px 17px;border-top:1px solid var(--type-line)}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:11px;padding:10px 14px;font-size:12px;font-weight:750;cursor:pointer}.primary-btn{border:1px solid #1d4ed8;background:#2563eb;color:#fff}.primary-btn:hover{background:#1d4ed8}.secondary-btn{border:1px solid var(--type-line);background:#fff;color:#344054}#toast{font-size:12px;color:#15803d;margin-left:auto}
.help-panel{padding:18px 20px 20px;border-top:1px solid var(--type-line);background:#f9fafb;color:#475467;font-size:13px;line-height:1.7}.help-panel>div{display:flex;justify-content:space-between;align-items:center}.help-panel h2{font-size:16px;color:#101828;margin:0 0 6px}.help-panel ul{padding-left:20px;margin:8px 0 14px}.help-panel li{margin:6px 0}.help-panel code,.intro code,.examples code{background:#f2f4f7;padding:2px 5px;border-radius:5px}.help-panel kbd{border:1px solid #d0d5dd;background:#fff;border-radius:5px;padding:1px 5px;font-size:11px}.privacy-note{margin:0;padding:10px 12px;background:#ecfdf3;border-radius:9px;color:#027a48;font-size:12px}
.keyboard-reference{margin:40px 0 0}.keyboard-reference h2,.about-tool h2{margin:0 0 16px;font-size:clamp(22px,3vw,30px);letter-spacing:-.035em;color:#101828}.examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.examples button{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;padding:15px;border:1px solid var(--type-line);border-radius:13px;background:#fff;cursor:pointer}.examples button:hover{border-color:#93c5fd;box-shadow:0 4px 16px rgba(37,99,235,.07)}.examples code{font-size:12px;color:#667085}.examples span{font-size:20px;color:#101828}
.about-tool{margin:38px 0 0;padding:22px 24px;background:#fff;border:1px solid var(--type-line);border-radius:16px}.about-tool h2{font-size:21px;margin-bottom:12px}.about-tool p{font-size:13px;color:var(--type-muted);line-height:1.8;margin:8px 0}.type-footer{width:min(100% - 32px,1000px);margin:0 auto 35px;padding-top:20px;border-top:1px solid #e4e7ec;display:flex;justify-content:space-between;gap:15px;color:#98a2b3;font-size:12px}.type-footer a{color:#475467}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:620px){.type-page{width:calc(100% - 20px)}.breadcrumbs{margin:12px 0 20px}.tool-heading{margin-bottom:20px}.toolbar{align-items:flex-start;padding:10px;flex-wrap:wrap}.mode{padding:8px}.toolbar-actions{margin-left:auto}.icon-btn span{display:none}.suggestion-area{padding:12px}.suggestion-label{align-items:flex-start}.suggestion-label #suggestion-status{max-width:55%;text-align:right}#editor{min-height:250px;padding:16px 13px;font-size:20px}.editor-footer{padding:9px 12px;flex-direction:column;gap:4px}.action-row{padding:12px;gap:7px}.primary-btn,.secondary-btn{padding:10px 11px}.examples{grid-template-columns:repeat(2,minmax(0,1fr))}.examples button{padding:12px}.examples span{font-size:18px}.about-tool{padding:18px}.type-footer{width:calc(100% - 24px);flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}


/* Four typing methods and compact, touch-friendly responsive layout */
.toolbar{align-items:flex-start;flex-wrap:wrap}
.mode-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;flex:1;min-width:0}
.mode{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 12px;border-color:#e4e7ec;background:#fff;color:#344054;font-size:13px;white-space:nowrap}
.mode.active{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8;box-shadow:inset 0 0 0 1px rgba(37,99,235,.04)}
.mode-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:#f2f4f7;color:#475467;font-size:12px;font-weight:800}
.mode.active .mode-icon{background:#dbeafe;color:#1d4ed8}
.toolbar-actions{flex:0 0 auto}
.mode-description{padding:12px 17px;border-bottom:1px solid var(--type-line);background:#f8fbff;color:#475467;font-size:13px;line-height:1.55}
.mode-description span{color:#1d4ed8;font-weight:750}
.voice-panel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 17px;border-bottom:1px solid var(--type-line);background:#fff7ed}
.voice-panel[hidden]{display:none}
.voice-panel>div{flex:1;min-width:180px}
.voice-panel strong{font-size:14px;color:#9a3412}
.voice-panel p{margin:4px 0 0;color:#7c6252;font-size:12px;line-height:1.5}
.voice-panel #voice-status{font-size:13px;color:#9a3412}
#voice-toggle{min-height:42px}
#voice-toggle.listening{background:#b91c1c;border-color:#b91c1c}
@media(max-width:760px){
 .toolbar{padding:12px;gap:10px}
 .mode-switch{width:100%;flex:1 1 100%;grid-template-columns:repeat(2,minmax(0,1fr))}
 .mode{justify-content:flex-start;white-space:normal;min-height:46px;padding:9px 11px}
 .toolbar-actions{width:100%;justify-content:flex-end}
 .toolbar-actions .icon-btn{min-width:40px;min-height:40px}
 .mode-description{padding:11px 13px;font-size:12px}
 .voice-panel{align-items:flex-start;padding:13px;gap:10px}
 .voice-panel>div{flex-basis:100%}
 .voice-panel #voice-toggle{flex:1}
 .voice-panel #voice-status{align-self:center}
}
@media(max-width:380px){
 .mode{gap:6px;padding:8px;font-size:12px}
 .mode-icon{flex-basis:23px;width:23px;height:23px}
 .suggestion{font-size:15px;padding:7px 9px}
 .action-row>*{max-width:100%}
 #toast{flex-basis:100%;margin-left:0}
}