*{box-sizing:border-box}html{min-width:320px}body{margin:0;color:var(--text-primary);background:var(--bg-primary)}button,input,textarea,select{font:inherit}[hidden]{display:none!important}
:root{--panel-width:clamp(360px,34vw,520px);--editor-gap:8px;--editor-inset:16px;--editor-content-x:22px;--preview-height-offset:80px}
.editor-layout{display:grid;grid-template-columns:var(--panel-width) minmax(0,1fr);height:100dvh;overflow:hidden;background:var(--postcard-background);transition:background-color .3s ease}
.panel{position:relative;display:flex;height:100%;min-height:0;overflow:hidden;flex-direction:column;gap:var(--editor-gap);padding:var(--editor-inset);background:transparent}
.panel__header{flex:none;padding:20px var(--editor-content-x);border-radius:var(--radius-l);background:var(--bg-primary)}
.panel__nav{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;padding-bottom:28px}.panel__wordmark{display:block;width:clamp(170px,42%,210px);flex:none}.panel__wordmark img{display:block;width:100%;height:auto}.panel__context{color:var(--text-primary);font-size:var(--type-ui-size);font-weight:600;line-height:1.15;text-align:right}
.panel__intro{flex:none}.panel__intro h1{max-width:none;margin:0 0 8px}.panel__intro p{margin:0;color:var(--text-muted);font-size:var(--type-ui-size);line-height:1.45}
.editor-steps{display:flex;min-height:0;flex:1;flex-direction:column;gap:var(--editor-gap)}.editor-step{position:relative;display:flex;min-height:68px;overflow:hidden;flex:0 1 0;flex-direction:column;border-radius:var(--radius-l);background:var(--bg-primary);transition:flex-grow .55s cubic-bezier(.16,1,.3,1)}.editor-step.is-active{flex-grow:1}.editor-step.is-active::before,.editor-step.is-active::after{content:"";position:absolute;z-index:2;right:0;left:0;height:28px;pointer-events:none}.editor-step.is-active::before{top:68px;background:linear-gradient(to bottom,var(--bg-primary),color-mix(in srgb,var(--bg-primary) 0%,transparent))}.editor-step.is-active::after{bottom:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-primary) 0%,transparent),var(--bg-primary))}
.step-toggle{display:grid;width:100%;min-height:68px;flex:none;grid-template-columns:32px 1fr 40px;gap:12px;align-items:center;padding:12px var(--editor-content-x);border:0;color:inherit;background:transparent;text-align:left;cursor:pointer}
.step-index{display:grid;width:32px;height:32px;place-items:center;border:1px solid var(--text-primary);border-radius:50%;color:var(--text-primary);font-size:11px;font-variant-numeric:tabular-nums;line-height:1;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast)}
.step-toggle b,.step-toggle small{display:block}.step-toggle b{font-size:var(--type-body-size);font-weight:600}
.step-toggle small{margin-top:1px;color:var(--text-muted);font-size:var(--type-ui-size);font-weight:400;line-height:1.25}
.step-toggle>i{position:relative;display:grid;width:40px;height:40px;place-items:center;border:0;color:var(--text-primary);font-size:0;font-weight:400;font-style:normal;line-height:1;opacity:.3;transition:color var(--transition-normal),opacity var(--transition-normal),transform .45s cubic-bezier(.16,1,.3,1)}.step-toggle>i::before,.step-toggle>i::after{content:"";position:absolute;width:24px;height:2px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity var(--transition-normal)}.step-toggle>i::after{opacity:0;transform:rotate(0deg) scaleX(0)}.step-toggle[aria-expanded="false"]>i::after{opacity:1;transform:rotate(90deg) scaleX(1)}.step-toggle:hover>i,.step-toggle:focus-visible>i{color:var(--color-orange);opacity:1;transform:scale(1.08)}
.editor-step:not(.is-active) .step-index{border-color:var(--brand-accent);background:var(--brand-accent)}.editor-step.is-active .step-index{border-color:var(--text-primary);color:var(--bg-primary);background:var(--text-primary)}.editor-step.is-complete:not(.is-active) .step-index{border-color:var(--color-green);background:var(--color-green)}.editor-step:not(.is-active) .step-toggle:hover .step-index{border-color:var(--text-primary);color:var(--bg-primary);background:var(--text-primary)}
.editor-step.is-active .step-toggle{position:absolute;z-index:3;top:0;right:0;left:0;background:var(--bg-primary)}
.step-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px var(--editor-content-x) 18px;visibility:hidden;opacity:0;transform:translateY(-8px);scrollbar-color:color-mix(in srgb,var(--text-primary) 42%,transparent) transparent;scrollbar-width:thin;transition:opacity .2s ease,transform .45s cubic-bezier(.16,1,.3,1),visibility 0s linear .45s}.editor-step.is-active .step-content{flex:1;padding-top:84px;visibility:visible;opacity:1;transform:translateY(0);transition-delay:.08s,.04s,0s}.step-content::-webkit-scrollbar{width:4px}.step-content::-webkit-scrollbar-track{background:transparent}.step-content::-webkit-scrollbar-thumb{border-radius:99px;background:color-mix(in srgb,var(--text-primary) 42%,transparent)}.step-content::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--text-primary) 62%,transparent)}.step-note{margin:0 0 16px;color:var(--text-muted)}
.background-picker{min-width:0;margin:0 0 24px;padding:0;border:0}
.background-picker legend{margin:0 0 12px;padding:0;font-size:var(--type-ui-size);font-weight:600}
.background-options{display:flex;flex-wrap:wrap;gap:10px;padding:4px}
.background-option{position:relative;display:block;cursor:pointer}
.background-option input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.background-swatch{display:block;width:40px;height:40px;border:2px solid transparent;border-radius:50%;background:var(--swatch);transition:border-color var(--transition-fast),transform var(--transition-fast)}
.background-option[data-background="paper"]{--swatch:var(--postcard-background-paper)}.background-option[data-background="blush"]{--swatch:var(--postcard-background-blush)}.background-option[data-background="peach"]{--swatch:var(--postcard-background-peach)}.background-option[data-background="butter"]{--swatch:var(--postcard-background-butter)}.background-option[data-background="sage"]{--swatch:var(--postcard-background-sage)}.background-option[data-background="sky"]{--swatch:var(--postcard-background-sky)}.background-option[data-background="lavender"]{--swatch:var(--postcard-background-lavender)}
.background-option input:focus-visible+.background-swatch{outline:2px solid var(--brand-accent);outline-offset:3px}
.background-option input:checked+.background-swatch{border-color:var(--text-primary)}
.background-option:active .background-swatch{transform:scale(.97)}
.cake-group-title{margin:24px 0 12px;color:var(--text-muted);font-size:var(--type-ui-size);font-weight:500}.cake-group-title:first-of-type{margin-top:0}
.templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:2px}
.template{position:relative;display:grid;width:100%;min-width:0;padding:0;overflow:hidden;border:2px solid transparent;border-radius:var(--radius-l);color:var(--text-primary);background:var(--postcard-background);text-align:left;cursor:pointer;transition:border-color var(--transition-normal),background var(--transition-normal)}
.template img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.template>span{padding:6px 10px 12px;font-size:var(--type-ui-size);line-height:1.3;overflow-wrap:anywhere}
.template>i{position:absolute;top:6px;right:6px;display:none;width:22px;height:22px;place-items:center;border-radius:50%;color:var(--text-primary);background:var(--brand-accent);font-size:12px;font-style:normal}
.template:hover{border-color:var(--text-muted)}.template.is-active{border-color:var(--text-primary);background:var(--bg-primary)}.template.is-active>i{display:grid}
.button--wide{width:100%}.field{display:grid;gap:8px;margin-top:20px;font-size:var(--type-ui-size);font-weight:500}.field:first-child{margin-top:0}.field .su-input{font-size:var(--type-lead-size);line-height:var(--type-lead-leading)}.field .su-input:hover,.field .su-input:focus,.field .su-input:focus-visible{border-color:var(--text-primary);outline:0}.field textarea{resize:vertical}.field+.step-note{margin-top:16px}
.upload{position:relative;display:grid;justify-items:center;gap:10px;margin-top:16px;padding:20px 16px;border:2px dashed color-mix(in srgb,var(--text-primary) 28%,transparent);border-radius:var(--radius-m);background:transparent;text-align:center;cursor:pointer;transition:border-color var(--transition-fast)}
.upload:hover{border-color:color-mix(in srgb,var(--text-primary) 60%,transparent)}.upload:focus-within{border-color:var(--text-primary)}
.upload>span{font-size:var(--type-ui-size);font-weight:500}.upload input{position:absolute;width:1px;height:1px;opacity:0}
.upload__name{max-width:100%;overflow-wrap:anywhere;color:var(--text-primary);font-size:var(--type-ui-size)}.upload__hint{color:var(--text-muted);font-size:var(--type-ui-size)}
.music-options{display:grid;gap:8px}.music-option{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;align-items:center;padding:9px 11px 9px 13px;border:2px solid transparent;border-radius:var(--radius-m);box-shadow:inset 0 0 0 1px var(--border);transition:border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast)}.music-option--silent{grid-template-columns:minmax(0,1fr)}
.music-option__select{display:block;min-width:0;cursor:pointer}.music-option input{position:absolute;width:1px;height:1px;opacity:0}.music-option__copy,.music-option__copy>small{display:block}.music-option__title{display:flex;min-width:0;align-items:center;gap:10px}.music-option__title b{min-width:0;font-size:var(--type-body-size);font-weight:500}.music-option__copy>small{margin-top:4px;color:var(--text-muted);font-size:var(--type-ui-size)}
.music-option__icon{display:block;width:20px;height:20px;flex:none}.music-options .music-option:hover{box-shadow:inset 0 0 0 1px var(--text-muted);outline:0}.music-options .music-option:focus-within{border-color:var(--text-primary);box-shadow:none;outline:0}.music-options .music-option:has(input:focus-visible){outline:0}.music-option.is-active{border-color:var(--text-primary);background:var(--bg-primary);box-shadow:none}
.music-preview{position:relative;display:grid;width:44px;height:44px;place-items:center;padding:0;border:0;border-radius:50%;color:var(--text-primary);background:transparent;cursor:pointer;opacity:.42;transition:color var(--transition-fast),background var(--transition-fast),opacity var(--transition-fast),transform var(--transition-fast)}.music-preview::before{content:"";width:0;height:0;margin-left:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}.music-preview[aria-pressed="true"]::before{width:3px;height:14px;margin:0;border:0;border-radius:1px;background:currentColor;box-shadow:7px 0 0 currentColor;transform:translateX(-3.5px)}.music-preview:hover,.music-preview:focus-visible{color:var(--color-orange);background:color-mix(in srgb,var(--color-orange) 8%,transparent);opacity:1;transform:scale(1.06)}.music-preview[aria-pressed="true"]{color:var(--color-orange);opacity:1}
.music-upload{position:relative}.music-upload:has(.music-preview--custom:not([hidden])) .upload{padding-right:68px;padding-left:68px}.music-preview--custom{position:absolute;right:10px;bottom:10px}
.publish-dock{z-index:30;flex:none;background:transparent}
.publish-dock .su-button{width:100%;justify-content:space-between}.publish-dock .publish-button{color:var(--color-white);background:var(--color-orange)}.publish-dock .publish-button:hover:not(:disabled){background:color-mix(in srgb,var(--color-orange),var(--color-black) 10%)}.publish-dock i{font-style:normal;font-size:20px}
.workspace{--workspace-footer-space:28px;position:relative;display:grid;height:100%;grid-template-rows:auto minmax(0,1fr) var(--workspace-footer-space);overflow:hidden;padding:20px 32px 20px;background:var(--postcard-background);transition:background-color .3s ease}
.workspace__bar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px;color:var(--text-muted);font-size:var(--type-ui-size)}
.workspace__bar small{max-width:24ch;text-align:right;font:inherit}
.scene{align-self:center;justify-self:center;width:min(100%,calc(80dvh - var(--preview-height-offset)));height:auto;max-width:none;max-height:none;border:4px solid var(--color-white,#fff);background:var(--postcard-background)!important;box-shadow:none}
.scene.has-catalog-cake,.scene.has-brand-cake{mix-blend-mode:normal}
.scene [contenteditable="true"]{cursor:text}.scene [contenteditable="true"]:focus{outline:2px solid var(--text-primary);outline-offset:6px}
.scene .candle{cursor:grab}.scene .candle.is-selected::after{content:'';position:absolute;inset:-8px -6px -5px;border:1px solid var(--text-primary);outline:2px solid var(--brand-accent)}
.candle-popover{position:absolute;z-index:24;width:280px;max-height:calc(100dvh - 150px);overflow-y:auto;padding:16px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg-primary);box-shadow:0 12px 44px #0002;transform:translate(14px,-100%)}
.candle-popover__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.candle-popover__head b{font-size:var(--type-body-size);font-weight:500}.candle-popover__actions{display:flex;gap:2px}
.candle-action{display:grid;width:44px;height:44px;flex:none;place-items:center;padding:0;border:0;border-radius:var(--radius-m);color:var(--text-primary);background:transparent;cursor:pointer}
.candle-action:hover{background:var(--surface-subtle)}.candle-action svg{pointer-events:none}.candle-action:disabled{opacity:.4;cursor:default}
.candle-popover label{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;margin-top:12px;font-size:var(--type-ui-size)}.candle-popover input{width:100%;accent-color:var(--text-primary)}
.candle-color-options{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:20px 0 12px}
.candle-color-options button{height:34px;padding:0;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--swatch);cursor:pointer}
.candle-color-options button[aria-pressed="true"]{outline:2px solid var(--text-primary);outline-offset:2px}
.candle-custom-color input{height:36px;padding:2px;border:1px solid var(--border);background:var(--bg-primary);cursor:pointer}
.candle-apply-color{width:100%;margin-top:16px;padding:12px}
.modal{width:min(calc(100% - 32px),560px);max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:var(--radius-xl);background:var(--bg-primary);color:var(--text-primary)}
.modal::backdrop{background:#0006;backdrop-filter:blur(8px)}.modal__card{position:relative;padding:40px 32px 32px}
.modal__close{position:absolute;top:8px;right:10px;width:44px;height:44px;border:0;background:transparent;font-size:30px;cursor:pointer}
.modal__card>span{color:var(--text-muted);font-size:var(--type-ui-size)}.modal__card h2{margin:20px 0 16px}.modal__card p{color:var(--text-muted)}.modal__lifetime{font-size:var(--type-ui-size)}
.share-row{display:flex;gap:8px}.modal__open{width:100%;margin-top:12px}
.toast{position:fixed;z-index:120;left:50%;bottom:24px;max-width:min(90vw,540px);padding:14px 20px;border-radius:var(--radius-m);color:var(--bg-primary);background:var(--text-primary);opacity:0;pointer-events:none;transform:translate(-50%,15px);transition:opacity var(--transition-normal),transform var(--transition-normal)}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:820px){
.editor-layout{display:flex;height:auto;min-height:100dvh;overflow:visible;flex-direction:column}
.workspace{order:1;min-height:0;height:auto;padding:16px 20px 28px}.workspace__bar small{display:none}.scene{width:min(100%,460px);max-height:none}
.panel{--editor-content-x:var(--space-page-x);order:2;height:100svh;overflow:hidden;padding:var(--editor-inset)}.panel__header{padding:20px var(--editor-content-x)}.panel__nav{padding-bottom:28px}
.workspace{--workspace-footer-space:0;grid-template-rows:auto auto;padding:16px 20px 28px}.scene{width:min(100%,460px);height:auto}
.candle-popover{position:fixed;right:16px;bottom:88px;left:16px!important;top:auto!important;width:auto;max-height:calc(100dvh - 170px);transform:none}
}
@media(max-width:480px){.modal__card{padding:40px 20px 24px}.share-row{flex-direction:column}.template>span{font-size:13px}}
@media(prefers-reduced-motion:reduce){.editor-step,.step-content,.step-toggle>i,.background-swatch{transition:none}}