:root{font-family:"Segoe UI",Tahoma,sans-serif;background:#f4f9f4;color:#294633}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:30px 36px}a{color:#2e7d32}.back{text-decoration:none;font-size:14px}header{margin:32px 0}h1{font-size:clamp(28px,3.2vw,42px);letter-spacing:-1px;color:#2e7d32;margin:10px 0}header p{color:#687e6d;line-height:1.6}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#64836c}h2{font-size:19px;margin:0 0 18px}.workspace{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px}.panel{min-width:0;background:white;border:1px solid #dbe7dc;border-radius:14px;padding:24px;box-shadow:0 4px 14px #29463308}label{display:block;font-size:12px;font-weight:600;margin:16px 0 8px}input,select{font:inherit;color:inherit;border:1px solid #cbdccb;border-radius:6px;padding:10px;background:#fbfdfb;min-width:0}input{width:100%}#searchBox{font-size:23px;letter-spacing:2px}button{font:600 12px "Segoe UI",sans-serif;padding:10px 13px;border:0;border-radius:6px;background:#4caf50;color:white;cursor:pointer}button:hover{background:#398d40}button:disabled{opacity:.5;cursor:default}.secondary,.examples button{background:#edf5ed;color:#34713b}.secondary:hover,.examples button:hover{background:#daeada}.actions{display:flex;gap:8px;margin-top:12px}.actions input{flex:1}.actions button{flex-shrink:0}.examples{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 20px}.examples button{padding:6px 10px}output{float:right;font-weight:400}input[type=range]{padding:0;accent-color:#4caf50}hr{border:0;border-top:1px solid #e6eee6;margin:24px 0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-heading h2{margin:7px 0}.section-heading select{padding:5px;font-size:12px}.muted{color:#718174;font-size:12px;line-height:1.7}.badge{background:#edf5ed;color:#56815c;padding:7px 10px;border-radius:20px;font-size:10px;white-space:nowrap}.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:#63756a;margin:20px 0}.key{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1px solid #b8c9b8}.key.path{background:#2e7d32}.key.match{background:#e1f3df;border-color:#73ac77}.key.terminal{border:3px double #36633c}#tree-scroll{overflow:auto;background:radial-gradient(#dfe9de .8px,transparent .8px);background-size:16px 16px;border-radius:9px;border:1px solid #e5ece3;max-height:520px}svg{display:block;min-width:100%;height:auto}.edge{stroke:#cddccc;stroke-width:1.8;fill:none}.edge.path{stroke:#2e7d32;stroke-width:3}.edge.match{stroke:#82b686;stroke-width:2}.node circle{fill:#fff;stroke:#b9ccba;stroke-width:1.5}.node.match circle{fill:#e5f4e2;stroke:#76a87a}.node.path circle{fill:#2e7d32;stroke:#2e7d32}.node.selected circle{stroke:#bd8328;stroke-width:3}.node text{font-size:14px;text-anchor:middle;fill:#345b3c;dominant-baseline:middle;font-weight:600}.node.path text{fill:white}.node .word-label{font-size:10px;font-weight:400;fill:#697e6c}.trace{border-top:1px solid #e6eee6;padding-top:18px}.trace p{font-size:13px;line-height:1.7;min-height:44px}#breadcrumbs{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}#breadcrumbs span{padding:5px 9px;background:#edf5ed;border-radius:4px;font-family:monospace}#breadcrumbs .active{background:#2e7d32;color:white}#breadcrumbs .missing{background:#fff0e5;color:#a04c19}#suggestions{padding:0;margin:0;list-style:none;display:grid;gap:6px}#suggestions button{background:#f1f7ef;color:#46654c;width:100%;text-align:left;font-weight:400;display:flex;justify-content:space-between}#suggestions button:hover{background:#dcefd8}#suggestions b{color:#226c2a}#suggestions small{color:#819485}#word-bank{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}#word-bank span{font-family:monospace;font-size:12px;background:#f0f5ee;padding:5px 8px;border-radius:4px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.explanation h2{margin-top:10px}.explanation ol{padding-left:22px;font-size:14px;line-height:1.8}.explanation li{padding-bottom:10px}#insert-status{font-size:12px;line-height:1.6}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,#tree-scroll:focus-visible{outline:3px solid #c69a45;outline-offset:3px}@media(max-width:850px){main{padding:22px 16px}.workspace,.bottom-grid{grid-template-columns:1fr}.panel{padding:20px}.tree-panel .section-heading{align-items:start;flex-direction:column}#tree-scroll{max-height:460px}.legend{gap:10px}}