/* Tessera's page (/araclar/tessera/), in Tessera's own identity rather than the XSecure Labs site's. The values
   follow the app's approved design (the design canvas and src/Tessera.App/Themes/Tokens.xaml): a navy window
   in dark and cool greys in light, one blue accent, four environment colours (prod, test, lab, personal),
   10 px tiles set in grout like the mosaic the app is named after. The page is laid the same way: every
   block is a tile, and the gaps between them are the grout. Text is Segoe UI Variable where Windows has it,
   Geist elsewhere; terminal text is Cascadia Code, else Geist Mono. Light and dark follow the visitor's
   system, as the app does. */
:root{
  color-scheme:light;
  --grout:#D3D9E6; --chrome:#EDF0F6; --panel:#F6F7FB; --raised:#FFFFFF; --line:#D2D8E4; --tile:#FDFDFE; --pane-head:#F1F3F8;
  --block:#F6F7FB;
  --text:#141B2D; --text-2:#475269; --text-3:#5A657D;
  --accent:#3355D6; --accent-ink:#FFFFFF; --sel:rgba(51,85,214,.12); --link:#2A48BD;
  --prod:#C8392F; --test:#A86B00; --lab:#127A5E; --me:#6A4FD0; --ok:#127A5E;
  --t-out:#28324A; --t-dim:#636E86; --t-ok:#0F7A55; --t-warn:#8F5B00; --t-err:#C2352B; --t-prompt:#2C4BC0; --t-head:#141B2D;
  --sans:'Segoe UI Variable Text','Segoe UI Variable','Geist',system-ui,sans-serif;
  --display:'Segoe UI Variable Display','Segoe UI Variable','Geist',system-ui,sans-serif;
  --mono:'Cascadia Code','Cascadia Mono','Geist Mono',ui-monospace,monospace;
  --gap:6px; --r:10px;
  --ease:cubic-bezier(.23,1,.32,1);
}
/* Dark is the default for every visitor (owner, 18 Oct 2026: "varsayılan koyu tema"); the light values above
   stay for a later theme switch, applied only with data-theme="light" on the root. */
:root:not([data-theme="light"]){
    color-scheme:dark;
    --grout:#1A2338; --chrome:#131B2D; --panel:#172036; --raised:#212C47; --line:#2B3858; --tile:#0B111E; --pane-head:#111A2C;
    --block:#131B2D;
    --text:#E8ECF5; --text-2:#A9B3C9; --text-3:#8792AE;
    --accent:#7C9CFF; --accent-ink:#0B111E; --sel:rgba(124,156,255,.16); --link:#7C9CFF;
    --prod:#F07267; --test:#E8B64C; --lab:#4FC3A1; --me:#B49CFF; --ok:#5FD3A8;
    --t-out:#C9D2E6; --t-dim:#7A87A3; --t-ok:#5FD3A8; --t-warn:#F2C062; --t-err:#FF7B70; --t-prompt:#8FB0FF; --t-head:#E8ECF5;
  }
*{box-sizing:border-box}
[hidden]{display:none!important}
/* the sticky bar never covers a focused element or an anchor target */
html{background:var(--grout);-webkit-text-size-adjust:100%;scrollbar-color:var(--line) var(--grout);scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--grout);color:var(--text);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--sel);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* links use the accent's darker step in light so they hold 4.5:1 on the grout as well as on tiles */
a{color:var(--link);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--text)}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
svg{display:block}
h1,h2,h3{margin:0;text-wrap:balance}
p,ul,ol,dl,dd,figure,pre{margin:0}
ul,ol{padding:0;list-style:none}
.skip{position:absolute;left:16px;top:-80px;z-index:50;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* the side margin grows with the screen (16 px on a phone, about 50 px at 1280) and keeps clear of a side system bar */
.t-wrap{--gut-l:max(16px,4vw,env(safe-area-inset-left,0px));--gut-r:max(16px,4vw,env(safe-area-inset-right,0px));width:100%;max-width:calc(1200px + 8vw);margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}

/* The environment colours, used as the app uses them: small square tiles, never as fills for text */
i.prod,i.test,i.lab,i.me{display:inline-block;flex:none;width:9px;height:9px;border-radius:2px}
i.prod{background:var(--prod)} i.test{background:var(--test)} i.lab{background:var(--lab)} i.me{background:var(--me)}

/* Bar: the app's chrome. The mark and the name, then the way back to the tools and the language. */
.t-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--chrome);border-bottom:1px solid var(--line)}
.t-bar .t-wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:16px}
.t-name{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text);font-weight:600;font-size:16px;letter-spacing:.01em;text-decoration:none}
.t-mark{width:22px;height:22px;flex:none}
.t-bar nav{display:flex;align-items:center;gap:4px}
.t-back,.t-lang{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--text-2);text-decoration:none;font-size:14px;font-weight:500}
.t-back svg{width:14px;height:14px}
.t-back:hover,.t-lang:hover{color:var(--text);background:var(--sel)}

