/* Step 2 extends the foundation's typography, buttons, and pastel theme. */
:root{--studio-lavender:#eee7f7;--studio-blue:#edf3fa;--studio-cream:#fffdf9;--studio-pink:#faf0f3;--studio-ink:#655078}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}input:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #7552a4;outline-offset:4px}.button{min-height:44px;justify-content:center;color:#655078;font-size:12px;line-height:1.4;cursor:pointer}.primary-button{background:#79618f;color:#fff;border-color:#79618f}.primary-button:hover{background:#654b7d;border-color:#654b7d}.studio-back{margin-bottom:25px;min-height:30px}.studio-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}.studio-heading .eyebrow{margin-bottom:10px}.studio-heading h1{font-size:clamp(32px,3.4vw,46px);margin-bottom:10px}.studio-heading p{color:var(--muted);font-size:13px;margin-bottom:0}.studio-heading>.button{flex-shrink:0}.drawing-document{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;background:#f1ecf7;border:1px solid var(--border);border-radius:16px 16px 0 0}.title-field{flex:1;min-width:0}.field-label{display:block;font-size:9px;letter-spacing:1.5px;color:#746084;font-weight:600;margin-bottom:5px}.title-field input{display:block;width:100%;min-height:35px;background:transparent;border:0;border-bottom:1px solid #cfc1dc;border-radius:0;padding:4px 2px;font-size:16px;color:#403b53}.title-field input::placeholder{color:#776984}.document-actions{display:flex;gap:9px}.document-actions .button{padding:11px 15px}.drawing-toolbar{display:flex;align-items:center;gap:18px;padding:18px 20px;background:white;border:1px solid var(--border);border-top:0;flex-wrap:wrap}.tool-group{display:flex;gap:5px}.tool-group .button{gap:6px;padding:10px 12px;border-color:transparent;background:#f7f5fa}.tool-group .button[aria-pressed=true]{background:#eae0f3;border-color:#9273b1;color:#593d76;box-shadow:inset 0 0 0 1px #9273b1}.tool-group .button>span{font-size:20px;line-height:1}.palette{display:flex;gap:2px;flex-wrap:wrap;align-items:center}.color-swatch{width:36px;height:42px;border:0;background:transparent;position:relative;display:grid;place-items:center;border-radius:8px;padding:0}.color-swatch:before{content:'';width:25px;height:25px;border-radius:50%;background:var(--swatch);border:1px solid #403b531f}.color-swatch[aria-pressed=true]:before{outline:2px solid var(--swatch);outline-offset:3px}.color-swatch span{position:absolute;font-size:15px;color:white;opacity:0;text-shadow:0 1px 3px #403b53}.color-swatch[aria-pressed=true] span{opacity:1}.color-swatch:hover{background:#f1edf7}.brush-control{display:flex;align-items:center;gap:11px;flex:1;min-width:155px;max-width:260px;margin-left:auto}.brush-control label{font-size:11px;white-space:nowrap}.brush-control output{font-variant-numeric:tabular-nums;font-size:10px;display:inline-block;min-width:18px;margin-left:5px;color:var(--muted)}.brush-control input{accent-color:#816494;width:90px;flex:1;min-width:60px;height:32px}.brush-sample{display:block;width:26px;height:26px;position:relative;flex-shrink:0}.brush-sample:after{content:'';width:var(--brush-size);height:var(--brush-size);background:var(--swatch);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.canvas-container{background:var(--studio-cream);border:1px solid #e7e0ec;border-top:0;position:relative;overflow:hidden;box-shadow:0 5px 20px #44334d05}#drawing-canvas{display:block;width:100%;aspect-ratio:10/7;height:auto;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}#drawing-canvas[data-tool=eraser]{cursor:cell}.canvas-watermark{pointer-events:none;position:absolute;right:18px;bottom:12px;font-family:Georgia,serif;font-style:italic;font-size:11px;color:#948a9b}.canvas-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--border);border-top:0;padding:10px 15px;border-radius:0 0 16px 16px}.history-actions{display:flex;gap:5px;flex-wrap:wrap}.history-actions .button{padding:8px 12px;border-color:transparent;background:transparent}.history-actions .button:hover:enabled{background:#f0e9f7}.history-actions .clear-button{margin-left:5px;color:#9a4a66}.tool-status{font-size:10px;color:#71657c;text-align:right}.canvas-help{color:var(--muted);font-size:11px;margin:12px 0 0}.save-status,.gallery-status{font-size:12px;color:#6a547a;min-height:20px;margin:9px 0 14px}.storage-error{border:1px solid #e7bcc9;background:#fff1f4;color:#853b54;font-size:12px;border-radius:10px;padding:13px 16px;margin:12px 0}.inspiration{border:1px solid #e9e0d1;background:#fbf5e9;border-radius:15px;margin-top:25px;padding:0 21px}.inspiration summary{cursor:pointer;min-height:54px;padding:15px 0;font-size:13px;font-weight:500;color:#766146}.inspiration summary>span:first-child{font-size:21px;margin:0 9px 0 5px;vertical-align:middle;color:#9d7c44}.optional-label{font-family:Georgia,serif;font-style:italic;font-size:12px;opacity:.8;font-weight:400;margin-left:10px}.prompt-content{padding:0 0 18px 23px;display:flex;gap:20px;align-items:center;justify-content:space-between}.prompt-content p{font-family:Georgia,serif;font-size:20px;line-height:1.4;margin:0}.prompt-content .button{background:#fffaf0;border-color:#dfd0b6;white-space:nowrap}.local-note{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:14px;color:#8b749c;margin:30px 0 8px}.local-note span{font-family:'Avenir Next',Avenir,'Segoe UI',sans-serif;font-style:normal;font-size:10px;color:var(--muted);display:inline-block;margin-top:6px}.art-dialog{border:1px solid var(--border);border-radius:21px;padding:30px;max-width:440px;width:calc(100% - 36px);color:#403b53;background:#fffdfb;box-shadow:0 20px 80px #35274026}.art-dialog::backdrop{background:#40334c66;backdrop-filter:blur(4px)}.art-dialog h2{font-family:Georgia,serif;font-size:29px;font-weight:400;line-height:1.2;margin-bottom:13px}.art-dialog p{font-size:13px;color:var(--muted)}.art-dialog input{width:100%;min-height:46px;border:1px solid #d7cadf;border-radius:9px;padding:10px 12px;color:#403b53;background:#fff}.art-dialog .field-label{margin:18px 0 7px}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:26px}.danger-button{background:#a14c66;border-color:#a14c66;color:white}.danger-button:hover{background:#873e54}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.artwork-card{border:1px solid var(--border);border-radius:17px;overflow:hidden;background:white;min-width:0}.preview-button{width:100%;display:block;border:0;background:var(--studio-cream);padding:0;border-bottom:1px solid #f0eaf4;overflow:hidden}.preview-button canvas{display:block;width:100%;height:auto;aspect-ratio:10/7}.preview-button:hover{box-shadow:inset 0 0 0 3px #ab92c7}.artwork-info{padding:16px}.artwork-info h2{font-family:Georgia,serif;font-weight:400;font-size:21px;line-height:1.35;margin-bottom:5px;overflow-wrap:anywhere}.artwork-info p{font-size:10px;color:var(--muted);margin-bottom:14px}.artwork-actions{display:flex;gap:7px;flex-wrap:wrap}.artwork-actions .button{font-size:11px;padding:8px 10px;min-height:40px}.delete-link{color:#9a4a66}.gallery-empty{text-align:center;border:1px solid #e7dcf0;border-radius:22px;padding:48px 24px}.empty-art{position:relative;width:100px;margin:0 auto 25px}.empty-art img{width:100px;height:100px;transform:rotate(-10deg);border-radius:30px}.empty-art>span{position:absolute;top:-12px;right:-14px;font-size:33px;color:#a085b8}.gallery-empty h2{font-family:Georgia,serif;font-size:29px;font-weight:400;line-height:1.3;margin-bottom:13px}.gallery-empty p{font-size:13px;color:var(--muted)}
@media(min-width:1300px){.drawing-toolbar{gap:13px}.brush-control{max-width:180px}}
@media(max-width:1100px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.drawing-toolbar{gap:12px}.palette{order:3;width:100%}.brush-control{max-width:230px}}
@media(max-width:760px){.studio-heading{gap:16px;align-items:flex-start;flex-wrap:wrap}.studio-heading h1{font-size:34px}.studio-heading p{font-size:12px}.studio-heading .eyebrow{font-size:8px}.studio-heading>.button{font-size:11px}.drawing-document{gap:14px;padding:16px;flex-wrap:wrap}.title-field{flex-basis:100%}.document-actions{width:100%;justify-content:flex-end}.drawing-toolbar{padding:13px 11px;gap:9px}.tool-group .button{padding:9px 10px;font-size:11px}.brush-control{min-width:130px;gap:5px;max-width:175px}.brush-control input{width:62px}.color-swatch{width:calc(10% - 2px);min-width:27px;height:44px}.palette{width:100%;justify-content:space-between}.canvas-bottom{padding:7px 8px;gap:5px;flex-wrap:wrap}.tool-status{margin-left:auto;padding:0 8px 6px}.history-actions .button{padding:9px 10px;font-size:11px}.canvas-watermark{font-size:9px;right:10px;bottom:7px}.prompt-content{flex-wrap:wrap;gap:14px;padding-left:0}.prompt-content p{font-size:19px}.optional-label{font-size:11px;margin-left:5px}.inspiration{padding:0 17px}.gallery-grid{gap:14px}.artwork-info{padding:13px}.artwork-info h2{font-size:19px}.artwork-actions{gap:5px}.artwork-actions .button{padding:8px 9px}.art-dialog{padding:25px}.local-note span{font-size:10px}}
@media(max-width:460px){.gallery-grid{grid-template-columns:1fr}.studio-heading h1{font-size:32px}.brush-control{max-width:none;min-width:140px;flex:1}.brush-sample{display:none}.tool-group .button{padding:9px}.drawing-toolbar{column-gap:8px}.color-swatch:before{width:22px;height:22px}.studio-heading>.button{min-height:40px}.canvas-help{font-size:10px}.gallery-empty h2{font-size:26px}}