@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--ink:#29304f;--muted:#8589a3;--purple:#7966e9;--line:#ececf5;--bg:#f8f7fc;--panel:#fff;--shadow:0 14px 40px rgba(53,48,97,.08)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}body{overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit}#app{height:100dvh;min-height:540px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% -30%,#fff 10%,#f8f7fc 72%)}
.topbar{height:76px;flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 26px;background:rgba(255,255,255,.83);border-bottom:1px solid rgba(90,86,139,.08);backdrop-filter:blur(14px);z-index:5}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);width:max-content}.brand-mark{width:43px;height:43px;border-radius:15px;background:linear-gradient(145deg,#ffcf70,#ff986b);display:grid;place-items:center;color:#fff;font-size:26px;box-shadow:0 7px 17px #ffbd7770}.brand strong{display:block;font-size:21px;letter-spacing:-.6px;font-weight:900}.brand small{display:block;color:#9b98ad;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-top:-2px}.scene-heading{justify-self:center;display:flex;align-items:center;gap:9px;color:#575c7b;font-weight:900;font-size:15px}.sparkle{color:#ffb443;font-size:20px}.top-actions{justify-self:end;display:flex;align-items:center;gap:8px}.icon-button{width:39px;height:39px;border:1px solid var(--line);background:#fff;border-radius:13px;color:#686d8b;font-size:21px;display:grid;place-items:center;transition:.18s}.icon-button:hover,.button:hover{transform:translateY(-1px);box-shadow:0 7px 18px #514a8720}.button{height:40px;padding:0 15px;border-radius:13px;font-size:12px;font-weight:900;transition:.18s}.button.soft{background:#f2f0fb;color:#6b6595}.button.primary{background:linear-gradient(135deg,#8775ed,#6859d7);color:#fff;box-shadow:0 7px 16px #7566df35}.button.primary span{font-size:17px;vertical-align:-1px;margin-right:4px}
.picker-screen{overflow:auto;flex:1;padding:25px 30px 18px;display:flex;flex-direction:column;align-items:center}.picker-intro{text-align:center;margin:0 0 22px}.eyebrow{color:#9b8ee7;font-size:10px;font-weight:900;letter-spacing:.16em}.picker-intro h1{font-size:clamp(27px,3.2vh,39px);line-height:1.08;margin:7px 0 6px;font-weight:900;letter-spacing:-1px;color:#343957}.picker-intro p{margin:0;color:#8a8da5;font-size:14px;font-weight:700}.scene-grid{width:min(1100px,100%);display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.scene-card{position:relative;overflow:hidden;min-height:164px;background:#fff;border:2px solid transparent;border-radius:20px;padding:0;text-align:left;box-shadow:0 7px 24px rgba(61,57,111,.065);transition:transform .2s,border-color .2s,box-shadow .2s;isolation:isolate}.scene-card:hover{transform:translateY(-4px) rotate(-.4deg);border-color:#cfc8ff;box-shadow:0 14px 25px rgba(91,76,178,.13)}.scene-art{height:112px;display:grid;place-items:center;font-size:64px;position:relative;overflow:hidden}.scene-art:before,.scene-art:after{content:"";position:absolute;border-radius:50%;opacity:.5}.scene-art:before{width:126px;height:126px;right:-28px;top:-62px;background:#fff}.scene-art:after{width:100px;height:100px;left:-30px;bottom:-63px;background:#fff}.scene-art span{z-index:1;filter:drop-shadow(0 6px 3px #4442);transition:transform .22s}.scene-card:hover .scene-art span{transform:scale(1.1) rotate(5deg)}.scene-num{position:absolute;top:9px;left:10px;padding:4px 8px;border-radius:20px;color:#fff;background:#0002;font-size:10px;font-weight:900;z-index:2}.scene-title{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:13px;font-weight:900}.scene-title span:last-child{color:#aaa8c0;font-size:19px}.picker-footer{margin:17px 0 0;color:#a2a0b5;font-size:12px;font-weight:800}.picker-footer span{color:#ffc04f;font-size:16px;margin-right:5px}
.studio{min-height:0;flex:1;display:grid;grid-template-columns:minmax(218px,245px) minmax(0,1fr) minmax(205px,228px);gap:16px;padding:16px 19px 14px;max-width:1680px;width:100%;margin:auto}.hidden{display:none!important}.tool-panel{background:rgba(255,255,255,.92);border:1px solid #eeedf6;border-radius:21px;box-shadow:var(--shadow);padding:18px;min-height:0;overflow:auto}.panel-head{display:flex;align-items:center;gap:11px;margin-bottom:17px}.panel-icon{width:39px;height:39px;border-radius:14px;display:grid;place-items:center;font-size:21px}.panel-icon.yellow{background:#fff4d9;color:#edaf35}.panel-icon.pink{background:#fff0f4;color:#f07a9d}.panel-head h2{font-size:15px;margin:0;font-weight:900}.panel-head p{font-size:10px;color:#a0a2b7;margin:1px 0 0;font-weight:700}.tool-list{display:grid;gap:7px}.tool-choice{width:100%;display:flex;align-items:center;gap:10px;padding:9px;border-radius:13px;background:transparent;text-align:left;border:1px solid transparent;transition:.15s}.tool-choice:hover{background:#faf9ff}.tool-choice.active{background:#f2efff;border-color:#e5dfff}.tool-emoji{width:35px;height:35px;border-radius:11px;background:#fff;box-shadow:0 2px 7px #514b8010;display:grid;place-items:center;font-size:19px}.tool-choice b{display:block;font-size:11px;font-weight:900}.tool-choice small{display:block;font-size:9px;color:#9c9eb2;font-weight:700;margin-top:1px}.divider{height:1px;background:var(--line);margin:15px 0}.section-label{display:flex;justify-content:space-between;align-items:center;margin:0 1px 11px;font-size:9px;letter-spacing:.11em;font-weight:900;color:#9a9bb0}.section-label button{width:24px;height:24px;border-radius:8px;background:#f3f0ff;color:#7869db;font-size:18px;line-height:1}.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:9px 8px}.swatch{width:100%;aspect-ratio:1;border-radius:50%;position:relative;border:3px solid #fff;box-shadow:0 0 0 1px #e9e8f1;transition:.14s}.swatch:hover{transform:scale(1.11)}.swatch.active:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-shadow:0 1px 4px #3338;font-size:14px;font-weight:900}.brush-size-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:900;color:#81849e;margin:16px 1px 6px}.brush-size-label b{color:#7063d3}.palette-panel input[type=range]{width:100%;accent-color:#8573e5;height:5px}.tip-card{margin-top:15px;background:#fff9e9;border-radius:14px;padding:11px;display:flex;gap:8px;align-items:flex-start;color:#a17a27}.tip-card>span{font-size:20px}.tip-card p{margin:0;font-size:9px;line-height:1.45;font-weight:700}.tip-card b{font-size:10px;color:#8d6b23}
.canvas-column{min-width:0;display:flex;flex-direction:column;gap:10px}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:34px}.back-link{background:none;color:#777a98;font-weight:900;font-size:11px;padding:5px 3px}.back-link:hover{color:#675bd0}.canvas-caption{color:#9698ac;font-weight:800;font-size:10px;display:flex;align-items:center;gap:6px}.live-dot{width:7px;height:7px;background:#78d9ab;border-radius:50%;box-shadow:0 0 0 3px #78d9ab2a}.fullscreen{width:33px;height:33px;border-radius:11px;font-size:17px}.artboard-wrap{position:relative;flex:1;min-height:0;display:grid;place-items:center}.artboard{position:relative;z-index:1;width:min(100%,calc((100dvh - 160px)*1.607));max-height:100%;aspect-ratio:900/560;background:#fff;border:7px solid #fff;border-radius:20px;box-shadow:0 13px 35px rgba(64,57,120,.15);overflow:hidden}.artboard svg{display:block;width:100%;height:100%;touch-action:none;user-select:none}.artboard-shadow{position:absolute;z-index:0;width:88%;height:13px;bottom:1px;border-radius:50%;background:#b9b2dd30;filter:blur(8px)}.canvas-footer{text-align:center;color:#aaa7bd;font-weight:800;font-size:10px;min-height:18px}.canvas-footer>span:first-child{color:#ffc14e}.footer-stars{color:#c7c1ec;margin-left:8px;letter-spacing:4px}
.sticker-tabs{display:flex;gap:6px;background:#f5f4fa;padding:4px;border-radius:11px}.sticker-tab{flex:1;background:transparent;border-radius:8px;padding:7px 4px;color:#9293a8;font-size:9px;font-weight:900}.sticker-tab.active{background:#fff;color:#7062d5;box-shadow:0 2px 7px #36305a10}.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0 3px}.sticker-button{aspect-ratio:1;border-radius:12px;background:#fbfaff;border:1px solid #f0eff7;font-size:24px;transition:.15s}.sticker-button:hover{transform:scale(1.1);background:#f3f0ff}.selected-card{display:flex;align-items:center;gap:10px;padding:10px;background:#f8f7fc;border-radius:13px}.selected-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:#fff;font-size:19px}.selected-card b{display:block;font-size:10px}.selected-card small{display:block;font-size:9px;color:#a0a2b6;font-weight:700;margin-top:2px}.delete-button{width:100%;margin-top:8px;height:33px;border-radius:10px;background:#fff2f2;color:#d97c7c;font-size:11px;font-weight:900}.delete-button:disabled{opacity:.42;cursor:default}.encouragement{margin-top:18px;padding:12px 9px;border-radius:14px;background:linear-gradient(135deg,#f8f2ff,#fff2f3);display:flex;align-items:center;gap:9px}.encouragement span{font-size:22px}.encouragement p{font-size:9px;color:#8f7da6;margin:0;font-weight:900;line-height:1.4}
.artboard [data-paint]{cursor:pointer;stroke:#59617b;stroke-width:3;stroke-linejoin:round;transition:fill .15s}.artboard [data-paint]:hover{filter:brightness(1.05)}.toast{position:fixed;z-index:30;left:50%;bottom:22px;transform:translate(-50%,15px);background:#323653;color:#fff;padding:10px 17px;border-radius:13px;font-size:12px;font-weight:900;box-shadow:0 10px 24px #25233d30;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}#rotateNotice{display:none}
@media(max-width:1120px){.studio{grid-template-columns:205px minmax(0,1fr) 190px;gap:10px;padding:10px}.tool-panel{padding:14px}.topbar{padding:0 16px}.palette{gap:7px}.scene-grid{gap:10px}.scene-card{min-height:145px}.scene-art{height:96px}.artboard{width:min(100%,calc((100dvh - 140px)*1.607))}}
@media(max-height:650px) and (orientation:landscape){#app{min-height:0}.topbar{height:58px}.studio{padding-top:8px;padding-bottom:7px}.tool-panel{padding:11px}.panel-head{margin-bottom:10px}.panel-icon{width:32px;height:32px}.divider{margin:9px 0}.tool-choice{padding:6px}.tool-emoji{width:29px;height:29px}.tip-card{margin-top:8px;padding:7px}.artboard{width:min(100%,calc((100dvh - 126px)*1.607));border-width:5px}.canvas-column{gap:5px}.picker-screen{padding-top:13px}.picker-intro{margin-bottom:10px}.scene-grid{gap:8px}.scene-card{min-height:119px;border-radius:15px}.scene-art{height:78px;font-size:53px}.scene-title{height:39px;font-size:11px}.picker-footer{margin-top:9px}}
@media(orientation:portrait) and (max-width:800px){#rotateNotice{position:fixed;inset:0;z-index:99;background:#f8f7fc;display:grid;place-items:center;text-align:center;padding:25px}.rotate-card{max-width:300px}.rotate-card>span{font-size:54px}.rotate-card h2{font-size:24px;margin:12px 0 6px}.rotate-card p{color:#9294aa;font-weight:700;font-size:14px}#app>*:not(#rotateNotice):not(#toast):not(#colorPicker){visibility:hidden}.topbar{visibility:hidden}}
@media(max-width:760px) and (orientation:landscape){.topbar{height:52px;padding:0 10px}.brand-mark{width:34px;height:34px;border-radius:11px;font-size:21px}.brand strong{font-size:17px}.brand small{display:none}.top-actions{gap:5px}.top-actions .button{height:33px;padding:0 9px;font-size:10px}.top-actions .icon-button{width:32px;height:32px}.scene-heading{font-size:12px}.studio{grid-template-columns:150px minmax(0,1fr) 150px;gap:7px;padding:7px}.tool-panel{padding:9px;border-radius:15px}.panel-head h2{font-size:12px}.panel-head p{font-size:8px}.panel-icon{width:29px;height:29px}.tool-choice{gap:6px;padding:5px}.tool-choice b{font-size:9px}.tool-choice small{font-size:7px}.tool-emoji{width:25px;height:25px;font-size:15px}.palette{grid-template-columns:repeat(5,1fr);gap:5px}.sticker-grid{gap:5px}.sticker-button{font-size:19px}.sticker-tab{font-size:8px;padding:5px 2px}.artboard{border-width:4px;border-radius:14px;width:min(100%,calc((100dvh - 111px)*1.607))}.canvas-caption{font-size:8px}.canvas-footer{font-size:8px}.tip-card,.encouragement{display:none}.selected-card{padding:6px}.delete-button{font-size:9px;height:28px}.picker-screen{padding:10px}.picker-intro h1{margin:4px 0;font-size:23px}.picker-intro p{font-size:10px}.picker-intro{margin-bottom:10px}.scene-grid{gap:6px}.scene-card{min-height:105px;border-radius:12px}.scene-art{height:68px;font-size:47px}.scene-title{height:34px;padding:0 8px;font-size:9px}.scene-num{top:5px;left:5px;font-size:8px;padding:3px 6px}.picker-footer{margin-top:6px;font-size:9px}}