.app-preview { --app-border:#345166; }
.app-preview .icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.app-preview .k-icon { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.app-header { max-width:1280px; margin:auto; padding:28px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.app-header .brand { width:166px; display:block; }
.app-back,.app-state a { display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--cyan); font-size:14px; }
.app-back svg { transform:rotate(180deg); }
.app-main { max-width:1280px; margin:auto; padding:0 48px; }
.app-intro { display:grid; grid-template-columns:1.45fr 1fr; gap:8%; padding:64px 0 70px; align-items:center; }
.app-preview h1,.app-preview h2,.app-preview h3 { font-family:Manrope,Inter,sans-serif; font-weight:500; letter-spacing:-.03em; }
.app-preview h1 { font-size:clamp(40px,4.7vw,64px); line-height:1.12; margin:0 0 28px; }
.app-preview em { color:var(--cyan); font-style:normal; }
.app-preview p { font-size:16px; line-height:1.75; color:#bacedd; max-width:65ch; }
.app-preview strong { color:var(--cloud); font-weight:600; }
.app-state { padding:26px; border:1px solid var(--app-border); border-radius:14px; }
.development-state { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--cyan); }
.development-state i { width:7px; height:7px; background:var(--cyan); border-radius:50%; flex-shrink:0; }
.app-state h2 { font-size:27px; line-height:1.25; margin:22px 0 12px; }
.app-state p { font-size:14px; margin:0 0 16px; }
.connection-demo { border-top:1px solid var(--app-border); padding:42px 0 52px; }
.demo-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; }
.demo-heading h2,.app-direction h2 { font-size:clamp(28px,3vw,39px); line-height:1.2; margin:0; }
.demo-heading p { margin:14px 0 0; }
.demo-heading .demo-disclosure { font-size:12px; line-height:1.7; max-width:28ch; flex-shrink:0; }
.connection-stage { display:grid; grid-template-columns:1fr 100px 1.3fr; align-items:center; perspective:1600px; }
.loose-pieces { display:grid; gap:20px; }
.loose-piece { min-height:88px; display:flex; text-align:left; align-items:center; gap:16px; color:var(--cloud); background:#142238; border:1px solid #496176; border-radius:12px; padding:18px; cursor:pointer; transition:transform 240ms var(--ease),background 240ms var(--ease),border-color 240ms var(--ease); }
.loose-piece:nth-child(1) { transform:rotate(-2deg); }
.loose-piece:nth-child(3) { transform:rotate(2deg); }
.loose-piece>.k-icon { color:var(--cyan); width:24px; height:24px; flex-shrink:0; }
.loose-piece>span:nth-child(2) { display:grid; gap:6px; }
.loose-piece strong { font-size:16px; }
.loose-piece small { font-size:12px; line-height:1.4; color:#bad0df; }
.piece-action { font-size:12px; color:var(--cyan); display:flex; align-items:center; gap:6px; margin-left:auto; white-space:nowrap; }
.piece-action svg { width:18px; height:18px; }
.loose-piece[aria-pressed=true] { transform:rotate(0); border-color:#26d9c7; background:#123332; cursor:default; }
.connection-paths { width:100%; height:340px; overflow:visible; }
.connection-paths path { fill:none; stroke:#345166; stroke-width:1.5; }
.connection-paths path.is-connected { stroke:#26d9c7; stroke-width:2; stroke-dasharray:210; animation:connect-path 500ms var(--ease) both; }
.connected-board { border:1px solid #496176; border-radius:14px; padding:24px; background:#0c1c2f; transform:rotateY(-7deg) rotateX(3deg); transition:transform 550ms var(--ease),border-color 300ms var(--ease); }
.connection-stage[data-complete=true] .connected-board { transform:rotateY(0) rotateX(0); border-color:var(--cyan); }
.board-top,.board-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.board-top { padding-bottom:16px; }
.board-top strong { font-family:Manrope,Inter,sans-serif; font-size:21px; font-weight:500; }
.board-top>span,.board-bottom { color:#bad0df; font-size:12px; line-height:1.5; }
.connected-row { display:grid; grid-template-columns:24px 1fr; gap:9px 14px; border-top:1px solid #345166; padding:18px 0; min-height:114px; }
.connected-row>.k-icon { color:#a9c2d3; margin-top:2px; }
.connected-row h3 { font-size:16px; margin:0 0 7px; }
.connected-row p { font-size:13px; margin:0; line-height:1.5; }
.row-state { grid-column:2; font-size:12px; color:#a9c2d3; }
.connected-row.is-connected .row-state,.connected-row.is-connected>.k-icon { color:var(--cyan); }
.connected-row.is-connected { animation:connect-row 400ms var(--ease); }
.board-bottom { padding-top:16px; border-top:1px solid #345166; flex-wrap:wrap; }
.demo-response { min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding-top:22px; }
.demo-response p { font-size:15px; margin:0; }
#reset-demo { flex-shrink:0; min-height:44px; background:transparent; color:var(--cyan); border:0; border-bottom:1px solid var(--cyan); cursor:pointer; padding:8px 0; font-size:14px; }
#reset-demo[hidden] { display:none; }
.app-direction { border-top:1px solid var(--app-border); display:grid; grid-template-columns:1fr 1.3fr; gap:9%; padding:55px 0 75px; }
.app-direction p:first-child { margin-top:0; }
.app-direction .primary-link { font-size:14px; margin-top:15px; padding:18px 22px; gap:14px; }
.app-services { font-size:14px; display:flex; width:fit-content; align-items:center; min-height:44px; color:var(--cyan); margin-top:12px; }
.app-footer { max-width:1184px; margin:auto; padding:24px 0; border-top:1px solid var(--app-border); color:#a9c2d3; font-size:12px; display:flex; gap:20px; justify-content:space-between; }
@media(hover:hover) { .loose-piece:not([aria-pressed=true]):hover { transform:translateY(-4px); border-color:var(--cyan); background:#183047; } .app-back:hover,.app-state a:hover,.app-services:hover { text-decoration:underline; text-underline-offset:5px; } }
@keyframes connect-path { from { stroke-dashoffset:210; } to { stroke-dashoffset:0; } }
@keyframes connect-row { from { background:#173a3a; } to { background:transparent; } }
@media(max-width:1050px) { .app-header,.app-main { padding-inline:28px; } .connection-stage { grid-template-columns:1fr 48px 1.2fr; } .loose-piece { flex-wrap:wrap; gap:12px; } .piece-action { margin-left:36px; } .app-footer { margin-inline:28px; } }
@media(max-width:760px) {
 .app-header { padding:20px; gap:14px; } .app-header .brand { width:140px; } .app-back { font-size:12px; gap:8px; } .app-back svg { width:18px; height:18px; }
 .app-main { padding-inline:20px; } .app-intro { grid-template-columns:1fr; gap:26px; padding:30px 0 38px; } .app-preview h1 { font-size:40px; } .app-preview p { font-size:15px; } .app-state { padding:22px; } .app-state h2 { font-size:26px; } .app-state p { font-size:14px; }
 .demo-heading { display:block; margin-bottom:28px; } .demo-heading h2,.app-direction h2 { font-size:29px; } .demo-heading .demo-disclosure { max-width:none; margin-top:18px; font-size:12px; } .demo-disclosure br { display:none; }
 .connection-stage { grid-template-columns:1fr; gap:30px; } .connection-paths { display:none; } .loose-pieces { gap:14px; padding-inline:3px; } .loose-piece { padding:16px 12px; flex-wrap:nowrap; min-height:90px; gap:10px; } .loose-piece strong { font-size:14px; } .loose-piece small { font-size:12px; } .piece-action { margin-left:auto; font-size:12px; } .piece-action svg { display:none; }
 .connected-board { transform:none; padding:20px; } .board-top strong { font-size:20px; } .connected-row p { font-size:13px; } .board-bottom>span:last-child { display:none; } .demo-response { display:block; min-height:145px; } .demo-response p { font-size:14px; } #reset-demo { margin-top:12px; }
 .app-direction { grid-template-columns:1fr; gap:25px; padding:38px 0 45px; } .app-direction .primary-link { font-size:13px; width:100%; justify-content:center; padding:17px 12px; } .app-direction .primary-link svg { width:20px; height:20px; } .app-footer { margin-inline:20px; flex-direction:column; gap:9px; }
}
@media(prefers-reduced-motion:reduce) { .loose-piece,.connected-board { transition:none; transform:none; } .connection-paths path.is-connected,.connected-row.is-connected { animation:none; } }