.sok-page{--sok-client:#66a8ff;--sok-server:#55cf98;--sok-data:#efb24f;--sok-danger:#ff776d;width:min(1120px,100% - 32px);margin:0 auto;padding:0 0 clamp(38px,6vw,72px)}.sok-page *,.sok-page :before,.sok-page :after{box-sizing:border-box}.sok-page h1,.sok-page h2,.sok-page h3,.sok-page p{margin:0}.sok-page button{font:inherit}.sok-page ol,.sok-page ul{margin:0;padding:0;list-style:none}.sok-kicker{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;font-weight:850}.sok-hero{grid-template-columns:1.35fr .65fr;align-items:center;gap:clamp(24px,5vw,64px);padding:clamp(28px,5vw,52px);display:grid}.sok-hero h1{max-width:770px;color:var(--foreground);font-family:var(--font-display), var(--font-sans), sans-serif;letter-spacing:-.045em;word-break:keep-all;margin-top:10px;font-size:clamp(34px,5vw,60px);line-height:1.06}.sok-hero>div>p:last-child{max-width:710px;color:var(--muted);word-break:keep-all;margin-top:16px;font-size:clamp(.88rem,1.6vw,1.04rem);line-height:1.75}.sok-hero-answer{border:var(--pixel) solid var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface-2));box-shadow:5px 5px 0 color-mix(in srgb, var(--accent) 40%, var(--pixel-shadow));gap:9px;padding:22px;display:grid}.sok-hero-answer span,.sok-hero-answer small{color:var(--muted);font-size:.7rem;font-weight:750}.sok-hero-answer strong{color:var(--foreground);word-break:keep-all;font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.4}.sok-hero-answer small{font-family:var(--font-geist-mono), monospace;line-height:1.45}.sok-demo{margin-top:16px;padding:clamp(22px,4vw,38px)}.sok-demo-head{justify-content:space-between;align-items:start;gap:18px;display:flex}.sok-demo-head h2,.sok-section-title h2{color:var(--foreground);letter-spacing:-.035em;word-break:keep-all;margin-top:7px;font-size:clamp(1.35rem,3vw,2rem);line-height:1.23}.sok-reset{border:var(--pixel) solid var(--border-strong);background:var(--surface-2);min-height:44px;color:var(--muted);cursor:pointer;flex:none;padding:8px 11px;font-size:.72rem;font-weight:750}.sok-reset:hover{border-color:var(--accent);color:var(--foreground)}.sok-start-guide{border-left:3px solid var(--sok-data);background:color-mix(in srgb, var(--sok-data) 6%, var(--surface-2));color:var(--muted);flex-wrap:wrap;gap:5px 8px;padding:9px 11px;font-size:.65rem;line-height:1.5;display:flex;margin-top:12px!important}.sok-start-guide b{color:var(--sok-data)}.sok-start-guide i{color:var(--border-strong);font-style:normal}.sok-presets{grid-template-columns:1.25fr .75fr;gap:8px;margin-top:20px;display:grid}.sok-preset-group{align-items:stretch;gap:6px;min-width:0;display:flex}.sok-preset-group>span{color:var(--muted);flex:none;align-self:center;font-size:.65rem;font-weight:800}.sok-preset-group button{border:1px solid var(--border-strong);background:var(--surface-2);cursor:pointer;text-align:left;gap:3px;min-width:0;padding:10px 12px;display:grid}.sok-preset-group button strong{color:var(--foreground-soft);font-size:.7rem}.sok-preset-group button small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.57rem;overflow:hidden}.sok-preset-group button:hover,.sok-preset-group button:focus-visible{border-color:var(--accent)}.sok-preset-group button.is-selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface-2))}.sok-preset-group button.is-selected strong{color:var(--foreground)}.sok-stages{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:10px;display:grid}.sok-stages li{border:1px solid var(--border);background:var(--surface-2);opacity:.72;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;min-width:0;min-height:54px;padding:7px 8px;display:grid}.sok-stages li>b{border:1px solid var(--border-strong);width:22px;height:22px;color:var(--muted);font:850 .56rem/1 var(--font-geist-mono), monospace;place-items:center;display:grid}.sok-stages li>span{gap:2px;min-width:0;display:grid}.sok-stages strong{color:var(--foreground-soft);font-size:.61rem}.sok-stages small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.51rem;overflow:hidden}.sok-stages li.is-current{border-color:var(--sok-data);background:color-mix(in srgb, var(--sok-data) 8%, var(--surface-2));opacity:1}.sok-stages li.is-current>b{border-color:var(--sok-data);background:var(--sok-data);color:#17120a}.sok-stages li.is-current strong{color:var(--foreground)}.sok-stages li.is-done{opacity:1}.sok-stages li.is-done>b{border-color:var(--sok-server);color:var(--sok-server)}.sok-stage-area{grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:10px;margin-top:10px;display:grid}.sok-board{border:var(--pixel) solid var(--border);background:var(--background);align-content:start;gap:12px;min-width:0;min-height:430px;padding:clamp(12px,2vw,18px);display:grid}.sok-target{justify-content:center;align-items:stretch;gap:6px;min-width:0;display:flex}.sok-target>span{color:var(--muted);align-self:center;margin-right:5px;font-size:.61rem;font-weight:800}.sok-target>div{border:1px solid var(--border-strong);background:var(--surface-2);gap:3px;min-width:100px;padding:7px 10px;display:grid}.sok-target>div small{color:var(--muted);font-size:.5rem}.sok-target>div strong{color:var(--foreground);font:800 .66rem/1.2 var(--font-geist-mono), monospace}.sok-target>div.is-focus{border-color:var(--sok-data);background:color-mix(in srgb, var(--sok-data) 9%, var(--surface-2))}.sok-target>div.is-focus small,.sok-target>div.is-focus strong{color:var(--sok-data)}.sok-target>i{color:var(--sok-data);font:900 .8rem/1 var(--font-geist-mono), monospace;align-self:center;font-style:normal}.sok-network{grid-template-columns:minmax(135px,.85fr) minmax(165px,1.1fr) minmax(135px,.85fr);align-items:stretch;gap:8px;min-width:0;display:grid}.sok-endpoint{border:var(--pixel) solid var(--border-strong);background:var(--surface-2);align-content:start;gap:8px;min-width:0;padding:11px;display:grid}.sok-endpoint.is-client{border-top-color:var(--sok-client)}.sok-endpoint.is-server{border-top-color:var(--sok-server)}.sok-machine{border-bottom:1px solid var(--border);align-items:center;gap:8px;min-width:0;padding-bottom:9px;display:flex}.sok-machine>span{color:var(--foreground);flex:none;font-size:1.35rem}.sok-machine>div{gap:2px;min-width:0;display:grid}.sok-machine small{color:var(--muted);font:750 .48rem/1 var(--font-geist-mono), monospace;letter-spacing:.05em}.sok-machine strong{color:var(--foreground);font-size:.72rem}.sok-machine code{color:var(--muted);font:650 .53rem/1.2 var(--font-geist-mono), monospace;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sok-listener,.sok-talk-socket,.sok-inbox{border:1px solid var(--border);background:var(--background);gap:4px;min-width:0;padding:8px;display:grid}.sok-listener span,.sok-talk-socket span,.sok-inbox span{color:var(--muted);font-size:.53rem;font-weight:750}.sok-listener strong,.sok-talk-socket strong,.sok-inbox strong{color:var(--foreground-soft);text-overflow:ellipsis;white-space:nowrap;font-size:.61rem;line-height:1.3;overflow:hidden}.sok-listener.is-listening{border-color:var(--sok-server);background:color-mix(in srgb, var(--sok-server) 7%, var(--background))}.sok-listener.is-listening strong{color:var(--sok-server)}.sok-talk-socket.is-connected,.sok-talk-socket.is-sending,.sok-talk-socket.is-receiving{border-color:var(--sok-data)}.sok-talk-socket.is-connected strong{color:var(--sok-server)}.sok-talk-socket.is-connecting strong,.sok-talk-socket.is-sending strong,.sok-talk-socket.is-receiving strong{color:var(--sok-data)}.sok-talk-socket.is-closed{opacity:.65}.sok-talk-socket.is-closed strong{color:var(--sok-danger)}.sok-inbox{margin-top:auto}.sok-inbox.has-data{border-color:var(--sok-data);background:color-mix(in srgb, var(--sok-data) 7%, var(--background))}.sok-inbox.has-data strong{color:var(--sok-data)}.sok-wire{align-content:center;justify-items:stretch;gap:12px;min-width:0;padding:12px 4px;display:grid;position:relative}.sok-network-label{color:var(--muted);font:750 .49rem/1 var(--font-geist-mono), monospace;letter-spacing:.06em;justify-self:center}.sok-line{grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.sok-line i{background:var(--border-strong);height:2px}.sok-line b{border:2px solid var(--border-strong);background:var(--background);width:10px;height:10px;transform:rotate(45deg)}.sok-wire.is-connecting .sok-line i,.sok-wire.is-connecting .sok-line b{border-color:var(--sok-data);background:var(--sok-data)}.sok-wire.is-connected .sok-line i,.sok-wire.is-request .sok-line i,.sok-wire.is-response .sok-line i{background:var(--sok-server)}.sok-wire.is-connected .sok-line b,.sok-wire.is-request .sok-line b,.sok-wire.is-response .sok-line b{border-color:var(--sok-server)}.sok-wire.is-closed .sok-line i{background:var(--sok-danger);opacity:.45}.sok-wire.is-closed .sok-line b{border-color:var(--sok-danger);transform:rotate(45deg)scale(.7)}.sok-wire-state{border:1px dashed var(--border-strong);background:var(--surface-2);min-height:74px;color:var(--muted);text-align:center;word-break:keep-all;padding:11px 8px;font-size:.61rem;font-weight:750;line-height:1.45}.sok-wire.is-connecting .sok-wire-state{border-color:var(--sok-data);color:var(--sok-data)}.sok-wire.is-connected .sok-wire-state{border-style:solid;border-color:var(--sok-server);color:var(--sok-server)}.sok-wire.is-closed .sok-wire-state{border-color:var(--sok-danger);color:var(--sok-danger)}.sok-frame{border:1.5px solid var(--sok-data);background:color-mix(in srgb, var(--sok-data) 8%, var(--surface-2));min-width:0;min-height:86px;color:var(--sok-data);align-items:center;gap:7px;padding:9px;display:flex}.sok-frame.is-server-to-client{text-align:right;flex-direction:row-reverse}.sok-frame>span{flex:none;font-size:1.2rem;font-weight:950}.sok-frame>div{gap:4px;min-width:0;display:grid}.sok-frame small{font:800 .48rem/1 var(--font-geist-mono), monospace}.sok-frame strong{color:var(--foreground);text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.sok-frame code{color:var(--muted);font:650 .47rem/1.2 var(--font-geist-mono), monospace;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sok-side{align-content:start;gap:8px;min-width:0;display:grid}.sok-now{border:var(--pixel) solid var(--sok-data);background:color-mix(in srgb, var(--sok-data) 5%, var(--surface-2));gap:9px;min-height:226px;padding:16px;display:grid}.sok-now>span{color:var(--sok-data);font:800 .56rem/1 var(--font-geist-mono), monospace}.sok-now>strong{color:var(--foreground);word-break:keep-all;font-size:.88rem;line-height:1.45}.sok-now>p{color:var(--muted);word-break:keep-all;font-size:.67rem;line-height:1.65}.sok-now>code{border:1px solid var(--border);background:var(--background);color:var(--foreground-soft);font:650 .55rem/1.4 var(--font-geist-mono), monospace;white-space:nowrap;align-self:end;padding:7px 8px;overflow-x:auto}.sok-log-panel{border:var(--pixel) solid var(--border-strong);background:var(--surface-2);min-height:196px;padding:14px 16px}.sok-panel-title{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.65rem;font-weight:850}.sok-panel-empty{color:var(--muted);word-break:keep-all;font-size:.7rem;line-height:1.6;margin-top:12px!important}.sok-log{gap:4px;max-height:150px;margin-top:10px;display:grid;overflow-y:auto}.sok-log li{border-left:3px solid var(--border-strong);color:var(--muted);font:620 .57rem/1.45 var(--font-geist-mono), monospace;padding:5px 8px}.sok-log li.is-current{border-left-color:var(--sok-data);background:color-mix(in srgb, var(--sok-data) 7%, transparent);color:var(--foreground)}.sok-controls{flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;display:flex}.sok-main{border:var(--pixel) solid var(--accent);background:var(--accent);min-width:132px;min-height:46px;color:var(--accent-contrast);cursor:pointer;font-size:.84rem;font-weight:850}.sok-main:hover{filter:brightness(1.08)}.sok-auto{border:var(--pixel) solid var(--border-strong);background:var(--surface-2);min-height:46px;color:var(--foreground-soft);cursor:pointer;padding:0 16px;font-size:.78rem;font-weight:800}.sok-auto:hover{border-color:var(--accent);color:var(--foreground)}.sok-auto.is-on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface-2));color:var(--foreground)}.sok-progress{color:var(--muted);margin-left:auto;font-size:.72rem}.sok-progress b{color:var(--foreground-soft);font-weight:800}.sok-main:focus-visible,.sok-auto:focus-visible,.sok-reset:focus-visible,.sok-preset-group button:focus-visible{outline:3px solid color-mix(in srgb, var(--accent) 50%, transparent);outline-offset:2px}.sok-api-map{border:var(--pixel) solid var(--border);background:var(--surface-2);margin-top:11px}.sok-api-map summary{color:var(--foreground-soft);cursor:pointer;padding:11px 13px;font-size:.68rem;font-weight:800}.sok-api-map[open] summary{border-bottom:1px solid var(--border)}.sok-api-map>div{grid-template-columns:1.1fr .9fr .9fr;gap:7px;padding:10px;display:grid}.sok-api-map section{border:1px solid var(--border);background:var(--background);gap:6px;min-width:0;padding:10px;display:grid}.sok-api-map section span{color:var(--accent);font:800 .52rem/1 var(--font-geist-mono), monospace}.sok-api-map section code{color:var(--foreground);font:650 .57rem/1.45 var(--font-geist-mono), monospace;white-space:nowrap;overflow-x:auto}.sok-api-map section p{color:var(--muted);word-break:keep-all;font-size:.59rem;line-height:1.5}.sok-basics{margin-top:16px;padding:clamp(22px,4vw,38px)}.sok-section-title{text-align:center}.sok-basics>div:last-child{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;display:grid}.sok-basics article{border:var(--pixel) solid var(--border-strong);background:var(--surface-2);align-content:start;gap:8px;min-height:185px;padding:19px;display:grid;position:relative}.sok-basics article>b{border:1px solid var(--accent);width:48px;height:32px;color:var(--accent);font:900 .63rem/1 var(--font-geist-mono), monospace;place-items:center;display:grid}.sok-basics article strong{color:var(--foreground);margin-top:8px;font-size:.86rem}.sok-basics article p{color:var(--muted);word-break:keep-all;font-size:.7rem;line-height:1.65}.sok-protocols{border:var(--pixel) solid var(--border-strong);background:var(--surface-1);margin-top:16px;padding:clamp(24px,4vw,40px)}.sok-protocols>div:last-child{grid-template-columns:1fr 1fr;gap:8px;margin-top:20px;display:grid}.sok-protocols article{border:var(--pixel) solid var(--border);background:var(--surface-2);gap:8px;padding:19px;display:grid}.sok-protocols article.is-tcp{border-color:var(--sok-server);background:color-mix(in srgb, var(--sok-server) 6%, var(--surface-2))}.sok-protocols article>span{border:1px solid var(--border-strong);color:var(--muted);font:850 .6rem/1 var(--font-geist-mono), monospace;justify-self:start;padding:5px 7px}.sok-protocols article.is-tcp>span{border-color:var(--sok-server);color:var(--sok-server)}.sok-protocols article strong{color:var(--foreground);font-size:.82rem}.sok-protocols article p{color:var(--muted);word-break:keep-all;font-size:.68rem;line-height:1.65}.sok-summary{border:var(--pixel) solid var(--border-strong);background:var(--surface-1);color:var(--foreground-soft);font:750 .68rem/1.4 var(--font-geist-mono), monospace;text-align:center;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:8px;margin-top:16px;padding:20px;display:grid}.sok-summary i{color:var(--accent);font-style:normal}.sok-warning{gap:8px;padding:22px 2px 0;display:grid}.sok-warning strong{color:var(--foreground);font-size:.78rem}.sok-warning p{color:var(--muted);word-break:keep-all;font-size:.7rem;line-height:1.65}.sok-warning span{color:var(--muted);font:650 .61rem/1.5 var(--font-geist-mono), monospace}@media (max-width:900px){.sok-presets,.sok-stage-area{grid-template-columns:1fr}.sok-side{grid-template-columns:1.1fr .9fr}.sok-now{min-height:0}}@media (max-width:840px){.sok-hero{grid-template-columns:1fr}.sok-hero-answer{max-width:440px}.sok-stages{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:620px){.sok-page{width:min(100% - 24px,1120px);padding:0 0 36px}.sok-hero,.sok-demo,.sok-basics{padding:20px 16px}.sok-hero h1{font-size:clamp(32px,10.5vw,46px)}.sok-hero>div>p:last-child{font-size:.82rem}.sok-hero-answer{box-shadow:4px 4px 0 color-mix(in srgb, var(--accent) 40%, var(--pixel-shadow));padding:17px}.sok-demo-head{display:grid}.sok-reset{justify-self:start}.sok-start-guide{grid-template-columns:auto 1fr;display:grid}.sok-start-guide>b{grid-column:1/-1}.sok-start-guide i{display:none}.sok-preset-group{grid-template-columns:1fr 1fr;display:grid}.sok-preset-group>span{grid-column:1/-1}.sok-preset-group button{min-height:58px;padding:8px}.sok-preset-group button small{white-space:normal}.sok-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.sok-stages li{grid-template-columns:auto 1fr;min-height:48px;padding:6px}.sok-stages small{display:none}.sok-board{min-height:auto;padding:10px}.sok-target{grid-template-columns:1fr auto .65fr;display:grid}.sok-target>span{grid-column:1/-1}.sok-target>div{min-width:0}.sok-network{grid-template-columns:1fr}.sok-wire{min-height:150px;padding:8px 26px}.sok-line{transform:rotate(90deg)}.sok-frame.is-server-to-client{text-align:left;flex-direction:row}.sok-frame>span{transform:rotate(90deg)}.sok-endpoint.is-server{order:3}.sok-wire{order:2}.sok-endpoint.is-client{order:1}.sok-side{grid-template-columns:1fr}.sok-log-panel{min-height:0}.sok-progress{flex-basis:100%;margin-left:0}.sok-api-map>div,.sok-basics>div:last-child{grid-template-columns:1fr}.sok-basics article{min-height:0}.sok-protocols{padding:22px 16px}.sok-protocols>div:last-child,.sok-summary{grid-template-columns:1fr}.sok-summary i{transform:rotate(90deg)}}