.colour-studio{padding-top:45px;padding-bottom:60px}.colour-studio h1{font-family:var(--serif);font-size:clamp(35px,5vw,60px);line-height:1.15;font-weight:400}.colour-studio h1 em{color:var(--olive)}.colour-studio>p{max-width:900px}.cs-choice{padding:10px;margin:8px;max-width:100%}.cs-toolbar,.cs-options,.cs-palette,.cs-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:18px 0}.colour-studio button{min-height:44px;border:1px solid var(--line);background:var(--white);color:var(--olive);padding:8px 13px;border-radius:5px;font-size:14px}.colour-studio button[aria-pressed=true]{border-color:var(--olive);box-shadow:inset 0 0 0 2px var(--olive);background:#e9ecdf}.cs-options label{display:flex;align-items:center;gap:5px;font-size:14px;min-height:40px}.cs-palette button{display:flex;align-items:center;gap:7px}.cs-palette button>span{width:24px;height:24px;border:1px solid #888;border-radius:50%;flex-shrink:0}.cs-status{min-height:48px;font-size:14px;color:var(--muted)}.cs-viewport{width:100%;max-height:70vh;overflow:auto;border:1px solid var(--line);background:#ddd9ce;touch-action:none;overscroll-behavior:contain}.cs-stage{min-width:100%;background:white}.cs-stage svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}.cs-count{font-size:14px;color:var(--muted)}.cs-reference{margin:20px 0;max-width:650px}.cs-reference[hidden]{display:none}.cs-reference img{width:100%;height:auto;display:block}.cs-reference figcaption{font-size:12px;line-height:1.7}.cs-confirm{padding:18px;background:#efe5da;border:1px solid var(--gold)}.cs-footnote{font-size:13px;color:var(--muted)}.cs-zoom{min-width:50px;text-align:center;font-variant-numeric:tabular-nums}@media(max-width:600px){.colour-studio{padding-top:25px}.cs-toolbar{gap:6px}.colour-studio button{font-size:13px;padding:8px 10px}.cs-palette button{font-size:12px}.cs-status{font-size:14px}.cs-viewport{max-height:58vh}}

.colour-invitation{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding-top:60px;padding-bottom:60px;border-top:1px solid var(--line)}.colour-invitation h2{font-family:var(--serif);font-size:clamp(32px,4vw,50px);font-weight:400;line-height:1.15}.colour-invitation h2 em{color:var(--olive)}.colour-invitation img{display:block;width:100%;border:1px solid var(--line)}.colour-invitation .primary{display:inline-block;margin-top:15px}@media(max-width:700px){.colour-invitation{grid-template-columns:1fr;gap:25px}.colour-invitation img{max-height:320px;object-fit:contain;background:white}}
.cs-regions path:focus-visible{outline:none;stroke:#b19351;stroke-width:1.5}.site-header nav{flex-wrap:wrap;row-gap:8px}

.cs-options label[hidden]{display:none}.cs-mode-help{padding:14px 18px;background:#e9ecdf;border-left:3px solid var(--olive);font-size:15px;line-height:1.65}.cs-zoom-control{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:16px 0}.cs-zoom-control label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cs-zoom-range{width:min(55vw,360px);min-height:36px}.cs-zoom-control>span{font-size:12px;color:var(--muted)}.cs-regions path.cs-target{stroke:#b33735;stroke-width:1;paint-order:stroke fill}.cs-stage svg{max-width:none}.cs-viewport{overflow-anchor:none}

/* A fixed canvas and SVG viewBox avoid mobile overflow scrolling during gestures. */
.cs-viewport{position:relative;overflow:hidden;aspect-ratio:4/3;isolation:isolate}.cs-stage{position:absolute;inset:0;width:100%;min-width:0;height:100%}.cs-stage svg{width:100%;height:100%;touch-action:none}.cs-pan-controls{display:flex;justify-content:center;gap:12px;margin:12px 0}.cs-pan-controls button{min-width:48px;font-size:21px}.cs-viewport:active{cursor:grabbing}

.cs-lesson{display:grid;grid-template-columns:1fr 200px;gap:25px;padding:25px;background:#fff8e7;border:1px solid #cfb779;margin:24px 0}.cs-lesson[hidden]{display:none}.cs-lesson h2{font-size:30px;margin:14px 0}.cs-lesson ol{padding-left:22px;font-size:15px;line-height:1.65}.cs-lesson li{margin:10px 0}.cs-lesson img{width:100%;align-self:center;border:1px solid var(--line)}.cs-lesson-actions{display:flex;flex-wrap:wrap;gap:10px}.cs-practice-progress{font-weight:bold;color:var(--olive)}.cs-practice-note{font-size:12px;color:var(--muted);margin:14px 0 0}.cs-practice-entry{margin:15px 0}@media(max-width:700px){.cs-lesson{grid-template-columns:1fr;padding:18px}.cs-lesson img{width:160px;grid-row:1}.cs-lesson h2{font-size:27px}}
.cs-practice-celebration{padding:24px;margin:20px 0;border:2px solid var(--gold);background:#fff8e7;text-align:center}.cs-practice-celebration[hidden]{display:none}.cs-practice-celebration h2{font-size:clamp(24px,4vw,34px);line-height:1.35;max-width:720px;margin:0 auto 18px}