:root{color-scheme:light;--ink:#294f4c;--muted:#6a807b;--paper:#fffdf7;--cream:#f4efd9;--green:#4b9d76;--green-dark:#34755a;--yellow:#efb743;--coral:#ed7467;--blue:#58a8d2;--purple:#8670b5;--line:rgba(181,153,94,.34);--shadow:0 18px 42px rgba(71,75,52,.12),0 5px 0 rgba(143,119,67,.13);font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif}
*{box-sizing:border-box}html{min-width:0;background:var(--cream)}body{min-width:0;min-height:100vh;margin:0;overflow-x:clip;color:var(--ink);background:radial-gradient(circle at 18px 18px,rgba(255,255,255,.72) 0 2px,transparent 2.5px) 0 0/36px 36px,linear-gradient(145deg,#faf5df,#e8efd9)}button,input{color:inherit;font:inherit}button:not(:disabled){cursor:pointer}button:focus-visible,input:focus-visible{outline:4px solid rgba(88,168,210,.43);outline-offset:3px}button:disabled{cursor:default;opacity:.46}h1,h2,h3,p{margin-top:0}.app{width:min(1120px,calc(100% - 32px));min-height:100vh;margin:0 auto;padding:20px 0 50px}.paper{border:2px solid var(--line);border-radius:34px;background:rgba(255,253,247,.97);box-shadow:var(--shadow)}.loading-card{display:grid;max-width:460px;min-height:230px;margin:17vh auto 0;place-items:center;padding:30px;border:2px solid var(--line);border-radius:34px;background:var(--paper);box-shadow:var(--shadow);text-align:center}.loading-card span{font-size:52px}.loading-card p{margin:0;color:var(--muted);font-weight:900}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.brand{display:flex;align-items:center;gap:11px;padding:0;border:0;background:transparent;text-align:left}.brand-mark{display:grid;width:52px;height:52px;place-items:center;border:4px solid #fff8e8;border-radius:18px;color:#fff;background:var(--coral);box-shadow:0 5px 0 rgba(151,78,65,.21);font-size:27px;transform:rotate(-3deg)}.brand b{display:block;font-size:20px}.brand small{display:block;margin-top:2px;color:var(--muted);font-size:13px}.top-actions{display:flex;gap:9px}.top-button,.icon-button,.secondary,.primary,.tool-button,.chip{min-height:44px;border:0;border-radius:14px;font-weight:900}.top-button{padding:0 15px;border:2px solid rgba(147,119,62,.28);background:var(--paper);box-shadow:0 4px 0 rgba(147,119,62,.14)}.count{display:inline-grid;min-width:23px;height:23px;margin-left:5px;place-items:center;border-radius:99px;color:#fff;background:var(--green);font-size:12px}.primary{padding:0 20px;color:#fff;background:var(--green);box-shadow:0 6px 0 var(--green-dark)}.secondary{padding:0 17px;border:2px solid rgba(162,133,76,.38);background:var(--paper);box-shadow:0 4px 0 rgba(162,133,76,.17)}.icon-button{display:grid;width:44px;place-items:center;border:2px solid rgba(162,133,76,.33);background:#fffaf0;font-size:20px}.eyebrow{margin-bottom:9px;color:#a96912;font:700 13px Georgia,serif;letter-spacing:2px;text-transform:uppercase}
.hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:480px;overflow:hidden}.hero-copy{padding:54px 50px 44px}.hero h1{margin-bottom:17px;font-size:clamp(43px,5.4vw,67px);line-height:.98;letter-spacing:-2.5px}.hero h1 span{color:var(--coral)}.hero-text{max-width:520px;margin-bottom:26px;color:#536f69;font-size:19px;line-height:1.5}.hero-actions{display:flex;flex-wrap:wrap;gap:11px}.hero-stats{display:flex;flex-wrap:wrap;gap:22px;margin-top:37px}.hero-stats b{display:block;color:var(--green);font:700 25px Georgia,serif}.hero-stats small{color:var(--muted)}.hero-art{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(155deg,#cee9df,#f9d58d)}.hero-art::before{position:absolute;width:330px;height:330px;border:55px solid rgba(255,255,255,.25);border-radius:50%;content:""}.hero-frame{position:relative;width:82%;aspect-ratio:5/4;border:11px solid #fff9e9;border-radius:28px;background:linear-gradient(#bfe5ed 0 55%,#8ec68b 55%);box-shadow:0 18px 30px rgba(55,72,58,.17);transform:rotate(-2deg)}.hero-frame img{position:absolute;bottom:8%;width:55%;height:68%;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(54,69,57,.18))}.hero-frame img:first-child{left:2%}.hero-frame img:last-child{right:1%;width:42%;height:54%}.hero-sticker{position:absolute;right:6%;top:8%;padding:10px 15px;border:3px solid #fff;border-radius:11px;color:#fff;background:var(--coral);box-shadow:0 5px 0 rgba(130,67,56,.19);font-weight:900;transform:rotate(5deg)}.how{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:25px;margin-top:25px;padding:26px 31px}.how h2{margin:0;font-size:29px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.steps div{position:relative;min-height:85px;padding:16px 12px 12px 49px;border:2px dashed #dfc998;border-radius:18px}.steps span{position:absolute;left:11px;top:13px;display:grid;width:30px;height:30px;place-items:center;border-radius:50%;color:#fff;background:var(--blue);font-weight:900}.steps b{display:block;margin-bottom:3px}.steps small{color:var(--muted);line-height:1.35}
.editor{padding:22px}.editor-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;margin-bottom:17px}.editor-head h1{margin:0;font-size:31px}.editor-head p{margin:2px 0 0;color:var(--muted)}.editor-actions{display:flex;gap:8px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:17px}.stage-panel{min-width:0;padding:13px;border-radius:28px;background:#e7efe6}.scene-shell{position:relative;overflow:hidden;border:5px solid #fff;border-radius:23px;background:#fff;box-shadow:0 8px 0 rgba(79,96,76,.13)}.scene-surface{position:relative;width:100%;aspect-ratio:7/5;overflow:hidden;touch-action:none;user-select:none}.scene-bg{position:absolute;inset:0}.bg-meadow{background:linear-gradient(#c9e8ed 0 57%,#8dc98f 57% 78%,#67aa73 78%)}.bg-forest{background:linear-gradient(#d8eadb 0 58%,#9dc37d 58%)}.bg-savanna{background:linear-gradient(#f8d68b 0 61%,#d9b866 61%)}.bg-north{background:linear-gradient(#c8e5ef 0 60%,#f6fbf8 60%)}.bg-coast{background:linear-gradient(#bfe8ef 0 48%,#65bed2 48% 70%,#f0d39c 70%)}.bg-night{background:linear-gradient(#27375f 0 64%,#597454 64%)}.scene-landscape{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.scene-title{position:absolute;z-index:40;left:50%;top:4%;max-width:78%;padding:7px 13px;border:3px solid rgba(255,255,255,.92);border-radius:10px;color:#365c56;background:rgba(255,253,247,.9);box-shadow:0 4px 0 rgba(85,87,61,.14);font-size:clamp(13px,2vw,20px);font-weight:900;text-align:center;transform:translateX(-50%)}.scene-item{position:absolute;z-index:var(--z);left:var(--x);top:var(--y);width:var(--size);aspect-ratio:1;transform:translate(-50%,-50%) rotate(var(--rotation)) scaleX(var(--flip));transform-origin:center;touch-action:none}.scene-item img,.scene-item svg{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 5px rgba(46,60,48,.18))}.scene-item.is-selected::after{position:absolute;inset:-5px;border:3px dashed #fff;border-radius:20px;box-shadow:0 0 0 3px var(--coral);content:"";pointer-events:none}.scene-empty{position:absolute;z-index:2;left:50%;top:50%;width:min(330px,80%);padding:18px;border:2px dashed rgba(72,116,100,.45);border-radius:18px;color:#52716a;background:rgba(255,253,247,.72);font-weight:900;text-align:center;transform:translate(-50%,-50%)}.stage-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 7px 1px;color:var(--muted);font-size:13px}.selection-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:12px}.tool-button{min-width:45px;padding:0 12px;border:2px solid rgba(147,119,62,.28);background:#fffdf7;box-shadow:0 3px 0 rgba(147,119,62,.14)}.tool-button.danger{color:#b14f4c}.feedback{margin-top:12px;padding:12px 15px;border-radius:15px;background:#fff5cf;color:#77581d;font-weight:900}.feedback.success{color:#2f7057;background:#dff1e5}.feedback.error{color:#a54b47;background:#fde4df}
.controls{min-width:0}.control-card{padding:17px;border:2px solid var(--line);border-radius:25px;background:var(--paper);box-shadow:0 7px 0 rgba(143,119,67,.13)}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:13px}.tab{min-width:0;min-height:45px;padding:4px;border:0;border-radius:12px;color:#5c746f;background:#edf1e8;font-size:12px;font-weight:900}.tab[aria-selected=true]{color:#fff;background:var(--green);box-shadow:0 4px 0 var(--green-dark)}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}.panel-title h2{margin:0;font-size:21px}.panel-title small{color:var(--muted)}.group-select,.title-input{width:100%;height:46px;margin-bottom:10px;padding:0 12px;border:2px solid rgba(150,127,79,.32);border-radius:13px;background:#fff}.animal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:407px;overflow:auto;padding:2px 4px 7px 2px}.animal-card{min-width:0;padding:6px;border:2px solid rgba(162,133,76,.27);border-radius:16px;background:#fffaf0;text-align:center}.animal-card img{display:block;width:100%;height:83px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(55,69,58,.13))}.animal-card b{display:block;overflow:hidden;margin:2px 0 5px;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.add-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px}.add-pair button{min-width:0;min-height:34px;padding:2px;border:0;border-radius:9px;color:#fff;background:var(--blue);font-size:11px;font-weight:900}.add-pair button:last-child{background:var(--coral)}.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}.pager button{min-width:39px;height:39px;border:0;border-radius:11px;background:#e9efe7;font-weight:900}.pager span{min-width:55px;color:var(--muted);font-size:13px;text-align:center}.swatches,.decor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.swatch,.decor-option{min-height:75px;padding:7px;border:2px solid rgba(162,133,76,.27);border-radius:15px;background:#fffaf0;font-size:12px;font-weight:900}.swatch i{display:block;height:40px;margin-bottom:4px;border-radius:9px}.swatch.is-active,.decor-option:hover{border-color:var(--coral)}.decor-option svg{display:block;width:43px;height:43px;margin:0 auto 3px}.idea-card{margin-top:11px;padding:13px;border-radius:16px;background:#fff1bd;color:#73581d}.idea-card p{margin:0 0 9px;font-size:13px;line-height:1.4}.bottom-actions{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.bottom-actions>div{display:flex;gap:9px}
.gallery-hero{padding:36px;text-align:center}.gallery-hero h1{margin-bottom:9px;font-size:43px}.gallery-hero p:last-child{margin:0;color:var(--muted)}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}.gallery-card{overflow:hidden;border:2px solid var(--line);border-radius:27px;background:var(--paper);box-shadow:var(--shadow)}.gallery-preview{padding:12px;background:#e9efe5}.gallery-preview .scene-surface{border:4px solid #fff;border-radius:18px;box-shadow:0 5px 0 rgba(72,91,72,.12)}.gallery-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px}.gallery-meta b{display:block}.gallery-meta small{color:var(--muted)}.gallery-actions{display:flex;gap:6px}.empty{grid-column:1/-1;padding:55px;border:2px dashed #d8c69b;border-radius:28px;background:rgba(255,253,247,.75);text-align:center}.empty span{font-size:52px}.result{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:center;padding:28px}.result-preview .scene-surface{border:7px solid #fff;border-radius:25px;box-shadow:var(--shadow)}.result-copy{padding:17px}.result-copy h1{font-size:42px;line-height:1}.result-copy>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.5}.result-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:23px}.toast{position:fixed;z-index:1000;right:18px;bottom:18px;max-width:310px;padding:13px 17px;border-radius:14px;color:#fff;background:#315d55;box-shadow:0 10px 25px rgba(36,59,52,.24);font-weight:900;opacity:0;pointer-events:none;transform:translateY(12px);transition:.2s}.toast.is-visible{opacity:1;transform:none}
.print-sheet{display:none}@media print{@page{size:A4 landscape;margin:10mm}body>*{display:none!important}body>.print-sheet{display:grid!important;width:100%;height:100%;place-items:center;align-content:center;gap:6mm;color:#294f4c;background:#fff}.print-sheet__art{width:min(250mm,100%);padding:4mm;background:#fff}.print-sheet .scene-surface{width:100%;max-height:165mm;border:2mm solid #fff;border-radius:5mm;box-shadow:0 0 0 .5mm #dccca5}.print-sheet h1{margin:0;font-size:18pt;text-align:center}.print-sheet .is-selected::after{display:none}}
@media(max-width:900px){.hero{grid-template-columns:1fr}.hero-art{min-height:390px}.how{grid-template-columns:1fr}.workspace{grid-template-columns:1fr}.controls{order:-1}.control-card{padding:14px}.animal-grid{max-height:335px}.result{grid-template-columns:1fr}.result-copy{text-align:center}.result-actions{justify-content:center}}
@media(max-width:680px){.app{width:min(100% - 20px,1120px);padding-top:10px}.topbar{align-items:flex-start}.brand small,.top-button .label{display:none}.top-button{width:45px;padding:0}.hero-copy{padding:38px 24px}.hero h1{font-size:46px}.hero-art{min-height:315px}.how{padding:23px}.steps{grid-template-columns:1fr}.editor{padding:12px;border-radius:24px}.editor-head{grid-template-columns:auto 1fr}.editor-head h1{font-size:24px}.editor-head p{font-size:13px}.editor-actions{grid-column:1/-1;justify-content:flex-end}.scene-title{top:3%;padding:4px 8px;border-width:2px}.stage-caption{font-size:11px}.tabs{grid-template-columns:repeat(2,1fr)}.animal-grid{grid-template-columns:repeat(2,1fr)}.swatches,.decor-grid{grid-template-columns:repeat(3,1fr)}.bottom-actions{flex-direction:column}.bottom-actions>div{display:grid;grid-template-columns:1fr 1fr}.bottom-actions .primary{width:100%}.gallery-grid{grid-template-columns:1fr}.gallery-hero{padding:27px 18px}.gallery-hero h1{font-size:34px}.gallery-meta{align-items:flex-start;flex-direction:column}.result{padding:15px}.result-copy h1{font-size:34px}.selection-tools{gap:5px}.tool-button{min-width:42px;padding:0 9px}}
@media(max-width:410px){.app{width:calc(100% - 12px)}.brand b{font-size:16px}.brand-mark{width:46px;height:46px}.hero h1{font-size:40px}.hero-text{font-size:17px}.hero-art{min-height:275px}.top-actions{gap:5px}.scene-shell{border-width:3px}.animal-card img{height:72px}.add-pair button{font-size:10px}.decor-option{font-size:10px}.editor-head h1{font-size:21px}}