/* Excede Kitchen Studio: the shell, the bench, the panel and the choices (spec 3.2 to 3.4, 6, 7.1 to 7.11, 7.16, 7.20 to 7.22).
   Owner: U-core. Built from the final desktop mock (scratchpad design/final), with the stage, plan and board
   components left to css/vb-stage.css, css/vb-plan.css and css/vb-board.css. The focus rules come last on purpose. */
:root{--plan-fill:#e6e7e3; --paper-2:#fcfcfb; --hh:64px;
  --line-3:rgba(28,30,34,.48);   /* input, checkbox and radio edges: 3:1 on plaster and paper-2 (WCAG 1.4.11) */
  --sh-chip:0 1px 1px rgba(28,30,34,.18),0 7px 12px -7px rgba(28,30,34,.45);
  --sh-chip-up:0 1px 1px rgba(28,30,34,.16),0 12px 16px -9px rgba(28,30,34,.5);
  --sh-card:0 1px 2px rgba(28,30,34,.10),0 22px 40px -22px rgba(28,30,34,.55);
  --t-start:52px; --t-step:44px; --t-plate:21px; --t-sec:21px; --t-body:15px; --t-note:14px; --t-small:13px; --t-min:12.5px;
  --chip-w:62px;
  --d-fast:120ms; --d-card:180ms; --d-mid:240ms; --d-photo:600ms; --d-cam:700ms;}
html,body{min-height:100%}
body{background:var(--plaster);color:var(--ink-2);font:400 var(--t-body)/1.55 var(--f-body)}
.ico{width:16px;height:16px;flex:none}
button{cursor:pointer;font-family:var(--f-body)}
/* One focus ring for every control, after the resets. :is() weighs 0,2,0, so a component class that uses all:unset
   (0,1,0 or 0,1,1) can't take the ring away; :where() would weigh 0 and lose to it. Components that ring a child
   (chips, ticks, quiz photos, option cards) switch their own outline off; segmented controls keep -2px inside. */
:is(a,button,input,select,textarea,summary,[tabindex],[role]):focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
:is(h1,h2,h3)[tabindex="-1"]:focus{outline:none}
.code{font:500 12.5px/1.3 var(--f-body);letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.confirm{color:var(--oxblood);font-weight:500}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------------- sample artefacts ---------------- */
.dc{--w:62px;position:relative;display:block;flex:none;width:var(--w);height:calc(var(--w)*1.25);background:var(--c);border-radius:1px;overflow:hidden;box-shadow:var(--sh-chip);transition:transform var(--d-mid) var(--ease),box-shadow var(--d-mid) var(--ease)}
.dc::before{content:'';position:absolute;left:38%;top:31%;right:0;bottom:0;box-shadow:inset 1px 1px 0 rgba(0,0,0,.24),inset 3px 3px 4px -1px rgba(0,0,0,.16),-1px -1px 0 rgba(255,255,255,.32)}
.dc::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(152deg,rgba(255,255,255,.22),rgba(255,255,255,0) 44%,rgba(0,0,0,.10));box-shadow:inset -1.5px -1.5px 0 rgba(0,0,0,.10),inset 1px 1px 0 rgba(255,255,255,.32)}
.dc--slab::before{display:none}
.dc--slim::before{left:21%;top:17%}
.dc--raised::before{left:36%;top:29%;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 26%,rgba(0,0,0,0) 74%,rgba(0,0,0,.10));box-shadow:inset 1px 1px 0 rgba(0,0,0,.26),inset 7px 7px 7px -6px rgba(0,0,0,.20),-1px -1px 0 rgba(255,255,255,.32)}
.dc--wood{background:var(--c) var(--tex) 0 0/cover}
.dc--wood[style*="--tint"]{background-color:var(--tint);background-blend-mode:multiply}
.dc__rail{position:absolute;left:38%;right:0;top:0;height:31%;overflow:hidden;box-shadow:-1px 0 0 rgba(0,0,0,.22)}
.dc--slim .dc__rail{left:21%;height:17%}
.dc--slab .dc__rail{display:none}
.dc__rail::before{content:'';position:absolute;left:50%;top:50%;width:260px;height:260px;background:var(--c) var(--tex) 0 0/auto 134px;transform:translate(-50%,-50%) rotate(90deg)}
.dc--wood[style*="--tint"] .dc__rail::before{background-color:var(--tint);background-blend-mode:multiply}
.dc--custom{background:repeating-linear-gradient(135deg,var(--paper) 0 6px,var(--linen) 6px 7px);box-shadow:inset 0 0 0 1px var(--line-2)}
.dc--custom::before,.dc--custom::after{display:none}
.dc--custom i{position:absolute;inset:0;display:grid;place-items:center;font:300 26px/1 var(--f-display);color:var(--ink);font-style:normal}
.dc--match{background:linear-gradient(135deg,var(--c) 0 50%,var(--paper) 50%)}
.dc--match::before{display:none}
.dc--match i{position:absolute;left:0;right:0;bottom:6px;z-index:2;font:600 12.5px/1 var(--f-body);color:var(--ink);font-style:normal;text-align:center}
.mt{--w:30px;position:relative;display:block;flex:none;width:var(--w);height:calc(var(--w)*1.72);border-radius:1px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.05) 1px 2px,rgba(0,0,0,0) 2px 3px),linear-gradient(90deg,var(--b),var(--m) 20%,var(--a) 46%,var(--m) 72%,var(--b));
  box-shadow:0 1px 1px rgba(28,30,34,.25),0 7px 11px -7px rgba(28,30,34,.55);transition:transform var(--d-mid) var(--ease)}
