body{background:#04110a;color:#d2f5df;font:16px system-ui;max-width:680px;margin:50px auto;padding:20px}input,button{font:inherit;padding:12px;margin:8px 0;display:block;width:100%;box-sizing:border-box;background:#082012;color:#d2f5df;border:1px solid #248c50}button{cursor:pointer}pre{white-space:pre-wrap}a{color:#2bff88}
/* T-058: long responses remain readable at narrow widths. */
* { box-sizing: border-box; }
body { margin: 24px auto; padding: 20px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
form, label, input, button, pre { min-width: 0; max-width: 100%; }
h1, p, label, pre { overflow-wrap: anywhere; }
pre { overflow-x: auto; }
.surface-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.surface-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; border: 1px solid #248c50; border-radius: 6px; text-decoration: none; }
:focus-visible { outline: 2px solid #2bff88; outline-offset: 3px; }
input, button { min-height: 44px; }