@font-face{font-family:"IBM Plex Sans Thai";src:url("../../fonts/IBMPlexSansThai-Regular.ttf");font-display:swap}
@font-face{font-family:"IBM Plex Sans Thai";src:url("../../fonts/IBMPlexSansThai-SemiBold.ttf");font-weight:600 800;font-display:swap}
@font-face{font-family:Inter;src:url("../../fonts/Inter-Bold.woff2");font-weight:700;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-underline-offset:4px}img{display:block;max-width:100%;height:auto}h1,h2,p{margin:0}h1,h2{text-wrap:balance;line-height:1.2}h2{font-size:clamp(2rem,5vw,4.5rem);letter-spacing:-.045em}.skip-link{position:fixed;left:8px;top:8px;z-index:5;transform:translateY(-180%);background:var(--hush-white);padding:.75rem}.skip-link:focus{transform:none}a:focus-visible{outline:3px solid var(--hush-iris);outline-offset:4px}.labbar{min-height:40px;padding:.5rem clamp(1rem,5vw,5rem);display:flex;justify-content:space-between;gap:1rem;background:var(--hush-ink);color:var(--hush-white);font-size:.75rem}.labbar>div{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}.labbar a{text-decoration:none}.intro,.pipeline,.brief-card,.tokens,.icons,.keyvisual,.handoff{padding:clamp(4rem,9vw,8rem) clamp(1.25rem,6vw,6rem)}.eyebrow{font:700 .7rem/1.4 Inter,sans-serif;letter-spacing:.16em;margin-bottom:1.25rem}.intro{min-height:72vh;display:grid;align-content:center;background:var(--hush-lilac)}.intro h1{font-size:clamp(3.5rem,10vw,9rem);letter-spacing:-.07em}.intro h1 span{font-family:var(--hush-font-display)}.intro>p{max-width:50rem;font-size:clamp(1rem,2vw,1.3rem);margin-top:2rem}.intro nav{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2rem}.intro nav a,.keyvisual a{display:inline-flex;min-height:44px;align-items:center;padding:.6rem 1rem;border:1px solid currentColor;border-radius:var(--hush-radius-pill);text-decoration:none}.pipeline{background:var(--hush-white)}.pipeline header{max-width:55rem}.pipeline ol{list-style:none;padding:0;margin:3rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hush-line)}.pipeline li{min-height:12rem;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--hush-line)}.pipeline li:last-child{border:0}.pipeline b{font:700 1.1rem Inter,sans-serif}.pipeline span{color:var(--hush-muted)}.brief-card{display:grid;grid-template-columns:1fr 1fr;gap:4rem;background:var(--hush-ink);color:var(--hush-white)}.brief-card h2{color:var(--hush-lilac)}.brief-card dl{margin:0}.brief-card dl div{padding:1.25rem 0;border-bottom:1px solid #4b4757}.brief-card dt{font:.7rem Inter,sans-serif;letter-spacing:.12em;color:var(--hush-lilac);text-transform:uppercase}.brief-card dd{margin:.5rem 0 0}.tokens header,.icons header{max-width:54rem}.tokens header>p:last-child,.icons header>p:last-child{color:var(--hush-muted);margin-top:1rem}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:3rem}.swatches figure{margin:0}.swatches figure>span{display:block;aspect-ratio:1;border:1px solid var(--hush-line);border-radius:50%}.swatches figcaption{font-size:.8rem;margin-top:.75rem}.swatches code{color:var(--hush-muted)}.swatches .cloud span{background:var(--hush-cloud)}.swatches .ink span{background:var(--hush-ink)}.swatches .lilac span{background:var(--hush-lilac)}.swatches .iris span{background:var(--hush-iris)}.swatches .muted span{background:var(--hush-muted)}.swatches .white span{background:var(--hush-white)}.type-sample{display:grid;gap:1rem;margin-top:5rem;padding-top:2rem;border-top:1px solid var(--hush-line)}.type-sample>span{color:var(--hush-muted)}.type-sample strong{font-size:clamp(2.5rem,7vw,6rem);line-height:1.25;letter-spacing:-.05em}.type-sample b{font:700 clamp(2rem,5vw,5rem)/1 Inter,sans-serif;color:var(--hush-iris)}.icons{background:var(--hush-lilac)}.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}.icon-grid figure{margin:0;min-height:15rem;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;background:var(--hush-white);border-radius:var(--hush-radius-card)}.icon-sizes{display:flex;align-items:end;gap:1.25rem}.icon-sizes .size-24{width:24px;height:24px}.icon-sizes .size-48{width:48px;height:48px}.icon-grid figcaption{display:flex;justify-content:space-between;gap:1rem}.icon-grid figcaption span{color:var(--hush-muted);font:700 .75rem Inter,sans-serif}.keyvisual{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:center;min-height:85vh;background:#ede9fd}.keyvisual-copy h2{font:700 clamp(2.7rem,6vw,6.5rem)/1.04 Inter,sans-serif;letter-spacing:-.06em}.keyvisual-copy>p:not(.eyebrow){margin:2rem 0;color:var(--hush-muted)}.keyvisual figure{position:relative;margin:0;overflow:hidden}.keyvisual figure>span{position:absolute;inset:4% 0 auto;text-align:center;font:700 clamp(3rem,8vw,8rem)/1 Inter,sans-serif;letter-spacing:-.07em;color:#81739f}.keyvisual img{position:relative;mix-blend-mode:multiply}.keyvisual figcaption{font-size:.75rem;color:var(--hush-muted)}.handoff{max-width:75rem;margin:auto}.handoff ul{columns:2;gap:3rem;margin:3rem 0;padding-left:1.2rem}.handoff li{break-inside:avoid;margin:.7rem 0}.handoff a{font-weight:600}footer{padding:2rem clamp(1.25rem,6vw,6rem);display:flex;justify-content:space-between;gap:1rem;background:var(--hush-ink);color:var(--hush-white);font-size:.75rem}
.icons header>p:last-child{color:var(--hush-ink)}
body{color:var(--hush-text-primary);background:var(--hush-surface)}
a:focus-visible{outline-color:var(--hush-focus)}
.tokens header>p:last-child,.keyvisual-copy>p:not(.eyebrow){color:var(--hush-text-secondary)}
.keyvisual-copy>a{background:var(--hush-action-bg);color:var(--hush-action-text)}
.states{padding:clamp(4rem,9vw,8rem) clamp(1.25rem,6vw,6rem);background:var(--hush-white)}.states header{max-width:55rem}.states header>p:last-child{margin-top:1rem;color:var(--hush-text-secondary)}.form-specimen{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:1rem;margin-top:3rem;padding:1.25rem;border:1px solid var(--hush-line);border-radius:var(--hush-radius-card)}.form-specimen>div{display:flex;flex-direction:column;gap:.4rem}.form-specimen span{font-size:.78rem;color:var(--hush-text-secondary)}.form-specimen strong{font-size:1rem}.control-preview{align-items:flex-start}.faux-control{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.6rem 1rem;border-radius:var(--hush-radius-pill);background:var(--hush-action-bg);color:var(--hush-action-text)!important;font-weight:600}.faux-control img{width:24px;height:24px}.state-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}.state-grid article{min-height:12rem;padding:1.25rem;border:1px solid var(--hush-line);border-radius:var(--hush-radius-card)}.state-grid article>span{font:700 .68rem Inter,sans-serif;letter-spacing:.12em;color:var(--hush-text-secondary)}.state-grid h3{margin:2rem 0 .5rem;font-size:1.1rem}.state-grid p{font-size:.9rem;color:var(--hush-text-secondary)}.state-error{border-color:#a32930!important}.state-success{border-color:#17623f!important}
@media(max-width:760px){.form-specimen,.state-grid{grid-template-columns:1fr}.state-grid article{min-height:9rem}}
@media(max-width:760px){.labbar span{display:none}.pipeline ol,.brief-card,.keyvisual{grid-template-columns:1fr}.pipeline li{min-height:7rem;border-right:0;border-bottom:1px solid var(--hush-line)}.swatches{grid-template-columns:repeat(3,1fr)}.icon-grid{grid-template-columns:1fr 1fr}.icon-grid figure{min-height:11rem;padding:1.25rem}.handoff ul{columns:1}.keyvisual{gap:2rem}footer{flex-direction:column}}
@media(max-width:350px){.intro,.pipeline,.brief-card,.tokens,.icons,.keyvisual,.handoff{padding-left:1rem;padding-right:1rem}.icon-grid{grid-template-columns:1fr}.swatches{grid-template-columns:1fr 1fr}.intro h1{font-size:3.15rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.labbar,.skip-link{display:none}.intro,.pipeline,.brief-card,.tokens,.icons,.keyvisual,.handoff{padding:2rem}.intro{min-height:0}.brief-card{background:white;color:var(--hush-ink);border:1px solid var(--hush-line)}.brief-card h2{color:var(--hush-iris)}.keyvisual{min-height:0}.icon-grid figure{border:1px solid var(--hush-line)}}