@charset "UTF-8";
:root{--ink:#634e83;--gold:#ffe4a0}*{box-sizing:border-box}
html,body{margin:0;min-height:100%}body{min-height:100svh;overflow-x:hidden;background:radial-gradient(ellipse at 8% -15%,#6b4d8c 0%,transparent 49%),radial-gradient(ellipse at 96% 53%,#3b718c 0%,transparent 52%),linear-gradient(145deg,#11152f,#261c4b 60%,#15384e);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffeda9;outline-offset:3px}[hidden]{display:none!important}
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 25%,#fff4d2 0 1px,transparent 2px),radial-gradient(circle at 74% 43%,#ffe6f9 0 1.5px,transparent 2.5px);background-size:167px 191px,231px 209px;opacity:.38}
.topnav{max-width:1320px;margin:auto;padding:12px clamp(10px,2.3vw,27px);display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2}.topnav a{font-size:13px;font-weight:850;color:#fff0c9}.topnav a:hover{text-decoration:underline}.topnav .logo{font:900 21px Georgia,serif;letter-spacing:.05em}.navright{display:flex;gap:17px}
.shell{max-width:1320px;margin:auto;padding:0 clamp(10px,2.3vw,27px) 17px;position:relative}
.hero{position:relative;min-height:130px;padding:0 110px 16px;display:flex;align-items:center;justify-content:center;text-align:center}.intro{max-width:800px}.overline{display:inline-block;border-radius:99px;border:1px solid #ffe6b69b;padding:6px 14px;color:#ffe7bb;font-size:10px;font-weight:950;letter-spacing:.12em;background:#ffffff1b}.hero h1{font:900 clamp(31px,4.4vw,54px)/1.1 Georgia,serif;margin:7px 0;letter-spacing:-.035em;color:#ffdfa2;text-shadow:0 8px 26px #100b32}.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(110deg,#b4f4ed,#e5d1fd 52%,#fff5ac);background-clip:text;-webkit-background-clip:text}.hero p{font-size:clamp(12px,1.33vw,15px);line-height:1.45;color:#eae1fa;margin:0}
.bibi-guide{position:absolute;right:5px;bottom:5px;display:flex;align-items:center;gap:8px}.bibi-face{width:91px;height:99px;border:2px solid #fff3d0;border-radius:40% 40% 25% 25%;overflow:hidden;background:#e9d0f4;box-shadow:0 0 0 5px #fff7da23,0 8px 19px #100b2fa2}.bibi-face img{width:100%;height:100%;object-fit:cover;object-position:center 43%}.bibi-bubble{display:none;color:#674f80;background:#fff8e8;padding:10px;border-radius:15px;font-size:11px;font-weight:850}
.studio{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(200px,248px) minmax(0,1fr);gap:15px;padding:15px;background:radial-gradient(circle at 3% 0,#ccffdc50,transparent 40%),radial-gradient(circle at 94% 3%,#ecbcfd4e,transparent 33%),linear-gradient(140deg,#7771b0,#5575a7 60%,#507f96);border:2px solid #d4f0dfbd;border-radius:32px;box-shadow:0 20px 58px #04122cb0,inset 0 2px #ffffff69;overflow:hidden}.studio:before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:repeating-conic-gradient(from 183deg at 35% -39%,transparent 0 13deg,#fff7d813 16deg 20deg,transparent 24deg 40deg)}
.tools{min-width:0;align-self:start;display:flex;flex-direction:column;gap:10px;padding:16px 13px 14px;background:radial-gradient(circle at 18% -8%,#fff6ce,transparent 48%),linear-gradient(145deg,#fffbef,#fbf0fb 60%,#eefaf8);border:2px solid #fff;border-radius:23px;color:var(--ink);box-shadow:0 12px 33px #19255469,inset 0 0 0 3px #f6f2fc}
.tool-heading{display:flex;align-items:center;gap:9px;border-bottom:1px solid #dfd8e9;padding-bottom:9px}.tool-heading span{display:grid;place-items:center;width:29px;height:29px;background:linear-gradient(140deg,#cfa3dc,#a899d9);border-radius:50%;color:#fff8ce}.tool-heading h2{font:900 19px Georgia,serif;color:#735989;margin:0}.section-label{font-size:10px;font-weight:950;letter-spacing:.065em;color:#9681a0}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:61px;border:2px solid #fff;border-radius:14px;padding:5px;background:linear-gradient(150deg,#fff,#f2eafa);color:#78628c;box-shadow:0 4px 0 #dac6e5,0 7px 12px #75648224;transition:transform .15s,box-shadow .15s}.tool:hover{transform:translateY(-2px)}.tool-emoji{font-size:23px}.tool strong{font-size:11px}.tool.selected{border-color:#cda4de;background:linear-gradient(155deg,#ffefee,#e5f4ff);box-shadow:0 0 0 2px #f1d4ec,0 4px 0 #c5afd9}
.palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.swatch{position:relative;display:block;min-width:0;aspect-ratio:1;background:var(--swatch);border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #ac9cae,0 3px 6px #55446958,inset -4px -5px 7px #28153d23;transition:transform .13s}.swatch:hover{transform:scale(1.09)}.swatch.selected{transform:scale(1.05);box-shadow:0 0 0 3px #76589b,0 0 0 5px #fff,0 5px 9px #55446955}.swatch.selected:after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#fff;text-shadow:0 2px 3px #27173e}
.size-head{display:flex;justify-content:space-between;gap:7px;font-size:11px;font-weight:900;color:#886d9a;margin-top:4px}.size-head output{background:#fff;border-radius:8px;padding:2px 6px}.tools input[type=range]{width:100%;accent-color:#a674cb;cursor:pointer}.brush-preview{display:grid;place-items:center;height:30px;background:#fff8fd;border:1px dashed #e8d6f0;border-radius:12px}.brush-preview span{display:block;width:var(--dot,14px);height:var(--dot,14px);max-width:55px;max-height:55px;border-radius:50%;background:var(--ink-color,#a674cb);box-shadow:0 1px 7px #61527744}
.stamp-panel{border-top:1px solid #e7d6ef;padding-top:6px}.stamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:8px}.stamp{min-width:0;min-height:34px;font-size:18px;background:#fbf3ff;border:2px solid #fff;border-radius:10px;box-shadow:0 3px 0 #d5c6e3}.stamp.selected{border-color:#b084c7;background:#f7e0ff;box-shadow:0 0 0 2px #edd0f7,0 3px 0 #cdb5dc}.tool-tip{margin:0;font-size:11px;line-height:1.4;font-weight:700;color:#8a789a;background:#fffdf0;border:1px solid #f0e3cc;border-radius:12px;padding:9px}
.canvas-area{min-width:0;align-self:start;padding:0 clamp(0px,1vw,11px)}.template-picker{padding:9px 12px 11px;background:linear-gradient(142deg,#fdf4ffed,#f3fbfbec);border:2px solid #fff8f8;border-radius:21px;color:#675180;box-shadow:0 7px 18px #162e634a;margin-bottom:10px}.template-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.template-top strong{font:900 14px Georgia,serif;color:#715586}.template-top span{font-size:10px;font-weight:770;color:#987ea1}.template-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(5px,1vw,10px)}.template-card{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 2px;border-radius:13px;border:2px solid #fff;background:linear-gradient(150deg,#fffbf9,#f1eefa);box-shadow:0 3px 0 #d0bfdf;color:#715884;transition:transform .14s,box-shadow .14s}.template-card:hover{transform:translateY(-2px)}.template-card.selected{border-color:#c295dd;box-shadow:0 0 0 2px #f0d4ff,0 3px 0 #b99dce;background:#fff4ec}.template-card img,.template-icon{display:block;width:clamp(39px,5.5vw,60px);height:clamp(39px,5.5vw,60px);border-radius:12px;border:1px solid #ddcbe9;background:#e7dcf3;object-fit:cover;object-position:50% 48%}.template-card img[src*="tavi"]{object-position:48% 50%}.template-card img[src*="manyx"]{object-position:39% 48%}.template-icon{display:grid;place-items:center;font-size:27px;background:linear-gradient(145deg,#f6d6e9,#dcf6e9)}.template-card strong{font-size:10px;line-height:1.15}
.canvas-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 2px 6px}.canvas-overline{font-size:9px;color:#ffe5bd;font-weight:950;letter-spacing:.12em}.canvas-heading h2{font:900 clamp(18px,2vw,24px) Georgia,serif;color:#fff0d2;margin:2px 0 0}.auto-save-indicator{white-space:nowrap;font-size:10px;font-weight:900;padding:7px 9px;color:#fff1d8;background:#293f7a8a;border:1px solid #fff0c76e;border-radius:90px}.scene-picker{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}.scene-picker label{font-size:11px;font-weight:900;color:#ffefda}.scene-picker select{background:#fffcf1;border:1.5px solid #fff;border-radius:10px;color:#775f90;font-size:12px;font-weight:850;padding:7px 11px;min-height:33px}.tip-desktop{font-size:10px;color:#f2e5f9;font-weight:750}
.canvas-frame{position:relative;padding:clamp(8px,1.2vw,15px);border:2px solid #fff5e2;background:linear-gradient(142deg,#f5e2fc,#fff0dc 44%,#c0f3e9);border-radius:25px;box-shadow:0 12px 29px #162d657d,inset 0 0 0 4px #ffffff78}.canvas-flower{position:absolute;font-size:31px;color:#fff1bd;text-shadow:0 0 15px #ffddbb;pointer-events:none}.canvas-flower.one{top:-15px;left:13px}.canvas-flower.two{right:13px;bottom:-17px}.canvas-stack{position:relative;isolation:isolate;width:100%;aspect-ratio:10/7;overflow:hidden;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px #fff,0 5px 17px #7b62934f}.canvas-stack canvas,.template-layer{position:absolute;inset:0;display:block;width:100%;height:100%}#backgroundCanvas{z-index:1;pointer-events:none}.template-layer{z-index:3;pointer-events:none}.template-layer.filling{pointer-events:auto;cursor:crosshair}.template-layer canvas{display:block;width:100%;height:100%;pointer-events:none}#paintCanvas{z-index:2;touch-action:none;cursor:crosshair;outline:none}.canvas-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:13px}.action{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;min-height:38px;background:linear-gradient(150deg,#fffdf8,#eee4fb);border:1px solid #fff;border-radius:100px;font-size:11px;font-weight:950;color:#6d5a83;box-shadow:0 4px 0 #c3b0d1,0 8px 13px #132b622b;transition:transform .14s}.action:hover:not(:disabled){transform:translateY(-2px)}.action:disabled{opacity:.46;cursor:default}.action.subtle{background:linear-gradient(145deg,#e4fafa,#e0e9fb)}.action.download{background:linear-gradient(140deg,#fff9cd,#ffe0a5);color:#755c72;box-shadow:0 4px 0 #d1ac84,0 8px 13px #132b622b}
.clear-confirm{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:10px;padding:10px;background:#fff9ee;border-radius:15px;color:#705980;font-size:11px;font-weight:850}.clear-confirm button{border:0;border-radius:10px;padding:7px 12px;font-size:11px;font-weight:900;background:#e3d6f5;color:#654b7c}.clear-confirm button:first-of-type{background:#f6c5cd}
.canvas-note{font-size:10px;line-height:1.45;color:#f5e5fd;margin-top:9px;padding:0 3px}.foot{text-align:center;color:#dfd9f4;font-size:11px;line-height:1.4;margin:12px 0 0}
@media(max-width:1020px){.hero{padding:3px 100px 14px 8px}.studio{grid-template-columns:210px minmax(0,1fr)}.palette{gap:6px}.template-card img,.template-icon{height:47px;width:47px}}
@media(max-width:740px){.studio{grid-template-columns:1fr}.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px 13px}.tool-heading{grid-column:1/-1}.tool-grid{grid-column:1;grid-row:3/5}.palette{grid-column:2;grid-row:3/5}.section-label.label-colors{grid-column:2;grid-row:2}.tools>.section-label:first-of-type{grid-column:1;grid-row:2}.size-head{grid-column:1}.tools input[type=range]{grid-column:1}.brush-preview{grid-column:2;grid-row:6/8;align-self:center}.stamp-panel{grid-column:1/-1}.tool-tip{grid-column:1/-1}.canvas-area{padding:0}.hero{padding:0 80px 13px 0}.bibi-face{width:72px;height:82px}.tip-desktop{display:none}}
@media(max-width:520px){.topnav{padding:11px 5px;justify-content:center;gap:9px}.topnav a{font-size:11px}.topnav .logo{font-size:17px}.navright{gap:10px}.shell{padding:0 8px 10px}.hero{padding:0 60px 10px 0;min-height:96px}.overline{font-size:8px;padding:5px 8px}.hero h1{font-size:28px;margin:6px 0}.hero p{font-size:11px}.bibi-face{width:55px;height:64px}.studio{padding:9px;gap:10px;border-radius:22px}.tools{padding:10px;border-radius:18px;gap:7px 9px}.tool-heading h2{font-size:16px}.tool{min-height:49px;gap:1px;border-radius:11px}.tool-emoji{font-size:18px}.tool strong{font-size:10px}.palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.swatch{border-width:1px}.section-label{font-size:9px}.tool-tip{font-size:10px;padding:6px}.template-picker{border-radius:16px;padding:8px 7px;margin-bottom:8px}.template-top strong{font-size:12px}.template-top span{font-size:9px}.template-cards{gap:4px}.template-card{padding:4px 1px;border-radius:10px}.template-card img,.template-icon{width:40px;height:40px;border-radius:8px}.template-card strong{font-size:9px}.canvas-heading h2{font-size:19px}.auto-save-indicator{font-size:9px;padding:6px}.scene-picker{gap:7px}.scene-picker label{font-size:10px}.scene-picker select{font-size:11px;min-height:31px}.canvas-frame{padding:7px;border-radius:17px}.canvas-stack{border-radius:10px}.canvas-flower{font-size:21px}.canvas-actions{margin-top:10px;justify-content:space-between;gap:5px}.action{font-size:10px;padding:8px 7px;gap:3px;min-height:35px}.canvas-note{font-size:9px}}
@media(max-width:360px){.template-card img,.template-icon{height:34px;width:34px}.template-card strong{font-size:8px}.hero h1{font-size:25px}.palette{gap:3px}.action{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}