:root{--ink:#493a49;--muted:#9b8d96;--pink:#d74f8b;--line:#eee3e9;--soft:#fff8f5;--chosen:#f16ba8}*{box-sizing:border-box}body{margin:0;background:var(--soft);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-size:14px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #8566be;outline-offset:4px}button{transition:background .15s,transform .15s}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{opacity:.3;cursor:default}button,button svg{touch-action:manipulation}.topbar{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4.5%;background:#fffcfa}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-family:Fredoka,'Trebuchet MS',sans-serif;font-size:24px;line-height:1.05;font-weight:500;letter-spacing:-.7px}.brand-icon{color:#ec79a2;font-size:56px}.brand-bottom{display:block;color:#cf5488}.tiny-star{font-size:20px;color:#e9bc54;margin-left:8px}.header-note{color:#93818c;font-size:13px}.spark{font-size:24px;color:#b18fbe;margin-right:8px}.save-button{border:0;background:#db568e;border-radius:13px;color:white;padding:14px 20px;font-weight:700;box-shadow:0 4px 0 #bc4075}.save-button span{margin-right:9px;font-size:21px}main{max-width:1600px;padding:36px 4.5% 16px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.3px;color:#b78298}h1{font-family:Fredoka,'Trebuchet MS',sans-serif;font-size:clamp(27px,2.6vw,41px);font-weight:500;letter-spacing:-.6px;margin:8px 0 8px}h1>span{font-size:32px;margin-left:15px;color:#e4ad49}.intro p{color:#99848f;margin:0;font-size:14px}.little-note{font-size:15px;transform:rotate(8deg);line-height:1.5;text-align:center;color:#bb93a1;margin-right:25px}.little-note b{font-weight:500}.studio{display:grid;grid-template-columns:210px minmax(350px,1fr) 244px;gap:24px;align-items:start}.scenes-panel,.colors-panel{padding:18px 0}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading h2{font-family:Fredoka,'Trebuchet MS',sans-serif;font-size:19px;font-weight:500;margin:0}.panel-heading>span{background:#f4e9ed;color:#b695a5;padding:4px 7px;border-radius:7px;font-size:10px}.colors-panel .panel-heading>span{background:none;font-size:23px;color:#daaebc;padding:0}.panel-subtitle{font-size:12px;color:#a48e9a;margin:8px 0 21px}.scene-list{display:flex;flex-direction:column;gap:12px}.scene-card{display:flex;align-items:center;text-align:left;gap:11px;border:1.5px solid #ecdfe5;border-radius:14px;padding:10px;background:#fffcfa;position:relative;min-height:85px;width:100%}.scene-card.active{border:2px solid #df81a6;background:#fff0f6;box-shadow:0 3px 0 #f5dce7}.scene-card .thumb{height:59px;width:59px;flex-shrink:0;overflow:hidden;background:white;border-radius:9px;display:flex;align-items:center}.scene-card img{width:100%}.scene-card .label{font-size:12px;font-weight:700;line-height:1.5}.scene-card .label small{font-weight:400;display:block;color:#a38b98;font-size:10px}.scene-card .check{display:none;position:absolute;right:6px;top:5px;border-radius:50%;background:#dc73a0;color:white;font-size:9px;width:14px;height:14px;text-align:center}.scene-card.active .check{display:block}.sidebar-note{margin-top:26px;padding-top:20px;border-top:1px dashed #e6d5dc;display:flex;gap:10px;font-size:11px;line-height:1.8;color:#a38b98}.sidebar-note>span{font-size:28px;color:#d7a6b8}.sidebar-note p{margin:0}.sidebar-note b{font-weight:400}.workspace{border:1px solid #ecdfdf;background:#fff;border-radius:21px;overflow:hidden;box-shadow:0 7px 24px #98736108}.canvas-heading{display:flex;justify-content:space-between;align-items:center;padding:17px 21px;border-bottom:1px solid #f1e9e8;gap:6px}.canvas-heading>div{display:flex;align-items:center;gap:9px}.canvas-heading h2{font-size:13px;font-weight:600;margin:0}.canvas-heading>div>span{color:#a6b18a;font-size:21px}.saved-status{font-size:10px;color:#9ba38e;white-space:nowrap}.paper-wrap{padding:18px 22px 0;background-color:#f6f3ef;background-image:radial-gradient(#e7ded8 .8px,transparent .8px);background-size:12px 12px}.paper{margin:auto;position:relative;background:white;border-radius:5px;box-shadow:0 3px 8px #6f584718;max-width:650px;aspect-ratio:1;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.paper-caption{display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;font-size:11px;color:#a29188;text-align:center}.paper-caption>span:first-child{font-size:21px;color:#d2ae77}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:13px 18px;justify-content:center;background:white}.tool-group{display:flex;gap:4px}.tool{border:0;background:transparent;padding:10px 12px;border-radius:10px;font-size:11px;display:flex;gap:6px;align-items:center}.tool>span{font-size:21px;line-height:20px}.tool.active{background:#fbe6f0;color:#c94882;font-weight:700}.tool-divider{height:24px;width:1px;background:var(--line);margin:0 3px}.history-tools{display:flex;gap:3px}.icon-button{border:0;background:transparent;border-radius:10px;font-size:25px;width:37px;height:38px}.icon-button:hover{background:#f9f1f4}.size-control{font-size:11px;align-items:center;gap:7px}.size-control:not([hidden]){display:flex}input[type=range]{width:85px;accent-color:var(--pink)}.palette-tabs{display:flex;padding:4px;background:#f0e8e8;border-radius:10px;margin-bottom:19px;gap:2px}.palette-tabs button{flex:1;background:none;border:0;font-size:10px;padding:8px 3px;border-radius:7px;color:#9e8994}.palette-tabs .active{background:white;box-shadow:0 2px 5px #b494a011;color:#af6280;font-weight:700}.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 9px}.swatch{aspect-ratio:1;border:0;border-radius:50%;background:var(--swatch);position:relative;box-shadow:inset 0 -3px 0 #0000000e;max-height:42px}.swatch.active{outline:2px solid var(--swatch);outline-offset:4px}.swatch.active:after{content:'✓';color:var(--tick);font-size:17px;font-weight:700;position:absolute;inset:0;display:grid;place-items:center}.chosen-color{display:flex;align-items:center;gap:10px;border:1px solid #ecdee4;border-radius:12px;padding:12px 10px;margin-top:23px}.chosen-color>span{height:31px;width:31px;border-radius:9px;background:var(--chosen);border:1px solid #00000005;flex-shrink:0}.chosen-color small{font-size:7px;letter-spacing:1px;display:block;color:#af9aa4;margin-bottom:3px}.chosen-color b{font-size:11px}.custom-color{position:relative;margin-left:auto;font-size:22px;color:#b9a0ac;overflow:hidden;width:27px;height:30px;cursor:pointer}.custom-color input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.tip-card{position:relative;overflow:hidden;margin-top:24px;padding:22px;background:#f7e9ee;border-radius:15px;min-height:210px}.tip-card>span{position:absolute;right:23px;top:18px;font-size:30px;color:#d9a4ba}.tip-card h3{font-family:Fredoka,'Trebuchet MS',sans-serif;font-weight:400;font-size:20px;line-height:1.3;margin:13px 0 11px;color:#ab6680}.tip-card p{font-size:11px;line-height:1.9;color:#ab8292;margin:0}.mini-rainbow{font-size:105px;line-height:1;position:absolute;right:-7px;bottom:-30px;color:#e0b3c1;text-shadow:0 -7px #f0d3ad,0 -14px #d7c8de;transform:rotate(-15deg)}.local-note{font-size:10px;line-height:1.8;text-align:center;color:#ae99a3;margin-top:20px}footer{display:flex;justify-content:space-between;font-size:10px;color:#bba6ad;padding:24px 0 0}footer b{color:#c99cb0;font-size:17px;margin-left:8px}.loading{position:absolute;inset:0;background:#fff9fcee;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:#bd708f;font-size:14px}.loading[hidden]{display:none}.loading span{font-size:48px;animation:spin 5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#654955;color:white;padding:13px 22px;border-radius:20px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:30;text-align:center;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #efdae3;border-radius:25px;text-align:center;padding:30px;box-shadow:0 20px 80px #5c294933;max-width:calc(100vw - 32px);color:var(--ink)}dialog::backdrop{background:#57354b50;backdrop-filter:blur(4px)}dialog h2{font-family:Fredoka,sans-serif;font-weight:500}dialog p{font-size:13px;line-height:1.8;color:#9c818d}dialog>div{display:flex;gap:9px;justify-content:center;margin-top:20px}dialog button{border:0;border-radius:12px;padding:13px;background:#f5e9ef}dialog #confirmReset{background:#d75c91;color:white}.dialog-flower{font-size:45px;color:#da82a6}
@media(min-width:1450px){.studio{grid-template-columns:235px minmax(350px,1fr) 260px;gap:32px}.scene-card{min-height:104px}.scene-card .thumb{width:75px;height:75px}.scene-card .label{font-size:14px}.palette{gap:15px}.paper{max-width:690px}}
@media(max-width:1120px){main{padding:25px 3% 16px}.topbar{padding:0 3%}.studio{grid-template-columns:170px minmax(330px,1fr) 190px;gap:16px}.palette{gap:10px 8px}.scene-card{padding:7px;gap:8px}.scene-card .thumb{width:43px;height:55px}.scene-card .label{font-size:11px}.colors-panel .panel-heading h2{font-size:16px}.tool{padding:8px}.toolbar{gap:3px;padding:10px 7px}.tip-card{padding:18px}.header-note{display:none}.canvas-heading{padding:14px}.saved-status{font-size:9px}.paper-wrap{padding:12px 12px 0}}
@media(max-width:880px){.studio{grid-template-columns:minmax(0,1fr) 210px;gap:18px}.scenes-panel{grid-column:1/-1;padding:0}.scene-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.scenes-panel .panel-heading,.scenes-panel .panel-subtitle,.sidebar-note{display:none}.scene-card{min-height:74px}.scene-card .thumb{height:52px;width:48px}.colors-panel{padding-top:9px}.intro{margin-bottom:22px}.little-note{display:none}.workspace{min-width:0}.intro p{font-size:12px}.paper-caption{font-size:10px}}
@media(max-width:600px){.topbar{height:77px;padding:0 16px;gap:10px}.brand{font-size:19px;gap:8px}.brand-icon{font-size:40px}.tiny-star{font-size:15px}.save-button{font-size:11px;padding:10px 12px;border-radius:10px}.save-button span{font-size:16px;margin-right:4px}main{padding:24px 14px 18px}.eyebrow{font-size:8px;letter-spacing:1.7px}h1{font-size:26px;line-height:1.15;margin:8px 0}h1>span{font-size:21px;margin-left:7px}.intro p{font-size:11px;line-height:1.6}.studio{display:flex;flex-direction:column;gap:15px}.scenes-panel,.workspace,.colors-panel{width:100%}.scene-list{gap:7px}.scene-card{display:flex;flex-direction:column;padding:6px 3px 8px;gap:5px;min-height:0;border-radius:12px;text-align:center}.scene-card .thumb{width:100%;height:auto;aspect-ratio:1.6;justify-content:center;background:white}.scene-card .thumb img{width:87%}.scene-card .label{font-size:10px;line-height:1.3}.scene-card .label small{display:none}.scene-card.active{box-shadow:none}.workspace{border-radius:16px}.canvas-heading{padding:11px 12px}.canvas-heading h2{font-size:11px}.saved-status{font-size:8px}.paper-wrap{padding:8px 8px 0}.paper-caption{min-height:33px;font-size:9px;gap:5px}.paper-caption>span:first-child{font-size:16px}.toolbar{padding:8px 6px;gap:6px;justify-content:space-between}.tool{font-size:10px;padding:7px 8px;gap:4px}.tool>span{font-size:19px}.icon-button{font-size:24px;width:31px;height:34px}.tool-divider{display:none}.size-control{flex-basis:100%;justify-content:center;padding-top:3px}.colors-panel{padding:7px 3px 0}.colors-panel .panel-heading h2{font-size:19px}.colors-panel .panel-subtitle{display:none}.palette-tabs{margin:14px 0 17px;max-width:300px}.palette-tabs button{font-size:11px;padding:9px 5px}.palette{grid-template-columns:repeat(10,1fr);gap:11px 8px}.swatch{max-height:none;min-width:0}.swatch.active{outline-offset:3px}.swatch.active:after{font-size:13px}.chosen-color{margin-top:17px;padding:10px 12px}.chosen-color small{font-size:8px}.chosen-color b{font-size:12px}.tip-card{display:none}.local-note{margin:12px 0 0}.intro{margin-bottom:19px}footer{font-size:9px;padding-top:24px}.swatch{min-height:22px}.size-control input{width:140px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:600px){.palette{grid-template-columns:repeat(7,1fr);gap:12px 10px}.swatch{min-height:32px;max-width:44px}.swatch.active:after{font-size:16px}}