/* Konsolidierte Seitenstile: identische Selektoren und Media-Kontexte enthalten nur ihre wirksamen Deklarationen. */
.hero-block { overflow: clip; }
:root { --paper: #f6f1eb; --paper-deep: #eee6dc; --ink: #272322; --muted: #857c75; --line: rgba(61, 48, 39, .12); --accent: #9a5e70; --accent-dark: #7e4658; --gold: #c79a67; --panel: rgba(255, 252, 248, .82); --shadow: 0 26px 70px rgba(82, 58, 42, .10); }
html.darkmode { --paper: #1d1a1a; --paper-deep: #292424; --ink: #f4eee8; --muted: #b5a9a0; --line: rgba(255,255,255,.13); --panel: rgba(43, 37, 36, .82); --shadow: 0 26px 70px rgba(0,0,0,.24); }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0px; color: var(--ink); background: var(--paper); font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.wedding-header { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.brand-mark { width: 31px; height: 31px; border: 1px solid var(--accent); border-radius: 50%; display: grid; grid-template-columns: 1fr 1fr 1fr; place-items: center; color: var(--accent); font: 700 14px / 1 "Playfair Display", serif; }
.brand-mark i { display: block; width: 1px; height: 15px; background: var(--gold); transform: rotate(24deg); }
.header-copy { display: flex; align-items: baseline; gap: 14px; }
.eyebrow, .section-kicker { margin: 0px; text-transform: uppercase; letter-spacing: 0.17em; font-size: 10px; font-weight: 800; color: var(--muted); }
.eyebrow-accent { color: var(--accent); }
.eyebrow-dot { display: inline-block; width: 4px; height: 4px; margin: 0px 3px 2px; border-radius: 50%; background: var(--gold); }
.header-note, .header-status { margin: 0px; color: var(--muted); font-size: 11px; }
.header-status { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.status-dot, .live-badge span { width: 6px; height: 6px; border-radius: 50%; background: rgb(114, 161, 124); box-shadow: rgba(114, 161, 124, 0.13) 0px 0px 0px 3px; }
.hero-block { grid-template-columns: 1fr; gap: 18px; align-items: center; }
.hero-title { min-width: 0px; }
.hero-title { display: flex; flex-direction: column; align-items: center; }
.hero-side { display: flex; justify-content: center; }
.wedding-hero-logo { display: block; object-position: center center; filter: drop-shadow(rgba(154, 94, 112, 0.14) 0px 10px 18px); }
h1, h2, p { margin-top: 0px; }
h1 { margin: 12px 0px 0px; font: 600 clamp(44px, 6.2vw, 78px) / 0.97 "Playfair Display", Georgia, serif; letter-spacing: -0.045em; }
h1 em { color: var(--accent); font-weight: 600; }
.hero-copy { max-width: 520px; text-align: center; }
.progress-line { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.13em; }
.progress-step { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.progress-step b { color: var(--accent); font-size: 9px; }
.progress-step:not(.is-active) b { color: var(--muted); }
.progress-dash { width: 38px; height: 1px; background: var(--line); }
.control-panel, .preview-panel, .saved-section { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); }
h2 { margin: 7px 0px 0px; font: 600 26px / 1.1 "Playfair Display", Georgia, serif; letter-spacing: -0.025em; }
.panel-number { color: var(--accent); font: 600 36px / 1 "Playfair Display", serif; opacity: 0.72; }
.field-label { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.label-note { font-size: 9px; }
.field-hint { margin: 8px 0px 0px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.input-wrap { display: flex; align-items: center; min-width: 0px; transition: border 0.2s, box-shadow 0.2s; }
.input-wrap:focus-within { border-color: var(--accent); }
.input-prefix { padding-left: 10px; color: var(--accent); font-size: 9px; font-weight: 800; }
.input-wrap input { width: 100%; min-width: 0px; border: 0px; outline: 0px; padding: 13px 9px 13px 7px; color: var(--ink); background: transparent; font-weight: 600; }
.ampersand { color: var(--gold); font: 600 20px / 1 "Playfair Display", serif; text-align: center; }
.select-wrap select { width: 100%; border: 1px solid var(--line); border-radius: 2px; outline: 0px; padding: 13px 35px 13px 12px; color: var(--ink); font-size: 12px; }
.select-wrap select:focus { border-color: var(--accent); }
.range-heading .field-label { margin-bottom: 0px; }
.range-heading output { font-weight: 800; }
.range-input { display: block; }
.text-position-row { display: flex; align-items: center; gap: 10px; }
.text-position-row .range-input { min-width: 0px; margin-bottom: 7px; }
.text-position-row .button { flex: 0 0 auto; margin-top: 2px; }
.range-scale { justify-content: space-between; color: var(--muted); font-size: 9px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.compact-range { min-width: 0px; }
.initial-toggle-control { grid-column: 1 / -1; }
.initial-toggle-control .field-hint { margin-top: 6px; }
.initial-controls .range-input { margin-top: 10px; }
.initial-controls .field-label { font-size: 10px; }
.initial-position-control { min-width: 0px; }
.initial-position-editor { display: flex; align-items: center; gap: 10px; }
.joystick-pad { position: relative; flex: 1 1 auto; width: 100%; min-width: 92px; aspect-ratio: 1 / 1; border: 1px solid rgba(154, 94, 112, 0.32); border-radius: 50%; background: radial-gradient(circle, rgba(154, 94, 112, 0.08) 0px, rgba(154, 94, 112, 0.08) 18%, transparent 19%), linear-gradient(90deg, transparent 49.5%, rgba(154, 94, 112, 0.22) 49.5%, rgba(154, 94, 112, 0.22) 50.5%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(154, 94, 112, 0.22) 49.5%, rgba(154, 94, 112, 0.22) 50.5%, transparent 50.5%); cursor: crosshair; touch-action: none; }
.joystick-axis { position: absolute; pointer-events: none; background: rgba(154, 94, 112, 0.18); }
.joystick-axis-x { top: 50%; right: 7px; left: 7px; height: 1px; }
.joystick-axis-y { top: 7px; bottom: 7px; left: 50%; width: 1px; }
.joystick-center { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px; border: 1px solid var(--accent); border-radius: 50%; pointer-events: none; }
.joystick-handle { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px; padding: 0px; border: 3px solid var(--panel); border-radius: 50%; background: var(--accent); box-shadow: rgba(82, 58, 42, 0.2) 0px 2px 8px; cursor: grab; touch-action: none; }
.joystick-handle:active { cursor: grabbing; }
.joystick-handle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.position-readout { display: grid; gap: 5px; flex: 0 0 45px; color: var(--muted); font-size: 9px; }
.position-readout span { display: flex; justify-content: space-between; gap: 4px; }
.position-readout output { color: var(--accent); font-size: 9px; font-weight: 800; }
.swatch { transition: transform 0.15s, border 0.15s; }
.swatch:hover { transform: translateY(-2px); }
.swatch.is-selected { border-color: var(--panel); box-shadow: 0 0 0 1px var(--accent), 0 0 0 3px var(--panel), 0 0 0 4px var(--accent); }
.preview-material-control { justify-items: end; font-size: 8px; font-weight: 800; }
.preview-material-control .swatches { gap: 6px; }
.preview-material-control .swatch { width: 19px; height: 19px; }
.preview-material-control-stage { position: absolute; z-index: 6; top: 14px; right: 16px; }
.preview-material-control-stage > span { display: none; }
.panel-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; margin-top: 31px; }
.button { border: 1px solid transparent; border-radius: 2px; padding: 13px 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; transition: transform 0.18s, background 0.18s, border 0.18s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0px); }
.button-secondary { color: var(--ink); border-color: var(--line); }
.button-secondary:hover { border-color: var(--accent); color: var(--accent); }
.button-primary:hover { background: var(--accent-dark); }
.button-icon { margin-right: 4px; font-size: 16px; vertical-align: -1px; font-weight: 400; }
.print-hint { display: flex; align-items: flex-start; gap: 8px; line-height: 1.55; }
.hint-icon { color: var(--gold); font-size: 13px; }
.preview-panel:fullscreen, .preview-panel.is-fullscreen-fallback { position: fixed; z-index: 1000; inset: 0px; display: flex; flex-direction: column; width: 100vw; height: 100vh; box-sizing: border-box; overflow: auto; border: 0px; border-radius: 0px; padding: clamp(18px, 4vw, 52px); background: var(--panel); }
.preview-panel:fullscreen .preview-stage, .preview-panel.is-fullscreen-fallback .preview-stage { flex: 1 1 auto; height: auto; min-height: 0px; margin-top: clamp(16px, 3vw, 30px); }
.preview-panel:fullscreen .preview-meta, .preview-panel.is-fullscreen-fallback .preview-meta { flex: 0 0 auto; margin-top: 10px; }
.preview-panel:fullscreen .preview-status, .preview-panel.is-fullscreen-fallback .preview-status { flex: 0 0 auto; }
html.preview-fullscreen-active, html.preview-fullscreen-active body { overflow: hidden; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.13em; }
.preview-stage.has-3d-background { background: rgb(238, 229, 220); }
html.darkmode .preview-stage.has-3d-background { background: rgb(61, 52, 48); }
.stage-glow { position: absolute; width: 55%; height: 31%; left: 22%; bottom: 13%; border-radius: 50%; background: rgba(131, 83, 54, 0.14); filter: blur(23px); }
.three-canvas { position: absolute; inset: 0px; z-index: 1; }
.three-canvas canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.three-canvas canvas:active { cursor: grabbing; }
.three-canvas canvas.is-text-hover { cursor: grab; }
.three-canvas canvas.is-text-dragging { cursor: grabbing; }
.three-canvas canvas.is-debug-dragging { cursor: move; }
.stage-selection-box { position: absolute; z-index: 4; pointer-events: none; }
.stage-selection-box[hidden] { display: none; }
.stage-selection-corner { position: absolute; width: 14px; height: 14px; border-color: rgba(154, 94, 112, 0.7); border-style: solid; }
.stage-selection-corner-tl { top: 0px; left: 0px; border-width: 1px 0px 0px 1px; }
.stage-selection-corner-tr { top: 0px; right: 0px; border-width: 1px 1px 0px 0px; }
.stage-selection-corner-bl { bottom: 0px; left: 0px; border-width: 0px 0px 1px 1px; }
.stage-selection-corner-br { right: 0px; bottom: 0px; border-width: 0px 1px 1px 0px; }
@keyframes selectionCornerPulse { 
  0%, 100% { opacity: 0.48; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.08); }
}
.stage-selection-box.is-hovering .stage-selection-corner { border-color: rgba(154, 94, 112, 0.88); animation: 1.25s ease-in-out 0s infinite normal none running selectionCornerPulse; }
.stage-selection-box.is-selected .stage-selection-corner { border-color: rgba(154, 94, 112, 0.88); animation: auto ease 0s 1 normal none running none; opacity: 0.9; }
.stage-selection-hint { position: absolute; z-index: 5; top: 12px; left: 50%; max-width: calc(100% - 32px); padding: 7px 12px; border: 1px solid rgba(154, 94, 112, 0.18); border-radius: 999px; color: rgba(76, 60, 50, 0.68); background: rgba(255, 252, 248, 0.72); font-size: 10px; font-weight: 700; line-height: 1.3; text-align: center; transform: translateX(-50%); }
.stage-selection-hint[hidden] { display: none; }
html.darkmode .stage-selection-hint { color: rgba(255, 255, 255, 0.62); background: rgba(43, 37, 36, 0.72); }
.stage-text-center, .stage-text-depth { position: absolute; z-index: 5; }
.stage-text-center { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 25px; padding: 5px 9px; border: 1px solid rgba(154, 94, 112, 0.28); border-radius: 999px; color: rgba(76, 60, 50, 0.76); background: rgba(255, 252, 248, 0.78); box-shadow: rgba(82, 58, 42, 0.12) 0px 5px 16px; backdrop-filter: blur(5px); font-size: 9px; font-weight: 700; opacity: 0.92; transform: translateX(-50%); transition: opacity 0.18s, background 0.18s, color 0.18s; }
.stage-text-center .material-symbols-outlined, .stage-text-depth .material-symbols-outlined { font-size: 15px; line-height: 1; }
.stage-text-center:hover, .stage-text-center:focus-visible { color: var(--accent-dark); background: rgba(255, 252, 248, 0.96); outline: 0px; }
.stage-text-center[hidden], .stage-text-depth[hidden] { display: none; }
.stage-text-depth { display: grid; gap: 4px; width: min(190px, 100% - 16px); padding: 8px 9px; border: 1px solid rgba(154, 94, 112, 0.25); border-radius: 6px; color: var(--muted); background: rgba(255, 252, 248, 0.86); box-shadow: rgba(82, 58, 42, 0.12) 0px 8px 22px; backdrop-filter: blur(6px); }
.stage-text-depth .stage-text-depth-row { margin: 0px; }
.stage-text-depth .stage-text-depth-row .stage-base-label > span:last-child { max-width: 76px; white-space: normal; line-height: 1.1; }
.stage-text-depth .stage-text-depth-row output { min-width: 45px; }
.stage-text-align-actions { display: grid; gap: 4px; width: 100%; margin: 0px; }
.stage-text-align-option { display: flex; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: transparent; font-size: 8px; line-height: 1.1; text-align: left; }
.stage-text-align-option:hover, .stage-text-align-option:focus-visible { border-color: var(--accent); color: var(--accent-dark); background: rgba(154, 94, 112, 0.08); outline: 0px; }
.stage-text-align-option[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: rgba(154, 94, 112, 0.1); }
.stage-text-align-option .material-symbols-outlined { color: var(--accent); font-size: 13px; line-height: 1; }
html.darkmode .stage-text-center { color: rgba(255, 255, 255, 0.76); background: rgba(43, 37, 36, 0.78); }
html.darkmode .stage-text-center:hover, html.darkmode .stage-text-center:focus-visible { color: var(--ink); background: rgba(43, 37, 36, 0.96); }
html.darkmode .stage-text-depth { color: rgba(255, 255, 255, 0.76); background: rgba(43, 37, 36, 0.78); }
.stage-base-controls { position: absolute; z-index: 5; display: grid; gap: 4px; width: min(190px, 100% - 16px); padding: 8px 9px; border: 1px solid rgba(154, 94, 112, 0.25); border-radius: 6px; color: var(--muted); background: rgba(255, 252, 248, 0.86); box-shadow: rgba(82, 58, 42, 0.12) 0px 8px 22px; backdrop-filter: blur(6px); }
.stage-base-controls[hidden] { display: none; }
.stage-control-caption { display: flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.stage-control-caption .material-symbols-outlined { font-size: 13px; line-height: 1; }
.stage-base-row { display: grid; grid-template-columns: 1fr 22px 45px 22px; align-items: center; font-size: 8px; }
.stage-base-row[hidden], .stage-heart-drag-hint[hidden] { display: none; }
.stage-base-label { display: inline-flex; align-items: center; min-width: 0px; }
.stage-base-label .material-symbols-outlined { color: var(--accent); line-height: 1; }
.stage-base-row output { color: var(--accent); font-size: 8px; font-weight: 800; text-align: center; }
.stage-base-row button { display: grid; place-items: center; padding: 0px; border: 1px solid var(--line); color: var(--accent); background: transparent; }
.stage-base-row button:hover, .stage-base-row button:focus-visible { border-color: var(--accent); background: rgba(154, 94, 112, 0.08); outline: 0px; }
.stage-base-row .material-symbols-outlined { font-size: 13px; }
.stage-base-full-depth-toggle, .stage-heart-top-align-toggle { display: flex; align-items: flex-start; width: 100%; font-size: 8px; line-height: 1.25; }
.stage-base-full-depth-toggle .fake-switch, .stage-heart-top-align-toggle .fake-switch { flex: 0 0 auto; margin-top: 1px; }
.stage-base-full-depth-toggle span:last-child, .stage-heart-top-align-toggle span:last-child { flex: 1 1 auto; min-width: 0px; overflow-wrap: anywhere; }
.stage-base-controls .stage-base-full-depth-toggle, .stage-base-controls .stage-heart-top-align-toggle { color: var(--muted); font-size: 8px; font-weight: 400; letter-spacing: normal; }
.stage-base-height-row.is-disabled { opacity: 0.46; }
.stage-base-height-row.is-disabled button { cursor: not-allowed; }
.stage-heart-drag-hint { margin-top: 4px; color: color-mix(in srgb, var(--muted) 82%, transparent); font-size: 9px; line-height: 1.4; }
html.darkmode .stage-base-controls { background: rgba(43, 37, 36, 0.88); }
.stage-image-controls { position: absolute; z-index: 5; display: grid; gap: 4px; width: min(190px, 100% - 16px); padding: 8px 9px; border: 1px solid rgba(154, 94, 112, 0.25); border-radius: 6px; color: var(--muted); background: rgba(255, 252, 248, 0.88); box-shadow: rgba(82, 58, 42, 0.12) 0px 8px 22px; backdrop-filter: blur(6px); }
.stage-image-controls[hidden] { display: none; }
html.darkmode .stage-image-controls { background: rgba(43, 37, 36, 0.9); }
.stage-loading { position: absolute; z-index: 3; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); background: rgba(246, 241, 235, 0.72); font-size: 10px; transition: opacity 0.3s; }
html.darkmode .stage-loading { background: rgba(29, 26, 26, 0.72); }
.stage-loading.is-hidden { opacity: 0; pointer-events: none; }
.loading-spinner { width: 18px; height: 18px; border-top-color: var(--accent); border-radius: 50%; animation: 0.8s linear 0s infinite normal none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.stage-tip { position: absolute; z-index: 2; display: flex; justify-content: flex-end; gap: 6px; align-items: center; line-height: 1.45; text-align: right; white-space: nowrap; }
html.darkmode .stage-tip { color: rgba(255, 255, 255, 0.58); }
.stage-tip > span { font-size: 14px; }
.debug-popover { position: absolute; z-index: 6; width: min(238px, 100% - 24px); padding: 13px; border: 1px solid rgba(154, 94, 112, 0.34); border-radius: 5px; color: var(--ink); background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: rgba(41, 27, 24, 0.22) 0px 18px 44px; backdrop-filter: blur(10px); }
.debug-popover[hidden] { display: none; }
.debug-popover-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.debug-popover-heading strong { display: block; max-width: 180px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.debug-kicker { display: block; margin-bottom: 3px; color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.debug-close { width: 22px; height: 22px; padding: 0px; border: 0px; color: var(--muted); background: transparent; font-size: 19px; line-height: 1; }
.debug-close:hover { color: var(--accent); }
.debug-position-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.debug-position-grid label, .debug-scale-field { display: grid; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.debug-position-grid input { width: 100%; box-sizing: border-box; min-width: 0px; padding: 6px 5px; border: 1px solid var(--line); color: var(--ink); background: rgba(255, 255, 255, 0.42); font-size: 10px; }
.debug-position-grid input:focus { border-color: var(--accent); outline: 0px; }
.debug-scale-field { margin-top: 12px; }
.debug-scale-field output { justify-self: end; margin-top: -16px; color: var(--accent); font-size: 9px; }
.debug-scale-field input { width: 100%; margin-top: 4px; accent-color: var(--accent); }
.debug-popover-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; color: var(--muted); font-size: 8px; }
.debug-popover-actions .button { padding: 7px 8px; }
.preview-fullscreen-button { align-items: center; gap: 5px; font-weight: 800; cursor: pointer; transition: border 0.18s, color 0.18s, background 0.18s; }
.preview-fullscreen-button:hover, .preview-fullscreen-button:focus-visible { border-color: var(--accent); outline: 0px; }
.preview-fullscreen-button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: rgba(154, 94, 112, 0.1); }
.preview-fullscreen-button .material-symbols-outlined { font-size: 15px; line-height: 1; }
.preview-background-control { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; }
.preview-background-control select { min-width: 88px; cursor: pointer; }
.stage-corner { position: absolute; z-index: 2; width: 17px; height: 17px; opacity: 0.5; }
.stage-corner-tl { top: 14px; left: 14px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.stage-corner-br { right: 14px; bottom: 14px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.preview-meta { padding-top: 20px; }
.meta-label { font-size: 9px; }
.preview-meta strong { font-size: 13px; font-weight: 700; }
.meta-gloss-control { min-width: 0px; }
.meta-gloss-control .range-input { margin: 7px 0px 0px; }
.preview-status { padding-top: 13px; text-align: right; }
.debug-changes { margin-top: 16px; padding: 12px 13px; border: 1px solid rgba(154, 94, 112, 0.25); border-radius: 4px; background: rgba(154, 94, 112, 0.043); }
.debug-changes[hidden] { display: none; }
.debug-changes-heading { display: flex; justify-content: space-between; gap: 12px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.debug-changes-heading span:last-child { color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: 0.04em; text-transform: none; }
.debug-changes ul { display: grid; gap: 6px; margin: 10px 0px 0px; padding: 0px; list-style: none; }
.debug-changes li { padding: 7px 8px; border: 1px solid var(--line); color: var(--ink); background: rgba(255, 255, 255, 0.24); font: 10px / 1.45 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.width-warning { display: flex; align-items: flex-start; gap: 7px; border: 1px solid rgba(193, 126, 58, 0.35); color: rgb(138, 90, 41); background: rgba(220, 166, 96, 0.12); line-height: 1.5; }
.width-warning[hidden] { display: none; }
html.darkmode .width-warning { color: rgb(233, 189, 131); background: rgba(220, 166, 96, 0.12); }
.meta-check { display: inline-grid; place-items: center; border-radius: 50%; }
.meta-check.is-warning { background: rgb(193, 126, 58); }
.saved-section { margin-top: 16px; padding: 27px 30px; box-shadow: none; }
.empty-state { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding: 18px; border: 1px dashed var(--line); color: var(--muted); font-size: 10px; }
.empty-star { color: var(--gold); font-size: 16px; }
.saved-card { flex-direction: column; text-align: left; transition: border 0.18s, transform 0.18s; }
.saved-card-name { padding-right: 18px; }
.saved-card-delete { border: 0px; line-height: 1; }
.saved-card-delete:hover { color: var(--accent); }
.wedding-footer { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--muted); font-size: 9px; }
.footer-divider { width: 23px; height: 1px; background: var(--gold); }
.message-modal { position: fixed; z-index: 50; inset: 0px; display: grid; place-items: center; padding: 18px; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.message-modal[hidden] { display: none; }
.message-modal.is-visible { opacity: 1; visibility: visible; }
.message-modal-backdrop { position: absolute; inset: 0px; background: rgba(39, 35, 34, 0.22); backdrop-filter: blur(7.5px); }
.message-modal-card { position: relative; display: grid; width: min(100%, 376px); overflow: hidden; border: 0.5px solid rgb(127, 69, 69); border-radius: 35px; color: rgb(0, 0, 0); background: rgba(255, 255, 255, 0.5); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; backdrop-filter: blur(7.5px); transform: translateY(12px) scale(0.98); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.message-modal.is-visible .message-modal-card { transform: translateY(0px) scale(1); }
.message-modal-card-hint, .message-modal-card-error { grid-template-columns: 70px 1fr; grid-template-rows: 78px 44px; column-gap: 0px; }
.message-modal-card-question { grid-template-columns: 70px 1fr; grid-template-rows: 96px 44px 44px; row-gap: 8px; }
.message-modal-mark { display: grid; place-items: center; align-self: start; width: 30px; height: 78px; margin-left: 30px; color: rgb(235, 222, 206); font-size: 60px; line-height: 1; }
.message-modal-mark-icon { display: block; color: rgb(235, 222, 206); font: 700 60px / 1 Kodchasan, sans-serif; -webkit-text-stroke: 1.25px rgb(127, 69, 69); }
.message-modal-text { grid-column: 2; align-self: center; width: 178px; margin: 0px 0px 0px 38px; color: rgb(0, 0, 0); font: 400 14px / 1.35 Kodchasan, sans-serif; text-align: center; overflow-wrap: anywhere; }
.message-modal-card-question .message-modal-text { grid-column: 2; margin-left: 0px; }
.message-modal-actions { grid-column: 1 / -1; display: grid; grid-template-rows: repeat(1, 44px); gap: 8px; }
.message-modal-card-question .message-modal-actions { grid-row: 2 / span 2; }
.message-modal-action { width: 100%; height: 44px; padding: 0px 18px; border: 2px solid rgb(127, 69, 69); border-radius: 25px; color: rgb(127, 69, 69); background: rgba(136, 94, 94, 0); font: 600 14px / 1 Kodchasan, sans-serif; cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.18s; }
.message-modal-action:hover { transform: translateY(-1px); }
.message-modal-primary { border-color: rgb(118, 62, 62); color: rgb(255, 255, 255); background: rgb(118, 62, 62); }
.message-modal-danger { order: 0; border-color: rgb(127, 69, 69); color: rgb(127, 69, 69); background: rgba(136, 94, 94, 0); }
.message-modal-secondary { order: 1; border-color: rgb(118, 62, 62); color: rgb(255, 255, 255); background: rgb(118, 62, 62); }
.message-modal-action[hidden] { display: none; }
html.darkmode .message-modal-backdrop { background: rgba(0, 0, 0, 0.45); }
html.darkmode .message-modal-card { border-color: var(--wedding-accent-dark); color: var(--wedding-ink-dark); background: rgba(53, 46, 44, 0.72); box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px; }
html.darkmode .message-modal-text { color: var(--wedding-ink-dark); }
html.darkmode .message-modal-action { border-color: var(--wedding-highlight-dark); color: var(--wedding-highlight-dark); }
html.darkmode .message-modal-primary, html.darkmode .message-modal-secondary { border-color: var(--wedding-accent-dark); color: rgb(255, 255, 255); background: var(--wedding-accent-dark); }
@media (max-width: 560px) {
  .message-modal { padding: 12px; }
  .message-modal-card { width: min(100%, 376px); }
  .message-modal-card-question .message-modal-text { width: min(100%, 256px); }
}
.message-hint { padding: 0px; border: 0.5px solid rgb(127, 69, 69); border-radius: 35px; color: rgb(126, 126, 126); background: rgba(255, 255, 255, 0.5); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; backdrop-filter: blur(7.5px); font: 400 16px Kodchasan, sans-serif; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.message-hint[hidden] { display: none; }
.message-hint.is-visible { opacity: 1; transform: translate(-50%, 0px); }
.message-hint-mark { flex: 0 0 45px; width: 45px; height: 45px; background: url("/moments/weddings-toast-flower.webp") center center / 45px 45px no-repeat; }
#message-hint-text { display: flex; align-items: center; width: 320px; height: 45px; padding: 0px; }
html.darkmode .message-hint { box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 34px; }
.base-box { min-width: 0px; margin: 27px 0px 0px; padding: 15px 14px 14px; border: 1px solid var(--line); border-radius: 3px; }
.base-box legend { font-size: 10px; }
.switch-line { font-size: 11px; font-weight: 700; }
.switch-line[hidden] { display: none; }
.base-toggle-row { flex-wrap: wrap; align-items: center; justify-content: space-between; }
.base-toggle-row .switch-line { min-width: 0px; }
.base-style-control .field-label { margin-bottom: 7px; }
.switch-line input { position: absolute; opacity: 0; pointer-events: none; }
.base-controls { display: grid; grid-template-columns: 1fr; gap: 9px; }
.base-preview-hint { margin: 0px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.base-control-state { display: none; }
.base-extra-control, .base-slider-field { min-width: 0px; }
.base-extra-control .range-input { margin-top: 10px; }
.base-extra-control .range-heading output { color: var(--accent); font-size: 10px; font-weight: 800; }
.base-controls .field-label { margin-bottom: 0px; font-size: 9px; }
.base-slider-field .range-input { margin-top: 10px; }
.unit-input { display: flex; align-items: center; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.42); }
.unit-input input { width: 100%; min-width: 0px; border: 0px; outline: 0px; padding: 8px 7px; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; }
.unit-input span { padding-right: 7px; color: var(--muted); font-size: 9px; }
.graphics-toggle { text-align: left; }
.graphics-subtitle { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.graphics-toggle-icon { transition: transform 0.24s; }
.section-inline-heading .field-label { margin-bottom: 0px; }
.upload-button { flex: 0 0 auto; font-weight: 800; cursor: pointer; }
.image-assets { overflow-x: auto; }
.small-muted { margin: 0px; color: var(--muted); font-size: 9px; }
.asset-card { justify-items: stretch; }
.asset-card img { width: 76px; height: 48px; object-fit: contain; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.54); }
.asset-card-placeholder { justify-items: center; }
.asset-placeholder-icon { line-height: 1; }
.asset-card-placeholder .asset-name { max-width: 100%; text-align: center; }
.asset-name { overflow: hidden; font-size: 8px; }
.asset-add, .asset-delete { flex: 1 1 auto; font-size: 8px; font-weight: 800; }
.asset-delete { flex: 0 0 21px; }
.asset-add:hover { border-color: var(--accent); }
.asset-actions { flex-wrap: wrap; }
.asset-add { line-height: 1.2; }
.asset-delete:hover { border-color: var(--accent); color: var(--accent); }
.placed-heading { font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
.placed-row-top { display: flex; justify-content: space-between; gap: 8px; }
.placed-name { overflow: hidden; color: var(--ink); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.remove-image { width: 16px; height: 16px; padding: 0px; border: 0px; color: var(--muted); background: transparent; line-height: 1; }
.remove-image:hover { color: var(--accent); }
.save-box .field-label { margin-bottom: 7px; }
.save-print-toggle { margin-bottom: 10px; }
.save-row, .share-row { display: flex; gap: 7px; }
.save-row input, .share-row input { width: 100%; min-width: 0px; border: 1px solid var(--line); outline: 0px; padding: 10px 9px; color: var(--ink); background: rgba(255, 255, 255, 0.52); font-size: 11px; }
.save-row input { flex: 1 1 120px; width: auto; }
.save-row input:focus, .share-row input:focus { border-color: var(--accent); box-shadow: rgba(154, 94, 112, 0.12) 0px 0px 0px 3px; }
.save-row .button { flex: 0 1 145px; white-space: normal; line-height: 1.25; }
.save-description-reveal { grid-template-rows: 0fr; margin-top: 0px; transition: grid-template-rows 0.24s, margin-top 0.24s, opacity 0.24s, transform 0.24s; }
.save-description-reveal > div { min-height: 0px; }
.save-description-reveal.is-visible { grid-template-rows: 1fr; opacity: 1; transform: translateY(0px); }
.save-description-reveal textarea { display: block; outline: 0px; line-height: 1.5; }
.save-description-reveal textarea:focus { border-color: var(--accent); box-shadow: rgba(154, 94, 112, 0.12) 0px 0px 0px 3px; }
.share-section { margin-top: 16px; padding: 22px 30px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); box-shadow: none; }
.share-overview { min-width: 0px; flex: 1 1 auto; }
.share-section h2 { margin-top: 5px; font-size: 21px; }
.section-description { color: var(--muted); }
.share-actions { display: flex; justify-content: flex-end; }
.share-row { margin-left: auto; justify-content: flex-end; }
.share-row .button { flex: 0 0 auto; }
.shared-recipients-label { display: block; text-transform: uppercase; letter-spacing: 0.12em; }
.shared-recipients-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.shared-recipient { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.shared-recipient-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remove-share { display: grid; place-items: center; width: 16px; height: 16px; padding: 0px; border: 0px; border-radius: 50%; color: var(--accent); background: transparent; font-size: 0px; line-height: 1; }
.remove-share svg { display: block; width: 9px; height: 9px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; }
.remove-share:hover { color: var(--accent-dark); background: rgba(154, 94, 112, 0.12); }
.share-empty { color: var(--muted); font-size: 9px; }
.button-small { padding: 7px 8px; font-size: 9px; }
.saved-card-head > div { min-width: 0px; }
.saved-card-description { display: -webkit-box; -webkit-box-orient: vertical; }
.saved-card-description[hidden] { display: none; }
.saved-card-actions { flex-wrap: wrap; }
.saved-card-share-icon.received-share { color: var(--gold); }
.own-badge { color: var(--muted); }
.print-toggle { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; cursor: pointer; }
.print-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.print-check { display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: transparent; background: transparent; transition: background 0.15s, color 0.15s; }
.print-toggle input:checked + .print-check { color: rgb(255, 255, 255); }
.saved-heading-actions { display: grid; align-self: center; justify-items: end; }
.own-only-toggle { margin-right: 0px; white-space: nowrap; }
.saved-card.is-shared { border-color: rgba(154, 94, 112, 0.24); background: rgba(154, 94, 112, 0.05); }
@media (min-width: 861px) {
  .preview-panel { position: sticky; top: var(--wedding-sticky-top, 112px); align-self: start; }
}
@media (max-width: 860px) {
  .hero-block { grid-template-columns: 1fr; gap: 22px; padding-top: 55px; }
  .hero-side { display: flex; justify-content: center; }
  .hero-copy { max-width: 500px; }
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { grid-row: 1; }
  .control-panel { grid-row: 2; }
  .preview-stage { height: min(62vw, 460px); }
}
@media (max-width: 560px) {
  .wedding-app { width: min(100% - 24px, 1240px); padding-top: 16px; }
  .header-note, .header-status { display: none; }
  .hero-block { padding: 45px 0px 34px; }
  .hero-side { display: block; }
  .wedding-hero-logo { width: min(100%, 320px); margin-right: auto; margin-left: auto; }
  h1 { font-size: 48px; }
  .progress-line { gap: 8px; letter-spacing: 0.08em; font-size: 8px; }
  .progress-dash { width: 13px; }
  .control-panel, .preview-panel, .saved-section, .share-section { padding: 21px 17px; }
  .base-toggle-row { flex-direction: column; align-items: flex-start; gap: 9px; }
  .preview-stage { min-height: 285px; margin-top: 19px; }
  .preview-meta { gap: 10px; grid-template-columns: repeat(3, 1fr); }
  .meta-gloss-control { grid-column: 1 / -1; }
  .preview-status { justify-content: flex-start; text-align: left; }
  .saved-designs { grid-template-columns: repeat(2, 1fr); }
  .save-row, .share-row, .share-entry-row { flex-direction: column; align-items: stretch; }
  .save-row .button { max-width: none; }
  .share-actions { width: 100%; }
  .share-row { width: 100%; }
  .wedding-footer { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .stage-tip { white-space: normal; }
}
body[data-wedding-app] { --paper: var(--wedding-page); --paper-deep: var(--wedding-soft); --ink: var(--wedding-ink); --muted: var(--wedding-muted); --line: color-mix(in srgb, var(--wedding-accent) 18%, transparent); --accent: var(--wedding-highlight); --accent-dark: var(--wedding-accent); --gold: #c79a67; --panel: var(--wedding-panel); --shadow: none; color: var(--wedding-ink); font-family: Kodchasan, system-ui, sans-serif; }
.hero-block { position: relative; display: block; text-align: center; }
.wedding-hero-logo { position: absolute; left: 50%; margin: 0px; object-fit: cover; transform: translateX(-50%); }
.hero-block h1 { position: absolute; left: 50%; margin: 0px; color: var(--wedding-ink); text-transform: none; transform: translateX(-50%); }
.hero-block h1 span, .hero-block h1 em { display: block; font: inherit; }
.hero-block h1 em { color: var(--wedding-highlight); }
.hero-copy { position: absolute; left: 50%; margin: 0px; color: var(--wedding-ink); transform: translateX(-50%); }
.workspace { display: grid; align-items: start; }
.control-panel, .preview-panel, .share-section, .saved-section { border: 0px; border-radius: var(--wedding-panel-radius); color: var(--wedding-ink); background: var(--wedding-panel); box-shadow: none; }
.preview-panel { min-width: 0px; background: radial-gradient(circle at 50% 47%, color-mix(in srgb, var(--wedding-field) 100%, transparent) 0, color-mix(in srgb, var(--wedding-soft) 23%, var(--wedding-panel)) 100%); }
.panel-heading, .preview-topline, .saved-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.section-kicker, .shared-recipients-label { margin: 0px; color: var(--wedding-ink); font: 400 10px / 1.2 Kodchasan, sans-serif; letter-spacing: 0px; text-transform: uppercase; }
.panel-heading h2, .preview-topline h2, .share-section h2, .saved-section h2 { margin: 3px 0px 0px; color: var(--wedding-ink); font: 400 18px / 1.25 Kodchasan, sans-serif; }
.field-label, .range-heading label, .graphics-subtitle { display: block; margin: 0px 0px 8px; color: var(--wedding-ink); font: 400 12px / 1.25 Kodchasan, sans-serif; letter-spacing: 0px; text-transform: none; }
.field-hint, .base-preview-hint, .section-description, .small-muted { color: var(--wedding-muted); font: 400 9px / 1.45 Kodchasan, sans-serif; }
.name-inputs { display: grid; justify-content: space-between; }
.ampersand, .input-prefix { display: none; }
.input-wrap input, .select-wrap select, .save-row input, .save-description-reveal textarea, .share-row input { width: 100%; min-width: 0px; border: .5px solid color-mix(in srgb, var(--wedding-accent) 75%, transparent); border-radius: var(--wedding-control-radius); outline: 0px; color: var(--wedding-ink); background: var(--wedding-field); font: 400 12px / 1.3 Kodchasan, sans-serif; }
.input-wrap input, .select-wrap select { height: 33px; padding: 0px 10px; }
.input-wrap input { font-size: 16px; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 34px; border-color: transparent; background: var(--wedding-soft); cursor: pointer; }
.select-chevron { position: absolute; top: 0px; display: inline-flex; align-items: center; height: 100%; color: var(--wedding-muted); line-height: 1; pointer-events: none; }
.range-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.range-heading label { margin: 0px; }
.range-heading output { color: var(--wedding-accent); }
.range-input { width: 100%; margin: 7px 0px 0px; appearance: none; border: 0px; background: transparent; accent-color: var(--wedding-accent); cursor: pointer; }
.range-input::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--wedding-accent) 0 var(--range-progress, 50%), var(--wedding-track) var(--range-progress, 50%) 100%); }
.range-input::-webkit-slider-thumb { appearance: none; border-radius: 50%; }
.range-scale { display: none; }
.range-group .field-hint { margin: 5px 0px 0px; }
.initial-controls { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 17px; padding-top: 0px; border-top: 0px; }
.control-section-divider { display: flex; grid-column: 1 / -1; align-items: center; gap: 9px; color: var(--wedding-ink); font: 400 12px / 1.25 Kodchasan, sans-serif; }
.control-section-line { flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--wedding-accent) 28%, transparent); }
.initial-toggle-control .field-hint { margin: 6px 0px 0px; }
.switch-line { display: inline-flex; align-items: center; gap: 9px; color: var(--wedding-ink); font: 400 12px / 1.3 Kodchasan, sans-serif; cursor: pointer; }
.switch-line input, .print-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.fake-switch { position: relative; flex: 0 0 40px; width: 40px; height: 20px; border-radius: 10px; background: var(--wedding-track); transition: background var(--wedding-transition); }
.fake-switch::after { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; content: ""; background: var(--wedding-field); transition: transform var(--wedding-transition); }
.switch-line input:checked + .fake-switch { background: var(--wedding-accent); }
.switch-line input:checked + .fake-switch::after { transform: translateX(20px); }
.base-box, .image-library { min-width: 0px; margin: 18px 0px 0px; padding: 17px 0px 0px; border: 0px; border-radius: 0px; }
.base-box { border-top: 1px solid color-mix(in srgb, var(--wedding-accent) 28%, transparent); }
.image-library { border-top: 0px; }
.base-box legend { padding: 0px 10px 0px 0px; color: var(--wedding-ink); background: var(--wedding-panel); font: 400 12px / 1.25 Kodchasan, sans-serif; letter-spacing: 0px; text-transform: none; }
.base-controls { margin-top: 8px; }
.graphics-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0px; width: 100%; padding: 0px; border: 0px; color: var(--wedding-ink); background: transparent; }
.graphics-toggle .field-label { margin: 0px; }
.graphics-toggle-line { flex: 1 1 auto; height: 1px; margin: 0px 10px; background: color-mix(in srgb, var(--wedding-accent) 28%, transparent); }
.graphics-toggle-icon { color: var(--wedding-accent); font-size: 18px; }
.image-library.is-open .graphics-toggle-icon { transform: none; }
.graphics-content { display: grid; grid-template-rows: 0fr; margin-top: 0px; opacity: 0; transition: grid-template-rows var(--wedding-transition), margin-top var(--wedding-transition), opacity var(--wedding-transition); }
.graphics-content-inner { min-height: 0px; overflow: hidden; }
.image-library.is-open .graphics-content { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; }
.section-inline-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.graphics-subtitle { margin-bottom: 8px; }
.upload-button, .button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--wedding-accent); border-radius: var(--wedding-control-radius); color: var(--wedding-accent); background: transparent; font: 400 11px / 1.2 Kodchasan, sans-serif; transition: color var(--wedding-transition), background var(--wedding-transition), transform var(--wedding-transition); }
.upload-button input { display: none; }
.button:hover, .upload-button:hover { color: var(--wedding-field); background: var(--wedding-accent); }
.button:active, .upload-button:active { transform: translateY(1px); }
.button-primary { color: rgb(255, 255, 255); background: var(--wedding-accent); }
.button-secondary { background: transparent; }
.image-assets { display: flex; align-items: flex-start; gap: 10px; min-height: 72px; margin: 0px; padding: 12px 1px 8px; overflow: auto hidden; scrollbar-color: var(--wedding-accent) transparent; scrollbar-width: thin; scroll-snap-type: x; }
.asset-card { display: grid; flex: 0 0 60px; width: 60px; min-width: 60px; scroll-snap-align: start; transform-origin: left top; transition: flex-basis var(--wedding-transition), width var(--wedding-transition), min-width var(--wedding-transition); }
.asset-card.is-expanded { flex-basis: 160px; width: 160px; min-width: 160px; animation: asset-card-expand var(--wedding-transition) both; }
.asset-card.is-collapsing { animation: asset-card-collapse var(--wedding-transition) both; }
.asset-preview-toggle { width: 60px; height: 60px; padding: 0px; overflow: hidden; border: 0px; border-radius: 10px; background: color-mix(in srgb, var(--wedding-soft) 29%, transparent); transform-origin: left top; transition: width var(--wedding-transition), height var(--wedding-transition), background var(--wedding-transition), transform var(--wedding-transition); }
.asset-card.is-expanded .asset-preview-toggle { width: 160px; height: 160px; animation: asset-preview-expand var(--wedding-transition) both; transform: translateZ(0px); }
.asset-card.is-collapsing .asset-preview-toggle { animation: asset-preview-collapse var(--wedding-transition) both; }
@keyframes asset-card-expand { 
  0% { flex-basis: 60px; width: 60px; min-width: 60px; }
  100% { flex-basis: 160px; width: 160px; min-width: 160px; }
}
@keyframes asset-preview-expand { 
  0% { width: 60px; height: 60px; transform: scale(0.98); }
  100% { width: 160px; height: 160px; transform: scale(1); }
}
@keyframes asset-card-collapse { 
  0% { flex-basis: 160px; width: 160px; min-width: 160px; }
  100% { flex-basis: 60px; width: 60px; min-width: 60px; }
}
@keyframes asset-preview-collapse { 
  0% { width: 160px; height: 160px; transform: scale(1); }
  100% { width: 60px; height: 60px; transform: scale(0.98); }
}
.asset-preview-toggle img { display: block; width: 100%; height: 100%; border: 0px; background: transparent; object-fit: contain; }
.asset-details { display: grid; grid-template-rows: 0fr 0fr 0fr; min-width: 0px; opacity: 0; transform: translateY(-4px); transition: grid-template-rows var(--wedding-transition), opacity 150ms ease, transform var(--wedding-transition); }
.asset-card.is-expanded .asset-details { grid-template-rows: auto auto auto; opacity: 1; transform: translateY(0px); }
.asset-name, .asset-format, .asset-actions { overflow: hidden; }
.asset-name { color: var(--wedding-muted); text-overflow: ellipsis; white-space: nowrap; }
.asset-format { color: var(--wedding-muted); }
.asset-actions { display: grid; }
.asset-add, .asset-delete { min-height: 22px; padding: 3px 7px; border: 1px solid var(--wedding-accent); border-radius: var(--wedding-control-radius); color: var(--wedding-accent); background: transparent; font: 400 8px / 1.25 Kodchasan, sans-serif; }
.asset-delete { border-color: transparent; color: var(--wedding-muted); }
.asset-card-placeholder { display: grid; place-items: center; align-content: center; min-height: 60px; padding: 5px; border: 0px; border-radius: 10px; background: color-mix(in srgb, var(--wedding-soft) 29%, transparent); text-align: center; }
.asset-card-placeholder .asset-name { color: var(--wedding-muted); font-size: 6px; }
.asset-placeholder-icon { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid color-mix(in srgb, var(--wedding-accent) 45%, transparent); border-radius: 50%; color: var(--wedding-accent); font-size: 12px; }
.placed-images { display: grid; gap: 6px; margin-top: 7px; }
.placed-heading { margin: 0px; color: var(--wedding-muted); font-size: 8px; }
.placed-row { padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--wedding-accent) 20%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--wedding-field) 42%, transparent); }
.save-box { margin-bottom: 0px; }
.save-heading .field-label, .save-print-toggle { margin: 0px; }
.save-print-toggle { font-size: 8px; }
.save-row input { height: 26px; padding: 0px 8px; border-color: transparent; font-size: 10px; }
.save-description-reveal > div { overflow: visible; }
.save-description-reveal .field-label { font-weight: 600; }
.label-note { color: var(--wedding-muted); font-weight: 400; }
.save-description-reveal textarea { border-color: transparent; font-size: 10px; }
.save-row .button { width: 100%; max-width: none; padding: 5px 10px; font-size: 10px; }
.print-hint { margin: 9px 0px 0px; color: var(--wedding-muted); font-size: 8px; }
.preview-topline { min-height: 40px; }
.preview-topline-actions { display: flex; align-items: center; }
.preview-background-control, .preview-gloss-control { display: inline-flex; align-items: center; gap: 7px; color: var(--wedding-muted); font: 400 9px / 1.2 Kodchasan, sans-serif; }
.preview-background-control select { width: 127px; border: 0px; color: var(--wedding-ink); background: var(--wedding-soft); }
.preview-gloss-control .range-input { width: 74px; margin: 0px; }
.preview-gloss-control output { min-width: 29px; color: var(--wedding-accent); }
.preview-fullscreen-button .material-symbols-outlined { display: none; }
.preview-stage { position: relative; min-height: 0px; margin-top: 10px; overflow: hidden; border: 0px; border-radius: 30px; background: transparent; contain: layout paint; }
html.darkmode .preview-stage { background: transparent; }
.stage-corner, .stage-glow { display: none; }
.stage-tip { right: 14px; bottom: 8px; width: calc(100% - 28px); max-width: none; color: color-mix(in srgb, var(--wedding-muted) 78%, transparent); font-size: 7px; }
.preview-meta { display: grid; gap: 0px; margin-top: 10px; }
.preview-meta > div { display: flex; flex-direction: column; gap: 3px; }
.meta-label { color: var(--wedding-muted); letter-spacing: 0px; text-transform: uppercase; }
.preview-meta strong { color: var(--wedding-muted); }
.swatches { display: flex; flex-wrap: nowrap; gap: 5px; }
.swatch { flex: 0 0 15px; width: 15px; height: 15px; padding: 0px; border: 1px solid color-mix(in srgb, var(--wedding-ink) 15%, transparent); border-radius: 50%; background: var(--swatch); box-shadow: none; }
.swatch.is-selected { outline: 1px solid var(--wedding-accent); outline-offset: 2px; }
.preview-feedback { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 4px; }
.preview-status { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-left: auto; padding: 0px; color: var(--wedding-muted); font-size: 8px; }
.meta-check { width: 8px; height: 8px; color: transparent; background: var(--wedding-success); font-size: 0px; }
.width-warning { margin: 0px; padding: 3px 7px; border-radius: 8px; font-size: 8px; }
.share-section, .saved-section { margin-top: 23px; }
.share-entry-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.section-description { margin: 6px 0px 0px; font-size: 9px; }
.share-actions { width: min(100%, 365px); }
.share-row { display: grid; gap: 10px; width: 100%; }
.share-row input { padding: 0px 10px; font-size: 10px; }
.share-row .button { font-size: 11px; font-weight: 600; }
.shared-recipients { margin-top: 15px; }
.shared-recipients-label { margin-bottom: 6px; color: var(--wedding-muted); font-size: 9px; }
.shared-recipient { padding: 2px 7px; border: .5px solid var(--wedding-accent); border-radius: var(--wedding-control-radius); color: var(--wedding-accent); background: color-mix(in srgb, var(--wedding-accent) 4%, transparent); font-size: 8px; }
.saved-count { color: var(--wedding-muted); font-size: 9px; }
.saved-heading-actions { gap: 5px; }
.own-only-toggle { font-size: 9px; }
.own-only-toggle .fake-switch { flex-basis: 40px; height: 12px; }
.own-only-toggle .fake-switch::after { top: 2px; width: 16px; height: 8px; border-radius: 8px; }
.saved-designs { flex-wrap: wrap; margin-top: 18px; }
.shared-badge, .saved-card-meta, .saved-card-description { color: var(--wedding-muted); font-family: Kodchasan, sans-serif; }
.shared-badge { font-size: 7px; }
.saved-card-actions .button { font-size: 7px; font-weight: 700; }
.print-toggle { color: var(--wedding-muted); font-size: 7px; }
.print-check { width: 10px; height: 10px; border-color: color-mix(in srgb, var(--wedding-muted) 45%, transparent); font-size: 7px; }
.print-toggle input:checked + .print-check { border-color: var(--wedding-success); background: var(--wedding-success); }
.wedding-signoff { margin: 26px 0px 0px; color: var(--wedding-ink); font: 400 20px / 1.2 "Dr Sugiyama", cursive; text-align: center; }
.message-hint, .stage-base-controls, .stage-image-controls, .stage-selection-hint { color: var(--wedding-ink); background: color-mix(in srgb, var(--wedding-panel) 90%, transparent); }
@media (max-width: 1558px) {
  .wedding-app { width: 100%; }
  .workspace { grid-template-columns: 380px minmax(0px, 1fr); }
}
@media (min-width: 1033px) {
  .preview-panel { position: sticky; top: var(--wedding-sticky-top, 112px); align-self: start; }
}
.saved-card::after { position: absolute; content: ""; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 0.18s; }
.saved-card-preview { position: absolute; bottom: calc(100% + 12px); left: 50%; opacity: 0; pointer-events: none; transition: opacity 0.18s, transform 0.18s; visibility: hidden; }
.saved-card-preview-image { display: block; }
.saved-card.has-preview:hover::after, .saved-card.has-preview:focus-within::after, .saved-card.has-preview:hover .saved-card-preview, .saved-card.has-preview:focus-within .saved-card-preview { opacity: 1; }
.saved-card.has-preview:hover .saved-card-preview, .saved-card.has-preview:focus-within .saved-card-preview { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .saved-card::after, .saved-card-preview { transition: none; }
}
#save-design[hidden] { display: none !important; }
@media (max-width: 1320px) {
  .wedding-app { padding-right: 32px; padding-left: 32px; }
  .workspace { grid-template-columns: minmax(330px, 380px) minmax(0px, 1fr); }
  .name-inputs { grid-template-columns: 1fr 1fr; gap: 16px; }
  .preview-topline { flex-direction: column; }
  .preview-topline-actions { flex-wrap: wrap; }
}
@media (max-width: 1032px) {
  .wedding-app { padding-right: 24px; padding-left: 24px; }
  .preview-panel { grid-row: 1; }
  .control-panel { grid-row: 2; min-height: 0px; }
  .preview-stage { height: min(58vw, 430px); min-height: 320px; }
}
@media (max-width: 672px) {
  .wedding-app { width: 100%; }
  .hero-block { display: flex; flex-direction: column; align-items: center; padding: 24px 0px 46px; }
  .wedding-hero-logo, .hero-block h1, .hero-copy { position: static; width: auto; transform: none; }
  .wedding-hero-logo { width: min(100%, 250px); height: auto; }
  .hero-block h1 { margin-top: 38px; }
  .hero-copy { margin-top: 34px; }
  .control-panel, .preview-panel, .share-section, .saved-section { padding: 18px; border-radius: 24px; }
  .name-inputs { grid-template-columns: 1fr; gap: 8px; }
  .base-toggle-row { grid-template-columns: 1fr; }
  .base-toggle-row .switch-line:first-child { grid-column: auto; }
  .preview-topline-actions { display: grid; width: 100%; }
  .preview-background-control, .preview-gloss-control { justify-content: space-between; }
  .preview-background-control select { width: min(100%, 190px); }
  .stage-tip { display: none; }
  .share-entry-row, .share-row { display: grid; grid-template-columns: 1fr; }
  .share-actions { width: 100%; }
  .saved-heading { align-items: flex-start; }
  .saved-designs { display: grid; }
}
.share-row .button { text-align: center; }
#stage-image-controls .stage-image-rounded-toggle { display: flex; align-items: center; min-height: 18px; margin: 0px 0px 1px; gap: 5px; color: rgb(118, 62, 62); font: 600 10px / 12px Kodchasan, sans-serif; }
#stage-image-controls .stage-image-rounded-toggle .fake-switch { flex: 0 0 40px; width: 40px; min-width: 40px; margin-top: 0px; }
.stage-base-controls, .stage-image-controls, .stage-text-depth { z-index: 10; }
.name-hint { margin: 4px 0px 0px; color: rgb(105, 105, 105); font: 400 10px Manrope, sans-serif; text-align: center; white-space: nowrap; }
@media (max-width: 468px) {
  .saved-designs { grid-template-columns: 1fr; }
}
.input-wrap { border: 0px; border-radius: 0px; background: transparent; box-shadow: none; }
.input-wrap:focus-within { border: 0px; box-shadow: none; }
.wedding-theme :where(input, select, textarea):focus-visible, .input-wrap input:focus-visible, .select-wrap select:focus-visible, .save-row input:focus, .save-description-reveal textarea:focus, .share-row input:focus { outline: 0px; box-shadow: none; }
html.darkmode .wedding-theme :where(input, select, textarea):focus, html.darkmode .wedding-theme :where(input, select, textarea):focus-visible { outline: 0px; border-color: var(--wedding-accent); box-shadow: none; }
.input-wrap input:focus-visible, .select-wrap select:focus-visible, .save-row input:focus, .save-description-reveal textarea:focus, .share-row input:focus { border-color: var(--wedding-accent); }
.base-toggle-row { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: -4px; }
.base-toggle-row .switch-line:first-child { grid-column: auto; }
.base-style-control { margin-top: 0px; }
.base-rounding-row { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; }
.base-rounding-row .switch-line[hidden] { display: none; }
.upload-button { border-color: rgb(118, 62, 62); color: rgb(255, 255, 255); background: rgb(118, 62, 62); }
.upload-button:hover { border-color: rgb(96, 51, 51); color: rgb(255, 255, 255); background: rgb(96, 51, 51); }
#save-design .button-icon { font: 400 8px / 1 Arial, sans-serif; }
.preview-material-control { position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 0px; color: var(--wedding-muted); font: 400 9px / 1.2 Kodchasan, sans-serif; text-transform: none; letter-spacing: 0px; }
.material-toggle { display: grid; place-items: center; width: 16px; height: 16px; padding: 0px; border: 0px; border-radius: 50%; color: inherit; background: transparent; cursor: pointer; }
.material-active-dot { width: 16px; height: 16px; border: 0px; border-radius: 50%; background: var(--active-material); }
.material-chevron { font-size: 11px; line-height: 1; transition: transform var(--wedding-transition); }
.preview-material-control.is-open .material-chevron { transform: rotate(180deg); }
.material-options { position: absolute; z-index: 24; top: calc(100% + 5px); right: 0px; left: auto; display: grid; grid-template-columns: 18px; gap: 6px; width: 18px; padding: 0px; border: 0px; border-radius: 0px; background: transparent; box-shadow: none; opacity: 0; pointer-events: none; transform: translateY(-5px); transition: opacity var(--wedding-transition), transform var(--wedding-transition); }
.preview-material-control.is-open .material-options { opacity: 1; pointer-events: auto; transform: translateY(0px); }
.material-options .swatch { box-sizing: border-box; width: 18px; height: 18px; border: 0px; border-radius: 50%; outline: 0px; box-shadow: none; transition: transform var(--wedding-transition); }
.material-options .swatch.is-selected { border: 0px; outline: 0px; box-shadow: none; transform: scale(1.12); }
.material-options .swatch:hover, .material-options .swatch:focus-visible { outline: 0px; box-shadow: none; transform: scale(1.12); }
.preview-fullscreen-button { display: grid; place-items: center; font-size: 11px; line-height: 1; text-align: center; }
.preview-fullscreen-label { display: block; line-height: 1; }
.preview-stage .width-warning { position: absolute; z-index: 8; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; background: transparent; box-shadow: none; font-size: 8px; line-height: 1.35; backdrop-filter: none; }
html.darkmode .preview-stage .width-warning { color: rgb(240, 197, 141); background: transparent; }
.preview-stage:has(.width-warning:not([hidden])) .stage-tip { opacity: 0; }
.preview-meta { grid-template-columns: 88px 127px 88px minmax(0px, 1fr); padding: 0px; align-items: start; }
.preview-meta .preview-status { align-self: center; flex-direction: row; justify-content: flex-end; margin: 0px; padding-top: 4px; }
.saved-card { position: relative; display: flex; box-shadow: none; transform: none; }
html.darkmode .saved-card { background: color-mix(in srgb, var(--wedding-field) 90%, var(--wedding-panel)); }
.saved-card:hover { border-color: color-mix(in srgb, var(--wedding-accent) 55%, transparent); transform: none; }
.shared-badge { margin-top: 2px; }
.stl-download-icon { font-size: 10px; line-height: 1; }
.wedding-theme .input-wrap input:focus, .wedding-theme .select-wrap select:focus, .wedding-theme .save-row input:focus, .wedding-theme .save-description-reveal textarea:focus, .wedding-theme .share-row input:focus { border-width: 1px; }
.saved-card-actions .button:hover { color: var(--wedding-accent); background: transparent; }
@media (max-width: 672px) {
  .base-rounding-row { grid-template-columns: 1fr; }
  .preview-topline-actions { grid-template-columns: auto 1fr auto; }
  .preview-material-control { grid-column: auto; }
  .preview-background-control { grid-column: auto; }
  .preview-gloss-control { grid-column: 1 / 3; }
  .preview-meta { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; height: auto; }
  .preview-meta .preview-status { grid-column: 1 / -1; justify-content: flex-start; max-width: 100%; }
  #model-status { white-space: normal; }
}
.wedding-app { position: relative; isolation: isolate; width: min(1365px, 100%); max-width: 1365px; min-height: 2497px; margin: 0px auto; padding: 50px 88px 40px 96px; zoom: 1; }
.wedding-app::before { position: absolute; z-index: 0; top: 50px; min-height: 2447px; content: ""; background: var(--wedding-page); pointer-events: none; }
.wedding-app > * { position: relative; z-index: 1; }
.hero-block { padding: 0px; }
.hero-block h1 { letter-spacing: 0px; }
.hero-copy { font-size: 25px; line-height: 1.1; }
.workspace { grid-template-columns: 380px 778px; gap: 23px; width: 1181px; }
.control-panel { width: 380px; padding: 20px; }
.preview-panel { width: 778px; padding: 20px; }
.section-kicker { font-size: 12px; font-weight: 500; line-height: 16px; }
.panel-heading h2, .preview-topline h2, .share-section h2, .saved-section h2 { margin-top: 0px; font-family: Manrope, sans-serif; font-size: 22px; font-weight: 400; line-height: 30px; }
.control-group { margin-top: 18px; }
.field-label, .range-heading label, .graphics-subtitle { font-size: 12px; line-height: 16px; }
.name-hint { font-family: Manrope, sans-serif; font-size: 10px; line-height: 14px; }
.select-wrap select, .input-wrap input { font-family: Manrope, sans-serif; }
.range-heading output { font-family: Manrope, sans-serif; font-size: 12px; }
.switch-line, .control-section-divider, .base-box legend { font-size: 12px; line-height: 16px; }
.share-section { min-height: 168px; height: 168px; }
.share-section, .saved-section { width: 1181px; padding: 20px; }
.share-section h2, .saved-section h2 { font-family: Kodchasan, sans-serif; font-size: 22px; }
.saved-card { flex-basis: 215px; }
.saved-card-name { font-size: 16px; line-height: 21px; }
.saved-card-meta { font-size: 12px; line-height: 16px; }
.saved-card-description { margin-top: 10px; font-size: 10px; line-height: 13px; }
.wedding-signoff { margin-top: 26px; }
@media (max-width: 1364px) {
  .wedding-app { width: 100%; max-width: none; padding-right: 32px; padding-left: 32px; }
  .wedding-app::before { right: 0px; left: 0px; width: 100%; }
  .workspace, .share-section, .saved-section { width: 100%; }
  .workspace { grid-template-columns: 380px minmax(0px, 1fr); }
  .preview-panel { width: auto; }
}
@media (max-width: 1032px) {
  .wedding-app { min-height: 0px; padding: 32px 24px 28px; }
  .wedding-app::before { top: 32px; min-height: calc(100% - 32px); }
  .hero-block { height: auto; min-height: 0px; padding-bottom: 46px; }
  .workspace { grid-template-columns: 1fr; }
  .control-panel, .preview-panel { width: 100%; height: auto; }
  .preview-panel { min-height: 585px; }
  .share-section, .saved-section { width: 100%; height: auto; min-height: 0px; }
}
@media (max-width: 672px) {
  .wedding-app { padding: 24px 12px 28px; }
  .wedding-app::before { top: 24px; }
  .hero-block { padding-bottom: 46px; }
  .hero-block h1 { height: auto; }
}
body[data-wedding-app] { background: var(--wedding-page); }
html.darkmode body[data-wedding-app] { background: var(--wedding-page-dark, #1d1a1a); }
.wedding-app::before { right: 0px; left: 0px; width: 100%; height: calc(100% - 50px); }
.input-wrap input { font: 400 18px / 1.3 Manrope, sans-serif; }
.select-wrap select { font: 400 14px / 1 Kodchasan, sans-serif; }
.range-heading output { font: 400 12px / 1.2 Manrope, sans-serif; }
.preview-material-control, .preview-background-control, .preview-gloss-control { font: 400 12px / 1.2 Manrope, sans-serif; }
.preview-background-control select { font: 400 14px / 1 Manrope, sans-serif; }
.preview-gloss-control output { font-size: 12px; }
.meta-label { font: 400 14px / 1.2 Manrope, sans-serif; }
.preview-meta strong { font: 600 14px / 1.2 Manrope, sans-serif; }
.preview-status { font: 400 14px / 1.2 Manrope, sans-serif; }
.graphics-subtitle { font: 400 12px / 1.25 Manrope, sans-serif; }
.field-hint { font: 400 11px / 1.45 Manrope, sans-serif; }
.asset-name { font: 400 10px / 1.3 Kodchasan, sans-serif; }
.asset-format { font: 400 9px / 1.4 Kodchasan, sans-serif; }
.save-box .field-label { font-size: 14px; line-height: 18px; }
.save-description-reveal .field-label { font-size: 9px; line-height: 12px; }
.save-row input, .save-description-reveal textarea { font: 400 12px / 1.35 Manrope, sans-serif; }
.save-row .button { font: 500 14px / 1.2 Kodchasan, sans-serif; }
.share-section .section-description { font: 400 12px / 1.35 Manrope, sans-serif; }
.share-row input, .share-row .button { font: 400 14px / 1.2 Kodchasan, sans-serif; }
.shared-recipient { font: 400 11px / 1.2 Manrope, sans-serif; }
.saved-section .saved-count { font: 400 10px / 1.2 Manrope, sans-serif; }
.own-only-toggle { font: 400 12px / 1.2 Kodchasan, sans-serif; }
.saved-section { height: auto; min-height: 239px; }
.base-style-control > .field-label { display: none; }
.base-box legend { font-weight: 700; }
.image-library { margin-top: 0px; padding-top: 17px; }
.section-inline-heading .field-hint { text-align: center; }
.image-assets { padding-bottom: 0px; }
.asset-card:not(.is-expanded):not(.is-collapsing) .asset-details { height: 0px; margin: 0px; }
.asset-card { gap: 0px; }
.asset-card.is-expanded { row-gap: 2px; }
.preview-stage .width-warning { bottom: 31px; }
.preview-background-control { position: relative; }
.preview-background-control select { appearance: none; }
.preview-select-chevron { position: absolute; top: 0px; display: inline-flex; align-items: center; height: 100%; color: var(--wedding-muted); line-height: 1; pointer-events: none; }
.preview-gloss-control output { display: none; }
.save-heading { margin-bottom: 11px; }
.save-heading .field-label { font-weight: 600; }
.save-description-reveal.is-visible { margin-top: 10px; }
.save-description-reveal textarea { max-height: 49px; }
.save-row .button { min-height: 35px; height: 35px; }
#new-draft { margin-top: 18px; }
#save-design { margin-top: 9px; }
.share-actions, .share-row { width: 436px; }
.share-row { grid-template-columns: 220px 205px; }
@media (max-width: 672px) {
  .share-actions, .share-row { width: 100%; }
  .share-row { grid-template-columns: minmax(0px, 1fr); }
}
.wedding-theme, .wedding-theme * { letter-spacing: 0px; }
.own-only-toggle { flex-direction: row; }
.range-input { height: 16px; }
.control-panel .range-input { width: calc(100% + 1px); margin-left: -1px; }
.range-input::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; }
.range-input::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -4px; }
.select-chevron, .preview-select-chevron { top: 50%; display: grid; place-items: center; width: 18px; height: 18px; line-height: 1; transform: translateY(-50%); }
.select-chevron { right: 12px; font-size: 18px; }
.preview-select-chevron { right: 10px; font-size: 18px; }
@media (min-width: 1299px) {
  .wedding-app { width: min(1365px, 100%); max-width: 1365px; padding: 50px 88px 40px 96px; }
  .workspace { grid-template-columns: 380px 778px; width: 1181px; }
  .control-panel { width: 380px; }
  .preview-panel { width: 778px; }
  .share-section, .saved-section { width: 1181px; }
}
.control-panel { min-height: 0px; height: auto; }
.graphics-heading-block { width: 100%; }
.graphics-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 21px; }
.graphics-heading-row .graphics-subtitle { margin: 0px; }
.graphics-heading-block > .field-hint { width: 100%; margin: 12px 0px 0px; text-align: center; }
.asset-actions { gap: 12px; margin-top: 5px; }
.asset-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 160px; min-width: 160px; height: 42px; min-height: 42px; padding: 0px 8px; border-radius: 20px; font: 600 12px / 1.1 Kodchasan, sans-serif; white-space: normal; text-align: center; }
.asset-add-icon { display: inline-grid; flex: 0 0 20px; place-items: center; width: 20px; height: 20px; border: 1px solid; border-radius: 50%; font: 400 14px / 1 Manrope, sans-serif; }
.asset-delete { min-height: 18px; height: 18px; padding: 0px; border: 0px; font: 400 10px / 1 Kodchasan, sans-serif; }
.preview-stage .width-warning { left: 50%; width: min(672px, 100% - 40px); max-width: none; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.preview-meta { min-height: 30px; }
#save-design .button-icon { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 5px; border: 1px solid; border-radius: 50%; font-style: normal; font-variant: normal; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-weight: 500; font-stretch: normal; font-size: 10px; line-height: 1; font-family: "Material Symbols Outlined"; font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20; }
.share-row input { height: 41px; }
.share-row .button { height: 40px; min-height: 40px; padding: 0px; border-width: 1.5px; border-radius: 12px; font: 400 14px / 1.2 Kodchasan, sans-serif; white-space: nowrap; }
@media (max-width: 672px) {
  .preview-stage .width-warning { left: 50%; width: calc(100% - 28px); max-width: none; transform: translateX(-50%); white-space: normal; }
}
.control-group > label[for="name-one"] { margin-bottom: 5px; }
.name-inputs { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 20px; align-items: stretch; }
.name-inputs .input-wrap { height: 40px; min-height: 40px; border-radius: 12px; }
.name-inputs .input-wrap input { height: 40px; padding: 0px 13px; border: 0px; border-radius: inherit; background: transparent; font: 400 22px Manrope, sans-serif; text-align: left; }
.wedding-theme .name-hint { color: rgb(105, 105, 105); font: 400 10px Manrope, sans-serif; white-space: nowrap; }
.control-group:has(.name-inputs) + .control-group { margin-top: 2px; }
.name-inputs .input-wrap { border: 0px; background: var(--wedding-field); }
.wedding-theme .name-hint { width: calc(50% - 10px); margin: 4px 0px 0px calc(50% + 10px); text-align: left; }
.preview-stage { height: 500px; }
.preview-topline-actions { gap: 20px; }
.material-toggle, .material-active-dot { width: 24px; height: 24px; }
.preview-background-control select { height: 40px; border-radius: 20px; padding: 0px 30px 0px 12px; }
.preview-fullscreen-button { border: 0px; color: rgb(255, 255, 255); background: var(--wedding-accent); }
.preview-fullscreen-button > .material-symbols-outlined { display: none; }
.preview-fullscreen-button:hover, .preview-fullscreen-button:focus-visible { color: rgb(255, 255, 255); background: color-mix(in srgb, var(--wedding-accent) 88%, #000); }
.upload-button { border: 0px; }
.stage-base-controls, .stage-image-controls, .stage-text-depth { width: min(190px, 100% - 16px); border: .5px solid color-mix(in srgb, var(--wedding-accent) 62%, transparent); border-radius: 15px; }
.stage-control-caption { margin-bottom: 2px; color: var(--wedding-accent); font: 400 10px / 12px Kodchasan, sans-serif; letter-spacing: 0.06em; }
.stage-base-row { gap: 4px; font: 400 10px / 14px Kodchasan, sans-serif; }
.stage-base-label { gap: 4px; }
.stage-base-label .material-symbols-outlined { font-size: 14px; }
.stage-base-row output { font: 400 10px / 14px Kodchasan, sans-serif; }
.stage-base-row button { width: 22px; border-radius: 9px; }
.stage-base-full-depth-toggle, .stage-heart-top-align-toggle { gap: 6px; padding: 2px 0px 3px; font: 400 10px / 13px Kodchasan, sans-serif; }
#stage-base-full-depth-toggle > span:last-child, #stage-heart-top-align-toggle > span:last-child { font-size: 0px; }
#stage-base-full-depth-toggle > span:last-child::after { content: "Füße gleichtief"; font: 400 10px / 13px Kodchasan, sans-serif; }
#stage-heart-top-align-toggle > span:last-child::after { content: "Brett auf Herzhöhe"; font: 400 10px / 13px Kodchasan, sans-serif; }
.save-print-toggle .print-check { font-size: 10px; }
.saved-card-delete { font: 400 16px / 18px Manrope, sans-serif; }
.saved-card .print-check { font-size: 7px; }
@media (max-width: 672px) {
  .preview-stage { height: min(105vw, 500px); min-height: 320px; }
  .preview-topline-actions { gap: 12px; }
}
.preview-panel { height: auto; min-height: 0px; }
.preview-stage .fake-switch { flex-basis: 40px; width: 40px; height: 12px; border-radius: 8px; }
.preview-stage .fake-switch::after { top: 2px; left: 2px; width: 16px; height: 8px; border-radius: 8px; }
.preview-stage .switch-line input:checked + .fake-switch::after { transform: translateX(20px); }
.stage-base-controls, .stage-image-controls, .stage-text-depth { padding-top: 6px; padding-bottom: 6px; }
.stage-base-row button { height: 18px; }
.stage-base-full-depth-toggle, .stage-heart-top-align-toggle { padding-top: 2px; padding-bottom: 3px; }
.stage-text-align-option { height: 18px; padding-top: 2px; padding-bottom: 2px; }
.saved-card-delete { color: transparent; background: url("/moments/namensaufsteller/saved-card-delete.svg") center center / 12px 12px no-repeat transparent; font-size: 0px; }
.upload-button { display: inline-flex; align-items: center; justify-content: center; width: 65px; min-width: 65px; height: 30px; min-height: 30px; padding: 0px; border-radius: 15px; font: 400 16px Manrope, sans-serif; }
.preview-fullscreen-button { width: 80px; min-width: 80px; height: 33px; min-height: 33px; padding: 0px; border-radius: 16.5px; font: 500 16px Manrope, sans-serif; }
.stage-base-controls, .stage-image-controls, .stage-text-depth { gap: 5px; padding: 10px 12px; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 20px; backdrop-filter: blur(20px); }
.upload-button { font-size: 0px; }
.upload-button::before { content: "+ Bild"; font: 400 16px Manrope, sans-serif; }
.preview-fullscreen-label { font: 500 16px Manrope, sans-serif; }
.graphics-toggle .field-label, .base-box > legend, .control-section-divider > span:first-child { color: var(--wedding-ink); font: 700 12px / 16px Kodchasan, sans-serif; }
.stage-base-controls, .stage-image-controls, .stage-text-depth { background: rgba(250, 246, 241, 0.94); }
#stage-base-controls { box-sizing: border-box; z-index: 10; width: 210px; min-width: 210px; max-width: 210px; height: auto; min-height: 122px; max-height: none; padding: 10px 12px; gap: 4px; border: 0.5px solid rgb(118, 62, 62); border-radius: 15px; background: rgba(250, 246, 241, 0.2); box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 20px; backdrop-filter: blur(10px); overflow: visible; }
#stage-base-controls .stage-control-caption { margin: 0px 0px 1px; color: rgb(118, 62, 62); font: 400 10px / 12px Kodchasan, sans-serif; letter-spacing: 0px; }
#stage-base-controls .stage-base-row { min-height: 18px; grid-template-columns: 1fr 18px 45px 18px; gap: 3px; color: rgb(118, 62, 62); font: 600 10px / 12px Kodchasan, sans-serif; }
#stage-base-controls .stage-base-label { gap: 3px; color: rgb(118, 62, 62); font: 600 10px / 12px Kodchasan, sans-serif; }
#stage-base-controls .stage-base-label .material-symbols-outlined { flex: 0 0 auto; color: rgb(118, 62, 62); font-size: 12px; line-height: 12px; }
#stage-base-controls .stage-base-row output { min-width: 45px; color: rgb(118, 62, 62); font: 300 11px / 12px Kodchasan, sans-serif; text-align: center; }
#stage-base-controls .stage-base-row button { box-sizing: border-box; width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0px; border: 0.5px solid rgb(118, 62, 62); border-radius: 7px; color: rgb(118, 62, 62); background: transparent; }
#stage-base-controls .stage-base-row button .material-symbols-outlined { font-size: 13px; line-height: 1; }
#stage-base-controls .stage-base-full-depth-toggle, #stage-base-controls .stage-heart-top-align-toggle { min-height: 18px; padding: 0px; gap: 5px; color: rgb(118, 62, 62); font: 600 10px / 12px Kodchasan, sans-serif; }
#stage-base-controls .stage-base-full-depth-toggle .fake-switch, #stage-base-controls .stage-heart-top-align-toggle .fake-switch { grid-area: 1 / 2; justify-self: start; width: 40px; min-width: 40px; margin-top: 0px; }
#stage-base-controls .stage-base-full-depth-toggle, #stage-base-controls .stage-heart-top-align-toggle { display: grid; grid-template-columns: 1fr 18px 45px 18px; align-items: start; column-gap: 3px; }
#stage-base-controls .stage-base-full-depth-toggle > span:last-child, #stage-base-controls .stage-heart-top-align-toggle > span:last-child { grid-area: 1 / 1; min-width: 0px; color: rgb(118, 62, 62); font: 600 10px / 12px Kodchasan, sans-serif; }
#stage-base-full-depth-toggle > span:last-child::after, #stage-heart-top-align-toggle > span:last-child::after { display: none; content: none; }
#stage-base-controls .stage-base-full-depth-toggle[hidden], #stage-base-controls .stage-heart-top-align-toggle[hidden] { display: none; }
html.darkmode #stage-base-controls { background: rgba(41, 36, 36, 0.2); }
.hero-block { min-height: 518px; height: 518px; }
.wedding-hero-logo { top: -39px; }
.range-input::-webkit-slider-thumb { box-sizing: border-box; border: 2px solid var(--wedding-accent); background: rgb(255, 255, 255); }
.preview-stage .width-warning { color: rgb(144, 91, 25); font: 400 14px / 1.35 Manrope, sans-serif; }
.preview-meta .meta-label { font: 400 14px / 1.2 Manrope, sans-serif; letter-spacing: 0px; }
.preview-meta > div > strong { font: 600 14px / 1.2 Manrope, sans-serif; }
.preview-meta .preview-status { font: 400 14px / 1.2 Manrope, sans-serif; }
.preview-meta .meta-check { display: inline-grid; flex: 0 0 14px; place-items: center; width: 14px; min-width: 14px; height: 14px; border-radius: 50%; color: rgb(255, 255, 255); background: var(--wedding-success); font: 700 10px / 14px Manrope, sans-serif; }
.saved-card-head { padding-top: 0px; }
.saved-card-delete { align-self: flex-start; margin-top: 0px; }
@media (max-width: 672px) {
  .saved-designs { gap: 20px 12px; }
}
@media (min-width: 1033px) {
  .preview-panel { display: flex; flex-direction: column; height: auto; min-height: 780px; }
  .preview-topline, .preview-meta { flex: 0 0 auto; }
  .preview-stage { flex: 1 1 auto; height: auto; min-height: 500px; }
}
.saved-section, .saved-designs { overflow: visible; }

/* Kontofunktionen bleiben sichtbar, sind für Gäste aber nicht bedienbar. */
.account-gated { position: relative; isolation: isolate; }
.account-gated.is-account-locked { overflow: hidden; }
.account-required-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--wedding-panel) 42%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.account-required-overlay a {
  max-width: 310px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--wedding-accent) 26%, transparent);
  border-radius: 999px;
  color: var(--wedding-ink);
  background: color-mix(in srgb, var(--wedding-panel) 90%, transparent);
  box-shadow: 0 8px 24px rgba(39, 35, 34, 0.1);
  font: 600 13px / 1.35 Manrope, sans-serif;
  text-align: center;
  text-decoration: none;
}
.account-required-overlay a:hover,
.account-required-overlay a:focus-visible {
  border-color: var(--wedding-accent);
  color: var(--wedding-accent);
}
.saved-card { z-index: 0; isolation: isolate; }
.saved-card:hover, .saved-card:focus-within { z-index: 20; }
.saved-card { overflow: hidden; }
.saved-card::after { background: rgba(250, 246, 241, 0.34); }
.saved-card-preview { display: grid; width: auto; min-height: 0px; border: 0px; border-radius: inherit; background: transparent; box-shadow: none; backdrop-filter: none; transform: scale(0.98); transform-origin: center center; }
.saved-card-preview-image { object-fit: contain; }
.saved-card > .saved-card-head, .saved-card > .saved-card-meta, .saved-card > .saved-card-description { position: relative; z-index: 4; }
.saved-card > .saved-card-actions { position: relative; }
.saved-card.has-preview:hover .saved-card-preview, .saved-card.has-preview:focus-within .saved-card-preview { transform: scale(1); }
.saved-card::after { backdrop-filter: blur(7px); }
.saved-card > .saved-card-actions { z-index: 8; }
.saved-card > .saved-card-head-actions { position: relative; z-index: 8; }
.saved-card > .saved-card-head { z-index: auto; }
.saved-card::after { z-index: 10; inset: 0px 0px 44px; mask-image: none; }
.saved-card-preview { z-index: 11; }
.saved-card-name, .saved-card-head-actions { position: relative; z-index: 12; }
.saved-card-preview { place-items: center; }
.saved-card-preview-image { width: auto; max-width: 100%; height: auto; max-height: 100%; }
.saved-card-preview { inset: 34px 20px; padding: 0px; }
.wedding-app > .message-hint { position: absolute; z-index: 2; left: 50%; bottom: 32px; width: min(387px, 100% - 32px); height: 45px; padding: 0px; border: 0.5px solid rgb(127, 69, 69); border-radius: 35px; color: rgb(126, 126, 126); background: rgba(255, 255, 255, 0.5); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; backdrop-filter: blur(7.5px); transform: translate(-50%, 12px); }
.wedding-app > .message-hint.is-visible { transform: translate(-50%, 0px); }
.message-modal-card-hint, .message-modal-card-error { width: min(100%, 376px); height: 158px; min-height: 158px; display: block; padding: 0px; }
.message-modal-card-hint .message-modal-mark, .message-modal-card-error .message-modal-mark { position: absolute; top: 8px; left: 50px; width: 30px; height: 78px; margin-left: 0px; }
.message-modal-card-hint .message-modal-text, .message-modal-card-error .message-modal-text { position: absolute; top: 8px; left: 93px; display: flex; align-items: center; justify-content: center; width: 263px; height: 78px; margin: 0px; }
.message-modal-card-hint .message-modal-actions, .message-modal-card-error .message-modal-actions { position: absolute; top: 94px; left: 20px; display: block; width: 336px; height: 44px; }
.message-modal-card-question { position: relative; display: block; width: min(100%, 376px); height: 232px; min-height: 232px; padding: 0px; }
.message-modal-card-question .message-modal-mark { position: absolute; top: 10px; left: 50px; width: 30px; height: 96px; margin-left: 0px; }
.message-modal-card-question .message-modal-text { position: absolute; top: 10px; left: 102px; display: flex; align-items: center; justify-content: center; width: 254px; height: 96px; margin: 0px; }
.message-modal-card-question .message-modal-actions { position: absolute; top: 114px; left: 20px; display: grid; grid-template-rows: repeat(2, 44px); gap: 8px; width: 336px; height: 96px; }
.message-hint { position: fixed; z-index: 10000; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 14px; width: min(387px, -32px + 100vw); height: 45px; box-sizing: border-box; }
.message-hint .message-hint-mark { flex: 0 0 45px; width: 45px; height: 45px; margin-left: 8px; }
.message-hint #message-hint-text { display: flex; align-items: center; justify-content: center; flex: 1 1 320px; width: auto; height: 45px; min-width: 0px; line-height: normal; text-align: center; }
.saved-card.has-preview:focus-within::after, .saved-card.has-preview:focus-within .saved-card-preview { opacity: 0; visibility: hidden; transform: none; }
.saved-card.has-preview:hover::after, .saved-card.has-preview:hover .saved-card-preview { opacity: 1; visibility: visible; transform: none; }
.save-box { box-sizing: border-box; width: 337px; height: 249px; margin-top: 24px; padding: 10px 9px; border: 0px; border-radius: 20px; background: rgb(243, 234, 223); }
.save-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 18px; margin: 0px; gap: 10px; }
.save-heading > .field-label { margin: 0px; color: rgb(0, 0, 0); font: 500 14px / 18px Kodchasan, sans-serif; }
.save-print-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; height: 14px; margin: 0px; color: rgb(85, 85, 85); font: 500 10px / 14px Kodchasan, sans-serif; white-space: nowrap; }
.save-print-toggle .print-check { display: inline-grid; flex: 0 0 14px; place-items: center; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid rgb(178, 178, 178); border-radius: 50%; color: transparent; background: transparent; font: 700 9px / 12px Manrope, sans-serif; }
.save-print-toggle input:checked + .print-check { border-color: var(--wedding-success); color: rgb(255, 255, 255); background: var(--wedding-success); }
.save-row { display: grid; grid-template-columns: 1fr; gap: 0px; width: 100%; }
.save-row > input { justify-self: start; width: 247px; height: 26px; min-height: 26px; box-sizing: border-box; margin-top: 11px; padding: 0px 8px; border: 0.4px solid transparent; border-radius: 12px; color: rgb(85, 85, 85); background: rgb(250, 246, 241); font: 400 12px Manrope, sans-serif; }
.save-description-reveal { display: block; margin: 10px 0px 0px; opacity: 1; transform: none; }
.save-description-reveal .field-label { display: block; height: 12px; margin: 0px 0px 5px 5px; color: rgb(0, 0, 0); font: 600 9px / 12px Kodchasan, sans-serif; }
.save-description-reveal .label-note { color: rgb(108, 108, 108); font: 400 9px / 12px Kodchasan, sans-serif; }
.save-description-reveal textarea { width: 100%; height: 49px; min-height: 49px; box-sizing: border-box; margin: 0px; padding: 8px; border: 0.4px solid transparent; border-radius: 12px; color: rgb(85, 85, 85); background: rgb(250, 246, 241); font: 400 12px Manrope, sans-serif; resize: none; }
.save-row > .button { width: 100%; height: 35px; min-height: 35px; box-sizing: border-box; padding: 0px 10px; border-radius: 12px; font: 500 14px Kodchasan, sans-serif; }
.save-row > #new-draft { margin-top: 18px; border: 1.5px solid rgb(118, 62, 62); color: rgb(118, 62, 62); background: transparent; }
.save-row > #save-design { margin-top: 10px; border: 0px; color: rgb(255, 255, 255); background: rgb(118, 62, 62); }
.saved-designs { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 20px 14px; }
.saved-card { width: auto; min-width: 0px; flex: 0 0 auto; height: 186px; min-height: 186px; box-sizing: border-box; padding: 16px 20px 28px; border: 0.5px solid rgba(118, 62, 62, 0.33); border-radius: 15px; color: rgb(38, 38, 38); background: rgb(255, 252, 248); }
.saved-card-head { display: flex; align-items: flex-start; justify-content: space-between; min-height: 36px; padding: 0px; gap: 10px; }
.saved-card-name { display: block; max-width: 170px; padding: 0px; overflow: hidden; color: rgb(0, 0, 0); font: 600 16px / 21px Kodchasan, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.shared-badge { display: block; max-width: 185px; margin: 2px 0px 0px; overflow: hidden; color: rgb(126, 126, 126); font: 400 10px / 13px Kodchasan, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.saved-card-head-actions { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 9px; margin-top: 5px; }
.saved-card-share-icon { display: inline-flex; flex: 0 0 23px; align-items: center; height: 16px; color: rgb(128, 128, 128); }
.saved-card-share-icon .material-symbols-outlined { font-size: 16px; line-height: 16px; }
.saved-card-share-icon .shared-direction-arrow { margin-left: -3px; font-size: 12px; line-height: 12px; }
.saved-card-delete { flex: 0 0 18px; width: 18px; height: 18px; margin: 0px; padding: 0px; background-size: 15px 15px; }
.saved-card-meta { margin-top: 6px; color: rgb(85, 85, 85); font: 400 12px / 16px Kodchasan, sans-serif; }
.saved-card-description { width: 194px; height: 25px; margin: 14px 0px 0px; overflow: hidden; color: rgb(126, 126, 126); font: 400 10px Kodchasan, sans-serif; -webkit-line-clamp: 2; }
.saved-card-actions { display: grid; grid-template-columns: minmax(0px, 1fr) auto auto; align-items: center; gap: 16px; min-height: 16px; margin-top: auto; }
.saved-card-actions .button { min-width: 0px; min-height: 16px; padding: 0px; border: 0px; color: rgb(38, 38, 38); background: transparent; font: 700 12px / 16px Kodchasan, sans-serif; }
.saved-card-actions .download-draft { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; }
.saved-card-actions .stl-download-icon { font-size: 13px; line-height: 16px; }
.saved-card .print-toggle { display: inline-flex; align-items: center; gap: 5px; margin: 0px; color: rgb(85, 85, 85); font: 500 10px / 13px Kodchasan, sans-serif; }
.saved-card .print-check { display: inline-grid; flex: 0 0 14px; place-items: center; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid rgb(178, 178, 178); border-radius: 50%; font: 700 9px / 12px Manrope, sans-serif; }
.saved-card .print-toggle input:checked + .print-check { border-color: var(--wedding-success); background: var(--wedding-success); }
.save-print-toggle .print-check, .saved-card .print-check { position: relative; padding: 0px; font-size: 0px; line-height: 1; text-align: center; }
.save-print-toggle .print-check::before, .saved-card .print-check::before { content: "✓"; display: block; color: rgb(255, 255, 255); font: 700 9px / 1 Manrope, sans-serif; opacity: 0; transform: translateY(-0.15px); }
.save-print-toggle input:checked + .print-check::before, .saved-card .print-toggle input:checked + .print-check::before { opacity: 1; }
.hero-flower { position: absolute; z-index: 0; display: block; width: 406px; height: 406px; max-width: none; object-fit: cover; pointer-events: none; }
.hero-flower-left { top: 0px; left: 0px; }
.hero-flower-right { top: 0px; right: 0px; }
.hero-block > :not(.hero-flower) { z-index: 1; }
@media (max-width: 672px) {
  .save-box { width: 100%; height: auto; min-height: 249px; }
  .saved-card { grid-column: auto; flex: 0 0 auto; width: auto; min-width: 0px; }
  .saved-designs { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 360px) {
  .saved-heading { flex-direction: column; align-items: stretch; }
  .saved-heading-actions { justify-items: start; }
}
@media (max-width: 860px) {
  .hero-flower { width: min(48vw, 240px); height: auto; }
  .hero-flower-left { top: 0px; left: -24px; }
  .hero-flower-right { top: 0px; right: -24px; }
}
@media (min-width: 861px) {
  .hero-flower-right { top: auto; bottom: 20px; }
}
.save-box.is-overwrite-hidden { height: auto; min-height: 204px; }
.save-box.is-overwrite-hidden #save-design[hidden] { margin: 0px; display: none !important; }
#stage-base-controls .stage-text-align-actions, #stage-text-depth .stage-text-align-actions { display: grid; grid-template-columns: 54px 60px; align-items: center; gap: 5px; width: 119px; margin: 0px 0px 0px 40px; }
#stage-base-controls .stage-text-align-option, #stage-text-depth .stage-text-align-option { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; width: 54px; min-width: 54px; height: 17px; min-height: 17px; gap: 3px; padding: 0px 4px; border: 0px; border-radius: 7px; color: rgb(118, 62, 62); background: transparent; font: 400 10px / 12px Kodchasan, sans-serif; white-space: nowrap; }
#stage-base-controls .stage-text-align-option:last-child, #stage-text-depth .stage-text-align-option:last-child { width: 60px; min-width: 60px; justify-content: center; padding: 0px 4px; }
#stage-base-controls .stage-text-align-option .material-symbols-outlined, #stage-text-depth .stage-text-align-option .material-symbols-outlined { color: rgb(118, 62, 62); font-size: 12px; line-height: 12px; }
#stage-base-controls .stage-text-align-option[aria-pressed="true"], #stage-text-depth .stage-text-align-option[aria-pressed="true"] { border: 1.5px solid rgb(118, 62, 62); background: rgb(235, 222, 206); }
#stage-base-controls .stage-text-align-option:not([aria-pressed="true"]):hover, #stage-base-controls .stage-text-align-option:not([aria-pressed="true"]):focus-visible, #stage-text-depth .stage-text-align-option:not([aria-pressed="true"]):hover, #stage-text-depth .stage-text-align-option:not([aria-pressed="true"]):focus-visible { border-color: transparent; outline: 0px; background: rgba(235, 222, 206, 0.55); }
#stage-text-depth, #stage-image-controls { box-sizing: border-box; z-index: 10; width: 210px; min-width: 210px; max-width: 210px; height: auto; min-height: 0px; max-height: none; padding: 10px 12px; gap: 4px; border: 0.5px solid rgb(118, 62, 62); border-radius: 15px; color: rgb(118, 62, 62); background: rgba(250, 246, 241, 0.2); box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 20px; backdrop-filter: blur(10px); overflow: visible; }
#stage-text-depth .stage-control-caption, #stage-image-controls .stage-control-caption { margin: 0px 0px 1px; color: rgb(118, 62, 62); font: 400 10px / 12px Kodchasan, sans-serif; letter-spacing: 0px; }
#stage-text-depth .stage-base-row, #stage-image-controls .stage-base-row { min-height: 18px; grid-template-columns: 1fr 18px 45px 18px; gap: 3px; color: rgb(118, 62, 62); font: 600 10px / 12px Kodchasan, sans-serif; }
#stage-text-depth .stage-base-label, #stage-image-controls .stage-base-label { gap: 3px; color: rgb(118, 62, 62); font: 600 10px / 12px Kodchasan, sans-serif; }
#stage-text-depth .stage-base-label .material-symbols-outlined, #stage-image-controls .stage-base-label .material-symbols-outlined { flex: 0 0 auto; color: rgb(118, 62, 62); font-size: 12px; line-height: 12px; }
#stage-text-depth .stage-base-row output, #stage-image-controls .stage-base-row output { min-width: 45px; color: rgb(118, 62, 62); font: 300 11px / 12px Kodchasan, sans-serif; text-align: center; }
#stage-text-depth .stage-base-row button, #stage-image-controls .stage-base-row button { box-sizing: border-box; width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0px; border: 0.5px solid rgb(118, 62, 62); border-radius: 7px; color: rgb(118, 62, 62); background: transparent; }
#stage-text-depth .stage-base-row button .material-symbols-outlined, #stage-image-controls .stage-base-row button .material-symbols-outlined { font-size: 13px; line-height: 1; }
#stage-text-depth .stage-text-depth-row .stage-base-label > span:last-child { max-width: none; white-space: nowrap; }
html.darkmode #stage-text-depth, html.darkmode #stage-image-controls { background: rgba(41, 36, 36, 0.2); }
.asset-add-base[hidden] { display: none !important; }
.page-command-bar { position: fixed; z-index: 40; left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: repeat(2, 19px); grid-template-columns: 1fr; width: 202px; height: 56px; box-sizing: border-box; padding: 10px 0px 8px; border: 0.5px solid rgba(118, 62, 62, 0.33); border-radius: 15px; background: rgb(255, 252, 248); box-shadow: rgba(74, 48, 39, 0.12) 0px 8px 24px; }
.page-command-button { display: grid; grid-template-columns: 99px 1fr; align-items: center; width: calc(100% - 20px); height: 19px; margin: 0px 10px; padding: 0px 5px; border: 0px; border-radius: 5px; color: rgb(85, 85, 85); background: transparent; font-family: Kodchasan, sans-serif; cursor: pointer; text-align: left; transition: color 0.18s, background 0.18s, opacity 0.18s; }
.page-command-button:not(:disabled):hover, .page-command-button:not(:disabled):focus-visible { color: rgb(85, 85, 85); background: rgb(244, 237, 230); outline: 0px; }
.page-command-button:disabled { opacity: 0.38; cursor: not-allowed; }
.page-command-shortcut { font: 600 14px / 19px Kodchasan, sans-serif; white-space: nowrap; }
.page-command-label { font: 400 12px / 19px Kodchasan, sans-serif; white-space: nowrap; }
html.darkmode .page-command-bar { border-color: rgba(229, 197, 183, 0.38); background: rgb(48, 40, 36); }
@media (max-width: 560px) {
  .page-command-bar { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
}
.preview-panel.is-compare-mode:fullscreen, .preview-panel.is-compare-mode.is-fullscreen-fallback { padding: 34px 40px 24px; background: radial-gradient(circle at 50% 38%, rgb(255, 254, 250) 0px, rgb(247, 241, 235) 72%, rgb(239, 228, 217) 100%); }
.preview-panel.is-compare-mode .preview-fullscreen-button { width: 100px; min-width: 100px; height: 33px; min-height: 33px; border-radius: 17px; color: rgb(118, 62, 62); background: rgb(238, 217, 217); font: 500 16px / 1 Manrope, sans-serif; }
.preview-panel.is-compare-mode .preview-fullscreen-button:hover, .preview-panel.is-compare-mode .preview-fullscreen-button:focus-visible { color: rgb(238, 217, 217); background: rgb(118, 62, 62); outline: 0px; }
.preview-panel.is-compare-mode:fullscreen .preview-stage, .preview-panel.is-compare-mode.is-fullscreen-fallback .preview-stage { flex: 1 1 auto; height: auto; min-height: 0px; margin-top: 18px; overflow: hidden; border: 0px; border-radius: 0px; background: transparent; }
.preview-panel.is-compare-mode .preview-stage > .three-canvas, .preview-panel.is-compare-mode .preview-stage > .stage-glow, .preview-panel.is-compare-mode .preview-stage > .stage-tip, .preview-panel.is-compare-mode .preview-stage > .stage-selection-box, .preview-panel.is-compare-mode .preview-stage > .stage-text-center, .preview-panel.is-compare-mode .preview-stage > .stage-base-controls, .preview-panel.is-compare-mode .preview-stage > .stage-image-controls, .preview-panel.is-compare-mode .preview-stage > .stage-loading { display: none !important; }
.compare-layout { position: absolute; inset: 0px; min-width: 0px; min-height: 0px; }
.compare-slots { display: grid; grid-template-columns: repeat(var(--compare-count, 1), minmax(0, 1fr)); width: 100%; height: 100%; padding: 0px 82px 58px 0px; box-sizing: border-box; transition: grid-template-columns 0.42s cubic-bezier(0.22, 0.75, 0.25, 1); }
.compare-slot { display: flex; min-width: 0px; min-height: 0px; flex-direction: column; align-items: stretch; padding: 0px 18px; box-sizing: border-box; }
.compare-slot + .compare-slot { position: relative; border-left: 0px; }
.compare-slot + .compare-slot::before { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 1px; background: rgb(149, 99, 45); content: ""; transform-origin: center center; }
.compare-slots.is-splitting .compare-slot + .compare-slot::before { animation: 0.46s cubic-bezier(0.22, 0.75, 0.25, 1) 0s 1 normal both running compare-divider-reveal; }
.compare-slots.is-splitting .compare-slot.is-entering { animation: 0.46s cubic-bezier(0.22, 0.75, 0.25, 1) 0s 1 normal both running compare-slot-reveal; }
.compare-slots.is-removing .compare-slot.is-leaving { z-index: 1; pointer-events: none; animation: 0.34s cubic-bezier(0.55, 0, 0.8, 0.35) 0s 1 normal both running compare-slot-leave; }
.compare-slots.is-collapsing .compare-slot.is-expanding { animation: 0.46s cubic-bezier(0.22, 0.75, 0.25, 1) 0s 1 normal both running compare-slot-expand; }
@keyframes compare-divider-reveal { 
  0% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes compare-slot-reveal { 
  0% { opacity: 0; transform: translateX(18px); }
  100% { opacity: 1; transform: translateX(0px); }
}
@keyframes compare-slot-leave { 
  0% { opacity: 1; transform: translateX(0px) scale(1); }
  100% { opacity: 0; transform: translateX(20px) scale(0.97); }
}
@keyframes compare-slot-expand { 
  0% { opacity: 0.72; transform: scaleX(0.94); }
  100% { opacity: 1; transform: scaleX(1); }
}
.compare-slot-label { flex: 0 0 auto; min-height: 22px; padding: 0px 4px 7px; color: rgb(106, 106, 106); font: 500 12px / 1.2 Kodchasan, sans-serif; text-align: center; }
.compare-viewport { position: relative; flex: 1 1 auto; min-height: 120px; overflow: hidden; border-radius: 12px; }
.compare-viewport canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.compare-viewport canvas:active { cursor: grabbing; }
.compare-slot-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 10px; min-height: 51px; padding-top: 8px; }
.compare-switch-button, .compare-remove-button, .compare-add-button { border: 0px; color: rgb(118, 62, 62); background: rgb(235, 222, 206); cursor: pointer; font-family: Manrope, sans-serif; transition: transform 0.18s, background 0.18s, box-shadow 0.18s; }
.compare-switch-button { min-width: 182px; height: 33px; padding: 0px 16px; border-radius: 17px; font-size: 14px; }
.compare-remove-button { width: 33px; height: 33px; border-radius: 50%; font-size: 23px; line-height: 30px; }
.compare-switch-button:hover, .compare-remove-button:hover, .compare-add-button:hover, .compare-switch-button:focus-visible, .compare-remove-button:focus-visible, .compare-add-button:focus-visible { color: rgb(235, 222, 206); background: rgb(118, 62, 62); outline: 0px; box-shadow: rgba(118, 62, 62, 0.14) 0px 3px 10px; transform: translateY(-1px); }
.compare-add-button:hover, .compare-add-button:focus-visible { box-shadow: none; }
.compare-add-wrap { position: absolute; z-index: 8; right: 10px; top: 50%; display: flex; align-items: center; flex-direction: column; transform: translateY(-50%); }
.compare-add-button { width: 60px; height: 60px; border-radius: 50%; color: rgb(118, 62, 62); font: 400 48px / 54px Manrope, sans-serif; }
.compare-tooltip { position: absolute; right: 0px; bottom: calc(100% + 16px); width: 140px; min-height: 78px; padding: 10px; box-sizing: border-box; color: rgb(118, 62, 62); background: rgb(235, 222, 206); display: grid; place-items: center; font: 400 16px / 1.2 Manrope, sans-serif; text-align: center; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity 0.18s, transform 0.18s; }
.compare-tooltip::after { position: absolute; right: 22px; bottom: -8px; width: 16px; height: 16px; border-radius: 4px; background: rgb(235, 222, 206); content: ""; transform: rotate(45deg); }
.compare-add-wrap:hover .compare-tooltip, .compare-add-button:focus-visible + .compare-tooltip { opacity: 1; transform: translateY(0px); }
.compare-drawer { position: absolute; z-index: 10; top: 0px; right: 55px; bottom: 58px; width: min(362px, 36vw); padding: 33px 30px 20px; box-sizing: border-box; border: 1px solid rgba(118, 62, 62, 0.33); border-radius: 28px; background: rgb(255, 252, 248); box-shadow: rgba(81, 53, 38, 0.12) 0px 10px 25px; opacity: 0; pointer-events: none; transform: translateX(20px); transition: opacity 0.22s, transform 0.22s; }
.compare-drawer.is-open { opacity: 1; pointer-events: auto; transform: translateX(0px); }
.compare-drawer-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: rgb(30, 30, 30); font: 600 16px / 1.2 Kodchasan, sans-serif; }
.compare-drawer-close { width: 28px; height: 28px; border: 0px; border-radius: 50%; color: rgb(118, 62, 62); background: rgb(235, 222, 206); cursor: pointer; font-size: 20px; line-height: 24px; }
.compare-own-only { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-bottom: 15px; color: rgb(85, 85, 85); font: 400 12px / 1.2 Kodchasan, sans-serif; }
.compare-own-only input { accent-color: rgb(118, 62, 62); }
.compare-draft-list { display: grid; gap: 16px; }
.compare-draft-choice { display: grid; gap: 3px; width: 100%; min-height: 115px; padding: 16px 20px; box-sizing: border-box; border: 1px solid rgba(118, 62, 62, 0.33); border-radius: 15px; color: rgb(0, 0, 0); background: rgb(255, 252, 248); cursor: pointer; text-align: left; transition: border 0.18s, background 0.18s, transform 0.18s; }
.compare-draft-choice:hover:not(:disabled), .compare-draft-choice:focus-visible { border-color: rgb(118, 62, 62); background: rgb(247, 238, 231); outline: 0px; transform: translateY(-1px); }
.compare-draft-choice.is-selected, .compare-draft-choice:disabled { cursor: default; opacity: 0.62; }
.compare-draft-choice strong { font: 600 16px / 1.2 Kodchasan, sans-serif; }
.compare-draft-choice span { color: rgb(126, 126, 126); font: 400 10px / 1.2 Kodchasan, sans-serif; }
.compare-draft-choice small { color: rgb(126, 126, 126); font: 400 10px / 1.4 Kodchasan, sans-serif; }
.compare-drawer-empty { color: rgb(126, 126, 126); font: 400 12px / 1.5 Kodchasan, sans-serif; }
.preview-panel.is-compare-mode .preview-stage .width-warning { z-index: 7; align-items: center; justify-content: center; bottom: 5px; top: auto; left: 50%; width: min(90%, 1122px); transform: translateX(-50%); text-align: center; }
@media (max-width: 900px) {
  .preview-panel.is-compare-mode:fullscreen, .preview-panel.is-compare-mode.is-fullscreen-fallback { padding: 22px 18px 16px; }
  .compare-slots { padding-right: 70px; }
  .compare-slot { padding: 0px 8px; }
  .compare-drawer { right: 43px; width: min(340px, 72vw); padding: 24px 20px 16px; }
}
@media (max-width: 620px) {
  .compare-slots { grid-template-columns: repeat(2, minmax(0px, 1fr)); overflow-x: auto; }
  .compare-slot { min-width: 82vw; }
  .compare-add-wrap { right: 4px; }
  .compare-add-button { width: 48px; height: 48px; font-size: 38px; line-height: 44px; }
}
.compare-drawer { overflow: visible; }
.compare-drawer::before, .compare-drawer::after { content: none; }
.compare-drawer-arrow { position: absolute; z-index: 2; top: calc(var(--compare-arrow-top, 50%) - 9px); left: calc(100% - 17.5px); display: block; width: 52px; height: 18px; pointer-events: none; transform: rotate(-90deg); transform-origin: center center; }
.compare-drawer-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.compare-drawer-arrow-fill { fill: rgb(255, 252, 248); }
.compare-drawer-arrow-edge { fill: none; stroke: rgba(118, 62, 62, 0.33); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.compare-drawer.is-anchor-switch .compare-drawer-arrow { top: 100%; left: calc(var(--compare-arrow-left, 50%) - 14px); margin-left: -12px; transform: none; }
.compare-drawer.is-anchor-switch { height: min(695px, 100% - 24px); max-height: calc(100% - 24px); transform: translateY(20px); }
.compare-drawer.is-anchor-switch.is-open { animation: 0.22s cubic-bezier(0.22, 0.75, 0.25, 1) 0s 1 normal both running compare-drawer-rise; transform: translateY(0px); }
.compare-drawer.is-anchor-switch.is-closing { animation: 0.22s cubic-bezier(0.22, 0.75, 0.25, 1) 0s 1 normal both running compare-drawer-fall; pointer-events: none; }
@keyframes compare-drawer-rise { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes compare-drawer-fall { 
  0% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(20px); }
}
.compare-drawer.is-anchor-resetting { transition: none; }
.compare-drawer .compare-draft-list { max-height: calc(100% - 37px); overflow-y: auto; padding-right: 1px; }
.compare-drawer .compare-own-only { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: 0px 0px 15px; color: rgb(85, 85, 85); font: 400 12px / 1.2 Kodchasan, sans-serif; }
.compare-drawer .compare-own-only input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.compare-drawer .compare-own-only .fake-switch { flex: 0 0 40px; width: 40px; height: 12px; border-radius: 10px; background: rgb(214, 214, 214); }
.compare-drawer .compare-own-only .fake-switch::after { top: 2px; left: 2px; width: 16px; height: 8px; border-radius: 8px; }
.compare-drawer .compare-own-only input:checked + .fake-switch { background: rgb(118, 62, 62); }
.compare-drawer .compare-own-only input:checked + .fake-switch::after { transform: translateX(20px); }
.compare-saved-card { width: 100%; height: 186px; min-height: 186px; flex: 0 0 186px; cursor: pointer; }
.compare-saved-card.is-selected { border-color: rgb(118, 62, 62); box-shadow: rgba(118, 62, 62, 0.15) 0px 0px 0px 1px inset; cursor: default; opacity: 0.62; }
.compare-saved-card:focus-visible { z-index: 21; border-color: rgb(118, 62, 62); outline: rgba(118, 62, 62, 0.3) solid 2px; outline-offset: 2px; }
.compare-saved-card .saved-card-preview { pointer-events: none; }
.compare-saved-card .saved-card-share-icon { display: inline-flex; }
.compare-saved-card .saved-card-actions { pointer-events: none; }
.compare-tooltip { border-radius: 10px; }
.compare-add-button:focus-visible ~ .compare-tooltip { opacity: 1; transform: translateY(0px); }

/* Hero 2 aus Figma: 1299 × 639 px bei Desktopbreite. */
.hero-block {
  width: 100vw;
  height: 639px;
  min-height: 639px;
  margin-left: calc((100% - 100vw) / 2);
  overflow: clip;
  background: var(--wedding-page);
}
.wedding-hero-logo {
  top: 59px;
  left: 50%;
  width: 226px;
  height: 94px;
  margin: 0px;
  object-fit: contain;
  filter: none;
  transform: translateX(-50%);
}
.hero-block h1 {
  top: 218px;
  left: 50%;
  width: 656px;
  height: 166px;
  margin: 0px;
  color: var(--wedding-ink);
  font-size: 0px;
  line-height: 1.1;
  transform: translateX(-50%);
}
.hero-block h1 span,
.hero-block h1 em {
  display: block;
  margin: 0px;
  font-style: normal;
  font-weight: 400;
}
.hero-block h1 span {
  color: #272322;
  font: 400 70px / 1.1 "Oleo Script Swash Caps", cursive;
}
.hero-block h1 em {
  color: #9a5e70;
  font: 400 48px / 1.52 "Oleo Script Swash Caps", cursive;
}
.hero-copy {
  top: 432px;
  left: 50%;
  width: 559px;
  max-width: none;
  margin: 0px;
  color: #000;
  font: 400 25px / 1.55 Kalam, cursive;
  text-align: center;
  overflow-wrap: break-word;
  transform: translateX(-50%);
}
.hero-copy span,
.hero-copy em {
  font: inherit;
  font-style: normal;
}
.hero-copy em {
  display: block;
  color: inherit;
  font: 400 25px / 1.55 Kalam, cursive;
  font-style: normal;
}
.hero-flower-left { top: 0px; left: 32px; }
.hero-flower-right { top: 181px; right: 32px; bottom: auto; }

/* Die Blumen schließen bündig mit dem Arbeitsbereich unter dem Hero ab. */
@media (min-width: 1299px) {
  .hero-block { margin-left: calc((100% - 100vw) / 2 - 4px); }
  .hero-flower-left { left: calc(max(0px, (100vw - 1365px) / 2) + 96px); }
  .hero-flower-right { right: calc(100vw - max(0px, (100vw - 1365px) / 2) - 1277px); }
}

@media (min-width: 861px) and (max-width: 1032px) {
  .hero-flower-left { left: 24px; }
  .hero-flower-right { right: 24px; }
}

@media (max-width: 860px) {
  .hero-block {
    display: block;
    height: clamp(430px, 62vw, 560px);
    min-height: 430px;
    margin-left: calc((100% - 100vw) / 2);
  }
  .wedding-hero-logo {
    position: absolute;
    top: 28px;
    left: 50%;
    width: min(226px, 36vw);
    height: auto;
    transform: translateX(-50%);
  }
  .hero-block h1 {
    position: absolute;
    top: clamp(128px, 22vw, 218px);
    left: 50%;
    width: calc(100% - 32px);
    height: auto;
    transform: translateX(-50%);
  }
  .hero-block h1 span { font-size: clamp(40px, 5.4vw, 70px); }
  .hero-block h1 em { font-size: clamp(32px, 3.7vw, 48px); line-height: 1.25; }
  .hero-copy {
    position: absolute;
    top: clamp(255px, 33vw, 432px);
    left: 50%;
    width: min(559px, calc(100% - 48px));
    font-size: clamp(18px, 1.93vw, 25px);
    line-height: 1.45;
    transform: translateX(-50%);
  }
  .hero-flower { width: min(48vw, 406px); height: auto; }
  .hero-flower-left { top: 0px; left: -24px; }
  .hero-flower-right { top: clamp(96px, 14vw, 181px); right: -24px; bottom: auto; }
}

/* Abstand des Signoffs aus dem Figma-Frame „Webseite“. */
@media (min-width: 861px) {
  .wedding-signoff { margin-top: 97px; margin-bottom: 66px; }
}