html.is-track-building { overflow: hidden; }
.track-builder { position: fixed; inset: 0; z-index: 1000; overflow: auto; background: #fff; color: #171a20; font-family: 'IBM Plex Mono', 'Courier New', monospace; }
.track-builder[hidden] { display: none; }
.track-builder *, .track-builder *::before, .track-builder *::after { box-sizing: border-box; }
.track-builder button, .track-builder input { font: inherit; }
.track-builder button { cursor: pointer; }
.builder-header { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 15px clamp(20px, 3vw, 52px); border-bottom: 1px solid #e3e6ea; }
html.drive-fullscreen .track-builder .builder-header { display: grid; }
.builder-header > div:first-child { display: flex; align-items: center; gap: 10px; }
.builder-brand { display: block; width: 34px; height: auto; }
.builder-brand-name { color: #153cff; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.builder-brand-name small { display: block; margin-top: 3px; color: #929ba6; font-size: 7px; letter-spacing: .12em; }
.builder-title { text-align: center; }
.builder-title span, .builder-eyebrow { color: #87919f; font-size: 9px; letter-spacing: .14em; font-weight: 700; }
.builder-title h1 { margin: 4px 0 0; font-size: 16px; font-weight: 600; letter-spacing: .08em; }
.builder-close { justify-self: end; border: 0; background: transparent; color: #153cff; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.builder-main { max-width: 1740px; margin: 0 auto; padding: 32px clamp(20px, 3vw, 52px) 50px; border: 0; }
.builder-intro { display: flex; justify-content: flex-end; margin-bottom: 23px; }
.builder-save-area { width: 280px; display: flex; flex-direction: column; align-items: flex-end; }
.builder-save-status { width: 100%; margin: 8px 0 0; color: #153cff; font-size: 11px; line-height: 1.5; text-align: right; }
.builder-save-status:empty { display: none; }
.builder-controls p { margin: 0; color: #78828e; font-size: 11px; line-height: 1.6; }
.builder-save { min-width: 150px; padding: 14px 17px; border: 1px solid #153cff; background: #153cff; color: white; font-size: 11px; text-align: left; }
.builder-save span { float: right; }
.track-builder .builder-save:hover:not(:disabled) { background: #0b2bdb; }
.builder-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 26px; align-items: start; }
.builder-stage { min-width: 0; border: 1px solid #ccd2d9; background: #f5f7f8; }
.builder-stage-head, .builder-stage-foot { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; font-size: 10px; }
.builder-stage-head { background: #fff; border-bottom: 1px solid #e3e6ea; }
.builder-stage-head strong { display: block; margin-top: 4px; font-size: 12px; }
.builder-mode-label { color: #153cff; font-size: 10px; }
.builder-canvas-wrap { width: 100%; height: min(64vh, 720px); min-height: 380px; }
.builder-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.builder-stage-foot { min-height: 43px; border-top: 1px solid #e0e4e8; color: #7e8996; background: #fff; line-height: 1.4; }
.builder-point-count { flex: none; color: #153cff; }
.builder-controls { border-top: 1px solid #1b2026; }
.builder-controls section { border-bottom: 1px solid #dfe3e7; padding: 18px 0; }
.builder-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.builder-section-head span { color: #153cff; font-size: 10px; }
.builder-section-head h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.builder-size { display: flex; gap: 10px; align-items: end; margin-top: 13px; }
.builder-size label { flex: 1; min-width: 0; color: #79828e; font-size: 9px; }
.builder-size input { display: block; width: 100%; height: 35px; margin-top: 5px; padding: 6px 8px; border: 1px solid #cbd2da; background: #fff; color: #1b2026; }
.builder-size > span { padding-bottom: 9px; color: #a0a8b3; }
.builder-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.builder-name-label { display: block; margin-bottom: 12px; color: #79828e; font-size: 9px; }
.builder-name-label input { display: block; width: 100%; height: 35px; margin-top: 5px; padding: 6px 8px; border: 1px solid #cbd2da; background: #fff; color: #1b2026; }
.builder-buttons button { padding: 10px; border: 1px solid #d7dde3; background: #fff; color: #58616d; text-align: left; font-size: 11px; }
.builder-buttons button[aria-pressed=true] { border-color: #153cff; background: #f2f4ff; color: #153cff; }
.builder-secondary { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 13px; }
.builder-secondary button { border: 0; padding: 0; background: none; color: #153cff; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.builder-secondary button:disabled { opacity: .35; cursor: default; }
.builder-features { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 12px; }
.builder-features button { border: 1px solid transparent; padding: 7px 5px; background: #f5f6f8; color: #4f5965; text-align: left; font-size: 10px; }
.builder-features button span { color: #153cff; }
.builder-features button[aria-pressed=true] { border-color: #153cff; color: #153cff; background: #f2f4ff; }
.builder-feature-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.builder-feature-list button { border: 0; padding: 5px 0; margin-right: 10px; color: #153cff; background: transparent; font-size: 10px; text-decoration: underline; }
.builder-editor[hidden] { display: none; }
.builder-edit-name { display: block; margin: 0 0 12px; color: #153cff; font-size: 11px; }
.builder-controls .builder-feature-hint { margin: 0 0 12px; color: #6d4a00; }
.builder-controls .builder-geometry-warning { margin: 14px 0 0; color: #6d4a00; }
.builder-editor label { display: block; margin: 10px 0; color: #697480; font-size: 9px; }
.builder-editor label[hidden] { display: none; }
.builder-editor output { float: right; color: #1b2026; }
.builder-editor input { display: block; width: 100%; margin: 7px 0 0; accent-color: #153cff; }
.builder-status { min-height: 2.8em; padding-top: 12px; color: #153cff !important; }
.track-builder :focus-visible { outline: 2px solid #153cff; outline-offset: 3px; }
@media (max-width: 850px) { .builder-header { grid-template-columns: 1fr auto; } .builder-title { display: none; } .builder-workspace { grid-template-columns: 1fr; } .builder-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } .builder-canvas-wrap { height: 55vh; min-height: 320px; } }
@media (max-width: 500px) { .builder-main { padding-top: 22px; } .builder-save { min-width: 170px; } .builder-controls { display: block; } .builder-canvas-wrap { min-height: 260px; height: 42vh; } .builder-stage-foot { align-items: start; flex-direction: column; } }

.builder-entry { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; margin-bottom:16px; border:1px solid #d9dce3; }
.builder-entry > div { flex:1 1 220px; }
.builder-entry p { margin:6px 0 0; }

.builder-entry { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; margin-bottom:16px; border:1px solid #d9dce3; }
.builder-entry > div { flex:1 1 220px; }
.builder-entry p { margin:6px 0 0; }