.tsp{
  --paper:#eaebee; --card:#fff; --tint:#f4f6f8;
  --ink:#192d40; --ink-deep:#19364a; --soft:#4f6475; --muted:#587283;
  --line:#dbe2e7; --rule:#e4eaee;
  --night:#19344c; --cream:#fdf7ea; --amber:#ffb763;
  --warm:#f19b47; --warm-line:#eb9441; --warm-ink:#18364b; --warm-hover:#f5aa63;
  --on:#edf3f7; --on-line:#9bb2c3; --on-edge:#41657f;
  --good:#007a52; --good-fill:#e3f5ee; --bad:#b4442a; --bad-fill:#fbece7;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:15px;font-weight:400;line-height:1.5;
  -webkit-tap-highlight-color:transparent
}
.tsp *{box-sizing:border-box}
.tsp button,.tsp a,.tsp input{touch-action:manipulation}
.tsp button{font:inherit;color:inherit}
.tsp img{display:block}
.tsp .tnum{font-variant-numeric:tabular-nums}

/* the column: the landing's own for a visitor, the room's whole width in the app */
.tsp .ts-wrap{max-width:1200px;margin:0 auto;padding:40px 44px 56px}
.v16-root .tsp .ts-wrap{max-width:none;padding:0}

/* buttons */
.tsp .ts-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:-.005em;text-decoration:none;cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease}
.tsp .ts-btn:active{transform:scale(.97)}
.tsp .ts-btn:focus-visible{outline:2px solid var(--on-edge);outline-offset:2px}
.tsp .ts-btn.wide{width:100%}
.tsp .ts-btn.primary{background:var(--warm);border-color:var(--warm-line);color:var(--warm-ink)}
.tsp .ts-btn svg,.tsp .ts-tlink svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tsp .ts-tlink svg{width:15px;height:15px}
@media (hover:hover) and (pointer:fine){.tsp .ts-btn.primary:hover{background:var(--warm-hover)}}
.tsp .ts-lnk{color:var(--ink-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9bb2c3}
.tsp .ts-tlink{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-deep);cursor:pointer;
  transition:transform 160ms var(--ease-out),color 150ms ease}
.tsp .ts-tlink:active{transform:scale(.97)}
.tsp .ts-tlink:focus-visible{outline:2px solid var(--on-edge);outline-offset:2px;border-radius:6px}
@media (hover:hover) and (pointer:fine){.tsp .ts-tlink:hover{color:var(--on-edge)}}

