/* Compact library and illustrated connection examples. */
.games-section, .route-showcase, .benefits-section, .documents-section { padding-block:64px; }
.games-section .section-head { gap:24px; }
.games-section h2 { font-size:clamp(26px,3vw,39px); line-height:1.15; }
.games-section .section-aside { flex:none; margin:0; }
.games-section .catalog-count { padding:8px 12px; font-size:11px; gap:14px; max-width:none; margin:0; }
.games-section .catalog-count b { font-size:17px; }
.catalog-shell { padding:20px; border-radius:14px; }
.catalog-caption { padding-bottom:14px; }
.games-section .site-game-grid, .games-section .site-game-grid.is-apps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.games-section .site-game { min-width:0; display:flex; flex-direction:row; align-items:center; gap:13px; padding:12px; min-height:116px; border-radius:10px; background:#14241b; text-align:left; }
.games-section .site-game-art { width:64px; height:88px; aspect-ratio:auto; flex:none; border-radius:5px; background:#1d3327; }
.games-section .site-game-copy { min-width:0; padding:0; }
.games-section .site-game strong { font-size:13px; height:auto; line-height:1.4; color:#e4eee8; }
.games-section .site-game small { font-size:10px; margin-top:7px; }
.games-section .site-app .site-game-art { width:52px; height:52px; border:0; }
.games-section .site-app .site-game-art img { object-fit:contain; padding:6px; }
.games-section .site-game:hover { transform:translateY(-3px); }
.catalog-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.catalog-bottom p { font-size:11px; color:#8da797; }
.catalog-pagination { display:flex; align-items:center; gap:12px; flex:none; }
.catalog-pagination button { display:grid; place-items:center; width:34px; height:34px; border:1px solid #3b6149; border-radius:6px; background:#1e3828; color:#bcdfca; transition:background .2s,border-color .2s; }
.catalog-pagination button:hover:not(:disabled) { background:#30553d; border-color:#73a988; }
.catalog-pagination button:disabled { opacity:.3; cursor:default; }
.catalog-pagination svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }
.catalog-pagination span { color:#b1c8ba; font-size:11px; min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }
.catalog-empty { grid-column:1/-1; padding:24px 0; color:#adbfaf; }
.route-showcase { position:relative; }
.section-anchor { position:absolute; top:0; scroll-margin-top:100px; }
.route-showcase .section-head, .benefits-section .section-head, .documents-section .section-head { gap:24px; }
.route-showcase h2, .benefits-section h2, .documents-section h2 { font-size:clamp(31px,3.8vw,49px); line-height:1.08; }
.showcase-intro { max-width:310px; padding-bottom:3px; }
.showcase-intro p, .benefits-intro, .documents-intro { color:#a9beb1; font-size:13px; line-height:1.8; }
.motion-control { display:flex; align-items:center; gap:7px; color:#8dad9a; padding:6px 0; margin-top:10px; border:0; background:transparent; font-size:10px; }
.motion-control:hover { color:#d6efdf; }
.motion-control svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
.motion-play, [aria-pressed=true] .motion-pause { display:none; }
[aria-pressed=true] .motion-play { display:block; }
.connection-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.connection-example { --route-color:#70d69d; position:relative; min-width:0; padding:26px 25px 0; border:1px solid #355440; border-radius:14px; background:radial-gradient(ellipse at 100% 35%,#24543840,transparent 60%),#102018; overflow:hidden; }
.connection-example:before { content:""; position:absolute; top:0; left:25px; right:25px; height:1px; background:linear-gradient(90deg,transparent,#70a28299,transparent); }
.connection-example.work-example { --route-color:#9acdbb; background:radial-gradient(ellipse at 100% 35%,#234b4440,transparent 60%),#11201c; }
.example-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.example-kind { display:flex; gap:8px; align-items:center; color:var(--route-color); font-size:11px; font-weight:650; }
.example-kind svg { width:19px; height:19px; }
.example-number { color:#7b9685; letter-spacing:.1em; font-size:8px; }
.connection-example h3 { font-style:normal; font-size:clamp(19px,2.05vw,27px); line-height:1.24; letter-spacing:-.045em; font-weight:750; text-transform:none; }
.example-description { margin-top:10px; color:#91ad9c; font-size:11px; }
.connection-flow { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(46px,.48fr) minmax(118px,.85fr); align-items:center; margin-block:27px; }
.flow-apps { display:grid; gap:12px; }
.flow-app { display:flex; align-items:center; gap:10px; min-height:56px; padding:9px 10px; background:#0b1711; border:1px solid #2c4736; border-radius:7px; position:relative; }
.flow-app > span:nth-child(2) { min-width:0; }
.flow-app strong { display:block; font-size:12px; font-weight:650; white-space:nowrap; }
.flow-app small { display:block; color:#8aa492; font-size:9px; margin-top:2px; }
.flow-app-icon { display:grid; place-items:center; width:32px; height:32px; flex:none; }
.flow-app-icon img, .flow-app-icon svg { display:block; width:100%; height:100%; object-fit:contain; }
.flow-app-icon.is-game { overflow:hidden; border-radius:4px; }
.flow-app-icon.is-game img { object-fit:cover; }
.flow-app > i { width:4px; height:4px; border-radius:50%; background:var(--route-color); margin-left:auto; flex:none; }
.flow-wires { display:block; width:100%; height:204px; overflow:visible; fill:none; stroke-linecap:round; }
.flow-wire { stroke:#3a634b; stroke-width:1; vector-effect:non-scaling-stroke; }
.flow-packet { stroke:var(--route-color); stroke-width:2; stroke-dasharray:.06 .94; animation:traffic-flow 4.2s linear infinite; animation-delay:var(--delay); vector-effect:non-scaling-stroke; }
.flow-exit { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:176px; border:1px solid #568766; border-radius:9px; background:linear-gradient(145deg,#264b34,#172f22); box-shadow:0 0 35px #3c9c5b12; }
.work-example .flow-exit { border-color:#5b8776; background:linear-gradient(145deg,#294b41,#192e26); }
.exit-slashes { font-size:31px; line-height:1; color:var(--route-color); font-weight:850; font-style:italic; letter-spacing:-5px; transform:translateX(-2px); margin-bottom:10px; }
.exit-label { font-size:7px; letter-spacing:.13em; color:#a2beac; margin-bottom:13px; }
.country-flag { width:26px; height:17px; display:block; border-radius:2px; box-shadow:0 0 0 1px #fff2; flex:none; }
.flag-de { background:linear-gradient(#1b1b1b 0 33.33%,#cf3339 33.33% 66.66%,#f1c752 66.66%); }
.flag-se { background:linear-gradient(transparent 40%,#f2ca4d 40% 60%,transparent 60%),linear-gradient(90deg,#2174aa 29%,#f2ca4d 29% 42%,#2174aa 42%); }
.flow-exit strong { font-size:14px; margin-top:9px; font-weight:700; }
.flow-exit small { font-size:9px; color:#a6c3b0; margin-top:3px; }
.example-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-top:1px solid #2c4535; color:#a1baab; font-size:9px; }
.example-footer > span:first-child { display:flex; align-items:center; gap:6px; }
.example-footer > span:last-child { color:#799583; font-size:8px; }
.example-footer i { width:4px; height:4px; background:var(--route-color); border-radius:50%; flex:none; }
.showcase-note { display:flex; justify-content:space-between; gap:14px; margin-top:16px; color:#afc7b8; font-size:11px; }
.showcase-note span { color:#7e9b88; }
.benefits-section { border-top:1px solid #273c2f; }
.benefits-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.benefit-card { min-width:0; padding:26px; border-top:1px solid #44604d; background:linear-gradient(180deg,#17291e88,transparent); }
.benefit-art { height:107px; position:relative; margin-bottom:26px; color:#7ccc9b; }
.benefit-art > span:last-child, .benefit-art > small { display:block; position:absolute; bottom:0; left:0; font-size:8px; letter-spacing:.12em; color:#84a28e; }
.ping-art svg { height:75px; width:100%; overflow:visible; fill:none; stroke-linejoin:round; stroke-linecap:round; }
.ping-before { stroke:#627f6b66; stroke-width:1.5; }
.ping-after { stroke:#83d6a1; stroke-width:2.5; }
.access-art { display:flex; align-items:flex-start; padding-top:12px; }
.access-art .access-node { display:grid; place-items:center; width:48px; height:48px; border:1px solid #45674e; border-radius:50%; background:#172b1e; flex:none; }
.access-node svg { width:26px; height:26px; }
.access-art .access-check { background:#284c34; border-color:#628c6f; }
.access-line { height:1px; background:linear-gradient(90deg,#365740,#78bc8c); flex:1; margin-top:24px; position:relative; }
.access-line:after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid #78bc8c; border-right:1px solid #78bc8c; transform:rotate(45deg); }
.customize-art > div { display:flex; gap:24px; justify-content:center; height:72px; padding:0 30px; }
.customize-art i { position:relative; width:1px; height:68px; background:#365740; }
.customize-art i:after { content:""; position:absolute; left:-9px; top:15px; width:19px; height:10px; border:1px solid #87be98; background:#294c34; border-radius:3px; }
.customize-art i:nth-child(2):after { top:42px; }
.customize-art i:nth-child(3):after { top:28px; }
.benefit-card h3 { font-style:normal; letter-spacing:-.03em; font-size:20px; line-height:1.3; margin-bottom:13px; }
.benefit-card p { font-size:12px; line-height:1.8; color:#a0b8a9; }
.documents-section { border-top:1px solid #273c2f; }
.documents-intro { max-width:330px; }
.documents-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.document-card { display:flex; flex-direction:column; padding:25px; border:1px solid #334f3d; border-radius:10px; background:#112017; position:relative; transition:background .2s,border-color .2s,transform .2s; }
.document-card:hover { background:#1a3022; border-color:#769c83; transform:translateY(-3px); }
.document-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:26px; }
.document-top > span:last-child { font-size:8px; letter-spacing:.1em; color:#7e9f8a; }
.document-icon { display:grid; place-items:center; width:44px; height:44px; background:#203c2a; color:#9bd2af; border-radius:7px; }
.document-icon svg { width:26px; height:26px; }
.document-card h3 { font-size:19px; line-height:1.3; letter-spacing:-.035em; font-style:normal; margin-bottom:11px; }
.document-card p { color:#9bb4a5; font-size:12px; line-height:1.8; flex:1; }
.document-open { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:20px; margin-top:24px; border-top:1px solid #2f4838; color:#bfe4cc; font-size:11px; font-weight:600; }
.document-open svg, .documents-help svg { width:18px; height:18px; transition:transform .2s; }
.document-card:hover .document-open svg { transform:translateX(3px); }
.documents-help { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:20px; font-size:12px; color:#8da895; }
.documents-help a { display:flex; align-items:center; gap:10px; color:#b6d5c1; }
.documents-help a:hover { color:#e1f5e8; }
.documents-section + .download-section { margin-top:40px; }
@keyframes traffic-flow { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.route-showcase[data-paused=true] .flow-packet, .route-showcase[data-offscreen=true] .flow-packet { animation-play-state:paused; }
@media(max-width:1100px) {
  .site-nav { gap:19px; }
  .games-section .site-game { padding:10px; gap:10px; min-height:105px; }
  .games-section .site-game-art { width:50px; height:72px; }
  .games-section .site-game strong { font-size:12px; }
  .connection-example { padding:22px 18px 0; }
  .connection-flow { grid-template-columns:minmax(0,1.25fr) minmax(26px,.35fr) minmax(106px,.85fr); }
  .flow-app { gap:7px; padding:9px 7px; }
  .flow-app-icon { width:27px; height:27px; }
  .flow-app strong { font-size:11px; }
  .flow-app > i { display:none; }
  .example-footer { flex-wrap:wrap; gap:5px; }
  .benefit-card { padding:23px 18px; }
  .document-card { padding:22px 19px; }
}
@media(max-width:860px) {
  .games-section .section-head { align-items:flex-start; flex-direction:column; gap:18px; }
  .games-section .site-game-grid, .games-section .site-game-grid.is-apps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .games-section .site-game-art { width:58px; height:76px; }
  .connection-examples { grid-template-columns:1fr; }
  .connection-example { padding:24px 26px 0; }
  .connection-example h3 { font-size:26px; }
  .connection-flow { grid-template-columns:minmax(0,1.25fr) minmax(40px,.7fr) minmax(130px,1fr); }
  .flow-app { gap:12px; padding:9px 12px; }
  .flow-app-icon { width:32px; height:32px; }
  .flow-app strong { font-size:13px; }
  .flow-app > i { display:block; }
  .flow-exit { min-height:178px; }
  .example-footer { flex-wrap:nowrap; }
  .benefits-grid { gap:8px; }
  .benefit-card h3 { font-size:17px; }
  .documents-grid { gap:12px; }
  .document-card { padding:20px 16px; }
  .document-card h3 { font-size:16px; overflow-wrap:anywhere; }
  .document-top > span:last-child { font-size:7px; }
}
@media(max-width:640px) {
  .games-section, .route-showcase, .benefits-section, .documents-section { padding-block:42px; }
  .catalog-shell { padding:14px; }
  .game-tabs { width:100%; }
  .game-tabs button { flex:1; padding:9px 5px; font-size:10px; gap:5px; }
  .game-tabs button svg { width:14px; height:14px; }
  .catalog-caption { font-size:10px; gap:8px; }
  .catalog-caption > span:first-child { max-width:180px; }
  .games-section .site-game { gap:8px; padding:8px; min-height:90px; }
  .games-section .site-game-art { width:42px; height:62px; }
  .games-section .site-game strong { font-size:11px; }
  .games-section .site-game small { font-size:9px; }
  .games-section .site-app .site-game-art { width:36px; height:36px; }
  .catalog-bottom p { max-width:180px; font-size:10px; }
  .catalog-pagination { gap:8px; }
  .catalog-pagination button { width:32px; height:32px; }
  .catalog-pagination span { min-width:35px; font-size:10px; }
  .route-showcase .section-head, .benefits-section .section-head, .documents-section .section-head { flex-direction:column; align-items:flex-start; gap:20px; }
  .route-showcase h2, .benefits-section h2, .documents-section h2 { font-size:32px; }
  .showcase-intro { max-width:none; width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .showcase-intro p { font-size:11px; }
  .motion-control { flex:none; margin-top:0; font-size:9px; }
  .connection-example { padding:22px 16px 0; border-radius:10px; }
  .example-top { margin-bottom:18px; }
  .connection-example h3 { font-size:24px; }
  .example-description { font-size:10px; }
  .connection-flow { grid-template-columns:minmax(0,1.2fr) 26px minmax(102px,.82fr); margin-block:22px; }
  .flow-app { gap:8px; padding:9px 7px; }
  .flow-app-icon { width:27px; height:27px; }
  .flow-app strong { font-size:11px; }
  .flow-app small { font-size:8px; }
  .flow-app > i { display:none; }
  .flow-exit strong { font-size:12px; }
  .exit-label { font-size:6px; letter-spacing:.08em; }
  .example-footer { font-size:8px; }
  .example-footer > span:last-child { font-size:7px; }
  .showcase-note { display:block; font-size:11px; line-height:1.8; }
  .showcase-note span { display:block; }
  .benefits-grid, .documents-grid { grid-template-columns:1fr; gap:16px; }
  .benefit-card { padding:24px; }
  .benefit-art { height:90px; max-width:260px; margin-bottom:22px; }
  .benefit-card h3 { font-size:21px; }
  .document-card { padding:23px; }
  .document-top { margin-bottom:20px; }
  .document-top > span:last-child { font-size:8px; }
  .document-card h3 { font-size:21px; }
  .document-open { margin-top:20px; padding-top:16px; }
  .documents-help { align-items:flex-start; font-size:10px; }
  .documents-section + .download-section { margin-top:24px; }
}
@media(max-width:380px) {
  .game-tabs button { white-space:nowrap; }
  .game-tabs button svg { display:none; }
  .games-section .site-game-grid, .games-section .site-game-grid.is-apps { grid-template-columns:1fr; }
  .games-section .site-game { min-height:76px; }
  .games-section .site-game-art { width:38px; height:52px; }
  .games-section .site-game strong { font-size:12px; }
  .catalog-caption > span:first-child { max-width:150px; }
  .catalog-bottom { align-items:flex-start; }
  .catalog-pagination { gap:5px; }
  .connection-example { padding-inline:12px; }
  .connection-flow { grid-template-columns:minmax(0,1.2fr) 19px minmax(95px,.8fr); }
  .flow-app { gap:6px; padding-inline:6px; }
  .flow-app-icon { width:23px; height:23px; }
  .flow-app strong { font-size:10px; }
  .connection-example h3 { font-size:22px; }
  .showcase-intro { align-items:flex-start; }
  .motion-control span { max-width:66px; text-align:left; }
}
@media(prefers-reduced-motion:reduce) {
  .flow-packet { animation:none; stroke-dasharray:none; stroke-width:1; opacity:.65; }
  .motion-control { display:none; }
  .document-card, .document-open svg { transition:none; }
}