.ac{position:relative}.ac ul{z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);max-height:280px;margin:0;padding:4px 0;list-style:none;position:absolute;top:100%;left:0;right:0;overflow:auto;box-shadow:0 8px 24px rgba(0,0,0,.14)}.ac li{cursor:pointer;padding:10px 12px}.ac li:hover{background:var(--accent-soft)}.ac li b{color:var(--accent);margin-right:6px}.best{border:2px solid var(--accent)}.head{flex-wrap:wrap;align-items:flex-start;display:flex}.desig{letter-spacing:.5px;font-size:30px;font-weight:700;line-height:1.15;font-family:var(--mono);margin:4px 0}.score{color:var(--ink2);font-size:14px}ul.why{margin:8px 0 0;padding-left:20px}ul.why li{margin:4px 0}ul.why li.bad{color:var(--bad)}ul.why li.good{color:var(--good)}.parts{flex-wrap:wrap;margin:8px -6px;display:flex}.part{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);flex:none;min-width:104px;margin:0 6px 10px;padding:10px 14px}.part b{color:var(--ink);font-size:19px;font-family:var(--mono);display:block}.part small{color:var(--muted);margin-top:2px;font-size:14px;display:block}.steps{flex-wrap:wrap;display:flex}.step{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface2);cursor:pointer;flex:200px;margin:0 8px 8px 0;padding:12px 14px}.step.on{border-color:var(--accent);background:var(--accent-soft)}.step .n{color:var(--ink2);font-size:15px;font-weight:700}.chart{position:relative}.chart svg{display:block}.chart .cell{transition:opacity .5s}.chart .anim{transition:all .6s cubic-bezier(.2,.8,.2,1)}.chart .grow{transform-origin:bottom}.chart.enter .grow{opacity:0;transform:scaleY(0)}.chart.enter .cell{opacity:0}.chart .pt circle{animation:1.6s ease-out infinite pulse}@keyframes pulse{0%{r:7}50%{r:9}to{r:7}}.fade{opacity:1;animation:.5s fade}@-webkit-keyframes fade{0%{opacity:0;-webkit-transform:translateY(8px)}to{opacity:1;-webkit-transform:none}}@keyframes fade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.fade,.chart .anim,.chart .pt circle{transition:none!important;animation:none!important}.chart.enter .grow,.chart.enter .cell{opacity:1;transform:none}}.card>table.list,.card>div>table.list{-webkit-overflow-scrolling:touch;display:block;overflow-x:auto}@media (max-width:720px){html,body{overflow-x:hidden}.desig{font-size:23px}.top .spacer{flex-basis:100%}.row{margin:0}.row>*{margin:0 0 12px}.col,.col.wide{flex:100%}.chart svg{max-width:100%!important}}