:root{--bg: #0d0c0b;--surface: #1a1817;--surface-2: #242120;--line: rgba(255, 255, 255, .09);--text: #f5f2ef;--subtext: rgba(245, 242, 239, .62);--accent: #ff5900;--accent-soft: rgba(255, 89, 0, .12);--radius: 10px;--font: "Inter", "Anuphan", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;-webkit-font-smoothing:antialiased}.wrap{max-width:1080px;margin:0 auto;padding:0 24px}section.wrap,section{padding-top:88px;padding-bottom:88px}h1,h2,h3{line-height:1.2;font-weight:700;letter-spacing:-.02em}h1{font-size:clamp(2.2rem,5.5vw,3.6rem)}h2{font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:12px}h3{font-size:1.15rem}p{color:var(--subtext)}a{color:var(--text);text-decoration:none}.kicker{color:var(--accent);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}.lede{font-size:1.15rem;max-width:640px}.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;padding:13px 28px;border-radius:var(--radius);transition:opacity .15s ease}.btn:hover{opacity:.85}.btn-outline{display:inline-block;border:1px solid var(--line);color:var(--text);font-weight:600;padding:12px 26px;border-radius:var(--radius);transition:border-color .15s ease}.btn-outline:hover{border-color:var(--accent)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}.tag{display:inline-block;background:var(--surface-2);border:1px solid var(--line);color:var(--subtext);font-size:.78rem;padding:3px 10px;border-radius:999px;margin:0 6px 6px 0}.tag-accent{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:600}footer{border-top:1px solid var(--line);padding:40px 0 48px;font-size:.88rem;color:var(--subtext)}footer p+p{margin-top:8px}nav.site{display:flex;align-items:center;justify-content:space-between;padding:20px 0}nav.site .links{display:flex;gap:26px;font-size:.92rem;color:var(--subtext)}nav.site .links a{color:var(--subtext)}nav.site .links a:hover{color:var(--text)}nav.site img{height:34px;width:auto;display:block}article.prose{max-width:720px}article.prose h2{margin-top:44px}article.prose p,article.prose li{color:var(--subtext);margin-top:14px}article.prose ul{padding-left:22px}article.prose strong{color:var(--text)}.hero{position:relative;overflow:hidden}.hero .circuit{position:absolute;right:-40px;top:0;height:100%;width:min(52vw,620px);opacity:.9;pointer-events:none}@media(max-width:820px){.hero .circuit{opacity:.25;width:90vw}}.circuit path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:900;stroke-dashoffset:900;animation:trace 2.4s cubic-bezier(.6,0,.2,1) forwards;opacity:.55}.circuit path:nth-of-type(2){animation-delay:.3s}.circuit path:nth-of-type(3){animation-delay:.55s}.circuit path:nth-of-type(4){animation-delay:.8s}.circuit path:nth-of-type(5){animation-delay:1.05s}.circuit circle{fill:var(--bg);stroke:var(--accent);stroke-width:2;opacity:0;animation:node-in .5s ease forwards}.circuit circle.lit{fill:var(--accent)}.circuit circle:nth-of-type(1){animation-delay:1.1s}.circuit circle:nth-of-type(2){animation-delay:1.3s}.circuit circle:nth-of-type(3){animation-delay:1.5s}.circuit circle:nth-of-type(4){animation-delay:1.7s}.circuit circle:nth-of-type(5){animation-delay:1.9s}.circuit circle:nth-of-type(6){animation-delay:2.1s}@keyframes trace{to{stroke-dashoffset:0}}@keyframes node-in{to{opacity:1}}html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}html.js .reveal.visible{opacity:1;transform:none}.frame-browser{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}.frame-browser .chrome{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}.frame-browser .chrome span{width:10px;height:10px;border-radius:50%;background:var(--line)}.frame-browser .chrome span:first-child{background:var(--accent)}.frame-browser img,.frame-device img{display:block;width:100%;height:auto}.frame-device{border:6px solid #2e2b29;border-radius:26px;overflow:hidden;box-shadow:0 20px 60px #00000073}.work-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s ease,border-color .25s ease}.work-card:hover{transform:translateY(-4px);border-color:#ff590073}.work-card .thumb{aspect-ratio:16 / 9;overflow:hidden;border-bottom:1px solid var(--line)}.work-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .4s ease}.work-card:hover .thumb img{transform:scale(1.03)}.work-card .body{padding:24px 28px 28px}.motif{aspect-ratio:16 / 9;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.motif-barcode{background:repeating-linear-gradient(90deg,var(--surface-2) 0 6px,transparent 6px 14px,var(--surface-2) 14px 17px,transparent 17px 30px,rgba(255,89,0,.5) 30px 33px,transparent 33px 46px),var(--surface);background-size:46px 62%;background-repeat:repeat-x;background-position:0 center}.motif-documents{background:var(--surface)}.motif-documents:before{content:"";position:absolute;inset:18% 22%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;box-shadow:14px -14px 0 -2px var(--surface),14px -14px 0 -1px var(--line),28px -28px 0 -4px var(--surface),28px -28px 0 -3px var(--line)}.motif-documents:after{content:"";position:absolute;left:30%;right:42%;top:40%;height:3px;background:var(--accent);box-shadow:0 16px #ffffff24,0 32px #ffffff24,0 48px #ffffff24}.eq{display:flex;align-items:flex-end;gap:5px;height:54px}.eq span{width:6px;border-radius:3px;background:var(--accent);animation:eq-bounce 1.1s ease-in-out infinite alternate;transform-origin:bottom}.eq span:nth-child(odd){background:#ff590080}@keyframes eq-bounce{0%{transform:scaleY(.25)}to{transform:scaleY(1)}}@media(prefers-reduced-motion:reduce){.circuit path,.circuit circle,.eq span{animation-duration:.01s;animation-delay:0s}.reveal{opacity:1;transform:none;transition:none}.work-card,.work-card .thumb img{transition:none}}body{background:radial-gradient(1000px 700px at 88% -8%,rgba(255,89,0,.08),transparent 60%),radial-gradient(900px 700px at -10% 45%,rgba(255,89,0,.045),transparent 55%),radial-gradient(800px 600px at 105% 90%,rgba(255,89,0,.05),transparent 55%),var(--bg);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(ellipse 90% 80% at 50% 25%,black 30%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 25%,black 30%,transparent 85%);z-index:0}body>*{position:relative;z-index:1}nav.site .links .lang-switch{border:1px solid var(--line);border-radius:999px;padding:3px 12px;color:var(--text)}nav.site .links .lang-switch:hover{border-color:var(--accent)}.tracklist{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:860px}.track{position:relative;display:flex;align-items:center;gap:18px;padding:18px 22px 20px;background:var(--surface);border-bottom:1px solid var(--line)}.track:last-child{border-bottom:none}.track .play{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;display:grid;place-items:center;transition:border-color .15s ease}.track .play:hover{border-color:var(--accent)}.track .icon-play{width:0;height:0;border-left:12px solid var(--text);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}.track.playing .icon-play{border:none;width:10px;height:14px;margin-left:0;border-left:3.5px solid var(--accent);border-right:3.5px solid var(--accent)}.track .meta{flex:1;min-width:0}.track .row-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.track .row-top strong{color:var(--text)}.track .time{color:var(--subtext);font-size:.85rem;margin-left:auto}.track .context{margin-top:4px;font-size:.92rem}.track .mini-eq{display:none;align-items:flex-end;gap:3px;height:22px;flex:none}.track .mini-eq span{width:4px;height:100%;border-radius:2px;background:var(--accent);animation:eq-bounce .9s ease-in-out infinite alternate;transform-origin:bottom}.track.playing .mini-eq{display:flex}.track .progress{position:absolute;left:0;bottom:0;height:3px;width:0%;background:var(--accent);transition:width .25s linear}html[lang=th]{--font: "Anuphan", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif}html[lang=th] body{line-height:1.8}html[lang=th] h1,html[lang=th] h2,html[lang=th] h3{letter-spacing:0;line-height:1.4}html[lang=th] .kicker{letter-spacing:.08em}.wave{display:flex;align-items:center;gap:2px;height:46px;margin-top:10px;cursor:pointer}.wave span{flex:1;min-width:1px;background:#ffffff29;border-radius:1px;pointer-events:none;transition:background .1s linear}.wave span.lit{background:var(--accent)}.track:hover .wave span:not(.lit){background:#ffffff42}.motif-chatdoc{background:var(--surface)}.motif-chatdoc:before{content:"";position:absolute;left:14%;top:26%;width:22%;height:12%;background:var(--surface-2);border:1px solid var(--line);border-radius:12px 12px 12px 3px;box-shadow:3% 0 0 0 transparent,0 26px 0 -2px var(--accent-soft),0 27px 0 -1px #ff590059,0 52px 0 -2px var(--surface-2),0 53px 0 -1px var(--line)}.motif-chatdoc:after{content:"";position:absolute;right:16%;top:20%;width:20%;height:60%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;background-image:linear-gradient(var(--accent) 0 0),linear-gradient(#ffffff2e 0 0),linear-gradient(#ffffff2e 0 0),linear-gradient(#ffffff2e 0 0);background-repeat:no-repeat;background-size:46% 4px,64% 3px,56% 3px,40% 3px;background-position:18% 22%,18% 42%,18% 56%,18% 70%}.motif-chatdoc .arrow,.motif-chatdoc-arrow{position:absolute}nav.site .brand-mark{font-weight:700;font-size:1.3rem;letter-spacing:-.03em;color:var(--text)}nav.site .brand-mark span{color:var(--accent)}nav.site .brand-mark i{font-style:normal;color:var(--text)}.work-card.featured{display:grid;grid-template-columns:1.15fr 1fr}.work-card.featured .thumb{aspect-ratio:auto;min-height:330px;border-bottom:none;border-right:1px solid var(--line)}.work-card.featured .body{display:flex;flex-direction:column;justify-content:center;padding:34px 38px}@media(max-width:800px){.work-card.featured{grid-template-columns:1fr}.work-card.featured .thumb{aspect-ratio:16 / 9;min-height:0;border-right:none;border-bottom:1px solid var(--line)}}.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}@media(max-width:700px){.work-grid{grid-template-columns:1fr}}.work-stack{display:flex;flex-direction:column;gap:22px}.work-card.featured.flip{grid-template-columns:1fr 1.15fr}.work-card.featured.flip .thumb{order:2;border-right:none;border-left:1px solid var(--line)}@media(max-width:800px){.work-card.featured.flip{grid-template-columns:1fr}.work-card.featured.flip .thumb{order:0;border-left:none;border-bottom:1px solid var(--line)}}body:after{content:"";position:fixed;inset:-30%;pointer-events:none;background:radial-gradient(600px 480px at 78% 22%,rgba(255,89,0,.07),transparent 65%),radial-gradient(520px 480px at 18% 75%,rgba(255,89,0,.05),transparent 60%);animation:glow-drift 34s ease-in-out infinite alternate;z-index:0}@keyframes glow-drift{0%{transform:translateZ(0) scale(1);opacity:.9}50%{transform:translate3d(4%,-3%,0) scale(1.08);opacity:1}to{transform:translate3d(-4%,3%,0) scale(1);opacity:.85}}.circuit circle{transform-box:fill-box;transform-origin:center}.circuit circle.lit{animation:node-in .5s ease forwards,node-pulse 3.2s ease-in-out 2.4s infinite}@keyframes node-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.75}}@media(prefers-reduced-motion:reduce){body:after{animation:none}.circuit circle.lit{animation:node-in .01s forwards}}.work-card.featured .body{align-items:flex-start}html.js .reveal.slide-l{transform:translate(-36px)}html.js .reveal.slide-r{transform:translate(36px)}html.js .reveal.slide-l.visible,html.js .reveal.slide-r.visible{transform:none}header.site-header{position:sticky;top:0;z-index:20;transition:background .25s ease,border-color .25s ease;border-bottom:1px solid transparent}header.site-header.scrolled{background:#0d0c0bd1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}.proves{margin-top:8px;font-size:.85rem;color:var(--accent);font-weight:600}.grid-3 .card{display:flex;flex-direction:column}.pillar-proof{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.85rem;font-weight:500;color:var(--subtext);border-top:1px solid var(--line);transition:color .15s ease}.grid-3 .card p+.pillar-proof{margin-top:20px}.grid-3 .card p{margin-bottom:18px}.pillar-proof .arr{color:var(--accent);transition:transform .15s ease}.pillar-proof:hover{color:var(--text)}.pillar-proof:hover .arr{transform:translate(3px)}.step-num{display:inline-block;font-size:.8rem;font-weight:700;color:var(--accent);letter-spacing:.1em;margin-bottom:10px}#home-play.playing{background:var(--surface-2);color:var(--accent);border:1px solid var(--accent)}.wave:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}@media(max-width:820px){.hero .circuit{opacity:.38}}.ticker{display:block;width:300px;max-width:100%;height:158px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}.ticker-track{display:flex;flex-direction:column;animation:ticker-down 16s linear infinite}.ticker:hover .ticker-track{animation-play-state:paused}.ticker-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px 14px;margin-bottom:10px}.ticker-title{color:var(--text);font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ticker-row .tag{margin:0;flex:none}@keyframes ticker-down{0%{transform:translateY(-50%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}