*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button.lk,a.lk{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
dialog{margin:auto;max-width:34rem;width:calc(100% - 2rem);max-height:85dvh;border:0;border-radius:var(--r,6px);padding:2rem;background:var(--panel,var(--bg));color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog h2{font-size:1.4rem;margin-bottom:1rem;font-family:var(--display,var(--body))}
dialog h3{font-size:.95rem;margin:1.1rem 0 .2rem}
dialog p{margin-bottom:.6rem;color:var(--ink)}
.x{position:absolute;top:.4rem;right:.4rem;width:44px;height:44px;font-size:1.6rem;background:none;border:0;border-radius:4px;color:var(--ink);cursor:pointer;line-height:1;z-index:1}.x:hover{background:rgba(127,127,127,.15)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

:root{--bg:#F7F7F4;--ink:#1C1C1A;--muted:#8C8C86;--accent:#0050E6;--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--body:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--panel:#FFFFFF}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#151614;--ink:#E3E4DF;--muted:#7D7E78;--accent:#5C9BFF;--panel:#1D1E1C}}
.mark{font-family:var(--mono);line-height:1;white-space:nowrap;letter-spacing:-.02em}
.mark em{font-style:normal;color:var(--accent)}.mark u{text-decoration:none;color:var(--accent);animation:blink 1.1s steps(1) infinite}
.js .mark .k:not(.on){display:none}.js .mark:not(.done) u{animation:none}
@keyframes blink{50%{opacity:0}}
main{height:100dvh;display:grid;place-items:center;padding:1.5rem}
.box{width:min(40rem,100%);font-size:clamp(14px,1.6vw,16px);line-height:1.9}
.box .mark{font-size:clamp(3rem,8vw,5.5rem);display:block;margin-bottom:2rem}
.row{display:grid;grid-template-columns:7.5rem 1fr}
.row span:first-child{color:var(--muted)}
.row a{text-decoration:none;border-bottom:1px solid var(--accent)}
footer{margin-top:2.5rem;padding-top:1rem;border-top:1px dashed var(--muted);display:flex;gap:1.5rem;font-size:13px;color:var(--muted)}
@media(max-width:480px){.row{grid-template-columns:1fr}.row span:first-child{margin-top:.5rem}}
.row button.lk{text-decoration:none;border-bottom:1px solid var(--accent)}
#msg form.f{display:grid;gap:1rem;margin-top:.5rem}
.f label{display:grid;gap:.3rem;font-size:13px;color:var(--muted)}
.f input,.f textarea{font:inherit;font-size:15px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--muted);border-radius:0;padding:.35rem 0}
.f textarea{resize:vertical;min-height:7rem;border:1px solid var(--muted);padding:.5rem}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--accent)}
.f [aria-invalid=true]{border-color:#D12E2E}
.f .err{color:#D12E2E;font-size:13px}.f .err:empty{display:none}
.f .hp{position:absolute;left:-9999px}
.f .note{font-size:12px;color:var(--muted)}
.f button[type=submit]{justify-self:start;font:inherit;font-size:15px;background:var(--ink);color:var(--bg);border:0;border-radius:4px;padding:.6rem 1.2rem;cursor:pointer}
.f button[disabled]{opacity:.5;cursor:default}
#msg .status{font-size:15px}