:root{color-scheme:light dark;--bg:#f6f5f1;--surface:#fff;--text:#1b1d23;--muted:#5f636e;--line:#dfddd5;--accent:#0b7d5a}@media (prefers-color-scheme:dark){:root{--bg:#101217;--surface:#181b22;--text:#eceef2;--muted:#9aa0ad;--line:#2a2e38;--accent:#7ee2b8}}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Noto Sans Thai,Tahoma,sans-serif;line-height:1.6}a{color:var(--accent)}a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}ul,ol,dl,dd{margin:0;padding:0;list-style:none}.topbar{z-index:1;background:var(--bg);justify-content:space-between;gap:16px;width:min(880px,100%);margin:0 auto;padding:16px;font-size:14px;display:flex;position:sticky;top:0}.topbar ul{white-space:nowrap;scrollbar-width:none;gap:16px;min-width:0;display:flex;overflow-x:auto}.topbar a{color:var(--muted);text-decoration:none}.topbar a:hover{color:var(--accent)}.topbar .handle{color:var(--text);font-weight:600}main{width:min(880px,100%);margin:0 auto;padding:clamp(32px,9vh,88px) 16px 48px}.role{color:var(--muted);margin:0}h1{letter-spacing:-.03em;overflow-wrap:anywhere;margin:8px 0 16px;font-size:clamp(30px,10vw,76px);line-height:1.05}.summary{max-width:56ch;margin:0 0 16px;font-size:19px}.links{flex-wrap:wrap;gap:16px;display:flex}section{margin-top:72px}h2{color:var(--muted);margin:0 0 16px;font-size:14px;font-weight:600}.subheading{margin-top:40px}.note{max-width:62ch;color:var(--muted);margin:-8px 0 16px}h3{overflow-wrap:anywhere;margin:0;font-size:20px;line-height:1.3}.muted{color:var(--muted)}.work>li{border-top:1px solid var(--line);grid-template-columns:112px minmax(0,1fr);gap:16px;padding:24px 0;display:grid}.work>li:last-child{border-bottom:1px solid var(--line)}.work-meta{color:var(--muted);align-content:start;margin:0;font-size:14px;display:grid}.work p:not(.work-meta){max-width:62ch;margin:8px 0 12px}.stack{flex-wrap:wrap;gap:8px;display:flex}.stack li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:13px}.timeline li{border-left:2px solid var(--line);padding:12px 0 12px 16px}.timeline h3{font-size:17px}.timeline p{margin:2px 0 0}.skills>div{border-top:1px solid var(--line);grid-template-columns:112px minmax(0,1fr);gap:16px;padding:12px 0;display:grid}.skills dt{color:var(--muted);font-size:14px}footer{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:72px;padding-top:16px;font-size:14px;display:flex}@media (width<=560px){.work>li,.skills>div{grid-template-columns:minmax(0,1fr);gap:4px}.work-meta{gap:12px;display:flex}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.stats{background:var(--line);border:1px solid var(--line);border-radius:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1px;margin:56px 0 0;display:grid;overflow:hidden}.stats>div,.facts>div{flex-direction:column-reverse;justify-content:flex-end;display:flex}.stats>div{background:var(--surface);padding:20px}.stats dd{letter-spacing:-.02em;color:var(--accent);font-size:40px;font-weight:700;line-height:1}.stats dt{color:var(--muted);margin-top:8px;font-size:14px}.case{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-top:24px;padding:clamp(20px,4vw,32px)}.case h3{letter-spacing:-.01em;font-size:clamp(22px,4vw,28px)}.case-meta{color:var(--muted);margin:0 0 6px;font-size:14px}.case-problem{max-width:62ch;color:var(--muted);margin:10px 0 20px;font-size:17px}.flow{counter-reset:step;align-items:stretch;gap:28px;margin:0 0 20px;display:flex}.flow li{border:1px solid var(--line);background:var(--bg);border-radius:10px;flex:1 1 0;min-width:0;padding:12px 14px;position:relative}.flow li+li:before{content:"→";color:var(--accent);font-weight:700;position:absolute;top:50%;left:-22px;transform:translateY(-50%)}.flow strong{font-size:15px;display:block}.flow span{color:var(--muted);font-size:13px;line-height:1.4;display:block}.case-did{gap:8px;margin:0 0 20px;display:grid}.case-did li{max-width:68ch;padding-left:18px;position:relative}.case-did li:before{content:"";background:var(--accent);border-radius:50%;width:7px;height:7px;position:absolute;top:.65em;left:0}.facts{flex-wrap:wrap;gap:12px 32px;margin:0 0 16px;display:flex}.facts dd{font-size:26px;font-weight:700;line-height:1.1}.facts dt{color:var(--muted);font-size:13px}.cta{border:1px solid var(--line);text-align:center;border-radius:14px;padding:clamp(24px,5vw,40px)}.cta h2{color:var(--text);font-size:clamp(22px,4vw,28px)}.cta p{max-width:48ch;color:var(--muted);margin:0 auto 20px}.button{background:var(--accent);color:var(--bg);border-radius:999px;padding:10px 20px;font-weight:600;text-decoration:none;display:inline-block}.button:hover{filter:brightness(1.08)}@media (width<=640px){.flow{flex-direction:column;gap:22px}.flow li+li:before{content:"↓";top:-19px;left:18px;transform:none}}.back{margin:0 0 24px;font-size:14px}.case-link{margin:16px 0 0;font-weight:600}.case-hero h1{font-size:clamp(30px,7vw,56px)}.prose p{max-width:68ch;margin:0 0 12px}.next{margin-top:72px}.next a{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:20px 24px;text-decoration:none;display:block}.next span{color:var(--muted);font-size:14px;display:block}.next strong{color:var(--text);font-size:18px}.next a:hover strong{color:var(--accent)}.cta-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 20px;display:flex;margin:0!important}.play-card{border:1px solid var(--line);background:linear-gradient(135deg, var(--surface), var(--bg));color:var(--muted);border-radius:14px;gap:8px;padding:clamp(20px,4vw,32px);text-decoration:none;display:grid}.play-card strong{color:var(--text);font-size:clamp(22px,4vw,28px)}.play-card span:not(.play-meta):not(.play-go){max-width:62ch}.play-meta{font-size:14px}.play-go{color:var(--accent);font-weight:600}.play-card:hover{border-color:var(--accent)}