.tool-drop{text-align:center;border:2px dashed var(--gray-700);background:var(--gradient-subtle);cursor:pointer;min-height:14rem;transition:border-color var(--theme-transition), background var(--theme-transition);border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:2rem;display:flex}.has-image .tool-drop{display:none}.tool-drop:hover,.tool-drop.is-over,.tool-drop:focus-within{border-color:#1d4c8f}.tool-drop-title{font-family:var(--font-brand);font-size:var(--text-lg);color:var(--gray-0)}.tool-drop-hint{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--gray-400)}.tool-workspace{gap:2rem;display:grid}.tool-workspace[hidden]{display:none}.tool-stage{background:var(--gray-900);background-image:conic-gradient(var(--gray-800) 25%, transparent 0 50%, var(--gray-800) 0 75%, transparent 0);background-size:1.25rem 1.25rem;border-radius:1rem;justify-content:center;align-items:center;padding:1rem;display:flex}.tool-stage canvas{max-width:100%;height:auto;max-height:75vh;box-shadow:var(--shadow-md);display:block}.tool-controls{flex-direction:column;gap:1.25rem;display:flex}.tool-views{border:0;flex-wrap:wrap;gap:.5rem;padding:0;display:flex}.tool-views legend,.tool-slider label{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--gray-300);margin-bottom:.5rem}.tool-views label{position:relative}.tool-views input{opacity:0;cursor:pointer;position:absolute;inset:0}.tool-views span{font-size:var(--text-sm);color:var(--gray-300);box-shadow:inset 0 0 0 1px var(--gray-700);transition:color var(--theme-transition), background var(--theme-transition);border-radius:999rem;padding:.4rem .9rem;display:inline-block}.tool-views input:checked+span{color:var(--accent-text-over);background:var(--accent-regular);box-shadow:none}.tool-views input:focus-visible+span{outline:2px solid var(--accent-light);outline-offset:2px}.tool-slider{grid-template-columns:1fr auto;align-items:baseline;display:grid}.tool-slider output{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--gray-0)}.tool-slider input{width:100%;accent-color:var(--accent-regular);grid-column:1/-1}.tool-check{font-size:var(--text-sm);color:var(--gray-200);cursor:pointer;align-items:center;gap:.6rem;display:flex}.tool-check input{accent-color:var(--accent-regular);width:1.1rem;height:1.1rem}.tool-actions{flex-wrap:wrap;gap:.6rem;margin-top:.5rem;display:flex}.tool-btn{font:inherit;font-size:var(--text-sm);color:var(--gray-200);box-shadow:inset 0 0 0 1px var(--gray-700);cursor:pointer;transition:color var(--theme-transition), box-shadow var(--theme-transition);background:0 0;border:0;border-radius:999rem;padding:.6rem 1.1rem}.tool-btn:hover,.tool-btn:focus-visible{color:var(--gray-0);box-shadow:inset 0 0 0 1px var(--gray-400)}.tool-btn.primary{width:100%;color:var(--accent-text-over);background:var(--accent-regular);box-shadow:none}.tool-btn:disabled{opacity:.6;cursor:progress}.tool-howto h2{font-size:var(--text-2xl)}.tool-howto ol{flex-direction:column;gap:.75rem;max-width:65ch;padding-left:1.25rem;display:flex}.tool-private{font-family:var(--font-typewriter);color:var(--gray-400)}@media (width>=50em){.tool-workspace{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}.tool-controls{position:sticky;top:8rem}}.tool-presets{flex-direction:column;gap:.5rem;display:flex}.tool-presets-label,.tool-select-label{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--gray-300)}.tool-presets-row{gap:.5rem;display:flex}.tool-presets select,.tool-presets input,.tool-select{border:1px solid var(--gray-700);min-width:0;font:inherit;font-size:var(--text-sm);color:var(--gray-0);background:var(--gray-900);border-radius:.6rem;flex:1;padding:.5rem .75rem}.tool-presets select:focus-visible,.tool-presets input:focus-visible,.tool-select:focus-visible{outline:2px solid var(--accent-light);outline-offset:1px}.tool-presets .tool-btn{flex:none}.tool-more{flex-direction:column;gap:1.25rem;display:flex}.tool-more>summary{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--gray-300);cursor:pointer}.tool-more[open]>summary{margin-bottom:.25rem}.tool-strip-head{justify-content:space-between;align-items:center;gap:1rem;display:flex}.tool-counter,.tool-status{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--gray-300)}.tool-status:empty{display:none}.tool-strip{scroll-snap-type:x proximity;gap:.5rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.tool-frame{width:7rem;font:inherit;font-family:var(--font-mono);color:var(--gray-400);background:var(--gray-900);box-shadow:inset 0 0 0 1px var(--gray-800);cursor:pointer;scroll-snap-align:start;border:0;border-radius:.5rem;flex-direction:column;flex:none;align-items:center;gap:.25rem;padding:.35rem;font-size:.7rem;display:flex;position:relative}.tool-frame canvas{max-width:100%;max-height:5rem;display:block}.tool-frame>span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.tool-frame[aria-current=true]{color:var(--gray-0);box-shadow:inset 0 0 0 2px var(--accent-regular)}.tool-main{flex-direction:column;gap:.75rem;min-width:0;display:flex}.tool-slider .tool-select{grid-column:1/-1;margin-top:.25rem}.tool-more:not([open]){gap:0}