.builder-shell{height:100dvh;display:grid;grid-template-rows:66px minmax(0,1fr)}
.builder-workspace{display:grid;grid-template-columns:240px minmax(260px,1fr) 288px;min-height:0}
.builder-library,.builder-inspector{background:white;overflow:auto;padding:20px;border-right:1px solid var(--line)}.builder-inspector{border-left:1px solid var(--line);border-right:0}
.builder-stage{display:grid;grid-template-rows:58px minmax(100px,1fr) 42px auto;min-height:0;min-width:0}
.builder-stagebar,.builder-caption{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:8px}.builder-caption{font-size:12px;color:var(--muted)}.builder-caption>div{display:flex;gap:6px}.builder-caption select{font-size:12px;padding:5px}
.builder-viewport{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden;background:#e8e9e7;margin:0 16px;border-radius:8px;padding:20px}.builder-viewport canvas{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 8px 40px #00000010}.builder-viewport.drawing{cursor:crosshair}.builder-viewport.surround-white{background:white}.builder-viewport.surround-dark{background:#242529}
.builder-timeline{background:white;margin:6px 16px 16px;border:1px solid var(--line);border-radius:10px;padding:12px}.timeline-heading{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:12px}.timeline-heading output{font-family:var(--mono)}.timeline-heading input{width:64px;padding:5px}.timeline-heading select{padding:5px}.builder-timeline>input{width:100%;margin:8px 0}
.builder-range-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:8px;margin:5px 0;font-size:12px}.builder-range-track{height:23px;background:#f4f4f8;position:relative;border-radius:4px;overflow:hidden}.builder-range-block{position:absolute;top:1px;bottom:1px;border:0;background:#8070e9;color:white;border-radius:3px;cursor:pointer;padding:0 8px;font-size:11px;overflow:hidden}.builder-range-row:nth-child(2n) .builder-range-block{background:#38a58c}
#builderKeys{display:flex;gap:5px;flex-wrap:wrap}.key-chip{border:1px solid #dcd8f2;background:#f7f5ff;border-radius:4px;font-size:11px;padding:4px;cursor:pointer}
.builder-layer{border:1px solid var(--line);border-radius:8px;margin:7px 0;padding:10px;display:grid;grid-template-columns:1fr auto;gap:5px;cursor:pointer;background:white}.builder-layer.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.builder-layer>span{font-weight:600}.builder-layer small{grid-column:1/-1;color:var(--muted);font-size:11px}.layer-actions{display:flex;gap:3px}.layer-actions button{background:none;border:0;padding:3px;cursor:pointer}
.effect-edit{border:1px solid var(--line);border-radius:8px;padding:12px;margin:12px 0}.effect-edit summary{font-weight:600;cursor:pointer}.effect-heading{display:flex;gap:4px;align-items:center}.effect-heading strong{flex:1}.effect-heading button{padding:3px 7px}.effect-edit .pf-control{margin:14px 0}.expose-button{font-size:11px;color:var(--accent);padding:3px 0;border:0;background:none;cursor:pointer}
.macro-card{padding:12px;border:1px solid var(--line);border-radius:8px;margin:12px 0}.macro-card>input{font-weight:600;width:100%}.macro-limits{display:grid;grid-template-columns:1fr 1fr;gap:6px}.macro-limits input{width:100%}.macro-card p{font-size:11px;color:var(--muted);overflow-wrap:anywhere}.pf-builder select{width:100%}.pf-builder .pf-topbar input{border:0;background:transparent;font-weight:600;font-size:15px;max-width:230px}.pf-topbar>div{display:flex;gap:12px;align-items:center}#saveState{font-size:12px;color:var(--muted)}
.destination-links{display:grid;gap:5px}.destination-links button{text-align:left;padding:9px 0;background:none;border:0;color:var(--accent);cursor:pointer}
.is-recording .builder-library,.is-recording .builder-inspector,.is-recording .pf-topbar{pointer-events:none;opacity:.6}
@media(max-width:1200px){.builder-workspace{grid-template-columns:200px minmax(220px,1fr) 250px}.builder-library,.builder-inspector{padding:14px}.pf-builder .pf-topbar{padding:10px}}
@media(max-width:850px){.builder-workspace{grid-template-columns:180px minmax(280px,1fr);overflow:auto}.builder-inspector{grid-column:1/-1;max-height:440px}.builder-stage{min-height:650px}.builder-shell{height:auto;min-height:100dvh}.builder-library{max-height:650px}.pf-topbar{flex-wrap:wrap;height:auto}}

.is-recording .builder-timeline,.is-recording .builder-caption,.is-recording #builderModes,.is-recording #compareSource{pointer-events:none;opacity:.6}