@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#1b3037;background:#f4f5f2;font-synthesis:none;--green:#c7ed78;--muted:#728084;--line:#e5e9e6}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #75a52e;outline-offset:3px}
.topbar{height:84px;border-bottom:1px solid #dce2dc;padding:0 4.2%;display:flex;align-items:center;justify-content:space-between;background:#fff}
.brand{text-decoration:none;display:flex;gap:12px;align-items:center;color:#193037;font-size:18px;font-weight:800;letter-spacing:2.3px}
.brand-icon{display:block;background:#1b3037;color:#d3f493;border-radius:10px;width:36px;height:36px;text-align:center;font-size:32px;line-height:31px;letter-spacing:-5px;padding-right:5px}
.brand-icon span{font-size:19px}
.tool-label{font-size:14px;letter-spacing:1.8px;color:#617377}
.version{background:#f1f4f0;padding:5px 7px;border-radius:5px;margin-left:10px;font-size:13px}main{max-width:1560px;margin:auto;padding:48px 4.2% 0}
.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;gap:24px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:2.1px;margin:0 0 15px;color:#637c62}h1{font-family:Manrope,sans-serif;font-size:43px;line-height:1.18;letter-spacing:-1.8px;margin:0;font-weight:800}h1>span{color:#73817d}
.lead{font-size:17px;color:#72807e;line-height:1.7;margin:17px 0 0}
.spec{min-width:276px;border-left:1px solid #d9e0d8;padding:10px 0 10px 30px;font-size:13px;letter-spacing:1.5px;color:#7a8981}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8bb34b;margin-right:6px}
.spec strong{display:block;font-size:25px;color:#263b3b;font-weight:500;letter-spacing:-.8px;margin:12px 0}
.spec strong span{color:#8f9c94;font-size:20px;margin:0 3px}
.spec small{font-size:16px;letter-spacing:0}
.spec>span:last-child{font-size:14px;letter-spacing:0}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:24px;align-items:start}
.panel{background:white;border:1px solid #e0e6de;border-radius:14px;overflow:hidden;box-shadow:0 3px 4px #233b2903}
.editor{padding:23px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:22px}
.panel-heading>div{display:flex;align-items:center;gap:10px}h2{font-size:18px;letter-spacing:-.2px;font-weight:700;margin:0}
.step{font-size:13px;color:#839276;background:#f1f5ec;padding:5px 6px;border-radius:5px}
.counter{font-size:13px;background:#edf5e6;color:#627948;border-radius:6px;padding:6px 8px}
.preview-toolbar{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.8px;color:#87918a;margin:3px 0 11px}
.preview-toolbar>span:last-child{letter-spacing:.1px}
.canvas-wrap{position:relative;border-radius:5px;overflow:hidden;background:black;line-height:0;isolation:isolate}
.canvas-wrap canvas{width:100%;height:auto;display:block}
.slots{position:absolute;inset:0}
.slot{display:flex;align-items:center;gap:10px;position:absolute;left:0;height:5.925925926%;border:1px dashed #ffffff26;border-bottom-width:0;background:#ffffff05;color:#91a09c;padding:0 10px;font-size:13px;text-align:left;line-height:1;white-space:nowrap;overflow:hidden}
.slot:last-child{border-bottom-width:1px}
.slot .slot-num{font-size:12px;color:#aac0ad}
.slot .slot-width{margin-left:auto;font-size:12px;opacity:.55}
.slot.filled{opacity:1;background:transparent;border-color:transparent}
.slot.filled>*{visibility:hidden}
.slot:hover,.slot.selected{opacity:1;background:#c7ed7815;border:1px solid #c7ed7899;color:#d6f3ad}
.slot.filled:hover,.slot.filled.selected{background:transparent;border-color:transparent}
.slot.dragging,.slot.filled.dragging,.bulk-drop.dragging{background:#c7ed7833;border:2px solid #8eb841}
.empty-space{position:absolute;top:74%;left:0;width:100%;text-align:center;color:#ffffff25;font-size:12px;letter-spacing:2px;pointer-events:none}
.canvas-wrap.cropped .empty-space{display:none}
.canvas-wrap.cropped .slot{height:12.5%}
.preview-footer{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:#8a958d;align-items:center;padding:14px 0 23px}
.text-button,.inline-button{border:0;padding:0;background:none;color:#6e7c73;font-size:13px}
.text-button{text-decoration:underline;text-underline-offset:3px}
.bulk-drop{display:flex;align-items:center;gap:14px;background:#f8faf6;border:1px dashed #ccd7c4;border-radius:8px;padding:21px 17px}
.upload-icon{font-size:22px;width:38px;height:38px;border-radius:9px;background:#edf3e7;color:#6b805a;display:grid;place-items:center;flex-shrink:0}
.bulk-drop strong{display:block;font-size:15px;margin-bottom:6px}
.bulk-drop div>span{font-size:14px;color:#899386;line-height:1.6;display:block}
.inline-button{font-size:14px;text-decoration:underline;color:#4e6842}
.file-types{font-size:12px;color:#97a08f;margin-left:auto;white-space:nowrap;letter-spacing:.6px}
.privacy{font-size:12px;line-height:1.7;color:#6f796a;margin:15px 0 0}
.sidebar{display:grid;gap:20px}
.rows-panel,.export-panel{padding:20px}
.rows-panel .panel-heading{margin-bottom:15px}
.subtle{font-size:12px;color:#748168}
.row{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;column-gap:8px;padding:10px 0;border-bottom:1px solid #edf0e9}
.row:last-child{border-bottom:0}
.row-number{font-size:13px;color:#8c9b81;background:#f3f6ed;display:grid;place-items:center;width:30px;height:30px;border-radius:5px}
.row.active .row-number{background:#d5edb6;color:#426629}
.row-main{min-width:0}
.row-pick{display:block;border:0;padding:0;background:none;text-align:left;width:100%;color:#73806e;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-pick.loaded{color:#263a32;font-weight:500}
.row-meta{font-size:12px;color:#748168;margin-top:4px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.row-meta select{font-size:12px;color:#79846f;background:#f7f9f3;border:0;border-radius:3px;max-width:150px;padding:2px}
.row-action{border:0;background:none;color:#91a181;font-size:18px;padding:0;width:24px;height:26px}
.row-help{color:#6f7964;font-size:13px;line-height:1.6;margin:13px 0 0}
.format-badge{font-size:12px;background:#f2f5ed;color:#718260;border-radius:4px;padding:5px 7px}fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.export-option{display:flex;align-items:center;gap:10px;border:1px solid #e2e7dc;padding:12px;border-radius:7px;cursor:pointer}
.export-option:has(input:checked){background:#f6faef;border-color:#b0ca8a}
.export-option input{accent-color:#678e32;margin:0;width:13px;height:13px}
.export-option strong,.export-option small{display:block}
.export-option strong{font-size:14px;font-weight:500}
.export-option small{font-size:13px;color:#8f9a80;margin-top:4px}
.ratio-icon{width:24px;height:15px;border:1px solid #9daa8d;border-radius:2px;margin-left:auto;position:relative;overflow:hidden}
.ratio-icon:before{content:'';position:absolute;top:0;left:0;width:88%;height:46%;background:#a5bb89}
.ratio-icon.cropped{height:9px}
.ratio-icon.cropped:before{height:100%}
.export-note{font-size:13px;line-height:1.6;color:#69765c;margin:13px 0 17px}
.filename-label{font-size:13px;color:#7b886f;display:block;margin-bottom:7px}
.filename{display:flex;align-items:center;border:1px solid #e2e7dc;border-radius:6px;padding:10px;font-size:14px}
.filename input{width:100%;min-width:0;border:0;outline:none;color:#627050;background:none}
.filename span{color:#a0a995}
.download{width:100%;border:0;background:var(--green);color:#2c4224;border-radius:7px;padding:14px;font-size:15px;font-weight:700;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px}
.download:not(:disabled):hover{background:#b7e463}
.download>span{font-size:20px;line-height:12px}
.quality{text-align:center;font-size:12px;color:#717d62;letter-spacing:.2px;margin:10px 0 0}footer{display:flex;justify-content:space-between;color:#748168;font-size:12px;padding:28px 0 24px;letter-spacing:.3px}
.footer-divider{margin:0 9px;color:#c2cbb7}
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#203a2f;color:#fff;padding:14px 22px;border-radius:9px;font-size:16px;box-shadow:0 5px 25px #0002;display:none;max-width:90%;z-index:10}
.toast.visible{display:block}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(min-width:1450px){main{padding-top:58px}
.intro{margin-bottom:42px}
.workspace{grid-template-columns:minmax(0,1fr) 420px}
.editor{padding:26px}h1{font-size:49px}}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 350px;gap:16px}
.editor{padding:16px}
.file-types{display:none}
.bulk-drop{padding:14px}
.slot{font-size:12px;padding:0 5px;gap:5px}
.slot-width{display:none}
.preview-footer{align-items:start;font-size:12px}}
@media(max-width:780px){.topbar{height:68px}
.tool-label{font-size:12px}
.brand{font-size:17px}
.workspace{grid-template-columns:1fr}
.intro{align-items:start}h1{font-size:34px}
.spec{min-width:0;padding-left:18px;margin-top:5px}
.spec strong{font-size:18px}
.spec>span:last-child{font-size:12px}
.lead{font-size:15px}
.sidebar{grid-template-columns:1fr 1fr;gap:15px}
.rows-panel,.export-panel{padding:17px}
.empty-space{font-size:12px}main{padding-top:30px}}
@media(max-width:540px){.intro{display:block}
.spec{border-left:0;border-top:1px solid #d9e0d8;padding:16px 0 0;margin-top:22px}
.spec strong{display:inline;font-size:17px;margin:0 9px}
.spec>span:last-child{display:none}
.workspace{gap:16px}
.sidebar{grid-template-columns:1fr}
.editor{padding:13px}
.slot{font-size:10px;gap:4px}
.slot .slot-num{font-size:10px}
.preview-footer{padding-bottom:15px}
.counter{font-size:12px}
.panel-heading{margin-bottom:17px}
.privacy{font-size:12px}
.bulk-drop{gap:9px}
.bulk-drop div>span{font-size:13px}footer{font-size:12px;gap:15px}footer>span:last-child{text-align:right}}
/* Fifteen fixed-size image slots, with independent placement on eight rows. */
#row-list{max-height:620px;overflow-y:auto;padding-right:5px;scrollbar-width:thin}
.slot{gap:5px;padding:0 5px;justify-content:center}
.slot .slot-num{font-size:10px}
.slot .slot-width{display:none}
.slot-order{display:flex;gap:8px;align-items:center;margin-top:6px;color:#687660;font-size:12px}
.slot-order span{margin-right:auto}
.slot-order button{border:1px solid #dce4d4;border-radius:4px;background:#f6f8f1;color:#496236;width:30px;height:26px}
.row-summary{display:grid;gap:8px;padding:0 0 22px;font-size:12px;color:#657560}
.row-summary>div{display:grid;grid-template-columns:45px minmax(30px,1fr) 110px 110px;gap:9px;align-items:center}
.row-summary meter{width:100%;height:8px;accent-color:#91b459}
.row-summary>div>span:last-child{text-align:right;color:#798771}
.arena-section{margin-top:26px;padding-top:25px;border-top:1px solid #e1e7dc}
.arena-section .panel-heading{flex-wrap:wrap}
#arena{width:100%;height:auto;display:block;border-radius:8px;background:#122330;touch-action:none;cursor:grab;aspect-ratio:5/3}
#arena:active{cursor:grabbing}
.arena-controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;align-items:center}
.arena-controls label{display:grid;gap:8px;font-size:13px;color:#68765f;flex:1;min-width:90px}
.arena-controls input{width:100%;accent-color:#7b9f48}
.arena-controls button{margin-left:auto}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 340px}.file-types{display:none}.row-summary>div{grid-template-columns:40px minmax(15px,1fr) 100px}.row-summary>div>span:last-child{grid-column:2/4;text-align:left}}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.sidebar{grid-template-columns:1fr 1fr;align-items:start}#row-list{max-height:520px}}
@media(max-width:620px){.sidebar{grid-template-columns:1fr}.slot .slot-num{font-size:8px}.preview-footer{flex-wrap:wrap}.row-summary>div{grid-template-columns:40px minmax(20px,1fr) 110px}.arena-controls label{min-width:80px}.arena-section .format-badge{font-size:10px}}

.summary-caption{font-size:12px;color:#69775e;margin:0 0 12px;line-height:1.6}
/* Eight permanently visible row editors. All editing happens on the image itself. */
.editor-instructions{font-size:14px;line-height:1.7;color:#64725e;margin:0 0 20px}
.row-editor-toolbar{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.5px;color:#798770;margin-bottom:14px}
#row-editor{display:grid;gap:15px}
.editable-row{min-width:0}
.editable-row-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px;font-size:12px;color:#6b7864}
.editable-row-heading>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.editable-row-heading strong{font-size:14px;color:#294034}
.editable-row-heading>div:last-child{justify-content:flex-end}
.row-capacity{font-size:11px;color:#708064}
.add-row-image{border:1px solid #dbe5cd;border-radius:5px;background:#f2f7eb;color:#4b6536;padding:6px 8px;font-size:12px;white-space:nowrap}
.row-stage{position:relative;height:49px;background:#000;border-radius:4px;overflow:hidden;isolation:isolate}
.row-stage canvas{display:block;width:100%;height:100%}
.row-boundary{position:absolute;inset:0 auto 0 0;border:1px solid #ffffff26;pointer-events:none}
.row-image-slot{position:absolute;top:0;height:100%;padding:0 3px;color:#b7c4ad;border:1px dashed #627553;background:#c7ed7808;text-align:center;font-size:10px;overflow:hidden;white-space:nowrap;z-index:2}
.row-image-slot:hover{border-color:#d3ef9c;background:#c7ed7822}
.row-image-slot.filled{border-color:#ffffff19;background:transparent}
.row-image-slot.filled>span{visibility:hidden}
.row-image-slot.filled:hover{background:transparent;border-color:#c7ed78}
.row-image-slot.selected{box-shadow:inset 0 0 0 1px #c7ed78}
.row-image-slot.dragging,.row-stage.dragging .row-free{border:2px solid #c7ed78;background:#c7ed7825}
.row-free{position:absolute;top:0;height:100%;border:1px dashed #ffffff26;background:#ffffff03;color:#7a8875;font-size:11px;white-space:nowrap;overflow:hidden;z-index:1}
.row-free:hover{background:#c7ed7815;color:#d2e7b5;border-color:#9eb87c}
.slot-tools{margin-top:20px;padding:15px;border:1px solid #dbe5d1;border-radius:8px;background:#f7faf2;min-width:0}
.slot-tools>strong{font-size:13px;font-weight:500;overflow-wrap:anywhere;display:block;margin-bottom:12px}
.slot-tools[hidden]{display:none}
.slot-tool-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.slot-tool-actions button,.slot-tool-actions select{font-size:12px;border:1px solid #d5dfca;border-radius:5px;background:white;color:#4d6240;padding:7px}
.slot-tool-actions label{display:flex;align-items:center;gap:7px;color:#6c7a62;font-size:12px}
.composition-preview{margin:2px 0 22px;border:1px solid #e0e7d9;border-radius:7px;padding:13px}
.composition-preview summary{cursor:pointer;color:#536749;font-size:13px}
.composition-preview summary span{float:right;font-size:12px;color:#7a886d}
.composition-preview .canvas-wrap{margin-top:14px}
.sidebar{position:sticky;top:20px;grid-template-columns:1fr}
.workspace{grid-template-columns:minmax(0,1fr) 340px}
@media(min-width:1450px){.workspace{grid-template-columns:minmax(0,1fr) 360px}.row-stage{height:57px}}
@media(max-width:1100px){.workspace{grid-template-columns:1fr}.sidebar{position:static;grid-template-columns:1fr}.export-panel{max-width:none}.export-panel fieldset{grid-template-columns:1fr 1fr}.row-stage{height:55px}}
@media(max-width:620px){.editable-row-heading{align-items:flex-start;gap:6px}.editable-row-heading>div{gap:4px}.editable-row-heading>div:first-child{flex-direction:column;align-items:flex-start}.row-capacity{font-size:10px;max-width:160px;text-align:right}.editable-row-heading>div:last-child{gap:5px}.row-stage{height:45px}.row-image-slot{font-size:8px;padding:0}.row-free{font-size:9px}.row-editor-toolbar{font-size:10px}.export-panel fieldset{grid-template-columns:1fr}.composition-preview summary span{float:none;display:block;margin:8px 0 0}.row-editor-toolbar>span:last-child{text-align:right}}
.timeline-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 12px}
.timeline-heading>div{display:grid;gap:5px;font-size:14px;color:#354c3d}
#timeline-total{font-size:12px;color:#6a7b60}
.timeline-track{height:46px;display:flex;align-items:stretch;background:#e9eee3;border:1px solid #d5dfca;border-radius:6px;overflow:hidden;position:relative}
.timeline-track:empty:after{content:'Lisää kuvat aloittaaksesi yhtenäisen kuvajonon';position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#77866b;pointer-events:none}
.timeline-clip{flex-shrink:0;min-width:0;overflow:hidden;white-space:nowrap;border:0;border-right:1px solid #fff8;color:#213b2e;font-size:11px;padding:0 2px;text-align:center}
.timeline-clip.selected{box-shadow:inset 0 0 0 3px #274a2e}
.timeline-scale{display:flex;justify-content:space-between;font-size:11px;color:#7b876f;margin:8px 0 23px}
.row-outside{position:absolute;top:0;height:100%;background:repeating-linear-gradient(135deg,#ffffff0b 0px,#ffffff0b 3px,transparent 3px,transparent 9px);border-left:1px solid #a4b88c80;pointer-events:none}
.row-flow{font-size:11px;color:#718663;min-height:13px;margin-top:4px;line-height:1.4}
.row-stage .row-image-slot{border-color:#ffffff60}
.row-stage .row-image-slot.selected{box-shadow:inset 0 0 0 2px #c7ed78}
.row-stage .row-image-slot:hover{border-color:#c7ed78}
.row-image-slot.dragging{background:#c7ed7830}
@media(max-width:620px){.timeline-heading{align-items:flex-start}.timeline-heading .add-row-image{max-width:170px;white-space:normal}.timeline-track{height:40px}.timeline-clip{font-size:9px;padding:0}.timeline-scale{font-size:10px}.row-flow{font-size:10px}.row-capacity{max-width:200px}}

.sample-help{font-size:13px;line-height:1.7;color:#75836a;margin:16px 0 0}.sample-help a{color:#486a31;text-underline-offset:3px}
/* One exact-aspect collage is both editor and preview. Rows touch at 128px boundaries. */
.collage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 12px;color:#6b7b60;font-size:12px}
.collage-toolbar>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.collage-toolbar select{font:inherit;color:#425c36;background:#f7faf2;border:1px solid #d8e1cf;border-radius:5px;padding:6px}
.full-canvas-toggle{display:flex;align-items:center;gap:5px;margin-left:8px}
.full-canvas-toggle input{accent-color:#789c46}
.collage-scroll{overflow:auto;background:#000;border:1px solid #dce4d5;border-radius:6px;scrollbar-width:thin}
.collage-surface{position:relative;width:100%;min-width:100%;background:#000;line-height:0;isolation:isolate}
.collage-surface canvas{display:block;width:100%;height:auto}
#collage-overlays{position:absolute;inset:0;pointer-events:none}
.collage-row-guide{position:absolute;border:1px dashed #ffffff20;pointer-events:none}
.collage-image-slot{position:absolute;background:transparent;border:0;border-radius:0;padding:0;cursor:pointer;pointer-events:auto}
.collage-image-slot:hover{box-shadow:inset 0 0 0 1px #c7ed78}
.collage-image-slot.selected{box-shadow:inset 0 0 0 2px #c7ed78}
.collage-image-slot.dragging{background:#c7ed7830;box-shadow:inset 0 0 0 2px #c7ed78}
.collage-surface.dragging{outline:2px solid #a8cf73;outline-offset:-2px}
#collage-empty{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;pointer-events:none;line-height:1.4;color:#c0d2af;text-align:center;padding:12px}
#collage-empty strong{font-size:18px;font-weight:500}
#collage-empty span{font-size:13px;color:#7b8f70}
#collage-empty[hidden]{display:none}
.collage-caption{display:flex;justify-content:space-between;gap:12px;color:#7b886f;font-size:12px;line-height:1.5;margin:10px 0 5px}
.timeline-heading{margin-bottom:16px}
@media(max-width:620px){.collage-caption{flex-wrap:wrap;font-size:11px}.collage-toolbar{font-size:11px}#collage-empty{gap:4px}#collage-empty strong{font-size:14px}#collage-empty span{font-size:10px}.full-canvas-toggle{margin-left:0}}
/* Named advertisement slots and a visible insertion target for pointer dragging. */
.preset-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 16px;color:#65765a;font-size:13px}
.preset-toolbar select{font:inherit;padding:7px;border:1px solid #d5e0ca;background:#f8faf4;border-radius:5px;color:#426135}
.preset-toolbar .text-button{margin-left:auto}
.collage-row-guide{border:2px dashed #c4dba2b3}
.collage-image-slot{border:2px dashed #c9e5aacc;touch-action:none;cursor:grab}
.collage-image-slot.empty{background:#89af4f10;color:#d0e9ad;overflow:hidden;font-size:clamp(7px,.8vw,12px)}
.collage-image-slot.empty span{display:block;text-align:center;white-space:nowrap;line-height:1.2;padding:0 2px}
.collage-image-slot.filled{border-color:#e0f2bfcc}
.collage-image-slot.selected{border-color:#d8ff90;box-shadow:inset 0 0 0 1px #d8ff90}
.collage-image-slot.is-moving{opacity:.4;cursor:grabbing}
#drop-marker{position:absolute;width:4px;background:#e0ff98;box-shadow:0 0 0 1px #142315,0 0 12px #c5f27f;z-index:8;pointer-events:none;transform:translateX(-2px)}
#drop-marker[hidden],#drag-label[hidden]{display:none}
#drag-label{position:fixed;pointer-events:none;z-index:100;padding:8px 12px;border-radius:5px;background:#d9f8aa;color:#233d24;font-size:13px;box-shadow:0 3px 18px #0004;line-height:1.3}
.slot-tool-actions select{max-width:200px}
.slot-tool-actions label{flex-wrap:wrap}
@media(max-width:620px){.preset-toolbar{font-size:12px}.preset-toolbar .text-button{margin-left:0}.collage-image-slot{border-width:1px}.collage-row-guide{border-width:1px}}

#confirm-action{border:1px solid #cad8bd;border-radius:12px;padding:25px;max-width:450px;width:calc(100% - 40px);color:#29412f;background:#fafcf7;box-shadow:0 15px 80px #0005}#confirm-action::backdrop{background:#12201988}#confirm-action p{font-size:16px;line-height:1.6;margin:0 0 20px}#confirm-action form>div{display:flex;justify-content:flex-end;gap:10px}#confirm-action button{border:1px solid #c5d7b3;border-radius:6px;padding:10px 18px;color:#39512e;background:white}#confirm-action button[value=confirm]{background:#c7ed78}
.arena-controls .arena-label-toggle{display:flex;align-items:center;gap:7px;min-width:180px;flex:1 0 180px;font-size:13px}.arena-controls .arena-label-toggle input{width:auto;accent-color:#9dbd66}

/* Media library workflow: one column, composition first, export last. */
.workspace{grid-template-columns:minmax(0,1fr)}
.sidebar{position:static;grid-template-columns:minmax(0,1fr)}
.editor{padding:28px}.timeline-heading a{text-decoration:none;display:inline-block}
.media-bank{margin-top:30px;padding-top:28px;border-top:1px solid #dce5d6;scroll-margin-top:25px}
.media-bank .panel-heading{margin-bottom:18px}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:18px}
.media-card{min-width:0;border:1px solid #d9e3d0;background:#f9fbf6;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:9px}
.media-card.selected{border-color:#719c3e;box-shadow:0 0 0 2px #c7ed78}
.media-thumb{display:block;width:100%;border:0;border-radius:4px;padding:6px;background:#16282d;cursor:grab;touch-action:none;overflow:hidden}
.media-thumb canvas{display:block;width:100%;height:auto;pointer-events:none}.media-card>strong{font-size:14px;overflow-wrap:anywhere;font-weight:600;line-height:1.5}.media-card>span{font-size:12px;color:#6d805e}
.media-actions{display:flex;gap:8px;margin-top:auto}.media-actions button,.bank-toolbar button{font:inherit;font-size:13px;padding:9px 12px;border:1px solid #d0dfc1;border-radius:5px;color:#36512b;background:#f0f6e6;cursor:pointer}
.media-actions button:disabled,.bank-toolbar button:disabled{opacity:.45;cursor:default}.media-actions button:last-child{background:transparent;margin-left:auto}
.bank-toolbar{margin-top:20px;padding:15px;background:#f5f8ef;border:1px solid #dce5d2;border-radius:7px}.bank-toolbar p{font-size:14px;line-height:1.6;margin:0 0 10px;color:#587046}.bank-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}
.collage-scroll.drop-active{outline:3px solid #91b95c;outline-offset:3px}.collage-image-slot.filled{border-color:#e0f2bfbb}.arena-section .arena-label-toggle[hidden]{display:none}
.export-panel fieldset{display:grid;grid-template-columns:1fr 1fr;gap:16px}.export-panel .export-option{margin:0}.export-panel .filename{max-width:700px}.export-panel .download{max-width:700px}.export-panel .quality{text-align:left}
body.cloud-busy .media-bank{pointer-events:none}
@media(max-width:620px){.editor{padding:16px}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.media-card{padding:7px}.media-card>strong{font-size:12px}.media-card>span{font-size:10px}.media-actions{flex-wrap:wrap;gap:5px}.media-actions button{font-size:11px;padding:7px}.export-panel fieldset{grid-template-columns:1fr}.bank-toolbar>div{flex-direction:column}.media-bank{margin-top:24px}}

/* Reference measurements are presentation overlays, never part of the PNG. */
#panel-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden}
#panel-overlay[hidden],.measurement-note[hidden],.arena-inside-controls[hidden]{display:none}
#panel-overlay line{stroke:#85e9ff;stroke-width:1.3;vector-effect:non-scaling-stroke}
#panel-overlay text{font:600 32px sans-serif;fill:#ceefff;stroke:#102633;stroke-width:9px;paint-order:stroke;stroke-linejoin:round}
#panel-overlay .active-panel{fill:#ffd57725;stroke:#ffdb87;stroke-width:1.5;vector-effect:non-scaling-stroke}
.measurement-note{font-size:13px;line-height:1.7;color:#527085;background:#eef5f7;border:1px solid #d2e3e8;border-radius:7px;padding:12px 15px;margin:14px 0}
.arena-mode-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:12px 0 20px}.arena-mode-bar label{display:flex;align-items:center;gap:8px;color:#5b7350;font-size:14px}.arena-mode-bar select,.arena-mode-bar button,.arena-inside-controls button{font:inherit;font-size:13px;padding:10px 13px;border:1px solid #cbdcc1;border-radius:6px;color:#34572e;background:#f5f9ee;cursor:pointer}
.arena-mode-bar #arena-inside{background:#c7ed78;border-color:#b5d771}.arena-mode-bar input{accent-color:#72993e}.arena-status{font-size:14px;line-height:1.6;color:#537046;margin:12px 0}.arena-inside-controls{padding:15px;background:#f4f8ef;border:1px solid #dbe7d0;border-radius:7px;display:grid;grid-template-columns:2fr auto 1fr;gap:20px;align-items:center;margin:15px 0}.arena-inside-controls label{font-size:13px;color:#617852;display:grid;gap:8px}.arena-inside-controls>div{display:flex;gap:6px}.arena-inside-controls input{width:100%;accent-color:#799a50}.arena-controls output,.arena-inside-controls output{font-variant-numeric:tabular-nums;color:#264b30;font-weight:600}
#arena{touch-action:none;outline-offset:3px}#arena:focus-visible{outline:3px solid #a5c966}
@media(max-width:700px){.arena-inside-controls{grid-template-columns:1fr}.arena-mode-bar{gap:10px}.arena-mode-bar label{font-size:13px}.measurement-note{font-size:12px}.arena-inside-controls>div{justify-content:space-between}}

/* Compact library folders and reversible media removal. */
.folder-bar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(280px,2fr);gap:20px;margin:0 0 18px;align-items:start}.folder-bar label{display:block;font-size:13px;color:#617750;margin-bottom:7px}.folder-bar select,.folder-bar input,.media-folder-label select{font:inherit;font-size:13px;width:100%;min-width:0;border:1px solid #d3dfc9;border-radius:5px;padding:9px;background:#fbfcf8;color:#38522e}.folder-bar form{margin:0}.folder-bar form>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.folder-bar button,.library-heading button{font:inherit;font-size:12px;border:1px solid #cdddbf;border-radius:5px;background:#f1f7e9;color:#3c5b2d;padding:9px 12px;cursor:pointer}.folder-bar button:disabled{opacity:.4;cursor:default}.library-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;font-size:13px;color:#6d805b}.library-heading button[hidden],.bank-toolbar[hidden]{display:none}.media-folder-label{display:grid;gap:4px;font-size:12px;color:#6d805b}.media-card>strong{margin-bottom:0}.media-folder-label select{padding:7px;font-size:12px}
@media(max-width:700px){.folder-bar{grid-template-columns:1fr;gap:12px}.library-heading{flex-wrap:wrap}.folder-bar form>div{gap:6px}.folder-bar button{padding:8px;font-size:11px}}