@font-face{
  font-family:"Instrument Sans";
  src:url("fonts/InstrumentSans-Variable.latin.woff2") format("woff2");
  font-weight:400 700;
  font-stretch:75% 100%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/JetBrainsMono-Variable.latin.woff2") format("woff2");
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
:root{--paper:#f5f5f2;--ink:#191c19;--muted:#666a63;--rule:#cbcdc6;--mat:#e7e8e2;--neutral:#92928f;--gutter:clamp(20px,3.5vw,64px);--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.45 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}button,input,select{font:inherit;color:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;border-radius:0;background:none;text-align:left}button:disabled{cursor:wait;opacity:.55}button[aria-disabled=true]{cursor:default}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button:hover{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:5px}button,input,summary{touch-action:manipulation}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}button,summary{min-height:44px}h1{font-size:clamp(46px,4.7vw,78px);line-height:.98;letter-spacing:-.055em}h2{font-size:32px;line-height:1.1;letter-spacing:-.035em}h3{font-size:20px;line-height:1.25;letter-spacing:-.015em}p{max-width:60ch}svg{display:block}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 20px}.skip:focus{top:12px}
.masthead{height:94px;margin:0 var(--gutter);display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--ink)}.identity{display:flex;align-items:center;gap:15px;flex-shrink:0}.identity:hover{text-decoration:none}.wordmark{font:700 37px/.9 var(--sans);font-stretch:75%;letter-spacing:-.02em}.brand-trace{width:39px;height:30px;stroke:currentColor;stroke-width:1.7;fill:none}.brand-trace .endpoint{fill:currentColor;stroke:none}.masthead-note{font:11px var(--mono);letter-spacing:.09em;margin-left:16px}.mode-nav{margin-left:auto;display:flex;height:100%;gap:34px}.mode-nav button{position:relative;padding:0 0 0 2px;min-width:94px;display:flex;gap:20px;align-items:center;font-size:16px;color:var(--muted)}.mode-nav button[aria-current=page]{color:var(--ink)}.mode-nav button[aria-current=page]:after{content:'';height:3px;background:var(--ink);position:absolute;bottom:-1px;left:0;right:0}.nav-index{font:11px var(--mono)}#main{min-height:calc(100svh - 186px);outline:none}.eyebrow{font:11px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}.fine{font-size:13px;color:var(--muted);line-height:1.5}.muted{color:var(--muted)}.primary,.secondary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:58px;padding:16px 22px;font-size:16px}.primary{background:var(--ink);color:var(--paper)}.primary:hover{background:#333931}.secondary{border:1px solid var(--ink)}.secondary:hover{background:var(--mat)}.primary span,.secondary span{font-size:22px;line-height:1}.text-button{padding:8px 0;border-bottom:1px solid var(--ink);display:inline-flex;align-items:center;justify-content:space-between;gap:20px;font-size:14px}.text-button:hover{color:var(--muted)}.icon-button{font-size:28px;width:44px;text-align:center;padding:0}.site-footer{margin:0 var(--gutter);padding:24px 0 22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--muted);font:11px/1.5 var(--mono);letter-spacing:.03em}.site-footer>div{display:flex;align-items:center;gap:28px}.site-footer button{font:inherit;padding:0}.status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:90;max-width:min(620px,calc(100% - 32px));padding:14px 22px;background:var(--ink);color:var(--paper);box-shadow:0 8px 24px #0002;font-size:14px;pointer-events:none}.status:empty{display:none}.status.error{border-left:4px solid #b56a54}.status.busy:before{content:'';display:inline-block;width:10px;height:10px;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:12px;animation:spin 1s linear infinite}.noscript{padding:30px}
/* The opening is an invitation into an image, not an account dashboard. */
.landing{padding:50px var(--gutter) 38px}.landing-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:6vw;align-items:center;min-height:min(650px,calc(100svh - 244px))}.landing-copy{padding:24px 0 36px}.landing-copy h1{font-size:clamp(90px,10.2vw,166px);letter-spacing:-.07em;line-height:.84;margin:32px 0 32px;font-stretch:88%;}.landing-copy h1 span{display:block}.landing-deck{font-size:21px;line-height:1.4;max-width:28ch}.landing-actions{display:flex;gap:12px;margin-top:36px;max-width:470px}.landing-actions>*{flex:1}.landing-copy>.fine{margin-top:18px}.landing-reference{position:relative;margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.landing-photo{position:relative;background:var(--mat);padding:clamp(18px,2.7vw,44px);aspect-ratio:1.12;display:flex;align-items:center}.landing-photo img{width:100%;height:auto;display:block}.landing-photo .mini-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:white;stroke-width:1;fill:none}.landing-reference figcaption{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font:11px/1.5 var(--mono);letter-spacing:.04em}.landing-reference .photo-word{font-size:clamp(14px,1.5vw,22px);position:absolute;bottom:20px;right:26px;letter-spacing:-.025em}.landing-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:35px;padding-top:24px;border-top:1px solid var(--rule)}.ritual{display:flex;gap:22px;font:11px var(--mono);letter-spacing:.035em}.ritual b{font-weight:400;color:var(--muted);margin-right:8px}.landing-bottom .fine{font-size:12px}
/* The reference always keeps its own aspect ratio; marker coordinates share that rectangle. */
.practice{padding:28px var(--gutter) 42px}.section-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.section-bar .text-button{border:0;font:11px var(--mono)}.progress{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0;font:11px var(--mono);text-transform:uppercase;color:var(--muted)}.progress li{padding:10px 0;position:relative}.progress li.current{color:var(--ink)}.progress li.current:before{position:absolute;content:'';height:4px;width:4px;background:currentColor;left:-9px;top:15px}.progress li.past{color:var(--ink)}.practice-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:clamp(32px,5vw,84px);align-items:center;min-height:560px}.reference-area{min-width:0}.image-mat{background:var(--mat);padding:clamp(20px,3vw,46px);min-height:350px;display:flex;align-items:center;justify-content:center;position:relative}.image-surface{position:relative;display:block;width:100%;padding:0;min-height:0;line-height:0;cursor:crosshair;outline-offset:6px;max-width:calc(57vh * var(--image-ratio))}.image-surface img{display:block;width:100%;height:auto}.image-surface.static{cursor:default}.point-marker{position:absolute;left:var(--point-x);top:var(--point-y);width:20px;height:20px;transform:translate(-50%,-50%);border:1px solid white;box-shadow:0 0 0 1px #0008;pointer-events:none}.point-marker:before,.point-marker:after{content:'';position:absolute;background:white;box-shadow:0 0 1px #000}.point-marker:before{width:1px;height:10px;left:9px;top:-14px}.point-marker:after{height:1px;width:10px;top:9px;right:-14px}.point-marker i{position:absolute;top:-27px;left:-5px;background:var(--ink);color:white;padding:3px 5px;font:11px var(--mono);line-height:1}.reference-caption{display:flex;justify-content:space-between;gap:20px;margin-top:14px;font:11px/1.5 var(--mono);color:var(--muted)}.reference-caption span:last-child{text-align:right}.practice-panel{min-width:0}.phase-heading{margin:18px 0 22px}.practice-panel>.description{font-size:18px;color:var(--muted);max-width:28ch;line-height:1.5}.practice-panel .primary{width:100%;margin-top:28px}.see-note{margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);display:flex;gap:16px;align-items:flex-start}.see-note svg{width:25px;height:25px;flex-shrink:0}.see-note p{font-size:13px;color:var(--muted);max-width:28ch}.estimate-preview{height:112px;background:var(--estimate);color:var(--on-estimate);padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between;margin:22px 0 12px}.estimate-preview .preview-label{font:11px var(--mono);text-transform:uppercase;letter-spacing:.05em}.estimate-preview .preview-caption{font-size:21px;letter-spacing:-.03em}.dial{padding:10px 0 4px}.dial label{display:flex;justify-content:space-between;align-items:baseline;font-size:16px}.dial output{font:11px var(--mono);text-transform:uppercase;color:var(--muted)}input[type=range]{display:block;width:100%;height:40px;margin:2px 0 0;padding:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;border-radius:0}input[type=range]::-webkit-slider-runnable-track{height:8px;border:1px solid #0003;background:var(--track,var(--rule))}input[type=range]::-moz-range-track{height:7px;border:1px solid #0003;background:var(--track,var(--rule))}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;margin-top:-10px;width:12px;height:26px;background:var(--paper);border:2px solid var(--ink);border-radius:0;box-shadow:0 0 0 2px #f5f5f290}input[type=range]::-moz-range-thumb{width:9px;height:22px;background:var(--paper);border:2px solid var(--ink);border-radius:0;box-shadow:0 0 0 2px #f5f5f290}.control-note{font-size:12px;color:var(--muted);margin-top:4px}.minor-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:12px}.minor-actions button{font-size:13px;padding:6px 0}.minor-actions .fine{font:11px var(--mono)}
/* Reveal: two equal fields, one measured relationship. */
.reveal-page{padding:28px var(--gutter) 44px}.reveal-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:clamp(32px,5vw,84px);align-items:center;min-height:560px}.reveal-topline{display:flex;justify-content:space-between;align-items:center;margin:0 0 15px}.reveal-topline h1{font-size:clamp(32px,3.3vw,50px);letter-spacing:-.045em}.reveal-topline .eyebrow{color:var(--muted)}.reveal-mat{padding:22px;background:var(--neutral);position:relative}.colour-fields{display:grid;grid-template-columns:1fr 1fr;position:relative;min-height:380px;height:clamp(330px,39vw,490px);isolation:isolate}.colour-field{position:relative;min-width:0;overflow:hidden;padding:20px;background:var(--field);color:var(--on-field);display:flex;flex-direction:column;justify-content:space-between}.field-target{transform-origin:left;animation:unfold 600ms var(--ease) both}.colour-field .field-index{font:11px var(--mono);letter-spacing:.05em}.colour-field .field-label{font-size:clamp(21px,2.7vw,42px);line-height:1.03;letter-spacing:-.035em;max-width:7ch}.trace-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.trace-under{stroke:#181b18;stroke-width:2.8;fill:none;opacity:.55;vector-effect:non-scaling-stroke}.trace-line{stroke:#fff;stroke-width:1.1;fill:none;vector-effect:non-scaling-stroke;stroke-dasharray:800;stroke-dashoffset:800;animation:trace-in 750ms var(--ease) 220ms forwards}.trace-node{stroke:#fff;stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}.trace-origin{stroke-dasharray:2 2}.trace-end{fill:#fff;stroke:#191c1944}.trace-current{fill:none;stroke:#fff}.trace-ticks{stroke:#fff7;stroke-width:.5;fill:none;vector-effect:non-scaling-stroke}.reveal-legend{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:15px;font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.035em}.reveal-legend>div{display:flex;justify-content:space-between;gap:8px}.reveal-legend .hex{color:var(--muted)}.reveal-panel .phase-heading{font-size:clamp(38px,3.9vw,59px);margin-top:20px}.difference{font-size:20px;line-height:1.4;margin:20px 0;color:var(--ink);max-width:27ch}.difference:empty{display:none}.context-return{display:flex;align-items:center;gap:14px;padding:17px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:24px 0}.context-return img{width:72px;height:49px;object-fit:cover}.context-return>div{display:flex;flex-direction:column;gap:3px}.context-return .fine{font-size:12px}.reveal-panel .primary,.reveal-panel .secondary{width:100%;margin-top:14px}.reveal-panel .technical{margin-top:16px}.technical summary{font-size:13px;cursor:pointer;padding:12px 0;display:flex;justify-content:space-between;align-items:center;list-style:none}.technical summary:after{content:'+';font-size:18px}.technical[open] summary:after{content:'−'}.technical summary::-webkit-details-marker{display:none}.technical-content{padding-bottom:18px}.measurements{width:100%;border-collapse:collapse;font:11px/1.5 var(--mono);margin:6px 0 14px}.measurements th,.measurements td{text-align:left;padding:8px 5px;border-bottom:1px solid var(--rule);font-weight:400}.measurements th:first-child{padding-left:0}.measurements th{color:var(--muted)}.measurements td{text-align:right}.technical p{font-size:12px;color:var(--muted);margin-top:10px}.adjusting .trace-line,.complete .trace-line{animation:none;stroke-dashoffset:0}.adjusting .field-target,.complete .field-target{animation:none}.adjusting .reveal-panel .phase-heading{margin:14px 0;font-size:44px}.adjusting .difference{font-size:15px;margin:10px 0}.adjusting .estimate-preview{height:64px;margin:10px 0}.adjusting .preview-caption{font-size:16px}.adjusting .estimate-preview .preview-label{font-size:11px}.adjusting .dial{padding-top:6px}.complete-note{border-top:1px solid var(--rule);margin:24px 0;padding-top:18px;font-size:14px;color:var(--muted)}
/* Studio: image, observed areas and material answer share one working surface. */
.studio{padding:28px var(--gutter) 44px}.studio-header{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:30px}.studio-header h1{font-size:clamp(38px,4vw,61px);margin-top:10px}.studio-tabs{display:flex;gap:24px;border-bottom:1px solid var(--rule)}.studio-tabs button{font-size:14px;padding:8px 0;position:relative}.studio-tabs button[aria-current=page]:after{content:'';height:2px;background:var(--ink);position:absolute;left:0;right:0;bottom:-1px}.studio-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr) minmax(260px,.8fr);gap:30px;align-items:start}.studio-reference{position:sticky;top:22px;min-width:0}.studio-reference .image-mat{min-height:280px;padding:24px}.studio-reference .image-surface{max-width:100%}.studio-control-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 20px;margin-top:8px}.studio-control-row button{font-size:12px;padding:7px 0;border-bottom:1px solid transparent}.studio-control-row button[aria-pressed=true]{border-color:var(--ink)}.studio-control-row button:last-child{margin-left:auto}.studio-reference .reference-caption{margin-top:10px}.observed-strip{display:flex;min-height:44px;gap:2px;margin-top:25px}.observed-strip button{padding:0;flex-basis:0;min-width:14px;background:var(--swatch);border:1px solid #0002;position:relative}.observed-strip button[aria-pressed=true]:after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--ink)}.observed-strip+.fine{margin-top:12px;font-size:12px}.owned-ribbon{display:flex;gap:3px;margin:15px 0 6px}.owned-ribbon i{width:30px;height:32px;border:1px solid #0001}.palette-mini{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule);padding-top:15px;margin-top:24px;gap:14px}.palette-mini .text-button{border:0;font-size:12px}.palette-mini p{font:11px var(--mono);text-transform:uppercase}.studio-observed{min-width:0}.column-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--ink);min-height:40px;padding-bottom:10px;font:11px var(--mono);letter-spacing:.045em;text-transform:uppercase}.column-title span{color:var(--muted)}.colour-rows{list-style:none;margin:0;padding:0}.colour-row{border-bottom:1px solid var(--rule)}.colour-row>button{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:12px;width:100%;padding:14px 0;align-items:center;position:relative}.colour-row>button[aria-pressed=true]:before{content:'';position:absolute;left:-10px;top:14px;bottom:14px;width:2px;background:var(--ink)}.row-chip{height:48px;background:var(--swatch);border:1px solid #0001}.row-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.row-copy strong{font:13px var(--mono)}.row-copy small{font-size:12px;color:var(--muted);line-height:1.3}.row-arrow{font-size:16px;color:var(--muted)}.selected-point-button{display:flex;align-items:center;gap:12px;font-size:12px;border-bottom:1px solid var(--ink);padding:12px 0;width:100%;margin-bottom:14px}.selected-point-button i{width:28px;height:28px;background:var(--sample);border:1px solid #0001}.studio-answer{border-left:1px solid var(--rule);padding-left:28px;min-width:0}.studio-answer>.eyebrow{margin:12px 0 16px;color:var(--muted)}.studio-answer h2{font-size:32px;line-height:1.05;letter-spacing:-.035em;margin-bottom:15px}.paint-pair{display:grid;grid-template-columns:1fr 1fr;height:108px;background:var(--neutral);padding:12px;margin:20px 0 8px}.paint-pair>div{background:var(--swatch);border:1px solid #0001}.paint-pair .no-match{background:var(--paper);border:1px dashed var(--muted);display:flex;align-items:center;justify-content:center;font:22px var(--mono);color:var(--muted)}.pair-labels{display:flex;justify-content:space-between;gap:12px;font:11px var(--mono);text-transform:uppercase;color:var(--muted)}.paint-spec{margin:22px 0;font-size:13px}.paint-spec>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;border-bottom:1px solid var(--rule);padding:9px 0}.paint-spec dt{color:var(--muted)}.paint-spec dd{margin:0;overflow-wrap:anywhere}.manufacturer-link{font-size:12px;text-decoration:underline;text-underline-offset:4px;display:inline-block;min-height:44px;padding:10px 0}.catalogue-near{border-top:1px solid var(--rule);padding-top:18px;margin-top:18px}.catalogue-near .eyebrow{color:var(--muted);font-size:11px}.catalogue-near h3{margin-top:8px;font-size:19px}.catalogue-near .fine{margin-top:5px}.studio-answer>.fine{font-size:12px;margin-top:14px}.studio-answer .primary,.studio-answer .secondary{width:100%;font-size:14px;min-height:50px;margin-top:20px}.studio-answer .text-button{width:100%;font-size:12px;margin-top:8px}.studio-answer .technical{margin-top:10px;border-top:1px solid var(--rule)}.blend-answer{margin-top:12px}.blend-swatches{display:flex;height:60px;margin:10px 0;background:var(--neutral);padding:8px}.blend-swatches>span{flex:1}.blend-answer p{font-size:12px;margin-top:8px}.value-view .colour-surface{filter:grayscale(1)}.locate-canvas{width:100%;height:auto;display:block}.loading-area{padding:30px 0}.loading-line{height:40px;background:var(--mat);margin:18px 0;animation:breathe 1s alternate infinite}.empty-studio{min-height:450px;display:grid;place-content:center;max-width:540px;margin:auto;padding:30px 0}.empty-studio p{margin:20px 0;color:var(--muted)}.empty-studio .primary{margin-top:10px}
/* Palette is a worktable, with the catalogue and hue relationships beside it. */
.palette-grid{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.25fr) minmax(210px,.7fr);gap:40px;align-items:start}.palette-owned h2,.catalogue h2{font-size:30px;margin:12px 0}.palette-grid .fine{margin:12px 0}.held-list,.catalogue-list{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--ink)}.held-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);min-height:74px}.held-chip{width:34px;height:44px;flex-shrink:0;border:1px solid #0002;background:var(--swatch)}.held-copy{flex:1;min-width:0}.held-copy strong{display:block;font-weight:400;font-size:16px}.held-copy small{font:11px var(--mono);color:var(--muted)}.held-item .icon-button{font-size:21px;flex-shrink:0}.catalogue{min-width:0}.search-label{display:block;font:11px var(--mono);text-transform:uppercase;margin-top:20px}.search-input{width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--ink);background:none;border-radius:0;min-height:48px;font-size:16px}.catalogue-list{max-height:530px;overflow-y:auto;margin-top:0;padding-right:12px}.catalogue-entry{border-bottom:1px solid var(--rule)}.catalogue-entry button{display:flex;align-items:center;gap:14px;width:100%;padding:14px 0;min-height:78px}.catalogue-entry .held-chip{width:30px;height:42px}.catalogue-copy{flex:1;min-width:0}.catalogue-copy strong{display:block;font-size:16px;font-weight:400}.catalogue-copy small{display:block;font-size:11px;line-height:1.45;color:var(--muted);margin-top:4px}.catalogue-state{font:11px var(--mono);margin-left:8px;flex-shrink:0}.catalogue-entry button:not([aria-disabled=true]):hover .catalogue-copy strong{text-decoration:underline;text-underline-offset:3px}.no-results{padding:24px 0;font-size:14px;color:var(--muted)}.harmony-column{border-left:1px solid var(--rule);padding-left:28px}.harmony-column canvas{width:100%;height:auto;display:block;max-width:290px;margin:22px auto}.harmony-column h2{font-size:23px;margin:14px 0}.harmony-modes{display:flex;flex-direction:column}.harmony-modes button{font-size:13px;padding:10px 0;border-bottom:1px solid var(--rule);color:var(--muted)}.harmony-modes button[aria-pressed=true]{color:var(--ink)}.harmony-modes button[aria-pressed=true]:after{content:'↗';float:right}.harmony-anchor{margin-top:18px}.harmony-anchor label{display:flex;justify-content:space-between;font:11px var(--mono)}.palette-storage{border-top:1px solid var(--rule);padding-top:16px;margin-top:22px;font-size:12px;color:var(--muted)}
dialog{border:1px solid var(--ink);border-radius:0;padding:26px 34px 32px;max-width:590px;width:calc(100% - 32px);max-height:85svh;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#191c1966;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}dialog h2{font-size:45px;line-height:.98;margin:10px 0 25px}dialog p{font-size:15px;line-height:1.6;margin:16px 0}dialog details{border-top:1px solid var(--rule)}dialog summary{padding:12px 0;font-size:15px;cursor:pointer}.data-actions{display:flex;gap:20px;flex-wrap:wrap}dialog .fine{font-size:12px}
.colour-field .field-label{max-width:none}
.trace-line{stroke-dasharray:none;stroke-dashoffset:0;animation:trace-in 750ms var(--ease) 220ms both}
.trace-under{stroke-width:2.5;opacity:.38}
.field-estimate .field-label,.field-target .field-label{min-height:2.06em}
@keyframes unfold{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes trace-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{to{opacity:.45}}
@media(min-width:1700px){.masthead,#main,.site-footer{max-width:1720px;margin-left:auto;margin-right:auto}.masthead,.site-footer{max-width:calc(1720px - 2 * var(--gutter))}.landing-grid{min-height:700px}.practice-grid,.reveal-grid{min-height:690px}.image-mat{min-height:480px}}
@media(max-width:1100px){.masthead-note{display:none}.landing-grid{gap:36px}.landing-actions{flex-direction:column;max-width:320px}.landing-actions>*{min-height:52px}.landing-copy h1{font-size:112px}.practice-grid,.reveal-grid{grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:30px}.image-mat{padding:22px;min-height:310px}.colour-fields{min-height:355px}.reveal-mat{padding:15px}.colour-field{padding:16px}.studio-grid{grid-template-columns:minmax(0,1.35fr) minmax(220px,.85fr);gap:28px}.studio-reference{grid-column:1;grid-row:1/3;position:sticky}.studio-observed{grid-column:2}.studio-answer{grid-column:2;border-left:0;padding-left:0;border-top:1px solid var(--ink);padding-top:15px}.palette-grid{grid-template-columns:1fr 1.3fr;gap:30px}.harmony-column{grid-column:1/-1;border-left:0;border-top:1px solid var(--rule);padding:24px 0;display:grid;grid-template-columns:1fr 260px 1fr;gap:28px}.harmony-column canvas{margin:0}.harmony-modes{grid-column:3;grid-row:1/3}.harmony-anchor{grid-column:2}.harmony-column>.fine{grid-column:1;grid-row:2}.landing-bottom{gap:20px}.ritual{gap:12px}.landing-bottom>.fine{max-width:24ch;text-align:right}}
@media(max-width:760px){:root{--gutter:20px}.masthead{height:76px;gap:14px}.wordmark{font-size:31px}.brand-trace{width:29px;height:25px}.identity{gap:8px}.mode-nav{gap:19px}.mode-nav button{font-size:14px;min-width:0;gap:7px}.nav-index{font-size:11px}.site-footer{padding:18px 0;align-items:flex-start;gap:16px;font-size:11px}.site-footer>span{max-width:13ch}.site-footer>div{display:flex;flex-direction:column;gap:5px;align-items:flex-end}.site-footer button{min-height:32px}#main{min-height:calc(100svh - 178px)}.landing{padding-top:28px;padding-bottom:24px}.landing-grid{display:flex;flex-direction:column;gap:28px;min-height:0;align-items:stretch}.landing-copy{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:end}.landing-copy>.eyebrow{grid-column:1/-1}.landing-copy h1{grid-column:1/-1;font-size:clamp(85px,21vw,130px);line-height:.86;margin:24px 0}.landing-copy h1 span{display:inline}.landing-copy h1 span+span:before{content:' '}.landing-deck{font-size:16px;max-width:22ch;grid-column:1/-1}.landing-actions{margin-top:24px;display:flex;flex-direction:row;gap:10px;max-width:none;grid-column:1/-1;width:100%}.landing-actions>.primary,.landing-actions>.secondary{padding:13px 15px;min-height:54px;font-size:14px;gap:12px}.landing-copy>.fine{grid-column:1/-1;font-size:11px;margin-top:13px}.landing-photo{aspect-ratio:1.45;padding:20px}.landing-reference figcaption{font-size:11px;margin-top:11px}.landing-photo .photo-word{font-size:13px;bottom:8px;right:20px}.landing-bottom{margin-top:26px;padding-top:18px;display:block}.ritual{justify-content:space-between;gap:8px;font-size:11px}.ritual b{display:block;margin-bottom:5px}.landing-bottom>.fine{display:none}.practice,.reveal-page{padding-top:17px;padding-bottom:26px}.section-bar{margin-bottom:16px;min-height:30px;gap:10px}.section-bar>.eyebrow{font-size:11px}.section-bar .text-button{font-size:11px;min-height:32px}.progress{gap:18px;font-size:11px}.progress li{padding:8px 0}.progress li.current:before{top:12px;left:-7px;width:3px;height:3px}.practice-grid,.reveal-grid{display:flex;flex-direction:column;gap:23px;min-height:0;align-items:stretch}.image-mat{padding:20px;min-height:0}.image-surface{max-width:100%}.reference-caption{font-size:11px;margin-top:9px;gap:14px}.practice-panel>.eyebrow{font-size:11px}.phase-heading{font-size:43px;line-height:1;margin:12px 0 16px;letter-spacing:-.05em}.phase-heading br{display:none}.practice-panel>.description{font-size:16px;max-width:31ch}.see-note{margin-top:22px;padding-top:15px}.see-note p{max-width:none;font-size:12px}.practice-panel .primary{margin-top:22px;min-height:54px}.estimate .practice-grid{gap:20px}.estimate .image-mat{padding:12px}.estimate .reference-caption span:last-child{display:none}.estimate .phase-heading{font-size:32px;margin:9px 0 12px}.estimate .practice-panel>.eyebrow{display:none}.estimate-preview{height:64px;margin:0 0 10px;padding:12px 15px;flex-direction:row;align-items:flex-end}.estimate-preview .preview-caption{font-size:18px}.estimate-preview .preview-label{font-size:11px}.dial{padding:5px 0 0}.dial label{font-size:15px}.dial output{font-size:11px}input[type=range]{height:38px;margin:0}.control-note{font-size:11px}.estimate .practice-panel .primary{margin-top:15px}.minor-actions{margin-top:5px}.minor-actions button{font-size:12px}.reveal-topline{margin:2px 0 15px}.reveal-topline h1{font-size:34px}.reveal-topline .eyebrow{font-size:11px}.reveal-mat{padding:12px}.colour-fields{min-height:0;height:clamp(300px,84vw,390px)}.colour-field{padding:15px}.colour-field .field-label{font-size:30px;max-width:6ch}.colour-field .field-index{font-size:11px}.reveal-legend{gap:18px;font-size:11px;margin-top:12px}.reveal-legend>div{flex-direction:column;gap:4px}.reveal-panel>.eyebrow{display:none}.reveal-panel .phase-heading{font-size:37px;margin:3px 0 14px}.difference{font-size:18px;margin:12px 0;max-width:none}.context-return{margin:16px 0;padding:12px 0}.reveal-panel .primary,.reveal-panel .secondary{min-height:52px}.reveal-grid{gap:23px}.reveal-panel .technical{margin-top:10px}.adjusting .colour-fields{height:210px;min-height:0}.adjusting .colour-field .field-label{font-size:23px}.adjusting .reveal-topline h1{font-size:29px}.adjusting .reveal-panel .phase-heading{font-size:30px;margin:0 0 12px}.adjusting .reveal-grid{gap:20px}.adjusting .estimate-preview{height:46px}.adjusting .estimate-preview .preview-caption{font-size:14px}.adjusting .difference{font-size:14px}.complete-note{margin:18px 0}.studio{padding-top:24px;padding-bottom:28px}.studio-header{align-items:flex-start;flex-direction:column;gap:22px;margin-bottom:24px}.studio-header h1{font-size:42px;line-height:1;margin-top:8px}.studio-tabs{width:100%;gap:26px}.studio-tabs button{font-size:14px}.studio-grid{display:flex;flex-direction:column;gap:26px}.studio-reference{position:static;width:100%}.studio-reference .image-mat{padding:16px;min-height:0}.studio-reference .reference-caption{font-size:11px}.studio-control-row{gap:2px 18px}.studio-control-row button{font-size:12px}.studio-control-row button:last-child{margin-left:0}.observed-strip{margin-top:15px;min-height:44px}.palette-mini{margin-top:18px;padding-top:12px}.studio-observed,.studio-answer{width:100%}.colour-rows{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.colour-row>button{grid-template-columns:38px minmax(0,1fr);gap:10px}.row-chip{height:40px}.row-arrow{display:none}.row-copy strong{font-size:11px}.row-copy small{font-size:11px}.colour-row>button[aria-pressed=true]:before{left:-6px}.studio-answer{padding-top:20px}.studio-answer h2{font-size:35px}.studio-answer .paint-pair{height:135px}.studio-answer .fine{max-width:52ch}.palette-grid{display:flex;flex-direction:column;gap:30px}.palette-owned,.catalogue{width:100%}.palette-owned h2,.catalogue h2{font-size:30px}.held-list{margin-top:20px}.held-item{min-height:68px}.harmony-column{width:100%;display:block;padding:24px 0 0}.harmony-column canvas{max-width:300px;margin:20px auto}.harmony-modes{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.catalogue-list{max-height:460px;padding-right:8px}.harmony-anchor{max-width:400px}.catalogue-entry .catalogue-state{font-size:11px}.catalogue-copy strong{font-size:15px}.catalogue-copy small{font-size:11px}.status{bottom:calc(16px + env(safe-area-inset-bottom));font-size:13px;padding:12px 16px;width:max-content}.empty-studio{min-height:350px}dialog{padding:18px 22px 24px}dialog h2{font-size:38px}.data-actions{gap:10px}.site-footer{padding-bottom:calc(14px + env(safe-area-inset-bottom))}}
@media(max-width:370px){:root{--gutter:16px}.wordmark{font-size:28px}.brand-trace{width:24px}.mode-nav{gap:14px}.mode-nav button{font-size:13px;gap:5px}.nav-index{display:none}.landing-copy h1{font-size:85px}.landing-actions>.primary,.landing-actions>.secondary{font-size:13px;padding:12px}.progress{gap:13px}.reference-caption{font-size:11px}.colour-field{padding:12px}.colour-field .field-label{font-size:26px}.reveal-topline h1{font-size:30px}.row-copy small{font-size:11px}.colour-rows{gap:0 14px}}
input[type=range]{min-height:44px}.identity{min-height:44px}
.point-marker b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6px;height:6px;border:1px solid #fff;box-shadow:0 0 0 1px #0007}
#main h1[tabindex="-1"]:focus,.studio-answer h2[tabindex="-1"]:focus{outline:none}
@media(max-width:760px){.colour-field .field-label{max-width:none;font-size:clamp(24px,6.8vw,30px)}.reveal-panel .context-return{display:none}.reveal-panel .phase-heading{font-size:34px}.site-footer button{min-height:44px}.landing-photo .photo-word{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.trace-line{stroke-dashoffset:0;clip-path:none}.field-target{clip-path:none}}

/* Practice patch sampling; existing composition is retained. */
.sample-notice{font-size:13px;line-height:1.5;border-left:2px solid var(--ink);padding:0 0 0 12px;margin:16px 0;color:var(--muted)}.sample-notice:empty{display:none}.field-target{position:relative}.patch-range{position:absolute;bottom:0;left:0;right:0;height:8px;display:flex}.patch-range i{width:50%}

/* Paint answers stay visible; exact model weights stay in disclosures. */
.mix-swatches{display:flex;height:52px;padding:7px;background:var(--neutral);margin:12px 0 7px}.mix-swatches i{display:block;flex:1;min-width:0}.mix-swatches .mix-result{border-left:3px solid var(--neutral)}.mix-swatches.compact{height:20px;padding:2px;margin:4px 0}.mix-swatches.compact .mix-result{border-left-width:2px}.mix-directions{font-size:16px;line-height:1.45}.material-option>.eyebrow{margin:18px 0 10px}.material-option>.fine{margin:10px 0}.material-option.alternative{border-top:1px solid var(--rule);margin-top:22px;padding-top:6px}.material-option h3{margin:10px 0}.swatch-key{font:11px/1.5 var(--mono);color:var(--muted)}.missing-paint{font-size:12px;color:var(--muted);margin:10px 0}.row-copy .row-guidance{font-size:13px;color:var(--ink);line-height:1.45}.row-copy .row-kind{font-size:11px}.studio-partners{margin:16px 0}.studio-partners p{margin:6px 0;font-size:12px}.studio-partners .eyebrow{font-size:11px}.mix-paint-name{margin-top:20px!important}.material-option .technical{border-top:0}.material-option .paint-spec{margin-top:12px}.no-close-match{margin-top:20px!important}

.sym{font-family:var(--mono);font-size:inherit}.legend-mark{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:4px;flex-shrink:0;stroke:currentColor;stroke-width:1.2;fill:none}.legend-mark .square{fill:currentColor;stroke:none}
@media(max-width:760px){.section-bar{display:block}.section-bar>.eyebrow{display:block;margin-bottom:8px}.progress{justify-content:space-between;gap:8px;width:100%}}