:root{--ink: #4a3f5e;--text: #4a3f5e;--text-soft: #9b8aa8;--line: #4a3f5e;--paper: #faf3ea;--card: #fffdf8;--dot: #efdfe3;--lavender: #c9b8e6;--pink: #ffb7c5;--pink-deep: #f298ad;--mint: #b8e6c9;--mint-deep: #93d4ad;--shadow: #e3d0d8;--notch: 8px}:root[data-theme=dark]{--text: #ece6f5;--text-soft: #8d7fa6;--line: #5b4f74;--paper: #1b1626;--card: #271f36;--dot: #2a2238;--shadow: #100c1b}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100svh}body{font-family:Pixelify Sans,monospace;color:var(--text);background-color:var(--paper);background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);background-size:26px 26px;transition:background-color .3s,color .3s}.app{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:32px 16px}.title{margin:0;font-size:2.1rem;font-weight:700;letter-spacing:2px;text-shadow:3px 3px 0 var(--pink);-webkit-user-select:none;user-select:none}.frame{background:var(--line);padding:4px;clip-path:polygon(var(--notch) 0,calc(100% - var(--notch)) 0,calc(100% - var(--notch)) var(--notch),100% var(--notch),100% calc(100% - var(--notch)),calc(100% - var(--notch)) calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,var(--notch) 100%,var(--notch) calc(100% - var(--notch)),0 calc(100% - var(--notch)),0 var(--notch),var(--notch) var(--notch));filter:drop-shadow(6px 6px 0 var(--shadow));animation:pop .38s cubic-bezier(.34,1.45,.64,1) both}.frame-inner{background:var(--card);padding:12px;clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px),0 6px,6px 6px)}canvas{display:block;width:min(76vw,336px);image-rendering:pixelated}canvas.wide{width:min(88vw,576px)}.theme-toggle{position:absolute;top:18px;right:18px;z-index:2;width:40px;height:40px;display:grid;place-items:center;font-family:inherit;font-size:1.15rem;line-height:1;color:var(--text);background:var(--card);border:3px solid var(--line);cursor:pointer;box-shadow:3px 3px 0 var(--line);transition:transform .05s steps(1),box-shadow .05s steps(1)}.theme-toggle:hover{filter:brightness(1.05)}.theme-toggle:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}.modes{display:flex}.mode{font-family:inherit;font-size:.95rem;letter-spacing:1px;color:var(--text-soft);background:var(--card);border:3px solid var(--line);padding:5px 16px;cursor:pointer}.mode:first-child{border-right-width:0}.mode.on{background:var(--lavender);color:var(--ink)}.mode:hover:not(.on){color:var(--text)}@keyframes pop{0%{transform:scale(.9);opacity:.3}to{transform:scale(1);opacity:1}}.buttons{display:flex;gap:16px}.btn{font-family:inherit;font-size:1.15rem;font-weight:600;letter-spacing:1px;color:var(--ink);border:3px solid var(--ink);padding:10px 22px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .05s steps(1),box-shadow .05s steps(1)}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}.btn.pink{background:var(--pink)}.btn.pink:hover{background:var(--pink-deep)}.btn.mint{background:var(--mint)}.btn.mint:hover{background:var(--mint-deep)}.btn.small{font-size:.95rem;padding:6px 12px;background:var(--mint);box-shadow:3px 3px 0 var(--ink)}.btn.small:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}.seedbox{text-align:center;font-size:1rem}.seedbox summary{cursor:pointer;color:var(--text-soft);list-style:none;-webkit-user-select:none;user-select:none;letter-spacing:1px}.seedbox summary::-webkit-details-marker{display:none}.seedbox summary:before{content:"▸ "}.seedbox[open] summary:before{content:"▾ "}.seedbox summary:hover{color:var(--text)}.seedrow{margin-top:10px;display:flex;gap:8px;justify-content:center}.seedrow input{font-family:inherit;font-size:1rem;color:var(--text);background:var(--card);border:3px solid var(--line);padding:6px 10px;width:150px;letter-spacing:2px;text-align:center}.seedrow input:focus{outline:none;border-color:var(--pink-deep)}.traits{margin:14px auto 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,auto);gap:6px 22px;justify-content:center;font-size:.95rem;letter-spacing:1px}.traits li{display:flex;gap:7px;white-space:nowrap}.traits li span{color:var(--text-soft)}@media (max-width: 480px){.traits{grid-template-columns:repeat(2,auto)}}.share{display:block;margin:16px auto 2px;font-family:inherit;font-size:.95rem;letter-spacing:1px;color:var(--text-soft);background:transparent;border:0;padding:4px 6px;cursor:pointer;transition:color .15s}.share:hover{color:var(--pink-deep)}.deco{position:absolute;font-size:1.3rem;color:var(--pink);animation:twinkle 2.6s steps(2) infinite;-webkit-user-select:none;user-select:none;pointer-events:none}.deco-a{top:16%;left:22%}.deco-b{bottom:20%;right:24%;color:var(--mint-deep);animation-delay:.9s}.deco-c{top:26%;right:18%;color:var(--lavender);animation-delay:1.5s;font-size:1rem}.deco-d{bottom:28%;left:17%;color:#f2d49b;animation-delay:.4s;font-size:1rem}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.25}}@media (max-width: 560px){.deco{display:none}}.gallery{display:grid;grid-template-columns:repeat(auto-fill,192px);gap:8px;justify-content:center;padding:16px;background:#111}.gallery canvas{width:192px}