:root{color-scheme:dark;--accent:#2dd4bf;--grad:linear-gradient(92deg,#2ee6a6,#38bdf8 60%,#818cf8)}*{box-sizing:border-box}body{background:radial-gradient(1100px 700px at 50% -10%,#0c1320 0,transparent 55%),#05070a;color:#e8edf1;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;min-height:100vh;-webkit-font-smoothing:antialiased}.tls{margin:0 auto;max-width:1000px;padding:26px 18px 56px}.tls__bar{align-items:center;display:flex;gap:14px;margin-bottom:16px}.tls__title{background:var(--grad);-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0;-webkit-text-fill-color:transparent;text-align:center}.tls__back{margin-right:auto}.tls__back,.tls__home{color:#9fb0bb;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}.tls__home{margin-left:auto}.tls__back:hover,.tls__home:hover{color:#67e8f9}.tls__lead{color:#9fb0bb;font-size:13.5px;line-height:1.65;margin:0 0 18px;max-width:780px}.tls__lead strong{color:#cdd9e1;font-weight:600}.tls__lead code{color:#67e8f9;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.tls__modes{align-items:center;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}.tls__modes-label{color:#71808a;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.seg{background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.14);border-radius:10px;display:inline-flex;flex-wrap:wrap;gap:3px;padding:3px}.seg button{background:transparent;border:0;border-radius:7px;color:#9fb0bb;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;transition:color .12s ease,background .12s ease}.seg button:hover{color:#e8edf1}.seg button.is-active{background:linear-gradient(92deg,#2ee6a6,#38bdf8);color:#04221c}.tls__stage{background:radial-gradient(120% 130% at 50% 0,rgba(45,212,191,.06),transparent 60%),hsla(0,0%,100%,.02);border:1px solid hsla(0,0%,100%,.08);border-radius:16px;margin-bottom:12px;padding:8px;position:relative}.tls__diagram{border-radius:10px;display:block;height:470px;width:100%}.tls__banner{align-items:center;background:linear-gradient(92deg,#fde68a,#fbbf24);border-radius:999px;bottom:14px;box-shadow:0 6px 18px rgba(251,191,36,.28);color:#1a1405;display:flex;font-size:12.5px;font-weight:700;gap:8px;left:50%;opacity:0;padding:7px 14px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .2s ease}.tls__banner.is-on{opacity:1}.tls__legend{color:#9fb0bb;display:flex;flex-wrap:wrap;font-size:11.5px;gap:8px 16px;margin-bottom:16px;padding:0 4px}.tls__legend span{align-items:center;display:inline-flex;gap:6px}.tls__legend i{border-radius:3px;border-top:3px solid;display:inline-block;height:0;width:18px}.lg-c2s{color:#2dd4bf}.lg-s2c{color:#5fb2ff}.lg-tcp{color:#8a9aa6}.lg-app{color:#fbbf24}.lg-lock{color:#cdd9e1}.lg-lock b{font-size:12px}.tls__metrics{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}.metric{background:hsla(0,0%,100%,.03);border:1px solid hsla(0,0%,100%,.08);border-radius:12px;padding:12px 13px}.metric__label{color:#71808a;font-size:10.5px;font-weight:700;letter-spacing:.09em;margin-bottom:6px;text-transform:uppercase}.metric__val{color:#e8edf1;font-size:22px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em}.metric__val.is-accent{background:linear-gradient(92deg,#2ee6a6,#38bdf8 70%,#818cf8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.metric__val small{color:#9fb0bb;font-size:13px;font-weight:700;-webkit-text-fill-color:#9fb0bb}.metric__sub{color:#71808a;font-size:11px;font-variant-numeric:tabular-nums;margin-top:3px}.tls__compare{background:hsla(0,0%,100%,.03);border:1px solid hsla(0,0%,100%,.08);border-radius:12px;margin-bottom:16px;padding:13px 15px 15px}.cmp__head{align-items:baseline;display:flex;gap:10px;justify-content:space-between;margin-bottom:11px}.cmp__title{color:#71808a;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.cmp__title b{color:#cdd9e1}.cmp__note{color:#71808a;font-size:11.5px}.cmp__row{align-items:center;display:grid;gap:12px;grid-template-columns:116px 1fr 74px;padding:5px 0}.cmp__name{color:#9fb0bb;font-size:12.5px;font-weight:600;white-space:nowrap}.cmp__row.is-current .cmp__name{color:#e8edf1;font-weight:700}.cmp__track{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.08);border-radius:999px;height:16px;overflow:hidden;position:relative}.cmp__bar{background:rgba(120,140,160,.45);border-radius:999px;inset:0 auto 0 0;min-width:3px;position:absolute;transition:width .18s ease;width:0}.cmp__row.is-current .cmp__bar{background:linear-gradient(92deg,#2ee6a6,#38bdf8)}.cmp__ms{color:#9fb0bb;font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:700;text-align:right;white-space:nowrap}.cmp__row.is-current .cmp__ms{color:#2dd4bf}.tls__controls{background:hsla(0,0%,100%,.02);border:1px solid hsla(0,0%,100%,.07);border-radius:14px;display:grid;gap:16px 20px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:16px;padding:18px}.ctl{flex-direction:column}.ctl,.ctl__head{display:flex;gap:8px}.ctl__head{align-items:baseline;justify-content:space-between}.ctl__head>span{color:#9fb0bb;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.ctl__val{color:#2dd4bf;font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:700}.ctl input[type=range]{accent-color:#2dd4bf;cursor:pointer;height:24px;width:100%}.tls__row{align-items:center;display:flex;flex-wrap:wrap;gap:12px 16px;grid-column:1/-1}.btn{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.16);border-radius:8px;color:#e8edf1;cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:8px 15px;transition:border-color .12s ease,background .12s ease,transform .12s ease}.btn:hover{background:rgba(45,212,191,.08);border-color:rgba(45,212,191,.5)}.btn:active{transform:translateY(1px)}.btn--accent{background:linear-gradient(92deg,#2ee6a6,#38bdf8);border-color:transparent;color:#04221c;min-width:86px}.btn--accent:hover{background:linear-gradient(92deg,#41f0b4,#59c8ff)}.btn--toggle.is-active{background:linear-gradient(92deg,#2ee6a6,#38bdf8);border-color:transparent;color:#04221c}.tls__row .speed{align-items:center;display:flex;gap:9px;margin-left:auto}.tls__row .speed>span{color:#71808a;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.tls__row .speed input[type=range]{accent-color:#2dd4bf;width:116px}.tls__row .speed b{color:#2dd4bf;font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:700;min-width:34px}.tls__steps-wrap{background:hsla(0,0%,100%,.02);border:1px solid hsla(0,0%,100%,.08);border-radius:14px;margin-bottom:16px;padding:14px 16px 16px}.tls__steps-title{color:#71808a;font-size:11px;font-weight:700;letter-spacing:.09em;margin:0 0 10px;text-transform:uppercase}.steps{list-style:none;margin:0;padding:0}.step{border:1px solid transparent;border-radius:10px;cursor:pointer;display:grid;gap:10px;grid-template-columns:26px 1fr;padding:9px 10px;transition:background .12s ease,border-color .12s ease,opacity .12s ease}.step+.step{margin-top:4px}.step:focus-visible{outline:2px solid rgba(45,212,191,.6);outline-offset:2px}.step:hover{background:hsla(0,0%,100%,.03)}.step.is-done{opacity:.6}.step.is-active{background:rgba(45,212,191,.08);border-color:rgba(45,212,191,.34);opacity:1}.step__dir{font-size:15px;font-variant-numeric:tabular-nums;font-weight:800;line-height:1.5;text-align:center}.step__dir.is-c2s{color:#2dd4bf}.step__dir.is-s2c{color:#5fb2ff}.step__dir.is-tcp{color:#8a9aa6}.step__body{min-width:0}.step__title{align-items:center;color:#cdd9e1;display:flex;flex-wrap:wrap;font-size:12.5px;font-weight:700;gap:6px}.step__desc{color:#8a9aa6;font-size:11.5px;line-height:1.55;margin-top:3px}.tag{border-radius:5px;font-size:9px;font-weight:800;letter-spacing:.06em;padding:2px 6px;text-transform:uppercase}.tag--enc{background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.16);color:#cdd9e1}.tag--app{background:linear-gradient(92deg,#fde68a,#fbbf24);color:#1a1405}.tag--tcp{background:rgba(138,154,166,.16);border:1px solid rgba(138,154,166,.34);color:#b9c6cf}.tls__hint{color:#71808a;font-size:12.5px;line-height:1.7;margin:0}.tls__hint strong{color:#cdd9e1}.tls__hint code{background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.1);border-radius:4px;color:#67e8f9;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;padding:1px 5px}@media (max-width:620px){.metric__val,.tls__title{font-size:19px}.tls__diagram{height:430px}.tls__row .speed{margin-left:0}.cmp__row{gap:9px;grid-template-columns:92px 1fr 64px}.cmp__name{font-size:11.5px}}@media (max-width:380px){.tls__diagram{height:400px}.tls__back,.tls__home{font-size:13px}}@media (prefers-reduced-motion:reduce){.cmp__bar,.tls__banner{transition:none}}