.tool-wrap.tool-board{width:min(100% - (var(--page-gutter,1rem) * 2), var(--page-max,76rem))}[data-demo-tool].tool-board-shell{align-items:start;gap:1rem;display:grid}[data-demo-tool] .tool-stage{gap:.65rem;min-width:0;display:grid}[data-demo-tool] .tool-rail{text-align:left;background:#fff;border:1px solid #e8eaef;border-radius:10px;align-self:start;justify-items:stretch;width:100%;margin:0;padding:1rem 1.05rem 1.05rem;overflow:visible;box-shadow:0 1px 2px #0f172a0a}[data-demo-tool] .grid-controls{text-align:left;gap:.85rem;width:100%;margin:0;display:grid}@media (width>=960px){[data-demo-tool].tool-board-shell{grid-template-rows:auto auto auto;grid-template-columns:minmax(0,1fr) 19rem;align-items:start;gap:.85rem 1.5rem}[data-demo-tool] .tool-stage{display:contents}[data-demo-tool] .preview-stage{grid-area:1/1}[data-demo-tool] .form-actions{text-align:left;grid-column:1;justify-items:stretch}[data-demo-tool] .results{grid-column:1}[data-demo-tool] .tool-rail{grid-area:1/2/span 3;align-self:start;position:sticky;top:5rem}}[data-demo-tool] .size-label{color:#111827;letter-spacing:-.02em;margin:0;font-size:.95rem;font-weight:700}[data-demo-tool] .rail-block{border-top:1px solid #eef0f4;gap:.55rem;margin-top:.85rem;padding-top:.85rem;display:grid}[data-demo-tool] .rail-kicker{color:#2563eb;letter-spacing:.06em;text-transform:uppercase;margin:0;font-size:.68rem;font-weight:700}[data-demo-tool] .grid-control-split{gap:.7rem;display:grid}[data-demo-tool] .grid-control{color:#374151;gap:.35rem;font-size:.8rem;font-weight:600;display:grid}[data-demo-tool] .grid-control>span{justify-content:space-between;align-items:center;gap:.5rem;display:flex}[data-demo-tool] .grid-control b{color:#111827;font-variant-numeric:tabular-nums;background:#fff;border:1px solid #e5e7eb;border-radius:4px;justify-content:center;min-width:1.75rem;padding:.05rem .4rem;font-size:.75rem;display:inline-flex}[data-demo-tool] .grid-control input[type=range]{accent-color:#2563eb;width:100%}[data-demo-tool] .grid-control-inline{grid-template-columns:none;align-items:center;gap:.55rem;display:flex}[data-demo-tool] .grid-control-inline input[type=color]{cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:4px;width:2.4rem;height:1.7rem}[data-demo-tool] .grid-control-inline input[type=checkbox]{accent-color:#2563eb;width:.95rem;height:.95rem}[data-demo-tool] .grid-control select{color:#111827;width:100%;font:inherit;background:#fff;border:1px solid #e5e7eb;border-radius:4px;padding:.38rem .5rem;font-weight:600}[data-demo-tool] .preview-stage{cursor:pointer;background:#f4f5f7;border:1px dashed #cfd3db;border-radius:6px;min-height:16rem;padding:0;display:block;position:relative;overflow:hidden}[data-demo-tool] .stage-crop{z-index:4;color:#111827;font:inherit;cursor:pointer;background:#ffffffeb;border:1px solid #e5e7eb;border-radius:4px;padding:.32rem .55rem;font-size:.75rem;font-weight:600;display:none;position:absolute;top:.65rem;right:.65rem}[data-demo-tool] .preview-stage canvas{-o-object-fit:contain;object-fit:contain;background:#f4f5f7;width:100%;height:auto;display:block}[data-demo-tool] .preview-stage:not(.has-files) canvas{aspect-ratio:4/3}[data-demo-tool] .preview-stage .drop-inner{z-index:2;pointer-events:none;background:0 0;justify-content:center;gap:.7rem;padding:1.5rem;position:absolute;inset:0}[data-demo-tool] .preview-stage .drop-icon{color:#9ca3af;background:0 0;border-radius:0;width:2.6rem;height:2.6rem}[data-demo-tool] .preview-stage .drop-icon svg{width:2.6rem;height:2.6rem}[data-demo-tool] .preview-stage .drop-title{letter-spacing:-.02em;font-size:1rem;font-weight:600}[data-demo-tool] .overlay-pick{color:#111827;background:#ffffffdb;border:1px solid #d1d5db;border-radius:999px;padding:.38rem .9rem;font-size:.8rem;font-weight:600;display:inline-flex}[data-demo-tool] .preview-stage.has-files{cursor:default;border-style:solid;border-color:#e5e7eb;min-height:0;padding:0}[data-demo-tool] .preview-stage.has-files canvas{background:#fff;min-height:0}[data-demo-tool] .preview-stage.has-files .drop-inner{display:none}[data-demo-tool] .preview-stage.has-files .stage-crop{display:inline-flex}[data-demo-tool] .preview-stage.is-over{border-color:#2563eb;transform:none}[data-demo-tool] .rail-foot{color:#6b7280;text-align:left;border-top:1px solid #eef0f4;margin:.85rem 0 0;padding-top:.8rem;font-size:.75rem;line-height:1.45}[data-demo-tool] .run-status:empty{display:none}[data-demo-tool] .run-status{color:#374151;margin:.55rem 0 0;font-size:.75rem;line-height:1.4}[data-demo-tool] .grid-advanced{border-top:1px solid #e5e7eb;margin:.1rem 0 0;padding-top:.7rem;overflow:visible}[data-demo-tool] .grid-advanced summary{cursor:pointer;color:#111827;font-size:.8rem;font-weight:650;list-style:none}[data-demo-tool] .grid-advanced summary::-webkit-details-marker{display:none}[data-demo-tool] .grid-advanced summary:after{content:" +";color:#9ca3af;font-weight:600}[data-demo-tool] .grid-advanced[open] summary:after{content:" −"}[data-demo-tool] .grid-advanced .grid-controls{margin-top:.7rem}[data-demo-tool] .rail-head{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.15rem;display:flex}[data-demo-tool] .start-over{color:#6b7280;font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-size:.75rem;font-weight:600}[data-demo-tool] .start-over:hover{color:#b91c1c}[data-demo-tool] .export-row{flex-wrap:wrap;gap:.4rem;display:flex}[data-demo-tool] .export-with-help{flex:10.5rem;align-items:center;gap:.35rem;min-width:0;display:flex}[data-demo-tool] .export-with-help .export-btn{flex:auto}[data-demo-tool] .ctrl-label{align-items:center;gap:.35rem;display:inline-flex}[data-demo-tool] .ctrl-help{flex-shrink:0;display:inline-flex;position:relative}[data-demo-tool] .ctrl-help-btn{color:#6b7280;width:1.05rem;height:1.05rem;font:inherit;cursor:help;background:#fff;border:1px solid #d1d5db;border-radius:999px;padding:0;font-size:.68rem;font-weight:700;line-height:1}[data-demo-tool] .ctrl-help-btn:hover,[data-demo-tool] .ctrl-help-btn:focus-visible{color:#2563eb;border-color:#2563eb;outline:none}[data-demo-tool] .ctrl-help-pop{--tip-x:-50%;z-index:12;color:#111827;text-align:left;white-space:normal;opacity:0;width:max-content;max-width:15.75rem;transform:translate(var(--tip-x), 4px) scale(.97);pointer-events:none;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:.5rem .65rem;font-size:.72rem;font-weight:500;line-height:1.4;transition:opacity .14s cubic-bezier(.23,1,.32,1),transform .14s cubic-bezier(.23,1,.32,1);position:absolute;top:calc(100% + .4rem);left:50%;box-shadow:0 8px 24px #0f172a1f}[data-demo-tool] .ctrl-help--end .ctrl-help-pop{--tip-x:0%;left:auto;right:0}[data-demo-tool] .ctrl-help--above .ctrl-help-pop{top:auto;bottom:calc(100% + .4rem)}[data-demo-tool] .ctrl-help--side .ctrl-help-pop{--tip-x:0%;top:50%;left:auto;right:calc(100% + .5rem);transform:translateY(-50%)scale(.97)}[data-demo-tool] .ctrl-help.is-open .ctrl-help-pop,[data-demo-tool] .ctrl-help:focus-within .ctrl-help-pop{opacity:1;transform:translate(var(--tip-x), 0) scale(1)}[data-demo-tool] .ctrl-help--side.is-open .ctrl-help-pop,[data-demo-tool] .ctrl-help--side:focus-within .ctrl-help-pop{transform:translateY(-50%)scale(1)}@media (hover:hover) and (pointer:fine){[data-demo-tool] .ctrl-help:hover .ctrl-help-pop{opacity:1;transform:translate(var(--tip-x), 0) scale(1)}[data-demo-tool] .ctrl-help--side:hover .ctrl-help-pop{transform:translateY(-50%)scale(1)}}@media (width<=47.49rem){[data-demo-tool] .ctrl-help--above .ctrl-help-pop{top:calc(100% + .35rem);bottom:auto}[data-demo-tool] .ctrl-help--side .ctrl-help-pop{top:calc(100% + .35rem);left:auto;right:0;transform:translateY(4px)scale(.97)}[data-demo-tool] .ctrl-help--side.is-open .ctrl-help-pop,[data-demo-tool] .ctrl-help--side:focus-within .ctrl-help-pop{transform:translate(0)scale(1)}}@media (prefers-reduced-motion:reduce){[data-demo-tool] .ctrl-help-pop{transition:opacity .12s;transform:none}}[data-demo-tool] .export-btn{min-width:0;min-height:2.75rem;font:inherit;letter-spacing:-.01em;text-align:center;white-space:nowrap;cursor:pointer;border-radius:6px;flex:10.5rem;justify-content:center;align-items:center;padding:.5rem .75rem;font-size:.8125rem;font-weight:650;transition:background .14s,border-color .14s,transform .12s cubic-bezier(.23,1,.32,1);display:inline-flex}[data-demo-tool] .export-btn:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){[data-demo-tool] .export-btn-upload:hover,[data-demo-tool] .export-btn-jpg:hover,[data-demo-tool] .export-btn-hires:hover{background:#f3f4f6;border-color:#c5c9d2}[data-demo-tool] .export-btn-png:hover{background:#1d4ed8;border-color:#1d4ed8}}[data-demo-tool] .export-btn-upload,[data-demo-tool] .export-btn-jpg,[data-demo-tool] .export-btn-hires{color:#111827;background:#fff;border:1px solid #d8dbe2}[data-demo-tool] .export-btn-png{color:#fff;background:#2563eb;border:1px solid #2563eb}[data-demo-tool] .hires-mark{color:#2563eb;font-variant-numeric:tabular-nums;margin-left:.3rem;font-weight:700}[data-demo-tool] .view-link{color:#4b5563;font:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-size:.8rem;font-weight:600}[data-demo-tool] .view-link:hover{color:#111827}[data-demo-tool] .results{gap:.35rem;padding-top:0}[data-demo-tool] .results-title{letter-spacing:-.02em;font-size:.84rem;font-weight:600}[data-demo-tool] .thumb-item-note{color:#6b7280;margin:0;font-size:.75rem}[data-demo-tool] .chip-button{width:auto;min-height:2.1rem;padding:.4rem .75rem}.dark [data-demo-tool] .tool-rail{box-shadow:none;background:#111;border-color:#2a2a2a}.dark [data-demo-tool] .rail-block,.dark [data-demo-tool] .rail-foot,.dark [data-demo-tool] .grid-advanced{border-color:#2a2a2a}.dark [data-demo-tool] .preview-stage{background:#111;border-color:#333}.dark [data-demo-tool] .export-btn-upload,.dark [data-demo-tool] .export-btn-jpg,.dark [data-demo-tool] .export-btn-hires,.dark [data-demo-tool] .overlay-pick,.dark [data-demo-tool] .stage-crop,.dark [data-demo-tool] .grid-control b,.dark [data-demo-tool] .grid-control select,.dark [data-demo-tool] .grid-control-inline input[type=color]{color:#f5f5f5;background:#141414;border-color:#2a2a2a}.dark [data-demo-tool] .size-label{color:#f5f5f5}.dark [data-demo-tool] .start-over,.dark [data-demo-tool] .thumb-item-note,.dark [data-demo-tool] .rail-foot{color:#9ca3af}.dark [data-demo-tool] .ctrl-help-btn{color:#a1a1aa;background:#141414;border-color:#3f3f46}.dark [data-demo-tool] .ctrl-help-pop{color:#f5f5f5;background:#1a1a1a;border-color:#2a2a2a;box-shadow:0 8px 24px #0006}.thumb-viewer{border:1px solid var(--hairline);background:var(--surface-strong);width:min(100% - 2rem,52rem);color:var(--text);border-radius:1rem;padding:0}.thumb-viewer::backdrop{background:#14181e73}.viewer-inner{gap:.65rem;padding:1.1rem 1.15rem 1.2rem;display:grid}.viewer-kicker,.viewer-inner h3{margin:0}.viewer-kicker{color:var(--muted);font-size:.75rem;font-weight:600}.viewer-preview{background:var(--results-bg);border-radius:.55rem;max-height:min(72vh,40rem);overflow:auto}.viewer-preview img{-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block}.crop-stage{background:#111827;border-radius:.55rem;max-height:min(60vh,36rem);overflow:auto}.crop-stage canvas{-o-object-fit:contain;object-fit:contain;touch-action:none;cursor:crosshair;width:100%;height:auto;max-height:min(60vh,36rem);margin:0 auto;display:block}.crop-aspect,.crop-rotate,.crop-footer{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.crop-aspect-label,.crop-size{color:var(--muted);font-size:.75rem;font-weight:600}.crop-straighten{text-align:left;width:100%}[data-aspect][aria-pressed=true],[data-crop-apply]{background:var(--action);color:#fff;border-color:var(--action)}.crop-footer{justify-content:space-between}@media (width<=640px){[data-demo-tool] .thumb-item-actions{width:100%}[data-demo-tool] .chip-button{flex:auto}}