.how{overflow-x:clip}.how .site-section-head{text-align:center;flex-direction:column;align-items:center}.how .site-section-aside{max-width:46ch}.how-lead{font-size:var(--type-lead-size);line-height:var(--type-lead-lh);margin:0}.how-stage{--how-card-pad:10px;--how-pin-size:30px;--how-pin-gap:4px;--how-pin-y:calc(var(--how-card-pad) + var(--how-pin-gap) + var(--how-pin-size) / 2);max-width:1000px;margin-inline:auto;position:relative}.how-line{z-index:0;pointer-events:none;fill:none;stroke-linecap:round;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.how-line-track{stroke:var(--tn-surface-lavender);stroke-width:3px}.how-line-draw{stroke:var(--tn-violet-700);stroke-width:4px}.how-steps{z-index:1;gap:64px;margin:0;padding:0;list-style:none;display:grid;position:relative}.how-step{--how-tilt:-1.5deg;--how-tint:var(--tn-surface-lavender);--how-pin-color:var(--tn-violet-700);width:min(340px,100%);transform:rotate(var(--how-tilt));transform-origin:50% var(--how-pin-y);justify-self:center}.how-step:nth-child(2n){--how-tilt:1.5deg}.how-step:nth-child(3n+2){--how-tint:var(--tn-surface-sage);--how-pin-color:color-mix(in oklab, var(--tn-accent-sage), black 40%)}.how-step:nth-child(3n){--how-tint:var(--tn-surface-peach);--how-pin-color:color-mix(in oklab, var(--tn-accent-peach), black 40%)}.how-card{padding:var(--how-card-pad);border-radius:var(--radius-card-lg);background:var(--tn-surface-card);box-shadow:var(--shadow-3);position:relative}.how-pin{width:var(--how-pin-size);height:var(--how-pin-size);margin:var(--how-pin-gap) auto 10px;color:var(--how-pin-color);display:block}.how-inner{border-radius:var(--radius-bubble);background:var(--how-tint);padding:18px 18px 20px}.how-num{font:700 44px/1 var(--font-display);color:var(--tn-violet-800);display:block}.how-step-title{font:800 var(--type-h4-size)/var(--type-h4-lh) var(--font-sans);margin:8px 0 6px}.how-step-text{color:var(--muted-foreground);margin:0 0 14px}.how-visual{aspect-ratio:4/3;border-radius:var(--radius-card);background:var(--tn-surface-card);position:relative;overflow:hidden}@media (min-width:768px){.how-steps{gap:96px}.how-step{--how-tilt:-2deg;width:min(400px,92%);transition:transform var(--dur-base) var(--ease-out);justify-self:start}.how-step:nth-child(2n){--how-tilt:2deg;justify-self:end}}@media (min-width:768px) and (hover:hover) and (pointer:fine){.how-step:hover{--how-tilt:0deg}}.how-anim{background:color-mix(in oklab, var(--how-tint) 40%, var(--tn-surface-card));position:absolute;inset:0;overflow:hidden}.how-anim p,.how-anim ul{margin:0}.how-chat{background:var(--tn-surface-card);flex-direction:column;justify-content:flex-end;gap:6px;padding:12px;display:flex}.how-bubble{max-width:82%;font:500 13px/1.35 var(--font-sans);border-radius:14px;flex-shrink:0;padding:7px 11px}.how-bubble--ai{background:var(--tn-chat-ai-surface);color:var(--tn-chat-ai-text);border-bottom-left-radius:4px;align-self:flex-start}.how-bubble--user{background:var(--tn-chat-user-surface);color:var(--tn-chat-user-text);border-bottom-right-radius:4px;align-self:flex-end}.how-chat-thumb{aspect-ratio:5/3;border:3px solid var(--tn-surface-card);width:104px;box-shadow:var(--shadow-2);border-radius:12px;flex-shrink:0;align-self:flex-end;position:relative;overflow:hidden}.how-typing{vertical-align:middle;gap:4px;padding-block:4px;display:inline-flex}.how-typing i{opacity:.4;background:currentColor;border-radius:50%;width:6px;height:6px}.how-price{place-items:center;padding:12px;display:grid}.how-ticket{text-align:center;border-radius:var(--radius-card);background:var(--tn-surface-card);box-shadow:var(--shadow-2);justify-items:center;gap:6px;padding:16px 22px;display:grid}.how-ticket-title{font:700 12px/1.2 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)}.how-ticket-amount{font:700 40px/1.05 var(--font-display);color:var(--tn-violet-800)}.how-call{flex-direction:column;justify-content:center;gap:12px;padding:14px;display:flex}.how-call-card{background:var(--tn-surface-card);max-width:86%;box-shadow:var(--shadow-2);font:500 13px/1.35 var(--font-sans);border-radius:14px;margin:0;padding:9px 12px}.how-call-card b{font:700 11px/1.2 var(--font-sans);color:var(--muted-foreground);align-items:center;gap:5px;margin-bottom:2px;display:flex}.how-call-card--reply{background:var(--tn-chat-user-surface);color:var(--tn-chat-user-text);box-shadow:none;align-self:flex-end}.how-video{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.how-result{position:absolute;inset:0}.how-after-tag{font-size:11px;top:10px;right:10px}@keyframes how-rise{0%{opacity:0;transform:translateY(10px)}}@keyframes how-pop{0%{opacity:0;transform:scale(.85)}}@keyframes how-fade{0%{opacity:0}}@keyframes how-unpick{0%{opacity:1}}@keyframes how-blink{50%{opacity:1}}@media (prefers-reduced-motion:no-preference){.how-anim[data-armed][data-state=idle] .how-a{opacity:0}.how-anim[data-state=playing] .how-a{animation:var(--how-kf,how-rise) var(--how-dur,.42s) var(--ease-out) var(--how-at,0s) 1 backwards}.how-chat .how-a:first-child{--how-at:.1s}.how-chat .how-a:nth-child(2){--how-at:.7s}.how-chat .how-a:nth-child(3){--how-at:1.2s;--how-kf:how-pop}.how-chat .how-a:nth-child(4){--how-at:1.8s}.how-chat[data-state=playing] .how-typing i{animation:.8s ease-in-out 2.1s 3 backwards how-blink}.how-chat[data-state=playing] .how-typing i:nth-child(2){animation-delay:2.25s}.how-chat[data-state=playing] .how-typing i:nth-child(3){animation-delay:2.4s}.how-price .how-a{--how-at:.1s;--how-dur:.5s}.how-price[data-state=playing] .how-ticket-amount{animation:how-pop .4s var(--ease-out) .5s backwards}.how-price[data-state=playing] .how-ticket-demo{animation:.3s ease-out 1s backwards how-fade}.how-call .how-a:first-child{--how-at:.2s;--how-dur:.45s}.how-call .how-a:nth-child(2){--how-at:1.3s;--how-dur:.45s}.how-result{--how-kf:how-fade;--how-dur:.4s}.how-result:nth-child(2){--how-at:1.4s}.how-result:nth-child(3){--how-at:2.8s}}@media (max-width:639px){.how .site-section-head{text-align:left;align-items:flex-start}}
.mat-aside{margin:0}.mat-tabs{background:var(--tn-surface-subtle);border-radius:16px;margin-bottom:32px;position:relative}.mat-tablist{grid-template-columns:repeat(var(--mat-cols,2), minmax(0, 1fr));gap:4px;padding:4px;display:grid}.mat-tab{min-width:0;min-height:44px;color:var(--muted-foreground);font:700 15px/20px var(--font-sans);text-align:center;text-wrap:balance;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .14s var(--ease-out-strong);background:0 0;border:0;border-radius:12px;justify-content:center;align-items:center;padding:6px 10px;display:inline-flex}.mat-tab:active{transform:scale(.97)}.mat-tablist--active .mat-tab:active{transform:none}.mat-tab:focus-visible{box-shadow:var(--shadow-focus);outline:none}[role=tablist]:not([data-measured]) .mat-tab[aria-selected=true]{background:var(--tn-violet-800);color:var(--tn-text-on-violet)}.mat-tablist--active{pointer-events:none;clip-path:inset(0 100% 100% 0);background:0 0;border-radius:16px;position:absolute;inset:0}.mat-tablist--active .mat-tab{background:var(--tn-violet-800);color:var(--tn-text-on-violet);cursor:default}.mat-tablist--active[data-ready]{transition:clip-path .22s var(--ease-out-strong)}.mat-tabs:has([role=tablist]:not([data-measured])) .mat-tablist--active{visibility:hidden}@media (min-width:640px){.mat-tabs{width:fit-content}.mat-tablist{display:flex}.mat-tab{white-space:nowrap;padding:0 18px}}@media (hover:hover) and (pointer:fine){.mat-tab{transition:transform .14s var(--ease-out-strong), color var(--dur-fast) var(--ease-out-strong)}.mat-tab:hover{color:var(--foreground)}}@media (prefers-reduced-motion:reduce){.mat-tablist--active[data-ready],.mat-tab{transition:none}.mat-tab:active{transform:none}}.mat-panel:focus-visible{box-shadow:var(--shadow-focus);border-radius:var(--radius-card);outline:none}.mat-intro{max-width:60ch;font:600 17px/26px var(--font-sans);margin:0 0 20px}.mat-grid{grid-template-columns:1fr;gap:16px;margin:0;padding:0;list-style:none;display:grid}.mat-card{flex-direction:column;align-items:flex-start;gap:12px;padding:24px;display:flex}.mat-media{aspect-ratio:16/9;border-radius:var(--radius-card);background:var(--tn-surface-subtle);color:var(--tn-violet-800);align-self:stretch;place-items:center;margin-bottom:4px;display:grid;position:relative;overflow:hidden}.mat-media-img{object-fit:cover}.mat-name{font:700 var(--type-h4-size)/var(--type-h4-lh) var(--font-display);letter-spacing:-.01em;text-wrap:balance;margin:0}.mat-precautions{color:var(--muted-foreground);font:500 15px/22px var(--font-sans);flex-direction:column;gap:8px;margin:4px 0 0;padding:0;list-style:none;display:flex}.mat-precautions li{padding-left:16px;position:relative}.mat-precautions li:before{content:"";background:var(--tn-violet-400);border-radius:50%;width:6px;height:6px;position:absolute;top:9px;left:0}@media (min-width:768px){.mat-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.mat-grid{grid-template-columns:repeat(3,1fr)}}
.commit-card{--commit-rule:color-mix(in oklab, var(--tn-accent-peach-ink) 18%, transparent);background:var(--tn-accent-peach);color:var(--tn-accent-peach-ink);border-radius:var(--radius-hero);padding:32px}.commit-title{color:var(--tn-accent-peach-ink);margin:0 0 24px;font-size:clamp(28px,4vw,40px);line-height:1.1}.commit-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px;display:grid}.commit-item{grid-template-rows:auto 64px auto;align-content:start;gap:10px;min-width:0;margin:0;padding:0 12px;display:grid}.commit-item:nth-child(2n){border-left:1.5px solid var(--commit-rule)}.commit-label{font:800 11px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;opacity:.75}.commit-visual{align-items:center;height:64px;display:flex}.commit-logo{filter:grayscale()contrast(1.15);mix-blend-mode:multiply;opacity:.9;max-width:100%;height:auto;display:block}.commit-icon{color:var(--tn-accent-peach-ink)}.commit-value{flex-wrap:wrap;align-items:center;gap:6px 8px;display:inline-flex}.commit-big{font:700 28px/1 var(--font-display);white-space:nowrap;color:var(--tn-accent-peach-ink)}.commit-item figcaption{font:600 14px/1.35 var(--font-sans)}@media (min-width:1024px){.commit-row{grid-template-columns:repeat(var(--commit-cols,6), minmax(0, 1fr));row-gap:0}.commit-item{padding:4px 14px 4px 0}.commit-item+.commit-item{border-left:1.5px solid var(--commit-rule);padding-left:14px}}@media (max-width:767px){.commit-card{padding:24px 12px}.commit-title{padding:0 8px}}@media (max-width:1023px){.commit-item{--reveal-delay:0s!important}}
.rev-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro""marquee""ctrls";align-items:center;gap:24px;display:grid}.rev-intro{grid-area:intro}.rev-title{font-size:var(--type-h2-size);line-height:var(--type-h2-lh);letter-spacing:var(--type-h2-tracking);text-wrap:balance;margin:8px 0 0}.rev-lead{max-width:40ch;color:var(--muted-foreground);margin:16px 0 0}.rev-aside{flex-wrap:wrap;align-items:center;gap:16px;margin-top:16px;display:flex}.rev-link{color:var(--muted-foreground);font-weight:700}.rev-score{align-items:center;gap:14px;margin:20px 0 0;display:flex}.rev-score-value{font:800 48px/1 var(--font-display);color:var(--tn-text-brand);font-variant-numeric:lining-nums}.rev-score-meta{font:600 14px/18px var(--font-sans);color:var(--muted-foreground);gap:4px;display:grid}.rev-score-stars{color:var(--tn-violet-800);gap:2px;display:inline-flex}.rev-score-stars g,.rev-stars g{fill:currentColor}.rev-star-off{opacity:.3}.rev-links{font:700 15px/22px var(--font-sans);flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;display:flex}.rev-links a{color:var(--tn-link);text-underline-offset:3px}.rev-links a:hover{color:var(--tn-link-hover)}.rev-attribution{font:500 12px/16px var(--font-sans);color:var(--muted-foreground);align-items:center;gap:10px;margin:14px 0 0;display:flex}.rev-attribution img{width:auto;height:18px;margin-block:10px 5px;display:block}.rev-ctrls{grid-area:ctrls;gap:12px;display:flex}.rev-ctrls .tn-iconbtn{min-width:44px;min-height:44px}.rev-viewport{--rev-edge:10%;border-radius:var(--radius-card-lg);grid-area:marquee;min-width:0;position:relative}.rev-viewport:focus-visible{box-shadow:var(--shadow-focus);outline:none}.rev-marquee{-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--rev-edge), #000 calc(100% - var(--rev-edge)), transparent);mask-image:linear-gradient(to right, transparent, #000 var(--rev-edge), #000 calc(100% - var(--rev-edge)), transparent);padding:4px 0;display:flex;overflow:hidden}.rev-belt{flex:none;gap:16px;padding-right:16px;display:flex}.rev-viewport[data-animated] .rev-belt{animation:rev-belt var(--rev-duration) linear infinite}@keyframes rev-belt{to{transform:translate(-100%)}}.rev-viewport[data-animated]:before,.rev-viewport[data-animated]:after{content:"";z-index:1;width:var(--rev-edge);pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);position:absolute;inset-block:0}.rev-viewport:before{left:0;-webkit-mask-image:linear-gradient(90deg,#000,#0000);mask-image:linear-gradient(90deg,#000,#0000)}.rev-viewport:after{right:0;-webkit-mask-image:linear-gradient(270deg,#000,#0000);mask-image:linear-gradient(270deg,#000,#0000)}.rev-viewport:hover .rev-belt,.rev-viewport:focus-within .rev-belt,.rev-viewport[data-paused] .rev-belt{animation-play-state:paused}.rev-viewport:not([data-animated]) .rev-marquee{scroll-snap-type:x mandatory;scrollbar-width:thin;overflow-x:auto;-webkit-mask-image:none;mask-image:none}.rev-card{--rev-bg:var(--tn-hero-bg);--rev-fg:var(--tn-hero-fg);box-sizing:border-box;scroll-snap-align:start;background:var(--rev-bg);width:300px;min-height:280px;color:var(--rev-fg);border-radius:var(--radius-card-lg);flex-direction:column;flex:none;margin:0;padding:24px;display:flex}.rev-card[data-color="1"]{--rev-bg:var(--tn-accent-sage);--rev-fg:var(--tn-accent-sage-ink)}.rev-card[data-color="2"]{--rev-bg:var(--tn-surface-lavender);--rev-fg:var(--foreground)}.rev-card[data-color="3"]{--rev-bg:var(--tn-accent-peach);--rev-fg:var(--tn-accent-peach-ink)}.rev-card a{color:inherit;text-underline-offset:3px}.rev-card a:focus-visible{outline-offset:2px;border-radius:4px;outline:3px solid}.rev-who{align-items:center;gap:12px;display:flex}.rev-avatar{background:color-mix(in srgb, var(--rev-fg) 18%, var(--rev-bg));width:40px;height:40px;font:800 16px/1 var(--font-sans);border-radius:50%;flex:none;place-items:center;display:grid;position:relative;overflow:hidden}.rev-avatar img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.rev-id{min-width:0;font:500 12px/16px var(--font-sans);display:grid}.rev-author{font:700 15px/20px var(--font-sans);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}a.rev-author{text-decoration:none}a.rev-author:hover{text-decoration:underline}.rev-stars{color:currentColor;gap:2px;margin-top:16px;display:flex}.rev-text{-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;flex:1;margin:10px 0 14px;display:-webkit-box;overflow:hidden}.rev-more{font:600 13px/18px var(--font-sans);align-self:flex-start}@media (max-width:479px){.rev-card{width:calc(100vw - 96px)}.rev-viewport{--rev-edge:6%}}@media (min-width:1024px){.rev-layout{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"intro marquee""ctrls marquee";column-gap:48px}.rev-intro{align-self:end}.rev-ctrls{align-self:start}}@media (prefers-reduced-motion:reduce){.rev-viewport[data-animated] .rev-belt{animation:none}.rev-viewport[data-animated] .rev-belt[aria-hidden],.rev-viewport[data-animated]:before,.rev-viewport[data-animated]:after{display:none}.rev-viewport[data-animated] .rev-marquee{scroll-snap-type:x mandatory;scrollbar-width:thin;overflow-x:auto;-webkit-mask-image:none;mask-image:none}.rev-pause{display:none}}