@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap";.colour-machine{--cm-paper: #f5eddf;--cm-paper-bright: #fffaf0;--cm-ink: #211936;--cm-muted: #756d7d;--cm-line: #c7bba9;--cm-coral: #ef5b58;--cm-cobalt: #2f49d1;--cm-lemon: #f5c542;--cm-mint: #5bcbb0;box-sizing:border-box;min-height:100svh;overflow-x:hidden;padding:clamp(1.1rem,2.5vw,2.25rem) clamp(1rem,4vw,4.5rem) 2.25rem;color:var(--cm-ink);background-color:var(--cm-paper);font-family:Arial Narrow,Roboto Condensed,Helvetica Neue,Arial,sans-serif}.colour-machine *,.colour-machine *:before,.colour-machine *:after{box-sizing:border-box}.colour-machine__header,.colour-machine__main{width:min(100%,1440px);margin:0 auto}.colour-machine__header{padding-bottom:clamp(.55rem,1.2vw,1rem)}.colour-machine__masthead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;padding-bottom:clamp(.8rem,1.8vw,1.5rem);border-bottom:2px solid var(--cm-ink)}.colour-machine__hero-layout{display:grid;grid-template-columns:minmax(18rem,.72fr) minmax(0,1.7fr);align-items:stretch;gap:clamp(1.25rem,3.5vw,4rem)}.colour-machine__home,.colour-machine__edition,.colour-machine__identity,.colour-machine__eyebrow,.colour-machine__tool-label,.colour-machine__stage-heading,.colour-machine__stage-footer,.colour-machine__status,.colour-machine__keys{font-family:Arial Narrow,Roboto Condensed,Helvetica Neue,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}.colour-machine__home{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.55rem .8rem;color:var(--cm-ink);border:2px solid var(--cm-ink);border-radius:999px;font-size:.72rem;font-weight:800;text-decoration:none;transition:background-color .14s ease,color .14s ease,transform .14s ease}.colour-machine__home:hover{color:var(--cm-paper-bright);background:var(--cm-ink);transform:translateY(-1px)}.colour-machine__edition,.colour-machine__identity{margin:0;color:var(--cm-muted);font-size:.68rem;font-weight:800;line-height:1.2}.colour-machine__edition span{color:var(--cm-coral)}.colour-machine__identity{color:var(--cm-ink);text-align:right;text-transform:none;letter-spacing:.02em}.colour-machine__title-row{display:flex;flex-direction:column;justify-content:center;gap:clamp(1.2rem,3vw,2.4rem);min-width:0;padding:clamp(1.25rem,3vw,2.75rem) 0}.colour-machine__eyebrow{margin:0 0 1.2rem;color:var(--cm-coral);font-size:clamp(.7rem,1vw,.88rem);font-weight:900}.colour-machine__title{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;margin:0;color:var(--cm-ink);font-family:Impact,Haettenschweiler,Arial Narrow Bold,Arial Narrow,sans-serif;font-size:clamp(3.7rem,6.4vw,7rem);font-stretch:condensed;font-weight:900;letter-spacing:-.075em;line-height:.73;text-transform:uppercase}.colour-machine__title span:nth-child(2){color:var(--cm-coral)}.colour-machine__title span:nth-child(3){color:var(--cm-cobalt)}.colour-machine__instruction{max-width:20rem;margin:0;color:var(--cm-ink);font-size:clamp(1rem,1.5vw,1.28rem);font-weight:700;line-height:1.12;letter-spacing:-.025em}.colour-machine__instruction kbd,.colour-machine__keys kbd{display:inline-block;padding:.12rem .32rem;color:var(--cm-paper-bright);background:var(--cm-ink);border-radius:.2rem;font-family:SFMono-Regular,Consolas,monospace;font-size:.78em;letter-spacing:0;text-transform:none}.colour-machine__stage{overflow:hidden;background:var(--cm-ink);border:3px solid var(--cm-ink);border-radius:1.15rem;box-shadow:.55rem .55rem 0 var(--cm-coral)}.colour-machine__stage-heading,.colour-machine__stage-footer{display:flex;justify-content:space-between;gap:1rem;min-height:2.8rem;padding:.75rem 1rem;color:var(--cm-paper-bright);background:var(--cm-ink);font-size:.66rem;font-weight:900}.colour-machine__stage-heading{align-items:center;border-bottom:1px solid rgb(245 237 223 / 27%)}.colour-machine__stage-heading>span:first-child{display:inline-flex;align-items:center;gap:.45rem}.colour-machine__stage-heading>span:first-child:before{width:.48rem;height:.48rem;content:"";background:var(--cm-lemon);border-radius:50%;box-shadow:.7rem 0 0 var(--cm-coral),1.4rem 0 0 var(--cm-mint);margin-right:1.4rem}.colour-machine__stage-scene{color:var(--cm-lemon);text-align:right}.colour-machine__canvas-host{position:relative;height:clamp(22rem,min(61vh,58vw),42rem);min-height:22rem;overflow:hidden;background:var(--cm-ink);cursor:crosshair;touch-action:none}.colour-machine__canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.colour-machine__canvas:focus-visible{box-shadow:inset 0 0 0 4px var(--cm-lemon)}.colour-machine__canvas-note{position:absolute;right:1.2rem;bottom:1rem;left:1.2rem;display:flex;justify-content:space-between;gap:1rem;color:var(--cm-ink);font-size:.63rem;font-weight:900;letter-spacing:.1em;opacity:.72;pointer-events:none}.colour-machine__crosshair{position:absolute;top:50%;left:50%;width:1.8rem;height:1.8rem;border:1px solid rgb(33 25 54 / 50%);border-radius:50%;opacity:.5;pointer-events:none;transform:translate(-50%,-50%)}.colour-machine__crosshair:before,.colour-machine__crosshair:after{position:absolute;top:50%;left:50%;display:block;content:"";background:#21193699;transform:translate(-50%,-50%)}.colour-machine__crosshair:before{width:2.8rem;height:1px}.colour-machine__crosshair:after{width:1px;height:2.8rem}.colour-machine__stage-footer{align-items:center;color:#f5eddfb8;border-top:1px solid rgb(245 237 223 / 27%);font-size:.62rem;text-transform:none;letter-spacing:.04em}.colour-machine__stage-number{color:var(--cm-mint);text-transform:uppercase;letter-spacing:.1em}.colour-machine__tool-shelf{display:grid;grid-template-columns:minmax(19rem,1.35fr) minmax(10rem,.55fr) minmax(0,2.4fr);align-items:stretch;gap:1rem;margin-top:1.25rem;padding:1rem;background:var(--cm-paper-bright);border:2px solid var(--cm-ink);border-radius:.85rem;box-shadow:.35rem .35rem 0 var(--cm-cobalt)}.colour-machine__tool-group{min-width:0}.colour-machine__scenes,.colour-machine__symmetry{display:flex;flex-direction:column;justify-content:space-between;gap:.55rem;padding:.15rem .85rem .15rem .2rem}.colour-machine__scenes,.colour-machine__symmetry{border-right:1px solid var(--cm-line)}.colour-machine__tool-label{color:var(--cm-muted);font-size:.63rem;font-weight:900}.colour-machine__scene-list{display:flex;flex-wrap:wrap;gap:.45rem}.colour-machine__scene{display:inline-flex;align-items:center;gap:.42rem;min-height:2.35rem;padding:.4rem .58rem;color:var(--cm-ink);background:transparent;border:1.5px solid var(--cm-line);border-radius:.35rem;cursor:pointer;font-family:inherit;font-size:.7rem;font-weight:800;line-height:1;text-align:left;transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}.colour-machine__scene:hover{border-color:var(--cm-ink);transform:translateY(-1px)}.colour-machine__scene.is-selected{color:var(--cm-paper-bright);background:var(--cm-ink);border-color:var(--cm-ink)}.colour-machine__swatch{flex:0 0 auto;width:.75rem;height:.75rem;border:1px solid rgb(33 25 54 / 45%);border-radius:50%}.colour-machine__symmetry strong{color:var(--cm-cobalt);font-family:Impact,Haettenschweiler,Arial Narrow Bold,Arial Narrow,sans-serif;font-size:1.4rem;font-weight:900;letter-spacing:-.03em;text-transform:uppercase}.colour-machine__symmetry input{width:100%;min-width:7rem;accent-color:var(--cm-coral);cursor:pointer}.colour-machine__actions{display:flex;flex-wrap:wrap;align-content:center;justify-content:flex-end;gap:.5rem;min-width:0}.colour-machine__button{min-height:2.65rem;padding:.52rem .75rem;color:var(--cm-ink);background:var(--cm-paper-bright);border:2px solid var(--cm-ink);border-radius:.4rem;box-shadow:.16rem .16rem 0 var(--cm-ink);cursor:pointer;font-family:inherit;font-size:.7rem;font-weight:900;letter-spacing:.025em;line-height:1;transition:background-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.colour-machine__button:hover:not(:disabled){background:var(--cm-lemon);transform:translate(-1px,-1px)}.colour-machine__button:active:not(:disabled),.colour-machine__home:active{box-shadow:0 0 0 var(--cm-ink);transform:translate(.16rem,.16rem)}.colour-machine__button--coral{color:var(--cm-paper-bright);background:var(--cm-coral);border-color:var(--cm-coral);box-shadow:.16rem .16rem 0 var(--cm-ink)}.colour-machine__button--coral:hover:not(:disabled){color:var(--cm-ink);background:var(--cm-lemon);border-color:var(--cm-lemon)}.colour-machine__button--ink{color:var(--cm-paper-bright);background:var(--cm-ink);border-color:var(--cm-ink)}.colour-machine__button--ink:hover:not(:disabled){color:var(--cm-ink);background:var(--cm-mint);border-color:var(--cm-mint)}.colour-machine__button:disabled{cursor:not-allowed;opacity:.42}.colour-machine__button:focus-visible,.colour-machine__scene:focus-visible,.colour-machine__symmetry input:focus-visible,.colour-machine__home:focus-visible{outline:3px solid var(--cm-coral);outline-offset:3px}.colour-machine__status-row{display:flex;justify-content:space-between;gap:1rem;padding:.9rem .15rem 0}.colour-machine__status,.colour-machine__keys{margin:0;color:var(--cm-muted);font-size:.63rem;font-weight:900;line-height:1.4}.colour-machine__status{color:var(--cm-coral)}.colour-machine__keys{color:var(--cm-muted);text-align:right;text-transform:none;letter-spacing:.02em}.colour-machine__keys span{padding:0 .35rem;color:var(--cm-coral)}@media (max-width: 1050px){.colour-machine__tool-shelf{grid-template-columns:minmax(17rem,1.2fr) minmax(9rem,.6fr) minmax(0,1.5fr)}.colour-machine__actions{justify-content:flex-start}}@media (max-width: 780px){.colour-machine__hero-layout{grid-template-columns:1fr;gap:0}.colour-machine__masthead{grid-template-columns:1fr auto}.colour-machine__edition{grid-column:1 / -1;grid-row:1;order:-1}.colour-machine__identity{grid-column:2;grid-row:2}.colour-machine__title-row{gap:1.5rem}.colour-machine__instruction{max-width:26rem;margin:0}.colour-machine__tool-shelf{grid-template-columns:1fr}.colour-machine__scenes,.colour-machine__symmetry{border-right:0;border-bottom:1px solid var(--cm-line);padding:.15rem 0 .9rem}.colour-machine__actions{justify-content:flex-start}}@media (max-width: 500px){.colour-machine{padding-right:.8rem;padding-left:.8rem}.colour-machine__title{max-width:100%;font-size:clamp(4rem,18vw,6.5rem)}.colour-machine__home{font-size:.64rem}.colour-machine__canvas-host{height:min(75svh,32rem);min-height:19rem}.colour-machine__canvas-note,.colour-machine__stage-footer{font-size:.56rem}.colour-machine__canvas-note{flex-direction:column;gap:.3rem}.colour-machine__scene-list{display:grid;grid-template-columns:1fr}.colour-machine__scene{width:100%}.colour-machine__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.colour-machine__button{width:100%;padding-right:.4rem;padding-left:.4rem;font-size:.65rem}.colour-machine__status-row{flex-direction:column;gap:.5rem}.colour-machine__keys{text-align:left}}@media (prefers-reduced-motion: reduce){.colour-machine *,.colour-machine *:before,.colour-machine *:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.right-4{right:1rem}.top-4{top:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[200vh\]{height:200vh}.w-12{width:3rem}.w-20{width:5rem}.w-4{width:1rem}.grow{flex-grow:1}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-6{--tw-translate-x: 1.5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-1{padding:.25rem}.text-center{text-align:center}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-bold{font-weight:700}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root{--font-sans: "Inter", ui-sans-serif, system-ui}html,body{height:100%;min-height:100vh}body{min-height:100vh;background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));--tw-gradient-from: #eff6ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #eef2ff var(--tw-gradient-via-position), var(--tw-gradient-to);--tw-gradient-to: #ecfdf5 var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}body:is(.dark *){background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));--tw-gradient-from: #111827 var(--tw-gradient-from-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to);--tw-gradient-to: #1f2937 var(--tw-gradient-to-position);--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}body{font-family:var(--font-sans);min-height:100vh;min-height:100dvh;background-attachment:fixed}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}@media (min-width: 1024px){.lg\:text-6xl{font-size:3.75rem;line-height:1}}