:root { --bg:#030914; --bg-deep:#01050d; --surface:#081425; --surface-raised:#0b192b; --surface-soft:#0b1727; --border:#1a3452; --border-soft:#14283f; --text:#f5f8ff; --muted:#9cacc4; --cyan:#22c4ff; --blue:#1683ff; --green:#35e47a; --purple:#a66cff; --header:rgba(3,9,20,.88); --key-top:#172334; --key-bottom:#0b121e; --base-font-size:16px; --font-scale:1; --keyboard-scale:var(--font-scale); --key-row-height:48px; } :root[data-theme='light'] { --bg:#edf5ff; --bg-deep:#dcecff; --surface:#fff; --surface-raised:#f5f9ff; --surface-soft:#eef5fc; --border:#78a6ce; --border-soft:#b8d0e5; --text:#09182d; --muted:#41576f; --cyan:#006b91; --blue:#005fc8; --green:#087a36; --purple:#6f3fb0; --header:rgba(245,250,255,.92); --key-top:#fff; --key-bottom:#dfeaf5; } :root[data-font-size='medium'] { --base-font-size:18px; --font-scale:1.125; } :root[data-font-size='large'] { --base-font-size:20px; --font-scale:1.25; } :root[data-letter-spacing='medium'] { --reading-letter-spacing:.06em; } :root[data-letter-spacing='large'] { --reading-letter-spacing:.12em; } :root[data-line-spacing='medium'] { --reading-line-height:1.75; --key-row-height:54px; } :root[data-line-spacing='large'] { --reading-line-height:2; --key-row-height:60px; } :root[data-contrast='high'] { --bg:#000; --bg-deep:#000; --surface:#000; --surface-raised:#000; --surface-soft:#000; --border:#ffff00; --border-soft:#ffff00; --text:#ffff00; --muted:#ffff00; --cyan:#ffff00; --blue:#ffff00; --green:#ffff00; --purple:#ffff00; --header:#000; --key-top:#000; --key-bottom:#000; } * { box-sizing:border-box; } html { scroll-behavior:smooth; font-size:var(--base-font-size); } body { margin:0; min-width:0; min-height:100vh; background:radial-gradient(circle at 18% 4%,rgba(15,114,215,.13),transparent 26rem),radial-gradient(circle at 84% 32%,rgba(52,43,177,.09),transparent 30rem),linear-gradient(180deg,var(--bg),var(--bg-deep)); color:var(--text); font-family:'Lato',Arial,Helvetica,sans-serif; font-size:1rem; line-height:1.5; transition:background-color .25s ease,color .25s ease; } button,input,a { font:inherit; } button { color:inherit; } a { color:inherit; text-decoration:none; } button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; } .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; } .skip-link { position:fixed; left:1rem; top:-5rem; z-index:1000; padding:.75rem 1rem; border-radius:.6rem; background:var(--text); color:var(--bg); font-weight:900; } .skip-link:focus { top:1rem; } .material-symbols-rounded { font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; font-size:1.35rem; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; } .site-header { position:sticky; top:0; z-index:100; border-bottom:1px solid rgba(75,112,151,.28); background:var(--header); backdrop-filter:blur(18px); } .header-inner { width:min(100% - 2.5rem,1338px); height:76px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; } .brand { display:inline-flex; align-items:center; gap:.8rem; flex:0 0 auto; } .brand strong { font-size:1.35rem; letter-spacing:-.025em; } .brand strong span { color:var(--cyan); } .brand-logo-mark { display:block; width:68px; height:auto; flex:none; object-fit:contain; } .desktop-nav { display:flex; height:100%; align-items:center; gap:clamp(1.1rem,2.5vw,2.6rem); } .desktop-nav a { position:relative; display:grid; place-items:center; height:100%; color:var(--muted); font-weight:700; white-space:nowrap; } .desktop-nav a:hover,.desktop-nav a.active { color:var(--text); } .desktop-nav a.active::after { content:''; position:absolute; bottom:-1px; left:18%; right:18%; height:2px; border-radius:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); } .header-actions { display:flex; align-items:center; gap:.55rem; } .icon-button,.menu-button { width:43px; height:43px; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; background:linear-gradient(160deg,var(--surface-raised),var(--surface)); cursor:pointer; transition:transform .18s ease,border-color .18s ease,color .18s ease; } .icon-button:hover,.menu-button:hover { color:var(--cyan); border-color:var(--cyan); transform:translateY(-1px); } .menu-button,.mobile-nav { display:none; } .hero-section { position:relative; overflow:hidden; padding:18px 0 54px; } #tester { scroll-margin-top:88px; } .hero-glow { position:absolute; pointer-events:none; border-radius:999px; filter:blur(80px); opacity:.18; } .hero-glow-one { width:420px; height:270px; top:70px; left:-170px; background:var(--blue); } .hero-glow-two { width:380px; height:300px; top:340px; right:-190px; background:var(--purple); } .page-shell { width:min(100% - 2.5rem,1338px); margin:0 auto; position:relative; z-index:1; } .tester-card { border:1px solid rgba(25,155,255,.76); border-radius:14px; background:linear-gradient(145deg,rgba(8,20,37,.94),rgba(3,11,23,.94)); box-shadow:0 0 30px rgba(0,130,255,.1),inset 0 1px 0 rgba(255,255,255,.035); padding:clamp(1.15rem,2vw,2rem); } :root[data-theme='light'] .tester-card { background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(235,246,255,.97)); } .tester-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:1.1rem; } .tester-actions { display:flex; align-items:center; gap:.65rem; } .test-status { display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.72rem; font-weight:700; white-space:nowrap; } .test-status i { width:7px; height:7px; border-radius:50%; background:#64748b; } .test-status.is-active { color:var(--green); } .test-status.is-active i { background:var(--green); box-shadow:0 0 9px var(--green); } .eyebrow { display:inline-flex; align-items:center; gap:.5rem; color:var(--cyan); font-size:.73rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; } .pulse-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); } h1 { margin:.48rem 0 0; max-width:940px; font-size:clamp(1.75rem,calc(2.6vw * var(--font-scale)),2.35rem); line-height:1.08; letter-spacing:-.035em; font-weight:900; } h1 span { background:linear-gradient(90deg,var(--cyan),var(--green)); color:transparent; background-clip:text; -webkit-background-clip:text; } .reset-button { display:inline-flex; align-items:center; gap:.5rem; padding:.72rem 1rem; white-space:nowrap; border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); font-size:.85rem; font-weight:700; cursor:pointer; } .reset-button:hover:not(:disabled) { border-color:var(--cyan); color:var(--cyan); } .reset-button:disabled { opacity:.45; cursor:not-allowed; } .tester-features { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:1.15rem; } .tester-features p { margin:0; display:flex; align-items:center; gap:.7rem; color:var(--muted); } .tester-features p>.material-symbols-rounded { color:#70caff; font-size:1.45rem; } .tester-features p span:last-child { display:flex; flex-direction:column; } .tester-features strong { color:var(--text); font-size:.82rem; } .tester-features small { font-size:.72rem; } .keyboard-frame { position:relative; border:1px solid #5f7894; border-radius:13px; background:linear-gradient(145deg,rgba(21,34,50,.96),rgba(8,17,30,.98)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 35px rgba(0,0,0,.3); padding:10px; } .keyboard-frame.is-active { border-color:var(--cyan); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 35px rgba(0,0,0,.3),0 0 20px color-mix(in srgb,var(--cyan) 18%,transparent); } :root[data-theme='light'] .keyboard-frame { background:linear-gradient(145deg,#eaf4fc,#d9e8f5); } .keyboard-scroll { width:100%; overflow-x:auto; overflow-y:hidden; padding:0 0 7px; scrollbar-width:thin; scrollbar-color:var(--blue) rgba(17,37,60,.6); } .keyboard-device { width:calc(1210px * var(--keyboard-scale)); min-height:calc(332px * var(--keyboard-scale)); margin:0 auto; padding:calc(8px * var(--keyboard-scale)); } .keyboard-top-row,.keyboard-body { display:flex; gap:calc(24px * var(--keyboard-scale)); } .keyboard-top-row { align-items:center; margin-bottom:calc(14px * var(--keyboard-scale)); } .function-row { width:calc(778px * var(--keyboard-scale)); display:flex; align-items:center; gap:calc(6px * var(--keyboard-scale)); } .system-row { width:calc(156px * var(--keyboard-scale)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(6px * var(--keyboard-scale)); } .lock-lights { width:calc(204px * var(--keyboard-scale)); display:flex; align-items:center; justify-content:center; gap:calc(20px * var(--keyboard-scale)); } .lock-lights span { display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--muted); font-size:.5rem; font-weight:900; } .lock-lights i { width:11px; height:5px; border:1px solid #8292a7; border-radius:5px; background:#222d3d; } .lock-lights span.on { color:var(--green); } .lock-lights span.on i { border-color:var(--green); background:var(--green); box-shadow:0 0 9px var(--green); } .key-row { display:flex; gap:calc(6px * var(--keyboard-scale)); margin-bottom:calc(6px * var(--keyboard-scale)); } .main-keys { width:calc(778px * var(--keyboard-scale)); } .navigation-zone { width:calc(156px * var(--keyboard-scale)); display:flex; flex-direction:column; justify-content:space-between; } .navigation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(6px * var(--keyboard-scale)); } .arrow-grid { width:calc(156px * var(--keyboard-scale)); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,calc(var(--key-row-height) * var(--keyboard-scale))); gap:calc(6px * var(--keyboard-scale)); } .numpad-grid { width:calc(204px * var(--keyboard-scale)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(5,calc(var(--key-row-height) * var(--keyboard-scale))); gap:calc(6px * var(--keyboard-scale)); } .key-cap { --key-width:46px; position:relative; flex:0 0 calc(var(--key-width) * var(--keyboard-scale)); width:calc(var(--key-width) * var(--keyboard-scale)); height:calc(var(--key-row-height) * var(--keyboard-scale)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; overflow:hidden; border:1px solid #27384c; border-radius:6px; background:linear-gradient(145deg,var(--key-top),var(--key-bottom)); box-shadow:0 4px 0 #02060c,0 6px 9px rgba(0,0,0,.34),inset 0 1px 1px rgba(255,255,255,.12); color:var(--text); font-family:'Lato',sans-serif; font-size:.625rem; font-weight:900; text-transform:uppercase; white-space:nowrap; transition:transform .08s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease; user-select:none; } .key-cap.has-gap { margin-right:calc(20px * var(--keyboard-scale)); } .key-cap small { font-size:.5rem; line-height:1; color:var(--muted); } .key-cap .space-mark { display:block; width:30px; height:3px; border-radius:3px; background:var(--cyan); box-shadow:0 0 8px rgba(34,196,255,.6); } .key-cap.is-tested { border-color:var(--green); color:var(--green); box-shadow:0 4px 0 #04150b,0 0 10px rgba(53,228,122,.18),inset 0 0 12px rgba(53,228,122,.08); } .key-cap.is-pressed { z-index:2; transform:translateY(3px); border-color:#2dc8ff; color:#fff; background:linear-gradient(145deg,#1768b0,#073e7d); box-shadow:0 1px 0 #001c38,0 0 17px rgba(17,159,255,.92),inset 0 0 15px rgba(49,215,255,.42); } .key-cap.tone-purple.is-pressed { border-color:#bd73ff; background:linear-gradient(145deg,#7136a7,#33145b); box-shadow:0 1px 0 #170026,0 0 18px rgba(171,74,255,.95),inset 0 0 15px rgba(213,139,255,.4); } .key-cap.tone-green.is-pressed { border-color:#49f58c; background:linear-gradient(145deg,#168f4d,#064624); box-shadow:0 1px 0 #002910,0 0 18px rgba(53,228,122,.9),inset 0 0 15px rgba(105,255,159,.38); } .key-cap.tone-gold.is-pressed { border-color:#ffd85b; background:linear-gradient(145deg,#a36d12,#543204); box-shadow:0 1px 0 #2e1900,0 0 18px rgba(255,190,45,.92),inset 0 0 15px rgba(255,230,139,.38); } .key-cap.tone-blue.is-pressed { border-color:#6c8eff; background:linear-gradient(145deg,#344db0,#142257); box-shadow:0 1px 0 #080f32,0 0 18px rgba(73,108,255,.95),inset 0 0 15px rgba(125,160,255,.4); } .key-check { position:absolute; top:3px; right:4px; color:var(--green); font-size:.4375rem; } .system-row .key-cap,.navigation-grid .key-cap,.arrow-grid .key-cap,.numpad-grid .key-cap { width:100%; min-width:0; } .numpad-grid>div>.key-cap,.arrow-grid>div>.key-cap { height:100%; } .scroll-hint { display:none; align-items:center; justify-content:center; gap:.4rem; margin:.65rem 0 0; color:var(--muted); font-size:.75rem; } .stats-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:12px; } .stats-grid article { min-width:0; display:flex; align-items:center; gap:.8rem; min-height:76px; padding:.85rem 1rem; border:1px solid var(--border-soft); border-radius:10px; background:rgba(8,20,37,.68); } :root[data-theme='light'] .stats-grid article,:root[data-theme='light'] .history-strip { background:rgba(255,255,255,.66); } .stats-grid article>div { min-width:0; display:flex; flex-direction:column; } .stats-grid small { color:var(--muted); font-size:.72rem; white-space:nowrap; } .stats-grid strong { overflow:hidden; color:var(--text); font-size:1.25rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; } .stats-grid em { color:var(--muted); font-size:.85rem; font-style:normal; } .stat-icon { font-size:1.7rem; } .stat-icon.cyan,.accent-cyan { color:var(--cyan); } .stat-icon.blue { color:var(--blue); } .stat-icon.purple { color:var(--purple); } .stat-icon.green { color:var(--green); } .stat-icon.teal { color:var(--cyan); } .history-strip { margin-top:10px; display:flex; align-items:center; gap:1rem; min-height:62px; padding:.7rem 1rem; border:1px solid var(--border-soft); border-radius:10px; background:rgba(8,20,37,.68); } .history-title { flex:0 0 auto; display:flex; align-items:center; gap:.55rem; color:var(--muted); font-size:.78rem; } .history-title .material-symbols-rounded { color:var(--purple); } .history-items { display:flex; align-items:center; gap:.4rem; min-width:0; overflow:hidden; } .history-items span { flex:0 0 auto; min-width:38px; padding:.3rem .55rem; border:1px solid var(--green); border-radius:5px; background:rgba(53,228,122,.07); color:var(--green); font-size:.72rem; font-weight:700; text-align:center; } .history-items small { color:var(--muted); font-size:.75rem; } .feature-section { padding:0 0 42px; } .feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .feature-card { display:flex; gap:1rem; min-height:134px; padding:1.25rem; border:1px solid var(--border-soft); border-radius:12px; background:linear-gradient(145deg,rgba(11,25,43,.84),rgba(6,16,29,.84)); box-shadow:inset 0 1px 0 rgba(255,255,255,.025); } :root[data-theme='light'] .feature-card { background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(235,245,255,.9)); } .feature-card h2 { margin:.05rem 0 .45rem; font-size:1rem; line-height:1.25; } .feature-card p { margin:0; color:var(--muted); font-size:.82rem; } .feature-icon { flex:0 0 auto; width:43px; height:43px; display:grid; place-items:center; border:1px solid currentColor; border-radius:10px; background:rgba(76,134,255,.08); font-size:1.55rem; box-shadow:0 0 15px color-mix(in srgb,currentColor 20%,transparent); } .feature-icon.purple { color:var(--purple); } .feature-icon.blue { color:var(--blue); } .feature-icon.cyan { color:var(--cyan); } .feature-icon.green { color:var(--green); } .feature-icon.gold { color:#d19800; } .content-section { scroll-margin-top:78px; padding:76px 0; border-top:1px solid rgba(52,88,124,.18); } .section-heading { max-width:720px; margin:0 auto 2.2rem; text-align:center; } .section-kicker { display:inline-block; margin-bottom:.55rem; color:var(--cyan); font-size:.74rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; } .section-heading h2,.guide-main h2 { margin:0; font-size:clamp(1.8rem,calc(3vw * var(--font-scale)),2.6rem); line-height:1.1; letter-spacing:-.03em; } .section-heading>p { max-width:650px; margin:.85rem auto 0; color:var(--muted); } .steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .step-card { position:relative; overflow:hidden; min-height:250px; padding:1.6rem; border:1px solid var(--border); border-radius:13px; background:linear-gradient(145deg,var(--surface-raised),var(--surface)); } .step-card::after { content:''; position:absolute; width:110px; height:110px; right:-50px; bottom:-55px; border-radius:50%; background:var(--blue); filter:blur(42px); opacity:.14; } .step-card>.material-symbols-rounded { width:52px; height:52px; display:grid; place-items:center; margin:1.2rem 0; border:1px solid rgba(34,196,255,.55); border-radius:12px; color:var(--cyan); background:rgba(34,196,255,.07); font-size:1.8rem; } .step-number { position:absolute; top:1.3rem; right:1.4rem; color:rgba(110,167,215,.2); font-size:2.5rem; font-weight:900; line-height:1; } .step-card h3 { margin:0 0 .55rem; font-size:1.08rem; } .step-card p { margin:0; color:var(--muted); font-size:.9rem; } .tool-preview-card { display:flex; flex-direction:column; min-width:0; } .tool-preview-card::after { display:none; } .tool-artwork { flex:none; aspect-ratio:3/2; margin:-1.6rem -1.6rem 1.5rem; overflow:hidden; border-bottom:1px solid var(--border-soft); background:#081425; } .tool-artwork img { display:block; width:100%; height:100%; object-fit:cover; } .tool-preview-card .text-link { align-self:flex-start; margin-top:auto; padding-top:1.1rem; } :root[data-contrast='high'] .tool-artwork { display:none; } .privacy-note { display:flex; align-items:center; gap:1.1rem; margin-top:16px; padding:1.15rem 1.4rem; border:1px solid rgba(53,228,122,.35); border-radius:12px; background:rgba(53,228,122,.055); } .privacy-note>.material-symbols-rounded { flex:0 0 auto; color:var(--green); font-size:2rem; } .privacy-note strong { color:var(--green); } .privacy-note p { margin:.2rem 0 0; color:var(--muted); font-size:.85rem; } .guide-section { background:linear-gradient(90deg,rgba(8,24,43,.45),transparent 65%); } :root[data-theme='light'] .guide-section { background:linear-gradient(90deg,rgba(15,114,215,.035),transparent 65%); } .guide-main>h2 { margin-bottom:1.25rem; } .guide-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.65fr); gap:clamp(2rem,6vw,5rem); align-items:center; } .guide-lead { max-width:720px; margin:1rem 0 2rem; color:var(--muted); } .guide-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; } .guide-list li { display:flex; gap:.85rem; padding:1rem; border:1px solid var(--border-soft); border-radius:10px; background:rgba(8,20,37,.58); } :root[data-theme='light'] .guide-list li { background:rgba(255,255,255,.62); } .guide-list li>span { flex:0 0 auto; width:2rem; height:2rem; display:grid; place-items:center; border:1px solid var(--cyan); border-radius:50%; color:var(--cyan); font-size:.85rem; font-weight:900; } .guide-list strong { font-size:.9rem; } .guide-list p { margin:.3rem 0 0; color:var(--muted); font-size:.95rem; line-height:1.65; } .troubleshoot-card { padding:1.6rem; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,var(--surface-raised),var(--surface)); box-shadow:0 20px 60px rgba(0,0,0,.17); } .troubleshoot-card h3 { margin:1rem 0; font-size:1.3rem; } .troubleshoot-card ul { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; } .troubleshoot-card li { display:flex; align-items:flex-start; gap:.55rem; color:var(--muted); font-size:.85rem; } .troubleshoot-card li .material-symbols-rounded { color:var(--green); font-size:1rem; margin-top:.16rem; } .troubleshoot-card>p { margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--border-soft); color:var(--muted); font-size:.78rem; } .troubleshoot-card>p strong { color:#ffd052; } .faq-list { display:grid; gap:10px; } .faq-list details { border:1px solid var(--border-soft); border-radius:11px; background:rgba(8,20,37,.66); } :root[data-theme='light'] .faq-list details { background:rgba(255,255,255,.68); } .faq-list summary { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; cursor:pointer; list-style:none; font-weight:700; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary .material-symbols-rounded { color:var(--cyan); transition:transform .2s ease; } .faq-list details[open] summary .material-symbols-rounded { transform:rotate(45deg); } .faq-list details p { margin:0; padding:0 1.2rem 1.2rem; color:var(--muted); font-size:.9rem; } .site-partners { padding:0 0 2.5rem; } .partner-logos { --partner-width:calc((100% - 1rem)/2); display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:1rem; list-style:none; margin:0; padding:0; } .partner-logos>li { display:flex; flex:0 1 var(--partner-width); width:var(--partner-width); max-width:var(--partner-width); min-width:0; } .partner-logo-link { display:flex; align-items:center; justify-content:center; width:100%; min-height:112px; height:100%; padding:1rem; border:1px solid var(--border); border-radius:.75rem; background:var(--surface-raised); } .partner-logo-link:hover { border-color:var(--cyan); } .partner-logo-link img { display:block; width:auto; height:auto; max-width:100%; max-height:80px; object-fit:contain; } @media (min-width:640px) { .partner-logos { --partner-width:calc((100% - 2rem)/3); } } @media (min-width:900px) { .partner-logos { --partner-width:calc((100% - 3rem)/4); } } @media (min-width:1180px) { .partner-logos { --partner-width:calc((100% - 5rem)/6); } } .site-footer { border-top:1px solid var(--border-soft); background:rgba(2,7,15,.68); padding:44px 0; } :root[data-theme='light'] .site-footer { background:rgba(221,237,252,.7); } .footer-grid { display:grid; grid-template-columns:1.4fr .7fr .8fr; gap:3rem; } .footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:1rem; min-width:0; } .footer-brand .brand { gap:1rem; } .footer-brand .brand-logo-mark { width:76px; } .footer-brand p { margin:0; max-width:430px; color:var(--muted); font-size:.85rem; } .footer-grid nav,.footer-info { display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; } .footer-grid nav>strong,.footer-info>strong { margin-bottom:.35rem; color:#7dc9ff; } .footer-grid nav a,.footer-info p { margin:0; color:var(--muted); font-size:.83rem; } .footer-grid nav a:hover { color:var(--cyan); } .floating-button { position:fixed; z-index:120; width:50px; height:50px; display:grid; place-items:center; border:1px solid rgba(34,196,255,.72); border-radius:50%; background:linear-gradient(145deg,var(--surface-raised),var(--surface)); color:var(--cyan); box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 18px rgba(34,196,255,.12); cursor:pointer; } .back-to-top { right:1rem; bottom:1rem; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .2s ease,transform .2s ease,visibility .2s; } .back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); } .a11y-panel { border:1px solid var(--border); border-radius:16px; background:linear-gradient(150deg,var(--surface-raised),var(--surface)); box-shadow:0 30px 90px rgba(0,0,0,.5); overscroll-behavior:contain; scrollbar-gutter:stable; } .a11y-panel>header { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:1rem clamp(.5rem,3vw,1.25rem); border-bottom:1px solid var(--border-soft); background:var(--surface-raised); } .a11y-panel>header>div { min-width:0; display:flex; align-items:center; gap:.65rem; } .a11y-panel h2 { margin:0; min-width:0; font-size:1.2rem; overflow-wrap:anywhere; } .a11y-panel>header>div>.material-symbols-rounded { color:var(--cyan); } .a11y-panel>header button { flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border-soft); border-radius:9px; background:var(--surface-soft); cursor:pointer; } .a11y-group { min-width:0; margin:1.1rem clamp(.5rem,3vw,1.25rem) 0; padding:0; border:0; } .a11y-group>legend,.a11y-group>strong { display:block; width:100%; padding:0; margin:0 0 .65rem; color:var(--muted); font-size:.82rem; line-height:1.4; font-weight:900; } .a11y-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .a11y-option { position:relative; min-width:0; cursor:pointer; } .a11y-choice { position:absolute; inset:0; z-index:1; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; } .a11y-option>span { min-height:44px; height:100%; display:grid; place-items:center; padding:.5rem .15rem; border:2px solid var(--border-soft); border-radius:9px; background:var(--surface-soft); font-size:.75rem; font-weight:700; text-align:center; overflow-wrap:anywhere; } .a11y-choice:checked+span { border-color:var(--cyan); color:var(--cyan); background:color-mix(in srgb,var(--cyan) 9%,var(--surface)); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.2em; } .a11y-choice:focus-visible { outline:0; } .a11y-choice:focus-visible+span { outline:3px solid var(--cyan); outline-offset:3px; } .a11y-option:hover>span { border-color:var(--cyan); } .setting-row { width:100%; min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:.65rem; padding:.6rem .7rem; border:1px solid var(--border-soft); border-radius:9px; background:var(--surface-soft); cursor:pointer; } .setting-row+.setting-row,.setting-hint+.setting-row { margin-top:.65rem; } .setting-label { min-width:0; display:flex; align-items:center; gap:.55rem; font-size:.875rem; } .setting-label>.material-symbols-rounded { flex:none; color:var(--cyan); } .setting-hint { margin:.45rem .1rem 0; color:var(--muted); font-size:.73rem; } .a11y-switch { appearance:none; position:relative; flex:none; width:2.75rem; height:1.6rem; margin:0; border:2px solid var(--muted); border-radius:999px; background:var(--surface-raised); cursor:pointer; transition:background-color .18s ease,border-color .18s ease; } .a11y-switch::after { content:''; position:absolute; width:1rem; height:1rem; left:.18rem; top:50%; border-radius:50%; background:var(--muted); transform:translateY(-50%); transition:left .18s ease,background-color .18s ease; } .a11y-switch:checked { border-color:var(--blue); background:var(--blue); } .a11y-switch:checked::after { left:calc(100% - 1.18rem); background:#fff; } .a11y-note { margin:1.1rem clamp(.5rem,3vw,1.25rem) 1.25rem; color:var(--muted); font-size:.75rem; } @media (max-width:1100px) { .feature-grid { grid-template-columns:1fr 1fr; } .guide-layout { grid-template-columns:1fr; } .troubleshoot-card { display:grid; grid-template-columns:auto 1fr; column-gap:1rem; } .troubleshoot-card .feature-icon { grid-row:1/3; } .troubleshoot-card h3 { margin:.35rem 0 1rem; } .troubleshoot-card ul,.troubleshoot-card>p { grid-column:1/-1; } } @media (max-width:1000px) { .desktop-nav { gap:1.25rem; } .tester-features { grid-template-columns:1fr 1fr; } .tester-features p:last-child { display:none; } .stats-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:820px) { .header-inner { width:min(100% - 1.5rem,1338px); height:68px; } .brand strong { font-size:1.1rem; } .site-header .brand-logo-mark { width:56px; } .desktop-nav { display:none; } .menu-button { display:grid; } .mobile-nav.is-open { display:flex; flex-direction:column; padding:.35rem .75rem .85rem; border-top:1px solid var(--border-soft); } .mobile-nav a { padding:.8rem 1rem; border-radius:8px; color:var(--muted); font-weight:700; } .mobile-nav a:hover { color:var(--cyan); background:var(--surface); } .page-shell { width:min(100% - 1.25rem,1338px); } .tester-heading { align-items:flex-start; } .reset-button { padding:.65rem; } .keyboard-frame { margin-left:-.4rem; margin-right:-.4rem; } .scroll-hint { display:flex; } .stats-grid { grid-template-columns:repeat(2,1fr); } .stats-grid article:last-child { grid-column:span 2; } .steps-grid { grid-template-columns:1fr; } .step-card { min-height:0; } .guide-list { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } } @media (max-width:560px) { .hero-section { padding-top:10px; } .tester-card { padding:1rem .75rem; } .tester-heading { display:grid; grid-template-columns:1fr; gap:.75rem; } .heading-copy,.tester-actions { grid-column:1/-1; } .tester-actions { justify-content:space-between; } .eyebrow { font-size:.65rem; } h1 { font-size:1.75rem; } .reset-button { width:42px; height:42px; justify-content:center; font-size:0; } .tester-features { grid-template-columns:1fr; } .tester-features p:nth-child(2),.tester-features p:nth-child(3) { display:none; } .stats-grid { grid-template-columns:1fr 1fr; } .stats-grid article { min-height:68px; padding:.7rem; } .stats-grid article:nth-child(1),.stats-grid article:last-child { grid-column:span 2; } .history-strip { align-items:flex-start; flex-direction:column; gap:.55rem; } .feature-grid { grid-template-columns:1fr; } .content-section { padding:56px 0; } .privacy-note { align-items:flex-start; } .footer-grid { grid-template-columns:1fr; } .footer-brand { grid-column:auto; } .back-to-top { right:.7rem; bottom:.7rem; } } @media (max-width:560px) { .site-header .header-inner { gap:.4rem; } .site-header .brand { gap:.35rem; } .site-header .brand strong { font-size:.9rem; white-space:nowrap; } .site-header .brand-logo-mark { width:44px; } .site-header .header-actions { gap:4px; flex-shrink:0; } .site-header .icon-button,.site-header .menu-button { width:36px; height:36px; border-radius:9px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } } [hidden] { display:none!important; } :root { color-scheme:dark; } :root[data-theme='light'] { color-scheme:light; } :root[data-contrast='high'] { color-scheme:dark; } .material-symbols-rounded { font-feature-settings:'liga'; } #main-content { min-height:50vh; scroll-margin-top:90px; } .no-js .header-actions,.no-js .back-to-top { display:none; } .mobile-nav a.active { color:var(--cyan); background:var(--surface); } .a11y-panel { padding:0; margin:auto; max-height:calc(100dvh - 1rem); width:min(480px,calc(100% - 1rem)); max-width:min(480px,calc(100% - 1rem)); color:var(--text); overflow-y:auto; scroll-padding-block:6rem 1rem; } .a11y-panel::backdrop { background:rgba(0,4,11,.72); backdrop-filter:blur(8px); } .a11y-panel:focus { outline:none; } .breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:0 0 2.3rem; color:var(--muted); font-size:.8rem; } .breadcrumb a:hover { color:var(--cyan); text-decoration:underline; } .page-intro { border-top:0; padding-top:32px; } .section-heading h1 { max-width:760px; margin:0 auto; font-size:clamp(2rem,calc(4vw * var(--font-scale)),3.25rem); line-height:1.12; } .step-card h2 { margin:0 0 .55rem; font-size:1.08rem; font-weight:900; } .article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .prose-card { padding:clamp(1.2rem,3vw,2rem); border:1px solid var(--border-soft); border-radius:13px; background:var(--surface); } .prose-card h2 { margin:0 0 1rem; font-size:1.3rem; font-weight:900; } .prose-card p { margin:0 0 .9rem; color:var(--muted); } .prose-card p:last-child { margin-bottom:0; } .prose-card a,.faq-list p a,.page-cta p a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; } .state-legend { margin:0; padding:0; list-style:none; display:grid; gap:1.15rem; } .state-legend li { display:flex; align-items:flex-start; gap:.8rem; } .state-legend strong { font-size:.95rem; } .state-legend p { margin:.2rem 0 0; font-size:.87rem; } .legend-dot { flex:none; display:grid; place-items:center; width:24px; height:24px; margin-top:2px; background:var(--key-top); border:1px solid var(--border); border-radius:5px; } .legend-dot.held { background:#073e7d; border-color:#22c4ff; box-shadow:0 0 10px #1683ff80; } .legend-dot.tested { color:var(--green); border-color:var(--green); } .guide-list h3 { margin:0; font-size:1.05rem; font-weight:900; } .troubleshoot-card h2 { margin:1rem 0; font-size:1.3rem; font-weight:900; } .page-cta { margin-top:2rem; padding:1.4rem 1.5rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; border:1px solid var(--border); border-radius:12px; background:linear-gradient(130deg,var(--surface-raised),var(--surface)); } .page-cta h2 { margin:0; font-size:1.3rem; font-weight:900; } .page-cta p { margin:.4rem 0 0; color:var(--muted); font-size:.9rem; } .primary-link { display:inline-flex; align-items:center; justify-content:center; flex:none; gap:.65rem; padding:.8rem 1.05rem; border:1px solid var(--cyan); border-radius:10px; color:var(--text); background:var(--surface-soft); font-weight:900; transition:background .2s; } .primary-link:hover { background:color-mix(in srgb,var(--cyan) 15%,var(--surface)); } .primary-link>.material-symbols-rounded { color:var(--cyan); } .text-link { display:inline-flex; align-items:center; gap:.4rem; color:var(--cyan); margin-top:1rem; font-weight:700; text-decoration:none; } .text-link-label { text-decoration:underline; text-underline-offset:3px; } .text-link:hover .text-link-label { text-decoration-thickness:2px; } .text-link>.material-symbols-rounded { text-decoration:none; transition:transform .2s ease; } .step-card:is(:hover,:focus-within) .text-link>.material-symbols-rounded { transform:translateX(.3rem); } @media (prefers-reduced-motion:reduce) { .text-link>.material-symbols-rounded { transition:none; } .step-card:is(:hover,:focus-within) .text-link>.material-symbols-rounded { transform:none; } } .tester-note { margin:.9rem 0; color:var(--muted); font-size:.8rem; } .error-page { padding:4rem 0 5rem; } .error-card { max-width:650px; margin:auto; text-align:center; } .error-code { display:block; font-size:5rem; line-height:1; font-weight:900; color:var(--cyan); } .error-card h1 { margin:1rem 0; } .error-card .primary-link { margin-top:1.2rem; } :root[data-contrast='high'] .prose-card,:root[data-contrast='high'] .page-cta { border-color:var(--border); } @media (max-width:1100px) { .troubleshoot-card h2 { margin:.35rem 0 1rem; } } @media (max-width:820px) { .no-js .mobile-nav { display:flex; flex-wrap:wrap; justify-content:center; padding:.5rem; } .article-grid { grid-template-columns:1fr; } .page-cta { flex-direction:column; align-items:flex-start; } .page-intro { padding-top:24px; } } @media (max-width:560px) { .page-cta { padding:1.15rem; } .site-header .header-inner { width:calc(100% - 1rem); gap:.25rem; } .site-header .brand strong { font-size:.85rem; } :root[data-font-size='large'] .site-header .brand-logo-mark { display:none; } } :root:is([data-letter-spacing='medium'],[data-letter-spacing='large']) body, :root:is([data-letter-spacing='medium'],[data-letter-spacing='large']) body *:not(.material-symbols-rounded) { letter-spacing:var(--reading-letter-spacing)!important; } :root:is([data-letter-spacing='medium'],[data-letter-spacing='large']) .eyebrow { letter-spacing:max(.11em,var(--reading-letter-spacing))!important; } :root:is([data-letter-spacing='medium'],[data-letter-spacing='large']) .section-kicker { letter-spacing:max(.12em,var(--reading-letter-spacing))!important; } :root:is([data-line-spacing='medium'],[data-line-spacing='large']) body, :root:is([data-line-spacing='medium'],[data-line-spacing='large']) body *:not(.material-symbols-rounded) { line-height:var(--reading-line-height)!important; } .material-symbols-rounded { flex-shrink:0; letter-spacing:normal!important; line-height:1!important; } .heading-copy,.feature-card>div,.tester-features p,.tester-features p>span:last-child,.guide-list li>div,.privacy-note>div,.setting-label>span:last-child { min-width:0; } .feature-card>div,.guide-list li>div,.privacy-note>div,.setting-label>span:last-child { overflow-wrap:anywhere; } .stats-grid small { white-space:normal; overflow-wrap:anywhere; } .test-status { min-width:0; white-space:normal; } .test-status i,.pulse-dot,.brand-logo-mark { flex:none; } .primary-link,.text-link,.history-items,.footer-brand .brand { max-width:100%; } .footer-brand .brand strong { min-width:0; overflow-wrap:anywhere; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large'],[data-line-spacing='medium'],[data-line-spacing='large']) body { overflow-wrap:anywhere; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .tester-heading { flex-wrap:wrap; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .tester-actions { max-width:100%; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .history-items { overflow-x:auto; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-line-spacing='medium'],[data-line-spacing='large']) .header-inner { height:auto; min-height:76px; padding-block:.5rem; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-line-spacing='medium'],[data-line-spacing='large']) .desktop-nav { align-self:stretch; height:auto; } @media (max-width:1400px) { :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .desktop-nav { display:none; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .menu-button { display:grid; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .mobile-nav.is-open { display:flex; flex-direction:column; padding:.35rem .75rem .85rem; border-top:1px solid var(--border-soft); } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .mobile-nav a { padding:.8rem 1rem; border-radius:8px; color:var(--muted); font-weight:700; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .mobile-nav a.active { color:var(--cyan); background:var(--surface); } } @media (max-width:820px) { :root:is([data-font-size='medium'],[data-font-size='large'],[data-line-spacing='medium'],[data-line-spacing='large']) .header-inner { min-height:68px; } } @media (max-width:560px) { :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .stats-grid { grid-template-columns:minmax(0,1fr); } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .stats-grid article { grid-column:auto; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .site-header .brand-logo-mark { display:none; } } @media (max-width:380px) { :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .site-header .header-inner { flex-wrap:wrap; height:auto; padding-block:.5rem; row-gap:.5rem; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .site-header .brand { flex-basis:100%; } :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .site-header .header-actions { margin-left:auto; } .a11y-panel { width:calc(100% - .5rem); max-width:calc(100% - .5rem); } .a11y-group { margin-inline:.3rem; } .a11y-options { gap:4px; } .a11y-option>span { padding-inline:0; } } :root[data-contrast='high'], :root[data-contrast='high'] body, :root[data-contrast='high'] body *, :root[data-contrast='high'] body *::before, :root[data-contrast='high'] body *::after { color:#ffff00!important; -webkit-text-fill-color:currentColor!important; background-color:#000!important; background-image:none!important; border-color:#ffff00!important; outline-color:#ffff00!important; text-shadow:none!important; box-shadow:none!important; transition-duration:0s!important; } :root[data-contrast='high'] .hero-glow, :root[data-contrast='high'] .step-card::after { display:none; } :root[data-contrast='high'] .site-header { backdrop-filter:none; } :root[data-contrast='high'] .a11y-panel::backdrop { background:#000; backdrop-filter:none; } :root[data-contrast='high'] a { text-decoration:underline; text-underline-offset:.18em; } :root[data-contrast='high'] .text-link { text-decoration:none; } :root[data-contrast='high'] .reset-button:disabled { opacity:1; border-style:dashed; } :root[data-contrast='high'] .keyboard-scroll, :root[data-contrast='high'] .a11y-panel { scrollbar-color:#ffff00 #000; } :root[data-contrast='high'] .test-status i { border:1px solid #ffff00; } :root[data-contrast='high'] .pulse-dot, :root[data-contrast='high'] .test-status.is-active i, :root[data-contrast='high'] .lock-lights span.on i, :root[data-contrast='high'] .key-cap .space-mark, :root[data-contrast='high'] .desktop-nav a.active::after, :root[data-contrast='high'] .a11y-switch::after { background-color:#ffff00!important; } :root[data-contrast='high'] .key-cap.is-tested, :root[data-contrast='high'] .legend-dot.tested { border-width:3px; border-style:double; } :root[data-contrast='high'] .key-cap.is-pressed, :root[data-contrast='high'] .key-cap.is-pressed *, :root[data-contrast='high'] .legend-dot.held, :root[data-contrast='high'] .a11y-choice:checked+span, :root[data-contrast='high'] .a11y-switch:checked { color:#000!important; background-color:#ffff00!important; } :root[data-contrast='high'] .key-cap.is-pressed { border-style:solid; } :root[data-contrast='high'] .key-cap.is-pressed .space-mark, :root[data-contrast='high'] .a11y-switch:checked::after { background-color:#000!important; } :root[data-contrast='high'] ::selection { color:#000; background:#ffff00; } :root[data-contrast='high'] .brand-logo-mark { display:none; } @media (forced-colors:active) { .brand-logo-mark { display:none; } .a11y-switch { border-color:ButtonText; background:Canvas; } .a11y-switch::after { background:ButtonText; } .a11y-switch:checked { border-color:Highlight; background:Highlight; } .a11y-switch:checked::after { background:HighlightText; } } .ad-placement { margin-block:3rem; padding-block:1rem; max-width:1120px; } .ad-placement[hidden] { display:none!important; } .ad-label { margin:0 0 .65rem; text-align:center; color:var(--muted); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; } .ad-slot-target { width:100%; min-width:0; min-height:250px; } .ad-slot-target .adsbygoogle { display:block; width:100%; min-width:0; } .footer-info>a,.footer-privacy { display:block; margin-top:.65rem; color:var(--muted); font-size:.85rem; } .footer-info>a:hover,.footer-privacy:hover { color:var(--cyan); text-decoration:underline; text-underline-offset:.2em; } .footer-privacy { padding:0; border:0; text-align:left; background:none; cursor:pointer; } .footer-privacy[hidden],.consent-panel [hidden] { display:none!important; } .consent-panel { width:min(36rem,calc(100% - 2rem)); max-width:calc(100% - 2rem); max-height:calc(100dvh - 2rem); margin:auto; padding:clamp(1.3rem,4vw,2.2rem); overflow:auto; border:1px solid var(--border); border-top:3px solid var(--cyan); border-radius:1.25rem; background:var(--surface); color:var(--text); box-shadow:0 12px 50px rgba(0,0,0,.28); } .consent-panel::backdrop { background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .consent-panel h2 { margin:.15rem 0 1rem; font-size:clamp(1.7rem,4vw,2.15rem); line-height:1.15; letter-spacing:-.025em; } .consent-panel p { line-height:1.55; } .consent-panel>p:not(.section-kicker) { color:var(--muted); } .consent-panel .section-kicker { margin:0 2rem .6rem 0; } .consent-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:1rem; border:1px solid var(--cyan); border-radius:12px; color:var(--cyan); background:var(--surface-soft); } .consent-icon .material-symbols-rounded { font-size:1.65rem; } .consent-close { position:absolute; top:.7rem; right:.7rem; width:44px; height:44px; border:0; border-radius:.6rem; background:var(--surface-soft); cursor:pointer; font-size:1.8rem; } .consent-detail { padding:.3rem 1rem; border-left:2px solid var(--border); color:var(--muted); font-size:.85rem; } .consent-detail p { margin:.65rem 0; } .consent-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:1.3rem; } .consent-button { min-height:50px; padding:.75rem; border:1px solid var(--cyan); border-radius:.65rem; background:var(--surface-raised); color:var(--text); font-size:.875rem; font-weight:900; cursor:pointer; } .consent-button:hover { color:var(--cyan); background:var(--surface-soft); } .consent-button:disabled { cursor:wait; opacity:.65; } .consent-panel .consent-status { min-height:0; font-size:.85rem; color:var(--cyan)!important; } .consent-status:empty { display:none; } .consent-footnote { margin:1rem 0 .65rem; font-size:.75rem; } .consent-links { display:flex; flex-wrap:wrap; gap:.55rem; font-size:.8rem; } .consent-links a { color:var(--cyan); text-decoration:underline; text-underline-offset:.2em; } @media (max-width:480px) { .consent-panel { width:calc(100% - 1rem); max-width:calc(100% - 1rem); max-height:calc(100dvh - 1rem); } .consent-actions { grid-template-columns:minmax(0,1fr); } .ad-placement { margin-block:2rem; } } @media (min-width:900px) { .ad-slot-target { min-height:280px; } } .shortcuts-jump { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:0 0 1.5rem; } .shortcuts-jump a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.7rem 1.2rem; border:1px solid var(--border); border-radius:999px; background:var(--surface-soft); color:var(--cyan); font-weight:700; } .shortcuts-jump a:hover { border-color:var(--cyan); background:var(--surface-raised); } .shortcuts-system { margin-top:3.5rem; scroll-margin-top:110px; } .shortcuts-system>header { max-width:850px; margin-bottom:1.35rem; } .shortcuts-system h2 { margin:0 0 .5rem; font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.2; } .shortcuts-system>header p { margin:0; color:var(--muted); } .shortcuts-system>p { margin:1.1rem 0 0; color:var(--muted); font-size:.9rem; } .shortcuts-system+.prose-card { margin-top:2.5rem; } .shortcuts-page .prose-card+.prose-card { margin-top:1.25rem; } .shortcuts-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:start; } .shortcuts-card { min-width:0; padding:1.2rem; border:1px solid var(--border); border-radius:14px; background:linear-gradient(145deg,var(--surface-raised),var(--surface)); } .shortcuts-card h3 { margin:0 0 .9rem; color:var(--cyan); font-size:1.1rem; } .shortcuts-card>p { margin:1rem 0 0; color:var(--muted); font-size:.82rem; } .shortcut-table { table-layout:fixed; width:100%; border-collapse:collapse; font-size:.875rem; text-align:left; } .shortcut-table th,.shortcut-table td { padding:.8rem .3rem; border-bottom:1px solid var(--border-soft); vertical-align:top; overflow-wrap:anywhere; } .shortcut-table thead th { padding-top:0; color:var(--muted); font-weight:400; font-size:.8rem; } .shortcut-table th:first-child { width:48%; padding-left:0; } .shortcut-table tbody th { font-weight:400; } .shortcut-table td { padding-right:0; } .shortcut-table td>div+div { margin-top:.5rem; } .shortcut-table tbody tr:last-child>* { border-bottom:0; } .shortcut-combo { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.22rem; max-width:100%; vertical-align:middle; } .shortcuts-page kbd { display:inline-block; max-width:100%; padding:.12rem .35rem; border:1px solid var(--border); border-bottom-width:3px; border-radius:5px; background:var(--surface-soft); color:var(--text); font:700 .8rem/1.4 'Lato',sans-serif; overflow-wrap:anywhere; } .shortcuts-page .page-cta { margin-top:3rem; } @media (max-width:1050px) { .desktop-nav { display:none; } .menu-button { display:grid; } .mobile-nav.is-open { display:flex; flex-direction:column; padding:.35rem .75rem .85rem; border-top:1px solid var(--border-soft); } .mobile-nav a { padding:.8rem 1rem; border-radius:8px; color:var(--muted); font-weight:700; } .mobile-nav a:is(:hover,.active) { color:var(--cyan); background:var(--surface); } .no-js .mobile-nav { display:flex; flex-wrap:wrap; justify-content:center; padding:.5rem; } .shortcuts-grid { grid-template-columns:1fr; } } @media (min-width:1051px) and (max-width:1400px) { :root:is([data-font-size='medium'],[data-font-size='large'],[data-letter-spacing='medium'],[data-letter-spacing='large']) .shortcuts-grid { grid-template-columns:1fr; } }