@layer theme,base;@layer components{.inf-rendering-stages{gap:.875rem;display:grid}.inf-rendering-stages-control{border:0;flex-wrap:wrap;gap:.375rem;margin:0;padding:0;display:flex}.inf-rendering-stages-option{border:1px solid var(--inf-line);background:var(--card);cursor:pointer;border-radius:999px;align-items:center;min-height:2.5rem;padding-inline:.875rem;font-size:.875rem;font-weight:500;display:inline-flex;position:relative}.inf-rendering-stages-option:has(.inf-rendering-stages-radio:checked){border-color:var(--ink);background:var(--ink);color:var(--ink-foreground)}.inf-rendering-stages-option:has(.inf-rendering-stages-radio:focus-visible){outline:2px solid var(--ring);outline-offset:2px}.inf-rendering-stages-radio{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.inf-rendering-stages-frame{display:grid}.inf-rendering-stages-picture{visibility:hidden;opacity:0;grid-area:1/1;align-content:start;gap:.5rem;transition:opacity .3s,visibility .3s;display:grid}.inf-rendering-stages-picture img{background:var(--surface-picture);border-radius:.75rem;width:100%;height:auto;display:block}.inf-rendering-stages-note{color:var(--muted-foreground);margin:0;font-size:.9375rem;line-height:1.45}.inf-rendering-stages-picture[data-stage=stagesAll]{visibility:visible;opacity:1}.inf-rendering-stages:has(.inf-rendering-stages-radio:checked:not([value=stagesAll])) .inf-rendering-stages-picture[data-stage=stagesAll]{visibility:hidden;opacity:0}.inf-rendering-stages:has(.inf-rendering-stages-radio[value=stagesAll]:checked) .inf-rendering-stages-picture[data-stage=stagesAll]{visibility:visible;opacity:1}.inf-rendering-stages:has(.inf-rendering-stages-radio[value=stagesPhoto]:checked) .inf-rendering-stages-picture[data-stage=stagesPhoto]{visibility:visible;opacity:1}.inf-rendering-stages:has(.inf-rendering-stages-radio[value=stagesClay]:checked) .inf-rendering-stages-picture[data-stage=stagesClay]{visibility:visible;opacity:1}.inf-rendering-stages:has(.inf-rendering-stages-radio[value=stagesMesh]:checked) .inf-rendering-stages-picture[data-stage=stagesMesh]{visibility:visible;opacity:1}.inf-rendering-stages:has(.inf-rendering-stages-radio[value=braidMesh]:checked) .inf-rendering-stages-picture[data-stage=braidMesh]{visibility:visible;opacity:1}@media (prefers-reduced-motion:reduce){.inf-rendering-stages-picture{transition:none}}.inf-rendering-shot{border:1px solid var(--border-strong);background:var(--card);box-shadow:0 18px 40px -24px rgb(var(--shadow-color) / .35);border-radius:.875rem;gap:.75rem;padding:.75rem;font-size:.8125rem;line-height:1.45;display:grid}.inf-rendering-frame{background:var(--surface-picture);border-radius:.5rem;position:relative;overflow:hidden}.inf-rendering-frame>[data-at]{position:absolute}.inf-rendering-frame>[data-at]>.inf-mark,.inf-rendering-file>.inf-mark,.inf-rendering-same>.inf-mark{box-shadow:0 0 0 3px var(--card)}.inf-rendering-frame>[data-at=print]{top:12%;left:30%}.inf-rendering-frame>[data-at=layers]{top:40%;left:62%}.inf-rendering-frame>[data-at=ground]{top:76%;left:22%}.inf-rendering-file,.inf-rendering-same{border:1px solid var(--inf-line);border-radius:.625rem;padding:.625rem .75rem;position:relative}.inf-rendering-file{flex-wrap:wrap;align-items:baseline;gap:.25rem .875rem;display:flex}.inf-rendering-file>span:not(.inf-label,.inf-mark){color:var(--inf-quiet)}.inf-rendering-file>.inf-mark,.inf-rendering-same>.inf-mark{position:absolute;top:-.6rem;right:-.5rem}.inf-rendering-same>ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.5rem;display:grid}.inf-rendering-thumb{background:var(--surface-picture);aspect-ratio:3/2;border-radius:.5rem;display:block;overflow:hidden}.inf-rendering-thumb img{object-fit:cover;width:100%;height:100%}.inf-rendering-same li{gap:.3rem;font-size:.75rem;font-weight:600;display:grid}.inf-rendering-ways{gap:1rem;display:grid}.inf-rendering-ways>li{border:1px solid var(--inf-line);background:var(--background);border-radius:.875rem;align-content:start;gap:.25rem;padding:.75rem;display:grid;position:relative}.inf-rendering-ways>:last-child{border-color:var(--inf-copper)}@media (min-width:48rem){.inf-rendering-ways{grid-template-columns:repeat(3,minmax(0,1fr))}}}@layer utilities;
