:root{--ink: #f5f5f5;--muted: rgba(255, 255, 255, .48);--faint: rgba(255, 255, 255, .06);--faint-2: rgba(255, 255, 255, .1);--glow: #fc0200;--glow-2: #15161b;color-scheme:dark;color:var(--ink);background:#070708;font-family:Inter Tight,Inter,Helvetica Neue,sans-serif;font-size:14px;line-height:1.45;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:#070708}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 400px;background:#070708}.stage{position:relative;isolation:isolate;min-width:0;min-height:0;display:flex;flex-direction:column;background:#070708}.stage:before,.stage:after{content:"";position:absolute;pointer-events:none;z-index:0;border-radius:50%}.stage:before{left:46%;top:46%;width:72%;height:62%;transform:translate(-50%,-46%);background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 78%,white),transparent 72%);filter:blur(70px);opacity:.38}.stage:after{left:62%;top:58%;width:42%;height:38%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--glow-2) 90%,white),transparent 70%);filter:blur(60px);opacity:.28}.mast,.frame,.caption{position:relative;z-index:1}.mast{display:flex;align-items:center;padding:22px 32px 0}.brand{display:flex;align-items:center;gap:14px}.logo{display:block;height:26px;width:auto}h1{margin:0;font-weight:560;font-size:20px;letter-spacing:-.03em;line-height:1.1}.lede{margin:2px 0 0;max-width:42ch;color:var(--muted);font-size:13px}.frame{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:20px 36px 8px}.poster{position:relative;overflow:hidden;max-width:100%;max-height:100%;box-shadow:0 30px 80px #0000008c,0 0 120px color-mix(in srgb,var(--glow) 32%,transparent)}.poster canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.caption{margin:0;padding:8px 36px 22px;color:var(--muted);font-size:13px}.panel{min-height:0;overflow:auto;background:#0c0c0e;padding:26px 22px 40px}.panel::-webkit-scrollbar{width:12px}.panel::-webkit-scrollbar-thumb{background:#ffffff24;border-radius:99px;border:4px solid #0c0c0e}.panel section+section{margin-top:28px}.templates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.templates button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;background:#ffffff0d;text-align:left}.templates button:hover{background:#ffffff14}.templates button[aria-pressed=true]{background:#ffffff24;box-shadow:inset 0 0 0 1px #ffffff29}.templates button span{display:grid;color:#fff;font-weight:560}.templates button em{font-style:normal;font-weight:500;color:#ffffff73;font-size:12px}.swatch{width:42px;height:28px;border-radius:8px;flex:none}.swatch.is-blend{background:linear-gradient(#15161b,#15161b) top / 100% 46% no-repeat,linear-gradient(90deg,#8fd9b4,#d7b56a 32%,#121212 48%,#7ec8e0 70%,#e06048)}.swatch.is-field{background:radial-gradient(circle at 30% 60%,#fc0200 0 2px,transparent 3px),radial-gradient(circle at 60% 40%,#fc0200 0 2px,transparent 3px),#15161b}.swatch.is-aurora{background:radial-gradient(circle at 28% 72%,#285aff 0 8px,transparent 14px),radial-gradient(circle at 74% 28%,#aa3cff 0 8px,transparent 14px),radial-gradient(circle at 62% 78%,#ff783c 0 6px,transparent 12px),#15161b}.swatch.is-cells{background:radial-gradient(circle at 70% 60%,#7dffc3 0 2px,transparent 3px),radial-gradient(circle at 55% 40%,#7dffc3 0 1.5px,transparent 2.5px),radial-gradient(circle at 40% 70%,#163028 0 1.5px,transparent 2.5px),#15161b}.swatch.is-paper{background:radial-gradient(circle at 8% 50%,#1c3f86 0 2px,transparent 3.5px),radial-gradient(circle at 22% 32%,#1c3f86 0 1.5px,transparent 2.5px),radial-gradient(circle at 30% 68%,#3c6df0 0 1.5px,transparent 2.5px),#15161b}h2{margin:0 0 8px;font-size:13px;font-weight:560;letter-spacing:-.01em;color:#ffffffeb}.field{display:grid;gap:6px;margin:14px 0}.field span,.choice span,.color span{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}.field em{font-style:normal;font-variant-numeric:tabular-nums;color:#ffffff52}.field input,.field textarea{width:100%;border:0;border-radius:12px;background:var(--faint);padding:11px 12px;resize:vertical}.field textarea{min-height:76px}.field input:hover,.field textarea:hover{background:var(--faint-2)}.field input:focus,.field textarea:focus{outline:none;background:#ffffff14;box-shadow:0 0 0 1px #ffffff29}.choice{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;margin:10px 0}.choice>span{color:var(--muted);font-size:13px}.seg{display:flex;gap:2px;margin-top:12px;padding:3px;border-radius:999px;background:var(--faint)}.choice .seg{margin-top:0}.seg button{flex:1;border:0;border-radius:999px;background:transparent;color:#ffffff94;padding:7px 12px}.seg button:hover{color:#fff}.seg button[aria-pressed=true]{background:#ffffff24;color:#fff}.colors{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:16px}.color{display:flex;align-items:center;gap:8px}.chip{position:relative;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff38;flex:none}.chip input{opacity:0;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:pointer}button,.ghost,.primary,.quiet{border:0;background:transparent}.primary,.ghost{width:100%;height:46px;border-radius:999px}.primary{background:#fff;color:#111;font-weight:600}.primary:hover{background:#fff;box-shadow:0 10px 36px color-mix(in srgb,var(--glow) 50%,transparent)}.ghost{background:var(--faint);color:var(--ink)}.ghost:hover{background:var(--faint-2)}.export{display:grid;gap:8px}.export-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.quiet{justify-self:center;margin-top:4px;padding:8px 12px;color:var(--muted);border-radius:999px}.quiet:hover{color:#fff;background:var(--faint)}.hint{margin:0 0 2px;color:var(--muted);font-size:12px;line-height:1.45}.field .hint{margin:0}.drop{width:100%;min-height:56px;margin-top:12px;border:0;border-radius:14px;background:var(--faint);color:#fff}.drop:hover{background:var(--faint-2)}.photo{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;margin-top:14px;padding:8px;border-radius:16px;background:var(--faint)}.photo img{width:52px;height:52px;object-fit:cover;border-radius:10px;background:#070708}.photo strong{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.texty{border:0;padding:4px 0 0;background:transparent;color:var(--muted)}.texty:hover{color:#fff}.frame.is-dragging .poster{outline:1px solid rgba(255,255,255,.7);outline-offset:8px}.dropveil{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#070708b8;color:#fff;font-size:14px;text-align:center;padding:16px}.error{margin:4px 0 0;color:#ff8d7a;font-size:13px}.export .hint{margin-top:6px}input:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}.field input:focus-visible,.field textarea:focus-visible{outline:none}@media(max-width:900px){.app{height:auto;min-height:100%;grid-template-columns:1fr}.stage{min-height:88vh}.frame{min-height:68vh}h1{font-size:18px}.choice{grid-template-columns:76px minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){.stage:before,.stage:after{display:none}.poster{box-shadow:0 24px 60px #00000073}}
