[hidden]{display:none!important}
:root{--bg:#f4f6f8;--card:#fff;--fg:#17212b;--muted:#5a6876;--line:#d5dce3;--accent:#1f5f8b;--owner:#7a4a00;--ownerbg:#fbefd9;--card2:#e2edf5;--bad:#b3261e;color-scheme:light}

@media (prefers-color-scheme:dark){:root{--bg:#11171d;--card:#19212a;--fg:#e4eaf0;--muted:#9aa8b5;--line:#2c3743;--accent:#7fb6dd;--owner:#e9b25a;--ownerbg:#3a2c14;--card2:#1d3142;--bad:#f08a83;color-scheme:dark}
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;flex-direction:column;min-height:100vh;max-width:760px;margin-inline:auto;padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right))}

.top{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}

h1{font-size:19px;margin:0}
.addr{margin:2px 0 0;color:var(--muted);font:13px ui-monospace,Consolas,monospace;overflow-wrap:anywhere}

main{flex:1;padding:12px 0}
.intro p{margin:6px 0;max-width:62ch}
.small{font-size:14px;color:var(--muted)}
a{color:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.choices{display:flex;flex-wrap:wrap;gap:8px;max-width:88%}
.chip{font:inherit;font-size:15px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;text-align:left}

.chip:hover{border-color:var(--accent)}

.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}

.msg{max-width:88%;padding:10px 13px;border-radius:12px;background:var(--card);border:1px solid var(--line);overflow-wrap:anywhere}
.msg p{margin:0 0 8px}
.msg p:last-child{margin-bottom:0}
.msg ul{margin:0 0 8px;padding-left:20px}
.msg li{margin:2px 0}
.msg code{font:13px ui-monospace,Consolas,monospace}
.pending{opacity:.6}

.msg .who{display:block;font-size:12px;color:var(--muted);margin-bottom:3px;letter-spacing:.02em}

.from-guest{align-self:flex-end;background:var(--card2);border-color:transparent}

.from-owner{background:var(--ownerbg);border-color:transparent}
.from-owner .who{color:var(--owner);font-weight:600}

.from-system{align-self:center;background:transparent;border:none;color:var(--muted);font-size:14px;text-align:center;max-width:100%}

.from-card{border-left:4px solid var(--owner)}

.status{color:var(--muted);font-size:14px;text-align:center}

.ask{position:sticky;bottom:0;display:flex;gap:8px;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}

textarea{flex:1;font:inherit;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);resize:vertical;min-height:46px}

button{font:inherit;cursor:pointer}
button[type=submit]{padding:0 18px;border-radius:10px;border:none;background:var(--accent);color:var(--bg);font-weight:600}

button:disabled{opacity:.5;cursor:default}
.ghost{padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--fg)}

.danger{color:var(--bad);border-color:var(--bad)}
button:focus-visible,textarea:focus-visible,.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.mcp{margin:4px 0 20px;color:var(--muted);font-size:14px}
.mcp summary{cursor:pointer}
.mcp code{overflow-wrap:anywhere}

.devs{display:grid;gap:10px;margin-bottom:14px}
.dev{border:1px solid var(--owner);background:var(--ownerbg);border-radius:10px;padding:10px 12px}

.dev p{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.dev .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.foot{text-align:right;margin:0 0 20px}
.sr{position:absolute;left:-9999px}

.workshop{display:grid;gap:6px;margin:14px 0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.workshop h2{font-size:17px;margin:0}
.workshop label{font-size:14px;font-weight:600;margin-top:6px}
.workshop .row{display:flex;gap:8px;margin:8px 0 0}
.workshop button[type=submit]{padding:10px 18px}
.dev textarea{display:block;width:100%;box-sizing:border-box;margin:2px 0 6px}
.learnrow{margin:0 0 12px}
.learned{margin:0 0 16px;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.learned summary{cursor:pointer;font-weight:600}
.learned ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.learned li{border-top:1px solid var(--line);padding-top:8px}
.learned li p{margin:4px 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang{font-size:14px;color:var(--muted);text-decoration:underline;white-space:nowrap}
.opener{margin:12px 0}
.opener .chips{margin:10px 0 0}
.opener .pick{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}
.embed .top{padding:10px 0}
.embed h1{font-size:17px}
.embed .addr,.embed .mcp{display:none}
.demo .chips a{text-decoration:none}
.about{margin:0 0 12px;text-align:center}
.linkish{border:0;background:none;padding:0;color:var(--accent);text-decoration:underline;font:inherit;cursor:pointer}