:root{--bg:#f3f6f1;--ink:#1f2a24;--mut:#5d6b63;--line:#cfd9d0;--sql:#2f6fb3;--git:#c0561c;--ok:#2e8b4f;--card:#fff}
*{box-sizing:border-box}body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
main{max-width:1060px;margin:0 auto;padding:18px 14px 40px}h1{font-size:1.6rem;margin:.2em 0}h2{font-size:1.1rem;margin:.1em 0 .4em}
.lead{color:var(--mut);margin:.2em 0 .6em}.mut{color:var(--mut);font-size:.9rem}.sr{position:absolute;left:-9999px}
.layout{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:16px}@media(max-width:820px){.layout{grid-template-columns:1fr}}
.map{position:relative;aspect-ratio:1/1;border:2px solid var(--line);border-radius:12px;background:
 linear-gradient(90deg,transparent 47%,#e4d9bd 47%,#e4d9bd 53%,transparent 53%),linear-gradient(0deg,transparent 44%,#e4d9bd 44%,#e4d9bd 50%,transparent 50%),#dfeedd}
.bld{position:absolute;transform:translate(-50%,-50%);width:26%;min-width:84px;padding:6px 4px;text-align:center;font:inherit;font-size:.78rem;line-height:1.2;border-radius:8px;border:2px solid var(--sql);background:#fff;color:var(--ink);cursor:pointer}
.bld.git{border-color:var(--git)}.bld.done{background:#e3f4e8;border-color:var(--ok)}.bld.cur{outline:3px solid #222;outline-offset:1px}.bld b{display:block;font-size:.85rem}
.bld:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #f5b400;outline-offset:2px}
.legend{margin:.4em 0}.dot{display:inline-block;width:11px;height:11px;border-radius:3px;border:2px solid;vertical-align:-1px}.dot.sql{border-color:var(--sql)}.dot.git{border-color:var(--git)}.dot.ok{border-color:var(--ok);background:#e3f4e8}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
label{display:block;margin:.6em 0 .15em;font-weight:600;font-size:.88rem}
textarea,input[type=text]{width:100%;padding:7px 9px;border:1px solid #9fb0a5;border-radius:6px;font:14px/1.4 ui-monospace,Menlo,Consolas,monospace;background:#fff}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:.6em 0}.row input{flex:1}
button{font:inherit;padding:7px 12px;border-radius:7px;border:1px solid #3d5a47;background:#fff;color:#1f3a2a;cursor:pointer}button.pri{background:#2f5d44;color:#fff}
button.link{border:0;background:none;color:#1d5fa8;text-decoration:underline;padding:0 0 0 .5em;cursor:pointer}
.term{background:#14201a;color:#d7f0de;border-radius:8px;padding:10px;height:230px;overflow:auto;white-space:pre-wrap;word-break:break-word;font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;margin:.4em 0}
.hint{background:#fff7dc;border:1px solid #e6cf7a;border-radius:7px;padding:6px 10px}
.fb{border-radius:7px;padding:8px 11px;margin:.6em 0;font-weight:600}.fb.pass{background:#e3f4e8;color:#14562d;border:1px solid #9fd3b1}.fb.fail{background:#fdeceb;color:#8a1f17;border:1px solid #e8aaa5}
table{border-collapse:collapse;font-size:.85rem;margin:.3em 0 .6em}td,th{padding:3px 9px;border:1px solid var(--line);text-align:left}th{background:#eef3ee}
details{margin:.3em 0}summary{cursor:pointer;color:#1d5fa8}.tn{font-weight:600;margin:.4em 0 0}
footer{margin-top:20px}a{color:#1d5fa8}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}