:root{--bg:#fafaf9;--surface:#fff;--ink:#111;--on-ink:#fff;--ink-2:#444;--muted:#555;--line:#e4e4e0;--line-strong:#d4d4cf;--hover:#ecece8;--band:#111;--grid:#1111110d;--glass:#fafaf9b8;--glass-dock:#ffffffd1;--dock-muted:#6b6b66;--accent:#2f5bff;--glass-hl:#ffffffbf;--fs-xs:12px;--fs-sm:13px;--fs-ui:15px;--fs-body:16px;--fs-lead:18px;--fs-h3:24px;--fs-h3l:28px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--font-sans:"Instrument Sans", "Noto Sans SC", "Noto Sans Thai", system-ui, sans-serif;--font-mono:"JetBrains Mono", "Noto Sans SC", "Noto Sans Thai", ui-monospace, monospace}:root[data-theme=dark]{--bg:#0e0e0d;--surface:#181817;--ink:#f4f4f2;--on-ink:#111;--ink-2:#c4c4bf;--muted:#9a9a94;--line:#262624;--line-strong:#363633;--hover:#262624;--band:#181817;--grid:#ffffff0d;--glass:#0e0e0db8;--glass-dock:#181817d1;--dock-muted:#9a9a94;--accent:#6f8bff;--glass-hl:#ffffff12;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0}a{color:inherit;text-decoration:none}a:hover{opacity:.65}button{font:inherit;color:inherit;cursor:pointer}h1,h2,h3,p,ul{margin:0}ul{padding:0;list-style:none}.container{padding:0 40px}@media (max-width:640px){.container,.topbar{padding:0 20px}.dock-item span,.lang-short{display:none}.dock .lang-btn{gap:6px;padding:0 8px}.theme-btn-top{display:inline-flex}.theme-btn-dock{display:none}.dock-item{padding:0 12px}}.mono{font-family:var(--font-mono)}.muted{color:var(--muted)}.frame{border-left:1px solid var(--line);border-right:1px solid var(--line);max-width:1240px;min-height:100vh;margin:0 auto}.topbar{z-index:50;border-bottom:1px solid var(--line);background:linear-gradient(to bottom, color-mix(in srgb, var(--surface) 55%, transparent), var(--glass));height:70px;box-shadow:inset 0 1px 0 var(--glass-hl), 0 1px 12px #00000008;-webkit-backdrop-filter:blur(16px)saturate(180%);backdrop-filter:blur(16px)saturate(180%);justify-content:space-between;align-items:center;padding:0 40px;display:flex;position:sticky;top:0}.logo{height:40px;font-size:var(--fs-body);border:1px solid #0000;border-radius:999px;align-items:center;gap:12px;margin-left:-14px;padding:0 16px 0 14px;font-weight:500;transition:background .2s,border-color .2s;display:inline-flex}.logo:hover{border-color:var(--line);background:color-mix(in srgb, var(--surface) 55%, transparent);box-shadow:inset 0 1px 0 var(--glass-hl)}.cv-btn{border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 60%, transparent);height:40px;font-size:var(--fs-ui);box-shadow:inset 0 1px 0 var(--glass-hl), 0 1px 2px #1111110a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;align-items:center;gap:8px;padding:0 18px;font-weight:500;transition:background .2s;display:inline-flex}.cv-btn:hover{background:var(--surface)}.dock{z-index:60;border:1px solid var(--line);background:var(--glass-dock);-webkit-backdrop-filter:blur(16px)saturate(180%);backdrop-filter:blur(16px)saturate(180%);border-radius:999px;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:8px 10px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #1111111a}.dock-sep{background:var(--line-strong);flex:none;width:1px;height:24px;margin:0 6px}.dock-home{justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex}.dock-item{height:40px;color:var(--dock-muted);font-size:var(--fs-ui);white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:0 14px;font-weight:500;display:inline-flex}.dock-item[aria-current=true]{background:var(--ink);color:var(--on-ink)}.dock-item[aria-current=true]:hover{opacity:1}.lang{position:relative}.lang-btn{height:40px;font-family:var(--font-mono);font-size:var(--fs-sm);background:0 0;border:0;border-radius:999px;align-items:center;gap:8px;padding:0 12px;font-weight:500;display:inline-flex}.lang-menu{z-index:40;background:var(--bg);border:1px solid var(--line);border-radius:14px;min-width:208px;padding:6px;position:absolute;bottom:calc(100% + 16px);right:0;box-shadow:0 12px 32px #1111111f}.lang-opt{width:100%;min-height:44px;font-size:var(--fs-ui);text-align:left;background:0 0;border:0;border-radius:6px;align-items:center;gap:12px;padding:0 12px;display:flex}.lang-opt[aria-selected=true]{background:var(--hover)}.flag{border-radius:3px;flex:none;width:24px;height:16px;display:block;box-shadow:0 0 0 1px #0000001f}.top-bg{border-bottom:1px solid var(--line);position:relative}.top-bg:before{content:"";pointer-events:none;background-image:linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);background-size:40px 40px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 85%);mask-image:linear-gradient(#000,#0000 85%)}.plus{z-index:2;background:linear-gradient(var(--muted), var(--muted)) center / 100% 1px no-repeat, linear-gradient(var(--muted), var(--muted)) center / 1px 100% no-repeat;opacity:.6;width:17px;height:17px;position:absolute;bottom:-9px}.plus-l{left:-9px}.plus-r{right:-9px}.hero{z-index:1;padding-top:120px;padding-bottom:120px;position:relative}.avail{border:1px solid var(--line);background:var(--surface);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--ink-2);border-radius:999px;align-items:center;gap:10px;padding:8px 16px;display:inline-flex}.pulse-dot{background:#22c55e;border-radius:50%;flex:none;width:10px;height:10px;animation:1.8s ease-out infinite ping}@keyframes ping{0%{box-shadow:0 0 #22c55e8c}70%{box-shadow:0 0 0 9px #22c55e00}to{box-shadow:0 0 #22c55e00}}.hero h1{letter-spacing:-.035em;max-width:880px;margin-top:28px;font-size:clamp(40px,7vw,76px);font-weight:500;line-height:1.05}.hero h1 strong{font-weight:700}.sub{max-width:660px;font-size:var(--fs-lead);color:var(--ink-2);margin-top:28px;line-height:1.6}.sub strong{color:var(--ink);font-weight:600}.actions{flex-wrap:wrap;gap:12px;margin-top:40px;display:flex}.btn{min-height:48px;font-size:var(--fs-ui);border-radius:8px;align-items:center;gap:10px;padding:0 26px;font-weight:500;display:inline-flex}.btn-dark{background:var(--ink);color:var(--on-ink)}.btn-light{border:1px solid var(--line-strong);background:var(--bg)}.stats{padding:56px 0 8px}.stats-strip{border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);grid-template-columns:repeat(4,1fr);display:grid;position:relative}.plus-tl,.plus-tr{top:-9px;bottom:auto}.plus-bl,.plus-br{top:auto;bottom:-9px}.plus-tl,.plus-bl{left:-9px}.plus-tr,.plus-br{left:auto;right:-9px}.stat{flex-direction:column;gap:10px;min-width:0;padding:28px 28px 30px;display:flex}.stat+.stat{border-left:1px solid var(--line)}.stat-value{font-family:var(--font-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink);font-size:clamp(32px,4vw,44px);font-weight:300;line-height:1}.stat-label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.section{padding-top:104px;padding-bottom:104px;position:relative}.section-about{padding-top:56px;padding-bottom:104px}.section:not(.section-about):before{content:"";background:var(--line);height:1px;position:absolute;top:0;left:-40px;right:-40px}.section:not(.section-about):after{content:"";background:var(--muted);opacity:.6;pointer-events:none;height:17px;position:absolute;top:-8px;left:-48px;right:-48px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 0v17M0 8.5h17' stroke='black'/%3E%3C/svg%3E") 0/17px 17px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 0v17M0 8.5h17' stroke='black'/%3E%3C/svg%3E") 100%/17px 17px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 0v17M0 8.5h17' stroke='black'/%3E%3C/svg%3E") 0/17px 17px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M8.5 0v17M0 8.5h17' stroke='black'/%3E%3C/svg%3E") 100%/17px 17px no-repeat}@media (max-width:640px){.section:not(.section-about):before{left:-20px;right:-20px}.section:not(.section-about):after{left:-28px;right:-28px}}.section-last{padding-bottom:112px}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:40px;display:flex}.section-head .section-title{margin-bottom:0}.section-link{font-size:var(--fs-ui);text-underline-offset:4px;text-decoration:underline}.section-title{letter-spacing:-.02em;margin-bottom:40px;font-size:clamp(26px,3.4vw,32px);font-weight:500;line-height:1.2}.about{flex-direction:column;gap:48px;display:flex}.bio{min-width:0;max-width:62ch;font-size:var(--fs-lead);color:var(--ink-2);line-height:1.6}.hl{color:var(--ink);text-underline-offset:5px;text-decoration:underline;text-decoration-thickness:1.5px;-webkit-text-decoration-color:var(--muted);text-decoration-color:var(--muted)}.edu{border-top:1px solid var(--line);padding-top:28px}.edu-label{font-size:var(--fs-sm);margin-bottom:20px}.edu-row{align-items:flex-start;gap:18px;display:flex}.edu-icon{border:1px solid var(--line);background:var(--surface);border-radius:12px;flex:0 0 48px;place-items:center;width:48px;height:48px;display:grid}.edu-body{flex:auto;min-width:0}.edu-school{font-size:var(--fs-lead);font-weight:500;line-height:1.3}.edu-degree{font-size:var(--fs-ui);color:var(--muted);margin-top:4px;line-height:1.6}.edu-year{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;flex:none;padding-top:4px}@media (max-width:640px){.edu-row{flex-wrap:wrap;gap:6px 14px}.edu-body{flex-basis:calc(100% - 62px)}.edu-year{margin-left:62px;padding-top:0}}.tabs{border:1px solid var(--line-strong);border-radius:10px;flex-wrap:wrap;gap:4px;margin-bottom:28px;padding:4px;display:inline-flex}.tab{min-height:44px;color:var(--ink-2);font-size:var(--fs-ui);background:0 0;border:0;border-radius:6px;padding:0 20px;font-weight:500}.tab[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}.projects{border-bottom:1px solid var(--line)}.project{border:0;border-top:1px solid var(--line);text-align:left;background:0 0;flex-wrap:wrap;align-items:flex-start;gap:16px 32px;width:100%;padding:36px 0;display:flex}.project:hover{opacity:.65}.project-n{font-size:var(--fs-sm);color:var(--accent);flex:0 0 48px;padding-top:10px}.project-main{flex:2 320px;min-width:0}.project-title{font-size:var(--fs-h3);letter-spacing:-.02em;font-weight:500;line-height:1.15;display:block}.project-desc{max-width:460px;font-size:var(--fs-ui);color:var(--muted);margin-top:10px;line-height:1.6;display:block}.project-stack{min-width:0;font-size:var(--fs-sm);color:var(--muted);flex:220px;padding-top:8px;line-height:1.7}.project-arrow{flex:0 0 20px;padding-top:10px}.modal{border:1px solid var(--line);background:var(--bg);width:calc(100% - 48px);max-width:720px;max-height:calc(100% - 48px);color:var(--ink);border-radius:10px;padding:0;overflow-y:auto}.modal::backdrop{background:#11111180}html:has(dialog[open]){overflow:hidden}.modal-body{padding:20px 20px 28px}.modal-top{justify-content:space-between;align-items:center;display:flex}.modal-close{min-height:44px;font-size:var(--fs-ui);background:0 0;border:0;border-radius:8px;align-items:center;gap:8px;padding:0 8px;font-weight:500;display:inline-flex}.modal-preview{aspect-ratio:16/9;background:var(--hover);text-align:center;font-size:var(--fs-sm);color:var(--muted);border-radius:8px;justify-content:center;align-items:center;margin-top:4px;padding:24px;line-height:1.6;display:flex;overflow:hidden}.modal-preview-img{padding:0;position:relative}.modal-preview img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .25s;display:block}.modal-preview-img.is-loaded img{opacity:1}.modal-preview-img:after{content:"";background:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ink) 8%, transparent) 50%, transparent 70%);pointer-events:none;background-size:200% 100%;animation:1.2s ease-in-out infinite skeleton;position:absolute;inset:0}.modal-preview-img.is-loaded:after{display:none}@keyframes skeleton{0%{background-position:150% 0}to{background-position:-50% 0}}@media (prefers-reduced-motion:reduce){.modal-preview-img:after{animation:none}}.modal-info{padding:0 8px}.modal-title{font-size:var(--fs-h3);letter-spacing:-.025em;margin-top:28px;font-weight:500;line-height:1.15}.gh{min-height:44px;font-size:var(--fs-ui);border-radius:8px;align-items:center;gap:10px;padding:0 8px;font-weight:500;display:inline-flex}.modal-desc{max-width:560px;font-size:var(--fs-body);color:var(--ink-2);margin-top:20px;line-height:1.6}.modal-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:24px;display:flex}.modal-links{flex-wrap:wrap;align-items:center;gap:8px 24px;display:flex}.text-link{min-height:44px;font-size:var(--fs-ui);text-underline-offset:4px;align-items:center;gap:2px;font-weight:500;text-decoration:underline;display:inline-flex}.modal-stack{font-size:var(--fs-sm);color:var(--muted);line-height:1.7}.net{position:relative}.chips{z-index:1;flex-wrap:wrap;gap:36px 28px;padding:8px 0;display:flex;position:relative}.net-svg{pointer-events:none;position:absolute;top:0;left:0}.net-edge{stroke:var(--line-strong);stroke-width:1px;stroke-dasharray:2 4;transition:stroke .25s}.net-edge.is-active{stroke:var(--muted);stroke-dasharray:none}.net-pulse{stroke:var(--ink);stroke-width:1px;stroke-linecap:round;stroke-dasharray:14 1000;stroke-dashoffset:14px;opacity:.35;animation:6s linear infinite net-pulse}@keyframes net-pulse{0%{stroke-dashoffset:14px}to{stroke-dashoffset:-400px}}@media (prefers-reduced-motion:reduce){.net-pulse{display:none}}.chip{border:1px solid var(--line);background:var(--surface);font-size:var(--fs-ui);border-radius:10px;align-items:center;gap:10px;padding:8px 14px;font-weight:500;display:inline-flex;box-shadow:0 1px 2px #1111110a}.chip img{flex:none}.rows{border-bottom:1px solid var(--line)}.row{border-top:1px solid var(--line);flex-wrap:wrap;align-items:flex-start;gap:8px 32px;padding:26px 0;display:flex}.row-meta{font-size:var(--fs-sm);color:var(--muted);flex:0 0 160px;padding-top:4px}.row-main{min-width:0;font-size:var(--fs-lead);flex:280px;font-weight:500;line-height:1.4}.row-sub{min-width:0;font-size:var(--fs-ui);color:var(--muted);flex:240px;padding-top:2px}.row-venue{font-size:var(--fs-ui);color:var(--muted);margin-top:6px;font-weight:400}.row-arrow{flex:0 0 20px;padding-top:6px}.contact{background:radial-gradient(90% 70% at 50% 0%, #ffffff12, transparent 70%), var(--band);color:#fff;border-top:1px solid #ffffff14;position:relative}.contact-inner{padding-top:88px;padding-bottom:0}.contact h2{letter-spacing:-.035em;max-width:720px;font-size:clamp(36px,6vw,64px);font-weight:500;line-height:1.05}.contact-links{font-size:var(--fs-body);flex-wrap:wrap;gap:10px 12px;margin-top:36px;display:flex}.contact-links a{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1f;border-radius:999px;align-items:center;min-height:44px;padding:0 20px;transition:background .2s,border-color .2s;display:inline-flex;box-shadow:inset 0 1px #ffffff14}.contact-links a:hover{background:#ffffff1a;border-color:#ffffff38}.copyright{font-size:var(--fs-xs);color:#a8a8a3;border-top:1px solid #ffffff14;margin-top:56px;padding-top:20px}html:lang(zh) .hero h1,html:lang(th) .hero h1{letter-spacing:0;font-size:clamp(34px,5.5vw,60px);line-height:1.3}html:lang(zh) .section-title,html:lang(th) .section-title{letter-spacing:0;font-size:clamp(28px,4vw,38px);line-height:1.35}html:lang(zh) .contact h2,html:lang(th) .contact h2{letter-spacing:0;font-size:clamp(30px,5vw,52px);line-height:1.3}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pulse-dot{animation:none}}.all-work{padding-top:64px;padding-bottom:112px}.all-work-title{margin-top:24px}.contact{padding-bottom:88px}.badges{flex-wrap:wrap;align-items:center;gap:12px 20px;display:flex}.location{font-size:var(--fs-sm);color:var(--muted);align-items:center;gap:8px;display:inline-flex}.theme-btn{width:40px;height:40px;color:var(--ink);background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;display:inline-flex}.theme-btn:hover{background:var(--hover)}.topbar-actions{align-items:center;gap:8px;display:flex}.theme-btn-top{display:none}.all-work-track{margin-top:56px}.all-work-track-title{font-size:var(--fs-lead);margin-bottom:20px;font-weight:500}.frame{overflow-x:clip}@media (max-width:640px){:root{--fs-lead:18px;--fs-h3:24px;--fs-h3l:26px}.hero{padding-top:64px;padding-bottom:72px}.section,.section-about{padding-top:64px;padding-bottom:64px}.section-last{padding-bottom:72px}.section-title,.section-head{margin-bottom:28px}.stats{padding-top:36px}.stats-strip{grid-template-columns:repeat(2,1fr)}.stat{padding:20px 18px 22px}.stat:nth-of-type(n+3){border-top:1px solid var(--line)}.stat:nth-of-type(odd){border-left:0}.contact-inner{padding-top:64px}.copyright{margin-top:40px}.dock{padding:6px 8px;bottom:12px}.tabs{scrollbar-width:none;flex-wrap:nowrap;max-width:100%;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tab{white-space:nowrap;flex:none;padding:0 16px}}.badge{border:1px dashed var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);color:var(--accent);font-size:var(--fs-sm);white-space:nowrap;border-radius:999px;align-self:flex-start;align-items:center;padding:4px 12px;font-weight:500;display:inline-flex}.project-main .badge{margin-top:10px}.timeline{flex-direction:column;gap:48px;padding-left:40px;display:flex;position:relative}.timeline:before{content:"";background:var(--line-strong);width:1px;position:absolute;top:12px;bottom:12px;left:9px}.tl-item{position:relative}.tl-dot{border:1px solid var(--line-strong);background:var(--bg);border-radius:50%;width:19px;height:19px;position:absolute;top:18px;left:-40px}.tl-dot:after{content:"";background:var(--ink);border-radius:50%;position:absolute;inset:4px}.tl-head{align-items:flex-start;gap:18px;display:flex}.tl-body{flex:auto}.tl-date{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;flex:none;padding-top:4px}.tl-desc{max-width:62ch;font-size:var(--fs-ui);color:var(--muted);margin:6px 0 0 74px;line-height:1.65}.tl-logo{border:1px solid var(--line);background:#fff;border-radius:12px;flex:0 0 56px;place-items:center;width:56px;height:56px;padding:8px;display:grid;overflow:hidden}.tl-logo img{object-fit:contain;width:100%;height:100%}.tl-logo span{font-family:var(--font-mono);font-size:var(--fs-sm);color:#444;font-weight:600}.tl-body{min-width:0}.tl-role{font-size:var(--fs-lead);font-weight:500;line-height:1.3}.tl-company{font-size:var(--fs-ui);color:var(--muted);margin-top:4px}@media (max-width:640px){.timeline{padding-left:28px}.timeline:before{left:4px}.tl-dot{width:17px;height:17px;top:18px;left:-28px}.tl-head{flex-wrap:wrap;gap:6px 14px}.tl-body{flex-basis:calc(100% - 70px)}.tl-date{margin-left:70px;padding-top:0}.tl-desc{margin-left:0}}.progress{z-index:100;pointer-events:none;height:2px;position:fixed;inset:0 0 auto}.progress-bar{background:var(--ink);transform-origin:0;will-change:transform;height:100%;transform:scaleX(0)}.reveal{opacity:0;transition:opacity .6s ease var(--reveal-delay,0s), transform .6s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay,0s);transform:translateY(18px)}.reveal.in-view{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none;transform:none}}.section-sub{max-width:60ch;font-size:var(--fs-body);color:var(--muted);margin:0 0 40px;line-height:1.6}.section-title:has(+.section-sub){margin-bottom:8px}.section-head .section-sub{margin-bottom:0}@media (max-width:640px){.section-sub{margin-bottom:28px}}.grid-glow{pointer-events:none;position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000,#0000 85%);mask-image:linear-gradient(#000,#0000 85%)}.glow-line{opacity:0;animation-timing-function:ease-in-out;animation-iteration-count:infinite;position:absolute}.glow-h{background:linear-gradient(to right, transparent, var(--ink), transparent);width:220px;height:1px;box-shadow:0 0 10px color-mix(in srgb, var(--ink) 30%, transparent);animation-name:glow-x;left:0}.glow-v{background:linear-gradient(to bottom, transparent, var(--ink), transparent);width:1px;height:220px;box-shadow:0 0 10px color-mix(in srgb, var(--ink) 30%, transparent);animation-name:glow-y;top:0}@keyframes glow-x{0%{opacity:0;transform:translate(-220px)}10%,35%{opacity:.45}45%,to{opacity:0;transform:translate(1300px)}}@keyframes glow-y{0%{opacity:0;transform:translateY(-220px)}10%,35%{opacity:.45}45%,to{opacity:0;transform:translateY(800px)}}@media (prefers-reduced-motion:reduce){.grid-glow{display:none}}.flow{padding:8px 0 56px;position:relative}.flow-grid{pointer-events:none;background-image:linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px);background-size:40px 40px;position:absolute;inset:-24px -40px;-webkit-mask-image:radial-gradient(70% 80% at 50% 40%,#000,#0000 100%);mask-image:radial-gradient(70% 80% at 50% 40%,#000,#0000 100%)}.flow-track{background:repeating-linear-gradient(to right, var(--line-strong) 0 3px, transparent 3px 8px);height:1px;position:absolute;top:12px;left:6px;right:6px;overflow:hidden}.flow-pulse{background:linear-gradient(to right, transparent, var(--ink), transparent);opacity:.5;width:160px;height:1px;animation:7s ease-in-out infinite flow-run;position:absolute;top:0;left:0}@keyframes flow-run{0%{transform:translate(-160px)}to{transform:translate(1300px)}}.flow-steps{z-index:1;grid-template-columns:repeat(4,1fr);gap:32px;margin:0;padding:0;list-style:none;display:grid;position:relative}.flow-step{padding-top:36px;position:relative}.flow-node{border:1px solid var(--line-strong);background:var(--bg);border-radius:50%;width:13px;height:13px;position:absolute;top:6px;left:0}.flow-node:after{content:"";background:var(--muted);opacity:.35;animation:8s ease-in-out infinite flow-node;animation-delay:calc(var(--i) * 2s);border-radius:50%;position:absolute;inset:3px}@keyframes flow-node{0%,30%,to{opacity:.35;transform:scale(1)}8%,16%{opacity:1;background:var(--ink);transform:scale(1.25)}}.flow-head{max-width:220px;color:var(--muted);justify-content:space-between;align-items:center;display:flex}.flow-n{font-size:var(--fs-sm)}.flow-icon{border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 70%, transparent);width:40px;height:40px;box-shadow:inset 0 1px 0 var(--glass-hl);color:var(--ink);border-radius:12px;place-items:center;display:grid}.flow-title{font-size:var(--fs-lead);margin:20px 0 8px;font-weight:500;line-height:1.3}.flow-desc{max-width:38ch;font-size:var(--fs-ui);color:var(--muted);margin:0;line-height:1.65}.flow-loop{border:1px dashed var(--line-strong);border-top:0;border-radius:0 0 18px 18px;height:28px;position:absolute;bottom:0;left:6px;right:6px}@media (max-width:900px){.flow-steps{grid-template-columns:repeat(2,1fr);gap:44px 28px}.flow-track,.flow-loop{display:none}.flow{padding-bottom:8px}}@media (max-width:520px){.flow-steps{grid-template-columns:1fr;gap:36px}}@media (prefers-reduced-motion:reduce){.flow-pulse,.flow-node:after{animation:none}}.modal-preview-private{flex-direction:column;gap:14px}.modal-preview-private svg{color:var(--muted)}:root[data-theme=dark] .chip img[src$=tanstack\.svg]{filter:invert()}