body{overflow-x:hidden}
@font-face{font-family:CMCollageSans;src:url('/fonts/sans.woff') format('woff');font-display:swap;unicode-range:U+2E80-9FFF,U+F900-FAFF,U+20000-2FFFF}
.toolbar{padding:8px 20px}
.toolbar nav{align-items:center}
.toolbar select,.settings-panel select,.filters select{font:inherit;color:inherit;background:white;border:1px solid var(--line);border-radius:7px;padding:8px;min-width:0}
#workspace{display:grid;grid-template-columns:260px minmax(0,1fr) 190px;gap:20px;max-width:1600px;width:100%;min-height:0;margin:0 auto;padding:20px;flex:1}
.catalog-panel,.settings-panel{min-width:0}
.catalog-panel{display:flex;flex-direction:column;max-height:calc(100dvh - 95px)}
h2{margin:0;font-size:16px}
.catalog-heading{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex:none}
.catalog-heading output{font-size:13px;margin-left:auto}
.customize-layout{width:100%;margin-bottom:10px;font-size:13px;padding:7px}
.customize-layout[aria-pressed=true],#free-controls button[aria-pressed=true]{border-color:var(--accent);background:#edf2ff}
#free-controls{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}
.frame-shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.frame-shapes button{display:flex;align-items:center;justify-content:center;margin:0;padding:5px;aspect-ratio:1;min-height:34px}
.frame-shapes canvas{width:100%;height:auto;max-width:34px;pointer-events:none}
#catalog-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:5px;border-radius:6px}
#catalog-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
#catalog-toggle[aria-expanded=false] svg{transform:rotate(-90deg)}
#catalog-body{display:flex;flex-direction:column;min-height:0;flex:1}
#catalog-body[hidden]{display:none}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;flex:none}
.filters select{width:100%}
.catalog-pager{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0}
.catalog-pager button{padding:3px 7px;font-size:19px;line-height:1.1}
.catalog-pager output{font-size:12px;white-space:nowrap;min-width:34px;text-align:center}
.layout-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:8px;overflow-y:auto;min-height:0;overscroll-behavior-y:auto;padding:3px 5px 12px 3px}
.layout-choice{position:relative;padding:5px;border-radius:9px;display:block;min-width:0}
.layout-choice canvas{display:block;width:100%;height:auto;border-radius:4px}
.layout-choice[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px #2558d92a}
.layout-choice small{position:absolute;bottom:5px;right:5px;background:#ffffffdf;border-radius:3px;min-width:16px;font-size:10px;line-height:16px}
.composition{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px}
.canvas-stage{position:relative;width:100%;min-height:280px;display:flex;align-items:center;justify-content:center;background:#e9edf3;border:1px solid var(--line);border-radius:12px;padding:20px;flex:1;max-height:calc(100dvh - 190px);scroll-margin-top:70px}
.text-size-control{position:absolute;left:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px;width:32px;border-radius:18px;background:#ffffffe6;z-index:1;user-select:none}
.text-size-control[hidden]{display:none}
.text-size-control>span{font-size:12px;line-height:14px;font-weight:600}
#text-size{writing-mode:vertical-lr;direction:rtl;width:28px;height:142px;margin:0;accent-color:var(--accent);cursor:pointer}
.text-size-control output{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.photo-controls{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:300px;max-width:calc(100% - 24px);padding:5px 8px;border:1px solid #d2d9e4;border-radius:20px;background:#fffffff0;z-index:1}
.photo-controls[hidden]{display:none}
.photo-controls label{font-size:12px;white-space:nowrap}
#zoom{flex:1;min-width:40px;margin:0;accent-color:var(--accent)}
.photo-controls output{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:35px;text-align:right}
.photo-controls output::after{content:'×'}
#reset-position{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;padding:5px;border:0;border-radius:50%;background:transparent}
#reset-position svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#preview{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 240px);box-shadow:0 3px 20px #10182816;touch-action:none;cursor:grab}
#preview:active{cursor:grabbing}
#preview:not(.has-media){touch-action:pan-y;cursor:default}
#preview.editing-shape{touch-action:none;cursor:crosshair}
.media-row{display:flex;gap:8px;align-items:center;max-width:100%;width:100%}
.media-list{display:flex;flex:1 1 0;gap:8px;overflow-x:auto;overflow-y:hidden;padding:4px;min-width:0;overscroll-behavior-x:contain;overscroll-behavior-y:auto}
.media-item{position:relative;flex:none;width:64px;height:64px;border-radius:8px;border:1px solid var(--line);background:#fff;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.media-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.media-pick{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:inherit;padding:0;background:transparent;cursor:grab}
.media-item.selected,.media-item.drop-target{border-color:var(--accent);box-shadow:0 0 0 2px #2558d950}
.media-item.reordering{opacity:.35}
.media-item .remove-media{position:absolute;right:1px;top:1px;width:21px;height:21px;font-size:16px;padding:0;border-radius:5px;background:#fffffff0}
.media-item span{position:absolute;left:3px;bottom:3px;font-size:10px;background:#ffffffe6;border-radius:3px;padding:1px 4px;pointer-events:none}
.media-drag-ghost{position:fixed;width:64px;height:64px;object-fit:cover;transform:translate(-50%,-50%);border:2px solid var(--accent);border-radius:8px;box-shadow:0 5px 18px #10182850;opacity:.9;pointer-events:none;z-index:1000}
#more{flex:none;margin-left:auto;width:44px;height:44px;font-size:24px}
#play-media{flex:none;padding:7px 10px;min-height:34px}
#play-media[hidden],#cancel-export[hidden]{display:none}
.timeline{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.timeline[hidden]{display:none}
.timeline input{flex:1;min-width:0;accent-color:var(--accent)}
.timeline output{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
#freeze-at-value::after{content:'%'}
#clip-speed-value::after{content:'×'}
.audio-toggle{justify-content:flex-start!important;gap:8px}
.audio-toggle input{accent-color:var(--accent)}
.settings-panel{display:flex;flex-direction:column;gap:9px;border-left:1px solid var(--line);padding-left:18px;padding-right:5px;max-height:calc(100dvh - 95px);overflow-y:auto;align-self:start}
.settings-panel label{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-top:6px}
.settings-panel input[type=range]{width:100%;margin:0;accent-color:var(--accent)}
.settings-panel input[type=color]{width:100%;height:34px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:3px}
.settings-panel button{width:100%;font-size:13px;margin-top:10px}
.settings-panel output{font-size:12px}
.settings-section{border-top:1px solid var(--line);margin-top:7px;padding-top:10px;min-width:0}
.settings-section summary{font-size:13px;font-weight:600;cursor:pointer;user-select:none}
.settings-fields{display:flex;flex-direction:column;gap:8px;min-width:0}
.settings-section>.settings-fields{padding-top:5px}
.settings-panel [hidden]{display:none!important}
.settings-panel textarea{font:inherit;font-size:14px;color:inherit;width:100%;min-height:76px;resize:vertical;border:1px solid var(--line);border-radius:6px;padding:8px;box-sizing:border-box}
.text-format-row{display:flex;gap:6px;min-width:0}
.text-format-row>*{flex:1;min-width:0}
.text-format-row button,.settings-fields>button{margin-top:0}
.text-format-row button[aria-pressed=true],.text-item[aria-pressed=true]{border-color:var(--accent);background:#edf2ff}
.text-list{display:flex;flex-direction:column;gap:4px;max-height:135px;overflow-y:auto;min-width:0}
.text-list:empty{display:none}
.text-list .text-item{margin:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px}
.text-list .text-item,#text-content{font-family:Arial,"CMCollageSans",sans-serif}
.text-themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:3px;min-width:0}
.text-themes .text-theme{width:100%;height:34px;margin:0;padding:0;border:1px solid #a0a8b344;border-radius:7px;font:600 15px Arial,sans-serif;line-height:1;cursor:pointer}
.text-themes .text-theme[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}
.text-themes .text-theme:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#cell-controls{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.template-mask{position:absolute;inset:0;background:#f3f5f8c9;display:flex;gap:10px;align-items:center;justify-content:center;z-index:2;border-radius:12px}
body.drag::after{content:'';position:fixed;inset:0;border:4px dashed var(--accent);background:#2558d912;pointer-events:none;z-index:10}
#status{align-self:stretch;font-size:13px;margin:0}
#workspace:focus{outline:0}
#workspace.catalog-collapsed{grid-template-columns:44px minmax(0,1fr) 190px}
.catalog-collapsed .catalog-heading{justify-content:center}
.catalog-collapsed .catalog-heading h2,.catalog-collapsed .catalog-heading output{display:none}
@media(max-width:1100px){
  #workspace{grid-template-columns:205px minmax(0,1fr);gap:14px}
  #workspace.catalog-collapsed{grid-template-columns:44px minmax(0,1fr)}
  .settings-panel{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:0;border:0;max-height:none;overflow:visible}
  .settings-panel label{margin:0}
  .settings-panel #cell-controls{grid-column:1/-1}
  .settings-section{grid-column:1/-1;width:100%}
  .catalog-panel{grid-row:1/3}
  .canvas-stage{max-height:none}
  .composition{min-height:350px}
}
@media(max-width:640px){
  .toolbar{padding:8px 10px;flex-wrap:nowrap}
  .toolbar nav{gap:5px}
  .toolbar select{padding:6px;font-size:12px}
  #workspace{display:flex;flex-direction:column;padding:12px;gap:14px;flex:initial}
  .composition{order:0;min-height:0}
  .catalog-panel{order:1;max-height:none}
  #catalog-body{display:block;flex:none}
  #catalog-body[hidden]{display:none}
  .settings-panel{order:2;padding-bottom:16px}
  .canvas-stage{padding:12px;min-height:160px;flex:none}
  .text-size-control{left:5px;width:30px;padding:7px 1px;gap:3px}
  #text-size{height:110px}
  #preview{max-height:52dvh}
  .catalog-collapsed #preview{max-height:calc(100dvh - 180px)}
  .layout-list{grid-template-columns:repeat(5,minmax(0,1fr));max-height:none;overflow:visible;overscroll-behavior:auto}
  .catalog-heading{margin-bottom:8px}
  .catalog-collapsed .catalog-heading{justify-content:initial}
  .catalog-collapsed .catalog-heading h2,.catalog-collapsed .catalog-heading output{display:block}
  .filters{margin-bottom:8px}
  .media-item{width:50px;height:50px}
  .settings-panel select{width:100%}
  .text-themes{grid-template-columns:repeat(6,minmax(0,1fr))}
  .media-row{gap:4px}
  .toolbar .brand-wordmark{font-size:19px}
}
@media(prefers-reduced-motion:reduce){#catalog-toggle svg{transition:none}}