/* The Excel kit's look: Excel for Mac 16.105.2, light, measured off the
   captures in docs/design-studies/excel-reference (a CSS pixel is a point).
   Every class is .xk-*, so the kit sits in any page beside site.css.
   Excel's chrome is drawn in the system face (system-ui is AppKit's own
   San Francisco, with its optical sizes), its cells in Arial.

   The window is always 1440 x 900; a camera (.xk-viewport) shows it at
   any size. Nothing here animates: every motion is the film's clock
   writing transform or opacity. */
.xk-win{--xk-green:#3A714A;--xk-line:#D4D4D4;--xk-ink:#242424;
  position:relative;width:1440px;height:900px;background:#F5F5F5;border-radius:12px;overflow:hidden;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:var(--xk-ink);
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;cursor:default;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18);line-height:1;text-align:left;letter-spacing:0;text-transform:none;font-weight:400;font-style:normal}
.xk-win *,.xk-win *::before,.xk-win *::after{box-sizing:border-box}
.xk-win svg,.xk-win img.xk-ico{display:block;max-width:none}
.xk-win b{font-weight:inherit}
.xk-ico{overflow:visible}

/* ---- title bar ------------------------------------------------------------ */
.xk-chrome{position:absolute;inset:0 0 auto 0;height:62px}
.xk-lights i{position:absolute;top:13px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.xk-red{left:12px;background:#DD6B59}.xk-yellow{left:35px;background:#EAC56D}.xk-green{left:58px;background:#64C365}
.xk-autosave{position:absolute;left:100px;top:14.6px;font-size:11px;color:#616161}
.xk-toggle{position:absolute;left:160px;top:12px;width:29px;height:16px;border-radius:8px;background:#686868}
.xk-toggle i{position:absolute;left:1.5px;top:1.5px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 .5px 1px rgba(0,0,0,.3)}
.xk-tb{position:absolute;top:11px;height:18px;display:flex;align-items:center}
.xk-tbchev{top:14px}
.xk-more{font-size:15px;letter-spacing:1px;color:#4A4A4A;line-height:18px;position:relative;top:-3px}
.xk-wtitle{position:absolute;left:651px;top:11px;display:flex;align-items:center;gap:3px;height:18px}
.xk-wtitle svg:first-child{margin-right:0}
.xk-wtitle b{font-size:12.4px;color:#272727;position:relative;top:.5px;margin:0}
.xk-search{position:absolute;left:1159px;top:12px;display:flex;align-items:center;gap:6px;height:16px;font-size:12.3px;color:#6E6E6E}
.xk-search span{position:relative;top:1px}

/* ---- tabs ---------------------------------------------------------------- */
.xk-tabs{position:absolute;inset:0}
.xk-tab{position:absolute;top:39.9px;font-size:13px;color:var(--xk-ink);white-space:nowrap}
.xk-tab.on{font-weight:600;color:#1B1B1B}
.xk-tab.on::after{content:"";position:absolute;left:0;right:0;top:17px;height:3px;border-radius:1.5px;background:var(--xk-green)}
.xk-comments,.xk-share{position:absolute;top:36px;height:24px;border-radius:5px;display:flex;align-items:center;font-size:13px}
.xk-comments{left:1226px;width:105px;background:#fff;box-shadow:inset 0 0 0 1px #D9D9D9;color:#000;padding-left:9px;gap:5px}
.xk-share{left:1341px;width:89px;background:#387A47;color:#fff;padding-left:9px;gap:5px;font-weight:500}
.xk-share .xk-chev path{stroke:#fff}
.xk-share svg:last-child{margin-left:4px}

/* ---- the ribbon --------------------------------------------------------- */
.xk-ribbon{position:absolute;left:0;top:0;width:1440px;height:136px;pointer-events:none}
.xk-c{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:4px}
.xk-icon{height:24px}
.xk-big{top:67px;height:36px}
.xk-arrow{width:12px;height:12px;border-radius:3px}
.xk-c.on,.xk-c.down{background:linear-gradient(#C8C8C8,#C1C1C1);box-shadow:inset 0 1px 0 #B2B2B3}
.xk-c.hot{background:#E6E6E6}
.xk-c.down{background:linear-gradient(#BDBDBD,#B5B5B5)}
.xk-c.off{opacity:.42}
.xk-blabel{position:absolute;top:105.25px;width:90px;text-align:center;font-size:10.5px;line-height:12px;color:#000;white-space:nowrap}
.xk-blabel.off{color:#808080}
.xk-small{height:22px;justify-content:flex-start;gap:5px;padding:0 4px 0 1px;font-size:10.5px;color:#000;white-space:nowrap}
.xk-small span{position:relative;top:.5px}
.xk-small .xk-chev{margin-left:2px}
/* a disabled control's label is Excel's #808080 (sampled off 02-tab-view) */
.xk-small.off{opacity:1;color:#808080}
.xk-combo{top:71px;height:24px;background:#fff;box-shadow:inset 0 0 0 1px #B9B9B9;justify-content:space-between;padding:0 6px 0 6.5px;font-size:11.3px;color:#000}
.xk-combo span{position:relative;top:.5px}
.xk-combo.off{opacity:1;color:#808080}
.xk-gsep{position:absolute;top:72px;width:1px;height:61px;background:var(--xk-line)}
.xk-vsep{position:absolute;width:1px;background:var(--xk-line)}
.xk-rlabel{position:absolute;font-size:10.5px;color:#000}
.xk-glyph{font-style:normal;text-decoration:none;color:#2B2B2B;line-height:1}
.xk-b{font:700 15px/1 system-ui,-apple-system,sans-serif}
.xk-i{font:italic 400 15px/1 "Times New Roman",Times,serif;color:#3A3A3A}
.xk-u{font:400 14px/1 system-ui,-apple-system,sans-serif;text-decoration:underline;text-underline-offset:2.5px;text-decoration-thickness:1px}
.xk-dollar{font:300 19px/1 system-ui,-apple-system,sans-serif}
.xk-pct{font:300 19px/1 system-ui,-apple-system,sans-serif}
.xk-comma{font:700 21px/1 Georgia,serif;position:relative;top:-6px}
.xk-z100{font:10px/1 system-ui,sans-serif;background:#4D86C9;color:#fff;padding:1px 2px;border-radius:1px}
.xk-collapsed .xk-ribbon{display:none}

/* ---- formula bar --------------------------------------------------------- */
.xk-fx{position:absolute;left:0;width:1440px;height:27px;background:#fff;border-top:1px solid #CCCCCC}
.xk-name{position:absolute;left:0;top:3.5px;width:85px;height:19.5px;border-right:1px solid #CCCCCC;font-size:13px;color:#262626;display:flex;align-items:center;padding-left:11px}
.xk-spin{position:absolute;right:5px;top:3px;width:6px;height:13px;background:
  linear-gradient(to bottom right,transparent 49%,#555 50%) 0 0/3px 4px no-repeat,linear-gradient(to bottom left,transparent 49%,#555 50%) 3px 0/3px 4px no-repeat,
  linear-gradient(to top right,transparent 49%,#555 50%) 0 9px/3px 4px no-repeat,linear-gradient(to top left,transparent 49%,#555 50%) 3px 9px/3px 4px no-repeat}
.xk-fxbtn{position:absolute;top:5px;height:16px;display:flex;align-items:center}
.xk-fx .xk-fxf{gap:2px}
.xk-fx .xk-fxf .xk-chev path{stroke:#A9A9A9}
.xk-fx .xk-fxf .xk-chev{position:relative;top:2px}
.xk-fx .xk-fx{font:italic 600 16.5px/1 "Times New Roman",Times,serif;color:#4F4F4F;letter-spacing:.3px;position:relative;top:1.5px}
.xk-formula{position:absolute;left:180.5px;right:22px;top:3.5px;height:20px;background:#FDFDFD;box-shadow:inset 0 0 0 .5px #CCCCCC;border-left:.5px solid #B6B6B7;font-size:12px;color:#000;display:flex;align-items:center;padding-left:6px;white-space:nowrap;overflow:hidden}
.xk-formula span{position:relative;top:.5px}
.xk-fxexp{position:absolute;right:6px;top:10px}

/* ---- the sheet ----------------------------------------------------------- */
.xk-sheet{position:absolute;left:0;right:0;bottom:54px;overflow:hidden;background:#fff}
.xk-corner{position:absolute;left:0;top:0;width:23px;height:25px;background:linear-gradient(#FCFCFC,#F7F7F7);border-top:1px solid #A0A0A0;border-right:1px solid #BCBBBA;border-bottom:1px solid #BCBBBA}
.xk-corner::after{content:"";position:absolute;right:3px;bottom:3px;border-style:solid;border-width:0 0 11px 11px;border-color:transparent transparent #D2D2D2 transparent}
.xk-colhead{position:absolute;top:0;right:0;height:25px;background:linear-gradient(#FCFCFC,#F7F7F7);border-top:1px solid #A0A0A0;box-shadow:inset 0 1px 0 #E3E3E3;border-bottom:1px solid #BCBBBA}
.xk-ch{position:absolute;top:0;height:23px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#5E5E5E;padding-top:1px}
.xk-ch::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:1px;background:#DDDDDD}
.xk-ch.on{background:#F3F3F3;color:var(--xk-green);box-shadow:inset 0 -2px 0 var(--xk-green)}
.xk-rowhead{position:absolute;left:0;width:23px;bottom:0;background:linear-gradient(90deg,#FDFDFD,#F7F7F7);border-right:1px solid #BCBBBA}
/* Excel sits a row's number on its foot, as it sits the cells' text */
.xk-rh{position:absolute;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;font-size:10px;line-height:1;color:#5E5E5E;padding-bottom:2px}
.xk-rh::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#E2E2E2}
.xk-rh.on{background:#F3F3F3;color:var(--xk-green);box-shadow:inset -2px 0 0 var(--xk-green)}
.xk-noheads .xk-corner,.xk-noheads .xk-colhead,.xk-noheads .xk-rowhead{display:none}
.xk-cells{position:absolute;right:0;bottom:0;overflow:hidden}
.xk-cells>div{position:absolute;inset:0}
.xk-paper{background:#fff}
.xk-gl i{position:absolute;background:var(--xk-line)}
.xk-gv{top:0;bottom:0;width:1px}
.xk-gh{left:0;right:0;height:1px}
.xk-fills i{position:absolute}
.xk-bd{position:absolute;background:#000}
.xk-bd-h.xk-bd-thin{height:1px}
.xk-bd-v.xk-bd-thin{width:1px}
.xk-bd-h.xk-bd-thick{height:2px}
.xk-bd-v.xk-bd-thick{width:2px}
.xk-bd-h.xk-bd-double{height:3px;background:linear-gradient(#000 0 1px,transparent 1px 2px,#000 2px 3px)}
.xk-bd-v.xk-bd-double{width:3px;background:linear-gradient(90deg,#000 0 1px,transparent 1px 2px,#000 2px 3px)}
/* a cell's text: its line box the font's own height (line-height:normal),
   so no engine clips a descender at the cell's foot. A line box of 1em
   cut Arial's descent, and WebKit, which sets the baseline a pixel lower
   than Chromium, cut the j of Project and touched the border below; at
   1px of padding Chromium draws exactly as it did and WebKit clears it. */
.xk-t{position:absolute;display:flex;align-items:flex-end;padding-bottom:1px;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;color:#000;white-space:pre;overflow:hidden;line-height:normal;font-kerning:normal}
.xk-t[style*="text-align:right"]{justify-content:flex-end}
.xk-t[style*="text-align:center"]{justify-content:center}
.xk-frz i{position:absolute;background:#9B9B9B}
.xk-fv{top:0;bottom:0;width:1px}
.xk-fh{left:0;right:0;height:1px}
.xk-ghostlayer{pointer-events:none}
.xk-cells .xk-ghostlayer{z-index:3}

/* the selection: every piece is a unit box drawn by a transform */
.xk-sel{pointer-events:none;z-index:4}
.xk-sel i{position:absolute;left:0;top:0;width:1px;height:1px;transform-origin:0 0}
.xk-sel-t,.xk-sel-a,.xk-sel-b,.xk-sel-c,.xk-sel-d,.xk-sel .xk-sel-x{background:rgba(32,40,48,.12)}
.xk-edge{background:var(--xk-green)}
.xk-e-t,.xk-e-b{height:2px!important}
.xk-e-l,.xk-e-r{width:2px!important}
.xk-sel .xk-handle{width:6px;height:6px;background:var(--xk-green);box-shadow:0 0 0 1px #fff}

/* ---- sheet tabs and status bar --------------------------------------------- */
.xk-sheettabs{position:absolute;left:0;right:0;bottom:27px;height:27px;background:linear-gradient(#E8E8E8,#F0F0F0 4px);border-top:1px solid #CFCFCF;border-bottom:1px solid #C1C1C1}
.xk-tabnav{position:absolute;left:14px;top:8px;display:flex;gap:15px}
.xk-stab{position:absolute;top:0;height:25px;display:flex;align-items:center;justify-content:center;font-size:11.8px;color:#616161;white-space:nowrap}
.xk-stab::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:1px;background:#CDCDCD}
.xk-stab.on{background:#fff;color:#468153;font-weight:600;border-radius:0 0 4px 4px;box-shadow:0 1px 0 #B7B7B7,1px 0 0 #DDDCDB,-1px 0 0 #DDDCDB;top:-1px;height:26px}
.xk-stab.on::before,.xk-stab.on+.xk-stab::before{display:none}
.xk-plus{width:38px;font-size:17px;color:#4A4A4A;font-weight:300}
.xk-plus::after{content:"";position:absolute;right:0;top:5px;bottom:5px;width:1px;background:#CDCDCD}
.xk-status{position:absolute;left:0;right:0;bottom:0;height:27px;background:#F5F5F5;font-size:11.5px;color:#616161}
.xk-ready{position:absolute;left:25px;top:8.5px}
.xk-acc{position:absolute;left:79px;top:4px;display:flex;align-items:center;gap:5px}
.xk-acc span{position:relative;top:.5px}
.xk-vbtn{position:absolute;top:4px;width:30px;height:20px;border-radius:4px;display:flex;align-items:center;justify-content:center}
.xk-vbtn.on{background:#D4D4D4}
.xk-zoomminus,.xk-zoomplus{position:absolute;top:5px;font-size:15px;color:#4A4A4A;font-weight:300}
.xk-zoomminus{left:1236px}.xk-zoomplus{left:1358px}
.xk-slider{position:absolute;left:1252px;top:13px;width:100px;height:3px;border-radius:2px;background:#B8B8B8}
.xk-slider b{position:absolute;left:45px;top:-5px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.25)}
.xk-zoompct{position:absolute;left:1384px;top:8.5px}

/* ---- menus: Excel's, as macOS draws them ----------------------------------- */
.xk-menus{position:absolute;inset:0;pointer-events:none;z-index:20}
.xk-menu,.xk-pop{position:absolute;transform-origin:30px 0;background:#FFFFFF;border-radius:9px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.24),0 10px 30px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.08),inset 0 .5px 0 rgba(255,255,255,.6);padding:5px 5px 5px}
.xk-mhead{display:block;padding:6px 10px 3px 11px;font-size:13px;color:#8E8E8E}
.xk-mi{position:relative;display:flex;align-items:center;gap:7px;height:24px;padding:0 10px 0 13px;border-radius:5px;font-size:13.3px;color:#272727;white-space:nowrap}
.xk-mi.flush{padding-left:13px}
.xk-mi .xk-micon{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center}
.xk-mi{gap:8.5px}
.xk-mi .xk-sub{margin-left:auto}
.xk-mi.hot{background:#3D82E3;color:#fff}
.xk-mi.hot .xk-ico [stroke="#2B2B2B"],.xk-mi.hot .xk-ico [stroke="#9A9A9A"]{stroke:#fff}
.xk-mi.hot .xk-sub path{fill:#fff}
.xk-mi.blink{background:transparent;color:#1E1E1E}
.xk-msep{display:block;height:2px;margin:5px -5px;background:#E6E6E6}
.xk-pop{border-radius:12px;padding:0;height:81px;background:#FBFBFB}
.xk-poparrow{position:absolute;left:135px;top:-6px;width:12px;height:12px;background:inherit;transform:rotate(45deg);box-shadow:-.5px -.5px 0 rgba(0,0,0,.2);border-radius:2px 0 0 0}
.xk-popnav{position:absolute;left:0;top:8px;width:69px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.8px;color:#000;border-radius:5px}
.xk-popcol{position:absolute;top:6px;display:flex;flex-direction:column;gap:7px}
.xk-popcol:nth-of-type(2){left:69px}.xk-popcol:nth-of-type(3){left:160px}
.xk-cb{display:flex;align-items:center;gap:6px;height:15px;font-size:10.5px;color:#000;white-space:nowrap;border-radius:4px}
.xk-cb.off{color:#A0A0A0}
.xk-box{width:12px;height:12px;border-radius:3px;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.35);color:#1E1E1E}
.xk-box.on{background:#fff}
.xk-cb.off .xk-box{color:#B8B8B8}
.xk-cb.hot{background:#3D82E3;color:#fff;margin:-2px -4px;padding:2px 4px}
.xk-fc{display:flex}

/* ---- the camera ------------------------------------------------------------ */
.xk-viewport{position:relative;overflow:hidden}
.xk-viewport>.xk-win,.xk-viewport>.xk-stage{position:absolute;left:0;top:0;transform-origin:0 0}

/* ---- the pointer ------------------------------------------------------------ */
.xk-layer{position:absolute;inset:0;pointer-events:none;z-index:40}
.xk-pointer{position:absolute;left:0;top:0;width:0;height:0;z-index:50;pointer-events:none}
.xk-pointer .xk-arrow{position:absolute;left:-2.8px;top:-1.4px;transform-origin:2.8px 1.4px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.xk-ring{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:rgba(10,102,214,.18);box-shadow:0 0 0 1.5px rgba(10,102,214,.45);opacity:0;transform:translate(-50%,-50%) scale(.4)}

/* ---- stills --------------------------------------------------------------- */
.xk-still .xk-pointer{display:none}

/* ---- the Axiom Forge panel (Frost): GlassOverlay's tokens at its 0.95 scale ----
   600 wide, 20 corner, the popover material under a 62% white wash
   (measured #F1F2F3 over a white sheet), a 1 pt border at 10%, a white
   specular top edge, and macOS's hairline and shadow around the panel.
   Insets: 13.3 sides, the crumb 10.64 down, the body 7.3 under it, the
   footer 6.65 under the body and 9.3 off the foot. */
.xk-panel{--k:#0A66D6;--ink:#10151D;--dim:#5C6675;position:absolute;width:600px;border-radius:20px;z-index:30;pointer-events:none;
  background:rgba(241,242,243,.94);-webkit-backdrop-filter:blur(34px) saturate(1.15);backdrop-filter:blur(34px) saturate(1.15);
  box-shadow:0 0 0 .5px rgba(0,0,0,.72),inset 0 0 0 1px rgba(10,15,28,.10),0 14px 44px rgba(0,0,0,.20),0 3px 10px rgba(0,0,0,.08);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:var(--ink);line-height:1;text-align:left;
  -webkit-font-smoothing:antialiased;visibility:hidden;opacity:0;overflow:hidden}
.xk-pspec{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.9)}
.xk-phead{position:relative;height:32.74px}
.xk-crumb{position:absolute;left:13.3px;top:10.64px;height:14.8px;display:flex;align-items:center;white-space:nowrap}
.xk-alt{font:700 9.5px/1 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;color:var(--k);letter-spacing:.2px}
.xk-psep{font-size:11.4px;color:var(--dim);margin:0 6.6px}
.xk-pseg{font-size:12.35px;font-weight:600;color:var(--ink);letter-spacing:-.05px}
.xk-pseg.last{color:var(--k)}
.xk-pdim{font-size:11.4px;color:var(--dim);margin-left:6.6px}
.xk-pcount{position:absolute;right:13.3px;top:10.64px;height:14.8px;display:flex;align-items:center;font:500 9.5px/1 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;color:var(--dim);white-space:pre}
.xk-pbody{display:flex;gap:17.1px;padding:0 13.3px}
.xk-pcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4.75px}
.xk-pgrp{display:flex;flex-direction:column;gap:1.425px}
.xk-pgrp.slack{margin-bottom:auto}
.xk-pgh{height:9.5px;display:flex;align-items:center;font-size:8.55px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--dim)}
.xk-prow{position:relative;display:flex;align-items:center;gap:5.7px;height:17.1px;white-space:nowrap}
.xk-prow::before{content:"";position:absolute;left:-5px;right:-5px;top:-1px;bottom:-1px;border-radius:5px;background:rgba(10,102,214,.13);box-shadow:inset 0 0 0 1px rgba(10,102,214,.34);opacity:0}
.xk-prow.lit::before{opacity:1}
.xk-cap{position:relative;flex:none;display:grid;place-items:center;min-width:18.05px;height:17.1px;padding:0 3px;border-radius:4px;background:rgba(10,102,214,.13);box-shadow:inset 0 0 0 1px rgba(10,102,214,.34);
  font:700 10.45px/1 ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;color:var(--k)}
.xk-prow.lit .xk-cap{background:rgba(10,102,214,.22);box-shadow:inset 0 0 0 1px var(--k)}
.xk-plabel{position:relative;font-size:11.4px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.xk-pchev{position:relative;font-size:10.45px;color:rgba(10,102,214,.62);margin-left:-.5px}
.xk-pext{position:relative;font-size:9.5px;color:var(--k)}
.xk-pfoot{margin-top:7.65px;padding:0 13.3px 9.3px;height:21.3px;display:flex;align-items:flex-start;font-size:9.5px;line-height:12px;color:var(--dim);white-space:pre}

/* ---- the big keycaps: the site's .kc, pressed by the film ------------------ */
.xk-keys{display:flex;flex-direction:column;align-items:flex-start;gap:.28em}
.xk-keys .kc{transition:none;box-shadow:0 calc(var(--kd) * (1 - var(--xk-down,0))) 0 var(--kb)}
.xk-kname{display:block;min-height:1.2em;font-weight:600}

/* ---- the Formula Tracer's pane: its own tokens (tracer/src/taskpane/theme.ts) ----
   The app floats it as a window of its own; the captures' window is
   772 x 642 points, with Excel's personality menu (the grey "i") in the
   pane's top right corner. Every size here is the component's own. */
.xk-tr{--ground:#F7F5EE;--paper:#FFFFFF;--wash:#FCFBF6;--ink:#18202C;--dim:#5F6875;--faint:#9AA1AB;--line:#E2DEC9;--hair:#F2F0E8;
  --blue:#0A66D6;--bsoft:#DCEAFB;--amsoft:#FBF3E2;--amline:#EAD9AE;--amink:#8A6520;--green:#107C41;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;--mono:Menlo,"SF Mono",ui-monospace,"Courier New",monospace;
  position:absolute;width:772px;background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:normal;text-align:left;letter-spacing:0;
  -webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;cursor:default;transform-origin:50% 0;visibility:hidden;opacity:0}
.xk-tr *,.xk-tr *::before,.xk-tr *::after{box-sizing:border-box}
.xk-trwin{height:642px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 22px 60px rgba(0,0,0,.22),0 6px 18px rgba(0,0,0,.10)}
.xk-trtitle{position:relative;z-index:1;height:31px;background:#FFFFFF;border-bottom:1px solid #E4E4E4;display:flex;align-items:center}
.xk-trl{position:absolute;top:9.5px;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.xk-trl.r{left:9.5px;background:#EC6A5F}.xk-trl.y{left:32.5px;background:#DADADA}.xk-trl.g{left:55.5px;background:#61C554}
.xk-trtitle span{position:absolute;left:84.5px;top:8px;font-size:13px;font-weight:600;color:#3B3B3B;letter-spacing:-.05px}
.xk-trbody{position:relative;padding:10px 10px 16px}
/* the pane as Office's web view lays it out: the header row 27.5 tall, its text 3 down (measured) */
.xk-trhead{position:relative;display:flex;align-items:baseline;gap:8px;margin-bottom:8px;padding:3px 38px 0 0;min-height:27.5px;flex-wrap:nowrap;white-space:nowrap}
.xk-trbrand{display:flex;align-items:center;gap:7px}
.xk-trbrand svg{display:block;flex:none}
.xk-trbrand b{font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0}
.xk-trready{font-size:10.5px;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:2px 9px;border:1px solid #C2E0CE;background:#E7F3EC;color:var(--green)}
.xk-trright{margin-left:auto;display:flex;align-items:baseline;gap:10px}
/* G17: the header as 1.21 draws it (App.tsx headerLink): Settings and Help, quiet text links */
.xk-trlink{font-size:11px;color:var(--faint)}
.xk-tri{position:absolute;right:-3.5px;top:-3px;width:25.5px;height:26px;border-radius:4px;background:#6B6B6B;display:grid;place-items:center}
.xk-tri i{font:italic 700 17px/1 Georgia,"Times New Roman",serif;color:#fff;position:relative;top:-.5px}
.xk-traddr{display:flex;align-items:baseline;flex-wrap:wrap;row-gap:2px;column-gap:8px;padding:8px 10px 7px;min-height:36px;margin-bottom:8px;background:var(--ground);border:1px solid var(--line);border-radius:8px}
.xk-tra{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.xk-trsheet{color:var(--dim);font-weight:500}
.xk-trv{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--ink);max-width:200px;overflow:hidden;text-overflow:ellipsis}
.xk-trnav{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--wash);border:1px solid var(--line);border-radius:8px;margin-bottom:8px;min-height:41px;flex-wrap:wrap}
.xk-trbtn{padding:3px 9px;font-size:11.5px;font-weight:600;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);white-space:nowrap}
.xk-trbtn.off{opacity:.35}
.xk-trk{font-family:var(--mono);font-size:10px;color:var(--faint);margin-left:5px}
.xk-trcrumbs{display:flex;align-items:center;gap:2px;flex:1;flex-wrap:wrap;overflow:hidden}
.xk-trempty{color:var(--faint);font-size:11px;font-style:italic}
.xk-trcrumb{padding:1px 6px;border-radius:4px;background:var(--bsoft);color:var(--blue);font-size:11px;font-family:var(--mono);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xk-trcrumb.now{background:var(--blue);color:#fff;font-weight:700}
.xk-trsep{color:var(--faint);font-size:10px;margin:0 1px}
.xk-trtabs{position:relative;display:flex;gap:0;margin-bottom:8px;border-bottom:1px solid var(--line)}
.xk-trtab{padding:7px 12px 10px;font-size:12.5px;font-weight:600;color:var(--dim);white-space:nowrap}
.xk-trtab i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint);margin-right:6px}
.xk-trtab.on{color:var(--blue)}
.xk-trink{position:absolute;left:0;bottom:-1px;width:100px;height:2px;background:var(--blue);transform-origin:0 0}
.xk-trview{position:relative}
.xk-trghost{position:absolute!important;left:10px;right:10px;pointer-events:none;background:var(--ground);z-index:2}
.xk-trtable{border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden}
.xk-trtable.ring{border-color:var(--blue);box-shadow:0 0 0 3px var(--bsoft)}
.xk-trth,.xk-trrow{display:grid;grid-template-columns:307.5px 137px 127px minmax(90px,1fr)}
.xk-trth{background:var(--wash);border-bottom:1px solid var(--line)}
.xk-trth span{padding:4px 10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);line-height:24px;box-shadow:inset -1px 0 0 var(--line)}
.xk-trth span:nth-child(3){text-align:right}
.xk-trth span:last-child{box-shadow:none}
.xk-trrows{position:relative}
.xk-trbar{position:absolute;left:0;right:0;top:0;height:24px;background:var(--blue);opacity:0}
.xk-trbar i{position:absolute;left:307.5px;width:137px;top:0;bottom:0;background:rgba(255,255,255,.12)}
.xk-trrow{position:relative;font-size:12.5px;line-height:24px;border-bottom:1px solid var(--hair)}
.xk-trrow>span{padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xk-trel{display:flex;align-items:center;gap:6px;font-family:var(--mono);color:var(--ink)}
/* the element's words ellipsize in their own span, as the pane's do (Explorer.tsx) */
.xk-trtx{min-width:0;overflow:hidden;text-overflow:ellipsis}
.xk-trtri{flex:none;width:14px;height:14px;display:grid;place-items:center;font-style:normal;font-size:10px;line-height:1;color:var(--faint)}
.xk-trinfo{font-family:var(--sans);font-size:12px;color:var(--dim)}
.xk-trval{text-align:right;font-family:var(--mono);color:var(--ink)}
.xk-trloc{font-family:var(--mono);color:var(--dim)}
.xk-trloc.other{color:var(--amink);background:var(--amsoft)}
.xk-trhc{display:inline-block;margin-left:5px;padding:0 5px;border-radius:999px;font-size:10px;font-weight:700;line-height:14px;border:1px solid var(--amline);background:var(--amsoft);color:var(--amink);vertical-align:1px}
.xk-trrow.f>span,.xk-trrow.f .xk-trtri{color:#fff}
.xk-trrow.f .xk-trloc.other{background:transparent}
.xk-trrow.f .xk-trhc{background:transparent;border-color:currentColor;color:#fff;opacity:.9}
.xk-trhint{margin:9px 0 0;font-size:10.5px;line-height:16px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xk-trfx{margin-top:8px;padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:12px;line-height:19px;color:var(--ink);white-space:pre-wrap;word-break:break-all}
.xk-trref{background:var(--bsoft);border-bottom:2px solid var(--blue);border-radius:2px;color:var(--blue);font-weight:700}
.xk-trdesc{margin:0 0 8px;font-size:12px;color:var(--dim);line-height:18px}
.xk-trtool{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.xk-trcount{font-size:11.5px;color:var(--faint)}
.xk-trmap{padding:8px 0}
.xk-trmap .xk-trdesc{margin-bottom:10px}
.xk-trbtns{display:flex;gap:8px;margin-bottom:12px}
.xk-trapply,.xk-trclear{flex:1;padding:8px 12px;border-radius:6px;font-size:13px;font-weight:500;text-align:center;border:1px solid}
.xk-trapply{background:var(--green);color:#fff;border-color:var(--green)}
.xk-trclear{background:var(--paper);color:var(--ink);border-color:var(--line)}
.xk-trclear.off{opacity:.5}
.xk-trlegh{display:block;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px}
.xk-trlegend{display:flex;flex-direction:column;gap:4px}
/* measured off 05-tracer-10 and -11: a row 20 tall, 22 with its count, 4 apart */
.xk-trleg{display:flex;align-items:center;gap:8px;min-height:20px;font-size:12px;color:var(--ink)}
.xk-trleg i{width:16px;height:16px;border-radius:3px;border:1px solid var(--line);flex:none}
.xk-trcnt{margin-left:auto;min-width:22px;height:22px;display:inline-grid;place-items:center;background:var(--wash);padding:0 6px;border-radius:11px;font-size:11px;font-weight:400;color:var(--dim)}
.xk-trstatus{margin:10px 0 0;font-size:12px;color:var(--dim);font-style:italic}