:root{
  --bg:#e9ebee;--ink:#0d0f13;--muted:#5d636d;--card:#f6f7f9;--chip:#dde0e5;--line:rgba(13,15,19,.1);--dock:rgba(246,247,249,.72);--panel:#13161c;
  --blue:oklch(0.55 0.22 264);--lime:oklch(0.91 0.2 122);
  --grad:linear-gradient(100deg,oklch(0.5 0.23 264),oklch(0.54 0.25 305),oklch(0.6 0.24 350));
  --hl:linear-gradient(100deg,oklch(0.92 0.2 122),oklch(0.88 0.14 175));
  --glow:.55;--grain:.18;
  --g1:oklch(0.62 0.22 264);--g2:oklch(0.9 0.2 122);--g3:oklch(0.75 0.19 345);--g4:oklch(0.8 0.13 210);
}
html[data-theme="dark"]{
  --bg:#0d0f13;--ink:#eef0f4;--muted:#949aa5;--card:#161920;--chip:#22262f;--line:rgba(238,240,244,.1);--dock:rgba(22,25,32,.72);--panel:#1c2029;
  --grad:linear-gradient(100deg,oklch(0.74 0.16 250),oklch(0.74 0.18 305),oklch(0.8 0.15 350));
  --glow:.38;--grain:.12;
}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Geist','Pretendard Variable',Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
a.hv-w:hover{color:#fff;filter:brightness(1.08)}
a.hv-d:hover{color:#0c0e12;filter:brightness(1.06)}
::selection{background:var(--lime);color:#0c0e12}
@keyframes driftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,8vh) scale(1.15)}}
@keyframes driftB{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-10vw,12vh) scale(.9)}}
@keyframes driftC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,-10vh) scale(1.2)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes flow{from{background-position:0 0}to{background-position:20px 0}}
@keyframes flowr{from{background-position:0 0}to{background-position:-20px 0}}
@keyframes fadeIn{from{opacity:0}to{opacity:var(--glow)}}
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--glow);animation-timing-function:ease-in-out;animation-iteration-count:infinite;transition:opacity .4s}
.b1{width:55vw;height:55vw;top:-15vw;left:-10vw;background:var(--g1);animation-name:driftA;animation-duration:22s}
.b2{width:45vw;height:45vw;top:10vh;right:-12vw;background:var(--g3);animation-name:driftB;animation-duration:26s}
.b3{width:40vw;height:40vw;bottom:-12vw;left:20vw;background:var(--g2);animation-name:driftC;animation-duration:24s}
.b4{width:35vw;height:35vw;bottom:5vh;right:10vw;background:var(--g4);animation-name:driftA;animation-duration:30s;animation-direction:reverse}
.grain{position:absolute;inset:0;opacity:var(--grain);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.js [data-reveal]{opacity:0;transform:translateY(32px) scale(.985);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.js [data-reveal].in{opacity:1;transform:none;filter:none}
@media (max-width:819px){[data-sticky]{position:static !important}}
@media (prefers-reduced-motion:reduce){.blob{animation:none}.js [data-reveal]{opacity:1;transform:none;filter:none;transition:none}}
.iot-wire{position:relative;display:block;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.28) 50%,transparent 0) 0 0/10px 2px}
.iot-pkt{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);opacity:0}
[data-iot-pc]:hover [data-iot-mon],[data-iot-pc]:focus-visible [data-iot-mon]{border-color:var(--lime)}
[data-iot].go [data-w="1"] .iot-pkt{animation:iotPkt .45s linear forwards}
[data-iot].go [data-w="2"] .iot-pkt{animation:iotPkt .45s linear .5s forwards}
[data-iot].go [data-iot-srv]{animation:iotSrv .35s .42s}
[data-iot].go [data-iot-kscreen]{animation:iotFlash 1.1s .95s}
[data-iot].go [data-iot-kiosk]{animation:iotRing 1.1s .95s}
[data-iot].back [data-w="2"] .iot-pkt{animation:iotPktR .45s linear forwards}
[data-iot].back [data-w="1"] .iot-pkt{animation:iotPktR .45s linear .5s forwards}
[data-iot].back [data-iot-mon]{animation:iotMon .6s .95s}
@keyframes iotPkt{0%{left:0;opacity:1}100%{left:calc(100% - 8px);opacity:1}}
@keyframes iotPktR{0%{left:calc(100% - 8px);opacity:1}100%{left:0;opacity:1}}
@keyframes iotSrv{50%{transform:scale(1.06);box-shadow:0 0 24px var(--blue)}}
@keyframes iotFlash{0%,40%,80%{background:var(--lime);box-shadow:0 0 18px var(--lime)}20%,60%,100%{background:#2a3140;box-shadow:none}}
@keyframes iotRing{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--lime) 70%,transparent)}100%{box-shadow:0 0 0 18px transparent}}
@keyframes iotMon{0%,100%{border-color:rgba(255,255,255,.55)}50%{border-color:var(--lime);box-shadow:0 0 16px var(--lime)}}
.fp-canvas{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:center;padding:6px 6px}
.fp-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.fp-port{position:absolute;z-index:3;width:13px;height:13px;border-radius:50%;box-sizing:border-box;border:2px solid var(--lime);background:#15181e;touch-action:none;transition:background .2s,box-shadow .2s}
.fp-out{right:-7px;top:50%;transform:translateY(-50%);cursor:crosshair}
.fp-out:hover,.fp-port.armed{box-shadow:0 0 0 5px color-mix(in oklch,var(--lime) 30%,transparent)}
.fp-in{left:-7px;top:50%;transform:translateY(-50%);border-color:rgba(255,255,255,.5)}
.fp-port.linked{background:var(--lime);border-color:var(--lime)}
.fp-path{fill:none;stroke:rgba(255,255,255,.45);stroke-width:2}
.fp-path.tmp{stroke:var(--lime);stroke-dasharray:4 4}
[data-flow].live .fp-path{stroke:var(--lime);stroke-dasharray:6 8;animation:fpDash .6s linear infinite}
[data-flow].live [data-node]{border-color:color-mix(in oklch,var(--lime) 45%,transparent)}
[data-flow].live .fp-led circle{animation:blink .6s infinite}
.fp-pkt{position:absolute;left:0;top:0;z-index:1;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);offset-rotate:0deg;offset-anchor:50% 50%;animation:fpMove 1.1s linear infinite;pointer-events:none}
.fp-shake{animation:fpShake .35s}
@keyframes fpDash{to{stroke-dashoffset:-14}}
@keyframes fpMove{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes fpShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
[data-flow]{container-type:inline-size}
@container (max-width:560px){.fp-canvas{grid-template-columns:1fr;justify-items:center;gap:40px}.fp-canvas>[data-node]{width:min(240px,82%)}.fp-out{right:auto;left:50%;top:auto;bottom:-7px;transform:translateX(-50%)}.fp-in{left:50%;top:-7px;transform:translateX(-50%)}}