.showroom{--sky-top:#e7d9c6;--sky-horizon:#f5c994;--sky-floor:#eee1cc;--stage-top-stop:30%;--stage-floor-stop:70%;--sun-lift:.3;--hz:calc(var(--stage-top-stop) + (var(--stage-floor-stop) - var(--stage-top-stop)) * (.9 - .42 * var(--sun-lift)));--sky-up:calc(var(--stage-top-stop) + (var(--hz) - var(--stage-top-stop)) * .45);--sky-near:calc(var(--stage-top-stop) + (var(--hz) - var(--stage-top-stop)) * .8);--haze:calc(var(--hz) + (var(--stage-floor-stop) - var(--hz)) * .5);isolation:isolate;background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-top) var(--stage-top-stop), color-mix(in srgb, var(--sky-top) 70%, var(--sky-horizon)) var(--sky-up), color-mix(in srgb, var(--sky-top) 25%, var(--sky-horizon)) var(--sky-near), color-mix(in srgb, var(--sky-horizon) 72%, var(--sky-top)) var(--hz), color-mix(in srgb, var(--sky-horizon) 30%, var(--sky-floor)) var(--haze), var(--sky-floor) var(--stage-floor-stop), var(--sky-floor) 100%);height:calc(100svh - 98px);min-height:600px;max-height:1100px;color:var(--ink);position:relative;overflow:hidden}.showroom[data-tone-top=light] .showroom__intro,.showroom[data-tone-bottom=light] .showroom__dock,.showroom[data-tone-bottom=light] .showroom__time,.showroom[data-tone-bottom=light] .showroom__hint,.showroom[data-tone-bottom=light] .showroom__status{--tone:var(--white)}.showroom__intro,.showroom__dock,.showroom__time,.showroom__hint,.showroom__status{--tone:var(--ink);color:var(--tone);z-index:2;position:absolute}.showroom__viewport{pointer-events:none;place-items:center;display:grid;position:absolute;inset:3% 2% 12% 26%}.showroom-plan{width:100%;height:100%;max-height:100%;transition:opacity .5s}.showroom__canvas{z-index:1;opacity:0;cursor:grab;touch-action:pan-y;width:100%;height:100%;transition:opacity .5s;display:block;position:absolute;inset:0}.showroom.is-dragging .showroom__canvas{cursor:grabbing}.showroom.is-live .showroom__canvas{opacity:1}.showroom.is-live .showroom-plan{opacity:0}.showroom__canvas:focus-visible{outline:2px solid var(--focus-ring,#ad5000);outline-offset:-10px}.showroom[data-tone-bottom=light]{--focus-ring:var(--white)}.showroom__intro{top:clamp(32px,6vh,72px);left:var(--gutter);pointer-events:none;max-width:28rem}.showroom__intro h1{letter-spacing:-.055em;font-size:clamp(46px,5.4vw,88px);line-height:.98}.showroom__lede{margin-top:22px}.showroom__hook,.showroom__invite{display:block}.showroom__hook{font-size:clamp(24px,2.4vw,36px)}.showroom__invite{text-wrap:pretty;max-width:40ch;margin-top:1.05em;font-size:20px;font-style:italic;line-height:1.5}.showroom__invite strong{font-weight:600}.showroom__invite .showroom__invite-cta{font-style:normal;font-weight:700}.showroom__dock{left:var(--gutter);width:min(320px, 100% - var(--gutter) * 2);flex-direction:column;align-items:flex-start;gap:18px;display:flex;bottom:clamp(28px,5vh,56px)}.showroom__time{right:var(--gutter);width:232px;bottom:clamp(28px,5vh,56px)}.showroom__time[hidden]{display:none}.showroom__time-head{font-family:var(--display);justify-content:space-between;align-items:baseline;gap:16px;display:flex}.showroom__time-head label{font-size:13px;font-weight:500}.showroom__time-head output{letter-spacing:-.03em;font-size:18px}.showroom__time-ends{justify-content:space-between;font-size:12px;line-height:1.3;display:flex}.showroom input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;color:var(--tone);cursor:pointer;background:0 0;margin:4px 0 2px;display:block}.showroom input[type=range]::-webkit-slider-runnable-track{background:currentColor;height:2px}.showroom input[type=range]::-moz-range-track{background:currentColor;height:2px}.showroom input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--orange);border:2px solid;border-radius:50%;width:22px;height:22px;margin-top:-10px}.showroom input[type=range]::-moz-range-thumb{background:var(--orange);border:2px solid;border-radius:50%;width:18px;height:18px}.showroom input[type=range]:focus-visible{outline-offset:4px;outline:2px solid}.showroom__cta{white-space:nowrap;gap:28px}.showroom__cta:focus-visible{outline-color:var(--tone)}.showroom__hint{white-space:nowrap;pointer-events:none;margin:0;font-size:15px;transition:opacity .6s;bottom:clamp(28px,5vh,56px);left:50%;transform:translate(-50%)}.showroom__hint[hidden],.showroom__hint-keys,.showroom:has(.showroom__canvas:focus-visible) .showroom__hint-pointer{display:none}.showroom:has(.showroom__canvas:focus-visible) .showroom__hint-keys{display:inline}.showroom.has-interacted .showroom__hint{opacity:0}.showroom__caption{text-align:left;max-width:34ch;margin:0;font-size:12px;line-height:1.5}.showroom__caption-link{color:inherit;text-underline-offset:3px;text-decoration:underline 1px}.showroom__caption-link:hover{text-decoration-thickness:2px}.showroom__status{background:var(--white);max-width:36ch;color:var(--ink);text-align:center;margin:0;padding:14px 18px;font-size:15px;top:50%;left:50%;transform:translate(-50%,-50%)}.showroom .visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}@media (width<=1100px){.showroom__viewport{left:30%}}@media (width<=900px){.showroom{--stage-top-stop:24%;--stage-floor-stop:63%;height:calc(100svh - 82px);min-height:780px;padding:24px var(--gutter) 28px;grid-template-rows:auto minmax(340px,1fr) auto auto;row-gap:0;display:grid}.showroom__intro,.showroom__dock,.showroom__time,.showroom__hint,.showroom__status,.showroom__viewport{position:relative;inset:auto;transform:none}.showroom__intro{grid-row:1;max-width:34rem}.showroom__intro h1{font-size:clamp(40px,9vw,64px)}.showroom__lede{margin-top:14px}.showroom__hook{font-size:24px}.showroom__invite{font-size:18px}.showroom__viewport{grid-area:2/1;margin-block:8px}.showroom__hint,.showroom__status{grid-area:2/1;justify-self:center}.showroom__hint{align-self:end;font-size:14px}.showroom__status{align-self:center}.showroom__time{grid-row:3;width:100%;max-width:30rem;margin-bottom:18px}.showroom__dock{grid-row:4;gap:16px;width:100%;max-width:30rem}.showroom__cta{gap:12px;width:100%;padding-inline:20px}.showroom__caption{max-width:none;font-size:12px}}@media (prefers-reduced-motion:reduce){.showroom-plan,.showroom__canvas,.showroom__hint{transition:none}}.showroom__logo-title{width:min(100%,230px);margin:0}.showroom__logo-title img{width:100%;height:auto;display:block}