/* The approved larger painting desk; styles stay within the colouring section and picture chooser. */
#colour.homepage-colouring{padding:36px 3% 56px;background:#eefaf7;background-image:radial-gradient(#d0eae4 1px,transparent 1px);background-size:24px 24px;border-bottom:6px solid white;scroll-margin-top:18px;color:#163e55;font:600 16px/1.4 Adventure,'Trebuchet MS',sans-serif}
#colour .bigger-paint-wrap{max-width:1500px;margin:auto}
#colour *,#picture-picker *{box-sizing:border-box}
#colour button,#picture-picker button,#colour a,#picture-picker a{-webkit-tap-highlight-color:transparent}
#colour button,#picture-picker button{font:800 16px/1.2 Adventure,'Trebuchet MS',sans-serif;cursor:pointer;touch-action:manipulation}
#colour button:focus-visible,#picture-picker button:focus-visible,#colour a:focus-visible,#picture-picker a:focus-visible{outline:4px solid #9c63c9;outline-offset:4px}
#colour button:disabled,#picture-picker button:disabled{cursor:default;opacity:.42}
#colour h1,#picture-picker h1,#colour h2,#picture-picker h2,#colour h3,#picture-picker h3,#colour p,#picture-picker p{margin:0}
#colour h1,#picture-picker h1,#colour h2,#picture-picker h2,#colour h3,#picture-picker h3{font-family:Clubhouse,'Trebuchet MS',sans-serif;font-weight:800;line-height:1.05}
#colour a,#picture-picker a{color:inherit;text-decoration:none}
#colour .paint-section-intro{text-align:center;margin:0 0 20px}
#colour .paint-section-intro>p{color:#008c89;font-size:10px;font-weight:900;letter-spacing:1.7px;margin-bottom:5px}
#colour .paint-section-intro h1{font-size:42px}
#colour .paint-section-intro>span{display:block;color:#5e7681;font-size:15px;margin-top:7px}
#colour .colour-studio{background:#fff7df;border:5px solid white;border-radius:30px;box-shadow:0 8px 0 #d7dfc3;padding:20px 22px 13px}
#colour .desk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
#colour .desk-toolbar p{font-size:9px;letter-spacing:1.1px;color:#008c89;font-weight:900;margin-bottom:3px}
#colour .desk-toolbar h2{font-size:33px}
#colour .desk-actions{display:flex;gap:12px}
#colour .action-button,#picture-picker .action-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:60px;padding:12px 20px;border:2px solid #c7dfd4;border-radius:17px;background:white;color:#176a69;box-shadow:0 4px 0 #d5e3d9}
#colour .action-button>span,#picture-picker .action-button>span{font-size:28px}
#colour .big-button{color:white;background:#008c89;border-color:#008c89;box-shadow:0 4px 0 #006b6a}
#colour .painting-workspace{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;align-items:stretch}
#colour .drawing-panel{min-width:0;padding:12px;background:white;border:3px solid white;border-radius:23px;box-shadow:0 4px 0 #d2e3db}
#colour .canvas-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 7px 10px}
#colour .canvas-heading h3{font-size:25px}
#colour .canvas-heading button{min-height:48px;padding:8px 14px;background:#eff9f5;color:#167c77;border:2px solid #d8eae3;border-radius:14px;font-size:14px}
#colour .canvas-heading button span{font-size:21px}
#colour .art-canvas{height:520px;border:2px solid #e0ece7;border-radius:17px;overflow:auto;background:#fff;overscroll-behavior:contain;touch-action:pan-x pan-y}
#colour .art-canvas>svg{display:block;width:100%;height:100%;max-width:none;touch-action:manipulation}
#colour .art-canvas[data-zoom="2"]>svg{width:200%;height:200%}
#colour .paint-part{cursor:pointer;transition:fill .12s}
#colour .paint-part:focus-visible{outline:none;stroke:#d73d82;stroke-width:5;filter:drop-shadow(0 0 2px white)}
#colour .canvas-hint{text-align:center;font-size:13px;color:#68818a;margin-top:8px}
#colour .canvas-hint span{color:#e2aa36}
#colour .paint-box{min-width:0;border-radius:23px;padding:16px 13px;background:#dcf1e9;border:3px solid white}
#colour .paint-box h3{font-size:23px}
#colour .selected-colour{display:flex;align-items:center;gap:5px;font-size:12px;color:#58716e;margin-top:6px;margin-bottom:14px}
#colour #current-colour-dot{width:15px;height:15px;display:block;background:#ed6385;border:1px solid #1f4c5544;border-radius:50%}
#colour .colour-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#colour .paint-swatch{min-width:0;min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:7px 3px;border:2px solid #c4dacf;border-radius:16px;background:white;color:#375a66;box-shadow:0 3px 0 #c3d8ca}
#colour .paint-swatch>span{width:39px;height:39px;border-radius:50%;border:1px solid #29465a33;box-shadow:inset 0 0 0 3px #ffffff66}
#colour .paint-swatch strong{font-size:12px;font-weight:900}
#colour .paint-swatch[aria-pressed=true]{background:#fff0f7;border:3px solid #008c89;box-shadow:0 3px 0 #73afa0}
#colour .paint-swatch[aria-pressed=true]>span{outline:2px solid #008c89;outline-offset:2px}
#colour .tool-panel{display:grid;gap:10px;margin-top:17px}
#colour .studio-tool{min-height:59px;display:flex;align-items:center;justify-content:center;gap:9px;border:2px solid #b9d5c7;border-radius:16px;background:white;color:#316960;box-shadow:0 3px 0 #bcd4c3;font-size:15px}
#colour .studio-tool>span{font-size:27px}
#colour .paint-status{font-size:12px;color:#5e7780;min-height:18px;margin:12px 5px 0}
#picture-picker{color:#163e55;font-family:Adventure,sans-serif;width:min(850px,94vw);max-height:90dvh;overflow:auto;border:5px solid white;border-radius:28px;padding:22px;background:#fff7df;box-shadow:0 8px 0 #789c8844}
#picture-picker::backdrop{background:#163e557d;backdrop-filter:blur(3px)}
#picture-picker .picker-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}
#picture-picker .picker-heading p{font-size:10px;letter-spacing:1.1px;color:#008c89;font-weight:900;margin-bottom:4px}
#picture-picker .picker-heading h2{font-size:32px}
#picture-picker .picture-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
#picture-picker .picture-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:150px;min-width:0;padding:10px;border:3px solid #e6e4cd;border-radius:20px;background:white;color:#254d63}
#picture-picker .picture-choice svg{width:100%;height:100px;display:block;pointer-events:none}
#picture-picker .picture-choice strong{font-size:16px}
#picture-picker .picture-choice[aria-pressed=true]{border-color:#008c89;background:#dcf1e9}
#colour .colour-studio.is-big{position:fixed;inset:0;z-index:100;border-radius:0;overflow:auto;border-width:3px;padding:13px 20px;box-shadow:none}
#colour .is-big .desk-toolbar{margin-bottom:12px}
#colour .is-big .art-canvas{height:calc(100dvh - 206px);min-height:330px}
#colour .is-big .paint-status{margin-top:9px}
#colour .is-big .paint-box{align-self:start}
#colour .is-big .paint-swatch{min-height:76px}
#colour .is-big .tool-panel{margin-top:12px}
#colour .is-big .studio-tool{min-height:56px}
body.painting-big{overflow:hidden}
@media(min-width:1500px){#colour .art-canvas{height:600px}}
@media(max-width:1000px){#colour .colour-studio{padding:17px 15px 12px}
#colour .painting-workspace{grid-template-columns:minmax(0,1fr) 185px;gap:12px}
#colour .art-canvas{height:480px}
#colour .paint-box{padding:13px 10px}
#colour .paint-swatch{min-height:76px}
#colour .paint-swatch>span{width:35px;height:35px}
#colour .desk-toolbar h2{font-size:30px}
#colour .action-button,#picture-picker .action-button{padding:11px 15px}
#colour .canvas-heading h3{font-size:23px}
#colour .canvas-heading button{padding:8px;font-size:12px}
#colour .paint-box h3{font-size:21px}}
@media(max-width:680px){#colour .paint-section-intro{margin-bottom:16px}
#colour .paint-section-intro h1{font-size:34px}
#colour .paint-section-intro>span{font-size:13px}
#colour .colour-studio{border-width:3px;padding:13px 10px;border-radius:23px}
#colour .desk-toolbar{align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
#colour .desk-toolbar>div:first-child{width:100%}
#colour .desk-toolbar h2{font-size:29px}
#colour .desk-toolbar p{font-size:8px}
#colour .desk-actions{width:100%;gap:9px}
#colour .action-button,#picture-picker .action-button{min-height:58px;padding:10px 12px;font-size:14px;flex:1;gap:6px;border-radius:14px}
#colour .action-button>span,#picture-picker .action-button>span{font-size:24px}
#colour .painting-workspace{grid-template-columns:1fr;gap:15px}
#colour .drawing-panel{padding:6px;border-radius:18px}
#colour .canvas-heading{margin:0 2px 8px;gap:6px}
#colour .canvas-heading h3{font-size:21px}
#colour .canvas-heading button{min-height:48px;font-size:12px;padding:8px}
#colour .art-canvas{height:auto;aspect-ratio:460/340;border-radius:12px}
#colour .art-canvas>svg{width:100%;height:100%;aspect-ratio:460/340}
#colour .art-canvas[data-zoom="2"]>svg{width:200%;height:200%}
#colour .canvas-hint{font-size:11px;min-height:17px}
#colour .paint-box{padding:12px 9px;border-radius:18px}
#colour .paint-box h3{font-size:23px}
#colour .selected-colour{font-size:12px;margin:6px 0 13px}
#colour .colour-palette{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 7px}
#colour .paint-swatch{min-height:79px;border-radius:14px}
#colour .paint-swatch>span{width:36px;height:36px}
#colour .paint-swatch strong{font-size:11px}
#colour .tool-panel{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
#colour .studio-tool{min-height:60px;font-size:14px}
#colour .paint-status{margin:14px 3px 0;font-size:11px;min-height:31px}
#picture-picker .picker-heading h2{font-size:26px}
#picture-picker .picker-heading p{font-size:8px}
#picture-picker .picker-heading .action-button{flex:0 0 auto;padding:10px 15px}
#picture-picker .picture-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
#picture-picker .picture-choice{min-height:130px;gap:3px;padding:8px}
#picture-picker .picture-choice svg{height:84px}
#picture-picker .picture-choice strong{font-size:13px}
#picture-picker{padding:15px;border-width:3px}
#colour .colour-studio.is-big{padding:10px}
#colour .is-big .desk-toolbar>div:first-child{display:none}
#colour .is-big .art-canvas{height:auto;min-height:0;aspect-ratio:460/340}
#colour .is-big .paint-swatch{min-height:76px}
#colour .is-big .paint-box{align-self:stretch}
#colour .is-big .paint-status{min-height:30px}}
@media(min-width:681px) and (max-width:1000px){#colour .painting-workspace{grid-template-columns:1fr}
#colour .art-canvas{height:480px}
#colour .paint-box{padding:13px}
#colour .colour-palette{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
#colour .paint-swatch{min-height:78px}
#colour .paint-swatch strong{font-size:11px}
#colour .tool-panel{grid-template-columns:1fr 1fr;margin-top:13px}
#colour .studio-tool{min-height:58px}
#colour .is-big .art-canvas{height:calc(100dvh - 410px);min-height:330px}
#colour .is-big .paint-box{align-self:stretch}
#colour .is-big .paint-swatch{min-height:74px}
#colour .is-big .selected-colour{margin-bottom:10px}
#colour .is-big .studio-tool{min-height:54px}}
@media(prefers-reduced-motion:reduce){#colour .paint-part{transition:none}}
#colour h1,#colour h2,#colour h3,#picture-picker h2,#picture-picker h3{letter-spacing:0}#colour .paint-section-intro h2{font-size:42px}#picture-picker{max-width:850px;font-size:16px;font-weight:600;line-height:1.4}#picture-picker p{margin:0}#picture-picker .picker-heading p{margin-bottom:4px}
@media(max-width:680px){#colour.homepage-colouring{padding:28px 2% 42px}#colour .paint-section-intro h2{font-size:34px}}