/* Hero: the claim, the lede and the download on the grout; the three plain facts as tile-marked rows. */
.t-hero{padding-top:88px}
.t-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:32px 64px;align-items:end}
.t-hero h1{font:600 clamp(40px,5.8vw,78px)/1.02 var(--display);letter-spacing:-.03em;max-width:15ch}
.t-lede{margin-top:28px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--text-2);max-width:58ch}
.t-get{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:36px}
.t-get p{font-size:14px;line-height:1.5;color:var(--text-2);max-width:46ch}
.t-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font:600 16px/1 var(--sans);text-decoration:none;transition:transform 160ms var(--ease),filter 200ms ease}
.t-btn svg{width:17px;height:17px}
.t-btn:hover{color:var(--accent-ink);filter:brightness(1.08)}
.t-btn:active{transform:scale(.97)}
.t-pending{font-size:15px;color:var(--text-2);padding:12px 16px;border-radius:8px;background:var(--block);box-shadow:inset 0 0 0 1px var(--line)}
.t-facts{display:grid;gap:var(--gap);align-self:end}
.t-facts i.mark{flex:none;width:9px;height:9px;border-radius:2px;background:var(--accent)}
.t-facts li{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;border-radius:var(--r);background:var(--block);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:500}

/* The window: the app's own shell drawn small. Chrome bar, rail, server tree, and the mosaic of terminal
   tiles in grout; the focused tile carries the accent ring. */
