:root{color-scheme:light;font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;background:#f7f5f1;color:#302d2b;--line:#dcd6ce;--muted:#71665c;--accent:#73513b}*{box-sizing:border-box}body{margin:0}header,main{max-width:1240px;margin:auto;padding:20px clamp(20px,4vw,48px)}header{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);min-height:76px}header strong{font-size:16px;letter-spacing:-.03em}header a{margin-left:auto;font-size:12px;color:var(--muted);text-underline-offset:4px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px 0 32px}.eyebrow{font-size:10px;letter-spacing:.16em;color:var(--muted);margin:0 0 10px}h1{font-size:32px;font-weight:550;letter-spacing:-.04em;line-height:1.3;margin:0 0 10px}.page-heading p:last-child{max-width:60ch;color:var(--muted);margin:0}.mode-label{white-space:nowrap;font-size:11px;border:1px solid #d0bda9;border-radius:5px;padding:6px 12px;color:var(--accent)}.editor-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:start}.scope-panel{position:sticky;top:24px;background:#282626;color:#f2e8de;border:1px solid #37312e;border-radius:9px;padding:24px;box-shadow:0 4px 12px #302b2810}.scope-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.scope-heading span{font:10px ui-monospace,monospace;color:#b7a393}h2{font-size:14px;font-weight:550;margin:0}#scope{display:block;width:100%;margin:30px 0 24px;min-height:180px}.grid{stroke:#4c423c;stroke-width:1}#trace{stroke:#e6b38b;stroke-width:2.4}output{display:block;font:12px/1.6 ui-monospace,monospace;color:#e6c7ad}.scope-caption{font-size:11px;color:#b6a597;border-top:1px solid #4c423c;padding-top:18px;margin:20px 0 0}form{margin:0;background:#fffefa;border:1px solid var(--line);border-radius:9px;padding:24px}.heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}label{display:block;font-size:12px;color:var(--muted)}.heading label{display:flex;align-items:center;gap:10px}.heading input{width:62px}.pattern-label{margin-bottom:20px}.pattern-label input{margin-top:8px}input{display:block;width:100%;min-height:40px;border:1px solid #bcb0a2;background:#fffefa;color:#302d2b;border-radius:5px;padding:8px 10px;font:14px ui-monospace,monospace}#steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 24px}fieldset{min-width:0;margin:0;border:1px solid var(--line);border-radius:6px;background:#faf8f4;padding:14px}legend{padding:0 5px;font-size:11px;color:var(--accent)}fieldset label+label{margin-top:12px}fieldset input{margin-top:6px}.wave-actions{display:flex;flex-wrap:wrap;gap:10px}button{min-height:42px;border:1px solid #c9bdb0;border-radius:5px;background:#fffefa;color:var(--accent);padding:9px 14px;font:500 12px inherit;cursor:pointer;touch-action:manipulation}button:first-child{background:#73513b;border-color:#73513b;color:#fff}button:hover{background:#e8dfd4;color:#302d2b}button:disabled{opacity:.5;cursor:default}.handoff-note{font-size:11px;line-height:1.8;color:var(--muted);margin:18px 0 0}:focus-visible{outline:2px solid #a87951;outline-offset:3px}.skip{position:fixed;top:8px;left:8px;transform:translateY(-200%);background:#fff;padding:10px;z-index:10}.skip:focus{transform:none}
@media(max-width:800px){.editor-workspace{grid-template-columns:1fr;gap:18px}.scope-panel{position:static;padding:20px}#scope{min-height:120px;margin:20px 0}.page-heading{margin:20px 0 24px;align-items:start}h1{font-size:27px}.mode-label{font-size:10px}.page-heading p:last-child{font-size:13px}form{padding:20px}input{font-size:16px;min-height:44px}button{min-height:44px;font-size:12px}.wave-actions button{flex:1 1 45%}header a{font-size:11px}}

.pattern-guide{padding:0 18px;margin:0 0 24px;border:1px solid var(--line);border-radius:7px;background:#fffefa}.pattern-guide>summary{padding:13px 0;cursor:pointer;font-size:13px;font-weight:550;color:#6f4d36}.pattern-guide p{font-size:12px;color:var(--muted);line-height:1.8;margin:7px 0 10px}.pattern-guide ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding-left:20px;margin:14px 0 18px}.pattern-guide li{min-width:0;font-size:12px}.pattern-guide button{min-height:38px;font-size:12px;font-family:inherit;font-weight:500;padding:7px 10px;background:#fffefa;color:#6f4d36;border-color:#c9bdb0}@media(max-width:800px){.pattern-guide ol{grid-template-columns:1fr;gap:14px}.pattern-guide button{min-height:44px}.pattern-guide>summary{font-size:12px}}