:root{color-scheme:dark;--mint: #97FEDD;--lavender: #BE95FF;--white: #FFFFFF;--black: #000000;--ui-scale: 1.5;--s: var(--ui-scale);--bg: #0f0518;--panel: rgba(20, 10, 30, .4);--panel2: rgba(255, 255, 255, .03);--text: #ffffff;--muted: #b0a0cc;--border: rgba(190, 149, 255, .15);--shadow: 0 14px 50px rgba(0, 0, 0, .6);--shadow2: 0 10px 30px rgba(0, 0, 0, .5);--ring: var(--lavender);--radius: 20px;--preview-w: 1080px;--preview-h: 608px}@font-face{font-family:Beer Money;src:url(/fonts/beer%20money.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}*{box-sizing:border-box}html,body{height:100%;align-self:stretch}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:radial-gradient(1000px 600px at 50% -10%,color-mix(in srgb,var(--lavender) 25%,transparent),transparent 70%),radial-gradient(800px 500px at 90% 80%,color-mix(in srgb,var(--mint) 15%,transparent),transparent 60%),radial-gradient(800px 800px at 0% 40%,rgba(110,50,200,.15),transparent 60%),var(--bg);color:var(--text)}#root{height:100%;animation:pageIn .5s cubic-bezier(.2,.8,.2,1) both}@keyframes pageIn{0%{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.header,.card,.panel{animation:popIn .52s cubic-bezier(.2,.85,.2,1) both}.header{animation-delay:40ms}.card{animation-delay:80ms}.panel{animation-delay:.12s}@keyframes popIn{0%{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion: reduce){#root,.header,.card,.panel{animation:none!important}}html,body{overflow-x:hidden;overflow-y:auto}html{font-size:calc(16px * var(--ui-scale))}code{background:#0000004d;border:1px solid var(--border);color:var(--mint);padding:0 .35em;border-radius:calc(6px * var(--s));font-family:JetBrains Mono,monospace}.app{max-width:1600px;width:100%;margin:0 auto;padding:calc(20px * var(--s)) calc(24px * var(--s));min-height:100%;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;gap:calc(16px * var(--s));margin-bottom:calc(24px * var(--s));flex:0 0 auto;padding:calc(12px * var(--s)) calc(20px * var(--s));background:#140a1e4d;border:1px solid var(--border);border-radius:calc(20px * var(--s));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 32px #0003}.brand{display:flex;align-items:center;gap:calc(14px * var(--s))}.brand-mark{width:calc(40px * var(--s));height:calc(40px * var(--s));border-radius:calc(12px * var(--s));background:linear-gradient(135deg,var(--lavender),var(--mint));box-shadow:0 0 20px color-mix(in srgb,var(--lavender) 40%,transparent);border:1px solid rgba(255,255,255,.4);position:relative;overflow:hidden;display:grid;place-items:center}.brand-mark:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(rgba(255,255,255,.4),transparent);pointer-events:none}.brand-logo{width:100%;height:100%;object-fit:contain;padding:calc(6px * var(--s));position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}.brand-text{flex-direction:column;justify-content:center;gap:2px}h1{margin:0;font-size:calc(22px * var(--s));font-weight:800;letter-spacing:-.02em;line-height:1;background:linear-gradient(90deg,var(--white) 0%,var(--lavender) 60%,var(--mint) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent}.muted{color:var(--muted)}.small{font-size:calc(12px * var(--s));line-height:1;opacity:.8;font-weight:500}.actions{display:flex;gap:calc(10px * var(--s));flex-wrap:wrap}.actions-mobile{display:none}.actions-desktop{display:flex}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:#ffffff08;color:#000000d1;padding:calc(10px * var(--s)) calc(16px * var(--s));border-radius:calc(12px * var(--s));font-weight:600;font-size:calc(13px * var(--s));cursor:pointer;transition:all .2s cubic-bezier(.25,.46,.45,.94);-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn:hover{background:#be95ff1a;border-color:var(--lavender);box-shadow:0 0 15px #be95ff26;transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(1)}.btn-primary{background:linear-gradient(135deg,#be95ffcc,#97fedd33);border:1px solid rgba(255,255,255,.3);color:#0f0518;box-shadow:0 4px 20px color-mix(in srgb,var(--lavender) 30%,transparent)}.btn-primary:hover{background:linear-gradient(135deg,var(--lavender) 0%,rgba(151,254,221,.4) 100%);box-shadow:0 6px 25px color-mix(in srgb,var(--lavender) 50%,transparent);border-color:#fff9}.btn:focus-visible,.thumb:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--lavender)}.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(16px * var(--s));align-items:start}@media (max-width: 980px){.grid{grid-template-columns:1fr}}.card,.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-height:0;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.card{padding:calc(20px * var(--s));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative}.stage-panel{display:flex;align-items:stretch;gap:calc(16px * var(--s))}.stage-area{flex:1 1 auto;min-width:0}.card:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at center,rgba(190,149,255,.05),transparent 70%);pointer-events:none}.stage-wrap{display:flex;align-items:flex-start;justify-content:flex-start;width:100%;height:auto}.stage{width:var(--preview-w, 800px);height:var(--preview-h, 450px);flex:0 0 auto;border-radius:calc(16px * var(--s));max-width:100%;background:#000;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;box-shadow:0 20px 60px #00000080}.postcard-note{position:absolute;left:4%;top:14%;width:46%;height:78%;border-radius:calc(16px * var(--s));overflow:hidden;background:linear-gradient(145deg,#ffffff1a,#ffffff05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.25);border-left:1px solid rgba(255,255,255,.15);box-shadow:0 20px 50px #00000080,inset 0 0 0 1px #97fedd0d;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;background:transparent;border:0;box-shadow:none;transition:none;backdrop-filter:none;-webkit-backdrop-filter:none}.postcard-note:focus-within{border-color:#be95ff66;box-shadow:0 25px 60px #0009,0 0 30px #be95ff26,inset 0 0 0 1px #be95ff33;transform:translateY(-2px)}.postcard-lines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(28px * var(--s)),rgba(190,149,255,.15) calc(28px * var(--s)),rgba(190,149,255,.15) calc(29px * var(--s)));-webkit-mask-image:linear-gradient(to bottom,transparent 20px,black 60px);mask-image:linear-gradient(to bottom,transparent 20px,black 60px);opacity:.8}.postcard-text{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:calc(24px * var(--s)) calc(20px * var(--s));background:transparent;border:0;outline:none;resize:none;color:var(--white);font-family:Beer Money,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:calc(16px * var(--s));line-height:calc(29px * var(--s));font-weight:400;letter-spacing:.02em;caret-color:var(--mint);text-shadow:none}.postcard-text::placeholder{color:#be95ff66;font-style:italic;-webkit-text-stroke:.6px rgba(255,255,255,.75);text-stroke:.6px rgba(255,255,255,.75)}.postcard-text::-webkit-scrollbar{width:4px}.postcard-text::-webkit-scrollbar-thumb{background:var(--lavender);border-radius:4px}.postcard-text::-webkit-scrollbar-track{background:transparent}.postcard-note,.postcard-lines{display:none!important}.postcard-text{inset:auto!important;left:4%!important;top:14%!important;width:46%!important;height:78%!important;padding:calc(18px * var(--s)) calc(16px * var(--s))!important;color:#ffffffeb!important;font-size:calc(20px * var(--s))!important;line-height:calc(32px * var(--s))!important;text-decoration:underline!important;text-decoration-color:#97feddbf!important;text-decoration-thickness:calc(2px * var(--s))!important;text-underline-offset:calc(4px * var(--s))!important;caret-color:#97fedde6!important;text-shadow:none!important}@media (max-width: 900px){:root{--ui-scale: 1}html,body{overflow:auto}.app{height:auto;min-height:100%}.header{flex-direction:column;align-items:stretch;padding:16px;gap:16px}.brand{justify-content:center}.brand-text{align-items:center}.actions{width:100%;justify-content:center}.actions-desktop{display:none}.actions-mobile{display:flex;justify-content:center;margin-top:14px}.grid{grid-template-columns:1fr;justify-content:stretch}.card,.panel,.panel.panel-inline,.stage-panel{width:100%}.card{height:auto;align-items:stretch}.stage-panel{flex-direction:column}.panel-inline,.stage-wrap{width:100%}.stage{width:100%;height:auto;aspect-ratio:var(--preview-ar, 16 / 9);min-height:140px}@supports not (aspect-ratio: 1 / 1){.stage{height:auto}.stage:before{content:"";display:block;padding-top:calc(100% / var(--preview-ar, 1.7777778))}}.controls{max-height:none}.postcard-text{font-size:calc(15px * var(--s))!important;line-height:calc(24px * var(--s))!important;text-decoration-thickness:calc(1.5px * var(--s))!important;text-underline-offset:calc(3px * var(--s))!important}}.stage-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:calc(14px * var(--s));color:var(--lavender);font-size:calc(13px * var(--s));text-align:center;background:#000c}.stage-error{color:#ff6b6b}.layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;image-rendering:auto}.checkbox{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}.checkbox input{accent-color:var(--lavender)}.panel{padding:0;display:flex;flex-direction:column;height:auto}.panel-inline{width:calc(300px * var(--s));flex:0 0 auto;align-self:stretch;height:var(--preview-h, 450px);max-height:var(--preview-h, 450px);overflow:hidden}.panel-inline .controls{padding:calc(12px * var(--s));gap:calc(10px * var(--s));flex:1 1 auto;min-height:0;overflow:auto}.panel-inline .row{padding:calc(10px * var(--s));gap:calc(8px * var(--s))}.panel-inline .thumbs{grid-template-columns:repeat(auto-fill,minmax(calc(48px * var(--s)),1fr));gap:calc(6px * var(--s))}.panel-inline .thumb{padding:calc(5px * var(--s))}.panel-inline .thumb img{height:calc(34px * var(--s))}.panel-title{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin:calc(16px * var(--s)) calc(16px * var(--s)) calc(10px * var(--s));opacity:.9}.controls{display:grid;gap:calc(12px * var(--s));padding:calc(12px * var(--s)) calc(16px * var(--s)) calc(16px * var(--s));min-height:0;overflow:auto}.controls::-webkit-scrollbar{width:6px}.controls::-webkit-scrollbar-thumb{background:#fff3;border-radius:999px}.controls::-webkit-scrollbar-thumb:hover{background:#fff6}.controls::-webkit-scrollbar-track{background:transparent}.row{background:#0003;border:1px solid rgba(255,255,255,.05);border-radius:calc(14px * var(--s));padding:calc(12px * var(--s));display:grid;gap:calc(10px * var(--s));transition:background .2s}.row:hover{background:#0000004d;border-color:#ffffff1a}.row-head{display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--s))}.trait{font-weight:600;letter-spacing:.2px;color:var(--white);font-size:calc(13px * var(--s))}.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(60px * var(--s)),1fr));gap:calc(8px * var(--s))}.thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;border-radius:calc(10px * var(--s));padding:calc(6px * var(--s));cursor:pointer;transition:all .2s ease;position:relative}.thumb:hover{border-color:#fff6;background:#ffffff1a;transform:translateY(-2px)}.thumb.is-active{border-color:var(--lavender);background:color-mix(in srgb,var(--lavender) 15%,transparent);box-shadow:0 0 0 1px var(--lavender),0 4px 12px #be95ff4d}.thumb img{width:100%;height:calc(44px * var(--s));object-fit:contain;display:block}.toast{position:fixed;right:calc(24px * var(--s));bottom:calc(24px * var(--s));z-index:50;padding:calc(12px * var(--s)) calc(16px * var(--s));border-radius:calc(12px * var(--s));border:1px solid var(--mint);background:#0a0510d9;color:var(--mint);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 10px 40px #00000080;font-size:calc(13px * var(--s));font-weight:500;display:flex;align-items:center;gap:10px}.footer{flex:0 0 auto;padding:calc(12px * var(--s)) calc(4px * var(--s)) 0;display:flex;justify-content:center}.footer-links{display:inline-flex;align-items:center;gap:calc(10px * var(--s));font-size:calc(12px * var(--s));color:#ffffffb8;background:#0000002e;border:1px solid rgba(255,255,255,.12);border-radius:calc(999px * var(--s));padding:calc(8px * var(--s)) calc(12px * var(--s));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.footer .link{color:var(--mint);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--mint) 55%,transparent)}.footer .link:hover{color:color-mix(in srgb,var(--mint) 85%,var(--white));border-bottom-color:color-mix(in srgb,var(--mint) 75%,transparent)}.footer .dot{opacity:.6}.toast:before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
