.hwh{--hwh-amber:hsl(32 95% 44%);--hwh-amber-bright:hsl(38 92% 58%);--hwh-green:hsl(158 62% 32%);--hwh-oak:hsl(25 20% 9%);--hwh-oak-2:hsl(25 16% 13%);--hwh-oak-line:hsl(25 10% 24%);--hwh-cream:hsl(36 30% 95%);--hwh-cream-2:hsl(32 14% 78%);--hwh-serif:var(--font-playfair),"Playfair Display",Georgia,serif;display:grid;gap:32px;align-items:center}@media (min-width:960px){.hwh{grid-template-columns:5fr 7fr;gap:56px}}.hwh__kicker{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;margin:0 0 14px}.hwh__kicker:before{content:"";width:26px;height:2px;background:currentColor}.hwh__title{font-family:var(--hwh-serif);font-weight:700;font-size:clamp(40px,5.4vw,64px);line-height:1.04;letter-spacing:-.025em;margin:0}.hwh__title em{font-weight:400}.hwh__lede{font-size:19px;line-height:1.6;margin:16px 0 0;max-width:34ch}.hwh__steps{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--border)}.hwh__step{border-bottom:1px solid var(--border)}.hwh__step-btn{all:unset;box-sizing:border-box;width:100%;cursor:pointer;position:relative;display:grid;grid-template-columns:34px 1fr;gap:0 10px;padding:14px 0}.hwh__step-btn:focus-visible{outline:2px solid var(--hwh-amber);outline-offset:2px;border-radius:6px}.hwh__n{font-family:var(--hwh-serif);font-weight:700;font-size:17px;line-height:1.6;font-variant-numeric:lining-nums}.hwh__n,.hwh__t{color:var(--muted-foreground)}.hwh__t{font-weight:600;font-size:18px;transition:color .3s}.hwh__d{grid-column:2;font-size:16px;color:var(--muted-foreground);line-height:1.55;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}.hwh__d>span{overflow:hidden}.hwh__d>span>span{display:block;padding-top:6px}.hwh__bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--hwh-amber)}.hwh__step.is-on .hwh__n{color:var(--primary-text)}.hwh__step-btn:hover .hwh__t,.hwh__step.is-on .hwh__t{color:var(--foreground)}.hwh__step.is-on .hwh__d{grid-template-rows:1fr}@media (max-width:959px){.hwh{gap:0}.hwh__copy{display:contents}.hwh__visual{order:1;margin-top:24px}.hwh__steps{order:2;margin-top:20px}}.hwh__box,.hwh__visual{position:relative}.hwh__box{aspect-ratio:996/768;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px hsl(25 30% 20%/.22);background:var(--hwh-oak)}.hwh__canvas{position:absolute;left:0;top:0;width:996px;height:768px;transform-origin:0 0;color:var(--hwh-cream);font-variant-numeric:lining-nums;line-height:1.4;--chip:30px}.hwh__canvas p{margin:0}.hwh__inner{position:absolute;inset:0;transform-origin:50% 45%}.hwh__photo{width:100%;height:100%;display:block}.hwh__shade{inset:0;background:hsl(25 30% 5%)}.hwh__shade,.hwh__spot{position:absolute;opacity:0}.hwh__spot{border:3px solid var(--hwh-amber-bright);box-shadow:0 0 0 3px hsl(38 92% 58%/.18),0 0 0 4000px hsl(25 40% 4%/var(--dim,.55))}.hwh__chip{position:absolute;background:var(--hwh-oak);color:var(--hwh-cream);border:2px solid var(--hwh-amber-bright);font-size:var(--chip);font-weight:600;padding:.3em .65em;border-radius:999px;white-space:nowrap;line-height:1.3}.hwh__chip b{color:var(--hwh-amber-bright);font-weight:700;margin-right:.35em}.hwh__chip--spot{translate:-50% 0}.hwh__draw{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hwh__draw path{fill:none;stroke:var(--hwh-amber-bright);stroke-width:.5;stroke-linecap:round}.hwh__draw .hwh__faint{stroke-width:.36;stroke-dasharray:.012 .022}.hwh__fp{position:absolute;left:0;right:0;top:50%;translate:0 -50%;display:grid;justify-items:center;gap:26px}.hwh__tiles{display:flex;gap:22px}.hwh__tile-w{text-align:center}.hwh__tile{width:190px;height:190px;border-radius:16px;background-repeat:no-repeat;outline:3px solid var(--hwh-amber-bright);outline-offset:-3px;box-shadow:0 16px 40px hsl(25 40% 3%/.6)}.hwh__tile-l{font-size:26px;font-weight:600;margin-top:8px}.hwh__print{display:flex;align-items:center;gap:14px;font-size:30px;font-weight:600;padding:14px 24px;border:2px solid var(--hwh-amber-bright);border-radius:16px;background:hsl(25 20% 9%/.85)}.hwh__tick{flex:none;width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--hwh-green);font-size:.8em}.hwh__record{position:absolute;left:50%;top:50%;translate:-50% -50%;width:780px;background:var(--hwh-oak-2);border:1px solid var(--hwh-oak-line);border-radius:22px;padding:30px 34px;box-shadow:0 24px 60px hsl(25 40% 3%/.6)}.hwh__rec-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--hwh-oak-line)}.hwh__rec-name{font-family:var(--hwh-serif);font-size:38px;line-height:1.1}.hwh__rec-name,.hwh__state{font-weight:700;white-space:nowrap}.hwh__state{font-size:24px;padding:.35em .85em;border-radius:999px;transform-origin:100% 50%}.hwh__lines{list-style:none;margin:0;padding:0;font-size:31px}.hwh__lines li{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hwh-oak-line)}.hwh__lines li:last-child{border-bottom:0}.hwh__who{font-weight:700}.hwh__what{display:block;font-size:.78em}.hwh__opt,.hwh__what{color:var(--hwh-cream-2)}.hwh__opt{font-size:.7em}.hwh__canvas.is-small{--chip:38px}.hwh__canvas.is-small .hwh__record{width:940px;padding:28px 38px}.hwh__canvas.is-small .hwh__rec-top{flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:12px}.hwh__canvas.is-small .hwh__rec-name{font-size:46px;white-space:normal}.hwh__canvas.is-small .hwh__state{font-size:30px;transform-origin:0 50%}.hwh__canvas.is-small .hwh__lines{font-size:36px}.hwh__canvas.is-small .hwh__lines li{padding:8px 0;line-height:1.35}.hwh__canvas.is-small .hwh__tile{width:210px;height:210px}.hwh__canvas.is-small .hwh__tile-l{font-size:36px}.hwh__canvas.is-small .hwh__print{font-size:40px}.hwh__ctl{position:absolute;right:12px;bottom:12px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:hsl(25 20% 8%/.7);color:hsl(36 30% 95%);border:1px solid hsl(25 10% 30%)}.hwh__ctl:focus-visible{outline:2px solid var(--hwh-amber-bright);outline-offset:2px}.hwh__ctl svg{width:14px;height:14px}@media (prefers-reduced-motion:reduce){.hwh__d,.hwh__t{transition:none}}