.zine-demo{padding-bottom:6rem}.zine-demo__intro{text-align:center;margin-bottom:2rem}.zine-demo__intro h1{font-family:var(--zine-font-display, inherit);margin:0 0 .4rem}.zine-demo__intro p{margin:0 auto .9rem;color:var(--zine-muted, #7a6f63);max-width:34rem}.zine-demo__stage{position:relative;width:min(420px,100%);margin:0 auto;overflow:hidden;background-color:var(--zine-surface, #fbf7f0);background-image:var(--zine-paper-texture, none);border:1px solid var(--zine-border, #ddd2c2);border-radius:14px;box-shadow:var(--zine-shadow, 0 10px 30px rgba(60, 43, 20, .08));container-type:inline-size}.zine-demo__layer{position:absolute;inset:0;will-change:transform;pointer-events:none}.zine-demo__asset{position:absolute;transform-origin:center;opacity:calc(var(--asset-opacity, 1) * var(--reveal, 1))}.zine-demo--editing .zine-demo__asset{pointer-events:auto}.zine-demo__asset img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}.zine-demo__asset-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:blur(var(--glow-radius))}.zine-demo__asset-glow:before{content:"";position:absolute;inset:0;background-color:var(--zine-glow-color, var(--zine-accent, #8c5b33));-webkit-mask:var(--glow-mask) center / 100% 100% no-repeat;mask:var(--glow-mask) center / 100% 100% no-repeat}.zine-demo__asset-text{display:block;width:100%;font-family:var( --zine-font-script, "Petit Formal Script", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive );line-height:1.8;text-align:center;color:var(--zine-text, #2f2a24);user-select:none;overflow:visible}.zine-demo--editing .zine-demo__asset{cursor:grab;touch-action:none}.zine-demo--editing .zine-demo__asset:active{cursor:grabbing}.zine-demo__asset--selected{outline:2px dashed var(--zine-accent, #8c5b33);outline-offset:2px}.zine-demo__resize-handle{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;border-radius:50%;background:var(--zine-accent, #8c5b33);border:2px solid var(--zine-bg, #f4ede1);cursor:nwse-resize;touch-action:none}.zine-demo__page-markers{position:absolute;inset:0;pointer-events:none;z-index:40}.zine-demo__page-marker{position:absolute;left:0;right:0;border-top:1px solid color-mix(in srgb,var(--zine-accent, #8c5b33) 65%,transparent)}.zine-demo__page-marker-label{position:absolute;top:4px;left:6px;font-family:var(--zine-font-mono, monospace);font-size:.65rem;line-height:1;padding:.2rem .35rem;border-radius:6px;background:color-mix(in srgb,var(--zine-accent, #8c5b33) 14%,var(--zine-bg, #f4ede1));color:var(--zine-accent, #8c5b33)}.zine-demo__page-marker-crop{position:absolute;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--zine-muted, #7a6f63) 55%,transparent);border-bottom:1px dashed color-mix(in srgb,var(--zine-muted, #7a6f63) 55%,transparent)}.zine-demo__seaweed{position:fixed;bottom:0;left:50%;transform:translate(-50%,4%);width:min(420px,92vw);z-index:4;pointer-events:none}.zine-demo__seaweed img{display:block;width:100%;height:auto;transition:opacity 3s ease-in-out}.zine-demo__seaweed img:not(:first-child){position:absolute;bottom:0;left:0}@media(prefers-reduced-motion:reduce){.zine-demo__seaweed img{transition:none}}.zine-demo__actions{position:fixed;left:1rem;bottom:1.25rem;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;pointer-events:none}.zine-demo__actions>*{pointer-events:auto}.zine-demo__render-btn{font-family:var(--zine-font-display, inherit);font-size:.9rem;font-weight:600;letter-spacing:.04em;color:var(--zine-bg, #f4ede1);background-color:var(--zine-accent, #8c5b33);background-image:var(--zine-paper-texture-surface, none);border:1px solid rgba(60,43,20,.25);border-radius:999px;padding:.65rem 1.5rem;cursor:pointer;box-shadow:var(--zine-shadow, 0 10px 30px rgba(60, 43, 20, .08));transition:opacity .15s}.zine-demo__render-btn:hover,.zine-demo__render-btn:focus-visible{opacity:.85}.zine-demo__notice{margin:0;max-width:min(26rem,calc(50vw - 220px - 2rem));text-align:center;font-size:.8rem;color:var(--zine-muted, #7a6f63);background-color:var(--zine-surface, #fbf7f0);background-image:var(--zine-paper-texture-surface, none);border:1px dashed var(--zine-border, #ddd2c2);border-radius:10px;padding:.5rem .9rem}.zine-demo__editor{position:fixed;top:90px;right:1rem;z-index:10;width:240px;max-height:calc(100vh - 120px);overflow-y:auto;background-color:var(--zine-surface, #fbf7f0);background-image:var(--zine-paper-texture-surface, none);border:1px solid var(--zine-border, #ddd2c2);border-radius:14px;box-shadow:var(--zine-shadow, 0 10px 30px rgba(60, 43, 20, .08));padding:1rem;display:grid;gap:1rem}.zine-demo__editor h2{font-family:var(--zine-font-display, inherit);font-size:1rem;margin:0;letter-spacing:.06em;text-transform:uppercase}.zine-demo__editor-group{display:grid;gap:.5rem}.zine-demo__editor-label{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--zine-muted, #7a6f63)}.zine-demo__editor label{display:grid;gap:.2rem;font-size:.8rem;color:var(--zine-text, #2f2a24)}.zine-demo__editor select,.zine-demo__editor textarea{font:inherit;padding:.25rem .4rem;border:1px solid var(--zine-border, #ddd2c2);border-radius:8px;background:var(--zine-bg, #f4ede1);color:inherit}.zine-demo__editor textarea{resize:vertical}.zine-demo__editor-row{display:flex;flex-wrap:wrap;gap:.4rem}.zine-demo__chip{font:inherit;font-size:.78rem;padding:.3rem .7rem;border:1px solid var(--zine-border, #ddd2c2);border-radius:999px;background:var(--zine-bg, #f4ede1);color:var(--zine-text, #2f2a24);cursor:pointer;transition:border-color .15s}.zine-demo__chip:hover,.zine-demo__chip:focus-visible{border-color:var(--zine-accent, #8c5b33)}.zine-demo__chip--active{background:var(--zine-accent, #8c5b33);color:var(--zine-bg, #f4ede1);border-color:var(--zine-accent, #8c5b33)}.zine-demo__chip--danger{color:#a03123}.zine-demo__layer-picker{display:flex;flex-wrap:wrap;gap:.4rem}.zine-demo__palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.zine-demo__palette-item{min-width:0;width:100%;aspect-ratio:1;padding:.3rem;border:1px solid var(--zine-border, #ddd2c2);border-radius:10px;background:var(--zine-bg, #f4ede1);cursor:pointer;transition:border-color .15s}.zine-demo__palette-item:hover,.zine-demo__palette-item:focus-visible{border-color:var(--zine-accent, #8c5b33)}.zine-demo__palette-item img{width:100%;height:100%;object-fit:contain}.zine-demo__upload-input{display:none}.zine-demo__editor-hint{margin:0;font-size:.72rem;color:var(--zine-muted, #7a6f63);line-height:1.5}@media(max-width:760px){.zine-demo__editor{position:static;width:min(420px,100%);margin:1.5rem auto 0;max-height:none}.zine-demo__actions{position:sticky;left:auto;align-items:center;margin-top:1.5rem}.zine-demo__notice{max-width:26rem}}