:root{--desk:#ebe8e1;--board:#30343b;--board-edge:#1f2227;--foil:#e0a83c;--key:#f3f1ec;--key-line:#dcd8cf;--key-ink:#1c1f24;--key-soft:#5d636e}@media (prefers-color-scheme:dark){:root:not(.light-only){--desk:#131417;--board:#2a2e35;--board-edge:#0d0e10;--ink-soft:#a5a9b2;--rule:#3a3f48}}.lede{word-break:keep-all}.lede .typed{white-space:nowrap}.sr-only{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.dir{border:0;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px;padding:0;display:grid}.dir label{border:1px solid var(--key-line);background:var(--key);box-shadow:0 3px 0 var(--key-line);color:var(--key-ink);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:10px;place-items:center;padding:10px 4px 11px;font-size:15px;font-weight:700;transition:transform 80ms ease-out,box-shadow 80ms ease-out;display:grid;position:relative}.dir label:active{box-shadow:0 1px 0 var(--key-line);transform:translateY(2px)}.dir input{opacity:0;pointer-events:none;position:absolute}.dir label:has(input:checked){background:var(--board);border-color:var(--board);box-shadow:0 3px 0 var(--board-edge);color:var(--foil)}.dir label:has(input:focus-visible){outline:3px solid var(--foil);outline-offset:2px}textarea{color:#1b2230;width:100%;min-height:140px;font:inherit;resize:vertical;background:#fff;border:1px solid #d3d8e0;border-radius:10px;padding:14px;font-size:16px;line-height:1.7;display:block}textarea:focus{outline:2px solid var(--foil);outline-offset:1px}.said{color:var(--key-soft);margin:14px 2px 6px;font-size:13px}.out{background:var(--key);border-left:4px solid var(--foil);min-height:64px;color:var(--key-ink);white-space:pre-wrap;word-break:break-word;border-radius:10px;padding:14px 16px;font-size:19px;line-height:1.6;display:block}.actions{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.actions .copy{background:var(--board);color:#fff;font:inherit;cursor:pointer;border:0;border-radius:999px;padding:9px 18px;font-size:15px;font-weight:700}.actions .copy:active:not(:disabled){background:var(--board-edge)}.actions .ghost{color:#1b2230;border-color:#d3d8e0}.actions button:disabled{opacity:.45;cursor:default}.examples{border-top:1px dashed var(--key-line);margin-top:22px;padding-top:16px}.examples p{color:var(--key-soft);margin:0 0 8px;font-size:13px;font-weight:700}.examples ul{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.examples button{border:1px solid var(--key-line);width:100%;color:var(--key-ink);font:inherit;text-align:left;cursor:pointer;background:#fff;border-radius:10px;gap:2px;padding:9px 12px;display:grid}.examples button:hover{background:var(--key)}.examples b{word-break:break-all;font-size:15px;font-weight:600}.examples span{color:var(--key-soft);font-size:12px}.examples span:before{content:"→ "}.howto ul{word-break:keep-all}@media (prefers-reduced-motion:reduce){.dir label{transition:none}}