@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#343243;background:#f5eee5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 0 70%,#f2e1d7,transparent 55%),radial-gradient(ellipse at 100% 0,#e9e2f6,transparent 45%);min-height:100vh}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;border:0;background:#f1edf7;color:#4b4163;border-radius:12px;padding:11px 15px;font-weight:600;transition:background .15s,transform .15s}button:hover{background:#e6ddf6}button:active{transform:translateY(1px)}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ad8cee;outline-offset:4px}.studio{max-width:1390px;margin:auto;padding:24px 40px}header{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #ded5cd;padding-bottom:23px}.home{text-decoration:none;color:#514664;font-size:22px;display:flex;gap:18px;align-items:center}.home span{font-family:Outfit,sans-serif;font-size:18px}.home strong{color:#8563c6}.tag,.label,.eyebrow,.idea-label{font-size:10px;letter-spacing:1.8px;font-weight:700}.tag{color:#8e8296}.primary{background:#7755bb;color:white;box-shadow:0 4px 0 #5e4198}.primary:hover{background:#6847aa}.intro{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:34px 0 28px}.eyebrow{color:#987c67;margin:0 0 12px}h1{font:600 clamp(32px,4vw,53px)/1.1 Outfit,sans-serif;letter-spacing:-2px;margin:0;color:#3e354b}h1 em{font-style:normal;color:#865fc5}h1 span{color:#edab4e;display:inline-block;font-size:40px;margin-left:18px}.intro p:not(.eyebrow){color:#8a7b8a;font-size:14px;margin:13px 0 0}.idea{background:#fff8e8;border:1px solid #e8dbba;border-radius:17px;padding:16px 22px;max-width:350px;transform:rotate(1deg);box-shadow:3px 4px 0 #ece0ce}.idea-label{color:#ac8b4d;display:block}.idea strong{display:block;font-family:Outfit,sans-serif;font-size:19px;margin:8px 0}.idea button{background:none;padding:0;color:#9e7b43;font-size:12px}.workspace{display:grid;grid-template-columns:205px 1fr;gap:20px}.toolbox{background:#fffcf8;border:1px solid #e7ddd5;border-radius:20px;padding:22px 18px;box-shadow:0 6px 15px #7e5d3310}.label{color:#9b8c9d;margin:0 0 15px;display:block}.tools{display:grid;gap:6px}.tools button{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;font-size:13px;padding:11px}.tools button span{font-size:23px;width:28px;text-align:center;line-height:1}.tools button[aria-pressed=true]{background:#ede5fa;color:#7754ba;box-shadow:inset 3px 0 #8b65cd}.divider{height:1px;background:#eee7e0;margin:21px 0}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.swatch{width:27px;height:27px;padding:0;border-radius:50%;background:var(--color);border:3px solid #fff;box-shadow:0 0 0 1px #0001}.swatch:hover{background:var(--color);transform:scale(1.1)}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #795abd}.custom{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#9a8b9b;margin-top:16px}.custom input{width:31px;height:28px;padding:2px;border:1px solid #e9dfd6;background:white;border-radius:7px;cursor:pointer}.size-label{display:flex;justify-content:space-between}output{color:#8057c7}input[type=range]{width:100%;accent-color:#8964c9;cursor:pointer}.brush-preview{display:flex;gap:12px;align-items:center;min-height:54px;color:#a599a7;font-size:10px;line-height:1.6}.brush-preview i{display:block;width:8px;height:8px;background:#7656cf;border-radius:50%;flex-shrink:0}.mirror{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:18px;font-size:12px;width:100%;padding:12px 9px}.mirror span{font-size:10px;color:#94869f;margin-left:auto}.mirror[aria-pressed=true]{background:#ddf1e8;color:#357c65}.paper-area{min-width:0}.paper-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 2px 13px}.paper-top>span{font-size:10px;font-weight:700;letter-spacing:2px;color:#9a889e}.paper-top i{display:inline-block;width:6px;height:6px;background:#96b6a5;border-radius:50%;margin-right:7px}.paper-top>div{display:flex;gap:6px}.paper-top button{font-size:21px;padding:4px 12px;background:#fff9;min-height:34px}.paper-top #clear{font-size:11px;margin-left:7px;padding:8px 12px}.paper{position:relative;background:#fff;box-shadow:0 12px 24px #63503b0c,0 3px 5px #63503b09;border:1px solid #e7dfd7;border-radius:8px;overflow:hidden}canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;touch-action:none;cursor:crosshair}.paper-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;color:#b6a7bd}.paper-hint[hidden]{display:none}.paper-hint span{font-size:65px;color:#d4c2ed;line-height:1}.paper-hint strong{font:500 24px Outfit,sans-serif;margin-top:15px}.paper-hint p{font-size:12px}.paper-area footer{display:flex;justify-content:space-between;gap:15px;margin-top:16px;color:#a2939e;font-size:10px}.footnote{text-align:center;font-size:10px;color:#a89aa5;margin:23px 0 4px}dialog{border:1px solid #e8dfd5;border-radius:22px;padding:30px;max-width:440px;width:calc(100% - 32px);color:#514664;background:#fffcf7;box-shadow:0 20px 80px #34233a33}dialog::backdrop{background:#3b2e4f66}dialog h2{font:600 25px Outfit,sans-serif}dialog p{line-height:1.7;font-size:14px}dialog form>div{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}@media(min-width:1600px){.studio{padding-top:40px}.intro{margin:45px 0}}@media(max-width:850px){.studio{padding:18px}.tag{display:none}.intro{margin:27px 0;gap:20px}.idea{max-width:270px}.idea strong{font-size:16px}.workspace{grid-template-columns:170px 1fr;gap:12px}.toolbox{padding:18px 12px}.palette{gap:9px}.paper-area footer span:last-child{display:none}}@media(max-width:600px){.studio{padding:15px 12px}header{padding-bottom:17px}.home{gap:8px}.home span{font-size:15px}header .primary{font-size:11px;padding:10px 12px}.intro{flex-direction:column;align-items:stretch;margin:24px 0 20px;gap:18px}.intro h1{font-size:38px}.intro p:not(.eyebrow){margin-top:8px}.idea{max-width:none;transform:none;padding:13px 16px;position:relative}.idea strong{font-size:15px;max-width:72%;margin-bottom:0}.idea button{position:absolute;right:12px;bottom:14px;font-size:10px}.idea-label{font-size:8px}.workspace{display:flex;flex-direction:column-reverse;gap:14px}.paper-top{padding-bottom:9px}.paper-area footer{margin-top:10px}.paper-top>span{letter-spacing:1px;font-size:9px}.toolbox{display:grid;grid-template-columns:1fr 1fr;gap:14px 17px;border-radius:16px;padding:15px}.toolbox>.label,.divider,.brush-preview{display:none}.tools{grid-column:1/-1;grid-template-columns:repeat(4,1fr);gap:4px}.tools button{flex-direction:column;gap:5px;padding:9px 3px;font-size:10px}.tools button[aria-pressed=true]{box-shadow:inset 0 -3px #8b65cd}.palette{grid-row:2/4;align-content:center;gap:10px}.swatch{justify-self:center;width:28px;height:28px}.custom{margin:0;font-size:10px}.size-label{display:flex!important;font-size:8px;letter-spacing:1px;margin:0;align-items:center}input[type=range]{margin:0}.mirror{grid-column:1/-1;margin:0;justify-content:center;padding:10px}.mirror span{margin-left:6px}.footnote{font-size:9px;line-height:1.6;margin-top:17px}}
/* The artist's second sketchbook: imagegen artwork, shapes, stickers and a local gallery. */
header .tag{margin-left:auto}header .gallery-link{font-size:12px;background:#fff9;white-space:nowrap}#galleryCount{display:inline-grid;place-items:center;background:#e7dcf7;border-radius:50%;width:19px;height:19px;margin-left:4px;color:#7955b8}.intro-title{display:flex;align-items:center;gap:18px}.mascot{width:118px;height:118px;object-fit:contain;filter:drop-shadow(0 6px 7px #9374481a)}.intro{margin-top:25px;margin-bottom:24px}.intro h1{font-size:clamp(32px,3.4vw,48px)}.intro h1 span{font-size:31px}.intro .eyebrow{font-size:9px}.intro .idea{min-width:270px}.toolbox{padding-top:19px}.tools{gap:4px}.tools button{padding:9px 11px}.shapes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.shapes button{font-size:26px;line-height:1;padding:7px;background:#f6f1f9}.shapes button[aria-pressed=true]{color:#744cbb;background:#e5d8f8;box-shadow:inset 0 -2px #8b65cd}.divider{margin:17px 0}.paper.dotted{background-image:radial-gradient(#afa0bc66 1px,transparent 1px);background-size:2% 3%}.paper #preview{position:absolute;inset:0;pointer-events:none}.paper-hint img{width:110px;height:110px;object-fit:contain;opacity:.75;filter:drop-shadow(0 6px 8px #79552d0c)}.paper-hint strong{margin-top:8px;color:#ab96bb}.paper-hint p{margin-top:8px}.creative-bar{display:flex;justify-content:space-between;gap:16px;background:#fffaf4;border:1px solid #e8ddd2;border-radius:0 0 14px 14px;padding:15px 17px;margin-top:8px}.mini-label{font-size:8px;font-weight:700;letter-spacing:1.4px;color:#a18599;display:block;margin:0 0 8px}.stickers{display:flex;gap:7px}.sticker{padding:3px;background:#f5f0f8;border:1px solid transparent;border-radius:10px;width:43px;height:43px}.sticker:hover{background:#ebe2f5;transform:translateY(-2px)}.sticker[aria-pressed=true]{background:#e7d7fa;border-color:#a780db;box-shadow:0 0 0 2px #ddc9f4}.sticker-art{display:block;width:100%;height:100%;background-image:url('assets/stickers-v2.webp');background-size:300% 200%;background-repeat:no-repeat}.paper-section{display:flex;align-items:center;flex-wrap:wrap;gap:7px;max-width:275px}.paper-section .mini-label{flex-basis:100%;margin-bottom:0}.paper-section select{font:500 11px 'DM Sans',sans-serif;color:#7f6c91;border:1px solid #e6d9eb;background:#fff;border-radius:9px;padding:8px;cursor:pointer;max-width:140px;min-height:34px}.paper-section #grid{font-size:10px;padding:9px;min-height:34px}.paper-section #grid[aria-pressed=true]{background:#dfd2f3;color:#6d47a9}.studio-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0 0;gap:15px}.studio-bottom p{font:500 17px Outfit,sans-serif;color:#ab95ab;margin:0}.studio-bottom .primary{font-size:12px;padding:12px 20px}.gallery-link{margin-left:3px}.gallery-dialog{max-width:850px;padding:28px}.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.gallery-head h2{margin:0;font-size:31px}.gallery-head .eyebrow{font-size:9px;margin-bottom:5px}.gallery-head button{padding:8px 12px;font-size:17px}.gallery-note{color:#9c859d;font-size:12px!important;margin:15px 0 20px}.gallery-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.gallery-card{min-width:0;border:1px solid #e5d9e7;background:#fff;border-radius:13px;overflow:hidden}.gallery-open{background:white;width:100%;padding:0;text-align:left;border-radius:0}.gallery-open img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-bottom:1px solid #eee5ef}.gallery-open strong{display:block;padding:10px 12px;font-size:13px}.gallery-delete{margin:0 0 10px 10px;padding:6px 10px;font-size:10px;color:#ac6b7a;background:#fbf1f4}.gallery-empty{grid-column:1/-1;padding:45px 25px;border:2px dashed #decee9;border-radius:15px;text-align:center;color:#ab8fb6;font-size:14px;line-height:1.8}.gallery-dialog #galleryStatus{font-size:12px;color:#a35e76;margin-bottom:0}#saveGallery.saved{animation:saved-pop .6s ease}@keyframes saved-pop{50%{transform:translateY(-4px);background:#5b9b7d;box-shadow:0 4px 0 #397b5c}}
@media(max-width:1100px){.intro-title{gap:10px}.mascot{width:90px;height:90px}.intro h1{font-size:37px}.intro h1 span{display:none}.intro .idea{min-width:240px;padding:14px 17px}.intro .idea strong{font-size:16px}.creative-bar{gap:12px;padding:12px}.sticker{width:36px;height:36px}.stickers{gap:4px}.paper-section{max-width:205px}.paper-section select{max-width:115px;font-size:10px}.paper-section #grid{font-size:9px;padding:8px}.studio-bottom{padding-top:19px}}
@media(max-width:850px){header{flex-wrap:wrap}header .gallery-link{margin-left:auto}header .primary{font-size:12px}.intro-title{gap:5px}.mascot{width:70px;height:85px}.intro h1{font-size:31px;letter-spacing:-1px}.intro .eyebrow{font-size:7px;letter-spacing:1.1px}.intro p:not(.eyebrow){font-size:12px}.intro .idea{max-width:230px;min-width:210px}.intro .idea strong{font-size:14px}.intro .idea-label{font-size:8px}.creative-bar{flex-wrap:wrap}.sticker-section{width:100%}.stickers{justify-content:space-between}.sticker{width:40px;height:40px}.paper-section{max-width:none;flex-wrap:nowrap;gap:8px;width:100%;border-top:1px solid #eee2eb;padding-top:11px}.paper-section .mini-label{flex-basis:auto;margin:0 auto 0 0;font-size:7px}.studio-bottom p{font-size:14px}.gallery-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){header{gap:9px}.home{font-size:18px}.home span{font-size:13px}header .gallery-link{font-size:10px;padding:9px 10px}header .primary{font-size:10px;padding:10px}#galleryCount{display:none}.intro{margin:20px 0 18px;gap:14px}.intro-title{gap:10px}.mascot{width:80px;height:89px}.intro h1{font-size:36px;letter-spacing:-1.4px}.intro .eyebrow{font-size:7px;letter-spacing:1.2px;margin-bottom:9px}.intro p:not(.eyebrow){font-size:11px;margin-top:8px}.intro .idea{max-width:none;min-width:0;padding:13px 15px}.intro .idea strong{font-size:14px}.idea button{font-size:10px}.paper-hint img{width:72px;height:72px}.paper-hint strong{font-size:19px;margin-top:4px}.paper-hint p{font-size:10px}.workspace{gap:13px}.toolbox{grid-template-columns:1fr 1fr;gap:12px 17px;padding:13px 15px}.toolbox .tools{grid-column:1/-1;grid-row:1;grid-template-columns:repeat(4,1fr)}.toolbox .tools button{padding:9px 3px}.toolbox .shapes{grid-column:1/-1;grid-row:2;margin:0;gap:8px}.shapes button{font-size:23px;padding:6px}.toolbox .palette{grid-column:1;grid-row:3/6;gap:10px;align-content:center}.toolbox .custom{grid-column:2;grid-row:3}.toolbox .size-label{grid-column:2;grid-row:4}.toolbox input[type=range]{grid-column:2;grid-row:5}.toolbox .mirror{grid-column:1/-1;grid-row:6;margin:0}.creative-bar{padding:11px 12px;margin-top:7px;gap:11px}.mini-label{font-size:7px;margin-bottom:7px}.sticker{width:41px;height:41px}.paper-section{padding-top:10px}.paper-section select{max-width:130px}.paper-area footer{font-size:9px}.studio-bottom{padding-top:18px;align-items:center}.studio-bottom p{font-size:12px;max-width:140px;line-height:1.5}.studio-bottom .primary{font-size:11px;padding:11px 14px}.footnote{margin-top:16px}.gallery-dialog{padding:20px 15px;max-height:90dvh;overflow:auto}.gallery-head h2{font-size:25px}.gallery-head .eyebrow{font-size:7px}.gallery-items{gap:10px}.gallery-note{font-size:11px!important}.gallery-empty{padding:30px 18px;font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}