.usage-guide{max-width:1229px;margin:auto;padding:20px 44px 24px;color:var(--foreground)}.usage-guide-embedded{max-width:1440px;padding:80px clamp(20px,4vw,64px);scroll-margin-top:96px}.usage-guide-embedded .guide-intro{grid-template-columns:1fr;min-height:0;margin-bottom:32px}.guide-section-label{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--primary)}.guide-masthead{display:flex;justify-content:space-between;align-items:center;gap:20px;height:44px}.guide-masthead>p{display:flex;align-items:center;gap:22px;margin:0}.guide-masthead strong{font-size:30px;font-weight:750;letter-spacing:-.04em}.guide-masthead span{border-left:1px solid var(--muted);padding-left:22px;font-size:22px;font-weight:750}.guide-masthead small{color:var(--muted);font-size:14px}.guide-intro{display:grid;grid-template-columns:53% 47%;align-items:center;min-height:265px}.guide-intro-copy{position:relative;z-index:1}.guide-intro .guide-title{font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif;font-size:clamp(36px,5vw,62px);font-weight:900;letter-spacing:-.045em;line-height:1.2;margin:8px 0;white-space:nowrap}.guide-subtitle{font-size:34px;font-weight:650;line-height:1.5;color:var(--muted);margin:0}.guide-handnote{font-family:Kaiti SC,KaiTi,STKaiti,cursive;font-size:18px;line-height:1.5;letter-spacing:.025em}.guide-companion{margin:24px 0 4px 12px;max-width:260px;white-space:pre-line;transform:rotate(-4deg);text-decoration:underline;text-decoration-color:var(--primary);text-underline-offset:8px;text-decoration-thickness:2px}.guide-hero-art{height:265px;position:relative}.guide-hero-art img{position:absolute;width:400px;max-width:none;height:400px;object-fit:contain;top:-87px;left:-60px}.guide-discovery{position:absolute;top:60px;right:6px;width:116px;transform:rotate(-10deg)}.guide-steps{list-style:none;padding:0;margin:0}.guide-step{display:grid;grid-template-columns:minmax(0,34%) minmax(0,66%);align-items:center;border-top:1px solid color-mix(in oklab,var(--foreground) 32%,transparent);min-height:304px;padding:4px 0}.guide-step-copy{padding-right:10px}.guide-number{display:flex;gap:16px;align-items:center;font-family:Arial Black,Arial,sans-serif;font-size:56px;line-height:1;font-weight:900;color:var(--primary);letter-spacing:-.045em}.guide-number:after{content:"";width:34px;border-top:2px solid}.guide-step .guide-step-title{font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif;font-size:32px;line-height:1.35;font-weight:850;letter-spacing:-.04em;margin:14px 0 12px}.guide-description{font-size:20px;line-height:1.65;margin:0;white-space:pre-line}.guide-demo{min-width:0}.guide-scene{display:block;width:100%;height:auto}.guide-scene-dark,:root[data-theme=dark] .guide-scene-light{display:none}:root[data-theme=dark] .guide-scene-dark{display:block}:root[data-theme=dark] .guide-hero-art img{filter:invert(1);mix-blend-mode:screen}.guide-actions{display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;margin-top:8px}.usage-guide-embedded .guide-actions{row-gap:12px}.usage-guide-embedded .guide-actions .btn-outline{padding-inline:12px}.guide-actions .btn{box-shadow:none;font-size:12px;min-height:32px;height:32px;padding:0 2px;text-decoration:none}.guide-action{color:var(--primary)}.guide-replay{color:var(--muted);font-weight:400}.guide-notes{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:10px;font-size:13px;color:var(--muted)}.guide-notes>div{display:flex;flex-wrap:wrap;gap:6px 16px}.guide-notes p{margin:0}.guide-notes>div p+p{border-left:1px solid var(--muted);padding-left:16px}.guide-notes .guide-handnote{flex-shrink:0;color:var(--foreground);text-decoration:underline;text-decoration-color:var(--primary);text-underline-offset:5px}.guide-demo-disclaimer{font-size:11px;color:var(--muted);margin:14px 0 0}.guide-demo[data-playing=true]{animation:guide-scene-reveal 1s ease-out both}@keyframes guide-scene-reveal{0%{opacity:.15;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.usage-guide:lang(th) .guide-intro .guide-title{font-family:inherit;font-size:44px;white-space:normal;line-height:1.35}.usage-guide:lang(th) .guide-subtitle{font-size:27px}.usage-guide:lang(th) .guide-step .guide-step-title{font-size:27px;line-height:1.5}.usage-guide:lang(th) .guide-description{font-size:17px}.usage-guide:lang(th) .guide-handnote{font-family:inherit;font-size:15px}@media (prefers-reduced-motion:reduce){.guide-demo[data-playing=true]{animation:none}}@media (min-width:1001px){.usage-guide:lang(zh) .guide-step:not(:last-child) .guide-step-title{white-space:nowrap}}.usage-guide:lang(zh) .guide-step:last-child .guide-step-title{text-wrap:balance}@media (max-width:1000px) and (min-width:761px){.usage-guide{padding-inline:28px}.guide-hero-art img{width:360px;height:360px;top:-48px;left:-35px}.guide-discovery{display:none}.guide-subtitle{font-size:27px}.guide-step{min-height:270px;grid-template-columns:37% 63%}.guide-step .guide-step-title{font-size:25px}.guide-description{font-size:17px;white-space:normal}}@media (max-width:760px){.usage-guide{padding:14px 20px 28px}.usage-guide-embedded{padding-block:56px}.guide-masthead{height:32px}.guide-masthead>p{gap:12px}.guide-masthead strong{font-size:22px}.guide-masthead span{font-size:16px;padding-left:12px}.guide-masthead small{display:none}.guide-intro{grid-template-columns:1fr;min-height:0;padding-top:14px}.guide-intro .guide-title{white-space:normal;font-size:clamp(30px,7.8vw,44px)}.guide-subtitle{font-size:22px}.guide-companion{font-size:15px;margin-top:12px;max-width:none;transform:none}.guide-hero-art{height:200px;margin-top:8px}.guide-hero-art img{width:280px;height:280px;top:-45px;left:calc(50% - 150px)}.guide-discovery{top:30px;right:0;font-size:14px;width:64px}.guide-step{grid-template-columns:1fr;padding:22px 0 16px;gap:12px;min-height:0}.guide-step-copy{padding-right:0}.guide-number{font-size:42px}.guide-step .guide-step-title{font-size:24px;margin:10px 0 8px}.guide-description{font-size:16px;white-space:normal}.guide-actions .btn{min-height:40px;height:40px}.guide-actions{margin-top:4px}.guide-notes{flex-direction:column;align-items:flex-start;font-size:12px}.guide-notes>div{flex-direction:column;gap:6px}.guide-notes>div p+p{border:0;padding:0}.guide-notes .guide-handnote{font-size:16px}.usage-guide:lang(th) .guide-intro .guide-title{font-size:32px}.usage-guide:lang(th) .guide-subtitle{font-size:21px}.usage-guide:lang(th) .guide-step .guide-step-title{font-size:23px}.usage-guide:lang(th) .guide-description{font-size:16px}}.product-sync{padding:clamp(16px,3vw,36px);margin-bottom:40px;border-radius:16px;background:var(--color-base-200);color:var(--color-base-content)}.sync-intro{display:flex;justify-content:space-between;gap:20px;align-items:start}.sync-intro h3{font-size:clamp(22px,3vw,32px);font-weight:750;margin:0 0 10px;line-height:1.4}.sync-intro p{margin:0;max-width:65ch;font-size:15px;line-height:1.7}.sync-control{flex-shrink:0}.sync-diagram{max-width:900px;margin:32px auto 0}.sync-hub{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin:auto;padding:16px 24px;border:1px solid var(--color-primary);border-radius:12px;background:var(--color-base-100)}.sync-hub>svg{color:var(--color-primary);flex-shrink:0}.sync-hub strong{display:block;font-size:17px}.sync-hub small{display:block;font-size:12px;margin-top:4px}.sync-lines{position:relative;height:100px}.sync-lines>svg:first-child{width:100%;height:100%;fill:none;stroke:var(--color-base-content);stroke-opacity:.25;stroke-width:2}.sync-packet{position:absolute;width:12px;height:12px;border-radius:3px;background:var(--color-primary);offset-rotate:0deg;opacity:0;animation:sync-travel 8s linear infinite}.sync-upload{offset-path:shape(from 16.667% 96%,vline to 50%,hline to 50%,vline to 4%)}.sync-app{offset-path:shape(from 50% 4%,vline to 96%);animation-delay:3s}.sync-web{offset-path:shape(from 50% 4%,vline to 50%,hline to 83.333%,vline to 96%);animation-delay:3s}.sync-direction{position:absolute;bottom:0;font-size:20px;line-height:1;transform:translateX(-50%);color:var(--color-primary)}.sync-up{left:16.667%}.sync-down{left:50%}.sync-down-web{left:83.333%}.sync-devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,3vw,36px)}.sync-device{min-width:0;text-align:center}.sync-device-title{display:flex;gap:8px;align-items:center;justify-content:center;margin:10px 0}.sync-device-title svg{width:20px;height:20px}.sync-screen{background:var(--color-base-100);border:1px solid var(--color-base-300);border-radius:12px;padding:clamp(8px,2vw,16px)}.sync-extension,.sync-screen>small{min-height:28px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px}.sync-connected{width:6px;height:6px;background:var(--color-success);border-radius:50%}.sync-product{margin-top:12px}.sync-product img{width:100%;max-height:140px;aspect-ratio:1;object-fit:contain;border-radius:8px}.sync-product i{display:block;height:5px;width:75%;margin:8px auto 0;border-radius:3px;background:var(--color-base-300)}.sync-product i+i{width:45%}.sync-received{animation:sync-receive 8s ease-out infinite}.sync-device>p{margin:12px 0 0;font-size:13px;line-height:1.6}.sync-sequence{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin:28px 0 12px;padding-left:20px;font-size:13px;list-style:decimal}.sync-note{text-align:center;font-size:12px;margin:0}.product-sync[data-running=false] .sync-packet,.product-sync[data-running=false] .sync-received{animation-play-state:paused}@keyframes sync-travel{0%{opacity:0;offset-distance:0}5%{opacity:1}30%{opacity:1;offset-distance:100%}35%,to{opacity:0;offset-distance:100%}}@keyframes sync-receive{0%,65%{opacity:.2;transform:translateY(5px)}75%,to{opacity:1;transform:translateY(0)}}@media (max-width:600px){.sync-intro{flex-wrap:wrap;gap:8px}.sync-intro p{font-size:13px}.sync-lines{height:70px}.sync-extension{flex-wrap:wrap;gap:3px}.sync-extension img{width:18px;height:18px}.sync-extension,.sync-screen>small{font-size:10px;min-height:42px}.sync-device>p{font-size:11px}.sync-device-title{gap:4px;font-size:13px}.sync-device-title svg{width:16px}.sync-hub{padding:12px}.sync-hub strong{font-size:14px}.sync-sequence{justify-content:start;font-size:12px}}@supports not (offset-path:shape(from 0% 0%,vline to 100%)){.sync-packet{display:none}}@media (prefers-reduced-motion:reduce){.sync-control,.sync-packet{display:none}.sync-received{animation:none;opacity:1;transform:none}}