/* shared page pieces */
.tsp .ts-hd{margin:0 0 24px}
.tsp .ts-hd h1{margin:0;font-size:32px;font-weight:600;letter-spacing:-.035em;line-height:1.15;text-wrap:balance;color:var(--ink)}
.tsp .ts-hd .ts-sub{margin:8px 0 0;color:var(--soft);font-size:15px;max-width:62ch}
.tsp .ts-card{background:var(--card);border-radius:18px;box-shadow:0 1px 2px rgba(13,27,42,.05),0 10px 30px -14px rgba(13,27,42,.16)}
.tsp .ts-gl{width:38px;height:38px;flex:none;border-radius:10px;background:var(--on);color:var(--ink-deep);display:grid;place-items:center}
.tsp .ts-gl svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tsp .ts-gl.night{background:var(--night);color:var(--amber)}
.tsp .ts-chev{width:16px;height:16px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tsp .ts-closing{margin:26px 0 0;color:var(--soft);font-size:14px;line-height:1.55}
.tsp kbd{display:inline-block;font:600 11.5px/1 "Inter",sans-serif;letter-spacing:.02em;padding:4px 7px 3px;margin:0 1px;border-radius:6px;background:var(--card);
  border:1px solid var(--line);box-shadow:0 1px 0 #cfd8df;color:var(--ink-deep);vertical-align:1px;white-space:nowrap}
.tsp kbd.or{background:#fde9d4;border-color:#f3c597;box-shadow:0 1px 0 #ebb47e}
.tsp .ts-nw{white-space:nowrap}
.tsp code{font:600 14px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink-deep);background:var(--tint);padding:2px 5px;border-radius:5px}

/* entrance: an occasional page, one short stagger */
.tsp .ts-rv{animation:tsrv 260ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes tsrv{from{opacity:0;transform:translateY(8px)}}

/* ---------- the hub: a list beside a live preview ---------- */
.tsp .ts-split{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:22px;align-items:start}
.tsp .ts-lgroup+.ts-lgroup{margin-top:18px}
.tsp .ts-lgroup h2{margin:0 0 8px 4px;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.5;color:var(--soft)}
.tsp .ts-rows{background:var(--card);border-radius:16px;padding:6px;box-shadow:0 1px 2px rgba(13,27,42,.05),0 10px 30px -14px rgba(13,27,42,.16)}
.tsp .ts-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 10px;border-radius:11px;border:1px solid transparent;background:none;cursor:pointer;color:inherit;text-decoration:none;
  transition:background-color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)}
.tsp .ts-row:active{transform:scale(.985)}
.tsp .ts-row+.ts-row{margin-top:2px}
.tsp .ts-row[aria-pressed=true]{background:var(--on);border-color:var(--on-line);box-shadow:inset 2px 0 var(--on-edge)}
@media (hover:hover) and (pointer:fine){.tsp .ts-row:not([aria-pressed=true]):hover{background:#f6f9fb}}
.tsp .ts-row:focus-visible{outline:2px solid var(--on-edge);outline-offset:2px}
.tsp .ts-row .nm{flex:1;min-width:0;font-size:14.5px;font-weight:500}
.tsp .ts-row .ts-gl{width:34px;height:34px;border-radius:9px}
.tsp .ts-row .ts-gl svg{width:20px;height:20px}
.tsp .ts-row .ts-chev{display:none}
.tsp .ts-detail{position:sticky;top:24px}
.tsp .ts-det{padding:24px 26px 26px}
.tsp .ts-det .ts-top{display:flex;align-items:center;gap:14px}
.tsp .ts-det .ts-top .ts-gl{width:46px;height:46px;border-radius:12px}
.tsp .ts-det .ts-top .ts-gl svg{width:26px;height:26px}
.tsp .ts-det h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.tsp .ts-det .ts-note{margin:12px 0 0;font-size:15px;color:var(--soft);max-width:56ch}
.tsp .ts-prev{margin:18px 0 20px;padding:16px;border-radius:14px;background:var(--tint)}
.tsp .ts-prev h3{margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:0;line-height:1.5;color:var(--soft)}
.tsp .ts-det .ts-go{max-width:300px}
.tsp .ts-metar{display:flex;flex-wrap:wrap;gap:6px}
.tsp .ts-metar button{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:6px 8px;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;color:var(--ink-deep);
  transition:background-color 150ms ease,border-color 150ms ease,transform 160ms var(--ease-out)}
.tsp .ts-metar button:active{transform:scale(.96)}
.tsp .ts-metar button:focus-visible{outline:2px solid var(--on-edge);outline-offset:2px}
.tsp .ts-metar button[aria-pressed=true]{background:var(--night);border-color:var(--night);color:var(--cream)}
@media (hover:hover) and (pointer:fine){.tsp .ts-metar button:not([aria-pressed=true]):hover{border-color:var(--on-line)}}
.tsp .ts-metar-out{margin:12px 0 0;min-height:22px;font-size:14.5px;color:var(--ink)}
.tsp .ts-calc{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.tsp .ts-calc label{display:grid;gap:4px;font-size:12.5px;color:var(--soft);font-weight:500}
.tsp .ts-calc input{width:86px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);font:600 16px/1 "Inter",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.tsp .ts-calc input:focus{outline:2px solid var(--on-edge);outline-offset:1px;border-color:transparent}
.tsp .ts-calc-out{margin:12px 0 0;font-size:14.5px}
.tsp .ts-calc-out b,.tsp .ts-given b{font-variant-numeric:tabular-nums}
.tsp .ts-given{margin:0;font-size:14px;line-height:1.6}
.tsp .ts-fnlist{margin:0;padding:0;list-style:none;columns:2;column-gap:18px;font-size:13.5px;line-height:1.75;color:var(--ink)}

/* the phone's sheet: the same detail, drawn up from the foot */
.tsp .ts-scrim{position:fixed;inset:0;background:rgba(10,22,34,.36);opacity:0;pointer-events:none;transition:opacity 220ms ease;z-index:50}
.tsp .ts-scrim.open{opacity:1;pointer-events:auto}
.tsp .ts-sheet{position:fixed;z-index:51;background:var(--card);overflow:auto;overscroll-behavior:contain;visibility:hidden;left:0;right:0;bottom:0;max-height:88dvh;
  border-radius:20px 20px 0 0;padding:0 18px calc(20px + env(safe-area-inset-bottom));transform:translateY(100%);
  transition:transform 260ms var(--ease-drawer),visibility 0s 260ms;box-shadow:0 -20px 60px -20px rgba(13,27,42,.35)}
.tsp .ts-sheet.open{visibility:visible;transform:translateY(0);transition:transform 300ms var(--ease-drawer),visibility 0s}
.tsp .ts-sheet.dragging{transition:none}
.tsp .ts-sheet .ts-grab{position:sticky;top:0;z-index:2;background:var(--card);padding:8px 0 2px;display:flex;justify-content:center;touch-action:none;cursor:grab}
.tsp .ts-sheet .ts-grab i{width:38px;height:5px;border-radius:3px;background:#cdd6dd}
.tsp .ts-shhead{display:flex;align-items:center;justify-content:flex-end;padding:4px 0 0}
.tsp .ts-x{width:36px;height:36px;border-radius:50%;border:0;background:var(--tint);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out)}
.tsp .ts-x:active{transform:scale(.94)}
.tsp .ts-x:focus-visible{outline:2px solid var(--on-edge);outline-offset:2px}
.tsp .ts-x svg{width:16px;height:16px;stroke:var(--ink-deep);fill:none;stroke-width:1.8;stroke-linecap:round}

/* ---------- the CX-3 page: the device beside three tabs ---------- */
.tsp .ts-cxgrid{display:grid;grid-template-columns:400px minmax(0,1fr);gap:28px;align-items:start}
.tsp .ts-device{position:relative;background:var(--night);border-radius:26px;padding:14px;width:100%;max-width:400px;
  box-shadow:0 2px 4px rgba(13,27,42,.1),0 24px 50px -20px rgba(13,27,42,.45)}
.tsp .ts-device .embed{background:transparent}
.tsp .ts-device .bezel-top{display:flex;justify-content:center;padding:6px 0 12px}
.tsp .ts-device .bezel-top img{height:20px;width:auto;opacity:.92}
.tsp .ts-device .embed-frame{position:relative;border-radius:16px;overflow:hidden;height:670px;background:#1d2125}
.tsp .ts-device .embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tsp .ts-device .embed-frame .waiting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;font-size:13.5px;color:#9db6cc}
.tsp .ts-device .embed-frame .waiting a{color:var(--amber)}
.tsp .ts-device .bezel-foot{margin:10px 0 2px;text-align:center;font-size:11.5px;letter-spacing:.06em;color:#9db6cc}
/* the live cue over the frame, until the device is touched */
.tsp .ts-device .cue-ring{position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:2;
  box-shadow:0 0 0 2px var(--warm),0 0 28px rgba(241,155,71,.55);opacity:0;animation:tsring 1.8s ease-in-out 3}
.tsp .ts-device .cue-tap{position:absolute;left:10.4%;top:35.5%;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;background:var(--warm);pointer-events:none;z-index:2;opacity:0;animation:tstap 1.8s ease-out 3}
@keyframes tsring{0%,100%{opacity:0}45%{opacity:1}}
@keyframes tstap{0%{opacity:0;transform:scale(.4)}15%{opacity:.85;transform:scale(.6)}60%{opacity:0;transform:scale(2)}100%{opacity:0;transform:scale(2)}}

.tsp .ts-tabs{position:relative;display:flex;gap:2px;padding:4px;border-radius:12px;background:#e1e6ea;margin-bottom:16px}
.tsp .ts-tabs .ts-ind{position:absolute;top:4px;left:0;height:36px;border-radius:9px;background:var(--card);box-shadow:0 1px 2px rgba(13,27,42,.1)}
.tsp .ts-tabs[data-ready] .ts-ind{transition:transform 220ms var(--ease-out)}
.tsp .ts-tabs button{position:relative;flex:1;height:36px;border:0;background:none;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--soft);cursor:pointer;white-space:nowrap;
  transition:color 150ms ease}
.tsp .ts-tabs button[aria-selected=true]{color:var(--ink)}
.tsp .ts-tabs button:focus-visible{outline:2px solid var(--on-edge);outline-offset:1px}
.tsp .ts-tp{padding:20px 22px 22px}
.tsp .ts-howto{list-style:none;margin:0;padding:0;counter-reset:tsh}
.tsp .ts-howto li{position:relative;padding:8px 0 8px 34px;font-size:14.5px;line-height:1.6;counter-increment:tsh}
.tsp .ts-howto li::before{content:counter(tsh);position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;background:var(--night);color:var(--amber);
  display:grid;place-items:center;font-size:11.5px;font-weight:600}
.tsp .ts-unitnote{margin:10px 0 0;padding:11px 14px;border-radius:11px;background:#fff7ec;border:1px solid #f5dcb9;font-size:13.5px;line-height:1.55;color:#5b4320}
.tsp .ts-slips{list-style:none;margin:0;padding:0}
.tsp .ts-slips li{padding:11px 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.55}
.tsp .ts-slips li:last-child{border-bottom:0}
.tsp .ts-slips b{display:block;font-size:13px;font-weight:600;color:var(--on-edge);margin-bottom:2px}

/* the worked example */
.tsp .ts-ex .ts-fn{margin:0;font-size:13px;font-weight:600;color:var(--on-edge)}
.tsp .ts-ex .ts-q{margin:6px 0 14px;font-size:15.5px;font-weight:500;line-height:1.5;color:var(--ink);letter-spacing:-.005em}
.tsp .ts-steps{list-style:none;margin:0;padding:0;counter-reset:tsst}
.tsp .ts-steps li{position:relative;padding:7px 0 7px 34px;font-size:14.5px;line-height:1.55;counter-increment:tsst}
.tsp .ts-steps li::before{content:counter(tsst);position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:var(--tint);border:1px solid var(--line);
  display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--soft)}
.tsp .ts-steps li.read::before{background:var(--night);border-color:var(--night);color:var(--amber)}
.tsp .ts-steps li.read{font-weight:500}
.tsp .ts-opts{display:grid;gap:8px;margin-top:12px}
.tsp .ts-op{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 12px;text-align:left;border-radius:11px;border:1px solid var(--line);background:var(--card);
  cursor:pointer;font-size:14.5px;font-variant-numeric:tabular-nums;transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease}
.tsp .ts-op .k{width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;background:var(--tint);font-size:12px;font-weight:600;color:var(--soft);
  transition:background-color 150ms ease,color 150ms ease}
.tsp .ts-op:active{transform:scale(.985)}
.tsp .ts-op:focus-visible{outline:2px solid var(--on-edge);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.tsp .ts-opts:not([data-done]) .ts-op:hover{background:#f6f9fb;border-color:#c3d2dc}}
.tsp .ts-op.right{background:var(--good-fill);border-color:#9fd3bd}
.tsp .ts-op.right .k{background:var(--good);color:#fff}
.tsp .ts-op.wrong{background:var(--bad-fill);border-color:#efbfb1}
.tsp .ts-op.wrong .k{background:var(--bad);color:#fff}
.tsp .ts-opts[data-done] .ts-op{cursor:default}
.tsp .ts-opts[data-done] .ts-op:not(.right):not(.wrong){opacity:.6}
.tsp .ts-verdict{margin:12px 0 0;font-size:14px;font-weight:600}
.tsp .ts-verdict.ok{color:var(--good)}
.tsp .ts-verdict.no{color:var(--bad)}
.tsp .ts-work{margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--tint)}
.tsp .ts-work .scr{margin:0 0 8px;font-size:13.5px;color:var(--soft)}
.tsp .ts-work .scr b{color:var(--ink);font-variant-numeric:tabular-nums}
.tsp .ts-work .l{margin:0;padding:3px 0;font-size:14.5px;line-height:1.5}
.tsp .ts-work em{font-style:normal;font-weight:600;color:#9a5a12;background:#fff1de;padding:0 3px;border-radius:4px}
.tsp .ts-lineup{opacity:0;transform:translateY(6px)}
.tsp .ts-lineup.in{opacity:1;transform:none;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.tsp .ts-exnav{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.tsp .ts-exnav .pos{font-size:13px;color:var(--soft)}
.tsp .ts-swap{animation:tsswap 180ms var(--ease-out)}
@keyframes tsswap{from{opacity:0;filter:blur(3px)}}

/* ---------- phone ---------- */
@media (max-width:920px){
  .tsp .ts-wrap{padding:20px 16px 40px}
  .v16-root .tsp .ts-wrap{padding:0}
  .tsp .ts-hd{margin-bottom:16px}
  .tsp .ts-hd h1{font-size:25px}
  .tsp .ts-hd .ts-sub{font-size:14px;margin-top:4px}
  .tsp .ts-closing{font-size:13.5px}
  .tsp .ts-split{grid-template-columns:minmax(0,1fr)}
  .tsp .ts-detail{display:none}
  .tsp .ts-row .ts-chev{display:block}
  .tsp .ts-row[aria-pressed=true]{background:none;border-color:transparent;box-shadow:none}
  .tsp .ts-sheet .ts-det{padding:6px 0 4px}
  .tsp .ts-sheet .ts-det h2{font-size:20px}
  .tsp .ts-cxgrid{grid-template-columns:minmax(0,1fr);gap:18px}
  .tsp .ts-device{max-width:358px;margin:0 auto}
  .tsp .ts-device .embed-frame{height:594px}
  .tsp .ts-tp{padding:18px 16px 20px}
  .tsp .ts-tabs button{font-size:13px}
}
@media (min-width:921px){
  .tsp .ts-sheet{left:auto;right:24px;bottom:24px;width:420px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  .tsp .ts-rv{animation-name:tsrvfade}
  @keyframes tsrvfade{from{opacity:0}}
  .tsp .ts-btn:active,.tsp .ts-op:active,.tsp .ts-row:active,.tsp .ts-tlink:active,.tsp .ts-metar button:active,.tsp .ts-x:active{transform:none}
  .tsp .ts-lineup{transform:none}
  .tsp .ts-lineup.in{transition:opacity 150ms ease}
  .tsp .ts-tabs[data-ready] .ts-ind{transition:none}
  .tsp .ts-swap{animation-name:tsrvfade;animation-duration:150ms}
  .tsp .ts-sheet,.tsp .ts-sheet.open{transition:opacity 160ms ease,visibility 0s;transform:none;opacity:0}
  .tsp .ts-sheet.open{opacity:1}
  .tsp .ts-device .cue-ring{animation:none;opacity:.7}
  .tsp .ts-device .cue-tap{animation:none;opacity:.7;transform:scale(.6)}
}