html{font-size: 62.5%;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;}body{font-size: 1.8rem;line-height: 1.618;max-width: 38em;margin: auto;color: #4a4a4a;background-color: #f9f9f9;padding: 13px;}@media (max-width: 684px){body{font-size: 1.53rem;}}@media (max-width: 382px){body{font-size: 1.35rem;}}h1,h2,h3,h4,h5,h6{line-height: 1.1;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-weight: 700;margin-top: 3rem;margin-bottom: 1.5rem;overflow-wrap: break-word;word-wrap: break-word;-ms-word-break: break-all;word-break: break-word;}h1{font-size: 2.35em;}h2{font-size: 2em;}h3{font-size: 1.75em;}h4{font-size: 1.5em;}h5{font-size: 1.25em;}h6{font-size: 1em;}p{margin-top: 0px;margin-bottom: 2.5rem;}small,sub,sup{font-size: 75%;}hr{border-color: #1d7484;}a{text-decoration: none;color: #1d7484;}a:visited{color: #144f5a;}a:hover{color: #982c61;border-bottom: 2px solid #4a4a4a;}ul{padding-left: 1.4em;margin-top: 0px;margin-bottom: 2.5rem;}li{margin-bottom: 0.4em;}blockquote{margin-left: 0px;margin-right: 0px;padding-left: 1em;padding-top: 0.8em;padding-bottom: 0.8em;padding-right: 0.8em;border-left: 5px solid #1d7484;margin-bottom: 2.5rem;background-color: #f1f1f1;}blockquote p{margin-bottom: 0;}img,video{height: auto;max-width: 100%;margin-top: 0px;margin-bottom: 2.5rem;}pre{background-color: #f1f1f1;display: block;padding: 1em;overflow-x: auto;margin-top: 0px;margin-bottom: 2.5rem;font-size: 0.9em;}code,kbd,samp{font-size: 0.9em;padding: 0 0.5em;background-color: #f1f1f1;white-space: pre-wrap;}pre > code{padding: 0;background-color: transparent;white-space: pre;font-size: 1em;}table{text-align: justify;width: 100%;border-collapse: collapse;margin-bottom: 2rem;}td,th{padding: 0.5em;border-bottom: 1px solid #f1f1f1;}input,textarea{border: 1px solid #4a4a4a;}input:focus,textarea:focus{border: 1px solid #1d7484;}textarea{width: 100%;}.button,button,input[type=submit],input[type=reset],input[type=button],input[type=file]::file-selector-button{display: inline-block;padding: 5px 10px;text-align: center;text-decoration: none;white-space: nowrap;background-color: #1d7484;color: #f9f9f9;border-radius: 1px;border: 1px solid #1d7484;cursor: pointer;box-sizing: border-box;}.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover,input[type=file]::file-selector-button:hover{background-color: #982c61;color: #f9f9f9;outline: 0;}.button[disabled],button[disabled],input[type=submit][disabled],input[type=reset][disabled],input[type=button][disabled],input[type=file][disabled]{cursor: default;opacity: 0.5;}.button:focus-visible,button:focus-visible,input[type=submit]:focus-visible,input[type=reset]:focus-visible,input[type=button]:focus-visible,input[type=file]:focus-visible{outline-style: solid;outline-width: 2px;}textarea,select,input{color: #4a4a4a;padding: 6px 10px;margin-bottom: 10px;background-color: #f1f1f1;border: 1px solid #f1f1f1;border-radius: 4px;box-shadow: none;box-sizing: border-box;}textarea:focus,select:focus,input:focus{border: 1px solid #1d7484;outline: 0;}input[type=checkbox]:focus{outline: 1px dotted #1d7484;}label,legend,fieldset{display: block;margin-bottom: 0.5rem;font-weight: 600;}:root{--paper:#F2F2EF;--ink:#141418;--blue:#2C55F0;--tang:#FF6B1A;--mist:#DCE3FF;--display:"Bricolage Grotesque","Arial Narrow",sans-serif;--body:"Rubik",system-ui,sans-serif;--gap:clamp(1rem,0.8rem + 1vw,1.5rem);--band:clamp(3rem,2.4rem + 3vw,5rem);}html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}*,*::before,*::after{box-sizing:border-box}body{max-width:none;margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:clamp(1rem,0.97rem + 0.15vw,1.0625rem);line-height:1.6;overflow-x:clip}::selection{background:var(--tang);color:var(--ink)}html{caret-color:var(--blue);scrollbar-color:var(--blue) var(--paper)}h1,h2,h3{font-family:var(--display);font-weight:800;color:var(--ink);text-wrap:balance;margin:0;letter-spacing:-0.02em}p{text-wrap:pretty;margin:0}a{color:inherit;border:0;text-decoration:none}a:hover{color:inherit;border:0}img{max-width:100%}svg.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.wrap{width:100%;max-width:72rem;margin:0 auto;padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}.hero{min-height:100dvh;display:grid;grid-template-columns:1fr;gap:var(--gap);padding-top:max(1rem,env(safe-area-inset-top));padding-bottom:2rem;align-content:start}.session{display:flex;flex-direction:column;gap:0.75rem}.topbar{display:flex;align-items:center;gap:0.75rem;padding-bottom:0.75rem;border-bottom:3px solid var(--ink)}.topbar img{width:56px;height:56px;border:3px solid var(--ink);border-radius:14px;background:var(--paper)}.topbar .name{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,1.1rem + 0.6vw,1.5rem);line-height:1.1}.topbar .sub{font-size:0.875rem;color:#4A4A55}.msg{max-width:36rem;border:3px solid var(--ink);border-radius:4px 18px 18px 18px;padding:0.75rem 1rem;box-shadow:5px 5px 0 var(--ink)}.msg .who{display:block;font-size:0.8125rem;font-weight:600;margin-bottom:0.125rem}.msg.you{background:var(--mist);font-size:1rem}.msg.reply{background:#fff;padding:1rem 1rem 1.25rem}.reply h1{font-size:clamp(1.875rem,1.3rem + 2.6vw,3.25rem);line-height:1.04;margin:0.125rem 0 0.75rem}.reply .lead{max-width:34rem;margin-bottom:1rem}.btn-start{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;min-width:248px;min-height:60px;padding:0.75rem 1.75rem;border:3px solid var(--ink);border-radius:999px;background:var(--tang);color:var(--ink);font-family:var(--body);font-weight:600;font-size:1.125rem;line-height:1.2;transform:rotate(-2deg);-webkit-tap-highlight-color:transparent;transition:transform 180ms cubic-bezier(.16,1,.3,1)}.btn-start:hover,.btn-start:focus{color:var(--ink);border:3px solid var(--ink)}.btn-start:focus-visible{outline:3px solid var(--blue);outline-offset:4px}@media (hover: hover) and (pointer: fine){.btn-start:hover{transform:rotate(0deg) scale(1.03)}}.under{font-size:0.875rem;color:#4A4A55;margin-top:0.75rem}.stage{background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:18px;padding:1rem;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:0.75rem;align-self:start}.switch{display:flex;align-items:center;gap:0.75rem;min-height:48px;padding:0.375rem 0.75rem 0.375rem 0.375rem;border:3px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:600 0.9375rem/1 var(--body);cursor:pointer;-webkit-tap-highlight-color:transparent;align-self:flex-start;margin:0}.switch:hover,.switch:focus{background:var(--paper);color:var(--ink);border-color:var(--ink)}.switch:focus-visible{outline:3px solid var(--tang);outline-offset:3px}.switch .opt{padding:0.5rem 0.75rem;border-radius:999px}.track{position:relative;width:52px;height:30px;border:3px solid var(--ink);border-radius:999px;background:var(--mist);flex:none}.knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform 220ms cubic-bezier(.16,1,.3,1)}[data-side="with"] .knob{transform:translateX(22px)}[data-side="with"] .track{background:var(--tang)}[data-side="with"] .opt-with,[data-side="without"] .opt-without{background:var(--ink);color:var(--paper)}.knob.nudge{animation:nudge 700ms cubic-bezier(.16,1,.3,1) 600ms 1}@keyframes nudge{40%{transform:translateX(16px)}100%{transform:translateX(22px)}}.panel svg{display:block;width:100%;height:auto;max-width:400px}.caption{color:#fff;font-size:0.9375rem;max-width:26rem}.ok{transform-box:fill-box;transform-origin:center}[data-side="with"] .ok{animation:tick 420ms cubic-bezier(.16,1,.3,1) both}[data-side="with"] .ok.d2{animation-delay:90ms}[data-side="with"] .ok.d3{animation-delay:180ms}@keyframes tick{from{transform:scale(0.4);opacity:0}to{transform:scale(1);opacity:1}}@media (min-width: 880px){.hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,4vw,4rem);align-content:center;padding-top:2rem}.topbar img{width:128px;height:128px;border-radius:28px}.stage{margin-top:9rem}}.band{padding:var(--band) 0}.band.light{background:var(--paper)}.band.dark{background:var(--ink);color:var(--paper)}.band.dark h2,.band.dark h3{color:var(--paper)}.band.dark .tile h2,.band.dark .tile h3{color:var(--ink)}.band h2{font-size:clamp(1.5rem,1.25rem + 1.2vw,2.125rem);line-height:1.1;margin-bottom:1.5rem}.toc{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;margin:0;padding:0}.toc li{margin:0}.toc a{display:block;min-width:13rem;min-height:56px;padding:0.875rem 1rem;background:#fff;border:3px solid var(--ink);border-radius:8px;box-shadow:4px 4px 0 var(--ink);font-weight:600;line-height:1.3}.toc li:nth-child(1) a{transform:rotate(-1.5deg)}.toc li:nth-child(2) a{transform:rotate(1deg)}.toc li:nth-child(3) a{transform:rotate(-0.5deg)}.toc a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.toc small{display:block;font-weight:400;color:#4A4A55;font-size:0.875rem}.grid{display:grid;grid-template-columns:1fr;gap:var(--gap)}@media (min-width: 880px){.grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,4vw,4rem)}}.tile{border:3px solid var(--ink);border-radius:12px;padding:1.25rem;background:#fff;color:var(--ink);box-shadow:5px 5px 0 var(--tang)}.best{display:inline-flex;align-items:center;gap:0.5rem;font-weight:600;color:var(--blue);margin-bottom:0.75rem}.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}.steps li{display:flex;gap:0.875rem;align-items:flex-start;margin:0}.steps .ic{color:var(--blue);margin-top:0.125rem}.steps h3{font-size:1.125rem;line-height:1.25;margin-bottom:0.25rem}.aside{color:#C9CBD6}.aside p+p{margin-top:0.75rem}.like{display:flex;gap:1rem;align-items:flex-start}.like svg{flex:none;width:88px;height:88px}.like p+p{margin-top:0.75rem}.fixes details{border:3px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);margin:0 0 0.875rem;padding:0;box-shadow:4px 4px 0 var(--blue)}.fixes summary{display:flex;align-items:center;gap:0.75rem;min-height:56px;padding:0.75rem 1rem;font-weight:600;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}.fixes summary::-webkit-details-marker{display:none}.fixes summary .ic{color:var(--tang)}.fixes summary:focus-visible{outline:3px solid var(--tang);outline-offset:2px}.fixes details p{padding:0 1rem 1rem 3.25rem;max-width:40rem}.closing{background:var(--blue);color:#fff;padding:var(--band) 0}.closing h2{color:#fff;font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);line-height:1.08;max-width:40rem;margin-bottom:1.5rem}@supports (animation-timeline: view()){.toc li,.tile{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}@keyframes rise{from{transform:translateY(24px)}to{transform:translateY(0)}}}footer{margin-top:3rem;display:grid;grid-template-columns:1fr;border-top:3px solid var(--ink)}footer .half{padding:2rem max(1rem,env(safe-area-inset-left)) calc(2rem + env(safe-area-inset-bottom))}footer .lighthalf{background:var(--paper)}footer .darkhalf{background:var(--ink);color:var(--paper)}footer .fname{font-family:var(--display);font-weight:800;font-size:1.25rem;margin-bottom:0.25rem}footer small{display:block;color:#4A4A55;font-size:0.875rem;margin-top:0.5rem}footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}footer li{margin:0}footer .darkhalf a{position:relative;display:inline-block;padding:0.5rem 0;min-height:44px;color:var(--paper)}footer .darkhalf a::after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:2px;background:var(--tang);transform:scaleX(0);transform-origin:left;transition:transform 220ms cubic-bezier(.16,1,.3,1)}footer .darkhalf a:hover,footer .darkhalf a:focus{color:var(--paper)}footer .darkhalf a:hover::after,footer .darkhalf a:focus-visible::after{transform:scaleX(1)}footer .darkhalf a:focus-visible{outline:2px solid var(--tang);outline-offset:2px}@media (min-width: 720px){footer{grid-template-columns:1fr 1fr}}::view-transition-old(root),::view-transition-new(root){animation-duration:280ms}.fade{animation:fade 280ms ease-out}@keyframes fade{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}.btn-start{transform:none}}@font-face{font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 800;font-stretch: 100%;font-display: swap;src: url(assets/bricolagegrotesque.253e177595.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 800;font-stretch: 100%;font-display: swap;src: url(assets/bricolagegrotesque.e5971b9be3.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 400;font-display: swap;src: url(assets/rubik.2215bcd05b.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 400;font-display: swap;src: url(assets/rubik.799f3ef044.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 600;font-display: swap;src: url(assets/rubik.2215bcd05b.woff2) format('woff2');unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family: 'Rubik';font-style: normal;font-weight: 600;font-display: swap;src: url(assets/rubik.799f3ef044.woff2) format('woff2');unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}