@font-face { font-family:Inter; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:Inter; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); font-style:normal; font-weight:600; font-display:swap; }
@font-face { font-family:'Noto Sans Thai'; src:url('/fonts/noto-sans-thai-variable.ttf') format('truetype'); font-style:normal; font-weight:100 900; font-display:swap; }
* { box-sizing:border-box; }
html { color-scheme:light; background:var(--ss-white); color:var(--ss-ink); scroll-padding-top:1.5rem; }
body { margin:0; font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; font-size:1rem; line-height:1.6; font-synthesis:none; }
html:lang(th) body { font-family:'Noto Sans Thai',Inter,Tahoma,sans-serif; line-height:1.75; }
:lang(en) { font-family:Inter,system-ui,sans-serif; }
a { color:inherit; text-underline-offset:.2em; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--ss-ink); outline-offset:5px; }
.shell { max-width:1216px; margin:auto; padding:0 3rem; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem 0; border-bottom:1px solid var(--ss-line); }
.logo { padding:1rem; display:inline-flex; }
.logo img { width:240px; height:auto; display:block; }
nav { display:flex; gap:.5rem; flex-wrap:wrap; }
nav a { display:flex; align-items:center; min-height:44px; padding:.5rem .75rem; border:1px solid var(--ss-ink); border-radius:4px; }
nav a[aria-current] { color:var(--ss-white); background:var(--ss-ink); text-decoration:none; }
.skip { position:absolute; top:-100px; left:1rem; padding:1rem; background:white; z-index:2; }
.skip:focus { top:1rem; }
.intro { padding:3rem 0 1.5rem; max-width:850px; }
.eyebrow { font-size:.875rem; font-weight:600; margin:0 0 1rem; }
h1,h2,h3 { font-weight:600; margin:0 0 1rem; }
h1 { font-size:3rem; line-height:1.15; letter-spacing:-.02em; }
h2 { font-size:2rem; line-height:1.25; letter-spacing:-.02em; }
h3 { font-size:1.25rem; line-height:1.4; }
:lang(th) h1 { line-height:1.4; letter-spacing:normal; }
:lang(th) h2,:lang(th) h3 { line-height:1.5; letter-spacing:normal; }
p { margin:0 0 1rem; }
.lede { max-width:65ch; margin:0; }
.trust { border-left:4px solid var(--ss-bronze); padding:.5rem 0 .5rem 1.5rem; max-width:85ch; margin:0 0 2rem; }
.devices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.device { min-width:0; border:1px solid var(--ss-line); padding:2rem; display:flex; flex-direction:column; align-items:flex-start; }
.device > * { max-width:100%; }
main { overflow-wrap:anywhere; }
.number { font-size:.875rem; font-weight:600; padding-bottom:.5rem; border-bottom:3px solid var(--ss-bronze); margin-bottom:1rem; }
.device-lead { max-width:45ch; min-height:3.5em; }
.button { display:inline-flex; gap:1.5rem; align-items:center; justify-content:space-between; min-height:48px; background:var(--ss-ink); color:var(--ss-white); padding:.75rem 1rem; border:1px solid var(--ss-ink); border-radius:4px; font-weight:600; text-decoration:none; }
.button:hover { text-decoration:underline; }
.device .button { margin:.5rem 0 2rem; width:100%; }
ol { padding-left:1.5rem; margin:0 0 1.5rem; }
li { padding-left:.5rem; margin-bottom:1rem; }
li::marker { font-weight:600; }
.device-note { background:var(--ss-mist); color:var(--ss-ink); padding:1rem; border-radius:4px; }
.source { font-size:.875rem; margin-top:auto; }
.support { margin-top:3rem; padding:2rem; background:var(--ss-mist); display:grid; grid-template-columns:2fr 1fr; gap:2rem; }
.support h2 { font-size:1.25rem; }
.support p { margin:0; }
.direct { display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.direct a { padding:.25rem 0; }
.identity { margin-top:2rem; padding:1.5rem 0; border-top:1px solid var(--ss-line); border-bottom:1px solid var(--ss-line); }
summary { cursor:pointer; font-weight:600; padding:.5rem 0; }
.identity p { margin-top:1rem; max-width:65ch; }
dt { font-weight:600; } dd { margin:.5rem 0 1rem; }
.fingerprint { font-family:ui-monospace,monospace; font-size:.875rem; overflow-wrap:anywhere; max-width:80ch; }
footer { padding:2rem 0; font-size:.875rem; color:var(--ss-slate); }
@media(max-width:800px) { .devices,.support { grid-template-columns:minmax(0,1fr); } }
@media(max-width:639px) {
 .shell { padding:0 24px; }
 .logo { padding:16px; }
 .masthead { flex-direction:column; align-items:flex-start; gap:1rem; padding:1rem 0; }
 .intro { padding-top:2rem; }
 h1 { font-size:2rem; } h2 { font-size:1.5rem; }
 .device,.support { padding:24px; }
 .trust { padding-left:1rem; }
 .button { gap:.5rem; overflow-wrap:anywhere; }
 .button span { display:none; }
 h1,h2 { overflow-wrap:anywhere; }
}
@media print { .shell { padding:0; } nav,.skip { display:none; } .devices,.support { display:block; } .device { break-inside:avoid; margin-bottom:1rem; } .button { color:var(--ss-ink); background:white; } }