@import"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;700&display=swap";:root{color-scheme:dark;--bg: #050816;--panel: rgba(15, 23, 42, .82);--panel-strong: rgba(17, 24, 39, .94);--panel-soft: rgba(255, 255, 255, .06);--text: #f8fafc;--muted: rgba(226, 232, 240, .7);--line: rgba(255, 255, 255, .08);--accent: #7c3aed;--accent-2: #14b8a6;--accent-3: #f97316;--shadow: 0 28px 80px rgba(0, 0, 0, .48)}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;font-family:Space Grotesk,system-ui,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(124,58,237,.26),transparent 28%),radial-gradient(circle at top right,rgba(20,184,166,.22),transparent 24%),radial-gradient(circle at bottom left,rgba(249,115,22,.16),transparent 30%),linear-gradient(180deg,#050816,#0b1022 54%,#050816)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(circle at center,black 58%,transparent 100%);mask-image:radial-gradient(circle at center,black 58%,transparent 100%);opacity:.4}button,input,a{font:inherit}button{cursor:pointer}.editor-shell{width:min(1440px,calc(100% - 28px));margin:0 auto;padding:18px 0 28px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px}.sidebar,.canvas-workspace{background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.sidebar{padding:22px;display:grid;gap:18px;align-content:start}.brand-block h1,.workspace-header h2{font-family:Fraunces,Georgia,serif;letter-spacing:-.04em;line-height:.95;margin:0}.brand-block h1{font-size:clamp(2.6rem,7vw,4.5rem)}.workspace-header h2{font-size:clamp(1.5rem,3vw,2.2rem)}.eyebrow{margin:0 0 10px;color:#ffffff8f;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;font-weight:700}.lede,.instructions-card li,.instructions-card p,.palette-heading span,.status-line,.workspace-badge{color:var(--muted);line-height:1.55}.toolbar{display:grid;grid-template-columns:1fr 1fr;gap:10px}.button{min-height:48px;padding:0 16px;border:1px solid transparent;border-radius:16px;background:var(--panel-soft);color:var(--text);transition:transform .16s ease,border-color .16s ease,background .16s ease}.button:hover,.button:focus-visible,.palette-tile:hover,.palette-tile:focus-visible{transform:translateY(-1px)}.button-primary{background:linear-gradient(135deg,var(--accent),#4f46e5);border-color:#ffffff14}.button-secondary{background:#ffffff0a;border-color:var(--line)}.hidden-input{display:none}.palette-card,.instructions-card{background:#ffffff0a;border:1px solid var(--line);border-radius:22px;padding:16px}.palette-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.palette-heading span{font-size:.88rem}.palette-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.palette-tile{border:1px solid var(--line);border-radius:18px;padding:8px;background:#ffffff0a;color:var(--text);display:grid;gap:8px;text-align:left}.palette-tile img{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:12px;display:block}.palette-tile strong{font-size:.84rem;font-weight:600}.instructions-card ol{margin:10px 0 0;padding-left:20px}.instructions-card li+li{margin-top:8px}.status-line{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}.canvas-workspace{padding:20px;display:grid;gap:16px;overflow:hidden}.workspace-header{display:flex;align-items:end;justify-content:space-between;gap:16px}.workspace-badge{margin:0;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#ffffff0d;white-space:nowrap}.workspace-badge.is-active{color:#fff;border-color:#ffffff3d;background:#7c3aed47}.canvas-shell{border-radius:24px;background:radial-gradient(circle at 20% 15%,rgba(124,58,237,.24),transparent 22%),radial-gradient(circle at 85% 10%,rgba(20,184,166,.16),transparent 20%),linear-gradient(180deg,#0b1220,#08101d);overflow:hidden;min-height:560px;position:relative}.canvas-border-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.canvas-border-base,.canvas-border-trail{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}.canvas-border-base{stroke:#ffffff24}.canvas-border-trail{stroke:url(#canvas-border-gradient);stroke-linecap:round;stroke-dasharray:180 820;stroke-dashoffset:0;animation:canvas-border-travel 2.6s linear infinite}.canvas-shell:after{content:"Drop images here";position:absolute;inset:auto 24px 24px auto;padding:8px 12px;border-radius:999px;background:#0f172ab8;border:1px solid rgba(255,255,255,.08);color:#ffffffb8;font-size:.85rem;pointer-events:none}.canvas-shell>.konvajs-content{position:relative;z-index:1}.canvas-shell:after{z-index:3}.canvas-shell.is-dropping{outline:2px solid rgba(124,58,237,.72);outline-offset:-2px}.canvas-shell.is-dropping .canvas-border-trail{animation-duration:1.3s}.canvas-shell canvas{display:block}@keyframes canvas-border-travel{to{stroke-dashoffset:-1000}}@media (max-width: 1120px){.editor-shell{grid-template-columns:1fr}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width: 720px){.editor-shell{width:min(100% - 16px,1440px);padding-top:10px}.sidebar,.canvas-workspace{border-radius:22px}.toolbar,.palette-grid{grid-template-columns:1fr}.workspace-header{align-items:flex-start;flex-direction:column}.canvas-shell{min-height:520px}.canvas-shell:after{content:"Drag files or starter pictures"}}