@font-face{font-family:Sik;src:url('sik-input.ttf') format('truetype');font-display:swap;unicode-range:U+0041-005A,U+0061-007A,U+E001-E009,U+0021,U+002C,U+002E,U+003F}
:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#111619;color:#e6e9e8;--muted:#a0acad;--accent:#a8d2c2;--line:#344145}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#233137 0,transparent 65%);min-height:100vh}main{max-width:1240px;margin:auto;padding:34px 28px 48px}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.brand{display:flex;gap:18px;align-items:center}.brand-rune{font-family:Sik;font-size:42px;color:var(--accent);border-right:1px solid var(--line);padding-right:22px}h1{font-size:23px;letter-spacing:.02em;font-weight:550;margin:0}h1 span{font-size:16px;font-weight:400;color:var(--muted)}header p{font-size:14px;color:var(--muted);margin:5px 0 0}.badge{font-size:12px;letter-spacing:.16em;border:1px solid var(--line);padding:8px 11px;border-radius:4px;color:var(--accent)}.writing{border:1px solid #47565a;border-radius:10px;background:#171e22;overflow:hidden;box-shadow:0 16px 60px #0002}.section-top,.editor-bottom{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;color:var(--muted);font-size:13px}h2{margin:0;font-size:14px;font-weight:500;color:#d1dad8}#editor{display:block;width:100%;height:200px;resize:vertical;border:0;outline:0;background:transparent;color:#f2f4ec;font-family:Sik,system-ui,sans-serif;font-size:32px;line-height:1.8;padding:8px 22px;letter-spacing:1px;tab-size:4;caret-color:#b9ecdb;white-space:pre-wrap;overflow-wrap:break-word}.writing:focus-within{border-color:#91bdaf}.editor-bottom{border-top:1px solid #2b373b;padding-block:11px}details{color:var(--muted);font-size:14px}summary{cursor:pointer;width:fit-content;padding:13px 0}#reading p{margin:0 0 16px;white-space:pre-wrap;overflow-wrap:anywhere;color:#d6e5df;line-height:1.7}.keyboard-panel{position:relative;background:#1b2429;border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:10px;box-shadow:0 15px 45px #0003}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.layouts{display:flex;gap:3px;background:#11191d;padding:4px;border-radius:7px}.layouts button{color:#aebbbb;background:transparent;border:0;padding:8px 16px;border-radius:4px;font-size:14px}.layouts button.selected{color:#e9f5ef;background:#37484b;box-shadow:0 1px 5px #0004}.hint-switch{font-size:14px;color:var(--muted);display:flex;gap:6px;align-items:center}input{accent-color:#a8d2c2}.keyboard-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);letter-spacing:.08em;margin:20px 2px 12px}#layer-label{color:var(--accent)}.keyrow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-bottom:6px}.key{position:relative;min-width:0;height:66px;background:linear-gradient(#354248,#29343a);color:#eff1eb;border:1px solid #45565e;border-bottom:3px solid #0c1418;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none;padding:3px;transition:background .1s}@media(hover:hover) and (pointer:fine){.key:hover:not(:disabled){background:#42545b}}.key:active:not(:disabled),.key.pressed{background:#567066;border-color:#b9d5c7}.key .glyph{font-family:Sik,system-ui,sans-serif;font-size:28px;line-height:1.2}.key .latin{font-size:11px;color:#c0cdce;line-height:1.2;margin-top:3px}.key.command{background:#222e34;font-size:12px;letter-spacing:.03em}.key.number{height:42px;font-size:16px;background:#222e34}.key.active{background:#b1d3c5;color:#132c26;border-color:#b1d3c5}.key:disabled{cursor:default;color:#859193;background:#202a2f}.key.blank{border-color:#29353a;color:transparent;background:#202a2f}.key.arrow{font-size:30px;background:#3f5b56;color:#d5ffeb}.hide-hints .latin{display:none}.keyboard-footer{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.5;color:var(--muted);margin:14px 2px 0;min-height:18px}#feedback{color:var(--accent)}.preferences{display:flex;flex-wrap:wrap;gap:14px 28px;padding:20px 0;font-size:14px;color:#b9c6c7}.preferences label{display:flex;align-items:center;gap:6px}.guide{border-top:1px solid var(--line)}.guide div{max-width:800px;line-height:1.7}.guide p{margin:5px 0 15px}.flick .keyrow{grid-template-columns:repeat(10,minmax(0,1fr))}.flick-hint{position:absolute;font-size:11px;color:#b2c8c1;right:4px;top:4px}#flick-menu{position:fixed;z-index:20;background:#d0e9dc;color:#152720;padding:13px 18px;border:1px solid #f0fff5;border-radius:8px;box-shadow:0 8px 24px #0008;pointer-events:none;font-size:15px;max-width:260px}#flick-menu .glyph{font-family:Sik;font-size:25px}.empty-space{pointer-events:none}
@media(max-width:650px){main{padding:20px 10px 30px}header{margin-bottom:20px}.badge{display:none}h1{font-size:21px}h1 span{font-size:14px}.brand-rune{font-size:34px}#editor{height:180px;font-size:27px;padding-inline:14px}.section-top,.editor-bottom{padding-inline:14px}.keyboard-panel{padding:10px 5px;border-radius:8px}.toolbar{padding:0 4px}.layouts button{padding:8px 10px}.hint-switch{font-size:12px}.keyrow{gap:3px;margin-bottom:4px}.key{height:59px;border-radius:4px;padding:1px}.key .glyph{font-size:20px}.key .latin{font-size:10px}.key.command{font-size:10px;letter-spacing:0}.key.number{font-size:13px;height:35px}.keyboard-footer{padding-inline:4px;display:block}.preferences{font-size:13px;gap:12px}.editor-bottom{font-size:12px}.flick .key .glyph{font-size:24px}}

.header-actions{display:flex;align-items:center;gap:12px}#open-welcome{background:transparent;border:1px solid var(--line);border-radius:5px;padding:9px 12px;color:#d2e4dc;font-size:14px}#welcome{padding:0;width:min(660px,calc(100% - 24px));max-height:calc(100dvh - 32px);border:1px solid #627b75;border-radius:12px;background:#192327;color:#e6e9e8;box-shadow:0 24px 90px #0009;overflow:auto}#welcome::backdrop{background:#080f13c9;backdrop-filter:blur(4px)}.welcome-top{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line)}.welcome-eyebrow{font-size:12px;letter-spacing:.12em;color:var(--accent)}#close-welcome{background:transparent;border:0;color:#d3e0dd;font-size:28px;width:44px;height:44px;flex-shrink:0}.welcome-body{padding:22px 28px 8px}.welcome-body h2{font-size:28px;line-height:1.2;color:#f0f5ef;outline:none}.welcome-body p{font-size:16px;line-height:1.65;color:#c3d0ce;margin:16px 0}.welcome-body .welcome-lead{font-size:18px;color:#deede5}.welcome-body strong{color:#eef3ee;font-weight:600}.welcome-body h3{font-size:17px;font-weight:600;margin:24px 0 12px;color:#e2efe7}.welcome-mapping{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;margin:16px 0}.welcome-mapping div{text-align:center;padding:9px 2px;background:#26373c;border:1px solid #3c5054;border-radius:5px}.welcome-mapping dt{font-size:16px;color:var(--accent)}.welcome-mapping dd{margin:5px 0 0;font-size:14px}.welcome-body .welcome-note{padding:13px 15px;border-left:2px solid #92b9a8;background:#202f33;font-size:14px}.welcome-layouts{list-style:none;margin:0;padding:0}.welcome-layouts li{display:grid;grid-template-columns:80px 1fr;gap:12px;border-top:1px solid var(--line);padding:13px 0;font-size:15px;line-height:1.5}.welcome-layouts span{color:#bbc9c6}.welcome-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 28px;border-top:1px solid var(--line)}.welcome-bottom span{font-size:13px;color:var(--muted)}#start-writing{background:#b1d3c5;color:#10281f;border:0;padding:13px 20px;border-radius:6px;font-size:16px;font-weight:600;white-space:nowrap}body:has(#welcome[open]){overflow:hidden}
@media(max-width:650px){.header-actions{gap:0}#open-welcome{font-size:12px;padding:8px}.welcome-top{padding:8px 16px}.welcome-eyebrow{font-size:11px}.welcome-body{padding:18px 18px 8px}.welcome-body h2{font-size:25px}.welcome-bottom{padding:16px 18px;flex-wrap:wrap}.welcome-mapping{grid-template-columns:repeat(5,minmax(0,1fr))}.welcome-layouts li{grid-template-columns:68px 1fr}}

.feedback-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 12px;border:1px solid #6a9184;border-radius:5px;color:#c8e9dc;font-size:14px;text-decoration:none;white-space:nowrap}.feedback-link:hover{background:#30473e}.feedback-link:focus-visible,.feedback-invitation a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.feedback-invitation a{color:#c4efdb;text-underline-offset:3px}.feedback-caption{display:block;font-size:13px;color:var(--muted);margin-top:6px}@media(max-width:650px){header{flex-wrap:wrap;gap:14px}.header-actions{gap:8px;flex-wrap:wrap}.feedback-link{font-size:13px;padding:8px 12px}}

.key{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.key>*{pointer-events:none}