body{min-height:100vh;display:flex;flex-direction:column;margin:0;padding:0;background:oklch(0.3 0.006 75)}.tt{margin:0}main.feed{box-sizing:border-box;flex:1 0 auto;width:calc(72ch + 144px);max-width:calc(100% - 32px);margin:0 auto;padding:72px 72px 96px;color:#1d1b18;font-family:"Courier Prime", "Courier New", monospace;font-size:18px;line-height:1.55;font-variant-ligatures:none;background:radial-gradient(circle, #3a3936 6px, transparent 6.6px) left top/40px 36px repeat-y,radial-gradient(circle, #3a3936 6px, transparent 6.6px) right top/40px 36px repeat-y,repeating-linear-gradient(to bottom, #c9c3ae 0 4px, transparent 4px 9px) 40px 0/1px 100% no-repeat,repeating-linear-gradient(to bottom, #c9c3ae 0 4px, transparent 4px 9px) calc(100% - 40px) 0/1px 100% no-repeat,#f2eedf;box-shadow:0 1px 2px rgba(0,0,0,0.35),0 6px 14px rgba(0,0,0,0.3),0 30px 70px rgba(0,0,0,0.55)}.feed pre{margin:0 0 1.55em;text-transform:uppercase;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}.feed pre.rule{margin-bottom:0;white-space:pre;overflow:hidden;width:round(down, 100%, 1ch)}.feed pre:has(+.rule){margin-bottom:0}.keys{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 16px;width:fit-content;max-width:calc(100% - 52px);box-sizing:border-box;margin:40px auto 36px;padding:22px 26px 26px;border-radius:8px;background:linear-gradient(#cdbd8c, #c7b57e);box-shadow:inset 0 4px 8px rgba(0,0,0,0.32),inset 0 -1px 0 rgba(255,255,255,0.3),0 0 0 10px #b3a273,0 0 0 11px #837347,0 16px 30px rgba(0,0,0,0.55)}.key{display:block;border-radius:50%;text-decoration:none;color:#f4f1e8;box-shadow:0 5px 0 #3e4241,0 8px 6px rgba(0,0,0,0.35);transition:transform 0.06s, box-shadow 0.06s}.key span{display:flex;align-items:center;justify-content:center;width:66px;height:66px;box-sizing:border-box;padding:0 2px;border-radius:50%;border:2px solid #565a59;background:radial-gradient(circle at 40% 30%, #8e9392 0, #6a6f6e 55%, #5b5f5e 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,0.22),inset 0 -3px 4px rgba(0,0,0,0.3);font:700 9px/1.1 "Courier Prime", "Courier New", monospace;letter-spacing:0.04em;text-align:center}.key:hover span{background:radial-gradient(circle at 40% 30%, #9da2a1 0, #767c7b 55%, #6a6f6e 100%)}.key:active{transform:translateY(4px);box-shadow:0 1px 0 #3e4241,0 3px 3px rgba(0,0,0,0.35)}.key:focus-visible{outline:3px solid #1d1b18;outline-offset:4px}@media screen and (max-width: 600px){.keys{gap:12px 8px;max-width:calc(100% - 40px);margin-top:32px;padding:16px 12px 20px}.key span{width:56px;height:56px;font-size:8px;letter-spacing:0.02em}}@media (prefers-reduced-motion: reduce){.key{transition:none}}@media screen and (max-width: 600px){main.feed{width:auto;max-width:none;margin:12px 10px 0;padding:28px 32px 40px;font-size:14.5px;line-height:1.5;background:radial-gradient(circle, #3a3936 4px, transparent 4.6px) left top/26px 26px repeat-y,radial-gradient(circle, #3a3936 4px, transparent 4.6px) right top/26px 26px repeat-y,repeating-linear-gradient(to bottom, #c9c3ae 0 3px, transparent 3px 7px) 26px 0/1px 100% no-repeat,repeating-linear-gradient(to bottom, #c9c3ae 0 3px, transparent 3px 7px) calc(100% - 26px) 0/1px 100% no-repeat,#f2eedf;box-shadow:0 1px 2px rgba(0,0,0,0.35),0 4px 10px rgba(0,0,0,0.3),0 18px 40px rgba(0,0,0,0.55)}.feed pre{margin-bottom:1.5em}.tt{margin-top:12px}}