:root{--focus:#3f7a34;--brand:#164b3c}
.topbar{border-bottom:3px solid var(--brand)}
.theme-toggle{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:7px 12px;font-size:11px;font-weight:750;letter-spacing:.04em;min-height:36px}
.theme-toggle:hover{background:var(--soft);text-decoration:none}
.home-hero{display:block;max-width:740px;padding-top:42px;padding-bottom:18px}
.button,.key,.layout-key,.theme-toggle,.pagination-button,.featured-card,.language-link{transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease}
.button:hover:not(:disabled){transform:translateY(-1px)}
.button:active:not(:disabled){transform:translateY(1px)}
.button.primary.copied{background:#1f7a45}
#editor.pulse{animation:clavierPulse .4s ease}
@keyframes clavierPulse{0%{box-shadow:inset 0 0 0 3px var(--accent)}100%{box-shadow:inset -2px 0 0 #d6e2ca}}
.keyboard-loading{background:transparent;padding-top:4px;padding-bottom:0}
.skeleton-line{display:block;height:10px;width:46%;max-width:280px;margin:8px 25px 0;border-radius:999px;background:linear-gradient(90deg,#e4ece2 20%,#f7faf4 50%,#e4ece2 80%);background-size:200% 100%;animation:shimmer 1.1s linear infinite}
.skeleton-line.short{width:24%}
.key-skeleton{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-bottom:12px}
.key-skeleton span{display:block;height:52px;border-radius:8px;background:linear-gradient(90deg,#e7eee4 20%,#f8fbf6 50%,#e7eee4 80%);background-size:200% 100%;animation:shimmer 1.1s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.key small{opacity:0}
.key:hover small,.key:focus-visible small,.key:focus small{opacity:1}
.layout-key small{opacity:1}
.key,.layout-key,.mark-button,.keyboard-extras button,.pagination-button{min-height:48px}
.key:focus-visible,.layout-key:focus-visible,.button:focus-visible,.theme-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.layout-map-wrap{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.layout-map-wrap summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--green)}
.layout-note{font-size:11px;color:var(--muted);margin:6px 0 10px}
.layout-map{display:flex;flex-direction:column;gap:6px;overflow-x:auto;padding-bottom:4px}
.layout-row{display:flex;gap:4px;min-width:max-content}
.layout-key{min-width:48px;width:52px;border:1px solid #dce3d6;border-bottom-width:3px;border-radius:8px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px}
.layout-key b{font:18px/1.1 var(--script-font),var(--arabic),sans-serif}
.layout-key small{font:9px/1 ui-monospace,monospace;color:#6d7b68}
.layout-key:hover:not(:disabled){background:#eef4e1;transform:translateY(-1px)}
.layout-key:disabled{opacity:.45;cursor:default}
.drawer-toggle{display:none}
body.high-contrast{--ink:#07110c;--muted:#243028}
body.high-contrast #editor{color:#050806;font-weight:560}
html[data-theme="dark"]{color-scheme:dark;--paper:#101612;--white:#1a2420;--ink:#e8f3ea;--muted:#b7c6bb;--line:#31443a;--green:#8fbf6a;--soft:#24332c;--accent:#d7eea4;--brand:#8fbf6a;--focus:#d7eea4;--arabic:var(--script-font),serif}
html[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] .topbar{background:#141c18;border-bottom-color:#8fbf6a}
html[data-theme="dark"] .brand-logo{background:#f4f7f1;border-radius:12px;padding:5px 8px}
html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .free-label{color:var(--ink)}
html[data-theme="dark"] .workspace, html[data-theme="dark"] .keyboard-section, html[data-theme="dark"] .candidate-panel, html[data-theme="dark"] dialog, html[data-theme="dark"] .featured-card, html[data-theme="dark"] .key, html[data-theme="dark"] .layout-key, html[data-theme="dark"] .candidate, html[data-theme="dark"] .example-keys>span{background:#1b2621;color:var(--ink);border-color:#3a5146}
html[data-theme="dark"] .modes{background:#121a16}
html[data-theme="dark"] .modes button.active{background:#24382e;color:#e7f6d8}
html[data-theme="dark"] #editor{color:#f2faf3;caret-color:#d7eea4}
html[data-theme="dark"] #editor::placeholder, html[data-theme="dark"] .mode-hint, html[data-theme="dark"] .keyboard-heading>div>span, html[data-theme="dark"] .privacy-note, html[data-theme="dark"] .footer{color:#b7c6bb}
html[data-theme="dark"] .button.secondary, html[data-theme="dark"] .key-search, html[data-theme="dark"] .candidate-search-row input, html[data-theme="dark"] select{background:#121a16;color:var(--ink);border-color:#3a5146}
html[data-theme="dark"] .primary{background:#1f7a55;color:#fff}
html[data-theme="dark"] .text-button, html[data-theme="dark"] .layout-map-wrap summary, html[data-theme="dark"] .home-hero h1 span, html[data-theme="dark"] .hero-note b{color:#b7e39a}
html[data-theme="dark"] .keyboard-extras button, html[data-theme="dark"] .pagination-button, html[data-theme="dark"] .special-keys .space-key, html[data-theme="dark"] .special-keys .backspace-key, html[data-theme="dark"] .special-keys .enter-key, html[data-theme="dark"] .mark-button{background:#24332c;color:var(--ink);border-color:#3a5146}
html[data-theme="dark"] .key:hover, html[data-theme="dark"] .layout-key:hover:not(:disabled), html[data-theme="dark"] .candidate:hover, html[data-theme="dark"] .featured-card:hover, html[data-theme="dark"] .language-link:hover, html[data-theme="dark"] .mark-button:hover{background:#2b4036;border-color:#6ea36a}
html[data-theme="dark"] .candidate.selected{background:#314a3c;outline-color:#d7eea4}
html[data-theme="dark"] .language-link .kind-dot{background:#8fbf6a}
html[data-theme="dark"] .quick-guide, html[data-theme="dark"] .home-facts article{background:#18211c;border-color:#31443a}
html[data-theme="dark"] .skeleton-line, html[data-theme="dark"] .key-skeleton span{background:linear-gradient(90deg,#24332c 20%,#31463b 50%,#24332c 80%);background-size:200% 100%}
html[data-theme="dark"] body.high-contrast{--ink:#fff;--muted:#e8f6ec}
html[data-theme="dark"] body.high-contrast #editor{color:#fff}
html[data-theme="dark"] .footer>a:first-of-type{color:#d7eea4}
@media (hover:none){.key small{opacity:1}}
@media (max-width:700px){
  .drawer-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;border:0;border-bottom:1px solid var(--line);background:var(--white);color:var(--ink);font-size:13px;font-weight:700;position:sticky;top:0;z-index:2}
  .drawer-toggle::before{content:"";width:42px;height:4px;border-radius:999px;background:#b7c4b4;position:absolute;top:8px}
  .keyboard-section{position:fixed;z-index:30;left:0;right:0;bottom:0;max-height:min(74vh,640px);overflow:auto;margin:0;padding:0 12px 16px;border-radius:18px 18px 0 0;box-shadow:0 -16px 40px #0004;transform:translateY(calc(100% - 56px));transition:transform .22s ease}
  body.drawer-open .keyboard-section{transform:none}
  body:has(.keyboard-section){padding-bottom:72px}
  body.focus-mode .keyboard-section{display:none}
  .editor-tools .icon-button{min-width:44px;width:44px;height:44px}
  .international .character-grid{grid-template-columns:repeat(5,minmax(48px,1fr))}
  .key,.mark-button,.keyboard-extras button{min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  .skeleton-line,.key-skeleton span,#editor.pulse{animation:none}
  .keyboard-section{transition:none}
}