.colour-shell{max-width:1160px;margin:auto;padding:26px 24px 64px}.colour-heading{text-align:center;margin:32px auto 38px;max-width:750px}.colour-heading h1{font-family:Bree,Georgia,serif;font-weight:400;font-size:clamp(2.2rem,4.7vw,3.6rem);line-height:1.13;margin:8px 0 20px}.colour-heading .handwritten{font-size:1.6rem}.colour-heading p{line-height:1.75}.colour-heading .primary-button{margin-top:14px}.colour-catalogue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 30px}.colour-card{text-decoration:none;color:inherit;display:block;background:#a5d9c6;border-radius:28px 34px 26px 38px;padding:15px 15px 24px;border:2px solid #729da0;box-shadow:5px 6px 0 #527c8824}.colour-card:nth-child(3n+2){background:#efc0a7}.colour-card:nth-child(3n){background:#c9bfdf}.colour-card>div{overflow:hidden;border-radius:19px 23px 18px 22px;border:2px solid #729da0;aspect-ratio:800/520}.colour-card svg,.colour-teaser svg,.colour-gallery svg{display:block;width:100%;height:auto}.colour-card h2{font-size:1.45rem;margin:18px 8px 4px}.colour-card p,.colour-card span{margin:8px;display:block}.colour-card span{font-weight:800}.colour-gallery{margin:60px 0 25px;padding-top:24px;border-top:2px dashed #759ca1}.colour-gallery>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.colour-gallery a{color:inherit;text-decoration:none}.colour-gallery svg{border-radius:20px;border:2px solid #7199a0;margin-bottom:12px}.colour-note{font-size:.88rem;line-height:1.6;max-width:790px}.colour-workspace{display:grid;grid-template-columns:minmax(0,1fr) 254px;gap:24px;align-items:start}.colour-paper{border:3px solid #638b98;border-radius:28px 33px 26px 31px;overflow:hidden;background:#fff3d6;box-shadow:6px 8px 0 #587e8f30;min-width:0}.colour-paper>svg{width:100%;height:auto;display:block}.colour-region{cursor:pointer;outline:none}.colour-region:hover{filter:brightness(.96)}.colour-region:focus-visible>*{stroke:#bd523c;stroke-width:8;stroke-dasharray:12 8}.colour-tools{background:#f1c8ad;padding:20px 15px;border:2px solid #74979b;border-radius:24px 29px 22px 28px}.colour-tools h2{margin:0 0 15px;font-size:1.4rem}.colour-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 8px}.colour-palette button{border:0;background:none;padding:0 2px;cursor:pointer;color:inherit;min-height:69px}.colour-palette button>span{background:var(--crayon);width:40px;height:40px;border:2px solid #547e8a;border-radius:12px 15px 11px 14px;display:grid;place-items:center;margin:0 auto 5px;font-size:1.4rem;color:#315e71}.colour-palette button[aria-pressed=true]>span{outline:3px solid #315e71;outline-offset:3px}.colour-palette small{font-size:.72rem;line-height:1.2;display:block}.colour-selected{font-weight:800;font-size:.9rem;min-height:1.5em;margin:19px 0 12px}.colour-history{display:flex;gap:8px;flex-wrap:wrap}.colour-history .secondary-button{padding:10px 12px;min-height:44px}.colour-parts{margin-top:19px;border-top:1px dashed #74979b;padding-top:15px}.colour-parts summary{cursor:pointer;font-weight:700;min-height:44px}.colour-parts label{display:block;margin:14px 0 6px}.colour-parts select{max-width:100%;width:100%;padding:10px 7px;background:#fff3d6;color:#315e71;border:1px solid #6c9094;border-radius:10px;font:inherit}.colour-parts button{margin-top:14px;width:100%;padding:12px 7px}.colour-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:35px;align-items:start}.colour-bottom .handwritten{font-size:1.5rem;margin:0}.colour-bottom p{line-height:1.65}.colour-actions{display:flex;flex-wrap:wrap;gap:13px;justify-content:flex-end}.colour-actions .text-button{min-height:44px}#colour-status{min-height:2em;line-height:1.6;font-weight:700;margin-top:28px}.colour-teaser{max-width:1120px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:38px;background:#c9bfdf;color:inherit;text-decoration:none;margin:34px auto;padding:28px;border:2px solid #769aa1;border-radius:39px 28px 45px 31px}.colour-teaser>div{border:2px solid #73939d;border-radius:23px 31px 26px 20px;overflow:hidden;transform:rotate(-2deg)}.colour-teaser h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:10px 0}.colour-teaser .handwritten{font-size:1.5rem}.colour-teaser p{line-height:1.7}.colour-teaser strong{display:block;margin-top:18px}.colour-shell button:disabled{opacity:.55;cursor:default}.colour-shell button:focus-visible,.colour-card:focus-visible{outline:3px solid #315e71;outline-offset:4px}@media(max-width:850px){.colour-workspace{grid-template-columns:1fr}.colour-tools{display:block}.colour-palette{grid-template-columns:repeat(6,minmax(0,1fr));gap:15px 8px}.colour-parts{max-width:480px}.colour-paper{max-width:800px}.colour-bottom{gap:20px}.colour-gallery>div{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.colour-shell{padding:22px 20px 50px}.colour-heading{margin:25px 0 28px}.colour-heading h1{font-size:2.2rem}.colour-catalogue{grid-template-columns:1fr;gap:24px}.colour-workspace{gap:22px}.colour-tools{padding:20px 12px}.colour-palette{grid-template-columns:repeat(4,minmax(0,1fr))}.colour-palette button>span{width:43px;height:43px}.colour-bottom{grid-template-columns:1fr}.colour-actions{justify-content:flex-start}.colour-gallery>div{grid-template-columns:1fr 1fr;gap:15px}.colour-teaser{grid-template-columns:1fr;margin:28px 20px;padding:23px;gap:18px}.colour-card h2{font-size:1.4rem}.colour-paper{border-radius:20px}.colour-note{font-size:.83rem}}@media(prefers-reduced-motion:no-preference){.colour-region{transition:fill .12s ease}.colour-card{transition:transform .15s ease}.colour-card:hover{transform:translateY(-3px)}}