.t-shot{margin-top:64px}
.t-win{display:flex;flex-direction:column;height:clamp(440px,44vw,600px);border-radius:12px;overflow:hidden;background:var(--grout);box-shadow:0 0 0 1px var(--line),0 32px 80px -36px rgba(6,10,20,.55);font:400 13px/1.4 var(--sans);color:var(--text)}
.t-win svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.w-top{height:46px;flex:none;display:flex;align-items:center;gap:16px;padding:0 14px;background:var(--chrome);border-bottom:1px solid var(--line)}
.w-brand{display:flex;align-items:center;gap:9px;min-width:132px}
.w-brand .t-mark{width:20px;height:20px}
.w-brand b{font-weight:600;font-size:14px}
.w-search{flex:1;display:flex;align-items:center;gap:9px;max-width:440px;height:30px;margin-inline:auto;padding:0 10px;border-radius:8px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-3);min-width:0}
.w-search > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-search kbd{font:12px/1 var(--sans);padding:3px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2)}
.w-vault{display:flex;align-items:center;gap:8px;color:var(--text-2);white-space:nowrap}
.w-vault i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.w-main{flex:1;min-height:0;display:grid;grid-template-columns:52px 236px minmax(0,1fr)}
.w-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;background:var(--chrome);border-right:1px solid var(--line);color:var(--text-2)}
.w-rail span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px}
.w-rail svg{width:19px;height:19px}
.w-rail .on{background:var(--sel);color:var(--accent)}
.w-rail .end{margin-top:auto}
.w-tree{min-width:0;padding:12px 6px;background:var(--panel);border-right:1px solid var(--line);overflow:hidden}
.w-head{display:block;padding:0 10px 10px;font-size:14px;font-weight:600}
.w-tree li{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:7px;white-space:nowrap}
.w-tree li > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.w-tree em{font-style:normal;font-size:12px;color:var(--text-3)}
.w-tree em.ok{color:var(--ok)}
.w-tree .dir{font-weight:500;padding-left:6px}
.w-tree .dir svg{width:13px;height:13px;color:var(--text-3)}
.w-tree .dir.open svg{transform:rotate(90deg)}
.w-tree .host{padding-left:26px}
.w-tree .on{background:var(--sel)}
.w-work{min-width:0;display:flex;flex-direction:column}
.w-tabs{height:40px;flex:none;display:flex;align-items:flex-end;gap:2px;padding:0 8px;background:var(--chrome);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.w-tabs .tab{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:8px 8px 0 0;color:var(--text-2)}
.w-tabs .tab.on{background:var(--grout);color:var(--text)}
.w-tabs .tiles{display:flex;gap:2px}
.w-tabs .tiles i{width:7px;height:7px;border-radius:1.5px}
.w-send{margin-left:auto;align-self:center;display:flex;align-items:center;gap:6px;color:var(--text-2)}
.w-mosaic{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--gap);padding:var(--gap)}
.w-pane{min-height:0;min-width:0;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.w-pane.focus{grid-row:span 2;box-shadow:inset 0 0 0 1.5px var(--accent)}
.w-ph{height:32px;flex:none;display:flex;align-items:center;gap:8px;padding:0 10px 0 12px;background:var(--pane-head);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.w-ph b{font-weight:600}
.w-ph .at{color:var(--text-3);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.w-ph .env{margin-left:auto;font-size:12px;font-weight:500}
.w-ph .env.prod{color:var(--prod)} .w-ph .env.test{color:var(--test)}
.w-term{flex:1;min-height:0;overflow:hidden;padding:10px 14px;font:12px/18px var(--mono);white-space:pre}
.w-term .o{color:var(--t-out)} .w-term .d{color:var(--t-dim)} .w-term .g{color:var(--t-ok)} .w-term .w{color:var(--t-warn)}
.w-term .e{color:var(--t-err)} .w-term .p{color:var(--t-prompt);font-weight:600} .w-term .h{color:var(--t-head);font-weight:600}
.w-term .cur{background:var(--accent)}
.w-status{height:28px;flex:none;display:flex;align-items:center;gap:16px;padding:0 12px;background:var(--chrome);border-top:1px solid var(--line);font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden}
.w-status span:first-child{display:flex;align-items:center;gap:6px}
.w-status span:first-child i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.w-status .grow{flex:1}
.t-shot figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:14px;font-size:13px;color:var(--text-2)}
.t-legend{display:flex;flex-wrap:wrap;gap:6px 18px}
.t-legend span{display:inline-flex;align-items:center;gap:7px}

/* One authored moment: the three terminal tiles set into the grout in turn when the page opens. */
@media (prefers-reduced-motion:no-preference){
  .w-pane{animation:t-set 560ms var(--ease) both}
  .w-pane:nth-child(1){animation-delay:140ms}
  .w-pane:nth-child(2){animation-delay:230ms}
  .w-pane:nth-child(3){animation-delay:320ms}
  @keyframes t-set{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
}

/* The scenes: a mosaic of tiles in grout, each a drawing of the app's own screen with one line above it.
   Twelve columns; a scene spans 5, 6, 7 or 12. */
.t-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:96px}
.sc{grid-column:span 12;display:flex;flex-direction:column;gap:22px;min-width:0;padding:clamp(22px,2.6vw,34px);border-radius:var(--r);background:var(--block);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.sc.s5{grid-column:span 5} .sc.s6{grid-column:span 6} .sc.s7{grid-column:span 7}
.sc-text h2{font:600 clamp(22px,2.1vw,28px)/1.15 var(--display);letter-spacing:-.02em}
.sc-text p{margin-top:8px;font-size:16px;line-height:1.5;color:var(--text-2);max-width:52ch}
.sc-draw{flex:1;min-height:240px;display:flex;align-items:flex-end;justify-content:center;border-radius:8px;background:var(--grout);padding:18px 18px 0;font:400 13px/1.4 var(--sans);color:var(--text);overflow:hidden}
.sc-draw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sc-draw.d-center{flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px}
.sc-draw.d-stage{position:relative;align-items:center;padding:24px}
.sc-draw.d-scrim{background:linear-gradient(var(--sel),var(--sel)),var(--grout)}
/* Feature rows (the main features, after the owner's reference): a line of text beside a large drawing,
   the sides swapping row by row. */
.t-intro{grid-column:span 12;margin:0 0 18px;font:600 clamp(28px,3.4vw,44px)/1.1 var(--display);letter-spacing:-.025em}
.sc.fr{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(24px,3.4vw,48px)}
.sc.fr.rev{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.sc.fr.rev .fr-text{order:2}
.fr-text h2{font:600 clamp(26px,3vw,38px)/1.1 var(--display);letter-spacing:-.025em}
.fr-text p{margin-top:14px;font-size:clamp(16px,1.35vw,18px);line-height:1.55;color:var(--text-2);max-width:40ch}
.fr .sc-draw{min-height:380px}
/* connect: the tree beside the selected server's card */
.d-connect{align-items:center;gap:18px;padding:24px}
.d-connect .d-tree{max-width:300px;border-radius:10px;align-self:stretch}
.d-card{display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px;padding:16px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line),0 18px 40px -20px rgba(0,0,0,.5)}
.d-card-head{display:flex;align-items:center;gap:8px}
.d-card-head b{flex:1;font-size:15px;font-weight:600}
.d-card-head em,.d-card .env{font-style:normal;font-size:12px;font-weight:500}
.d-card .env.prod{color:var(--prod)}
.d-card dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13px}
.d-card dt{color:var(--text-3)}
.d-card dd{min-width:0;overflow-wrap:anywhere}
.d-card-actions{display:flex;gap:6px}
.d-card-actions .d-primary{flex:1}
.d-icon{width:36px;padding:0}
/* command bar */
.d-palette{position:relative;display:flex;flex-direction:column;gap:2px;width:100%;max-width:460px;padding:8px;border-radius:12px;background:var(--raised);box-shadow:0 0 0 1px var(--line),0 24px 60px -24px rgba(0,0,0,.55)}
.d-pal-input{display:flex;align-items:center;gap:10px;height:44px;margin-bottom:6px;padding:0 12px;border-radius:8px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--accent);font-size:15px}
.d-pal-input .q{flex:1;display:flex;align-items:center}
.d-pal-input .q i{display:inline-block;width:2px;height:18px;margin-left:2px;background:var(--accent)}
.d-pal-input kbd,.d-pal-row kbd{font:12px/1 var(--sans);padding:3px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2)}
.d-pal-group{padding:8px 10px 4px;font-size:11.5px;font-weight:600;color:var(--text-3)}
.d-pal-row{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:7px}
.d-pal-row > span{flex:1}
.d-pal-row b{font-weight:700;color:var(--accent)}
.d-pal-row em{font-style:normal;font:12px var(--mono);color:var(--text-3)}
.d-pal-row.on{background:var(--sel)}
.d-pal-row.cmd svg{color:var(--text-3)}
/* restore: the tabs come back, the setting that keeps them */
.d-restore{width:100%;max-width:460px;border-radius:10px;overflow:hidden;background:var(--grout);box-shadow:0 0 0 1px var(--line),0 18px 40px -20px rgba(0,0,0,.5)}
.d-rtabs{display:flex;align-items:flex-end;gap:2px;height:40px;padding:0 8px;background:var(--chrome);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.d-rtabs .tab{display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:8px 8px 0 0;color:var(--text-2)}
.d-rtabs .tab.on{background:var(--grout);color:var(--text)}
.d-rtabs .tiles{display:flex;gap:2px}
.d-rtabs .tiles i{width:7px;height:7px;border-radius:1.5px}
.d-rpanes{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:64px 64px;gap:5px;padding:5px}
.d-rpanes i{border-radius:8px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.d-rpanes i.focus{grid-row:span 2;box-shadow:inset 0 0 0 1.5px var(--accent)}
.d-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:460px;padding:14px 16px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line)}
.d-toggle{display:flex;align-items:center;gap:10px;color:var(--text-2);white-space:nowrap}
.d-toggle i{position:relative;width:40px;height:20px;border-radius:10px;background:var(--accent)}
.d-toggle i::after{content:"";position:absolute;right:4px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--accent-ink)}
/* jump host chain */
.d-chain{display:flex;align-items:center;width:100%;max-width:520px}
.d-node{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 12px;border-radius:10px;background:var(--raised);box-shadow:0 0 0 1px var(--line);min-width:0;text-align:center}
.d-node .t-mark{width:26px;height:26px}
.d-node i{width:12px;height:12px;border-radius:3px}
.d-node b{font-weight:600;font-size:13px;white-space:nowrap}
.d-node em{font-style:normal;font:11.5px var(--mono);color:var(--text-3)}
.d-node.target{box-shadow:inset 0 0 0 1.5px var(--accent)}
.d-link-line{flex:1;min-width:14px;height:2px;background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 11px)}
.d-via{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
/* tree */
.d-tree{width:100%;max-width:360px;padding:12px 8px 10px;border-radius:10px 10px 0 0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.d-filter{display:flex;align-items:center;gap:8px;height:32px;margin:0 4px 8px;padding:0 10px;border-radius:8px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);color:var(--text-3)}
.d-tree li{display:flex;align-items:center;gap:9px;height:30px;padding:0 10px;border-radius:7px;white-space:nowrap}
.d-tree li > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.d-tree .dir{font-weight:500}
.d-tree .dir svg{width:13px;height:13px;transform:rotate(90deg);color:var(--text-3)}
.d-tree .dir em{font-style:normal;font-size:12px;color:var(--text-3)}
.d-tree .host{padding-left:30px}
.d-tree .host i{width:10px;height:10px;border-radius:2.5px}
.d-tree .on{background:var(--sel)}
.d-tree em.env{font-style:normal;font-size:12px;font-weight:500}
.d-tree em.prod{color:var(--prod)} .d-tree em.test{color:var(--test)} .d-tree em.lab{color:var(--lab)} .d-tree em.me{color:var(--me)}
/* mosaic */
.d-layouts{display:flex;justify-content:center;gap:18px;width:100%}
.d-lay-box{display:flex;flex-direction:column;align-items:center;gap:10px}
.d-lay-box .n{font-size:14px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.lay{display:grid;gap:4px;width:clamp(76px,9vw,112px);aspect-ratio:4/3;padding:4px;border-radius:9px;background:var(--chrome);box-shadow:inset 0 0 0 1px var(--line)}
.lay i{border-radius:5px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.lay i:first-child{box-shadow:inset 0 0 0 1.5px var(--accent)}
.lay.l2{grid-template-columns:1fr 1fr}
.lay.l3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.lay.l3 i:first-child{grid-row:span 2}
.lay.l4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.d-send{display:flex;flex-direction:column;align-items:center;gap:8px}
.d-send-btn{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:8px;background:var(--sel);color:var(--accent);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
.d-tip{position:relative;padding:7px 11px;border-radius:7px;background:var(--raised);box-shadow:0 0 0 1px var(--line),0 8px 20px -10px rgba(0,0,0,.4);font-size:12.5px;color:var(--text-2)}
/* dialogs, drawn as the app draws them: raised card, accent primary, quiet secondary */
.d-dlg{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px;padding:22px;border-radius:14px;background:var(--raised);box-shadow:0 0 0 1px var(--line),0 24px 60px -24px rgba(0,0,0,.5)}
.d-title{font-size:16px;font-weight:600}
.d-body{color:var(--text-2);font-size:13px}
.d-head{display:flex;align-items:center;gap:10px}
.d-head svg{width:20px;height:20px}
.d-primary,.d-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;font-weight:600;white-space:nowrap}
.d-primary{background:var(--accent);color:var(--accent-ink)}
.d-primary svg{width:18px;height:18px}
.d-secondary{box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
.d-secondary svg{width:15px;height:15px}
.d-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.d-code{display:block;padding:10px 12px;border-radius:8px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font:12px/1.6 var(--mono);color:var(--t-out);overflow-wrap:anywhere}
.sc-vault .sc-draw{min-height:440px}
.d-wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,minmax(0,1fr));grid-auto-rows:44px;gap:5px;padding:5px;opacity:.9}
.d-wall i{border-radius:7px;background:var(--tile);opacity:.55}
.d-wall i.a{background:var(--accent);opacity:.3} .d-wall i.p{background:var(--prod);opacity:.3} .d-wall i.t{background:var(--test);opacity:.3} .d-wall i.l{background:var(--lab);opacity:.3}
.d-unlock{align-items:stretch;text-align:center;max-width:360px}
.d-unlock .t-mark{width:36px;height:36px;margin:0 auto 2px}
.d-or{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-3)}
.d-or i{flex:1;height:1px;background:var(--line)}
.d-label{text-align:left;font-size:12px;font-weight:500;color:var(--text-2)}
.d-row{display:flex;gap:8px}
.d-field{flex:1;min-width:0;height:36px;display:flex;align-items:center;padding:0 12px;border-radius:8px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);letter-spacing:.1em;color:var(--text-2)}
.d-link{font-size:12.5px;color:var(--link);text-align:left}
.d-note{padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--text-3)}
.d-paste{border-top:3px solid var(--prod)}
.d-paste .d-head svg{color:var(--t-warn)}
.d-paste .d-body{display:flex;align-items:flex-start;gap:8px}
.d-paste .d-body i{margin-top:4px}
.d-hostkey .d-head svg{color:var(--accent)}
/* files */
.d-files{width:100%;max-width:520px;display:flex;flex-direction:column;gap:8px;padding:14px 14px 18px;border-radius:10px 10px 0 0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.d-fhead{display:flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.d-fhead b{font-weight:600}
.d-path{flex:1;min-width:0;display:flex;align-items:center;gap:7px;font:12px var(--mono);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-fhead .d-secondary{height:30px;padding:0 10px;font-size:12.5px}
.d-flist li{display:flex;align-items:center;gap:10px;height:28px;padding:0 6px;border-radius:6px;color:var(--text)}
.d-flist li svg{color:var(--text-3)}
.d-flist li span{flex:1}
.d-flist em{font-style:normal;font-size:12px;color:var(--text-3)}
.d-tr-head{margin-top:6px;font-size:12px;font-weight:600;color:var(--text-2)}
.d-tr{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;align-items:center;gap:12px;padding:8px 10px;border-radius:8px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}
.d-tr-name{font:12px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d-tr em{font-style:normal;font-size:12px;color:var(--text-2);white-space:nowrap}
.d-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.d-bar i{display:block;width:64%;height:100%;border-radius:3px;background:var(--accent)}
.d-ok{display:flex;justify-content:center;color:var(--ok)}
/* privacy */
.sc-privacy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:20px 48px}
.sc-privacy .sc-text{grid-row:span 2}
.sc-privacy .d-pathline{justify-self:start}
.d-nos{display:grid;gap:12px}
.d-nos li{display:flex;align-items:center;gap:14px;font:600 clamp(22px,2.2vw,28px)/1.1 var(--display);letter-spacing:-.02em}
.d-no{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:8px;background:var(--sel);color:var(--accent)}
.d-no svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.d-pathline{align-self:flex-start;padding:8px 12px;border-radius:8px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font:13px var(--mono);color:var(--t-out)}
/* installation: three step tiles, the warning drawn as Windows draws it */
.d-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.d-steps > li{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:8px;background:var(--grout);min-width:0}
.d-steps > li > b{font-size:18px;font-weight:600}
.d-steps > li > span:not([class]){font-size:14.5px;color:var(--text-2)}
.d-step-n{display:grid;place-items:center;width:28px;height:28px;margin-bottom:6px;border-radius:7px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px}
.d-exe,.d-done,.d-smart{margin-top:auto;padding-top:16px}
.d-exe{display:flex;align-items:center;gap:12px;font:13px var(--mono)}
.d-exe span{padding:10px 14px;border-radius:8px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.d-exe .t-mark{width:34px;height:34px}
.d-smart-in{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:4px;background:#0B5CAD;color:#FFFFFF;font:13px/1.35 'Segoe UI',var(--sans)}
.d-smart-in b{font-size:17px;font-weight:600;margin-bottom:4px}
.d-smart-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.d-smart-actions span{padding:6px 12px;border:1px solid rgba(255,255,255,.75);font-size:12.5px}
.d-smart-actions .run{background:#FFFFFF;color:#0B3F78;font-weight:600;outline:2px solid #FFFFFF;outline-offset:2px}
.d-done{display:flex;align-items:center;gap:10px;color:var(--ok)}
.d-done svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.d-done svg:first-child{color:var(--text-2)}
.d-done-bar{flex:1;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.d-done-bar i{display:block;height:100%;width:100%;background:var(--ok)}
.d-fine{display:grid;gap:6px;font-size:13.5px;color:var(--text-2)}
.d-fine code{padding:2px 6px;border-radius:5px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font:12.5px var(--mono);color:var(--t-out);overflow-wrap:anywhere}
/* details */
.sc-specs .t-rows > div{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:4px 24px;padding:12px 0;border-top:1px solid var(--line)}
.t-rows dt{font-weight:600;font-size:15px}
.t-rows dd{color:var(--text-2);font-size:15px}
.t-legal{font-size:14px;color:var(--text-2);max-width:72ch}
.t-close{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;padding-block:clamp(40px,5vw,72px)}
.t-close h2{font:600 clamp(28px,3.4vw,44px)/1.1 var(--display);letter-spacing:-.025em;max-width:20ch}
.t-close .t-get{margin-top:0}

.t-foot{padding-block:48px 64px}
.t-foot .t-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:14px;color:var(--text-2)}
.t-foot a{color:var(--text-2)}
.t-foot a:hover{color:var(--text)}

@media (max-width:1000px){
  .sc.s5,.sc.s7{grid-column:span 6}
  .w-main{grid-template-columns:200px minmax(0,1fr)}
  .w-rail{display:none}
  .w-status .wide{display:none}
}
@media (max-width:760px){
  .t-hero{padding-top:56px}
  .t-hero-in{grid-template-columns:1fr;gap:28px}
  .t-facts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .t-shot{margin-top:44px}
  .t-win{height:auto}
  .w-main{grid-template-columns:minmax(0,1fr)}
  .w-tree,.w-vault span,.w-send span,.w-tabs .tab:not(.on){display:none}
  .w-brand{min-width:0}
  .w-mosaic{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .w-pane.focus{grid-row:auto}
  .w-pane{height:236px}
  .w-pane:nth-child(3){display:none}
  .t-bento{margin-top:64px}
  .sc.s5,.sc.s6,.sc.s7{grid-column:span 12}
  .sc.fr,.sc.fr.rev,.sc-privacy{grid-template-columns:minmax(0,1fr)}
  .sc-privacy .sc-text{grid-row:auto}
  .sc.fr.rev .fr-text{order:0}
  .fr .sc-draw{min-height:0}
  .d-connect{flex-direction:column;align-items:stretch}
  .d-connect .d-tree,.d-card{max-width:none}
  .d-wall{grid-template-columns:repeat(8,minmax(0,1fr))}
  .sc-vault .sc-draw{min-height:0}
  .d-steps{grid-template-columns:minmax(0,1fr)}
  .sc-specs .t-rows > div{grid-template-columns:minmax(0,1fr)}
  .d-tr{grid-template-columns:minmax(0,1fr) auto}
  .d-bar,.d-ok{grid-column:1/-1;grid-row:2}
}
@media (max-width:440px){
  .d-chain{flex-direction:column;gap:0}
  .d-link-line{width:2px;height:18px;flex:none;background:repeating-linear-gradient(180deg,var(--accent) 0 5px,transparent 5px 9px)}
  .d-rtabs .tab:not(.on){display:none}
  .d-layouts{display:grid;grid-template-columns:repeat(2,auto);gap:16px 24px}
  .d-tip{text-align:center}
  .w-search > span{display:none}
  .w-search{flex:0 0 auto;margin-inline:auto 0}
  .w-brand b{display:none}
}