.demo{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:44px clamp(40px,7vw,110px);display:grid}.side{flex-direction:column;gap:46px;min-width:0;display:flex}.side h2{font-size:clamp(2rem,1rem + 2.6vw,3.6rem)}.people{flex-direction:column;gap:46px;margin:0;padding:0;list-style:none;display:flex}.person{width:100%;color:var(--ink);text-align:left;cursor:pointer;font:inherit;transition:scale var(--dur-press) var(--ease-out);background:0 0;border:0;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:18px 22px;display:grid;position:relative}.person:active{scale:var(--press-wide)}.person b{font-family:var(--font-black);text-transform:uppercase;font-size:1.375rem;font-weight:400}.person .score{border:3px solid var(--ink);width:62px;height:62px;font-family:var(--font-black);border-radius:50%;grid-row:span 2;align-self:center;place-items:center;font-size:1.375rem;display:grid}.person[data-flow=taylor] .score{background:var(--pink)}.person .persona{font-size:1rem;line-height:1.45}.person .sub{font-family:var(--font-elite);color:var(--ink-2);grid-column:1/-1;font-size:.9375rem}.person[aria-pressed=true]{outline:4px solid var(--pink);outline-offset:6px}.person[aria-pressed=true]:focus-visible{outline-color:var(--ink)}.pick{position:relative}.mk-pick{width:104px;height:40px;top:34%;left:calc(100% + 6px);transform:rotate(-4deg)}.where{flex-direction:column;gap:8px;padding:18px 22px 20px;display:flex}.where .step{font-family:var(--font-black);text-transform:uppercase;font-size:1.0625rem}.where .ctx{font-size:1rem;line-height:1.5}.nav{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 16px;max-width:560px;display:grid}.nav .dots{justify-content:center}.nav .sc-btn{min-height:52px;padding:0 22px;font-size:16px}.nav .sc-btn[disabled]{opacity:.4;cursor:default;transform:none}.dots{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.dots button{border:2px solid var(--ink);background:var(--paper);width:32px;height:32px;color:var(--ink);font:400 .875rem var(--font-black);cursor:pointer;transition:scale var(--dur-press) var(--ease-out);transform:rotate(-3deg)}.dots button:active{scale:var(--press)}.dots li:nth-child(2n) button{transform:rotate(2deg)}.dots button[aria-current=step]{background:var(--ink);color:var(--cream)}.more{flex-wrap:wrap;gap:10px 14px;display:flex}.more .sc-tapelabel{cursor:pointer;border:0}.side [hidden]{display:none}.phone{background:var(--ink);filter:drop-shadow(0 14px 20px #12111152);border-radius:46px;width:340px;margin:0 auto;padding:14px 12px 16px;position:relative;transform:rotate(1.5deg)}.phone:before{content:"";background:var(--ink);z-index:3;border-radius:12px;width:86px;height:22px;margin-left:-43px;position:absolute;top:24px;left:50%}.screen{isolation:isolate;background:var(--cream);height:640px;color:var(--ink);font:400 13px/1.45 var(--font-type);cursor:pointer;border-radius:34px;flex-direction:column;display:flex;position:relative;overflow:hidden}.scroller{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ink) var(--cream);flex:1;min-height:0;overflow-y:auto}.scroller:focus-visible{outline:3px solid var(--ink);outline-offset:-5px}.screen:after{content:"";z-index:-1;background:var(--ink);opacity:.2;pointer-events:none;position:absolute;inset:0;-webkit-mask:url(/zine/tex-2.webp) top/640px repeat-y;mask:url(/zine/tex-2.webp) top/640px repeat-y}.scr{flex-direction:column;gap:10px;padding:56px 16px 22px;display:flex}.scr.in{animation:knock calc(2 * var(--dur-frame)) steps(1, end) both}.scr.back{animation-name:knock-back}@keyframes knock{0%{translate:7px -5px}50%,to{translate:0}}@keyframes knock-back{0%{translate:-7px -5px}50%,to{translate:0}}.scr h3{font-family:var(--font-black);text-transform:uppercase;font-size:1.25rem;font-weight:400;line-height:1.1}.scr .lead{color:var(--ink-2);margin-top:-6px;font-size:12px}.k{font-family:var(--font-elite);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.box{border:2px solid var(--ink);background:var(--paper);border-radius:10px;padding:9px 11px;position:relative}.box.dark{background:var(--ink);color:var(--cream)}.box.dashed{border-style:dashed}.box.hot{box-shadow:inset 7px 0 0 var(--pink);padding-left:16px}.row{justify-content:space-between;align-items:center;gap:8px;display:flex}.row+.row{margin-top:6px}.t{font-weight:700;display:block}.s{color:var(--ink-2);font-size:12px;display:block}.box.dark .s{color:var(--ink-fine)}.av{border:2px solid var(--ink);width:32px;height:32px;font-family:var(--font-black);background:var(--paper);color:var(--ink);border-radius:50%;flex:none;place-items:center;display:grid}.tick{font-family:var(--font-black);flex:none;font-size:15px}.pill{border:2px solid var(--ink);font-family:var(--font-black);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border-radius:99px;flex:none;padding:1px 8px;font-size:10px;display:inline-block}.pill.mixed{border-style:dashed}.pill.concern{background:var(--pink)}.pill.on{background:var(--ink);color:var(--cream)}.ringrow{align-items:center;gap:14px;display:flex}.ring{text-align:center;flex:none;place-content:center;width:82px;height:82px;display:grid;position:relative}.ring svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.ring .tr{fill:none;stroke:var(--ink);stroke-width:2px}.ring .ar{fill:none;stroke-width:8px}.ring .ar.p{stroke:var(--pink);mix-blend-mode:multiply}.ring .ar.i{stroke:var(--ink)}.ring b{font-family:var(--font-black);font-size:1.5rem;font-weight:400;line-height:1}.ring i{font-style:normal;font-family:var(--font-elite);text-transform:uppercase;font-size:9px}.nar .row{align-items:flex-start}.nar p{margin-top:4px;font-size:12px}.nar .trend{font-family:var(--font-elite);color:var(--ink-2);font-size:11px}.nar .ask{font-style:italic}.fields{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:12px;display:grid}.fields dd{text-align:right;margin:0;font-weight:700}.fine{color:var(--ink-2);font-size:11px}.seg{gap:6px;display:flex}.seg button,.yn button{border:2px solid var(--ink);background:var(--paper);min-height:34px;color:var(--ink);font:700 12px var(--font-type);cursor:pointer;transition:scale var(--dur-press) var(--ease-out);border-radius:8px;flex:1}.seg button:active,.yn button:active{scale:var(--press)}.seg button[aria-pressed=true],.yn button[aria-pressed=true]{background:var(--ink);color:var(--cream)}.seg button:focus-visible,.yn button:focus-visible,.person:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.q{flex-direction:column;gap:6px;display:flex}.yn{gap:6px;display:flex}.ans{gap:4px;display:flex}.ans span{border:1.5px solid var(--ink);border-radius:6px;padding:1px 6px;font-size:10px;font-weight:700}.ans span.on{background:var(--ink);color:var(--cream)}.ans span.na{border-style:dashed}.chips{flex-wrap:wrap;gap:5px;display:flex}.chips span{border:1.5px solid var(--ink);border-radius:99px;padding:2px 8px;font-size:11px}.chips span.on{background:var(--ink);color:var(--cream);font-weight:700}.done{text-align:center}.hint{background:var(--cream);border-top:2px dashed #12111173;flex:none;justify-content:center;align-items:center;height:50px;display:flex}.hint[hidden]{display:none}.hint span{transition:scale var(--dur-press) var(--ease-out)}.screen:active:not(:has(button:active)) .hint span{scale:var(--press)}.hint span{font-family:var(--font-elite);filter:drop-shadow(var(--shadow-tape));background:url(/zine/tape-05.webp) 50%/100% 100% no-repeat;padding:6px 18px;font-size:12px}.start{text-align:center;flex-direction:column;align-items:center;gap:10px;padding:120px 22px 40px;display:flex}.start h3{font-size:1.75rem}.end{text-align:center;flex-direction:column;align-items:center;gap:14px;padding:200px 24px 40px;display:flex}.end h3{font-size:1.5rem}.end:focus{outline:none}.demo .sc-prev{grid-column:1/-1}.after{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,80px);display:grid}.after .sc-stack{gap:24px}.after .links{flex-wrap:wrap;gap:6px 26px;font-size:1.0625rem;display:flex}.after .links a{padding:6px 0;font-weight:700;display:inline-block}@media (max-width:1000px){.mk-pick{display:none}}@media (max-width:900px){.demo,.after{grid-template-columns:minmax(0,1fr)}.side{display:contents}.side h2{order:0}.pick{order:1}.phone-col{order:2}.where-col{order:3}.demo .sc-prev{order:4}}@media (max-width:400px){.phone{border-radius:40px;width:100%;max-width:340px;padding:12px 10px 14px;transform:none}.screen{border-radius:30px;height:600px}}@media (prefers-reduced-motion:reduce){.scr.in{animation:none}.person,.dots button,.seg button,.yn button,.hint span{transition:none}}