.mt::before{content:'';position:absolute;left:50%;top:9%;width:26%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--plaster);box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
.oc{--w:56px;position:relative;display:block;flex:none;width:var(--w);height:calc(var(--w)*.86);background:var(--img) center/cover;border-radius:1px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),inset 0 -5px 0 rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.45),var(--sh-chip);transition:transform var(--d-mid) var(--ease)}
.oc--tile{height:var(--w);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),var(--sh-chip)}
.pk{--w:62px;position:relative;display:block;flex:none;width:var(--w);height:calc(var(--w)*.62);overflow:hidden;border-radius:1px;box-shadow:var(--sh-chip)}
.pk i{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--tex) 0 0/100% auto}
.pk i:first-child{top:0;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.pk i:last-child{bottom:0;background-position:0 60%}
/* ---------------- option chips: a radio around an artefact ---------------- *//* chip grids: a fixed column count (--cols, never leaving one chip alone on a row) and chips that shrink with the panel:
   62px at most, (width - gaps) / cols below that. 62 at 1440, 54 at 1280, 50 at 1200, 55 at 1024, 49 in a 768 half. */
.chips{container-type:inline-size;display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:12px 10px;max-width:calc(var(--cols,6) * 62px + (var(--cols,6) - 1) * 10px)}
.chips .dc,.chips .pk,.chips .wl,.chips .oc{--w:min(62px,calc((100cqw - (var(--cols,6) - 1) * 10px) / var(--cols,6)))!important}
.ch{all:unset;cursor:pointer;position:relative;display:block;width:max-content}
.ch>span:first-child{transition:transform var(--d-mid) var(--ease),box-shadow var(--d-mid) var(--ease)}
.ch:hover>span:first-child,.ch.is-hover>span:first-child{transform:translateY(-2px);box-shadow:var(--sh-chip-up)}
.ch[aria-checked=true]>span:first-child{outline:1px solid var(--ink);outline-offset:3px}
.ch.is-unsure[aria-checked=true]>span:first-child{outline:1px dashed var(--ink)}
.ch.ch:focus-visible>span:first-child,.ch.ch.is-focus>span:first-child{outline:2px solid var(--oxblood);outline-offset:3px}
/* doubled class: outranks the Not sure yet dashed ring */
.ch:focus-visible{outline:none}
.ch[aria-disabled=true]{cursor:not-allowed}
.ch[aria-disabled=true]>span:first-child{opacity:.4;transform:none;box-shadow:none}
/* ---------------- shared type ---------------- */
.p-h1{font:300 var(--t-step)/1.04 var(--f-display);letter-spacing:-.022em;color:var(--ink);margin:0;text-wrap:balance}
.p-h1--xl{font-size:var(--t-start);line-height:1.02;letter-spacing:-.024em}
.p-intro{margin-top:10px;font-size:var(--t-body);line-height:1.55;color:var(--ink-2);max-width:30em;text-wrap:pretty}
.u{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.tl-u{all:unset;cursor:pointer;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.kn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:2px;background:var(--ink);color:var(--paper);font:600 12.5px/1 var(--f-body);flex:none}
.kn--x{background:var(--oxblood)}
.kn--o{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tier{display:inline-flex;gap:2px;flex:none}
.tier i{width:7px;height:7px;box-shadow:inset 0 0 0 1px var(--ink-2)}
.tier i.on{background:var(--ink-2)}
/* ---------------- header: solid plaster, no blur ---------------- */
.sh{position:relative;z-index:6;height:var(--hh);background:var(--plaster);border-bottom:1px solid var(--line)}
.sh>.wrap{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.sh__logo{grid-column:1/span 2;display:flex;align-items:center}
.sh__logo img{height:40px;width:auto;display:block}
.sh__nav{grid-column:3/span 6;align-self:stretch;display:flex}
.steps{display:flex;gap:clamp(14px,1.22vw,21px);margin:0;padding:0;list-style:none}
.steps li{display:flex}
.steps button{all:unset;cursor:pointer;display:flex;align-items:center;font:500 14px/1 var(--f-body);color:var(--muted);position:relative;white-space:nowrap}
.steps button:hover{color:var(--ink)}
.steps button:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}
.steps button[aria-current=step]{color:var(--ink)}
.steps button[aria-current=step]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.stepm{all:unset;cursor:pointer;display:none;align-items:baseline;gap:8px;align-self:center;padding:10px 0;font:600 14px/1 var(--f-body);color:var(--ink)}
.stepm span{font-weight:500;color:var(--muted);font-size:13.5px}
.stepm .ico{width:12px;height:12px;align-self:center;color:var(--ink)}
.sh__right{grid-column:9/span 4;display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:14px}
.ib{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid transparent;border-radius:2px;background:none;color:var(--ink);padding:0}
.ib:hover{border-color:var(--line-2)}
.ib:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.ib[disabled]{color:var(--line-2);cursor:default;border-color:transparent}
.saved{display:inline-flex;align-items:center;gap:7px;margin:0 6px 0 4px;font:400 13.5px/1 var(--f-body);color:var(--muted);white-space:nowrap}
.saved::before{content:'';width:6px;height:6px;background:var(--ink-2);opacity:.55;flex:none}
.saved__s{display:none}
/* 1440 and up: stepper on columns 3 to 8, the right cluster on 9 to 12 with the status in words.
   1200 to 1439: the stepper needs columns 3 to 9, so the cluster takes 10 to 12 and the status uses its short word;
   the sentence stays in the tooltip and the accessible name. */
@media (min-width:1200px) and (max-width:1439px){
.sh__nav{grid-column:3/span 7}
.sh__right{grid-column:10/span 3}
.sh .saved__l{display:none}
.sh .saved__s{display:inline}
}
.saved--ing::before{opacity:.2}
.saved--x{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;margin:0 8px;font:600 13.5px/1 var(--f-body);color:var(--oxblood)}
.saved--x::before{content:'';width:6px;height:6px;background:var(--oxblood)}
.tl{all:unset;cursor:pointer;font:500 14px/1 var(--f-body);color:var(--ink);padding:10px 8px;white-space:nowrap}
.tl:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.tl:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.tl--sm{font-size:13.5px;padding:8px 4px}
.tl[aria-disabled=true]{color:var(--muted);cursor:default;text-decoration:none}
/* ---------------- studio body ---------------- */
.sb{height:calc(100vh - var(--hh));padding-top:16px}
.sb>.wrap{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.bench{grid-column:1/span 8;display:flex;flex-direction:column;min-height:0;padding-bottom:16px;--bc:8}
.panel{grid-column:9/span 4;display:flex;flex-direction:column;min-height:0;position:relative}
.panel__in{flex:1;min-height:0;overflow:hidden;padding:2px 4px 18px;margin:0 -4px}
/* 4px of room so focus and selection outlines are not clipped */
.panel__in.is-more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
/* the foot: a subgrid of the panel's four columns (five from 900 to 1199). The way back takes the first column and the way on
   takes the rest. From 900 to 1199 a foot with two named choices (Keep A, Carry on with C) splits them two and three. */
.panel__foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:14px 0 16px;border-top:1px solid var(--line)}
.panel__foot .btn{min-height:50px;min-width:0;white-space:nowrap}
.panel__foot .btn--back{grid-column:1;justify-content:center;padding:0 6px}
.panel__foot .btn--next{grid-column:2/-1}
.panel__foot>.tl{grid-column:2/-1;justify-self:end}
.panel__foot .foot__cost{display:none}
.btn--next{justify-content:space-between;padding:0 clamp(14px,1.5vw,22px)}
.btn--back{padding:0 18px}
.btn .ico{width:16px;height:16px}
.btn[aria-disabled=true]{background:var(--linen);color:var(--muted);cursor:not-allowed;box-shadow:none}
.btn--ghost[aria-disabled=true]{background:none;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.btn--s{min-height:38px;padding:0 15px;font-size:14px}
/* the stage: the 3D canvas, its tools, and the crop marks of a settled photograph */
.stage{position:relative;flex:1;min-height:0;margin-bottom:14px}
.cv{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:#d9dad6;container-type:size}
.cv:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}
.cv__scene{position:absolute;left:50%;top:50%;width:max(100cqw,160cqh);aspect-ratio:1200/750;transform:translate(calc(-50% + var(--fx,0px)),calc(-50% + var(--fy,0px)))}
.cv__scene>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.cv--commenting{box-shadow:inset 0 0 0 1px var(--oxblood)}
.cv--commenting .cv__scene{cursor:crosshair}
.cv__msg{position:absolute;left:14px;bottom:14px;z-index:4;display:flex;align-items:center;gap:12px;min-height:36px;padding:0 6px 0 12px;background:var(--paper);border:1px solid var(--oxblood);border-radius:2px;font-size:13.5px;color:var(--ink)}
.cv__msg b{font-weight:600}
.cv__msg .tl-u{font-weight:600;padding:8px 6px}
/* ---------------- the caption plate: a drawing's title block ---------------- */
.plate{flex:none;display:grid;grid-template-columns:repeat(var(--bc),minmax(0,1fr));column-gap:var(--gap);padding:10px 0 11px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.tb{grid-column:1/span 3;display:flex;flex-direction:column;min-width:0}
.tb__name{margin:0;font:400 var(--t-plate)/1.2 var(--f-display);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb__name .pv{font:500 13px/1 var(--f-body);color:var(--muted);margin-left:8px;letter-spacing:0}
.tb__code{margin-top:5px;overflow:hidden;text-overflow:ellipsis}
.tb__from{margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv,.pc{position:relative;min-width:0}
.pv::before,.pc::before{content:'';position:absolute;left:calc(var(--gap) / -2);top:-2px;bottom:-3px;width:1px;background:var(--line)}
.pv{grid-column:4/span 3;display:flex;flex-direction:column;justify-content:space-between}
.pc{grid-column:7/span 2;display:flex;flex-direction:column;justify-content:space-between}
.views{display:flex;gap:16px;height:26px}
.views button{all:unset;cursor:pointer;position:relative;display:flex;align-items:center;font:500 13.5px/1 var(--f-body);color:var(--muted);white-space:nowrap}
.views button:hover{color:var(--ink)}
.views button[aria-pressed=true]{color:var(--ink)}
.views button[aria-pressed=true]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}
.views button[aria-disabled=true]{color:var(--line-2);cursor:default}
.views button:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}
.vmenu,.lmenu{all:unset;cursor:pointer;display:none;align-items:center;gap:7px;height:26px;font:500 13.5px/1 var(--f-body);color:var(--ink);white-space:nowrap}
.vmenu .ico,.lmenu .ico{width:12px;height:12px}
.light{display:flex;align-items:flex-start;gap:14px;margin-top:8px}
.sun{position:relative;flex:1;height:32px;--t:0}
.sun__rule{position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line-2)}
.sun__rule i{position:absolute;top:-4px;width:1px;height:9px;background:var(--line-2)}
.sun__rule i:nth-child(1){left:0}
.sun__rule i:nth-child(2){left:50%}
.sun__rule i:nth-child(3){right:0}
.sun__n{position:absolute;top:-1px;left:calc(var(--t) * 100%);width:2px;height:15px;margin-left:-1px;background:var(--oxblood);cursor:grab;transition:left var(--d-cam) var(--ease-io)}
.sun__n::before{content:'';position:absolute;left:-10px;right:-10px;top:-8px;bottom:-8px}
.sun__n:focus-visible{outline:2px solid var(--oxblood);outline-offset:4px}
.sun__l button{all:unset;cursor:pointer;position:absolute;top:17px;font:500 12.5px/1.2 var(--f-body);color:var(--muted);white-space:nowrap}
.sun__l button:hover{color:var(--ink)}
.sun__l .day{left:0}
.sun__l .golden{left:50%;transform:translateX(-50%)}
.sun__l .evening{right:0}
.sun__l button.on{color:var(--ink)}
.season{display:flex;gap:12px;flex:none;margin-top:-1px}
.season button{all:unset;cursor:pointer;font:500 12.5px/1 var(--f-body);color:var(--muted);padding:1px 0 3px}
.season button[aria-pressed=true]{color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.season button:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}
.pc__v{display:flex;align-items:center;gap:10px;height:26px}
.vers{display:flex;gap:4px;align-items:center}
.ver{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--line-2);border-radius:2px;background:none;font:600 12.5px/1 var(--f-body);color:var(--ink-2)}
.ver:hover{border-color:var(--ink)}
.ver:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.ver[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ver--add{color:var(--muted);border-style:dashed}
.ver--add .ico{width:12px;height:12px}
.ver--b{box-shadow:inset 0 0 0 1px var(--ink);border-color:var(--ink);color:var(--ink)}
.pc__p{position:relative;margin-top:8px;min-height:32px;display:flex;align-items:flex-end}
.ph-none{font-size:12.5px;line-height:1.35;color:var(--muted);max-width:15em}
.phc{all:unset;cursor:pointer;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:32px}
.phc:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}
.phc__img{flex:none;display:block;width:44px;height:28px;padding:2px;background:#fff;box-shadow:0 1px 1px rgba(28,30,34,.22),0 6px 9px -6px rgba(28,30,34,.5)}
.phc__img img{display:block;width:100%;height:100%;object-fit:cover}
.phc__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.phc__t b{font:500 13px/1.2 var(--f-body);color:var(--ink);white-space:nowrap}
.phc__t span{font-size:12.5px;line-height:1.25;color:var(--muted);white-space:nowrap}
.phc>.ico{width:12px;height:12px;color:var(--ink)}
.phc[aria-expanded=true] .phc__img{outline:1px solid var(--ink);outline-offset:3px}
.phc--dev{cursor:default}
.phc--dev .phc__img{background:#f4f4f1}
.phc--dev .phc__img img{opacity:calc(.12 + var(--p) * .88);filter:saturate(var(--p)) sepia(calc((1 - var(--p)) * .5)) contrast(calc(.7 + var(--p) * .3))}
.phc__bar{position:absolute;left:0;bottom:-6px;width:44px;height:2px;background:var(--line)}
.phc__bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);background:var(--ink)}
.tl-u--m{font-weight:500;color:var(--ink-2)}
.pop{position:absolute;z-index:8;width:300px;background:var(--paper);border:1px solid var(--line-2);border-radius:2px;box-shadow:var(--sh-card)}
.pop__img{display:block;margin:12px 12px 0;padding:4px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.pop__img img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover}
.pop__h{padding:10px 14px 10px;border-bottom:1px solid var(--line)}
.pop__h b{display:block;font:400 19px/1.2 var(--f-display);color:var(--ink)}
.pop__h span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--muted)}
.pop__h--x{display:flex;align-items:flex-start;gap:12px}
.pop__h--x>div{flex:1;min-width:0}
.pop__done{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:-10px -10px -8px 0;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pop ul{list-style:none;margin:0;padding:4px 0}
.pop li button,.pop li a{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 14px;font:500 14px/1.2 var(--f-body);color:var(--ink)}
.pop li button:hover,.pop li a:hover{background:rgba(28,30,34,.04)}
.pop li .ico{width:14px;height:14px}
.pop li .k{margin-left:auto;font-size:13px;font-weight:400;color:var(--muted)}
.pop li .box{width:16px;height:16px;display:grid;place-items:center;border:1px solid var(--line-3);border-radius:2px;background:var(--paper-2);flex:none}
.pop li .box--r{border-radius:1px}
.pop li [aria-checked=true] .box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pop li [aria-checked=true] .box--r{background:var(--paper);box-shadow:inset 0 0 0 4px var(--ink)}
.pop li .box svg{width:12px;height:12px}
.pop li.sep{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.pop li .q{color:var(--muted)}
.pop__strip{display:flex;gap:8px;padding:10px 14px 0}
.pop__strip span{display:block;width:44px;height:28px;padding:2px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.pop__strip span.on{outline:1px solid var(--ink);outline-offset:2px}
.pop__strip img{display:block;width:100%;height:100%;object-fit:cover}
/* ---------------- the sample tray ---------------- */
.tray{flex:none;display:grid;grid-template-columns:repeat(var(--bc),minmax(0,1fr));column-gap:var(--gap);padding-top:12px}
.tray__s{grid-column:1/span 6;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gap)}
.smp{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-rows:56px auto;align-items:end;justify-items:start;gap:8px;min-width:0;position:relative}
.smp__a{align-self:end;display:block}
.smp:hover .dc,.smp:hover .oc,.smp:hover .mt,.smp:hover .pk{transform:translateY(-2px)}
.smp:focus-visible{outline:2px solid var(--oxblood);outline-offset:4px}
.smp__t{display:block;min-width:0}
.smp b{display:block;font:500 12.5px/1.25 var(--f-body);color:var(--muted)}
.smp em{display:block;font-style:normal;font:500 13px/1.3 var(--f-body);color:var(--ink);min-height:34px}
.smp.is-new em{text-decoration:underline;text-decoration-color:var(--oxblood);text-decoration-thickness:2px;text-underline-offset:4px}
.smp.is-ghost .smp__a>span{outline:1px dashed var(--ink);outline-offset:3px}
.smp.is-unsure .smp__a>span{outline:1px dashed var(--ink-2);outline-offset:3px}
.smp.is-open .smp__a>span{outline:1px solid var(--ink);outline-offset:3px}
.tray__sum{grid-column:7/span 2;min-width:0;padding:0 0 2px}
.tray__sum>b{display:block;font:600 13.5px/1.3 var(--f-body);color:var(--ink)}
.tray__sum>span{display:block;margin-top:7px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.cr{display:block;margin-top:8px}
.cr__r{position:relative;display:block;height:9px}
.cr__r::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:var(--line-2)}
.cr__r i{position:absolute;top:1px;width:1px;height:7px;background:var(--line-2)}
.cr__r i:nth-child(1){left:0}
.cr__r i:nth-child(2){left:33.33%}
.cr__r i:nth-child(3){left:66.66%}
.cr__r i:nth-child(4){right:0}
.cr__r b{position:absolute;top:1px;left:var(--p);width:7px;height:7px;margin-left:-3.5px;background:var(--ink)}
.cr__l{display:flex;margin-top:5px;font-size:12.5px;line-height:1;color:var(--muted);white-space:nowrap}
.cr__l i{flex:1;font-style:normal;padding-left:1px}
/* ---------------- panel content ---------------- */
.grp{margin-top:22px}
.grp__l{display:flex;align-items:center;gap:10px;min-height:22px;margin-bottom:12px;font:600 14px/1.3 var(--f-body);color:var(--ink)}
.grp__l .v{font-weight:400;color:var(--ink-2)}
.grp__l .pvw{font-weight:500;color:var(--oxblood)}
.chk{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font:500 14px/1.3 var(--f-body);color:var(--ink);min-height:28px}
.chk i{width:18px;height:18px;border:1px solid var(--line-3);border-radius:2px;background:var(--paper-2);display:grid;place-items:center;flex:none}
.chk[aria-checked=true] i{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chk i svg{width:13px;height:13px}
.chk:focus-visible i{outline:2px solid var(--oxblood);outline-offset:2px}
.chk--in{margin-left:auto;font-size:13.5px;color:var(--ink-2)}
.chk--in i{width:16px;height:16px}
.chk--row{display:grid;grid-template-columns:18px 1fr;column-gap:10px;align-items:start;width:100%;box-sizing:border-box}
.chk--row i{margin-top:1px}
.chk--row span{grid-column:2;font-size:13.5px;font-weight:400;color:var(--muted);margin-top:2px}
.seg{display:flex;border:1px solid var(--line-2);border-radius:2px;background:var(--paper);height:42px}
.seg button{all:unset;cursor:pointer;flex:1;display:grid;place-items:center;font:500 14px/1 var(--f-body);color:var(--ink-2);border-left:1px solid var(--line);text-align:center}
.seg button:first-child{border-left:0}
.seg button:hover{background:rgba(28,30,34,.04)}
.seg button[aria-checked=true]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline:2px solid var(--oxblood);outline-offset:-2px}
.ptabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);border-radius:2px;background:var(--paper)}
.ptab{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;border-left:1px solid var(--line);position:relative}
.ptab:first-child{border-left:0}
.ptab .dc{box-shadow:0 1px 1px rgba(28,30,34,.2)}
.ptab b{display:block;font:600 14px/1.25 var(--f-body);color:var(--ink)}
.ptab span span{display:block;font-size:13px;color:var(--muted)}
.ptab:hover{background:rgba(28,30,34,.03)}
.ptab[aria-selected=true]{background:var(--paper-2)}
.ptab[aria-selected=true]::after{content:'';position:absolute;left:-1px;right:-1px;bottom:-1px;height:2px;background:var(--ink)}
.ptab:focus-visible{outline:2px solid var(--oxblood);outline-offset:-3px}
.ptab .flag{margin-left:auto;align-self:flex-start;margin-top:9px;font:500 12.5px/1 var(--f-body);color:var(--oxblood)}
.unsure{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.unsure::before{content:'';flex:none;width:9px;height:9px;margin-top:5px;box-shadow:inset 0 0 0 1px var(--oxblood)}
.live{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.live__h{margin:0;font:350 var(--t-sec)/1.15 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.live__for{margin:3px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.live__for .tl-u{font-weight:500;color:var(--ink-2)}
.live__pick{margin-top:12px;font:600 14px/1.35 var(--f-body);color:var(--ink)}
.live__pick .pvw{font-weight:500;color:var(--oxblood)}
.live__says{margin-top:3px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.live dl{margin:8px 0 0;display:grid;gap:6px}
.live dl div{font-size:14px;line-height:1.5;color:var(--ink-2)}
.live dt{display:inline;font-weight:600;color:var(--ink)}
.live dt::after{content:'. '}
.live dd{display:inline;margin:0}
.cost{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13.5px;color:var(--ink-2)}
.more{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:18px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:600 14px/1.3 var(--f-body);color:var(--ink)}
.more .ico{width:14px;height:14px}
.more[aria-expanded=true]{border-bottom:0}
.more[aria-expanded=true] .ico{transform:rotate(180deg)}
.more:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.note-line{margin-top:9px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.note-line b{color:var(--ink);font-weight:600}
.rl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rl>li{border-bottom:1px solid var(--line)}
.rl>li>button,.rl>li>a,.rl>li>label{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;padding:12px 0;color:var(--ink)}
.rl .rl__t{flex:1;min-width:0}
.rl .rl__t b{display:block;font:600 15px/1.3 var(--f-body);color:var(--ink)}
.rl .rl__t span{display:block;font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:2px}
.rl .ico{width:14px;height:14px;color:var(--ink)}
.rl>li>button:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.radio{width:18px;height:18px;border-radius:1px;border:1px solid var(--line-3);background:var(--paper-2);flex:none;box-sizing:border-box}
[aria-checked=true]>.radio{border:1px solid var(--ink);background:var(--paper-2);box-shadow:inset 0 0 0 3px var(--paper-2),inset 0 0 0 9px var(--ink)}
/* ---------------- tablet landscape, 900 to 1199 (1024 x 768): bench 7 columns, panel 5 ---------------- */
@media (max-width:1199px){
.steps{display:none}
.stepm{display:inline-flex}
.sh__nav{grid-column:3/span 4}
.sh__right{grid-column:7/span 6}
.tl--exit{display:none}
.bench{grid-column:1/span 7;--bc:7}
.panel{grid-column:8/span 5}
.sb{padding-top:14px}
.bench{padding-bottom:12px}
.plate{row-gap:8px}
.tb{grid-column:1/span 4}
.tb__from{display:none}
.pc{grid-column:5/span 3}
.pv{grid-column:1/span 7;grid-row:2;flex-direction:row;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line)}
.pv::before{display:none}
.light{display:none}
.lmenu{display:inline-flex}
.pc__p{margin-top:6px}
.tray__s{grid-column:1/span 5;column-gap:8px}
.tray__sum{grid-column:6/span 2}
.cr__l{display:none}
.smp{grid-template-rows:46px auto}
.smp .dc{--w:34px!important}
.smp .oc{--w:42px!important}
.smp .mt{--w:22px!important}
.smp .pk{--w:46px!important}
.smp b{display:none}
.halves{grid-template-columns:minmax(0,1fr)!important}
.p-h1{font-size:38px}
.grp{margin-top:18px}
.panel__foot{grid-template-columns:repeat(5,minmax(0,1fr))}
.panel__foot--pair .btn--back{grid-column:1/span 2}
.panel__foot--pair .btn--next{grid-column:3/-1}
}
/* ---------------- tablet portrait, 600 to 899 (768 x 1024): the stage on top, the panel under it ---------------- */
@media (max-width:899px){
.sh__logo{grid-column:1/span 3}
.sh__nav{grid-column:4/span 4}
.sh__right{grid-column:8/span 5}
.saved__l{display:none}
.saved__s{display:inline}
.ib--redo{display:none}
.sb{height:auto;padding-top:12px}
.sb>.wrap{height:auto}
.bench{grid-column:1/-1;--bc:12;padding-bottom:0}
.stage{flex:none;height:38vh}
/* so every step's h1 and its first row of choices clear the fixed foot at 768 x 1024 */
.tb{grid-column:1/span 6}
.tb__from{display:block}
.pc{grid-column:7/span 6}
.pv{grid-column:1/-1}
.bench .tray{display:none}
/* the panel under the stage holds the same picks; the cost block moves into the foot */
.panel{grid-column:1/-1;margin-top:18px}
.panel__in{overflow:visible;padding-bottom:110px}
/* the fixed foot is a 12-column row inside the page margins: cost 1 to 5, Back 6 and 7, Next 8 to 12 (named pairs 6 to 8 and 9 to 12) */
.panel__foot{position:fixed;left:0;right:0;bottom:0;z-index:7;padding:12px var(--margin) 16px;background:var(--plaster);grid-template-columns:repeat(12,minmax(0,1fr))}
.panel__foot .foot__cost{display:flex;grid-column:1/span 5}
.panel__foot .btn--back{grid-column:6/span 2}
.panel__foot .btn--next{grid-column:8/span 5}
.panel__foot--pair .btn--back{grid-column:6/span 3}
.panel__foot--pair .btn--next{grid-column:9/span 4}
.panel__foot>.tl{grid-column:6/-1}
/* Start leads with its h1 and the starting points; the preview of the hovered one follows */
.sb--start .panel{grid-row:1;margin-top:6px}
.sb--start .bench{grid-row:2;margin-top:28px;padding-bottom:32px}
.sb--start .panel__in{padding-bottom:0}
}
.foot__cost{flex-direction:column;gap:6px;min-width:0;font-size:12.5px;color:var(--muted)}
.foot__cost b{font:600 13.5px/1.2 var(--f-body);color:var(--ink)}
.foot__cost .cr{width:160px;margin:0}
.skip{position:absolute;left:var(--margin);top:-60px;z-index:20;padding:10px 14px;background:var(--ink);color:var(--paper);font:600 14px/1 var(--f-body);border-radius:2px}
.skip:focus{top:10px}
/* start */
.cv__scene--v{width:max(100cqw,153.85cqh);aspect-ratio:1200/780}
.tb__code--t{font:400 12.5px/1.3 var(--f-body);letter-spacing:0;color:var(--ink-2)}
.pc__blurb{font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.rl--feel{margin-top:12px}
.rl--feel>li>button{padding:4px 0;gap:12px}
.rl__k{display:flex;gap:3px;align-items:flex-end;flex:none;width:86px}
.rl__k .dc,.rl__k .oc,.rl__k .mt{box-shadow:0 1px 1px rgba(28,30,34,.18),0 5px 8px -6px rgba(28,30,34,.45)}
.rl--feel .rl__t{display:block}
.rl__n{display:block;font:400 18px/1.2 var(--f-display);color:var(--ink);letter-spacing:-.005em}
.rl--feel .rl__t>span:not(.rl__n){display:block;font-size:13px;line-height:1.35;color:var(--muted);margin-top:0}
.rl>li.is-hover{background:rgba(28,30,34,.035);box-shadow:-10px 0 0 rgba(28,30,34,.035),10px 0 0 rgba(28,30,34,.035)}
.rl__go{font:600 13.5px/1 var(--f-body);color:var(--ink);display:inline-flex;align-items:center;gap:7px;opacity:0;white-space:nowrap}
.rl li.is-hover .rl__go{opacity:1}
.rl__go .ico{width:13px;height:13px}
.ways{margin-top:12px;display:grid;gap:6px}
.way{all:unset;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:7px 14px;border:1px solid var(--line-2);border-radius:2px;background:var(--paper);color:var(--ink)}
.way:hover{border-color:var(--ink)}
.way .rl__t{flex:1;min-width:0}
.way b{display:block;font:600 14.5px/1.3 var(--f-body);color:var(--ink);white-space:nowrap}
.way .rl__t span{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:1px}
.way .ico{width:14px;height:14px;flex:none}
.way--drop{border-style:dashed;background:repeating-linear-gradient(135deg,var(--paper) 0 8px,var(--plaster) 8px 9px)}
.way--drop.is-over{border:1.5px solid var(--ink);background:var(--paper)}
.way--code{cursor:default;flex-wrap:wrap;row-gap:8px;padding:10px 8px 8px 14px}
.way--code>label{flex:1 0 100%}
/* the field gets the full row, so "Paste a link or a board code" is never cut */
.codef{display:flex;gap:6px;flex:1;min-width:0}
.codef input{flex:1;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line-3);border-radius:2px;background:var(--paper-2);font:400 14px/1 var(--f-body);color:var(--ink)}
.codef input::placeholder{color:var(--muted)}
.codef .btn{min-height:38px;padding:0 14px}
/* quiz */
.qz{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);padding-bottom:4px}
.qz__o{all:unset;cursor:pointer;display:grid;grid-template-rows:1fr auto;min-height:0;gap:12px}
.qz__img{position:relative;border-radius:2px;overflow:hidden;min-height:0;background:#d9dad6}
.qz__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%}
.qz__o:hover .qz__img,.qz__o.is-hover .qz__img{box-shadow:0 0 0 1px var(--ink)}
.qz__o:focus-visible .qz__img{outline:2px solid var(--oxblood);outline-offset:3px}
.qz__cap{display:flex;align-items:baseline;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.qz__cap b{font:400 21px/1.2 var(--f-display);color:var(--ink)}
.qz__cap kbd,kbd.k{margin-left:auto;font:600 12.5px/1 var(--f-body);color:var(--muted);border:1px solid var(--line-2);border-radius:2px;padding:4px 7px;background:var(--paper)}
.qh{display:flex;align-items:flex-start;gap:18px}
.qh .p-h1{flex:1}
.qh__n{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-top:12px;font:500 13.5px/1 var(--f-body);color:var(--muted)}
.ticks{display:flex;gap:3px}
.ticks i{width:7px;height:7px;box-shadow:inset 0 0 0 1px var(--line-2)}
.ticks i.on{background:var(--ink-2);box-shadow:none}
.ticks i.now{box-shadow:inset 0 0 0 1px var(--ink)}
.rl--q{margin-top:20px}
.ans{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ans li{border-bottom:1px solid var(--line)}
.ans button{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:baseline;width:100%;padding:7px 0;font-size:13.5px;line-height:1.35}
.ans .n{color:var(--muted);font-variant-numeric:tabular-nums}
.ans .q{color:var(--ink-2)}
.ans b{font-weight:600;color:var(--ink);white-space:nowrap}
.note-line--m{color:var(--muted);font-size:13.5px}
/* colour */
.ptabs{margin-top:20px}
.cg{margin-top:14px}
.cg__foot{display:flex;align-items:center;gap:18px;margin-top:10px}
.cg__foot .chk--in{margin-left:0}
.cg__own{margin-left:auto;font-size:13.5px}
.ch.is-hover::after{content:'';position:absolute;left:30px;top:44px;width:16px;height:23px;z-index:5;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 26'%3E%3Cpath d='M1 1v19l5-5 4 9 3-1.4-4-8.6h7z' fill='%23fff' stroke='%231f1813' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat 0 0/16px 23px}
.pop--ph{right:0;bottom:calc(100% + 4px)}
/* space */
.lays{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lay{all:unset;cursor:pointer;box-sizing:border-box;display:grid;gap:4px;padding:7px 8px 8px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink)}
.lay:hover{border-color:var(--line-2)}
.lay:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.lay[aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.lay svg{width:100%;height:52px;color:var(--ink)}
.lay span{font:500 12.5px/1.25 var(--f-body);color:var(--ink-2);text-wrap:balance}
.lay[aria-checked=true] span{color:var(--ink)}
.lay--up{border-style:dashed;border-color:var(--line-2);background:repeating-linear-gradient(135deg,var(--paper) 0 7px,var(--plaster) 7px 8px)}
.lay--up .up{height:52px;display:grid;place-items:center}
.lay--up .up svg{width:24px;height:24px;color:var(--oxblood)}
.halves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
.halves .seg button{font-size:13.5px}
.halves .grp__l{min-height:28px}
.sub{margin-top:6px;font-size:13px;color:var(--muted)}
.more__in{padding:0 0 4px;border-bottom:1px solid var(--line)}
.grp--t{margin-top:6px}
.plate--lt{grid-template-columns:1fr auto}
.tb--wide{grid-column:auto}
.tl--stop{margin-top:10px;padding-left:0}
.qc{display:flex;flex-wrap:wrap;gap:6px}
.qc button{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:2px;background:var(--paper-2);font:500 13.5px/1.2 var(--f-body);color:var(--ink)}
.qc button:hover{border-color:var(--ink)}
.qc button[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qc button:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.in--ph{color:var(--muted)}
.caret{display:inline-block;width:1px;height:16px;background:var(--ink);margin-left:1px}
.chk--ns{font-size:13.5px;color:var(--ink-2);flex:none}
.chk--ns i{width:16px;height:16px}
.stp{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.stp__l{font:600 14px/1.3 var(--f-body);color:var(--ink)}
.stp__c{display:flex;align-items:center;gap:10px}
.stp__v{display:flex;flex-direction:column;align-items:center;min-width:92px}
.stp__v b{font:500 17px/1.2 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.stp__v span{font-size:12.5px;color:var(--muted)}
.ib--b{width:36px;height:36px;border:1px solid var(--line-2);background:var(--paper)}
.ib--b .ico{width:14px;height:14px}
.rl--next{margin-top:20px}
.tl--done{font-weight:600;padding-left:0}
/* option cards from renders */
.ocs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
.ocs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.oc2{all:unset;cursor:pointer;display:grid;gap:7px;min-width:0;align-content:start}
.oc2__img{display:block;aspect-ratio:1.6;overflow:hidden;border-radius:1px;background:#e1e2de;transition:box-shadow var(--d-mid) var(--ease)}
.oc2__img img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.35);transform-origin:var(--o,50% 55%)}
.oc2__img{position:relative}
.sw__c{position:relative}
.oc2:hover .oc2__img,.oc2.is-hover .oc2__img{box-shadow:var(--sh-chip-up)}
.oc2[aria-checked=true] .oc2__img{outline:1px solid var(--ink);outline-offset:3px}
.oc2:focus-visible .oc2__img{outline:2px solid var(--oxblood);outline-offset:3px}
.oc2__t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.oc2__t b{font:500 13.5px/1.3 var(--f-body);color:var(--ink-2)}
.oc2[aria-checked=true] .oc2__t b{color:var(--ink);font-weight:600}
.mtags{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.mtag{all:unset;cursor:pointer;display:grid;justify-items:center;gap:8px;text-align:center}
.mtag .mt{transition:transform var(--d-mid) var(--ease)}
.mtag:hover .mt{transform:translateY(-2px)}
.mtag[aria-checked=true] .mt{outline:1px solid var(--ink);outline-offset:3px}
.mtag__a{position:relative;display:block;flex:none}
.mtag .mtag__n{font:500 12.5px/1.25 var(--f-body);color:var(--ink-2)}
.mtag[aria-checked=true] .mtag__n{color:var(--ink);font-weight:600}
.sws{display:flex;gap:18px}
.sw{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;font:500 13.5px/1 var(--f-body);color:var(--ink-2)}
.sw__c{width:30px;height:30px;background:var(--c);border-radius:1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),var(--sh-chip)}
.sw[aria-checked=true] .sw__c{outline:1px solid var(--ink);outline-offset:3px}
.sw[aria-checked=true]{color:var(--ink)}
.bld{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.bld ul{list-style:none;margin:10px 0 0;padding:0}
.bld li{display:grid;grid-template-columns:16px 1fr;column-gap:8px;padding:6px 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.bld li::before{content:'';width:9px;height:9px;margin-top:5px;box-shadow:inset 0 0 0 1px var(--ink-2);grid-row:1/span 2}
.bld li b{grid-column:2;color:var(--ink);font-weight:600}
.bld li span{grid-column:2}
/* project and send */
.stage--short{flex:1}
.rl--r>li>button{padding:10px 0;gap:12px}
.rl--r .rl__t b{font-size:14.5px;font-weight:500}
.rl--r [aria-checked=true] .rl__t b{font-weight:600}
.rl--tight>li>button{padding:8px 0}
.chk--row{margin-top:18px}
.chk--row span{font-size:13px}
/* the panel's two columns exist as boxes only on a tablet; elsewhere their content is one flow */
.pmain,.pside{display:contents}
/* tablet portrait: the panel's content in two halves */
@media (max-width:899px){
.panel__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-content:start}
.panel__in>*{grid-column:1/span 6}
.panel__in>.p-h1,.panel__in>.p-intro{grid-column:1/-1}
/* the choices on c1-c6, Living with it then Tell your builder now stacked on c7-c12 (controls.js .pmain, .pside) */
.panel__in>.pmain{display:block;grid-column:1/span 6;min-width:0}
.panel__in>.pside{display:block;grid-column:7/span 6;min-width:0}
.pside>.live,.pside>.bld{margin-top:0;border-top:0;padding-top:0}
.pside>.live+.bld{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.panel__in>.iline{grid-column:1/-1}
/* the compare panel's own Living with it (stage.js) */
.panel__in>.live{grid-column:7/span 6;grid-row:3/span 3;margin-top:0;border-top:0;padding-top:0}
.panel__in>.ptabs{margin-top:18px}
.p-h1{font-size:36px}
}
/* ---------------- final pass ---------------- */
.ptab .pvw{color:var(--oxblood)}
.ptab .dc.is-unsure{outline:1px dashed var(--ink);outline-offset:2px}
.cg__foot .chk,.cg__own{white-space:nowrap}
.cg+.more{margin-top:16px}
/* one hairline between More choices and the block under it, never two */
@media (min-width:900px){
.more+.live,.more+.bld{margin-top:22px;padding-top:0;border-top:0}
}
.stage--c .cv::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:2px;box-shadow:inset 0 0 0 2px var(--oxblood)}
.lay svg{height:44px}
.lay--up .up{height:44px}
.halves .grp__l .chk--in{margin-left:auto}
.pk--tile::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - .5px),rgba(0,0,0,.2) calc(50% - .5px),rgba(0,0,0,.2) calc(50% + .5px),transparent calc(50% + .5px))}
.wl{display:block;width:var(--w,62px);height:calc(var(--w,62px) * .613);background:var(--c);border-radius:1px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),var(--sh-chip);transition:transform var(--d-mid) var(--ease)}
.chk--hh{font-size:14px;color:var(--ink)}
.oc2__img img{transform:scale(var(--z,1));transform-origin:var(--o,50% 50%);object-position:var(--o,50% 50%)}
.ocs--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
.ocs--4 .oc2__img{aspect-ratio:1.25}
.ocs--4 .oc2__t b{font-size:12.5px;line-height:1.25}
.oc2--none .oc2__img{background:repeating-linear-gradient(135deg,var(--paper) 0 7px,var(--plaster) 7px 8px);box-shadow:inset 0 0 0 1px var(--line)}
.mtags{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px}
.mtag{display:flex;align-items:center;gap:10px;text-align:left;justify-items:start}
.mtag .mtag__n{font:500 13px/1.25 var(--f-body);color:var(--ink-2)}
.mtag[aria-checked=true] .mtag__n{color:var(--ink);font-weight:600}
.mtag .tier{margin-left:auto;flex:none}
.sw .tier{margin-left:2px}
.bld li::before{grid-row:1/span 2}
.bld li b{font-weight:600}
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tcard{all:unset;cursor:pointer;box-sizing:border-box;display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line-2);border-radius:2px;background:var(--paper)}
.tcard .radio{margin-top:1px}
.tcard b{display:block;font:600 14px/1.3 var(--f-body);color:var(--ink)}
.tcard span span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted)}
.tcard[aria-checked=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tcard:focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.sgrid{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);border-radius:2px;background:var(--paper)}
.sgrid button{all:unset;cursor:pointer;box-sizing:border-box;display:grid;place-items:center;min-height:42px;padding:0 8px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);font:500 14px/1.2 var(--f-body);color:var(--ink-2);text-align:center}
.sgrid button:hover{background:rgba(28,30,34,.04)}
.sgrid button[aria-checked=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sgrid button:focus-visible{outline:2px solid var(--oxblood);outline-offset:-2px}
@container (max-width:660px){
  .at:has(>.card){top:calc((max(100cqw,160cqh)*.625 - 100cqh)/2 + 62px)}
  .card{max-height:calc(100cqh - 78px)}
  .card>.rows{mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}
}
/* ---------------- fixes from the second audit ---------------- *//* Start: a returning visitor's board is the first row of the list, under the h1 and the intro */
.rl--feel>li.rl__mine{border-bottom-color:var(--line-2)}
.rl__mine>button{padding:10px 0 12px}
.rl__img{flex:none;display:block;width:86px;height:54px;padding:2px;background:#fff;box-sizing:border-box;box-shadow:0 1px 1px rgba(28,30,34,.2),0 8px 12px -8px rgba(28,30,34,.5)}
.rl__img img{display:block;width:100%;height:100%;object-fit:cover}
.rl--feel .rl__mine .rl__t>.code{margin-top:4px;color:var(--ink-2);white-space:normal}
/* breaks only between the groups of four */
.rl__mine .rl__go{opacity:1}
.panel__ts{flex:none;padding:12px 0 0;border-top:1px solid var(--line)}
@media (max-width:899px){
.panel__ts{position:fixed;left:0;right:0;bottom:78px;z-index:7;padding:10px var(--margin) 0;background:var(--plaster)}
}
/* focus: these components ring a child, so their own outline is off */
.chk:focus-visible,.qz__o:focus-visible,.oc2:focus-visible,.mtag:focus-visible{outline:none}
.mtag:focus-visible .mt{outline:2px solid var(--oxblood);outline-offset:3px}
.oc2.is-focus .oc2__img{outline:2px solid var(--oxblood);outline-offset:3px}
/* an unkept shared board: no letter */
.ver--sh{width:auto;padding:0 9px;background:var(--ink);border-color:var(--ink);color:var(--paper);white-space:nowrap}
.grp--sink .oc2__img{aspect-ratio:1.6}
/* Project: Photos of your kitchen now (promoted for a renovation) */
.grp__sub{margin:-6px 0 10px;font-size:13.5px;line-height:1.45;color:var(--muted)}
/* tablet portrait Start: the list on the left half, the ways in on the right */
@media (max-width:899px){
.sb--start .panel__in>.rl--feel{grid-column:1/span 6}
.sb--start .panel__in>.ways{grid-column:7/span 6;grid-row:3;margin-top:12px;align-self:start}
}
/* the title block holds Take a photo and Comment; the kitchen carries nothing */
.pc__t{display:flex;align-items:center;gap:14px;margin-top:7px;min-height:22px}
.ptool{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:600 13px/1.2 var(--f-body);color:var(--ink);white-space:nowrap}
.ptool .ico{width:13px;height:13px;flex:none}
.ptool:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ptool:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}
.ptool[aria-pressed=true]{text-decoration:underline;text-decoration-color:var(--oxblood);text-decoration-thickness:2px;text-underline-offset:4px}
.ptool[aria-disabled=true]{color:var(--muted);cursor:default;text-decoration:none}
.pc__p{margin-top:6px;min-height:28px}
.ph-none{max-width:none;white-space:nowrap}
/* cost feedforward: a hollow marker where the hovered option would move the picks */
.cr__r b.cr__g{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tray__ff{display:block;margin-top:7px;font-size:12.5px;line-height:1.4;color:var(--ink)}
/* Start: cost words on the starting points, hover marks the name, the ways in as ruled rows */
.rl__c{flex:none;margin-left:auto;font:500 12.5px/1.2 var(--f-body);color:var(--muted);white-space:nowrap}
.rl--feel .rl__go{display:none}
.rl--feel li.is-hover .rl__go{display:inline-flex;opacity:1}
.rl--feel li.is-hover .rl__c{display:none}
.rl>li.is-hover{background:none;box-shadow:none}
.rl>li.is-hover .rl__n{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.rl__mine .rl__t>.code{white-space:nowrap}
.ways{gap:0;margin-top:16px;border-top:1px solid var(--line)}
.way{min-height:56px;padding:9px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.way:hover{border-color:var(--line)}
.way:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.way--drop{border-style:solid;background:none}
.way--drop.is-over{border:0;border-bottom:1px solid var(--line);padding:9px 12px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.way--code{padding:12px 0}
/* Living with it as a schedule on the panel's own columns: the label on c9, the words on c10 to c12 */
.live__pick .pvw{color:var(--ink-2);font-weight:500}
.sched{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);margin:10px 0 0;border-top:1px solid var(--line)}
.sched>div{display:contents}
.sched dt,.sched dd{padding:8px 0 9px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45}
.sched dt{grid-column:1;font-weight:600;color:var(--ink);display:block}
.sched dt::after{content:none}
.sched dd{grid-column:2/span 3;margin:0;color:var(--ink-2);display:block}
.live .sched{display:grid;gap:0 var(--gap)}
/* Space: plans two across on the panel's halves, with cost words under the sizes */
.lays{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:10px}
.lay{padding:8px 10px 9px;gap:6px}
.lay svg{height:92px}
.lay--up .up{height:92px}
.lay span{font-size:13px}
.lay--plans .lay__pl{display:block;height:92px;overflow:hidden}
.lay--plans .lay__pl svg{width:100%;height:92px}
.segc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:5px;font-size:12.5px;line-height:1.2;color:var(--muted);text-align:center}
.wdir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);align-items:center}
.wdir svg{grid-column:1;width:100%;height:auto;color:var(--ink)}
.wdir .seg{grid-column:2/span 3}
/* the panel's inner choice grids sit on its columns: halves at the c10 and c11 line */
.tcards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:8px}
.mtags{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:10px}
.mtag{display:flex;align-items:center;gap:10px;justify-items:start;text-align:left;min-width:0}
.mtag__a{position:relative;flex:none;display:block;width:60px;height:38px;overflow:hidden;border-radius:1px;background:#e1e2de}
.mtag__a img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1.7));transform-origin:var(--o,50% 50%)}
.mtag[aria-checked=true] .mtag__a::after,.oc2[aria-checked=true] .oc2__img::after{content:'';position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 3.5px var(--paper)}
.oc2[aria-checked=true] .oc2__img{outline:none}
.mtag[aria-checked=true] .mt{outline:none}
.mtag:hover .mtag__a img{filter:brightness(1.04)}
.mtag:focus-visible .mtag__a{outline:2px solid var(--oxblood);outline-offset:3px}
/* Storage: a checklist; Look inside opens the cabinet on the stage */
.sto{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.sto>li{display:flex;align-items:center;gap:12px;min-height:50px;padding:5px 0;border-bottom:1px solid var(--line)}
.sto>li.is-open{box-shadow:inset 2px 0 0 var(--ink);padding-left:12px}
.sto .chk{flex:none;margin:0}
.sto .sto__b{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;gap:12px;min-height:44px;white-space:normal}
.sto .sto__b>i{flex:none}
.sto .t{flex:1;min-width:0}
.sto .t b{display:block;font:600 14px/1.3 var(--f-body);color:var(--ink)}
.sto .t span{display:block;font-size:13px;line-height:1.35;color:var(--muted)}
.sto .look{all:unset;cursor:pointer;flex:none;font:600 13px/1.2 var(--f-body);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;white-space:nowrap}
.sto .look[aria-pressed=true]{text-decoration-color:var(--oxblood);text-decoration-thickness:2px}
.nkey{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--muted)}
.seg--pair button{font-size:13.5px}
.ptab .pvw{color:var(--ink-2)}
.grp__p{margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.oc2__t em,.mtag__n em{display:block;margin-top:2px;font:500 12.5px/1.25 var(--f-body);font-style:normal;color:var(--muted)}
.oc2__t em{flex:none;white-space:nowrap;align-self:flex-start}
.mtag__n{min-width:0}
/* option cards two or four across sit on the panel's columns; three across (the range cards) are the one exempt split (3.1) */
.ocs{column-gap:var(--gap)}
.ocs--3{column-gap:12px}
.sched--c{margin:10px 16px 0;grid-template-columns:70px minmax(0,1fr);column-gap:10px}
.sched--c dt,.sched--c dd{font-size:13px}
.sched--c dd{grid-column:2}
.sto>li.is-dis .t b,.sto>li.is-dis .t span{color:var(--muted)}
.sto>li.is-dis .chk i{opacity:.45}
/* ---------------- fix3: one plate height per breakpoint, so the stage keeps one size on every screen (3.2, 7.6) ---------------- */
.plate:not(.plate--lt){height:112px;box-sizing:border-box}
/* the samples tray's height before app.js fills it, so the stage doesn't shrink under the first paint */
.bench>.tray{height:126px;box-sizing:border-box}
.plate .phc{min-height:28px}
.plate .phc__t{gap:0}
.plate .phc__t b{line-height:14.3px}
.plate .phc__t span{line-height:13.7px}
@media (max-width:1199px){
.plate:not(.plate--lt){height:155px;grid-template-rows:minmax(0,1fr) auto}
.bench>.tray{height:117px;box-sizing:border-box}
}
/* Start rows and What changed on the panel's columns: the kit, the thumbnail or the label in the first column, the words
   from the second column line (c10 at 1440), as Living with it does */
.rl--feel{--pc:4;--kc:1}
/* --pc: the page columns the list spans; --kc: the columns its first cell takes */
@media (max-width:1199px){
.rl--feel{--pc:5}
.rl__k{zoom:.66}
}
@media (max-width:899px){
.rl--feel{--pc:6;--kc:2}
.rl__k{zoom:1}
}
.rl--feel>li>button{grid-template-columns:calc((100% - (var(--pc) - 1) * var(--gap)) / var(--pc) * var(--kc) + (var(--kc) - 1) * var(--gap)) minmax(0,1fr) auto;column-gap:var(--gap)}
.rl--feel>li>button{display:grid;align-items:center}
.rl__k{width:auto;min-width:0;gap:2px}
.rl__img{width:100%;height:auto;aspect-ratio:16/10}
/* ================================================================================================
   The live page: the site's header and footer around the studio, scrolling, the sketch and the 3D
   canvas, the fallbacks the shell draws until the other modules mount, and the phone frame (7.20).
   ================================================================================================ */
/* the site header, at the studio's height, never hiding on scroll */
.site-head.sh{position:relative;top:auto;height:var(--hh);transform:none;border-bottom:1px solid var(--line);view-transition-name:none}
.site-head.sh.is-hidden{transform:none}
.site-head.sh>.wrap{max-width:calc(var(--max) + 2 * var(--margin));display:grid;gap:0;column-gap:var(--gap)}
body[data-step=feel] .sh__right .ib{display:none}
.sh__logo img{height:40px;width:auto;max-width:none}
.sh .saved[hidden]{display:none}
.stepb{display:none}
.stepm[aria-expanded=true] .ico,.stepb[aria-expanded=true] .ico{transform:rotate(180deg)}
.skip{text-decoration:none}
/* the studio fills the window under the header from 900 up; the site footer follows it */
.sb{height:calc(100vh - var(--hh));height:calc(100dvh - var(--hh));box-sizing:border-box}
.panel__in{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.panel__in:focus{outline:none}
.panel__foot[hidden]{display:none}
.grab{display:none}
.vb .site-foot{margin-top:0}
/* the sketch, then the 3D kitchen over it */
.cv__scene>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cv__gl{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity var(--d-card) var(--ease)}
.cv__gl canvas{display:block;width:100%!important;height:100%!important}
.stage.is-3d .cv__gl{opacity:1}
.stage.is-3d .cv__scene{visibility:hidden}
.stage.is-plan .cv__gl{opacity:0}
/* The wait for the 3D kitchen: up from the first paint, in place of the sketch (a browser that can't draw 3D, or
   no scripts, gets the sketch: stage.js takes is-loading off, and .js guards this). */
.js .stage.is-loading .cv__scene{visibility:hidden}
.cv__load{display:none}
.js .stage.is-loading .cv__load{position:absolute;left:50%;top:50%;z-index:3;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);box-sizing:border-box;padding:12px 16px;transform:translate(-50%,-50%);background:var(--paper);border:1px solid var(--line-2);border-radius:2px;font-size:14px;font-weight:500;line-height:1.35;color:var(--ink)}
.stage.is-plan .cv__load,.stage.is-quiz .cv__load,.stage.is-feel .cv__load{display:none!important}
.cv__spin{flex:none;width:18px;height:18px;box-sizing:border-box;border:2px solid var(--line-2);border-top-color:var(--oxblood);border-radius:50%;animation:cv-spin .9s linear infinite}
@keyframes cv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cv__spin{animation:none;border-color:var(--oxblood)}}
.cv__ov{position:absolute;inset:0;z-index:2;pointer-events:none}
.cv__ov>*{pointer-events:auto}
.cv__ov:empty{display:none}
.cv__msg{z-index:4;max-width:calc(100% - 28px);box-sizing:border-box;padding:8px 12px;line-height:1.35}
.cv__msg[hidden]{display:none}
/* Start: a starting point's photograph while it is under the pointer */
.feelph{position:absolute;inset:0;background:#d9dad6}
.feelph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feelph .t2{display:none}
/* the quiz takes the whole stage */
.stage.is-quiz .cv{background:var(--plaster)}
.cv__ov .qz{position:absolute;inset:0;background:var(--plaster);padding-bottom:0}
.qz__img>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the quiz takes the bench: two pictures, no plate and no tray (s1q) */
.sb.is-quiz .plate,.sb.is-quiz .bench>.tray{display:none}
.sb.is-quiz .stage{margin-bottom:0}
.stage.is-quiz .cv__msg,.stage.is-quiz .cv__gl{display:none}
.rl--q>li>button,.rl--skip>li>button{display:flex;align-items:center;gap:12px}
.rl--q .rl__t,.rl--skip .rl__t{flex:1;min-width:0}
.rl--q .rl__t>span{display:block;font-size:13.5px;color:var(--muted)}
.rl--skip{margin-top:0;border-top:0}
.rl--skip b{font-weight:600;color:var(--ink)}
/* E0: the plan on the light table */
.lt--core{position:absolute;inset:0;display:grid;place-items:center;background:#fafaf8;background-image:linear-gradient(rgba(28,30,34,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(28,30,34,.045) 1px,transparent 1px);background-size:20px 20px}
.lt--core .lt__plan{width:86%;height:82%;display:grid;place-items:center}
.lt--core .lt__plan svg{max-width:100%;max-height:100%}
.lt--core .lt__cap{font-size:13px;color:var(--muted)}
/* the title block's name and code are buttons */
.tb__rn{all:unset;cursor:text;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tb__in{width:100%;box-sizing:border-box;height:28px;padding:0 6px;margin:-2px 0 -1px -7px;border:1px solid var(--line-3);border-radius:2px;background:var(--paper-2);font:400 var(--t-plate)/1 var(--f-display);color:var(--ink)}
button.code{all:unset;cursor:copy;font:500 12.5px/1.3 var(--f-body);letter-spacing:.03em;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tb__blurb{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* floor planks in the catalogue's colour, with a quiet grain */
.pk{background:var(--c,#c8a57d)}
.pk i{background:linear-gradient(90deg,rgba(0,0,0,.05),transparent 30%,rgba(255,255,255,.06) 55%,transparent 70%,rgba(0,0,0,.05)),var(--c,#c8a57d)}
.pk i:last-child{background:linear-gradient(90deg,transparent,rgba(0,0,0,.05) 40%,transparent 62%,rgba(255,255,255,.05)),var(--c,#c8a57d)}
/* metal finishes on the cabinet colour */
.mtag__a--css{display:grid!important;place-items:center;background:var(--c,#efebe3)!important}
.mtag__a--css>img{position:absolute;inset:0}
/* the cup and knob drawn in each metal (thumbs.js metalTag) */
.mtag__a .mtg{position:absolute;inset:0;display:block;width:100%;height:100%}
/* door styles under their names */
.chips--named{gap:12px 10px}
.ch__n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-top:6px;font:500 12.5px/1.25 var(--f-body);color:var(--muted);overflow:hidden;overflow-wrap:break-word;max-width:var(--chip-w)}   /* two lines: one cut "Slim Sh..." and "Raised ..." */
.ch[aria-checked=true] .ch__n{color:var(--ink);font-weight:600}
/* option cards drawn from the sketch until the 3D renders arrive */
.oc2__sk{position:absolute;inset:0;display:block;background:#ebebe7}
.oc2__sk svg{display:block;width:100%;height:100%}
.oc2__t{display:flex;flex-direction:column;gap:1px;font-size:13.5px;line-height:1.3;color:var(--ink-2)}
.oc2__t b{font-weight:500}
.oc2__t em{font-style:normal;font-size:12.5px;color:var(--muted)}
.hh{display:grid;gap:4px}
.hh .chk--row{margin-top:8px}
.chk__c{font-style:normal;font-weight:400;color:var(--muted);font-size:13px;margin-left:4px}
.flag{margin-left:auto;font-size:12.5px;color:var(--oxblood);white-space:nowrap}
/* No island: the sizes stay in view, switched off */
.seg button[aria-disabled=true]{color:var(--muted);cursor:default;background:none}
.seg button[aria-disabled=true][aria-checked=true]{background:var(--linen);color:var(--muted)}
/* the inline line after a new board or a shared link */
.iline{margin:12px 0 0;padding:9px 12px;border-left:2px solid var(--oxblood);background:var(--paper);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.panel__in>.iline{grid-column:1/-1}
.way__err{display:block;margin-top:6px;font-size:13px;color:var(--oxblood)}
.way__err[hidden]{display:none}
/* the step menu, the share pop */
.pop[data-core]{position:absolute}
.pop--menu{width:240px}
.smenu .n{width:18px;color:var(--muted);font-variant-numeric:tabular-nums}
.smenu [aria-current=step]{font-weight:600}
.smenu__x{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.pop--share{width:340px;max-width:calc(100vw - 24px)}
.share__f{display:flex;gap:6px;padding:12px 14px 0}
.share__in{flex:1;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line-3);border-radius:2px;background:var(--paper-2);font:400 13.5px/1 var(--f-body);color:var(--ink)}
.share__f .btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.share__m{margin:6px 14px 0;min-height:1em;font-size:13px;line-height:1.4;color:var(--ink-2)}
.share__m:empty{display:none}
.share__rows{border-top:1px solid var(--line);margin-top:12px!important}
.pop__f{display:flex;align-items:center;gap:10px;padding:12px 14px 14px}
.pop__f input[type=color]{width:44px;height:38px;padding:0;border:1px solid var(--line-3);border-radius:2px;background:var(--paper-2)}
/* the Project and Send fallbacks */
.fx{display:grid;gap:16px;margin-top:20px}
.fld__l{display:block;margin-bottom:6px;font:600 14px/1.3 var(--f-body);color:var(--ink)}
.fx input,.fx select,.fx textarea{width:100%;box-sizing:border-box;min-height:44px;padding:9px 11px;border:1px solid var(--line-3);border-radius:2px;background:var(--paper-2);font:400 15px/1.4 var(--f-body);color:var(--ink)}
.fld__note{margin:5px 0 0;font-size:13px;color:var(--muted)}
.sched--sum{margin-top:18px}
.panel__foot a.btn{text-decoration:none}
.panel__in>.fx,.panel__in>.sched--sum{grid-column:1/-1}

@media (max-width:1199px){
.sh__logo img{height:36px}
}
/* 600 to 899: the page scrolls and the footer sits under the panel */
@media (max-width:899px){
.sb{height:auto}
.vb .site-foot{padding-bottom:96px}
.sb--start .panel__in{padding-bottom:0}
}

/* ================================================================================================
   The phone, under 600: one 52 px bar, the kitchen on top, the choices in a sheet that snaps to
   three heights (7.20). The grab handle is a slider: arrows, Home and End move it.
   ================================================================================================ */
@media (max-width:599px){
:root{--hh:52px}
.vb{overflow:hidden;height:100vh;height:100dvh}
.vb .site-foot{display:none}
.site-head.sh{position:fixed;left:0;right:0;top:0;z-index:20;height:52px}
.site-head.sh>.wrap{display:flex;align-items:center;gap:4px;padding:0 4px 0 16px;height:52px}
.sh__logo img{height:26px}
.sh__nav{flex:1;min-width:0;align-self:center}
.steps,.stepm{display:none!important}
.stepb{all:unset;cursor:pointer;box-sizing:border-box;display:grid;grid-template-columns:auto 12px;column-gap:6px;align-items:center;min-height:44px;margin-left:12px;padding:0 4px}
.stepb b{grid-column:1;font:600 15px/1.15 var(--f-body);color:var(--ink)}
.stepb__n{grid-column:1;display:flex;align-items:center;gap:8px;font:400 12.5px/1.2 var(--f-body);color:var(--muted);white-space:nowrap}
.stepb__n .saved{margin:0;font-size:12.5px;gap:5px}
.stepb__n .saved::before{width:5px;height:5px}
.stepb .ico{grid-column:2;grid-row:1/span 2;width:12px;height:12px}
.sh__right{flex:none;gap:0}
.sh__right>.saved,.ib--redo,.tl--exit{display:none!important}
.sh__right .ib{width:44px;height:44px}
.sh__right .tl{padding:15px 10px;font-size:15px}
.sb{position:fixed;left:0;right:0;top:52px;bottom:0;height:auto;padding:0;--st:46.4vh;--st:46.4dvh}
.sb[data-snap=peek]{--st:calc(100vh - 272px);--st:calc(100dvh - 272px)}
.sb[data-snap=full]{--st:148px}
.sb>.wrap{display:block;height:100%;padding:0;max-width:none}
.bench{position:absolute;left:0;right:0;top:0;height:calc(var(--st) - 52px);padding:0;display:block}
.stage{position:absolute;inset:0;height:auto;margin:0}
.cv{border-radius:0}
.plate,.bench .tray{display:none}
.panel{position:absolute;left:0;right:0;top:calc(var(--st) - 52px);bottom:0;z-index:5;margin:0;display:flex;flex-direction:column;background:var(--plaster);box-shadow:0 -1px 0 var(--line-2),0 -10px 22px -16px rgba(28,30,34,.32);transition:top var(--d-mid) var(--ease)}
.bench{transition:height var(--d-mid) var(--ease)}
.grab{flex:none;display:grid;place-items:center;height:22px;cursor:grab;touch-action:none}
.grab i{width:40px;height:3px;background:var(--line-2);border-radius:1px}
.panel__in{display:block;flex:1;min-height:0;overflow-y:auto;padding:12px 20px 14px;margin:0}
.panel__in>*{grid-column:auto!important;grid-row:auto!important}
.panel__in>.live,.panel__in>.bld,.pside>.live,.pside>.bld{margin-top:18px!important;padding-top:16px!important;border-top:1px solid var(--line)!important}
.panel__foot{position:static;flex:none;display:flex;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--plaster);min-height:52px}   /* its buttons' height, kept while app.js draws them */
.panel__foot .foot__cost{display:none!important}
.panel__foot .btn{min-height:52px;font-size:16px}
.panel__foot .btn--back{flex:none;width:52px;padding:0;justify-content:center;font-size:0}
.panel__foot .btn--back::before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 8H3M7 4L3 8l4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 8H3M7 4L3 8l4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/16px no-repeat}
.panel__foot .btn--next{flex:1;justify-content:space-between;padding:0 20px}
.panel__foot>.tl{margin-left:auto;padding:14px 8px;font-size:15px}
.p-h1{font-size:30px;line-height:1.08;letter-spacing:-.018em}
.p-h1--xl{font-size:34px}
.p-intro{font-size:15.5px;margin-top:8px}
.grp{margin-top:16px}
.grp__l{font-size:15px;min-height:28px}
/* chips run in one row you can swipe */
.chips{display:flex;gap:6px;max-width:none;overflow-x:auto;margin:0 -20px;padding:6px 20px 8px;scrollbar-width:none;container-type:normal}
.chips::-webkit-scrollbar{display:none}
.chips .ch{flex:none;padding:2px}
.chips .dc,.chips .pk,.chips .wl,.chips .oc{--w:56px!important}
.chips--named .ch{width:64px}
.ch__n{max-width:64px}
.ptabs{margin-top:14px}
.ptab{height:52px}
.ocs,.ocs--3,.ocs--4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.lays{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.halves{grid-template-columns:minmax(0,1fr)!important}
.sched{grid-template-columns:96px minmax(0,1fr);column-gap:12px}
.sched dd{grid-column:2}
.chk{min-height:44px}
.rl--feel{--pc:6;--kc:2}
.rl>li>button{min-height:56px}
.rl__go{display:none}
.ways{margin-top:16px}
.way{min-height:56px}
.codef input{height:44px;font-size:16px}
.codef .btn{min-height:44px}
.cv__msg{left:12px;right:12px;bottom:auto;top:12px}
.qz{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;padding:8px}
.qz__cap b{font-size:16px}
.pop[data-core]{position:fixed;left:12px!important;right:12px;width:auto!important;top:auto!important;bottom:12px}
.fx input,.fx select,.fx textarea{font-size:16px}
/* Start on the phone: the shown kitchen's name on the photograph, the row it belongs to marked, the foot starts it */
.feelph .t2{display:inline-flex;position:absolute;z-index:4;top:16px;left:16px;align-items:center;height:40px;padding:0 12px;background:var(--paper);border:1px solid var(--line-2);border-radius:2px;font:400 17px/1 var(--f-display);color:var(--ink);white-space:nowrap}
.rl--feel>li>button{grid-template-columns:96px minmax(0,1fr) 12px!important;column-gap:14px!important;padding:8px 0}
.rl--feel>li>button[aria-current=true]{box-shadow:inset 3px 0 0 var(--oxblood);padding-left:10px}
.rl--feel .rl__t{display:block;grid-column:2;grid-row:1}
.rl--feel>li>button>:first-child{grid-row:1/span 2;grid-column:1}
.rl--feel .rl__c{grid-column:2;grid-row:2;margin-top:-2px;font-size:13.5px;color:var(--muted);text-align:left}
.rl--feel>li>button::after{content:'';grid-column:3;grid-row:1/span 2;width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg)}
.panel__foot[hidden]{display:none!important}
.rl--feel .rl__go{display:none!important}
.rl--feel .rl__c{display:block!important;opacity:1!important;margin:0;justify-self:start}
.sb--start .bench,.sb--start .panel{margin-top:0;padding-bottom:0}
/* the quiz on the phone is a page: no stage, the two pictures are the choices (p1q) */
.sb.is-quiz{--st:52px!important}
.sb.is-quiz .bench{display:none}
.sb.is-quiz .grab{display:none}
.sb.is-quiz .panel{box-shadow:none}
.rl--q .qo__img{display:block;grid-column:1/-1;height:calc((100dvh - 52px - 84px - 330px) / 2);min-height:120px;overflow:hidden;border-radius:2px;background:#d9dad6}
.rl--q .qo__img svg{display:block;width:100%;height:100%}
.rl--q>li>button{flex-wrap:wrap;row-gap:8px}
.rl--q .qo__img{flex:0 0 100%}
/* at Peek the sheet opens on the choices; the step's h1 and intro stay for screen readers and come back at Half */
.sb[data-snap=peek] .panel__in>.p-h1,.sb[data-snap=peek] .panel__in>.p-intro{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sb[data-snap=peek] .panel__in>.grp:first-of-type,.sb[data-snap=peek] .panel__in>.ptabs{margin-top:4px}
}
@media (max-width:359px){
.sh__logo img{height:20px}
.stepb{margin-left:8px}
.stepb__n .saved{display:none}
.sh__right .tl{padding:15px 8px}
.panel__in{padding-left:16px;padding-right:16px}
.chips{margin:0 -16px;padding-left:16px;padding-right:16px}
.p-h1--xl{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
.panel,.bench,.cv__gl{transition:none!important}
}
/* ---------------- fix-1 (core): cards, rails, targets, motion ---------------- */
/* option cards (7.10): the name left in 500 13.5px, the cost word on the right; the studio's cut sits over the sketch */
.oc2__t{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:8px;text-align:left}
.oc2__t b{min-width:0}
.oc2__t em{flex:none;white-space:nowrap;margin-top:2px;line-height:1.25}
.oc2__img img.art{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:var(--o,50% 50%);transform:scale(var(--z,1));transform-origin:var(--o,50% 50%);opacity:0;transition:opacity var(--d-mid) var(--ease)}
.oc2__img.has-art img.art{opacity:1}
.mtag__a img.art{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:var(--o,50% 50%);transform:scale(var(--z,1));transform-origin:var(--o,50% 50%);background:var(--c,#efebe3)}
.mtag__a.has-art .mt{visibility:hidden}
.qz__img>img{z-index:1;opacity:0;transition:opacity var(--d-mid) var(--ease)}
.qz__img.has-art>img{opacity:1}
/* Your plans, once a plan is read: its thumbnail, a plain border, checked */
.lay--plan .lay__th{display:grid;place-items:center;height:92px;overflow:hidden}
.lay--plan .lay__th svg{width:100%;height:100%}
.note-line--plan .tl-u{white-space:nowrap}
.sub--read{margin-top:2px}
/* targets of 24 px at least on desktop, grown by padding taken back by margin, so nothing moves (13) */
.tray .tl-u,.live__for .tl-u,.cg__own,.unsure .tl-u,.iline .tl-u{padding:4px 2px;margin:-4px -2px}
/* Your own colour sits at c12 in the colour group's label row (s2a, s5a) */
.cg__own{margin-left:auto}
.tb__rn{padding-block:4px;margin-block:-4px}
/* the board code in the title block: a 24 px target, same line height */
button.tb__code{padding-block:4px;margin-block:-4px}
@media (pointer:coarse){.qz .k,.rl--q .k{display:none}}
@media (max-width:599px){
.sh__logo{min-height:44px;align-items:center}
/* the grab is 44 px: half of it reaches over the kitchen (7.20) */
.grab{height:44px;margin-top:-22px;padding-top:22px;box-sizing:border-box;position:relative;z-index:1}
.sb.is-quiz .grab{display:none}
.panel .tl-u{padding-block:calc((45px - 1lh) / 2);margin-block:calc((1lh - 45px) / 2)}
/* the stage's message sits under the version tag and Comment, never over them */
.cv__msg{top:68px}
/* rails (7.20): a label row over one row of chips you can swipe */
.pgp__l{display:flex;align-items:center;gap:8px;min-height:28px;margin-bottom:6px;font:600 15px/1.3 var(--f-body);color:var(--ink)}
.pgp__l>b{font-weight:600;flex:none}
.pgp__l>.v{font-weight:400;font-size:14.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pgp__l>.pvw{font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp__l .chk,.chk--44{margin:-8px 0 -8px auto;min-height:44px;font-size:14.5px;flex:none}
.rail{display:flex;align-items:flex-end;gap:6px;overflow-x:auto;margin:0 -20px;padding:6px 20px 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.rail::-webkit-scrollbar{display:none}
.rail__g{display:contents}
.rail .ch{flex:none;padding:2px}
.rail .dc{--w:40px!important}
.rail .div{flex:none;align-self:stretch;width:1px;background:var(--line-2);margin:4px 6px}
.rail .rail__own{flex:none;align-self:center;display:inline-flex;align-items:center;min-height:44px;margin:0 0 0 8px;padding:0;font-size:14.5px;white-space:nowrap}
.lbl-s{display:none}
.grp--rail+.grp--rail{margin-top:18px}
.chips .dc,.chips .pk,.chips .wl,.chips .oc{--w:40px!important}
.chips--named .dc{--w:48px!important}
.chips--named .ch{width:56px}
.ch__n{max-width:56px}
/* the peek snap: the step's first group as one rail above the foot */
.sb[data-snap=peek] .panel__in>.iline{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sb[data-snap=peek] .panel__in>.grp--first{margin-top:4px}
.sb[data-snap=peek] .panel__in>.grp--first .ocs,.sb[data-snap=peek] .panel__in>.grp--first .lays{display:flex!important;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 6px;scrollbar-width:none}
.sb[data-snap=peek] .panel__in>.grp--first .ocs::-webkit-scrollbar,.sb[data-snap=peek] .panel__in>.grp--first .lays::-webkit-scrollbar{display:none}
.sb[data-snap=peek] .panel__in>.grp--first .oc2{flex:0 0 84px}
.sb[data-snap=peek] .panel__in>.grp--first .oc2__img{aspect-ratio:1.6}
.sb[data-snap=peek] .panel__in>.grp--first .oc2__t,.sb[data-snap=peek] .panel__in>.grp--first .lay>span:last-child,.sb[data-snap=peek] .panel__in>.grp--first .ch__n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sb[data-snap=peek] .panel__in>.grp--first .lay{flex:0 0 84px;padding:6px 8px}
.sb[data-snap=peek] .panel__in>.grp--first .lay svg,.sb[data-snap=peek] .panel__in>.grp--first .lay--up .up,.sb[data-snap=peek] .panel__in>.grp--first .lay__th{height:44px}
.sb[data-snap=peek] .panel__in>.grp--first .chips--named .dc{--w:40px!important}
.sb[data-snap=peek] .panel__in>.grp--first .chips--named .ch{width:auto}
}
@media (max-width:359px){
.lbl-l{display:none}
.lbl-s{display:inline}
.rail,.sb[data-snap=peek] .panel__in>.grp--first .ocs,.sb[data-snap=peek] .panel__in>.grp--first .lays{margin:0 -16px;padding-left:16px;padding-right:16px}
}
/* reduced motion: shadow only, no rise (section 11) */
@media (prefers-reduced-motion:reduce){
.ch:hover>span:first-child,.ch.is-hover>span:first-child,.smp:hover .dc,.smp:hover .oc,.smp:hover .mt,.smp:hover .pk,.mtag:hover .mt{transform:none!important}
.oc2__img img.art,.qz__img>img,.ch>span:first-child,.mtag .mt{transition:none!important}
}
/* ---------------- fix3: focus comes last. The global ring is restated after every reset, including all:unset (the
   What changed links and the comment actions reset with it), then the components that ring a child turn their own
   outline off, then the 3 px artefact rings, which also win over a checked card's outline, then the offsets set above */
:is(a,button,input,select,textarea,summary,[tabindex],[role]):focus-visible{outline:2px solid var(--oxblood);outline-offset:2px}
.ch:focus-visible,.chk:focus-visible,.qz__o:focus-visible,.oc2:focus-visible,.mtag:focus-visible{outline:none}
.oc2:focus-visible .oc2__img,.oc2.is-focus .oc2__img,.mtag:focus-visible .mt,.mtag:focus-visible .mtag__a,.qz__o:focus-visible .qz__img{outline:2px solid var(--oxblood);outline-offset:3px}
.chk:focus-visible i{outline:2px solid var(--oxblood);outline-offset:2px}
.cv:focus-visible,.phc:focus-visible,.ptool:focus-visible{outline-offset:3px}
.ptab:focus-visible{outline-offset:-3px}
.smp:focus-visible,.sun__n:focus-visible{outline-offset:4px}
.grab:focus-visible{outline-offset:-2px}
/* fix-2 (core): phone targets. The metal tags are 44 px tall rows (13) */
@media (max-width:599px){
.mtag{min-height:44px}
}