#chart-editor .chart-viewport{display:block;position:relative;height:65vh;min-height:340px;max-height:none;padding:0;overflow:hidden;isolation:isolate}
.chart-stage{position:absolute;inset:28px 0 0 28px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
#chart-editor .chart-viewport{flex:none}
#chart-editor .chart-stage canvas{max-width:none;max-height:none;width:auto;height:auto;flex:none;touch-action:none}
.chart-ruler{position:absolute;z-index:2;pointer-events:none}
#chart-editor canvas.chart-detail{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;pointer-events:none;z-index:1}
#chart-editor .canvas-toolbar label[hidden]{display:none}
#chart-editor canvas.chart-ruler.horizontal{left:0;top:0;width:100%;height:28px}
#chart-editor canvas.chart-ruler.vertical{left:0;top:0;width:28px;height:100%}
.zoom-controls{display:flex;align-items:center;gap:8px;margin-left:auto}.zoom-controls button,.zoom-controls select{height:34px;min-width:34px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:4px;font:inherit;cursor:pointer}.zoom-controls output{width:48px;text-align:center;font:12px sans-serif}.canvas-toolbar{gap:10px;flex-wrap:wrap}
@media(max-width:720px){#chart-editor .chart-viewport{height:55vh;min-height:300px}.zoom-controls{gap:5px}}
.chart-workspace{display:block;min-width:0}.chart-colors{padding:16px 24px;border-top:1px solid var(--line);min-width:0}.chart-colors h3{font-size:15px;margin:10px 0}.chart-workspace .canvas-panel{min-width:0}.focus-mode .chart-colors{display:none}
@media(min-width:721px){.chart-workspace{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:stretch}.chart-colors{padding:18px 12px;border-top:0;border-left:1px solid var(--line);display:flex;flex-direction:column;max-height:calc(65vh + 110px)}#chart-editor .chart-colors #colorList{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;gap:8px}#chart-editor .chart-colors #colorList button{width:100%;justify-content:flex-start;font-size:12px;white-space:normal;text-align:left}.chart-colors .color-swatch{flex:0 0 26px}.focus-mode .chart-workspace{grid-template-columns:minmax(0,1fr)}}
@media(min-width:1100px){.chart-workspace{grid-template-columns:minmax(0,1fr) 230px}}
@media(max-width:720px){.chart-colors{padding:12px}}