:root{
  --orange:#ef5100;
  --page-bg:#050505;
  --display:'Bebas Neue','Arial Narrow',sans-serif;
  --condensed:'Barlow Condensed','Arial Narrow',sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --grain:url('../assets/textures/grain.png');
  --paper:url('../assets/textures/paper.png');
  --page-w:1055px;
  --page-h:1491px;
  --darkener:.58;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#171717;color:#f2eee9}
body{font-family:var(--serif)}
.app{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:22px;align-items:start;padding:18px}
.page-viewport{min-width:0;display:flex;justify-content:center;overflow:auto}
.page-shell{position:relative;flex:none}
.page{position:relative;width:var(--page-w);height:var(--page-h);overflow:hidden;background:var(--page-bg);box-shadow:0 26px 90px rgba(0,0,0,.58);transform-origin:top left;color:#eee}
.page::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:420px 420px;opacity:.18;mix-blend-mode:screen;z-index:70}
.hero-zone{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 55% 42%,#353535,#151515 52%,#050505 100%);isolation:isolate;z-index:1}
.image-layers{position:absolute;inset:0;overflow:hidden;isolation:isolate;z-index:1}
.free-image-layers{position:absolute;inset:0;z-index:18;pointer-events:none;overflow:visible;isolation:isolate}
.free-image-layers .image-layer{pointer-events:auto}
.image-layer{position:absolute;inset:0;z-index:1;overflow:visible;cursor:grab;touch-action:none;--layer-scale:1;--layer-x:0px;--layer-y:0px;--layer-rotation:0deg;--layer-brightness:1;--layer-contrast:1;--layer-saturation:1;--layer-grayscale:0;--layer-sepia:0;--layer-opacity:1;--layer-blur:0px;--layer-left-fade:0%;--layer-right-fade:0%;--layer-top-fade:0%;--layer-bottom-fade:0%;--layer-splice:58%;--layer-blend:normal}
.image-layer.dragging{cursor:grabbing}.image-layer.hidden-layer{display:none}.image-layer.locked-layer{cursor:default}
.image-layer .layer-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;transform:translate(var(--layer-x),var(--layer-y)) rotate(var(--layer-rotation)) scale(var(--layer-scale));transform-origin:center center;filter:brightness(var(--layer-brightness)) contrast(var(--layer-contrast)) saturate(var(--layer-saturation)) grayscale(var(--layer-grayscale)) sepia(var(--layer-sepia)) blur(var(--layer-blur));opacity:var(--layer-opacity);mix-blend-mode:var(--layer-blend);user-select:none;-webkit-user-drag:none;will-change:transform,filter,opacity;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--layer-left-fade),#000 calc(100% - var(--layer-right-fade)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--layer-top-fade),#000 calc(100% - var(--layer-bottom-fade)),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 var(--layer-left-fade),#000 calc(100% - var(--layer-right-fade)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--layer-top-fade),#000 calc(100% - var(--layer-bottom-fade)),transparent 100%);mask-composite:intersect}
.image-layer[data-fit="contain"] .layer-image,.image-layer[data-mode="cutout"] .layer-image{object-fit:contain}
.image-layer[data-mode="silhouette"] .layer-image{object-fit:contain;filter:grayscale(1) brightness(.22) contrast(2.8) blur(var(--layer-blur))}
.image-layer[data-mode="splice"][data-splice-side="left"] .layer-image{clip-path:polygon(0 0,var(--layer-splice) 0,var(--layer-splice) 100%,0 100%)}
.image-layer[data-mode="splice"][data-splice-side="right"] .layer-image{clip-path:polygon(var(--layer-splice) 0,100% 0,100% 100%,var(--layer-splice) 100%)}
.image-layer[data-mode="splice"][data-splice-side="diag-left"] .layer-image{clip-path:polygon(0 0,var(--layer-splice) 8%,calc(var(--layer-splice) - 10%) 92%,0 100%)}
.image-layer[data-mode="splice"][data-splice-side="diag-right"] .layer-image{clip-path:polygon(var(--layer-splice) 8%,100% 0,100% 100%,calc(var(--layer-splice) - 10%) 92%)}
.image-layer.placement-slot{position:absolute;inset:0}.image-layer.placement-slot:not(.selected){pointer-events:none}
.image-layer.placement-free{position:absolute;inset:auto;overflow:hidden;pointer-events:auto;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.layer-resize-handle{display:none;position:absolute;right:3px;bottom:3px;width:24px;height:24px;padding:0;border:2px solid #fff;background:var(--orange);z-index:120;cursor:nwse-resize;box-shadow:0 2px 10px rgba(0,0,0,.6)}
.layer-resize-handle::before,.layer-resize-handle::after{content:"";position:absolute;right:4px;bottom:4px;background:#111}.layer-resize-handle::before{width:10px;height:2px;transform:rotate(-45deg);transform-origin:right center}.layer-resize-handle::after{width:6px;height:2px;transform:translate(-2px,-4px) rotate(-45deg);transform-origin:right center}
body.editing .image-layer.placement-free.selected:not(.locked-layer) .layer-resize-handle{display:block}
body.editing.show-layer-bounds .image-layer{outline:1px dashed rgba(255,255,255,.2);outline-offset:-2px}
body.editing .image-layer.selected::after{content:"";position:absolute;inset:5px;border:2px solid rgba(239,81,0,.88);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 18px rgba(239,81,0,.26);pointer-events:none;z-index:99}
body.editing .image-layer.selected::before{content:attr(data-layer-name);position:absolute;top:10px;right:10px;z-index:100;background:rgba(5,5,5,.82);border:1px solid rgba(239,81,0,.7);color:#fff;padding:6px 9px;font:600 15px/1 var(--condensed);letter-spacing:1px;text-transform:uppercase;pointer-events:none}
body.editing .image-layer.placement-slot.selected::before{content:attr(data-layer-name) " · COVER SLOT"}
body.editing .image-layer.placement-free.selected::before{content:attr(data-layer-name) " · FREE"}
body:not(.editing) .image-layer{cursor:default;pointer-events:none}body:not(.editing) .layer-resize-handle{display:none!important}
.hero-placeholder{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:0 86px 0 460px;color:#b4b4b4;text-align:center;text-transform:uppercase;letter-spacing:4px;pointer-events:none;text-shadow:0 2px 16px #111}
.hero-placeholder strong{font:500 46px/1 var(--condensed)}.hero-placeholder span{font:400 22px/1.2 var(--condensed);letter-spacing:2px;margin-top:12px}.hero-zone.has-image .hero-placeholder{display:none}
.hero-darkener{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 58% 50%,transparent 0 28%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.72) 100%),linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.12) 55%,rgba(0,0,0,.3));opacity:var(--darkener)}
.template-design{position:absolute;inset:0;z-index:25;pointer-events:none}.template-design [contenteditable=true]{pointer-events:auto}
.reference-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:99;opacity:0;pointer-events:none}
.safe-guides{display:none;position:absolute;inset:34px;border:1px dashed rgba(255,80,0,.75);z-index:98;pointer-events:none}.safe-guides::before{content:"";position:absolute;inset:32px;border:1px dashed rgba(255,255,255,.25)}.safe-guides span:first-child{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.18)}.safe-guides span:last-child{position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(255,255,255,.18)}.safe-guides.show{display:block}
[contenteditable=true]{outline:none;border-radius:2px}.overflowing{box-shadow:inset 0 0 0 2px #ff3b24!important;background:rgba(255,55,35,.1)!important}
.editable{--user-text-color:currentColor}.editable.user-solid-fill{background-image:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important;color:var(--user-text-color)!important;-webkit-text-fill-color:var(--user-text-color)!important}
body.editing .editable.text-style-selected{box-shadow:inset 0 0 0 2px rgba(239,81,0,.95),0 0 0 1px rgba(0,0,0,.55)!important;background-color:rgba(239,81,0,.08)}
@media(max-width:1120px){.app{grid-template-columns:1fr;padding:10px}.panel{position:relative!important;top:auto!important;max-height:none!important;order:-1}.page-viewport{overflow:auto}}