.hero-fig{margin:var(--s-5) 0 0}.hero-fig svg{background:var(--board);border:var(--bw-hair) solid var(--line);border-radius:var(--r-panel);width:100%;max-width:640px;height:auto;display:block}@media (width>=960px){.tool-grid.hero-grid{row-gap:var(--s-6);grid-template-rows:auto auto;grid-template-areas:"head hero""main side"}.hero-grid>.page-head{grid-area:head;align-self:end}.hero-grid>.hero-fig{grid-area:hero;margin:0}.hero-grid>.tool-main{grid-area:main}.hero-grid>.tool-side{grid-area:side}}.hw-fix,.hw-arm-t,.hw-arm-b,.hw-item{transform-box:view-box}.hw-arm-t,.hw-arm-b{transform-origin:387.5px 164px}.hw-load{stroke-dasharray:140;stroke-dashoffset:0}.hw-mark{stroke-dasharray:60;stroke-dashoffset:0}@media (prefers-reduced-motion:no-preference){:root.js .hero-fig:not(.is-playing) .hw-fix{opacity:0;transform:translate(-220px)}:root.js .hero-fig:not(.is-playing) .hw-arm-t{transform:rotate(90deg)}:root.js .hero-fig:not(.is-playing) .hw-arm-b{transform:rotate(-90deg)}:root.js .hero-fig:not(.is-playing) .hw-item{opacity:0;transform:translate(-60px)}:root.js .hero-fig:not(.is-playing) .hw-load{stroke-dashoffset:140px}:root.js .hero-fig:not(.is-playing) .hw-mark{stroke-dashoffset:60px}:root.js .hero-fig:not(.is-playing) .hw-label{opacity:0}.hero-fig.is-playing .hw-fix{animation:hw-fix .9s var(--ease-settle) .1s both}.hero-fig.is-playing .hw-arm-t{animation:hw-arm-t .45s var(--ease-settle) .95s both}.hero-fig.is-playing .hw-arm-b{animation:hw-arm-b .45s var(--ease-settle) .95s both}.hero-fig.is-playing .hw-item{animation:hw-item .6s var(--ease-settle) 1.2s both}.hero-fig.is-playing .hw-load{animation:hw-load .6s var(--ease-mark) 1.65s both}.hero-fig.is-playing .hw-mark{animation:hw-mark .4s var(--ease-mark) 1.9s both}.hero-fig.is-playing .hw-label{animation:.4s linear 1.8s both hw-show}}@keyframes hw-fix{0%{opacity:0;transform:translate(-220px)}20%{opacity:1}to{opacity:1;transform:none}}@keyframes hw-arm-t{0%{transform:rotate(90deg)}to{transform:none}}@keyframes hw-arm-b{0%{transform:rotate(-90deg)}to{transform:none}}@keyframes hw-item{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:none}}@keyframes hw-load{0%{stroke-dashoffset:140px}to{stroke-dashoffset:0}}@keyframes hw-mark{0%{stroke-dashoffset:60px}to{stroke-dashoffset:0}}@keyframes hw-show{0%{opacity:0}to{opacity:1}}@media (width<=599px){.hero-wall .t-small,.hero-wall .t-label{font-size:26px}.hero-wall .hw-t-board{text-anchor:end;transform:translate(100px)}.hero-wall .hw-t-cavity{transform:translateY(58px)}.hero-wall .hw-t-next{text-anchor:end;transform:translate(118px)}}.home-block>.rule{margin-bottom:var(--s-6)}.home-block h2{margin-bottom:var(--s-3)}.home-block .lede{margin-bottom:var(--s-5)}.tiles{gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.tiles li+li{margin-top:0}.tile{gap:var(--s-3);height:100%;padding:var(--s-3);background:var(--board);border:var(--bw-hair) solid var(--line);border-radius:var(--r-card);color:var(--graphite);flex-direction:column;text-decoration:none;display:flex}.tile:hover{border-color:var(--graphite);color:var(--graphite)}.tile .tile-art{border-radius:var(--r-tag);border:var(--bw-hair) solid var(--line);width:100%;max-width:200px;height:auto;margin:0 auto;display:block;overflow:hidden}.tile .thing{font-weight:700;font-size:var(--fs-label);line-height:1.3}.tile .ask{font-size:var(--fs-small);color:var(--graphite-soft);margin-top:var(--s-1);line-height:1.4;display:block}.tile:hover .ask{color:var(--violet-hover)}.tile .pen{stroke-dasharray:40;stroke-dashoffset:0}@media (prefers-reduced-motion:no-preference){.tile:hover .pen,.tile:focus-visible .pen{animation:tile-mark .32s var(--ease-mark) both}}@keyframes tile-mark{0%{stroke-dashoffset:40px}to{stroke-dashoffset:0}}@media (width>=600px){.tiles{gap:var(--s-4);grid-template-columns:repeat(3,minmax(0,1fr))}.tile{padding:var(--s-4)}}.story{position:relative}.story-note{font-size:var(--fs-small);color:var(--graphite-soft);max-width:60ch;margin-bottom:var(--s-3)}.story-fig{z-index:1;padding:var(--s-2) 0;background:var(--plaster);margin:0;position:static}.story[data-step] .story-fig{position:sticky;top:0}.story-fig svg{background:var(--board);border:var(--bw-hair) solid var(--line);border-radius:var(--r-panel);width:min(100%,48vh);max-width:480px;height:auto;display:block}.story-steps{padding:0 0 0 var(--s-5);margin:var(--s-4) 0 0;counter-reset:wall;list-style:none;position:relative}.story-steps:before{content:"";background:var(--violet);transform-origin:0 0;width:6px;transform:scaleY(var(--p,1));position:absolute;top:0;bottom:0;left:0;-webkit-mask-image:url(/img/pencil-bracket.svg);mask-image:url(/img/pencil-bracket.svg);-webkit-mask-size:6px 100%;mask-size:6px 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.story-steps li+li{margin-top:0}.story-step{counter-increment:wall;padding:var(--s-5) 0;justify-content:center;gap:var(--s-2);flex-direction:column;min-height:50vh;display:flex;position:relative}.story-step h3{font-family:var(--font-wide);font-weight:750;font-size:var(--fs-h2);letter-spacing:-.01em;line-height:1.22}.story-step h3 a{color:var(--graphite);text-decoration-color:var(--line)}.story-step h3 a:hover{color:var(--violet-hover);text-decoration-color:currentColor}.story-step .wall-word{font-size:var(--fs-small);color:var(--violet);font-weight:700}.story-step .wall-word:before{content:counter(wall) ". "}.story-step p{max-width:44ch}:root.js .story[data-step] .story-step,:root.js .story[data-step] .story-step h3 a{color:var(--graphite-soft)}:root.js .story[data-step="1"] .story-step:first-child,:root.js .story[data-step="2"] .story-step:nth-child(2),:root.js .story[data-step="3"] .story-step:nth-child(3),:root.js .story[data-step="4"] .story-step:nth-child(4),:root.js .story[data-step="1"] .story-step:first-child h3 a,:root.js .story[data-step="2"] .story-step:nth-child(2) h3 a,:root.js .story[data-step="3"] .story-step:nth-child(3) h3 a,:root.js .story[data-step="4"] .story-step:nth-child(4) h3 a{color:var(--graphite)}.story-end{padding:var(--s-5) 0 var(--s-3)}.story-end p+p{margin-top:var(--s-3)}@media (prefers-reduced-motion:no-preference){.story-step,.story-step h3 a{transition:color .36s var(--ease-out)}.story-steps:before{transition:transform .2s linear}}@media (width>=960px){.story{gap:var(--s-6);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;display:grid}.story-fig{background:0 0;padding:0}.story[data-step] .story-fig{top:24px}.story-fig svg{width:100%}.story-steps{margin-top:0}.story-step{min-height:60vh}}.sw-state{opacity:0}.sw-s1,.story[data-step="1"] .sw-s1,.story[data-step="2"] .sw-s2,.story[data-step="3"] .sw-s3,.story[data-step="4"] .sw-s4{opacity:1}.story[data-step="2"] .sw-s1,.story[data-step="3"] .sw-s1,.story[data-step="4"] .sw-s1{opacity:0}.sw-fix{transform-box:view-box;transform:translateY(-26px)}.sw-s1 .sw-fix,.story[data-step="1"] .sw-s1 .sw-fix,.story[data-step="2"] .sw-s2 .sw-fix,.story[data-step="3"] .sw-s3 .sw-fix,.story[data-step="4"] .sw-s4 .sw-fix{transform:none}.story[data-step="2"] .sw-s1 .sw-fix,.story[data-step="3"] .sw-s1 .sw-fix,.story[data-step="4"] .sw-s1 .sw-fix{transform:translateY(-26px)}@media (prefers-reduced-motion:no-preference){.sw-state{transition:opacity .42s var(--ease-out)}.sw-fix{transition:transform .52s var(--ease-settle) .12s}}
