.collage{--studio-rail:320px}.collage__stage{min-width:0}.collage__stagehead{color:var(--text-subtle);font:600 .7rem/1.3 var(--font-mono);justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.collage__mat{border:1px solid var(--border);background:var(--surface-inset);background-image:radial-gradient(var(--border-strong) .7px, transparent .7px);background-size:16px 16px;border-radius:12px;place-items:center;min-height:370px;padding:20px;display:grid;overflow:hidden}.collage__mat>.filedrop{background:var(--surface);width:100%;min-height:330px}.collage__canvas{width:min(100%, calc(510px * var(--collage-ratio,1)));aspect-ratio:var(--collage-ratio,1);background:#fff;flex:none;position:relative;overflow:hidden;box-shadow:0 14px 38px #0000002b,0 2px 5px #0000001a}.collage__canvas[hidden],.collage__under[hidden]{display:none}.collage__cell{background:var(--surface-inset);cursor:grab;touch-action:none;border:0;border-radius:0;padding:0;position:absolute;overflow:hidden}.collage__cell:active{cursor:grabbing}.collage__cell:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:2}.collage__cell[aria-pressed=true]:after{content:"";pointer-events:none;border:2px solid #fff;position:absolute;inset:3px;box-shadow:0 0 0 1px #00000059}.collage__cell img{pointer-events:none;user-select:none;max-width:none;position:absolute}.collage__under{padding-top:15px}.collage__under>p{color:var(--text-muted);margin:0 0 14px;font-size:.8rem;line-height:1.5}.collage__selected{color:var(--text);justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;font-size:.8rem;font-weight:700;display:flex}.collage__selected>div{gap:5px;display:flex}.collage__selected button{min-width:34px;padding-inline:8px}.collage__strip{gap:9px;padding:2px 3px 10px;display:flex;overflow-x:auto}.collage__thumb{background:var(--surface-inset);cursor:pointer;border:2px solid #0000;border-radius:8px;width:62px;height:62px;padding:0;display:block;overflow:hidden}.collage__thumb[aria-pressed=true]{border-color:var(--accent)}.collage__thumb img{object-fit:cover;width:100%;height:100%}.collage__message{min-height:1em;color:var(--text-muted);margin:8px 0 0;font-size:.78rem;line-height:1.4}.collage__layouts{grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:16px;display:grid}.collage__layout{border:1px solid var(--border-input);background:var(--surface);color:var(--text-muted);cursor:pointer;font:600 .75rem/1.25 var(--font);border-radius:8px;justify-items:center;gap:5px;padding:8px 4px 6px;display:grid}.collage__layout[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text);background:var(--accent-soft)}.collage__layout svg{width:41px;height:32px}.collage__layout rect{fill:var(--text-subtle);opacity:.72}.collage__control{color:var(--text-muted);grid-template-columns:1fr auto;align-items:center;gap:5px 8px;margin:12px 0;font-size:.78rem;display:grid}.collage__control label,.collage__row label,.collage__label{color:var(--text);font-weight:650}.collage__control input{width:100%;accent-color:var(--accent);grid-column:1/-1}.collage__row{justify-content:space-between;align-items:center;font-size:.78rem;display:flex}.collage__row input{border:1px solid var(--border-input);background:var(--surface);border-radius:6px;width:40px;height:30px;padding:2px}.collage__reset{color:var(--accent);cursor:pointer;background:0 0;border:0;padding:0;font-size:.78rem;font-weight:700}.collage__reset:disabled{color:var(--text-subtle);cursor:default}.collage__label{margin:12px 0 6px;font-size:.78rem;display:block}.collage__rail select{width:100%;font-size:.8rem}.collage__dimensions{color:var(--text-muted);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:7px;margin-top:12px;display:grid}.collage__dimensions>span{padding-bottom:10px}.collage__dimensions label{min-width:0;color:var(--text);gap:5px;font-size:.74rem;font-weight:650;display:grid}.collage__dimensions label span{color:var(--text-muted);align-items:center;gap:5px;font-weight:400;display:flex}.collage__dimensions input{width:100%;min-width:0;padding:8px;font-size:.8rem}.collage__detail{color:var(--text-muted);margin:10px 0;font-size:.75rem;line-height:1.45}.collage__detail[data-warning=true]{color:var(--danger)}@container studio (width<=620px){.collage__mat{min-height:290px;padding:12px}.collage__mat>.filedrop{min-height:266px}.collage__canvas{width:min(100%, calc(430px * var(--collage-ratio,1)))}.collage__thumb{width:54px;height:54px}}.tm-collage__input,.tm-collage__grid,.tm-collage__saved{animation-duration:7s;animation-timing-function:ease;animation-iteration-count:infinite;animation-fill-mode:backwards}.tm-collage__input{animation-name:collage-input}.tm-collage__grid{animation-name:collage-grid}.tm-collage__saved{animation-name:collage-saved}@keyframes collage-input{0%,8%{opacity:0;transform:translateY(10px)}20%,88%{opacity:1;transform:none}to{opacity:0}}@keyframes collage-grid{0%,27%{opacity:0;transform:translateY(10px)}40%,88%{opacity:1;transform:none}to{opacity:0}}@keyframes collage-saved{0%,54%{opacity:0;transform:translateY(6px)}67%,88%{opacity:1;transform:none}to{opacity:0}}@media (prefers-reduced-motion:reduce){.tm-collage *{animation:none!important}}