:root{--line:.5mm;--dim:#888;--edge:#555;--edge-shadow:#444;--link-underline:underline 2px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font:14px/1.5 ui-monospace,Consolas,monospace}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}body{margin:0;padding:8px}a,:any-link{-webkit-text-decoration:var(--link-underline);text-decoration:var(--link-underline)}#root{max-width:100%}.app-drop-target{min-height:calc(100vh - 16px)}.app-drop-target.dragging{outline:2px dashed var(--dim);outline-offset:-2px;border-radius:8px}.app-header{align-items:baseline;gap:8px;padding:8px 0;display:flex}.app-header h1{margin:0}.toolbar{justify-content:space-between;align-items:center;gap:8px;padding:8px 0;display:flex}.toolbar-group{align-items:center;gap:4px;display:flex}.toolbar-actions{gap:8px;display:flex}.commit-toolbar{background:color-mix(in srgb, Canvas 80%, CanvasText 20%);border-radius:4px;padding:8px}.tree-row{align-items:center;padding:1px 0;display:flex;position:relative}.output-controls{margin-left:auto}.preview{z-index:3;border:1px solid var(--dim);object-fit:contain;background:canvas;max-width:200px;max-height:200px;display:none;position:absolute;top:100%;left:0}.folder-back:hover .preview{pointer-events:none;display:block}.tree-row:has(.file-name:hover) .preview{pointer-events:none;display:block}.file-name{cursor:pointer}.file-name:focus{-webkit-text-decoration:var(--link-underline);text-decoration:var(--link-underline);outline:none;animation:.6s pulse}.folder-name{cursor:pointer}.folder-name:hover{-webkit-text-decoration:var(--link-underline);text-decoration:var(--link-underline)}.size-select,.orientation-select,.role-select{font:inherit;margin-left:8px}.output-setting{font:inherit}input.output-setting{width:4em}.back-row{color:var(--dim);font-style:italic}.file-info{color:var(--dim);font-size:12px}.mismatch-warn{color:orange;margin-left:1em;font-weight:700}.excluded{color:var(--dim);opacity:.4}.strikethrough{color:var(--dim);text-decoration:line-through}.dim{color:var(--dim)}pre{background:var(--lightningcss-light,#f4f4f4)var(--lightningcss-dark,#1a1a1a);border-radius:4px;max-height:500px;padding:12px;font-size:12px;overflow:auto}.sizes-list{margin:0;padding:0}.sizes-entry{gap:8px;padding:2px 0;display:flex}.sizes-entry dt{min-width:8em;font-weight:700}.sizes-entry dd{color:var(--dim);margin:0}.sizes-error{color:red;margin:4px 0}.card-preview{width:fit-content;min-width:100%;margin-top:12px}.card-preview-body{display:flex}.ruler{color:var(--dim);box-sizing:border-box}.ruler-h{z-index:2;background-color:canvas;background-image:repeating-linear-gradient(to right, currentColor 0 var(--line), transparent var(--line) 10mm);border-bottom:var(--line) solid currentColor;height:5mm;margin-left:calc(-1 * var(--line));background-position:0 100%;background-repeat:no-repeat;background-origin:content-box;padding-left:5mm;position:sticky;top:0}.ruler-v{width:5mm;margin-top:calc(-1 * var(--line));border-right:var(--line) solid currentColor;background:repeating-linear-gradient(to bottom, currentColor 0 var(--line), transparent var(--line) 10mm) 100% 0 / 100% 100% no-repeat}.card-groups{flex-direction:column;flex:1;gap:5mm;min-width:0;display:flex}.card-group-label{box-sizing:border-box;background-image:repeating-linear-gradient(to right, var(--dim) 0 10mm, transparent 10mm 20mm);background-size:100% var(--line);height:10mm;color:var(--dim);background-position:0 100%;background-repeat:no-repeat;padding-left:1em;line-height:10mm}.card-grid{flex-wrap:wrap;gap:5mm;display:flex}.card-cell{cursor:pointer}.card-cell:focus{background:currentColor;outline:1mm solid;animation:.6s pulse}@keyframes pulse{0%,50%,to{opacity:1}25%,75%{opacity:.2}}.card-placeholder{box-sizing:border-box;background:radial-gradient(circle, var(--dim) .5mm, transparent .5mm) repeat-x top left / 2mm 1mm, radial-gradient(circle, var(--dim) .5mm, transparent .5mm) repeat-x bottom left / 2mm 1mm, radial-gradient(circle, var(--dim) .5mm, transparent .5mm) repeat-y top left / 1mm 2mm, radial-gradient(circle, var(--dim) .5mm, transparent .5mm) repeat-y top right / 1mm 2mm;animation:.4s linear infinite march}@keyframes march{to{background-position:2mm 0,-2mm 100%,0 -2mm,100% 2mm}}.card-3d{position:relative}.card-3d:hover{z-index:1}.card-3d-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--flip) ease-in-out;pointer-events:none;position:relative}.card-3d:hover .card-3d-inner,.card-3d.show-back .card-3d-inner{transform:rotateY(180deg)}.card-3d.show-back:hover .card-3d-inner{transform:rotateY(0)}.card-3d-front,.card-3d-back{backface-visibility:hidden;position:absolute;inset:0}.card-3d-front{transform:translateZ(calc(var(--depth) / 2))}.card-3d-front,.card-3d-back img{width:100%;height:100%}.card-3d-back{transform:rotateY(180deg) translateZ(calc(var(--depth) / 2))}.card-3d-edge{background:var(--edge);position:absolute}.card-3d-edge-r{top:0;right:calc(-1 * var(--depth) / 2);width:var(--depth);height:100%;transform:rotateY(90deg)}.card-3d-edge-l{top:0;left:calc(-1 * var(--depth) / 2);width:var(--depth);height:100%;transform:rotateY(90deg)}.card-3d-edge-t{top:calc(-1 * var(--depth) / 2);width:100%;height:var(--depth);left:0;transform:rotateX(90deg)}.card-3d-edge-b{bottom:calc(-1 * var(--depth) / 2);width:100%;height:var(--depth);background:var(--edge-shadow);left:0;transform:rotateX(-90deg)}
