.surface-selects{display:flex;gap:18px;flex-wrap:wrap;margin:20px 0}.surface-selects label{flex:1;min-width:220px}.surface-selects select,#surface-row,#surface-material-scope{display:block;width:100%;margin-top:6px}.surface-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:20px;align-items:start}.surface-plan{overflow:auto;max-height:750px;background:#f5f5ed}.surface-plan svg{display:block;min-width:600px;max-width:none;width:100%;height:auto}.surface-runs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}.surface-runs .run-token{white-space:normal;display:flex;align-items:center;max-width:100%;padding:10px}.surface-runs .material-visual{flex-shrink:0}.surface-runs .block-icon{width:42px;height:42px}.surface-explanation{max-width:850px;background:#fffdf5;border:1px solid var(--line);border-radius:12px;padding:26px;margin:20px 0}.surface-explanation li{margin-bottom:12px;line-height:1.7}.surface-location{border:1px solid var(--line);border-radius:10px;padding:15px;margin-top:16px}.surface-location summary{cursor:pointer}.surface-location svg{display:block;max-width:430px;width:100%;margin:16px auto}.material-legend li small{display:block}.surface-layout .row-buttons{flex-wrap:wrap}.surface-layout .row-instruction{min-width:0}.menu-primary{flex-wrap:wrap}#surface-foot{flex-wrap:wrap}#surface-content h3{margin:20px 0}
.surface-layout>div{min-width:0}
@media(max-width:1200px){.surface-layout{grid-template-columns:minmax(0,1fr)}.surface-layout .row-instruction{order:-1}}
@media(max-width:740px){.surface-selects{display:block}.surface-selects label{display:block;margin-bottom:12px}.surface-explanation{padding:18px}.surface-plan{max-height:65vh}.surface-layout{gap:14px}.menu-primary .menu-top{flex:1 1 130px}}