/* ============================================================
   Project: Calida Lab umbrella landing (www.calidalab.ai)
   Created: 2026-10-29
   Last Modified: 2026-10-29
   Author: Kennt Kim · Calida Lab
   ------------------------------------------------------------
   The SpectaShell pages' own stylesheet (/spectashell/, /ko/spectashell/ and their security
   pages), standing alone from /styles.css: Kennt's design of 2026-10-29 ("SpectaShell — EN"),
   with Geist Mono for labels, Bricolage Grotesque for headings, Inter (Pretendard for Korean)
   for text, and SpectaShell's amber (#ffb84d, the icon's) as its accent — green until 2026-11-01.
   ============================================================ */
:root{--bg:#0b0c0e;--s1:#111316;--s2:#17191d;--line:#23262b;--line2:#343840;--tx:#e9eaed;--tx2:#a8acb4;--mu:#8a8e98;--ac:#ffb84d;--am:#f5b301;--rd:#f87171}
*{box-sizing:border-box}
body{margin:0;background:#0b0c0e;color:#e9eaed;font-family:'Inter','Pretendard Variable',Pretendard,system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:#ffb84d;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:2px solid #ffb84d;outline-offset:3px;border-radius:4px}
code{font-family:'Geist Mono',ui-monospace,Menlo,monospace;font-size:.88em;background:#17191d;border:1px solid #23262b;border-radius:5px;padding:1px 6px;color:#e9eaed}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.mono{font-family:'Geist Mono',ui-monospace,Menlo,monospace}
.eyebrow{font:500 12px/1.2 'Geist Mono',ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#ffb84d}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:8px 0;border-bottom:1px solid #23262b}
.bar-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:16px;color:#e9eaed}
.brand i{width:12px;height:12px;border-radius:50%;border:3px solid #e9eaed;flex:none}
.brand:hover{text-decoration:none;color:#fff}
.lang{display:inline-flex;border:1px solid #343840;border-radius:8px;overflow:hidden;font:500 12px 'Geist Mono',ui-monospace,monospace}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;color:#a8acb4}
.lang a.on{background:#17191d;color:#e9eaed}
.lang a:hover{text-decoration:none;color:#fff}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid #343840;border-radius:999px;padding:7px 14px;font:500 12px/1 'Geist Mono',ui-monospace,monospace;color:#e9eaed;letter-spacing:.02em}
.chip::before{content:'';width:7px;height:7px;border-radius:50%;background:#ffb84d}
.crumb{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font:400 13px 'Geist Mono',ui-monospace,monospace;color:#8a8e98;padding-top:20px}
.crumb a{display:inline-flex;align-items:center;min-height:32px;color:#a8acb4}
.hero{padding:28px 0 44px}
.hero-id{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.hero-id img{width:64px;height:64px;border-radius:15px;flex:none}
h1{margin:0;font-weight:600;font-size:clamp(46px,8vw,80px);line-height:1;letter-spacing:-.045em}
.tag{margin:22px 0 0;font-weight:500;font-size:clamp(22px,3.2vw,34px);line-height:1.18;letter-spacing:-.025em;max-width:22em}
.tag em{font-style:normal;color:#ffb84d}
.lede{margin:20px 0 0;font-size:18px;line-height:1.65;color:#a8acb4;max-width:40em}
.hero-act{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.shot{width:100%;height:auto;border:1px solid #343840;border-radius:12px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.cap{margin:14px 0 0;font-size:14px;line-height:1.6;color:#a8acb4;max-width:60em}
.cap b{color:#e9eaed;font-weight:600}
/* Three pillars are three columns or one: an auto-fit grid of two left an empty cell. */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#23262b;border:1px solid #23262b;border-radius:14px;overflow:hidden;margin-top:64px}
.pillar{background:#111316;padding:28px 28px 32px}
.pillar .idx{font:500 12px 'Geist Mono',ui-monospace,monospace;color:#8a8e98}
.pillar h3{margin:14px 0 10px;font-size:21px;font-weight:600;letter-spacing:-.015em}
.pillar p{margin:0;font-size:15.5px;line-height:1.65;color:#a8acb4}
.pos{margin:88px 0 24px;font-weight:600;font-size:clamp(22px,3vw,32px);line-height:1.22;letter-spacing:-.025em}
.pos span{color:#8a8e98}
/* The table scrolls inside its box, and so do its screen-reader words (.sr, absolute): without a
   positioned box they were placed against the page and widened it on a phone (745 of 390 pixels). */
.tw{position:relative;overflow-x:auto;border:1px solid #23262b;border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:780px}
th{padding:16px;text-align:left;font:500 12px 'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#a8acb4;background:#111316;white-space:nowrap}
td{padding:18px 16px;border-top:1px solid #23262b;font-size:15.5px;color:#e9eaed}
th.us,td.us{background:#17191d}
th.us{color:#ffb84d}
td.c,th.c{text-align:center}
.yes{color:#ffb84d;font-size:15px}
.no{color:#8a8e98}
.part{font:400 13px 'Geist Mono',ui-monospace,monospace;color:#a8acb4}
.na{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:28px 56px;align-items:center;border:1px solid #343840;border-radius:16px;background:#111316;padding:clamp(24px,4vw,52px);margin-top:88px}
.na-big{font-weight:600;font-size:clamp(36px,5.2vw,56px);line-height:1.03;letter-spacing:-.035em}
.na-big span{color:#ffb84d}
.na h3{margin:0 0 12px;font-size:21px;font-weight:600;letter-spacing:-.015em}
.na p{margin:0;font-size:16px;line-height:1.7;color:#a8acb4}
.sec{padding:80px 0;border-top:1px solid #23262b;margin-top:88px}
.sec.first{margin-top:88px}
/* A section right after another already has the border and padding between them. */
.sec+.sec{margin-top:0}
.split{display:flex;flex-wrap:wrap;gap:36px 72px}
.split>.l{flex:5 1 380px;min-width:0}
.split>.r{flex:6 1 420px;min-width:0}
h2{margin:16px 0 20px;font-weight:600;font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.03em}
.prose p{margin:0 0 14px;font-size:16.5px;line-height:1.72;color:#a8acb4;max-width:60ch}
.prose p:last-child{margin-bottom:0}
.prose a{font-weight:500}
ul.pts{list-style:none;margin:0;padding:0}
ul.pts li{padding:18px 0;border-top:1px solid #23262b;font-size:15.5px;line-height:1.65;color:#a8acb4}
ul.pts li:first-child{border-top:0;padding-top:4px}
ul.pts li strong{display:block;margin-bottom:2px;color:#e9eaed;font-weight:600;font-size:16px}
.mk{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 6px 0 3px;vertical-align:1px}
.mk.am{background:#f5b301}
.mk.rd{background:#f87171}
.fig{margin:44px 0 0}
.dev{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:center;margin-top:44px}
.dev .ipad{width:min(100%,460px);border:1px solid #343840;border-radius:18px}
.dev .iphone{width:min(100%,284px);border:1px solid #343840;border-radius:28px}
.plat{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:32px}
.plat span{border:1px solid #343840;border-radius:999px;padding:7px 14px;font:500 12px 'Geist Mono',ui-monospace,monospace;color:#a8acb4}
/* Feature cards read across, 7.1 then 7.2: a column layout read down each column and mixed the
   numbers. Every picture has the same frame, cut from its top left, so the rows line up. */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:64px 40px;margin-top:44px}
.fc{display:flex;flex-direction:column;gap:22px;min-width:0}
.fc .shot{border-radius:10px;box-shadow:none;aspect-ratio:16/10;object-fit:cover;object-position:left top}
.fc .idx{font:500 12px 'Geist Mono',ui-monospace,monospace;color:#ffb84d;letter-spacing:.06em}
.fc h3{margin:8px 0 10px;font-size:23px;font-weight:600;letter-spacing:-.02em}
.fc p{margin:0 0 12px;font-size:15.5px;line-height:1.7;color:#a8acb4}
.better{margin:16px 0 0;font:500 13.5px/1.6 'Geist Mono',ui-monospace,monospace;color:#e9eaed}
.better::before{content:'→ ';color:#ffb84d}
.faq details{border-top:1px solid #23262b}
.faq details:last-child{border-bottom:1px solid #23262b}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:20px 0;font-size:18px;font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font:400 22px 'Geist Mono',ui-monospace,monospace;color:#ffb84d;flex:none}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:0 0 24px;font-size:16px;line-height:1.7;color:#a8acb4;max-width:62ch}
.foot{display:flex;flex-wrap:wrap;gap:32px 72px;padding:56px 0 72px;border-top:1px solid #23262b}
.foot .lbl{font:500 12px 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#8a8e98;margin-bottom:8px}
.foot .val{font-size:16px;color:#e9eaed}
.foot .copy{margin-left:auto;align-self:flex-end;font:400 13px 'Geist Mono',ui-monospace,monospace;color:#8a8e98}
h1,h2,h3,.tag,.na-big,.pos,.brand{font-family:'Bricolage Grotesque','Pretendard Variable','Inter',system-ui,sans-serif}
h1{font-weight:800;letter-spacing:-.04em}
h2,.tag,.na-big,.pos{font-weight:700}
h3,.fc h3,.pillar h3,.na h3{font-weight:700}

/* Korean: wrap at word boundaries. */
:lang(ko) body, body:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
/* Security page: the path from a device to the keeper, and paired boxes. */
.flow{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-top:36px}
.box{border:1px solid #23262b;border-radius:14px;background:#111316;padding:24px 26px}
.box h3{margin:0 0 12px;font-size:18px;font-weight:700;letter-spacing:-.01em}
.box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;color:#a8acb4}
.box p{margin:0;font-size:15.5px;line-height:1.7;color:#a8acb4}
.box.kp{border-color:rgba(255,184,77,.5);background:#0f1714}
.arr{align-self:center;text-align:center;font:500 12px 'Geist Mono',ui-monospace,monospace;color:#8a8e98}
.arr b{display:block;font-size:24px;color:#ffb84d;font-weight:400}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:16px;margin-top:36px}
@media (max-width:720px){.flow{grid-template-columns:1fr}.arr b{transform:rotate(90deg)}}
@media (max-width:820px){.pillars{grid-template-columns:1fr}}
/* Hero: what it does, in the two tools developers know. */
.like{margin:18px 0 0;font:500 15px/1.6 'Geist Mono',ui-monospace,monospace;color:#e9eaed;max-width:48em}
.like span{color:#ffb84d}
/* A three-step flow: device, keeper, shell. */
.flow.f3{grid-template-columns:1fr auto 1fr auto 1fr}
@media (max-width:900px){.flow.f3{grid-template-columns:1fr}.flow.f3 .arr b{transform:rotate(90deg)}}
/* The product's pages, in the bar: Overview and Security. */
.pages{display:inline-flex;gap:4px 18px;font:500 13px 'Geist Mono',ui-monospace,monospace}
.pages a{display:inline-flex;align-items:center;min-height:44px;color:#a8acb4}
.pages a.on{color:#e9eaed}
.pages a:hover{text-decoration:none;color:#fff}
.hero-act .more{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
/* On a phone the bar keeps the pages and languages; the hero says it is coming soon. */
@media (max-width:560px){.bar-r>.chip{display:none}}
/* A line of a file shown as it is (the listing key's authorized_keys line): wrapped inside its box, whole. */
.kline{margin:12px 0 0;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;background:#111316;border:1px solid #23262b;border-radius:10px;padding:14px 16px;font:400 13px/1.6 'Geist Mono',ui-monospace,monospace;color:#e9eaed}
.kline code{background:none;border:0;padding:0;font-size:inherit}
.fig.kl{margin:28px 0 0}
/* The manual (made by sdTerm's scripts/build-manual.py from Docs/help): contents beside the document. */
.manual{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;align-items:start;padding:28px 0 72px}
.mside{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;font-size:14px}
.mfold{display:none}
.mgroup{margin:0 0 22px}
.mglbl{font:500 11.5px/1.2 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#8a8e98;margin:0 0 8px}
.mside ul,.monpage ul{list-style:none;margin:0;padding:0}
.mside li a{display:block;padding:6px 10px;margin:0 -10px;border-radius:7px;color:#a8acb4;line-height:1.35}
.mside li a:hover{color:#e9eaed;background:#111316;text-decoration:none}
.mside li a.on{color:#e9eaed;background:#17191d}
.mdoc{min-width:0;max-width:760px}
.mdoc h1{font-size:clamp(34px,5vw,48px);line-height:1.05;margin:0 0 10px}
.mdoc .mupd{margin:0 0 28px;font:400 13px/1.4 'Geist Mono',ui-monospace,monospace;color:#8a8e98}
.mdoc h2{font-size:clamp(24px,3vw,30px);margin:48px 0 14px;scroll-margin-top:16px}
.mdoc h3{font-size:19px;margin:32px 0 10px;scroll-margin-top:16px}
.mdoc h4{font-size:16px;margin:24px 0 8px}
.mdoc .hash{margin-left:8px;color:#343840;font-weight:400;opacity:0}
.mdoc h2:hover .hash,.mdoc h3:hover .hash,.mdoc .hash:focus-visible{opacity:1}
.mdoc p,.mdoc li{font-size:16px;line-height:1.72;color:#c9ccd2}
.mdoc p{margin:0 0 14px}
.mdoc strong{color:#e9eaed;font-weight:600}
.mdoc ul,.mdoc ol{margin:0 0 16px;padding-left:22px}
.mdoc li{margin:0 0 6px}
.mdoc li>ul,.mdoc li>ol{margin:6px 0 0}
.mdoc li>p{margin:0 0 6px}
.mdoc blockquote{margin:0 0 16px;padding:12px 16px;border-left:3px solid #ffb84d;background:#111316;border-radius:0 10px 10px 0}
.mdoc blockquote p:last-child{margin:0}
.mdoc .tw{margin:4px 0 20px}
.mdoc table{min-width:0}
.mdoc th{white-space:normal;padding:12px 14px}
.mdoc td{padding:12px 14px;font-size:15px;line-height:1.6;color:#c9ccd2;vertical-align:top}
.mdoc pre.code{margin:0 0 18px;padding:14px 16px;background:#111316;border:1px solid #23262b;border-radius:10px;overflow-x:auto;font:400 13.5px/1.6 'Geist Mono',ui-monospace,monospace;color:#e9eaed}
.mdoc pre.code code{background:none;border:0;padding:0;font-size:inherit}
.monpage{margin:0 0 32px;padding:14px 18px;border:1px solid #23262b;border-radius:12px;background:#111316}
.mdoc .monpage ul{padding:0;margin:0;columns:2;column-gap:28px}
.mdoc .monpage li{margin:0;break-inside:avoid}
.monpage li a{display:inline-block;padding:3px 0;font-size:14.5px;color:#a8acb4}
@media (max-width:560px){.mdoc .monpage ul{columns:1}}
.msteps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid #23262b}
.msteps a{display:block;padding:14px 16px;border:1px solid #23262b;border-radius:12px;color:#e9eaed;font-weight:500}
.msteps a span{display:block;font:500 11.5px 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#8a8e98;margin-bottom:4px}
.msteps a.next{text-align:right}
.msteps a:hover{border-color:#343840;text-decoration:none}
.mhero{padding-bottom:20px}
.mhero h1{margin-top:14px;font-size:clamp(44px,7vw,72px)}
.mcards{padding:8px 0 72px}
.mcgroup{margin:0 0 40px}
.mcgroup h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 16px}
.mcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px}
.mcard{display:block;padding:20px 22px;border:1px solid #23262b;border-radius:14px;background:#111316;color:#e9eaed}
.mcard:hover{border-color:#343840;text-decoration:none}
.mcard h3{margin:0 0 8px;font-size:18px}
.mcard p{margin:0;font-size:14.5px;line-height:1.6;color:#a8acb4}
@media (max-width:860px){
.manual{grid-template-columns:1fr;gap:20px}
.mside{display:none}
.mfold{display:block;border:1px solid #23262b;border-radius:12px;padding:0 16px;background:#111316;font-size:14px}
.mfold>summary{cursor:pointer;padding:12px 0;font:500 13px 'Geist Mono',ui-monospace,monospace;color:#e9eaed}
.mfold[open]>summary{border-bottom:1px solid #23262b;margin-bottom:14px}
.mfold li a{display:block;padding:6px 0;color:#a8acb4}
.mfold li a.on{color:#e9eaed}
}
.mhero .mver{margin:14px 0 0;font:400 13px/1.5 'Geist Mono',ui-monospace,monospace;color:#8a8e98}

/* ---- The menu and Docs/site's pages (made by scripts/build-manual.py) ---- */
.ss-navr{display:flex;align-items:center;gap:0 20px}
.ss-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.ss-nav a.ss-nl.ss-on{color:#e9eaed;box-shadow:inset 0 -2px 0 #ffb84d}
.ss-menu{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;margin-right:-8px;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer}
.ss-menu span{display:block;width:20px;height:2px;border-radius:1px;background:#e9eaed;transition:transform .2s ease,opacity .2s ease}
.ss-menu:focus-visible{outline:2px solid #ffb84d;outline-offset:2px}
@media (max-width:1080px){
.ss-nav.ss-js{position:relative;flex-wrap:nowrap}
.ss-nav.ss-js .ss-navr{gap:0 12px}
.ss-nav.ss-js .ss-menu{display:inline-flex}
.ss-nav.ss-js .ss-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:4px clamp(16px,4vw,40px) 12px;background:#0b0c0e;border-bottom:1px solid #1b1d21;box-shadow:0 16px 32px rgba(0,0,0,.45)}
.ss-nav.ss-js.ss-open .ss-links{display:flex}
.ss-nav.ss-js .ss-links .ss-nl{display:flex;align-items:center;min-height:48px;font-size:16px;border-bottom:1px solid #16181c}
.ss-nav.ss-js .ss-links .ss-nl:last-child{border-bottom:0}
.ss-nav.ss-js.ss-open .ss-menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ss-nav.ss-js.ss-open .ss-menu span:nth-child(2){opacity:0}
.ss-nav.ss-js.ss-open .ss-menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){.ss-menu span{transition:none}}
.mdoc.mpage{margin:clamp(40px,6vw,72px) auto clamp(56px,7vw,88px)}
/* ---- end of the menu and Docs/site's pages ---- */

/* ---- Pages of 2026-10-31 (design handoff) ---- */
/* Shared by the Overview, Sessions, Agents, Notifications, SSH Client and Compare pages; scoped to .ss-root, so the manual and Security pages are untouched. */
body.ss-page{margin:0;background:#0b0c0e}
.ss-root a{color:#ffb84d;text-decoration:none}
.ss-root a:hover{color:#ffcb7a}
.ss-xeyes .ss-pupil{transition:transform .12s ease-out}
@keyframes ss-xblink{50%{opacity:0}}
.ss-xeyes.ss-idle .ss-cursor rect{animation:ss-xblink 1.06s step-end infinite}
.ss-root{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:#e9eaed;-webkit-font-smoothing:antialiased}
.ss-root *{box-sizing:border-box}
.ss-root h1,.ss-root h2,.ss-root h3{font-family:'Bricolage Grotesque','Inter',system-ui,sans-serif;text-wrap:balance}
.ss-root p{text-wrap:pretty}
.ss-nav a.ss-nl{color:#a8acb4;min-height:44px;display:inline-flex;align-items:center;font-size:14px}
.ss-nav a.ss-nl:hover{color:#e9eaed}
.ss-btn{transition:transform .2s ease,box-shadow .2s ease}
.ss-btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(255,184,77,.6);color:#1a1410}
@media (prefers-reduced-motion: reduce){.ss-root *,.ss-root *::after{animation:none !important;transition:none !important}}
/* ---- end of the pages of 2026-10-31 ---- */