.online-tool{--tool-panel:color-mix(in srgb, var(--marker-panel) 94%, transparent);--tool-control:color-mix(in srgb, var(--sl-color-bg) 68%, var(--marker-panel));width:min(100%,92rem);margin:1.25rem auto 4rem}.online-tool [hidden]{display:none!important}.tool-page-navigation{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.tool-back-link{border:1px solid var(--marker-border);min-height:2rem;color:var(--marker-ink);background:var(--tool-panel);white-space:nowrap;border-radius:999px;align-items:center;gap:.45rem;padding:.35rem .72rem;font-size:.78rem;font-weight:700;text-decoration:none;transition:border-color .15s,background .15s;display:inline-flex}.tool-back-link:hover{border-color:color-mix(in srgb, var(--marker-blue) 58%, var(--marker-border));background:color-mix(in srgb, var(--marker-blue) 10%, var(--tool-panel))}.tool-back-link:focus-visible{outline:3px solid color-mix(in srgb, var(--marker-blue) 35%, transparent);outline-offset:2px}.tool-local-badge{border:1px solid var(--marker-border);min-height:2rem;color:var(--marker-muted);background:var(--tool-panel);border-radius:999px;align-items:center;gap:.5rem;margin:0;padding:.35rem .75rem;font-size:.78rem;font-weight:650;display:inline-flex}.tool-local-badge span{background:#3bb273;border-radius:50%;width:.48rem;height:.48rem;box-shadow:0 0 0 .22rem #3bb2732e}.tool-workbench{border:1px solid var(--marker-border);background:var(--tool-panel);border-radius:1.25rem;grid-template-columns:minmax(19rem,.72fr) minmax(30rem,1.28fr);display:grid;overflow:clip;box-shadow:0 1.5rem 4rem #0000001a}.tool-controls,.tool-output{min-width:0}.tool-controls{border-inline-end:1px solid var(--marker-border)}.tool-section{border-bottom:1px solid var(--marker-border);padding:clamp(1rem,2.5vw,1.6rem)}.tool-section:last-child{border-bottom:0}.tool-section-heading,.tool-output-heading{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.tool-section-heading{justify-content:flex-start}.tool-section-heading h2,.tool-output-heading h2{letter-spacing:-.025em;margin:0;font-size:clamp(1.08rem,2vw,1.3rem)}.tool-step,.tool-eyebrow{color:var(--marker-coral);font-family:var(--sl-font-mono);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;font-weight:750}.tool-file-picker{border:1px dashed color-mix(in srgb, var(--marker-blue) 60%, var(--marker-border));min-height:5.4rem;color:var(--marker-ink);background:color-mix(in srgb, var(--marker-blue) 7%, transparent);cursor:pointer;border-radius:.85rem;align-items:center;gap:.85rem;padding:1rem;transition:border-color .15s,background .15s;display:flex}.tool-file-picker:hover,.tool-file-picker:focus-within{border-color:var(--marker-blue);background:color-mix(in srgb, var(--marker-blue) 12%, transparent)}.tool-file-picker input{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.tool-file-icon{width:2.6rem;height:2.6rem;color:var(--marker-ink);background:color-mix(in srgb, var(--marker-blue) 24%, var(--tool-control));border-radius:.72rem;flex:none;place-items:center;font-size:1.35rem;display:grid}.tool-file-picker strong,.tool-file-picker small{display:block}.tool-file-picker strong{font-size:.9rem}.tool-file-picker small,.tool-help,.tool-field small{color:var(--marker-muted);margin-top:.28rem;font-size:.72rem;line-height:1.45}.tool-field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin-bottom:1rem;display:grid}.tool-field{min-width:0;color:var(--marker-muted);gap:.42rem;margin:0;font-size:.75rem;font-weight:650;display:grid}.tool-field-wide{grid-column:1/-1;margin-bottom:.9rem}.tool-field>span:first-child,.tool-range-field>span:first-child{justify-content:space-between;gap:.75rem;display:flex}.tool-field :is(input[type=text],input[type=password],select,textarea){border:1px solid var(--marker-border);width:100%;min-height:2.8rem;color:var(--marker-ink);background:var(--tool-control);font:inherit;box-shadow:none;border-radius:.68rem;margin:0;padding:.65rem .78rem;font-size:.82rem;font-weight:580}.tool-field select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--marker-muted) 50%), linear-gradient(135deg, var(--marker-muted) 50%, transparent 50%);background-position:calc(100% - 1rem),calc(100% - .7rem);background-repeat:no-repeat;background-size:.32rem .32rem,.32rem .32rem;padding-inline-end:2.3rem}.tool-field textarea{resize:vertical;min-height:8rem;font-family:var(--sl-font-mono);line-height:1.55}.tool-field :is(input,select,textarea):focus-visible,.tool-button:focus-visible,.tool-file-picker:focus-within{outline:3px solid color-mix(in srgb, var(--marker-blue) 35%, transparent);outline-offset:2px}.tool-range-field output{color:var(--marker-ink);font-family:var(--sl-font-mono);font-size:.68rem}.tool-range-field input[type=range]{width:100%;accent-color:var(--marker-blue)}.tool-check-field{border:1px solid var(--marker-border);background:var(--tool-control);border-radius:.68rem;flex-direction:row;align-items:center;min-height:2.8rem;padding:.65rem .78rem;display:flex}.tool-check-field input{width:1.05rem;height:1.05rem;accent-color:var(--marker-blue);margin:0}.tool-actions{flex-wrap:wrap;gap:.55rem;display:flex}.tool-button{border:1px solid var(--marker-border);min-height:2.75rem;color:var(--marker-ink);background:var(--tool-control);font:inherit;cursor:pointer;border-radius:.72rem;justify-content:center;align-items:center;padding:.65rem .95rem;font-size:.78rem;font-weight:700;display:inline-flex}.tool-button:hover:not(:disabled){border-color:color-mix(in srgb, var(--marker-blue) 55%, var(--marker-border));background:color-mix(in srgb, var(--marker-blue) 12%, var(--tool-control))}.tool-button-primary{border-color:var(--marker-blue);color:#111827;background:var(--marker-blue)}:root[data-theme=light] .tool-button-primary{color:#fff}.tool-button:disabled{opacity:.45;cursor:not-allowed}.tool-progress{background:var(--marker-border);border-radius:999px;height:.42rem;margin-top:1rem;overflow:hidden}.tool-progress span{background:var(--marker-blue);width:0;height:100%;transition:width .18s;display:block}.tool-output{top:calc(var(--sl-nav-height) + 1rem);align-self:start;padding:clamp(1rem,3vw,1.8rem);position:sticky}.tool-eyebrow{margin-bottom:.35rem;display:block}.tool-status{border:1px solid var(--marker-border);max-width:16rem;min-height:2rem;color:var(--marker-muted);background:var(--tool-control);border-radius:999px;align-items:center;gap:.38rem;padding:.32rem .65rem;font-size:.7rem;font-weight:650;display:inline-flex}.tool-status:before{background:var(--marker-muted);content:"";border-radius:50%;flex:none;width:.42rem;height:.42rem}.tool-status[data-state=busy]:before{background:#f5b942;animation:1s infinite alternate tool-pulse}.tool-status[data-state=success]:before{background:#3bb273}.tool-status[data-state=error]:before{background:var(--marker-coral)}@keyframes tool-pulse{to{opacity:.35}}.tool-preview-frame{border:1px solid var(--marker-border);background:linear-gradient(45deg, color-mix(in srgb, var(--marker-border) 30%, transparent) 25%, transparent 25%) 0 0 / 1.2rem 1.2rem, linear-gradient(-45deg, color-mix(in srgb, var(--marker-border) 30%, transparent) 25%, transparent 25%) 0 0 / 1.2rem 1.2rem, var(--sl-color-bg);border-radius:.95rem;place-items:center;min-height:clamp(18rem,46vw,40rem);display:grid;position:relative;overflow:hidden}.tool-preview-frame img{object-fit:contain;width:100%;height:100%;max-height:42rem;display:block}.tool-empty{color:var(--marker-muted);font-size:.85rem}.tool-result{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-top:.85rem;display:grid}.tool-result>div{border:1px solid var(--marker-border);background:var(--tool-control);border-radius:.68rem;padding:.75rem}.tool-result small,.tool-result strong{display:block}.tool-result small{color:var(--marker-muted);font-size:.67rem}.tool-result strong{overflow-wrap:anywhere;margin-top:.22rem;font-size:.82rem}.tool-result-table{border-collapse:collapse;width:100%;margin-top:.85rem;font-size:.72rem}.tool-result-table :is(th,td){border:1px solid var(--marker-border);text-align:start;padding:.58rem}.tool-json{border:1px solid var(--marker-border);background:var(--sl-color-bg);max-height:24rem;color:var(--marker-ink);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:.75rem;margin-top:.85rem;padding:.9rem;font-size:.7rem;line-height:1.55;overflow:auto}.tool-output-download{width:100%;margin-top:.85rem}.tool-developer-link{color:var(--marker-muted);text-align:center;margin:1rem 0 0;font-size:.8rem}.tool-developer-link a{font-weight:700}.tool-sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=64rem){.tool-workbench{grid-template-columns:minmax(17rem,.82fr) minmax(24rem,1.18fr)}}@media (width<=48rem){.online-tool{margin-top:.75rem}.tool-workbench{display:block}.tool-controls{border-inline-end:0;border-bottom:1px solid var(--marker-border)}.tool-output{position:static}.tool-preview-frame{min-height:18rem}}@media (width<=30rem){.tool-page-navigation{flex-direction:column;align-items:flex-start}.tool-local-badge{max-width:100%}.tool-field-grid{grid-template-columns:1fr}.tool-field-wide{grid-column:auto}.tool-actions .tool-button{width:100%}.tool-output-heading{align-items:flex-start}.tool-result{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.tool-status[data-state=busy]:before{animation:none}}