@font-face { font-family: "Arlen Variable"; src: url("/fonts/ArlenVariable.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "DM Sans"; src: url("/fonts/DMSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "DM Mono"; src: url("/fonts/DMMono-400.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "DM Mono"; src: url("/fonts/DMMono-500.woff2") format("woff2"); font-weight: 500; font-display: block; }
:root { --green: #29cae6; --purple: #ffe27f; --offwhite: #e9e5e0; --ink: #030303; --panel: #0c0e0c; --panel-2: #131613; --line: #222622; --line-2: #2e332e; --text: #f0f7f0; --text-dim: #8a938a; --radius: 14px; }
* { box-sizing: border-box; margin: 0px; padding: 0px; }
html, body, #root { height: 100%; }
body { background: var(--ink); color: var(--text); -webkit-font-smoothing: antialiased; font-family: "DM Sans", sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
.app { flex-direction: column; height: 100%; display: flex; }
.topbar { border-bottom: 1px solid var(--line); background: var(--ink); flex: 0 0 auto; align-items: center; gap: 24px; height: 60px; padding: 0px 20px; display: flex; }
.topbar-brand { align-items: center; gap: 14px; display: flex; }
.topbar-logo { width: 116px; height: 16px; color: var(--offwhite); cursor: pointer; padding: 0px; transition: transform 0.15s; }
.topbar-logo:hover { transform: scale(1.04); }
.topbar-logo:active { transform: scale(0.96); }
.topbar-logo svg { display: block; }
.topbar-title { font-variation-settings: "wght" 740, "wdth" 350; text-transform: uppercase; letter-spacing: 0.01em; color: var(--green); font-family: "Arlen Variable", sans-serif; font-size: 17px; line-height: 1; }
.topbar-meta { text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-left: auto; font-family: "DM Mono", monospace; font-size: 11px; }
.topbar-actions { align-items: center; gap: 8px; display: flex; }
.topbar-divider { background: var(--line-2); width: 1px; height: 22px; margin: 0px 4px; }
.btn-muted { color: var(--text-dim); border-color: rgba(0, 0, 0, 0); }
.btn-muted:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); }
.btn { border: 1px solid rgba(0, 0, 0, 0); border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; transition: 0.15s; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--green); color: var(--ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.btn-small { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; }
.btn-small:hover { border-color: var(--green); color: var(--green); }
.workspace { flex: 1 1 0%; min-height: 0px; display: flex; }
.sidebar { border-right: 1px solid var(--line); background: var(--panel); flex-direction: column; flex: 0 0 auto; gap: 26px; width: 316px; padding: 18px 16px 40px; display: flex; overflow-y: auto; }
.group-title { text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-dim); margin-bottom: 12px; font-family: "DM Mono", monospace; font-size: 10.5px; font-weight: 500; }
.note { color: var(--text-dim); margin-top: 10px; font-size: 11.5px; line-height: 1.45; }
.row { justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; display: flex; }
.seg-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; display: grid; }
.seg { border: 1px solid var(--line-2); color: var(--text-dim); border-radius: 9px; padding: 9px 4px; font-size: 12.5px; font-weight: 600; transition: 0.15s; }
.seg:hover { color: var(--text); }
.seg.is-active { background: var(--green); border-color: var(--green); color: var(--ink); }
.format-group + .format-group { margin-top: 12px; }
.format-group-label { color: var(--text-dim); margin-bottom: 6px; font-size: 10.5px; font-weight: 600; }
.format-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; display: grid; }
.format-tile { border: 1px solid var(--line-2); border-radius: 10px; flex-direction: column; align-items: center; gap: 5px; padding: 9px 6px 8px; transition: 0.15s; display: flex; }
.format-tile:hover { border-color: var(--text-dim); }
.format-tile.is-active { border-color: var(--green); background: var(--panel-2); }
.format-ratio-box { align-items: center; height: 30px; display: flex; }
.format-ratio { max-width: 44px; height: 100%; max-height: 30px; color: var(--text-dim); border: 1.5px solid; border-radius: 4px; display: block; }
.format-tile.is-active .format-ratio { color: var(--green); }
.format-name { font-size: 11px; font-weight: 600; }
.format-hint { color: var(--text-dim); font-family: "DM Mono", monospace; font-size: 9px; }
.swatches { gap: 8px; display: flex; }
.swatch { border: 2px solid var(--line-2); border-radius: 12px; justify-content: center; align-items: center; width: 44px; height: 44px; transition: 0.15s; display: flex; }
.swatch:hover { border-color: var(--text-dim); }
.swatch.is-active { border-color: var(--offwhite); }
.swatch-dot { border-radius: 50%; width: 10px; height: 10px; }
.field { flex-direction: column; gap: 6px; margin-bottom: 14px; display: flex; }
.field > span { color: var(--text-dim); font-size: 11.5px; font-weight: 600; }
.field-head { justify-content: space-between; align-items: center; display: flex; }
.field-head input[type="checkbox"] { accent-color: var(--green); cursor: pointer; width: 14px; height: 14px; }
.field input:disabled, .field textarea:disabled { opacity: 0.4; }
.slot-row-wrap { flex-wrap: wrap; margin-top: 12px; }
.slot-mini { border-radius: 10px; width: 52px; height: 52px; }
.slot-photo { border-radius: 12px; width: 74px; height: 74px; padding: 0px; overflow: hidden; }
.slot-photo img, .slot-photo video { object-fit: cover; width: 100%; height: 100%; }
.photo-live:active { cursor: grabbing; }
.slot-portrait { border-radius: 12px; width: 62px; height: 62px; padding: 0px; overflow: hidden; }
.slot-portrait img { object-fit: cover; object-position: center top; cursor: pointer; width: 100%; height: 100%; }
.slot-portrait.is-active { border-color: var(--green); }
.field input:not([type="range"]):not([type="checkbox"]), .field textarea { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); resize: vertical; border-radius: 9px; outline: none; padding: 9px 11px; font-size: 13px; transition: border-color 0.15s; }
.field input:focus, .field textarea:focus { border-color: var(--green); }
.field .hint { color: var(--text-dim); font-size: 10.5px; font-style: normal; }
.field input[type="range"] { accent-color: var(--green); }
.slot-row { gap: 8px; display: flex; }
.slot { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 12px; justify-content: center; align-items: center; width: 74px; height: 74px; display: flex; position: relative; }
.slot img { object-fit: contain; cursor: pointer; width: 80%; height: 80%; }
.slot-add { width: 100%; height: 100%; color: var(--text-dim); border-radius: 12px; font-size: 22px; }
.slot-add:hover { color: var(--green); }
.slot-phone { width: 58px; height: 96px; }
.slot-phone img, .slot-phone video { object-fit: cover; cursor: default; border-radius: 10px; width: 100%; height: 100%; }
.slot-upload { cursor: pointer; justify-content: center; align-items: center; display: flex; }
.slot-upload input { display: none; }
.row-wrap { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.slot-x { background: var(--line-2); width: 20px; height: 20px; color: var(--text); border-radius: 50%; justify-content: center; align-items: center; font-size: 13px; line-height: 1; display: flex; position: absolute; top: -7px; right: -7px; }
.slot-x:hover { background: var(--green); color: var(--ink); }
.slot-beam { background: var(--green); width: 20px; height: 20px; color: var(--ink); border-radius: 50%; justify-content: center; align-items: center; font-size: 12px; line-height: 1; display: flex; position: absolute; bottom: -7px; right: -7px; }
.slot-beam.is-off { background: var(--line-2); color: var(--text-dim); }
.slot-beam:hover { filter: brightness(1.15); }
.switch-row { cursor: pointer; user-select: none; justify-content: space-between; align-items: center; padding: 7px 0px; font-size: 13px; display: flex; }
.switch { appearance: none; background: var(--line-2); cursor: pointer; border-radius: 999px; flex: 0 0 auto; width: 36px; height: 20px; transition: background 0.15s; position: relative; }
.switch::after { content: ""; background: var(--text-dim); border-radius: 50%; width: 14px; height: 14px; transition: 0.15s; position: absolute; top: 3px; left: 3px; }
.switch:checked { background: var(--green); }
.switch:checked::after { background: var(--ink); left: 19px; }
.field-sub { margin: 2px 0px 6px; padding-left: 2px; }
.toggle { cursor: pointer; user-select: none; align-items: center; gap: 8px; font-size: 13px; display: flex; }
.toggle input { accent-color: var(--green); width: 15px; height: 15px; }
.stage { background: radial-gradient(circle at 50% 40%, rgba(40, 232, 95, 0.043), rgba(0, 0, 0, 0) 60%) 0px 0px / 100% 100%, radial-gradient(rgba(240, 247, 240, 0.07) 1px, rgba(0, 0, 0, 0) 1px) 0px 0px / 26px 26px; flex-direction: column; flex: 1 1 0%; justify-content: center; align-items: center; min-width: 0px; display: flex; position: relative; }
.stage-frame { box-shadow: 0 0 0 1px var(--line-2), 0 30px 80px #0000008c; border-radius: 4px; overflow: hidden; }
.stage-caption { text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); align-items: center; gap: 14px; margin-top: 16px; font-family: "DM Mono", monospace; font-size: 11px; display: flex; }
.caption-btn { text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); border: 1px solid var(--line-2); border-radius: 7px; padding: 4px 10px; font-family: "DM Mono", monospace; font-size: 10px; transition: 0.15s; }
.caption-btn:hover:not(:disabled) { color: var(--green); border-color: var(--green); }
.caption-btn:disabled { opacity: 0.35; cursor: default; }
.modal-backdrop { z-index: 50; background: rgba(1, 1, 1, 0.72); justify-content: center; align-items: center; display: flex; position: fixed; inset: 0px; }
.modal { background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; flex-direction: column; width: min(720px, 92vw); height: min(640px, 80vh); display: flex; overflow: hidden; }
.modal-head { justify-content: space-between; align-items: center; padding: 16px 20px 12px; display: flex; }
.modal-head h3 { font-size: 15px; font-weight: 700; }
.modal-tabs { border-bottom: 1px solid var(--line); align-items: center; gap: 6px; padding: 0px 20px 14px; display: flex; }
.picker-search { width: 150px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 999px; outline: none; margin-left: auto; padding: 6px 12px; font-size: 12.5px; }
.picker-search:focus { border-color: var(--green); }
.tab { border: 1px solid var(--line-2); color: var(--text-dim); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 600; }
.tab.is-active { background: var(--green); border-color: var(--green); color: var(--ink); }
.modal-grid { flex: 1 1 0%; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: min-content; align-content: start; gap: 10px; padding: 16px 20px 20px; display: grid; overflow-y: auto; }
.thumb { border: 1px solid var(--line-2); background: var(--panel-2); border-radius: 12px; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; transition: 0.15s; display: flex; }
.thumb:hover { border-color: var(--green); }
.thumb img { object-fit: contain; width: 62px; height: 62px; }
.thumb span { color: var(--text-dim); font-size: 10.5px; }
.intro { z-index: 200; background: rgb(1, 1, 1); justify-content: center; align-items: center; display: flex; position: fixed; inset: 0px; overflow: hidden; }
.intro-logo { object-fit: contain; width: 130px; height: 130px; animation: 0.75s ease-in-out 0s infinite normal none running intro-pulse; }
@keyframes intro-pulse { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.intro.is-zooming { animation: 0.55s ease-in 0.15s 1 normal forwards running intro-fade; }
.intro.is-zooming .intro-logo { animation: 0.65s cubic-bezier(0.5, 0, 0.8, 0.4) 0s 1 normal forwards running intro-zoom; }
@keyframes intro-zoom { 
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(24); }
}
@keyframes intro-fade { 
  100% { opacity: 0; }
}
.portrait-live { cursor: move; }
.portrait-live:hover { animation: 0.9s ease-in-out 0s infinite normal none running portrait-pulse; }
.portrait-live.illu-dragging, .portrait-live.illu-dragging:hover { cursor: grabbing; animation: auto ease 0s 1 normal none running none; }
@keyframes portrait-pulse { 
  0%, 100% { transform: translate(-50%) scale(1.015); }
  50% { transform: translate(-50%) scale(1.04); }
}
.exporting .portrait-live, .exporting .portrait-live:hover { animation: auto ease 0s 1 normal none running none !important; transform: translate(-50%) !important; }
.logo-live:hover { animation: 0.9s ease-in-out 0s infinite normal none running logo-pulse; }
@keyframes logo-pulse { 
  0%, 100% { transform: scale(1.03); }
  50% { transform: scale(1.08); }
}
.exporting .logo-live, .exporting .logo-live:hover { animation: auto ease 0s 1 normal none running none !important; transform: none !important; }
.type-live { cursor: ew-resize; }
.type-live:hover { animation: 0.9s ease-in-out 0s infinite normal none running type-pulse; }
.type-live.illu-dragging, .type-live.illu-dragging:hover { animation: auto ease 0s 1 normal none running none; }
@keyframes type-pulse { 
  0%, 100% { transform: scale(1.01); }
  50% { transform: scale(1.03); }
}
.exporting .type-live, .exporting .type-live:hover { animation: auto ease 0s 1 normal none running none !important; transform: none !important; }
.burst { z-index: 300; pointer-events: none; position: fixed; top: 30px; left: 78px; }
.burst img { object-fit: contain; opacity: 0; animation: auto cubic-bezier(0.15, 0.6, 0.4, 1) 0s 1 normal forwards running burst-fly; position: absolute; top: 0px; left: 0px; }
@keyframes burst-fly { 
  0% { opacity: 1; transform: translate(0px) rotate(0deg) scale(0.3); }
  55% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--brot)) scale(1); opacity: 0; }
}
.illu-live { cursor: grab; transition: transform 0.18s; }
.illu-live:hover { animation: 0.9s ease-in-out 0s infinite normal none running illu-pulse; }
.illu-live.illu-dragging, .illu-live.illu-dragging:hover { cursor: grabbing; transform: rotate(var(--rot)) scale(1.06); transition: none; animation: auto ease 0s 1 normal none running none; }
@keyframes illu-pulse { 
  0%, 100% { transform: rotate(var(--rot)) scale(1.14); }
  50% { transform: rotate(var(--rot)) scale(1.26); }
}
.exporting .illu-live, .exporting .illu-live:hover { transform: rotate(var(--rot)) !important; animation: auto ease 0s 1 normal none running none !important; }
.beam-live { cursor: pointer; }
.beam-live:hover { animation: 0.9s ease-in-out 0s infinite normal none running beam-pulse; }
@keyframes beam-pulse { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.exporting .beam-live, .exporting .beam-live:hover { opacity: 1 !important; animation: auto ease 0s 1 normal none running none !important; }
.phone-live:hover { animation: 0.9s ease-in-out 0s infinite normal none running phone-pulse; }
.phone-live.illu-dragging, .phone-live.illu-dragging:hover { cursor: grabbing; animation: auto ease 0s 1 normal none running none; }
@keyframes phone-pulse { 
  0%, 100% { transform: rotate(var(--rot)) scale(1.02); }
  50% { transform: rotate(var(--rot)) scale(1.05); }
}
.exporting .phone-live, .exporting .phone-live:hover { transform: rotate(var(--rot)) !important; animation: auto ease 0s 1 normal none running none !important; }
.batch-stage { flex-direction: column; gap: 20px; display: flex; position: fixed; top: 0px; left: -20000px; }
@keyframes floater-drift { 
  0% { transform: translate(0, 0) rotate(var(--rot)) scale(1); }
  25% { transform: translate(10px, -13px) rotate(calc(var(--rot) + 3.5deg)) scale(1.055); }
  50% { transform: translate(-4px, -20px) rotate(calc(var(--rot) - 1.5deg)) scale(1); }
  75% { transform: translate(-11px, -6px) rotate(calc(var(--rot) - 4deg)) scale(.95); }
  100% { transform: translate(0, 0) rotate(var(--rot)) scale(1); }
}
.floater-anim { animation-duration: 8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: floater-drift; animation-timeline: auto; animation-range: normal; animation-delay: var(--fdelay,0s); }
.exporting .floater-anim { animation: auto ease 0s 1 normal none running none !important; }
@keyframes floater-drift-beam { 
  0% { transform: translate(0px) rotate(0deg) scale(1); }
  25% { transform: translate(10px, -13px) rotate(3.5deg) scale(1.055); }
  50% { transform: translate(-4px, -20px) rotate(-1.5deg) scale(1); }
  75% { transform: translate(-11px, -6px) rotate(-4deg) scale(0.95); }
  100% { transform: translate(0px) rotate(0deg) scale(1); }
}
.floater-beam-anim { animation-duration: 8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: floater-drift-beam; animation-timeline: auto; animation-range: normal; animation-delay: var(--fdelay,0s); }
.exporting .floater-beam-anim { animation: auto ease 0s 1 normal none running none !important; }
.user-wrap .user-x { background: var(--ink); color: var(--offwhite); border: 2px solid var(--offwhite); opacity: 0; cursor: pointer; z-index: 5; border-radius: 50%; justify-content: center; align-items: center; padding: 0px; line-height: 1; transition: opacity 0.15s; display: flex; position: absolute; top: 0px; right: 0px; transform: translate(35%, -35%); }
.user-wrap:hover .user-x { opacity: 1; }
.exporting .user-x { opacity: 0 !important; }