@font-face{font-family:Fraunces;src:url('/assets/fraunces.woff2') format('woff2');font-weight:600;font-display:swap}
:root{color-scheme:light;--paper:#e7e2d3;--ink:#263034;--muted:#56635e;--line:#b6b9ab;--green:#386452}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 Arial,Helvetica,sans-serif}main{max-width:1280px;margin:auto;padding:48px 38px 32px}h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.1}h1{font-size:clamp(38px,5vw,65px);letter-spacing:-1.6px;margin:0 0 20px}h2{font-size:clamp(27px,3vw,34px);letter-spacing:-.6px;margin:0}h3{font-size:25px;letter-spacing:-.4px;margin:0}p{margin:0 0 16px}a{color:inherit}button{font:700 14px/1.3 Arial,sans-serif;min-height:46px;padding:11px 17px;border:2px solid var(--ink);border-radius:3px 5px 2px 4px;background:#253033;color:#f6f1e3;cursor:pointer;touch-action:none;user-select:none}button:hover{background:#354940}button:active{background:#dfbb6c;color:var(--ink)}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--green);outline-offset:5px}.quiet{background:transparent;color:var(--ink);border-color:#899788}.quiet:hover{background:#fff9e9}.context{font-size:14px;color:var(--muted);margin-bottom:18px}.intro{font-size:19px;max-width:65ch}.current-note{color:var(--green);font-size:14px;font-weight:700;margin:0}
.pose-section{margin:36px 0 48px;padding:27px 0 0;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:19px}.section-heading p{font-size:13px;color:var(--muted);margin:0;white-space:nowrap}.pose-scroll{overflow-x:auto;border-block:1px solid var(--line);background:#f0eddf;scrollbar-color:#79887b #d3d8ca}.pose-strip{display:grid;grid-template-columns:repeat(7,minmax(106px,1fr));min-width:742px;padding:12px 5px}.pose-strip figure{margin:0;text-align:center;border-right:1px solid #b6b9ab66;padding:8px 0}.pose-strip figure:last-child{border:0}.pose-strip figure[data-selected=true]{background:#d9dec9;box-shadow:inset 0 -3px var(--green)}.pose-strip canvas{width:100%;height:auto;display:block}.pose-strip figcaption{font-size:12px;color:var(--muted);padding-top:6px}.pose-strip figcaption span{display:block;color:var(--ink);font-weight:700}.pose-explanation{font-size:15px;max-width:80ch;margin:16px 0 0}.swipe-note{display:none;font-size:12px;margin:9px 0;color:var(--muted)}
.demo{display:grid;grid-template-columns:1.2fr 1fr;background:#f5f1e1;border:2px solid var(--green)}.demo-art{min-width:0;background:#dfe3d3;text-align:center;padding:12px 0 24px}.demo-art canvas{display:block;width:100%;height:auto}.demo-art p{font-family:Fraunces,Georgia,serif;font-size:26px;margin-bottom:12px}.step-meter{display:flex;gap:7px;justify-content:center}.step-meter i{display:block;width:26px;height:8px;background:#acb9a5}.step-meter i.active{background:var(--green)}.demo-controls{padding:30px}.status{display:inline-block;font-size:11px;white-space:nowrap;border:1px solid #98a599;border-radius:2px;padding:3px 7px;color:var(--muted)}.demo-controls .status,.selected .status{color:#fff8de;background:var(--green);border-color:var(--green)}.demo-controls h3{margin:17px 0 15px}.demo-controls p{font-size:15px}.tap-controls{display:flex;gap:8px;margin:20px 0 12px}.tap-controls button{flex:1}.demo-controls .instructions{font-size:12px;color:var(--muted)}.comparison-note{font-size:13px;color:var(--muted);margin:16px 0 0;max-width:95ch}
.inputs,.comparison{margin-top:48px}.input-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}.input-pair article{display:flex;align-items:center;gap:25px}.input-pair h3{font-size:23px;margin-bottom:10px}.input-pair p{font-size:14px;color:var(--muted);margin:0}.input-picture{flex:0 0 133px;height:116px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;color:var(--ink)}.phone{border:3px solid #546656;border-radius:14px;background:#d3dac9;height:132px;max-width:87px;flex-basis:87px}.phone:before{content:'';position:absolute;top:8px;left:25px;right:25px;height:4px;border-radius:4px;background:#546656}.phone span{border:1px solid #6d7d66;padding:3px 7px;background:#edead8;font-size:18px}.phone b{position:absolute;top:28px;font-size:11px;font-weight:400}.phone i{position:absolute;bottom:17px;right:13px;width:23px;height:32px;border:2px solid #796951;background:#e6c9a2;border-radius:14px 14px 5px 5px;transform:rotate(-25deg)}kbd{padding:8px 14px;background:#f5f1e1;border:1px solid #91a084;border-bottom:4px solid #91a084;border-radius:5px;font:21px Arial}.keyboard small{position:absolute;bottom:4px;font-size:11px;color:var(--muted)}.comparison-intro{max-width:82ch;font-size:15px}.options{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.option{min-width:0;border-top:2px solid #94a38d;padding:22px 0 0}.option header{min-height:93px}.option h3{font-size:25px;margin-bottom:12px}.option p{font-size:14px;color:var(--muted)}.selected{border-color:var(--green)}.curve{display:block;width:100%;height:auto;margin:6px 0 17px}.curve text{font-family:Arial,sans-serif;font-size:11px;fill:#56635e}.curve path{fill:none}.axis{stroke:#a5ae9e;stroke-width:1}.release{stroke:#a5ae9e;stroke-dasharray:3 3}.response{stroke:#7d8876;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.selected .response{stroke:var(--green)}
.decision{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:36px;padding:30px 0;border-top:2px solid var(--ink)}.decision p{max-width:45ch;margin:15px 0 0}.decision ul{margin:0;padding-left:20px;font-size:14px}.decision li+li{margin-top:10px}footer{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:24px;align-items:start}footer p{font-size:12px;color:var(--muted);max-width:65ch}.game-link{font-size:14px;font-weight:700;white-space:nowrap;text-underline-offset:4px}#load-error{padding:16px;background:#f8d7bd;border:1px solid #8c5524}[hidden]{display:none!important}
@media(max-width:850px){main{padding:34px 22px}.section-heading{display:block}.section-heading p{margin-top:8px}.demo{grid-template-columns:1fr 1fr}.demo-controls{padding:23px}.swipe-note{display:block}.options{gap:22px}.option h3{font-size:23px}.input-pair{gap:23px}.input-pair article{display:block}.input-picture{margin-bottom:16px;max-width:133px}.input-picture.phone{max-width:87px}}
@media(max-width:600px){main{padding:27px 17px 24px}.intro{font-size:17px}h1{font-size:40px}.demo,.options,.decision,.input-pair{grid-template-columns:1fr}.demo-art{padding-bottom:20px}.demo-art canvas{max-height:220px;object-fit:contain}.demo-controls{padding:22px}.option header{min-height:0}.option h3{display:inline;margin-right:12px}.option .curve{margin-top:18px}.input-pair article{display:flex;gap:22px}.input-picture{margin:0}.phone{flex-basis:87px}.keyboard{flex-basis:87px;gap:4px}.keyboard kbd{padding:6px 8px}.keyboard small{font-size:10px;white-space:nowrap}.decision{gap:19px;margin-top:34px}.pose-section{margin-bottom:35px}footer{display:block}.current-note{font-size:13px}.pose-explanation{font-size:14px}.option p{max-width:65ch}}