:root{--bg:#f0ead8;--panel:#faf6e9;--surface:#fff;--surface-soft:#f6f2e6;--ink:#171914;--muted:#515348;--accent:#1538a1;--accent-hover:#102c80;--signal:#e84f25;--edge:#b8b29e;--focus-ring:#e84f25}*{box-sizing:border-box}body{color:var(--ink);background:var(--bg);margin:0;font-family:IBM Plex Sans,Segoe UI,sans-serif}.page{grid-template-columns:1fr 280px;gap:20px;min-height:100vh;padding:20px;display:grid}.controls,.screen-wrap{background:var(--panel);border:1px solid var(--edge);border-radius:4px;padding:16px}.controls{border-top:5px solid var(--accent)}.screen-wrap{border-top:5px solid var(--signal)}.controls h1{margin-top:0;margin-bottom:8px;font-size:1.25rem}.controls p{color:var(--muted);margin:0 0 12px}.row{align-items:center;gap:10px;margin-bottom:10px;display:flex}.example-meta{border:1px solid var(--edge);background:var(--surface);border-radius:4px;margin:0 0 12px;padding:10px 12px}.example-meta h2{margin:0;font-size:.95rem}.example-meta p{color:var(--ink);margin:0 0 6px;font-size:.85rem}.example-meta ul{margin:6px 0 0;padding-left:18px;font-size:.82rem}.example-meta li{margin-bottom:4px}.example-coverage{font-family:IBM Plex Mono,Consolas,monospace}.example-meta-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.meta-toggle{padding:6px 10px;font-size:.75rem}.example-meta.is-collapsed #example-meta-body{display:none}.editor-wrap{border:1px solid var(--edge);background:var(--surface);border-radius:4px;margin:0 0 12px;padding:10px 12px}.section-header{justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.section-header h2{margin:0;font-size:.95rem}.editor-wrap.is-collapsed #editor-body{display:none}.row label{min-width:90px;font-size:.85rem}.row select{border:1px solid var(--edge);background:var(--surface);border-radius:4px;flex:1;min-width:120px;padding:8px 10px;font-size:.85rem}.checkbox-row{align-items:center;gap:8px;min-width:0;display:flex}textarea{resize:vertical;border:1px solid var(--edge);border-radius:4px;width:100%;height:360px;padding:12px;font-family:IBM Plex Mono,Consolas,monospace;font-size:.85rem;line-height:1.4}.buttons{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:3px;padding:10px 14px}button:hover{background:var(--accent-hover)}button:active{transform:translate(1px,1px)}button:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.status{margin-top:12px;font-size:.9rem}.runtime-actions{flex-wrap:wrap;gap:8px;display:flex}.runtime-actions button{padding:7px 10px;font-size:.78rem}.runtime-state{border:1px solid var(--edge);background:var(--surface);border-radius:4px;max-width:100%;margin:10px 0 0;padding:10px;font-family:IBM Plex Mono,Consolas,monospace;font-size:.8rem;line-height:1.45;overflow:auto}.event-log-wrap{border:1px solid var(--edge);background:var(--surface);border-radius:4px;margin-top:10px;padding:10px}.event-log-actions{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.event-log-actions button{padding:6px 10px;font-size:.75rem}.event-export-label{align-self:center;font-size:.78rem}#event-log-export-format{border:1px solid var(--edge);background:var(--surface);border-radius:4px;padding:6px 8px;font-size:.78rem}.event-log-wrap.is-collapsed #event-log-body{display:none}.event-log{border:1px solid var(--edge);background:var(--surface-soft);border-radius:4px;min-height:130px;max-height:220px;margin:0;padding:10px;font-family:IBM Plex Mono,Consolas,monospace;font-size:.77rem;line-height:1.45;overflow:auto}.trace-wrap{border:1px solid var(--edge);background:var(--surface);border-radius:4px;margin-top:10px;padding:10px}.trace-wrap.is-collapsed #trace-body{display:none}#wap-screen{background:var(--surface);border:2px solid var(--ink);border-radius:3px;width:100%;height:auto}@media (width<=900px){.page{grid-template-columns:1fr}}@media (width<=30rem){.page{gap:10px;padding:10px}.controls,.screen-wrap{min-width:0;padding:12px}.row{flex-direction:column;align-items:stretch}.row label,.row select{width:100%;min-width:0}}@media (prefers-reduced-motion:reduce){button:active{transform:none}}