:root{--bg: #fdf7ec;--paper: #fffdf6;--panel: #fffbf7;--ink: #2d2a3f;--ink-soft: #4a4560;--text-muted: #6b6878;--text-dim: #a8a2b8;--primary: #7c5ce8;--primary-dark: #6847d4;--primary-soft: #ece6fc;--primary-softer: #f5f2ff;--primary-text: #4f3bb0;--teal: #6fcfc3;--teal-deep: #4fa99d;--teal-soft: #d9f0ec;--coral: #f89181;--coral-soft: #fde1db;--yellow: #f5c13a;--yellow-soft: #fdf0c4;--border-soft: #e7e5e4;--border-softer: #eeece9;--border-soft-hover: #d6d3d1;--border-scribble: #2d2a3f;--shadow-soft: 0 10px 30px rgba(45, 42, 63, .08);--shadow-card: 0 6px 18px rgba(45, 42, 63, .07);--shadow-btn: 0 4px 12px rgba(45, 42, 63, .08);--radius: 14px;--radius-lg: 18px}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%}body{font-family:Archivo,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.176 0 0 0 0 0.164 0 0 0 0 0.245 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:320px 320px;mix-blend-mode:multiply;opacity:.22}.display{font-family:Archivo Black,Archivo,sans-serif;font-weight:900;letter-spacing:.3px}.wobble-defs{position:absolute;width:0;height:0;overflow:hidden}.wobble{filter:url(#wobble)}.wobble-sm{filter:url(#wobble-sm)}button{font:inherit}.handwritten{font-family:Caveat,cursive;font-weight:700}.app{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr) 240px;min-height:100vh;gap:0;z-index:1}.deco{position:fixed;pointer-events:none;z-index:0}.deco-tl{top:0;left:0}.deco-bl{bottom:0;left:0}.deco-br{bottom:-140px;right:-340px}.sidebar{position:relative;z-index:2;padding:28px 22px;display:flex;flex-direction:column;gap:24px}.sidebar.left{border:none}.sidebar.right{border:2px solid var(--border-soft);border-radius:20px;padding:22px 18px;margin:18px 18px 18px 0;filter:url(#wobble-sm)}.sidebar.right .card{background:transparent;border:none;box-shadow:none;padding:4px 2px;transform:none}.sidebar.right .btn-soft{filter:none}.brand{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px}.brand h1{margin:0;font-family:Luckiest Guy,Bangers,Archivo Black,sans-serif;font-weight:400;font-size:46px;letter-spacing:1.5px;line-height:.95;color:var(--ink);position:relative;display:inline-block;filter:url(#wobble-sm)}.brand-sparks{position:absolute;top:-8px;right:-22px;color:var(--primary)}.brand .tagline{margin:0;font-family:Caveat,cursive;font-weight:700;font-size:22px;color:var(--ink);display:inline-block;line-height:1}.card{position:relative;background:var(--panel);border:1.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:18px 16px;box-shadow:var(--shadow-card)}.card-tilt-l{transform:rotate(-.6deg)}.card-tilt-r{transform:rotate(.6deg)}.step-heading{display:flex;align-items:center;gap:10px;margin-bottom:14px}.step-heading.inline{margin-bottom:0}.step-num{width:22px;height:22px;border-radius:50%;background:#7c3aed;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:Archivo Black,sans-serif;font-weight:900;font-size:12px;border:none;box-shadow:0 2px 6px #7c3aed59;flex-shrink:0}.step-text{font-family:Kalam,Caveat,cursive;font-weight:700;font-size:15px;letter-spacing:.4px;color:var(--ink);text-transform:uppercase;filter:url(#wobble-sm)}.upload-section{display:flex;flex-direction:column;gap:12px}.dropzone{display:block;border:2.5px dashed rgba(124,92,232,.6);border-radius:16px;padding:34px 18px 30px;text-align:center;cursor:pointer;background:transparent;transition:background .2s,transform .15s,border-color .2s;min-height:230px;display:flex;align-items:center;justify-content:center}.dropzone:hover,.dropzone.drag{background:var(--primary-softer);border-color:#7c5ce8e6}.dz-inner{display:flex;flex-direction:column;align-items:center;gap:14px}.dz-inner strong{font-family:Luckiest Guy,Bangers,Archivo Black,sans-serif;font-weight:400;font-size:15px;text-transform:uppercase;letter-spacing:1px;margin-top:4px;color:var(--ink-soft);opacity:.75;filter:url(#wobble-sm)}.dz-inner span{font-family:Luckiest Guy,Bangers,Archivo Black,sans-serif;font-weight:400;font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);opacity:.75;filter:url(#wobble-sm)}.dz-browse{font-family:Caveat,cursive!important;font-weight:700!important;font-size:17px!important;text-transform:none!important;color:var(--primary)!important;letter-spacing:0!important;margin-top:8px;text-decoration:underline;text-decoration-style:solid;text-decoration-thickness:1.5px;text-underline-offset:3px}.dz-icon{position:relative;width:64px;height:64px;display:flex;align-items:center;justify-content:center;color:var(--ink);border:none;background:transparent;box-shadow:none}.sparkles{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;color:var(--yellow);pointer-events:none}.tips{display:flex;align-items:flex-start;gap:12px;background:transparent;border:none;padding:4px 0 0;box-shadow:none;transform:none}.bulb-icon{color:var(--ink);flex-shrink:0;filter:url(#wobble-sm)}.tips-content{display:flex;flex-direction:column;gap:4px;min-width:0}.tips-heading{margin:0 0 2px;font-family:Luckiest Guy,Bangers,Archivo Black,sans-serif;font-weight:400;font-size:18px;text-transform:uppercase;letter-spacing:1px;color:var(--ink);filter:url(#wobble-sm)}.tips p{margin:0;font-family:Kalam,Caveat,cursive;font-weight:700;font-size:14px;color:var(--ink-soft);line-height:1.3}.tips-underline{color:var(--ink);opacity:.55;margin-top:2px;align-self:flex-start}.hint-card{margin-top:auto;background:#e9d5ff;border:none;border-radius:var(--radius);padding:14px 16px;box-shadow:0 8px 20px #7c5ce82e;transform:rotate(-1deg)}.hint-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}.hint-card li{font-family:Caveat,cursive;font-weight:700;font-size:15px;color:var(--primary-text);position:relative;padding-left:16px}.hint-card li:before{content:"✦";position:absolute;left:0;color:var(--primary)}.error{color:#d43f3f;font-size:11px;margin:8px 0 0}.main{position:relative;z-index:2;padding:24px 30px 20px;display:flex;flex-direction:column;gap:44px;min-width:0}.toolbar{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:18px;row-gap:10px;justify-content:center;padding:0 48px}.toolbar>.step-heading{grid-column:1;grid-row:1;justify-self:start}.toolbar>.preset-group{grid-column:1;grid-row:2}.toolbar>.actions{grid-column:2;grid-row:2;align-self:center}.preset-group{display:flex;background:transparent;border:none;border-radius:0;padding:0;gap:8px;box-shadow:none}.preset{position:relative;background:var(--panel);border:2px solid var(--border-soft-hover);cursor:pointer;padding:14px 12px 10px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);font-family:Archivo Black,Archivo,sans-serif;font-size:11px;letter-spacing:1.4px;font-weight:900;text-transform:uppercase;min-width:68px;min-height:76px;transition:all .15s;filter:url(#wobble-sm)}.preset svg{color:var(--ink);opacity:.85;width:22px;height:22px}.preset:hover{background:var(--primary-softer);border-color:#a99ff5}.preset:hover svg{opacity:1}.preset.active{background:var(--primary-soft);border-color:#7c3aed;box-shadow:0 4px 12px #7c5ce82e}.preset.active svg{color:var(--primary);opacity:1}.actions{display:flex;gap:14px;align-items:center}.shuffle-wrap{position:relative;display:flex;align-items:center;margin:-6px 10px 0 6px}.shuffle-wrap .btn-primary{transform:rotate(-3deg) translateY(-4px);padding:16px 28px 14px;font-size:22px;letter-spacing:2.5px;position:relative;z-index:2}.shuffle-wrap .btn-primary:hover:not(:disabled){transform:rotate(-3deg) translateY(-6px)}.shuffle-wrap .btn-primary svg{width:20px;height:20px}.shuffle-note{position:absolute;top:calc(100% + 10px);left:55%;transform:translate(-50%) rotate(-3deg);font-family:Caveat,cursive;font-weight:700;font-size:20px;color:var(--primary);white-space:nowrap;pointer-events:none;display:inline-flex;align-items:flex-end;gap:2px}.arrow-sketch{color:var(--primary);margin-bottom:-2px;margin-right:2px}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px 10px;border-radius:12px;background:var(--panel);color:var(--ink);border:2px solid var(--border-soft-hover);font-weight:400;font-family:Bangers,Archivo Black,sans-serif;font-size:18px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .12s,box-shadow .12s,border-color .12s;filter:url(#wobble-sm)}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 18px #2d2a3f1f;border-color:#bfbcb8}.btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-btn)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:#7c3aed;color:#fff;border:2.5px solid #1a1825;border-radius:20px;padding:15px 26px 13px;box-shadow:0 6px 0 -1px #5b21b6,0 6px 0 1.5px #1a1825;filter:url(#wobble-sm)}.btn-primary:hover:not(:disabled){background:#8b4ff0;transform:rotate(-3deg) translateY(-6px);box-shadow:0 9px 0 -1px #5b21b6,0 9px 0 1.5px #1a1825}.btn-primary:active:not(:disabled){transform:rotate(-3deg) translateY(-1px);box-shadow:0 3px 0 -1px #5b21b6,0 3px 0 1.5px #1a1825}.btn-download{box-shadow:0 9px 0 -2px #9dd8ca;margin-bottom:6px}.btn-download:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 0 -2px #9dd8ca;border-color:#bfbcb8}.btn-download:active:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 0 -2px #9dd8ca}.btn-reset{box-shadow:0 6px 0 -2px #d6d3d1;margin-bottom:4px}.btn-reset:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 0 -2px #d6d3d1;border-color:#bfbcb8}.btn-reset:active:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 0 -2px #d6d3d1}.top-right{position:absolute;top:0;right:0;display:flex;gap:8px}.icon-btn{width:36px;height:36px;border-radius:10px;background:var(--panel);border:2px solid var(--border-soft-hover);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:400;font-family:Bangers,sans-serif;box-shadow:var(--shadow-btn);transition:all .12s;filter:url(#wobble-sm)}.icon-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px #2d2a3f1f;background:var(--yellow-soft);border-color:#bfbcb8}.canvas-area{background:transparent;border:none;padding:10px 0 0;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;min-height:0}.main-canvas{max-width:100%;max-height:58vh;object-fit:contain;border-radius:16px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;display:block;box-shadow:0 12px 32px #2d2a3f1a}.main-canvas:active{cursor:grabbing}.canvas-placeholder{width:100%;min-height:50vh;border:1.5px dashed var(--border-soft-hover);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);background:var(--panel);box-shadow:0 10px 30px #2d2a3f14}.ph-inner{display:flex;flex-direction:column;align-items:center;gap:14px}.ph-inner p{margin:0;font-family:Caveat,cursive;font-size:18px;font-weight:700;color:var(--text-muted)}.ph-inner svg{color:var(--text-dim)}.hint-text{font-family:Caveat,cursive;font-weight:700;font-size:22px;letter-spacing:.3px;color:var(--ink);margin:10px 0 0;display:inline-flex;align-items:center;gap:10px;position:relative;transform:rotate(-2deg)}.swoosh-left{color:var(--ink);opacity:.85}.hint-accent{position:relative;display:inline-block;padding-bottom:4px}.sketch-underline{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:6px;color:var(--primary)}.footer{align-self:center;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;filter:none;font-family:Caveat,cursive;font-weight:700;font-size:22px;letter-spacing:.3px;color:var(--ink);display:inline-flex;align-items:center;gap:6px;transform:rotate(-2deg)}.footer .heart{color:var(--coral);font-size:20px}.footer-link{color:var(--primary);text-decoration:none;border-bottom:2px solid var(--primary-soft);padding-bottom:1px;transition:border-color .15s}.footer-link:hover{border-bottom-color:var(--primary)}.section{display:flex;flex-direction:column;gap:8px}.section-label{font-family:Luckiest Guy,Bangers,Archivo Black,sans-serif;font-size:18px;font-weight:400;letter-spacing:1px;color:var(--ink);margin:0 0 6px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;filter:url(#wobble-sm)}.section-label svg{color:var(--yellow)}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:#e5e5e5;border:none;border-radius:999px;outline:none;margin:10px 0 4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 3px 8px #7c5ce859}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 3px 8px #7c5ce859}.slider-labels{display:flex;justify-content:space-between;font-family:Kalam,Caveat,cursive;font-size:14px;font-weight:700;letter-spacing:.2px;color:var(--ink-soft);margin-top:4px;text-transform:none}.btn-soft{display:flex;align-items:center;gap:10px;width:100%;background:var(--teal-soft);border:2px solid rgba(79,169,157,.45);color:var(--ink);padding:12px 14px;border-radius:var(--radius);cursor:pointer;text-align:left;box-shadow:0 6px 16px #4fa99d2e;transition:transform .12s,box-shadow .12s;filter:url(#wobble-sm)}.btn-soft:hover:not(:disabled){transform:translateY(-2px) rotate(-.8deg);box-shadow:0 10px 22px #4fa99d47}.btn-soft:disabled{opacity:.55;cursor:not-allowed}.btn-soft svg{color:var(--teal-deep);flex-shrink:0}.btn-soft span{display:flex;flex-direction:column;gap:1px;line-height:1.25}.btn-soft strong{font-family:Archivo Black,Archivo,sans-serif;font-size:12px;font-weight:900;color:var(--ink);text-transform:uppercase;letter-spacing:.4px}.btn-soft em{font-family:Caveat,cursive;font-style:normal;font-size:14px;color:var(--teal-deep);font-weight:700}.sub{font-family:Caveat,cursive;font-size:14px;color:var(--text-muted);margin:0 0 6px}.polaroid{background:#fff;padding:6px 6px 10px;border:1px solid var(--border-soft);border-radius:6px;box-shadow:0 6px 18px #2d2a3f1f;display:inline-block}.preview{width:100%;border-radius:2px;display:block}.preview-empty{padding:22px;text-align:center;font-family:Caveat,cursive;font-size:14px;color:var(--text-dim);background:var(--primary-softer);border:1.5px dashed var(--border-soft-hover);border-radius:10px}.info-card{padding:16px}.info{margin:0;font-size:11px;display:flex;flex-direction:column;gap:8px}.info>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:1px dashed rgba(45,42,63,.18);padding-bottom:6px}.info>div:last-child{border-bottom:none;padding-bottom:0}.info dt{color:var(--text-muted);font-size:10px;letter-spacing:.4px;font-family:Archivo Black,Archivo,sans-serif;text-transform:uppercase;font-weight:700}.info dd{margin:0;font-weight:700;color:var(--ink);font-size:12px;font-family:Inter,sans-serif}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#2d2a3f59;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;animation:fadeIn .18s ease-out;padding:24px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:rotate(-1.5deg) translateY(8px) scale(.96)}to{opacity:1;transform:rotate(-1.5deg) translateY(0) scale(1)}}.modal-card{position:relative;background:var(--panel);border:2.5px solid var(--ink);border-radius:20px;padding:34px 36px 30px;max-width:460px;width:100%;box-shadow:0 20px 60px #2d2a3f59;transform:rotate(-1.5deg);animation:popIn .22s cubic-bezier(.2,.8,.3,1);filter:url(#wobble-sm)}.modal-close{position:absolute;top:10px;right:14px;width:32px;height:32px;border-radius:50%;background:transparent;border:none;color:var(--ink);font-family:Bangers,sans-serif;font-size:28px;line-height:1;cursor:pointer;padding:0;transition:transform .12s,background .12s}.modal-close:hover{background:var(--coral-soft);transform:rotate(8deg)}.modal-title{margin:0 0 14px;font-family:Archivo Black,sans-serif;font-size:26px;letter-spacing:.5px;color:var(--ink);display:inline-flex;align-items:flex-start;gap:6px;position:relative}.modal-title .brand-sparks{position:static;color:var(--coral)}.modal-body{margin:0 0 14px;font-family:Archivo,Inter,sans-serif;font-size:14px;line-height:1.55;color:var(--ink-soft)}.modal-body strong{color:var(--primary);font-weight:800}.modal-body kbd{display:inline-block;padding:1px 6px;background:var(--primary-softer);border:1.5px solid var(--border-soft-hover);border-radius:5px;font-family:Archivo,sans-serif;font-size:11px;font-weight:700;color:var(--primary-text)}.modal-credit{margin-top:18px;padding-top:16px;border-top:1.5px dashed var(--border-soft-hover);display:flex;flex-direction:column;gap:4px}.modal-credit-label{font-family:Caveat,cursive;font-size:18px;font-weight:700;color:var(--primary);transform:rotate(-1deg);align-self:flex-start}.modal-credit-link{font-family:Archivo Black,sans-serif;font-size:15px;color:var(--ink);text-decoration:none;line-height:1.35;padding-bottom:4px;position:relative}.modal-credit-link em{font-family:Caveat,cursive;font-style:normal;font-weight:700;font-size:17px;color:var(--primary)}.modal-credit-link:hover{text-decoration:underline;text-decoration-color:var(--primary);text-decoration-thickness:2px;text-underline-offset:3px}.modal-author{margin-top:14px;font-family:Caveat,cursive;font-size:17px;font-weight:700;color:var(--ink-soft);text-align:right;transform:rotate(-1deg)}.modal-author-link{color:var(--primary);text-decoration:none;border-bottom:2px solid var(--primary-soft);padding-bottom:1px;transition:border-color .15s}.modal-author-link:hover{border-bottom-color:var(--primary)}@media (max-width: 1200px){.app{grid-template-columns:200px minmax(0,1fr) 220px}.main{padding:18px 20px}.sidebar{padding:22px 16px}.brand h1{font-size:32px}}@media (max-width: 960px){.app{grid-template-columns:1fr}.sidebar.left,.sidebar.right{border:none;border-bottom:2px dashed rgba(45,42,63,.15)}.deco{display:none}.toolbar{gap:10px}.top-right{margin-left:0}}