:root{--bg:#fbfbfa;--fg:#1d1d1b;--mut:#6b6b66;--line:#e2e1dc;--acc:#1f5f4f;--warn:#8a5a12}
@media (prefers-color-scheme:dark){:root{--bg:#191917;--fg:#eceae4;--mut:#9c9a92;--line:#33322e;--acc:#7fd2b6;--warn:#e0b25c}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif}
#app{max-width:44rem;margin:0 auto;padding:1.25rem}
h1{font-size:1.35rem;margin:0 0 .35rem}
h2{font-size:1.05rem;margin:1.5rem 0 .4rem}
h3{font-size:.9rem;margin:1.1rem 0 .3rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.notice{padding:.6rem .8rem;border:1px solid var(--line);border-radius:.5rem;background:transparent;color:var(--mut);font-size:.9rem}
.notice.ok{color:var(--acc);border-color:var(--acc)}
.notice.bad{color:var(--warn);border-color:var(--warn)}
.success{border-left:3px solid var(--acc);padding-left:.7rem}
#transcript{border:1px solid var(--line);border-radius:.5rem;padding:.75rem;min-height:9rem;max-height:22rem;overflow-y:auto;margin-bottom:.75rem}
.turn{margin:0 0 .6rem;padding-left:.6rem;border-left:2px solid var(--line);overflow-wrap:anywhere}
.turn.buyer{border-left-color:var(--acc)}
.turn .who{display:block;font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
textarea{width:100%;padding:.6rem;border:1px solid var(--line);border-radius:.5rem;background:transparent;color:inherit;font:inherit;resize:vertical}
.controls{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
button{padding:.5rem .9rem;border:1px solid var(--line);border-radius:.5rem;background:transparent;color:inherit;font:inherit;cursor:pointer}
button:hover{border-color:var(--acc);color:var(--acc)}
button[disabled]{opacity:.45;cursor:not-allowed}
ul,ol{padding-left:1.2rem}
li{margin:.25rem 0}
footer{margin-top:2rem;border-top:1px solid var(--line);padding-top:.9rem;font-size:.85rem;color:var(--mut)}
.disclosure code{font-size:.8rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:480px){#app{padding:1rem .85rem}.controls button{flex:1 1 auto}}
.mut{color:var(--mut);font-size:.85rem}