:root{--ink:#183449;--muted:#526b7c;--blue:#0876b6;--deep:#075f94;--sky:#edf8ff;--line:#d9e5ed;--white:#fff;--radius:14px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;color:var(--ink);background:#fff;font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--deep);text-underline-offset:3px}a:hover{color:#034d79}button,input,textarea,select{font:inherit}button,a,summary,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #0a86bd;outline-offset:3px}button{border:1px solid #cbdde8;border-radius:7px;background:white;color:var(--ink);padding:9px 14px;min-height:44px;line-height:1.25;transition:background .12s}button:hover{background:#e8f5fe}button.primary,.button.primary{background:var(--blue);border-color:var(--blue);color:white;font-weight:650}button.primary:hover,.button.primary:hover{background:var(--deep)}button[aria-pressed=true]{background:#d5efff;border-color:var(--blue);color:#035786}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(30px,4vw,43px);line-height:1.16;letter-spacing:-1.2px;margin-bottom:14px;font-weight:750}h2{font-size:clamp(23px,2.5vw,29px);line-height:1.3;letter-spacing:-.5px}h3{font-size:19px;line-height:1.45}p{margin-bottom:20px}.container{width:min(1120px,calc(100% - 48px));margin-inline:auto}.site-header{border-bottom:1px solid var(--line);background:#fff}.header-inner{width:min(1200px,calc(100% - 48px));margin:auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;flex-shrink:0}.brand img{width:284px;max-width:100%;height:auto}.main-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:650}.main-nav>a{text-decoration:none;color:var(--ink);padding:12px 0}.main-nav>a[aria-current=page]{color:var(--blue);box-shadow:inset 0 -2px var(--blue)}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px}.nav-dropdown{position:relative}.nav-dropdown summary:after{content:'⌄';color:var(--muted)}.dropdown-panel{position:absolute;z-index:5;right:0;top:48px;width:280px;padding:12px;background:white;box-shadow:0 12px 40px #19364b20;border:1px solid var(--line);border-radius:10px}.dropdown-panel a{display:block;padding:8px 10px;text-decoration:none;border-radius:5px}.dropdown-panel a:hover{background:var(--sky)}.menu-toggle{display:none}.intro{padding:35px 0 24px}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:750;color:#377995;margin-bottom:13px}.eyebrow span{margin:0 9px;color:#9bb8c8}.lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:780px;margin-bottom:0}.breadcrumbs{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);padding-top:23px}.breadcrumbs+.intro{padding-top:23px}.tool{border:1px solid #cbdfea;border-radius:var(--radius);box-shadow:0 8px 28px #244e6e07;overflow:hidden;background:white}.tool-top{padding:15px 22px;background:var(--sky);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;border-bottom:1px solid var(--line)}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#379779;margin-right:9px}.privacy-note{font-size:12px;color:var(--muted)}.mode-bar{display:flex;align-items:center;gap:10px;padding:17px 22px 12px;font-size:12px;flex-wrap:wrap}.mode-bar label{font-weight:700}.mode-bar select{font-size:13px;padding:9px 30px 9px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);max-width:100%}.mode-bar a{margin-left:auto;text-decoration:none}textarea{display:block;resize:vertical;line-height:1.65;border:1px solid #cbdde8;border-radius:8px;padding:16px;max-width:100%;color:#193d55;background:#fff;min-height:145px}textarea::placeholder{color:#758b9a}#russian-text{width:calc(100% - 44px);margin:0 22px;font-size:21px;min-height:155px}.text-meta{display:flex;justify-content:space-between;gap:10px;margin:9px 22px 16px;font-size:11px;color:var(--muted)}.keyboard-wrap{padding:17px 22px 6px;background:#f5f9fc;border-top:1px solid #e7eef3}.key-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px}.letter-key{min-height:51px;padding:5px 8px;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 0 #dce7ee;border-color:#d4e0e9;font-size:21px}.letter-key small{position:absolute;right:5px;top:3px;color:#6b8596;font-size:9px}.letter-key:nth-child(14){grid-column:2}.letter-key:nth-child(25){grid-column:3}.key-actions{display:flex;gap:6px;margin-top:8px}.key-actions button{background:#eaf1f6;font-size:12px;min-width:48px}.key-actions .space-key{flex:1;background:white}.symbols summary{font-size:12px;color:var(--muted);min-height:38px}.symbols summary:before{content:'+'}.symbols[open] summary:before{content:'−'}.symbol-keys{display:flex;flex-wrap:wrap;gap:5px;padding:5px 0 14px}.symbol-keys button{min-width:40px}.toolbar{padding:16px 22px 8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.toolbar button{font-size:13px}.toolbar .clear-button{margin-left:auto;color:#8a4242;border-color:transparent}.tool-hint{padding:6px 22px 17px;font-size:12px;color:var(--muted);margin:0}.tool-benefits{display:flex;justify-content:center;gap:36px;margin:19px 0 10px;color:var(--muted);font-size:12px}.tool-benefits b{color:#39856d;margin-right:5px}.reading-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(0,260px);gap:70px;margin-top:58px}.prose{min-width:0}.prose h2{margin:38px 0 18px}.prose h2:first-child{margin-top:0}.prose h3{margin:26px 0 12px}.prose p,.prose li{color:#3f5869}.prose ul,.prose ol{padding-left:23px;margin-bottom:23px}.prose li{padding:3px 0}.prose strong{color:var(--ink);font-weight:650}.prose .callout,.callout{border-left:3px solid #62b5e2;background:var(--sky);border-radius:0 8px 8px 0;padding:18px 22px;margin:24px 0}.callout p:last-child{margin-bottom:0}.guide-aside{padding-top:5px}.aside-card{padding:24px;background:#f4f9fc;border:1px solid #e4edf3;border-radius:12px;margin-bottom:20px;font-size:13px;color:var(--muted)}.aside-card h2{font-size:18px;color:var(--ink);margin:12px 0}.aside-card p{margin-bottom:14px}.mini-icon{display:inline-flex;justify-content:center;align-items:center;font-size:25px;background:#dceffc;color:#0876b6;width:44px;height:44px;border-radius:10px;font-weight:bold}.text-link{font-weight:650;text-decoration:none}.prose details{border-top:1px solid var(--line);padding:7px 0}.prose details:last-child{border-bottom:1px solid var(--line)}.prose details summary{font-weight:650;justify-content:space-between}.prose details summary:after{content:'+';color:var(--blue);padding-left:16px}.prose details[open] summary:after{content:'−'}.prose details p{font-size:15px;margin:7px 0 15px}.related{border-top:1px solid var(--line);margin-top:50px;padding-top:34px}.related h2{font-size:25px}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.related-card{display:flex;flex-direction:column;position:relative;border:1px solid var(--line);border-radius:12px;padding:23px;text-decoration:none;color:var(--ink);transition:background .15s}.related-card:hover{background:var(--sky)}.related-card strong{font-size:17px;margin:14px 0 7px}.related-card>span:not(.card-symbol):not(.arrow){font-size:13px;color:var(--muted)}.card-symbol{font-size:22px;color:var(--blue);font-weight:650}.arrow{position:absolute;right:20px;top:23px;color:#7695a8}.share-section{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:36px 0 45px;padding-top:12px}.share-section>span{font-size:12px;color:var(--muted);margin-right:6px}.share-section button,.share-section a{display:inline-flex;align-items:center;gap:6px;font-size:12px;text-decoration:none;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:6px}.share-section svg{width:16px;height:16px;fill:currentColor}.site-footer{background:#f4f8fb;border-top:1px solid var(--line);margin-top:50px}.footer-grid{padding-top:45px;padding-bottom:34px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;font-size:12px}.footer-grid h2{font-size:13px;letter-spacing:0;margin-bottom:16px}.footer-grid>div>a{display:block;margin:9px 0;color:var(--muted);text-decoration:none}.footer-brand img{display:block;margin-bottom:12px}.footer-brand strong{display:block;font-size:15px}.footer-brand p{max-width:220px;color:var(--muted);margin-top:10px}.footer-bottom{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:23px;font-size:11px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:10px;top:-100px;z-index:20;background:white;padding:12px}.skip-link:focus{top:10px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#173d53;color:white;padding:12px 22px;border-radius:9px;max-width:calc(100% - 24px);box-shadow:0 4px 22px #173d5330;z-index:30;font-size:14px}.toast:empty{display:none}.converter-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px}.converter-grid label{display:block;font-weight:600;font-size:14px;margin-bottom:8px}.converter textarea{width:100%;font-size:20px}.converter textarea[readonly]{background:#f7fbfe}.converter small{color:var(--muted);font-size:12px}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}th{background:var(--sky);color:var(--ink);font-size:12px}td,th{padding:13px 16px;border-bottom:1px solid #e3ecf2}tr:last-child td{border-bottom:0}tbody tr:nth-child(even){background:#fafcfe}td[lang=ru]{font-size:21px}.alphabet-table td:first-child{min-width:92px;font-size:24px;font-weight:650}.alphabet-table button{min-width:44px;padding:6px 9px}.letter-cards{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}.letter-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:center;background:#f6fbff;padding:12px 6px}.letter-card>span{font-size:11px;color:var(--muted)}.letter-pair{display:flex;justify-content:center;gap:4px;margin-bottom:6px}.letter-pair button{font-size:24px;min-width:38px;padding:7px}.contact-box{max-width:760px;padding:25px;border:1px solid var(--line);border-radius:12px;background:#f8fbfe}.contact-box label{display:block;font-size:14px;font-weight:650;margin:17px 0 6px}.contact-box input,.contact-box textarea{width:100%;border:1px solid #c2d5e2;border-radius:6px;padding:12px;background:#fff}.contact-box .field-hint{font-size:12px;color:var(--muted);margin:5px 0}.contact-box button{margin-top:20px}.error{color:#9b2727!important;font-size:13px}.notice{padding:15px;border-radius:8px;background:#e8f5ed;border:1px solid #b3d6c0;margin-bottom:16px}.notice.error{background:#fff1f0;border-color:#ecbfbf}.button{display:inline-block;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:600}.source-note{font-size:12px;color:var(--muted)}.noscript{padding:20px;background:#fff8df}.figure{width:100%;height:auto;border-radius:12px;margin:15px 0 25px}
@media(min-width:850px){.editor-tool #russian-text{min-height:320px}}
@media(max-width:1000px){.main-nav{gap:18px}.brand img{width:250px}.reading-layout{gap:32px;grid-template-columns:minmax(0,1fr) 230px}.letter-cards{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:780px){.container,.header-inner{width:calc(100% - 32px)}.header-inner{min-height:76px;flex-wrap:wrap;gap:0}.brand img{width:240px}.menu-toggle{display:flex;align-items:center;gap:6px;font-size:13px;padding:8px 10px}.main-nav{display:none;width:100%;padding:12px 0 20px;align-items:stretch;gap:0;flex-direction:column}.main-nav.open{display:flex}.main-nav>a{padding:10px}.nav-dropdown summary{padding:10px}.dropdown-panel{position:static;width:100%;box-shadow:none;background:#f5faff}.intro{padding-top:25px}.reading-layout{grid-template-columns:1fr;margin-top:36px}.guide-aside{display:none}.mode-bar a{margin-left:0}.key-grid{grid-template-columns:repeat(11,minmax(0,1fr))}.letter-key:nth-child(14),.letter-key:nth-child(25){grid-column:auto}.letter-key{min-height:48px}.tool-benefits{gap:18px;font-size:11px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.converter-grid{grid-template-columns:1fr}.related-grid{gap:10px}.related-card{padding:17px}.related-card strong{font-size:15px}.letter-cards{grid-template-columns:repeat(5,minmax(0,1fr))}.alphabet-table td,.alphabet-table th{padding:10px}.alphabet-table{font-size:12px}}

/* Shared article sidebar: keeps useful tools close to the content without a wide empty gap. */
.reading-layout{gap:32px}
.aside-tools{border-top:1px solid #d9e6ee}
.aside-tools a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #d9e6ee;color:var(--deep);font-weight:650;text-decoration:none;line-height:1.35}
.aside-tools a:hover{color:var(--blue)}
.aside-tools a span{flex:none}
@media(max-width:520px){.brand img{width:206px}.menu-toggle span{display:none}.eyebrow{font-size:9px;letter-spacing:1.1px}.lead{font-size:15px}.intro{padding-bottom:21px}h1{letter-spacing:-.8px}.tool-top{padding:13px 12px;align-items:flex-start}.tool-top strong{font-size:13px}.privacy-note{font-size:10px;max-width:110px;text-align:right}.mode-bar{padding:13px 12px 10px;gap:7px}.mode-bar select{font-size:12px;flex:1;min-width:0;padding-right:10px}.mode-bar a{width:100%;font-size:11px}#russian-text{width:calc(100% - 24px);margin:0 12px;font-size:19px;min-height:150px}.text-meta{margin:8px 12px 13px;font-size:10px}.keyboard-wrap{padding:13px 10px 3px}.key-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.letter-key{min-height:48px}.key-actions{flex-wrap:wrap}.key-actions .space-key{order:1;flex-basis:100%}.key-actions button{flex:1;padding:8px 4px;min-width:0}.key-actions span{font-size:10px}.toolbar{padding:13px 12px 6px;gap:6px}.toolbar button{font-size:11px;padding:8px 10px}.toolbar .primary{flex-basis:100%;font-size:14px}.toolbar .clear-button{margin-left:0}.tool-hint{padding:8px 12px 14px;font-size:11px}.tool-benefits{justify-content:space-between;gap:5px;flex-wrap:wrap;font-size:10px}.related-grid{grid-template-columns:1fr}.related-card{padding:20px 20px 20px 67px;min-height:100px}.related-card .card-symbol{position:absolute;left:18px;top:23px}.related-card strong{margin-top:0;padding-right:20px}.letter-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.letter-pair button{min-width:32px;padding:6px}.alphabet-table th:nth-child(3),.alphabet-table td:nth-child(3){display:none}.alphabet-table td:first-child{min-width:65px;font-size:20px}.alphabet-table td,.alphabet-table th{padding:9px 7px}.alphabet-table td:nth-child(4){font-size:12px}.share-section{gap:7px}.share-section>span{width:100%}.footer-grid{gap:20px;font-size:11px}.footer-grid .footer-brand{grid-column:1/-1}.footer-brand p{max-width:100%}.footer-grid{grid-template-columns:1fr 1fr}.contact-box{padding:16px}.converter-grid{padding:14px}.prose{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media(max-width:340px){.key-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.brand img{width:196px}.tool-benefits{font-size:9px}.mode-bar label{width:100%}}

/* ===== UI refinement v2: navigation, content width, copy controls ===== */
.ui-icon{width:18px;height:18px;display:inline-block;vertical-align:-3px;flex:none}
.site-header{position:relative;z-index:20;background:rgba(255,255,255,.98);box-shadow:0 1px 0 rgba(16,59,82,.04)}
.header-inner{min-height:82px}
.main-nav{gap:8px;font-size:13px}
.main-nav .nav-item,.nav-dropdown>summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;border-radius:9px;text-decoration:none;color:var(--ink);font-weight:700;transition:background .15s,color .15s}
.main-nav .nav-item:hover,.nav-dropdown>summary:hover{background:#f1f8fd;color:var(--deep)}
.main-nav .nav-item[aria-current=page]{background:#eaf6fd;color:var(--blue);box-shadow:none}
.main-nav .nav-item[aria-current=page] .ui-icon{color:var(--blue)}
.nav-dropdown.is-current>summary{background:#eaf6fd;color:var(--blue)}
.nav-dropdown summary:after{content:'›';font-size:17px;line-height:1;transform:rotate(90deg);transition:transform .15s;color:#6b8393;margin-left:1px}
.nav-dropdown[open] summary:after{transform:rotate(-90deg)}
.dropdown-panel{top:53px;width:340px;padding:10px;border-radius:14px;box-shadow:0 18px 48px rgba(25,54,75,.16)}
.dropdown-heading{padding:7px 10px 9px;font-size:10px;letter-spacing:1.25px;text-transform:uppercase;color:#6b8393;font-weight:800}
.dropdown-panel a{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;color:var(--ink)}
.dropdown-panel a:hover,.dropdown-panel a[aria-current=page]{background:#edf8ff;color:var(--deep)}
.dropdown-panel a strong{display:block;font-size:13px;line-height:1.25}
.dropdown-panel a small{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:500;line-height:1.35}
.dropdown-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#dff2fd;color:#0876b6;font-size:13px;font-weight:800}
.menu-lines{width:18px;display:grid;gap:3px}.menu-lines i{display:block;height:2px;border-radius:2px;background:currentColor}

.article-main{width:min(920px,100%);margin:18px 0 0}
.article-main h2{scroll-margin-top:24px}
.article-main>h2:first-child{margin-top:0}
.article-main p{max-width:860px}
.article-main ul,.article-main ol{max-width:860px}
.article-main .figure{max-width:860px}
.article-main .callout{max-width:860px}
.article-main .table-wrap{width:100%}
.article-main .figure{display:block;margin-left:auto;margin-right:auto}

.toolbar button{display:inline-flex;align-items:center;gap:7px}
.toolbar button .ui-icon{width:16px;height:16px}
.copy-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;color:var(--deep);font-size:12px;font-weight:700;min-width:105px}
.copy-button .ui-icon{width:16px;height:16px}
.alphabet-table th:last-child,.alphabet-table td:last-child{width:126px;text-align:center}
.letter-pair button{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.letter-copy-mark{position:absolute;right:3px;top:3px;color:#7d95a4;opacity:.75;line-height:1}
.letter-copy-mark .ui-icon{width:11px;height:11px;display:block}
.letter-pair button:hover .letter-copy-mark{color:var(--blue);opacity:1}

.related{margin-top:56px}
.related-card{box-shadow:0 4px 16px rgba(31,74,101,.035)}
.related-card:hover{border-color:#bddbec;transform:translateY(-1px)}

@media(max-width:1000px){
  .main-nav{gap:4px}.main-nav .nav-item,.nav-dropdown>summary{padding-inline:9px}.brand img{width:245px}
}
@media(max-width:780px){
  .site-header{position:relative}
  .header-inner{padding:10px 0;min-height:72px}
  .menu-toggle{display:flex;align-items:center;gap:8px;border-color:#d7e5ee;background:#f8fbfd;font-weight:700}
  .main-nav{display:none;width:100%;padding:10px 0 8px;align-items:stretch;gap:5px;flex-direction:column}
  .main-nav.open{display:flex}
  .main-nav .nav-item,.nav-dropdown>summary{padding:10px 12px;min-height:46px}
  .dropdown-panel{position:static;width:100%;margin-top:4px;box-shadow:none;border-radius:10px;background:#f8fbfd;padding:8px}
  .dropdown-panel a{grid-template-columns:32px 1fr}
  .article-main{margin-top:18px}
}
@media(max-width:520px){
  .copy-button{min-width:44px;width:44px;padding:7px}
  .copy-button span{display:none}
  .alphabet-table th:last-child,.alphabet-table td:last-child{width:58px}
  .alphabet-table td:nth-child(4){min-width:180px}
  .toolbar button{justify-content:center}
}