:root {
  --desktop:#d7d4cc;
  --chrome:#c6c3bb;
  --paper:#fffef8;
  --ink:#101218;
  --soft:#5f6670;
  --navy:#083e89;
  --yellow:#f4c934;
  --line:#77756f;
  --light:#f4f2eb;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:#1c2a3f;
  font-synthesis:none;
}

* { box-sizing:border-box; }
html { min-width:320px; scroll-behavior:smooth; }
body { margin:0; min-width:320px; min-height:100svh; padding:12px; background:#1c2a3f; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
::selection { background:var(--navy); color:#fff; }

.pixel-desktop {
  width:min(1540px,100%);
  min-height:calc(100svh - 24px);
  margin:0 auto;
  display:grid;
  grid-template-rows:32px 28px 54px minmax(0,1fr) 28px;
  border:3px solid #eceae3;
  border-right-color:#282723;
  border-bottom-color:#282723;
  background:var(--desktop);
}

.mail-titlebar {
  min-width:0;
  padding:0 5px 0 10px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  background:var(--navy);
  color:#fff;
  font-size:14px;
}
.mail-titlebar>a { font-weight:900; letter-spacing:-.03em; }
.mail-titlebar>strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.mail-titlebar>span { display:flex; gap:3px; }
.mail-titlebar i { width:23px; height:21px; display:grid; place-items:center; border:2px solid #fff; border-right-color:#4d4b46; border-bottom-color:#4d4b46; background:#c6c3bb; color:#111; font-style:normal; font-weight:700; }

.mail-menu { padding:0 8px; display:flex; align-items:center; gap:3px; border-bottom:2px solid #74716b; background:var(--chrome); font-size:14px; }
.mail-menu a { min-height:24px; padding:4px 8px; display:inline-flex; align-items:center; }
.mail-menu a:hover,.mail-menu a:focus-visible { background:var(--navy); color:#fff; outline:0; }

.mail-toolbar { padding:7px 8px; display:flex; align-items:stretch; gap:6px; border-bottom:2px solid #85827b; background:var(--chrome); }
.mail-toolbar a { min-height:36px; padding:4px 10px; display:inline-flex; align-items:center; gap:7px; border:2px solid #fff; border-right-color:#706e68; border-bottom-color:#706e68; background:#d8d5cd; font-size:14px; font-weight:700; transition:transform 120ms cubic-bezier(.23,1,.32,1),background-color 140ms ease; }
.mail-toolbar a:active { transform:scale(.98); border-color:#706e68; border-right-color:#fff; border-bottom-color:#fff; }
.mail-toolbar a:hover,.mail-toolbar a:focus-visible { background:#efede6; outline:2px solid var(--navy); outline-offset:-4px; }
.mail-toolbar__contact { margin-left:auto; background:var(--yellow)!important; }
.mail-toolbar a>span { font-size:17px; }

.kb-layout { min-height:0; display:grid; grid-template-columns:240px minmax(360px,.85fr) minmax(420px,1.15fr); gap:8px; padding:8px; }
.folder-pane,.topic-pane,.preview-pane,.article-pane,.article-info { min-width:0; min-height:0; border:2px solid #77756f; border-right-color:#fff; border-bottom-color:#fff; background:var(--paper); }
.folder-pane>h2,.pane-heading { height:30px; margin:0; padding:0 9px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:2px solid #77756f; background:#eceae3; color:#20232a; font-size:14px; }

.kb-folders { padding:8px; display:grid; gap:3px; }
.kb-folders a { min-height:35px; padding:7px 8px; display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:6px; border:2px solid transparent; font-size:14px; transition:background-color 140ms ease,color 140ms ease; }
.kb-folders a span { color:#b28100; font-size:18px; }
.kb-folders a b { min-width:25px; text-align:right; color:var(--soft); font-size:13px; }
.kb-folders a:hover,.kb-folders a:focus-visible { border-color:#b9b6af; background:var(--light); outline:0; }
.kb-folders a.is-active { border-color:#fff; border-right-color:#333; border-bottom-color:#333; background:var(--navy); color:#fff; }
.kb-folders a.is-active span,.kb-folders a.is-active b { color:#fff; }

.topic-pane,.article-pane { display:grid; grid-template-rows:30px minmax(0,1fr); }
.topic-scroll { min-height:0; overflow:auto; scrollbar-color:#6d6a64 #ddd9d0; }
.topic-group { scroll-margin-top:10px; }
.topic-group>header { min-height:34px; padding:5px 9px; display:grid; grid-template-columns:21px 1fr auto; align-items:center; gap:7px; border-bottom:2px solid #b4b1aa; background:var(--folder); }
.topic-group>header span { color:#9c7300; font-size:18px; }
.topic-group h2 { margin:0; font-size:14px; }
.topic-group>header b { min-width:24px; text-align:right; font-size:13px; }
.topic-row { min-height:68px; padding:8px 9px; display:grid; grid-template-columns:12px minmax(0,1fr) 68px; align-items:start; gap:9px; border-bottom:2px solid #d3d0c8; background:#fffef8; transition:background-color 140ms ease,color 140ms ease; }
.topic-row:hover,.topic-row:focus-visible { background:var(--navy); color:#fff; outline:0; }
.topic-status { width:9px; height:9px; margin-top:4px; background:var(--folder); border:2px solid #4a4b4f; }
.topic-row>span:nth-child(2) { min-width:0; }
.topic-row b { display:block; font-size:14px; line-height:1.2; }
.topic-row small { max-width:60ch; margin-top:4px; display:-webkit-box; overflow:hidden; color:#4e5661; font-size:13px; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.topic-row:hover small,.topic-row:focus-visible small { color:#dce9ff; }
.topic-row time { color:#555d67; font-size:13px; text-align:right; white-space:nowrap; }
.topic-row:hover time,.topic-row:focus-visible time { color:#fff; }

.preview-pane { display:grid; grid-template-rows:auto minmax(0,1fr); background:#efede6; }
.preview-meta { padding:12px 15px; display:grid; gap:4px; border-bottom:4px double #77756f; background:#fffef8; font-size:14px; }
.preview-meta b { font-size:17px; }
.preview-meta span { color:#5f6670; }
.preview-copy { min-height:0; overflow:auto; padding:clamp(24px,4vw,58px); background:#fffef8; }
.preview-copy h2 { max-width:620px; margin:0; font-size:clamp(38px,4vw,64px); line-height:.94; letter-spacing:-.055em; }
.preview-copy p { max-width:660px; margin:26px 0 0; font-size:18px; line-height:1.65; }
.preview-copy ul { margin:28px 0; padding-left:21px; font-size:16px; line-height:1.8; }
.preview-attachments { max-width:620px; margin:0 0 28px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.preview-attachments a { min-width:0; padding:6px; display:grid; gap:7px; border:2px solid #77756f; border-right-color:#fff; border-bottom-color:#fff; background:#e4e1d9; transition:transform 140ms cubic-bezier(.23,1,.32,1),background-color 140ms ease; }
.preview-attachments a:hover,.preview-attachments a:focus-visible { z-index:1; transform:translateY(-3px); background:#dce9ff; outline:2px solid var(--navy); }
.preview-attachments img { width:100%; aspect-ratio:4/3; display:block; object-fit:cover; object-position:top; background:#1c2a3f; }
.preview-attachments span { overflow:hidden; text-overflow:ellipsis; color:#343a43; font-size:13px; font-weight:800; white-space:nowrap; }
.preview-copy>* { animation:mail-in 360ms both cubic-bezier(.23,1,.32,1); }
.preview-copy>*:nth-child(2) { animation-delay:50ms; }
.preview-copy>*:nth-child(3) { animation-delay:90ms; }
.preview-copy>*:nth-child(4) { animation-delay:130ms; }
.preview-copy>*:nth-child(5) { animation-delay:170ms; }
@keyframes mail-in { from { opacity:0; transform:translateY(8px); } }
.pixel-action { min-height:48px; padding:0 18px; display:inline-flex; align-items:center; border:3px solid #fff; border-right-color:#4c493f; border-bottom-color:#4c493f; background:var(--yellow); font-weight:800; transition:transform 120ms cubic-bezier(.23,1,.32,1); }
.pixel-action:active { transform:scale(.98); }
.pixel-action:focus-visible { outline:3px solid var(--navy); outline-offset:3px; }

.mail-status { padding:0 8px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:2px solid #fff; background:var(--chrome); color:#34363a; font-size:13px; }

.kb-mobile-intro { display:none; }

.article-pane { grid-column:2/4; }
.article-pane>.pane-heading>a { text-decoration:underline; text-underline-offset:3px; }
.article-info { grid-column:4; display:none; }
.kb-article { min-height:0; overflow:auto; background:#fffef8; }
.article-path { width:min(860px,calc(100% - 40px)); margin:24px auto 0; display:flex; flex-wrap:wrap; gap:8px; color:#61656b; font-size:13px; }
.article-path a { text-decoration:underline; text-underline-offset:3px; }
.article-head,.short-answer,.article-toc,.article-body,.article-related,.article-contact { width:min(860px,calc(100% - 40px)); margin-inline:auto; }
.article-head { margin-top:25px; padding:30px; border-left:14px solid var(--folder); background:#eeece5; }
.article-head>span { display:inline-block; padding:5px 7px; background:var(--navy); color:#fff; font-size:13px; font-weight:800; }
.article-head h1 { max-width:800px; margin:22px 0 0; font-size:clamp(40px,6vw,78px); line-height:.94; letter-spacing:-.055em; }
.article-head>p { max-width:720px; margin:24px 0 0; font-size:19px; line-height:1.55; }
.article-head>div { margin-top:24px; display:flex; flex-wrap:wrap; gap:10px 22px; color:#666b72; font-size:13px; }
.article-head i { font-style:normal; }
.short-answer { margin-top:28px; padding:22px 24px; border:3px solid #222; background:var(--yellow); }
.short-answer strong { display:block; margin-bottom:8px; font-size:17px; }
.short-answer p { margin:0; font-size:17px; line-height:1.55; }
.article-toc { margin-top:28px; padding:18px 20px; display:grid; grid-template-columns:160px 1fr; gap:8px 20px; background:#e4e1d9; }
.article-toc strong { grid-row:1/8; }
.article-toc a { width:fit-content; color:#063e8e; text-decoration:underline; text-underline-offset:3px; font-size:14px; }
.article-body { margin-top:52px; }
.article-body section { scroll-margin-top:20px; margin:0 0 54px; }
.article-body h2 { max-width:720px; margin:0 0 20px; font-size:clamp(30px,4vw,48px); line-height:1; letter-spacing:-.045em; }
.article-body p,.article-body li { max-width:720px; color:#2b2f36; font-size:18px; line-height:1.72; }
.article-body p { margin:0; }
.article-check { padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; list-style:none; }
.article-check li { margin:0; padding:14px 14px 14px 42px; position:relative; border:2px solid #aaa79f; background:#f3f1ea; font-size:15px; line-height:1.4; }
.article-check li::before { content:""; position:absolute; left:15px; top:13px; width:12px; height:7px; border-left:3px solid #173c30; border-bottom:3px solid #173c30; transform:rotate(-45deg); }
.article-related { margin-top:70px; padding-top:24px; border-top:4px double #77756f; }
.article-related h2 { margin:0 0 14px; font-size:28px; }
.article-related>a { min-height:76px; padding:12px 14px; display:grid; gap:5px; border-bottom:2px solid #bbb7ae; background:#efede6; }
.article-related>a:hover,.article-related>a:focus-visible { background:#dce9ff; outline:2px solid var(--navy); outline-offset:-2px; }
.article-related span { color:#636971; font-size:12px; }
.article-related b { font-size:16px; }
.article-contact { margin-top:54px; margin-bottom:70px; padding:28px; background:var(--navy); color:#fff; }
.article-contact h2 { margin:0; font-size:34px; }
.article-contact p { max-width:620px; font-size:17px; line-height:1.55; }
.article-contact a { min-height:48px; padding:0 16px; display:inline-flex; align-items:center; border:3px solid #fff; border-right-color:#7d6500; border-bottom-color:#7d6500; background:var(--yellow); color:#15120a; font-weight:800; }

@media (min-width:1280px) {
  .kb-layout:has(.article-pane) { grid-template-columns:230px minmax(0,1fr) 220px; }
  .article-pane { grid-column:2; }
  .article-info { display:block; grid-column:3; }
  .article-info dl { margin:0; padding:12px; display:grid; gap:5px; font-size:12px; }
  .article-info dt { margin-top:10px; color:#656a71; }
  .article-info dd { margin:0; padding:6px; background:#efede6; overflow-wrap:anywhere; }
}

@media (max-width:1040px) {
  body { padding:0; }
  .pixel-desktop { min-height:100svh; border:0; grid-template-rows:32px 28px 54px minmax(0,1fr) 28px; }
  .kb-layout { grid-template-columns:210px minmax(320px,.9fr) minmax(340px,1.1fr); }
  .preview-copy { padding:30px; }
}

@media (max-width:780px) {
  .pixel-desktop { grid-template-rows:32px 0 48px auto 28px; }
  .mail-menu { overflow:hidden; border:0; }
  .mail-toolbar { padding:5px; }
  .mail-toolbar a { min-height:34px; padding-inline:8px; font-size:13px; }
  .mail-toolbar a:nth-child(2) { display:none; }
  .kb-layout,.kb-layout:has(.article-pane) { grid-template-columns:1fr; padding:6px; }
  .kb-mobile-intro { padding:18px 12px 20px; display:block; border:2px solid #77756f; border-right-color:#fff; border-bottom-color:#fff; background:var(--paper); }
  .kb-mobile-intro h1 { margin:0; font-size:clamp(34px,10vw,48px); line-height:.94; letter-spacing:-.05em; }
  .kb-mobile-intro p { max-width:44ch; margin:12px 0 0; color:#343a43; font-size:15px; line-height:1.45; }
  .folder-pane { min-height:auto; }
  .folder-pane>h2 { display:none; }
  .kb-folders { display:flex; flex-wrap:wrap; overflow:visible; padding:5px; }
  .kb-folders::-webkit-scrollbar { display:none; }
  .kb-folders a { min-width:max-content; min-height:34px; grid-template-columns:18px auto 24px; }
  .topic-pane { min-height:calc(100svh - 202px); }
  .preview-pane,.article-info { display:none; }
  .article-pane { grid-column:1; min-height:calc(100svh - 210px); }
  .mail-titlebar { gap:8px; }
  .mail-titlebar>strong { font-size:12px; }
  .mail-titlebar>span i { width:21px; }
  .mail-status span:last-child { display:none; }
  .topic-row { grid-template-columns:10px minmax(0,1fr); }
  .topic-row time { display:none; }
  .article-head,.short-answer,.article-toc,.article-body,.article-related,.article-contact,.article-path { width:min(100% - 24px,760px); }
  .article-head { padding:22px 18px; border-left-width:9px; }
  .article-head h1 { font-size:clamp(38px,12vw,58px); }
  .article-head>p { font-size:17px; }
  .article-toc { grid-template-columns:1fr; }
  .article-toc strong { grid-row:auto; margin-bottom:6px; }
  .article-body { margin-top:40px; }
  .article-body p,.article-body li { font-size:17px; }
  .article-check { grid-template-columns:1fr; }
}

@media (max-width:430px) {
  .mail-titlebar>strong { display:none; }
  .mail-toolbar a>span { display:none; }
  .mail-toolbar__contact { min-width:0; }
  .article-head h1 { font-size:39px; }
}

body.is-route-leaving { overflow:hidden; }
.fake-route-loader { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; padding:24px; visibility:hidden; opacity:0; overflow:hidden; background:#02030a url('/assets/cosmos/deep-space-luxury-v1.webp') center/cover no-repeat; color:#fff; transition:opacity 120ms ease-out; }
.fake-route-loader::before { content:""; position:absolute; inset:0; background:rgba(2,3,10,.58); }
.fake-route-loader.is-visible { visibility:visible; opacity:1; }
.fake-route-loader__modern { width:min(560px,100%); position:relative; z-index:1; display:grid; justify-items:center; text-align:center; font-family:Arial,Helvetica,sans-serif; }
.fake-route-loader__logo { position:relative; display:flex; align-items:baseline; gap:9px; font-size:clamp(54px,12vw,102px); font-weight:900; line-height:.78; letter-spacing:-.09em; }
.fake-route-loader__logo span { color:#fffef8; }
.fake-route-loader__logo b { color:#f4c934; font-weight:900; }
.fake-route-loader__logo::after { content:""; position:absolute; inset:-20px -28px -18px; border:2px solid rgba(244,201,52,.48); transform:skewX(-7deg); }
.fake-route-loader__modern>small { margin-top:39px; color:#d8d4c8; font-size:12px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.fake-route-loader__beam { width:min(360px,78vw); height:4px; margin-top:22px; overflow:hidden; background:rgba(255,255,255,.18); }
.fake-route-loader__beam i { width:100%; height:100%; display:block; background:#f4c934; transform:translateX(-104%); animation:fake-lab-home-load 820ms 100ms linear forwards; }
@keyframes fake-lab-home-load { to { transform:translateX(0); } }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
  .fake-route-loader__beam i { animation-duration:120ms!important; }
}
