body[data-page="how"]{--town-navbar-height:90px;--town-paper:#f9f4e8}
body[data-page="how"] header nav{text-transform:uppercase;font-weight:700;font-size:12px;letter-spacing:.05em}
body[data-page="how"] .how-main{width:100%;max-width:none;margin:0;padding:0;overflow:visible}
.town-story{position:relative;width:100%;height:calc(100svh - var(--town-navbar-height));min-height:480px;scroll-margin-top:var(--town-navbar-height);overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#fffdf8,var(--town-paper) 78%);isolation:isolate}
.town-canvas,.town-fallback{position:absolute;inset:0;width:100%;height:100%}
.town-canvas canvas{display:block;width:100%;height:100%}
.town-fallback{display:grid;place-items:center;pointer-events:none}
.town-fallback[hidden]{display:none}
.town-fallback img{width:min(350px,45%);height:auto;max-height:55%;object-fit:contain;mix-blend-mode:multiply;align-self:end;margin-bottom:130px}
.town-kicker{position:absolute;left:5%;top:24px;z-index:4;display:flex;align-items:center;gap:18px}
.town-kicker h1{font:700 12px/1.4 var(--body);letter-spacing:.1em;margin:0;text-transform:uppercase}
.town-example{font:400 12px/1.4 var(--body);color:#65665c;margin:0;border-left:1px solid #d8d6ca;padding-left:18px}
.town-dialogue{position:absolute;left:5%;top:75px;z-index:3;width:min(430px,calc(100% - 40px));padding:18px 21px 19px;background:#fffdf7f5;border:1px solid #25251f27;border-radius:20px 20px 20px 7px;box-shadow:0 4px 0 #25251f06,0 14px 28px #25251f0a;will-change:transform}
.town-dialogue:after{content:'';position:absolute;left:var(--tail-x,65%);bottom:-8px;width:15px;height:15px;border-right:1px solid #25251f27;border-bottom:1px solid #25251f27;transform:rotate(45deg);background:#fffdf7}
.town-dialogue [hidden]{display:none!important}
.town-question{font:700 20px/1.15 var(--display);letter-spacing:-.02em;margin:0 0 15px;color:var(--ink)}
.town-speaker{display:block;font:700 11px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;color:#65665c}
.town-reply{font:400 15px/1.55 var(--body);margin:0;color:#51594b}
.town-reply .town-speaker{color:var(--blue)}
.town-outputs{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:15px 0 0}
.town-outputs li{font:500 11px/1.35 var(--body);padding:5px 8px;border:1px solid #d8d6ca;border-radius:20px;background:var(--town-paper)}
.town-ending{margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}
.town-ending p{font-size:14px;line-height:1.45;margin:0 0 12px;color:#51594b}
.town-ending .primary{font-size:12px;min-height:38px;padding:9px 15px}
.town-controls{position:absolute;left:5%;right:5%;bottom:22px;z-index:5;display:flex;align-items:center;gap:20px;padding:13px 16px;border:1px solid #25251f22;border-radius:16px;background:#fffdf8e8;box-shadow:0 3px 0 #25251f04;backdrop-filter:blur(8px)}
.town-stops{display:flex;align-items:center;justify-content:space-between;gap:4px;flex:1;min-width:0}
.town-stops button{position:relative;background:transparent;border:0;border-radius:9px;padding:8px 9px;font:600 12px/1.4 var(--body);color:#64685c;white-space:nowrap}
.town-stop-number{font:800 12px/1 var(--display);margin-right:5px;color:#858c79}
.town-stops button[aria-current="step"]{background:#2243ee0b;color:var(--blue)}
.town-stops button[aria-current="step"] .town-stop-number{color:var(--blue)}
.town-stops button[aria-current="step"]:after{content:'';position:absolute;left:9px;right:9px;bottom:3px;height:2px;background:var(--blue);transform-origin:left;transform:scaleX(var(--stop-progress,0))}
.town-actions{display:flex;align-items:center;gap:7px;border-left:1px solid var(--line);padding-left:17px}
.town-actions button{font:600 12px/1.4 var(--body);min-height:36px;border:1px solid #25251f29;border-radius:8px;background:#fffdf8;padding:8px 11px;white-space:nowrap}
.town-actions button:hover,.town-stops button:hover{background:#25251f08}
.town-actions button:disabled{cursor:default;color:#74786b;opacity:.75}
.town-story[data-phase="travel"] .town-dialogue{opacity:0;pointer-events:none}
.town-story[data-enhanced="false"]{height:auto;min-height:640px;padding:80px 5% 130px}
.town-story[data-enhanced="false"] .town-dialogue{position:relative;left:auto;top:auto;max-width:600px;width:100%;margin:auto}
.town-transcript{padding:17px 5% 23px;border-top:1px solid var(--line);background:var(--town-paper)}
.town-transcript summary{font-size:12px;color:#626659;cursor:pointer;width:max-content;max-width:100%;padding:6px 0}
.town-transcript>ol{list-style:none;padding:22px 0 0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.town-transcript article{padding:21px;background:#fffdf8;border:1px solid var(--line);border-radius:12px}
.town-transcript h2{font:700 21px/1.15 var(--display);margin:0 0 16px}
.town-transcript .town-question{font-size:18px}
.town-transcript .town-reply{font-size:14px}
@media(max-width:1100px){.town-controls{left:3%;right:3%;gap:12px;padding:11px}.town-stops button{padding-inline:6px;font-size:11px}.town-actions{gap:5px;padding-left:10px}.town-actions button{padding-inline:9px}.town-dialogue{width:min(400px,calc(100% - 40px))}}
@media(max-width:760px){body[data-page="how"]{--town-navbar-height:114px}.town-kicker{top:17px;left:6%;right:6%;gap:12px;flex-wrap:wrap}.town-kicker h1{font-size:11px}.town-example{font-size:11px;padding-left:12px}.town-dialogue{width:calc(100% - 36px);padding:16px 18px 17px;border-radius:17px 17px 17px 6px}.town-question{font-size:19px;line-height:1.15;margin-bottom:13px}.town-reply{font-size:14px;line-height:1.5}.town-outputs{margin-top:13px;gap:5px}.town-outputs li{font-size:10px;padding:5px 7px}.town-controls{left:4%;right:4%;bottom:13px;padding:9px 10px;gap:10px;flex-wrap:wrap;border-radius:13px}.town-stops{flex:0 0 100%;gap:5px}.town-stops button{flex:1;padding:9px 3px;min-height:34px}.town-stop-label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.town-stop-number{font-size:13px;margin:0}.town-actions{width:100%;padding:9px 0 0;border-left:0;border-top:1px solid var(--line);justify-content:center;gap:10px}.town-actions button{min-height:34px;font-size:12px;padding:7px 13px}.town-fallback img{max-width:220px;width:45%;margin-bottom:130px}.town-transcript{padding:13px 6% 18px}.town-transcript>ol{grid-template-columns:1fr;gap:16px}.town-story[data-enhanced="false"]{padding-top:75px}.town-ending .primary{min-height:36px;padding:9px 12px}}
@media(max-height:650px) and (min-width:761px){.town-kicker{top:17px}.town-dialogue{padding:15px 18px;max-width:410px}.town-question{font-size:18px;margin-bottom:11px}.town-reply{font-size:14px;line-height:1.45}.town-outputs{margin-top:11px}.town-controls{bottom:14px;padding:10px 13px}}
@media(max-width:400px) and (max-height:700px){.town-story{min-height:0}.town-dialogue{padding:11px 14px 12px}.town-dialogue .town-question{font-size:16px;margin-bottom:8px}.town-dialogue .town-reply{font-size:13px;line-height:1.35}.town-dialogue .town-speaker{font-size:10px;margin-bottom:3px}.town-dialogue .town-outputs{display:none}.town-controls{padding:6px 9px;gap:5px;bottom:10px}.town-stops button{min-height:28px;padding-block:6px}.town-actions{padding-top:5px;gap:8px}.town-actions button{min-height:30px;padding:5px 11px}.town-ending{padding-top:0;margin-top:0;border-top:0}.town-ending p{font-size:13px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){.town-story[data-phase="travel"] .town-dialogue{opacity:1}}
/* Little Adventures: the conversation and the work share one paper town. */
.town-thought{position:absolute;left:0;top:0;z-index:4;width:max-content;max-width:180px;padding:10px 13px;background:#fffdf4;border:1.5px solid #2243ee;border-radius:17px 17px 5px 17px;color:#2243ee;font:600 12px/1.4 var(--body);box-shadow:3px 3px 0 #2243ee13;pointer-events:none}
.town-thought[hidden]{display:none}
.town-story[data-ended="true"] .town-dialogue{border-color:#d9b242;background:#fff8d9}
.town-story[data-ended="true"] .town-ending{border:0;margin:0;padding:3px}
.town-story[data-ended="true"] .town-ending p{font:700 32px/1.15 var(--display);letter-spacing:-.035em;color:var(--ink);margin:0 0 18px}
.town-story[data-ended="true"] .town-ending .primary{background:var(--gold,#f4c84e);color:var(--ink);font-weight:800}
@media(min-width:761px){.town-dialogue{width:340px;padding:21px 23px 23px}.town-question{font-size:23px;line-height:1.16;margin-bottom:20px}.town-reply{font-size:15px;line-height:1.55}.town-outputs{gap:6px}.town-example{color:#4c5a4e}}
@media(max-width:760px){.town-kicker{gap:5px 10px}.town-example{font-size:10px}.town-dialogue{padding:13px 16px 14px}.town-question{font-size:18px;margin-bottom:10px}.town-reply{font-size:13px;line-height:1.45}.town-outputs{margin-top:10px}.town-thought{max-width:140px;padding:7px 9px;font-size:10px}}