:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) .tool-workspace{grid-template-columns:360px minmax(0,1fr)}.tool-chart .tool-workspace{grid-template-columns:380px minmax(0,1fr)}:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) .tool-main{position:sticky;top:24px}.tool-chart .tool-controls,.tool-maze .tool-controls{display:block}:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) :is(input,select){min-width:0}:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) .tool-controls label{font-size:15px;line-height:1.6}.maker-stage{display:grid;place-items:center;height:clamp(420px,calc(100vh - 240px),630px);padding:23px;overflow:hidden}.maker-svg-preview{display:grid;place-items:center;width:100%;height:100%;min-height:0;min-width:0;overflow:hidden}.maker-svg-preview>svg,.tool-arrow #arrow-preview{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.maker-preview-note{padding:17px 23px;border-top:1px solid var(--site-line);color:var(--site-muted);font-size:14px;line-height:1.75}.tool-page .maker-controls-divider{padding-top:25px;border-top:1px solid var(--site-line)}.maker-option-card{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:17px;border:1px solid #dce4d4;border-radius:13px;background:#f1f5eb}.maker-option-card:has(input:checked){border-color:#bdcff0;background:#ebf2ff}.maker-option-card>label{flex:1;cursor:pointer}.maker-option-card>span{font-size:12px;color:#6f8099}.tool-page .maker-option-card label{display:flex;align-items:center;gap:12px;font-size:14px}.tool-animate .tool-panel-header>div:first-child{min-width:0;flex:1}.tool-animate .tool-panel-header #animate-file-name{max-width:330px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:5px;font-size:13px;color:var(--site-muted)}.tool-animate #svg-dimensions{font:12px ui-monospace,monospace;color:#7185a3}.tool-animate #svg-preview-wrapper{width:100%;height:100%;min-width:0;min-height:0;display:grid;place-items:center;border-radius:12px;border:1px solid transparent;overflow:visible}.tool-animate #svg-preview-wrapper>svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}.tool-animate .tool-empty h3{font-size:24px}.tool-animate .tool-empty>p{font-size:15px;line-height:1.8;font-weight:400;color:var(--site-muted);margin-top:12px}.tool-animate #animate-browse>.docs-icon{width:19px;height:19px}.tool-animate .animate-empty-upload{display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#2563eb;font-size:14px;font-weight:600;padding:9px 13px;margin-top:17px;background:#eaf1ff;border:1px solid #c7d8f4;border-radius:9px}.animate-empty-upload .docs-icon{width:16px;height:16px}.tool-page .maker-replay{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:8px;min-height:40px;padding:9px 12px;border:1px solid #cad9f1;border-radius:10px;background:#edf3ff;color:#315fa6;font-size:13px;font-weight:600}.maker-replay .docs-icon{width:17px;height:17px}.tool-page .maker-replay:disabled{color:#8d99ab;background:#f0f2ef;border-color:#e2e5df;cursor:default}.animate-timing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.animate-timing-grid>div:last-child{grid-column:1/-1}.tool-animate #controls-toast,.tool-chart #chart-toast{border:1px solid #ccdcf4;background:#eaf1ff;color:#355f9e;border-radius:11px;padding:13px 15px;font-size:14px;line-height:1.7}.tool-animate #controls-toast.text-red-600,.tool-chart #chart-toast.text-red-700{background:#fcefed;color:#aa4b4b;border-color:#efd3ce}.tool-page .maker-code-output .tool-panel-header{border-bottom:0}.tool-page .maker-code-output h3{font-size:16px;letter-spacing:-.02em;text-transform:none;color:#496286}.tool-page .maker-code-output button{min-height:35px;padding:6px 10px;font-size:13px;border:1px solid #d3dfef;background:#edf3ff;color:#4a6b9d;border-radius:9px}.tool-page .maker-code-output pre{margin:0;border-radius:0;box-shadow:none;background:#f3f5f1;color:#47627f;border-top:1px solid var(--site-line);padding:21px;max-height:280px;font:13px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace}.tool-page .maker-code-output code{font:inherit;white-space:pre}.chart-series-row{padding:17px;border:1px solid #dce3e9;border-radius:13px;background:#fbfaf6}.chart-row-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.chart-row-heading>span{font-size:12px;font-weight:600;color:#6b83a6}.tool-chart .chart-data-remove{display:grid;place-items:center;min-height:32px;width:32px;padding:6px;border:1px solid #ecd9d3;border-radius:8px;background:#fcf1ee;color:#b65d57}.tool-chart .chart-data-remove:hover{background:#fbe5df;border-color:#dba99b}.chart-data-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}.tool-chart .chart-data-fields label{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:13px;color:#68809f}.chart-series-label{grid-column:1/-1}.tool-chart .chart-data-fields input{width:100%}.tool-chart #chart-add-series{min-height:40px;padding:8px 11px;color:#315fa6;background:#edf3ff;border:1px solid #c6d6ef;font-size:13px}.tool-chart #chart-dimensions{font:12px ui-monospace,monospace;color:#6c82a4}.tool-chart .tool-panel-header>div:first-child>p{font-size:13px;margin-top:5px}.tool-maze #maze-seed{width:0;flex:1}.tool-maze #maze-seed-random{flex:none;padding:11px;font-size:13px;background:#edf3ff;color:#3b64a5;border-color:#c8d8f0}.tool-maze #maze-seed-random svg{flex:none}.tool-maze .tool-panel-header>div:last-child{color:#7084a3;font-size:12px;line-height:1.75}.tool-maze #maze-preview-cells{margin-top:4px;font-size:11px}.tool-maze #maze-controls>div:has(#maze-show-solution){flex-direction:column;align-items:stretch;gap:9px}.tool-maze #maze-controls>div:has(#maze-show-solution)>span{padding-left:30px}.tool-maze #maze-controls label.uppercase{text-transform:none;letter-spacing:0;font-size:13px}.arrow-measure-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;padding-block:23px;border-block:1px solid var(--site-line)}.tool-arrow .arrow-measure-grid>div>div:first-child{display:block;margin-bottom:8px}.tool-arrow .arrow-measure-grid label{display:block;font-size:14px}.arrow-measure-grid span{display:block;margin-top:4px;font:12px ui-monospace,monospace;color:#6f83a1}.tool-arrow #circle-completion-container{padding:18px;border:1px solid #c7d8f2;border-radius:12px;background:#edf3ff}@media(max-width:1150px){:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) .tool-workspace{grid-template-columns:320px minmax(0,1fr)}.tool-chart .tool-workspace{grid-template-columns:340px minmax(0,1fr)}.tool-animate #svg-dimensions{display:none}}@media(max-width:850px){:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) .tool-workspace{grid-template-columns:290px minmax(0,1fr);gap:18px}.tool-chart .tool-workspace{grid-template-columns:310px minmax(0,1fr)}.maker-stage{height:450px;padding:15px}.tool-animate .tool-panel-header #animate-file-name{max-width:160px}.tool-chart .tool-panel-header>div:first-child>p{display:none}.tool-maze .tool-panel-header{align-items:flex-start}.tool-maze .tool-panel-header>div:last-child{text-align:left}.tool-page .maker-preview-note{font-size:13px}}@media(max-width:700px){:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) .tool-workspace{display:flex;flex-direction:column;gap:20px}:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) .tool-main,:is(.tool-animate,.tool-chart,.tool-maze,.tool-arrow) .tool-controls{width:100%;min-width:0}:is(.tool-chart,.tool-maze,.tool-arrow) .tool-main{order:-1}.tool-animate .tool-controls{display:contents}.tool-animate .animate-source{order:-2;width:100%}.tool-animate .tool-main{order:-1}.tool-animate .animate-settings{width:100%}.maker-stage{height:370px;padding:14px}.tool-page .maker-preview-note{padding:16px 19px}.tool-page .maker-code-output pre{font-size:12px;padding:17px}.tool-animate .tool-panel-header #animate-file-name{max-width:200px}.tool-maze .tool-panel-header>div:last-child{text-align:right}}@media(max-width:480px){.maker-stage{height:330px;padding:12px}.tool-chart .maker-stage{height:260px}.tool-animate .maker-stage{height:370px}.tool-animate .tool-empty-art{width:195px}.tool-animate .tool-empty h3{font-size:22px}.tool-animate .tool-empty p{font-size:14px}.tool-animate .tool-panel-header #animate-file-name{max-width:145px}.tool-page .maker-replay{padding:8px 9px;font-size:12px;gap:5px}.tool-maze .tool-panel-header>div:last-child{text-align:left}.tool-maze #maze-preview-cells{font-size:12px}.tool-chart .chart-series-row{padding:14px}.arrow-measure-grid{gap:22px 12px}.tool-arrow .arrow-measure-grid label{font-size:13px}}@media(prefers-reduced-motion:reduce){.tool-page .maker-replay{transition:none}}