/* Surface colours. The desktop follows the room: light by day, dark once the scene turns to evening. */
.os-desktop {
  --os-bg:oklch(13% .02 255);--os-text:oklch(26% .022 255);--os-muted:oklch(53% .026 255);--os-muted-2:oklch(45% .024 255);
  --os-link:oklch(44% .16 253);--os-focus:oklch(57% .19 253);
  --os-menubar:oklch(18% .025 255 / .66);--os-menubar-solid:oklch(21% .025 255);--os-menubar-text:oklch(97% .006 255);
  --os-window:oklch(97% .007 255);--os-window-line:oklch(96% .007 255 / .8);--os-titlebar:oklch(94% .01 255);--os-titlebar-line:oklch(85% .016 255);
  --os-sidebar:oklch(91% .017 250 / .95);--os-sidebar-solid:oklch(91% .017 250);--os-sidebar-line:oklch(83% .018 255);
  --os-sidebar-hover:oklch(83% .025 255 / .45);--os-sidebar-active:oklch(79% .04 250 / .6);--os-sidebar-active-text:oklch(22% .033 255);
  --os-content:oklch(98% .004 255);--os-rule:oklch(88% .012 255);--os-folder-hover:oklch(92% .026 250);
  --os-statusbar:oklch(94% .01 255);--os-statusbar-line:oklch(86% .016 255);
  --os-dock:oklch(89% .025 255 / .45);--os-dock-solid:oklch(88% .02 255);--os-dock-line:oklch(97% .008 255 / .5);--os-dock-dot:oklch(21% .025 255);
  --os-label:oklch(97% .008 255 / .95);--os-label-text:oklch(23% .024 255);
  --os-menu:oklch(97% .006 255 / .92);--os-menu-line:oklch(85% .01 255 / .6);
  --os-widget:oklch(97% .006 255 / .8);--os-widget-text:oklch(26% .022 255);--os-weather:linear-gradient(160deg,oklch(68% .13 240),oklch(52% .15 252))
}
:root[data-theme="night"] .os-desktop {
  color-scheme:dark;
  --os-text:oklch(92% .01 255);--os-muted:oklch(70% .02 255);--os-muted-2:oklch(76% .018 255);
  --os-link:oklch(78% .12 253);--os-focus:oklch(75% .15 253);
  --os-menubar:oklch(12% .02 255 / .72);--os-menubar-solid:oklch(14% .02 255);
  --os-window:oklch(25% .012 255);--os-window-line:oklch(45% .01 255 / .55);--os-titlebar:oklch(29% .012 255);--os-titlebar-line:oklch(18% .01 255);
  --os-sidebar:oklch(27% .015 255 / .92);--os-sidebar-solid:oklch(27% .015 255);--os-sidebar-line:oklch(19% .01 255);
  --os-sidebar-hover:oklch(42% .02 255 / .45);--os-sidebar-active:oklch(48% .05 250 / .6);--os-sidebar-active-text:oklch(97% .01 255);
  --os-content:oklch(22% .012 255);--os-rule:oklch(35% .012 255);--os-folder-hover:oklch(31% .02 250);
  --os-statusbar:oklch(27% .012 255);--os-statusbar-line:oklch(18% .01 255);
  --os-dock:oklch(30% .02 255 / .5);--os-dock-solid:oklch(30% .02 255);--os-dock-line:oklch(75% .01 255 / .25);--os-dock-dot:oklch(92% .01 255);
  --os-label:oklch(28% .015 255 / .96);--os-label-text:oklch(95% .01 255);
  --os-menu:oklch(28% .015 255 / .94);--os-menu-line:oklch(55% .01 255 / .4);
  --os-widget:oklch(27% .015 255 / .82);--os-widget-text:oklch(93% .01 255);--os-weather:linear-gradient(160deg,oklch(36% .09 258),oklch(24% .07 265))
}

.os-desktop {
  margin:0;
  padding:0;
  border:0;
  max-width:none;
  max-height:none;
  width:100vw;
  height:100dvh;
  inset:0;
  overflow:hidden;
  background:var(--os-bg);
  color:var(--os-text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light
}

.os-desktop::backdrop {
  background:oklch(8% .025 255 / .24)
}

.os-camera {
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0
}

.os-room-image {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  pointer-events:none
}

/* A 4× crop of the monitor's surroundings, laid over the room copy where the zoom magnifies it; its
   edges are feathered so nothing shows where the crop ends. Position and size are set from desktop.js. */
.os-room-detail {
  position:absolute;
  display:block;
  max-width:none;
  opacity:0;
  pointer-events:none;
  transition:opacity 260ms ease;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect
}
.os-room-detail.is-ready {
  opacity:1
}
@media (prefers-reduced-motion:reduce) {
  .os-room-detail {transition:none}
}

.os-surface {
  position:absolute;
  isolation:isolate;
  overflow:hidden;
  container-type:size;
  container-name:monitor;
  background:oklch(20% .035 255)
}

.os-wallpaper {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:-1;
  pointer-events:none
}

.os-symbols {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none
}

.os-desktop button {
  min-height:0;
  padding:0;
  border:0;
  border-radius:5px;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer
}

.os-desktop button:hover,.os-desktop button[aria-pressed=true] {
  background:transparent
}

.os-desktop button:focus-visible,.os-desktop a:focus-visible,.os-desktop [tabindex]:focus-visible {
  outline:2px solid var(--os-focus);
  outline-offset:3px
}

.os-desktop button:active {
  filter:brightness(.88)
}

.os-menubar {
  position:relative;
  z-index:2;
  height:38px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 16px;
  gap:14px;
  color:var(--os-menubar-text);
  background:var(--os-menubar);
  backdrop-filter:blur(24px);
  box-shadow:0 1px 0 oklch(97% .006 255 / .12)
}

.os-menu-left,.os-menu-right {
  display:flex;
  align-items:center;
  gap:18px;
  white-space:nowrap
}

.os-menu-left strong {
  font-weight:650
}

.os-monogram {
  font-size:12px;
  font-weight:750;
  letter-spacing:-.5px;
  border:1px solid oklch(94% .01 255 / .6);
  border-radius:5px;
  padding:1px 4px
}

#os-clock {
  font-size:12px;
  font-variant-numeric:tabular-nums
}

#os-exit {
  color:inherit;
  padding:4px 8px;
  font-size:.875rem
}

#os-exit:hover {
  background:oklch(98% .005 255 / .16)
}

.os-windows {
  position:absolute;
  inset:0;
  z-index:1;
  isolation:isolate;
  pointer-events:none
}

.os-window {
  position:absolute;
  pointer-events:auto;
  left:0;
  top:0;
  width:920px;
  height:620px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--os-window-line);
  background:var(--os-window);
  box-shadow:0 28px 65px oklch(8% .03 255 / .48),0 4px 14px oklch(8% .03 255 / .3);
  transform-origin:0 0
}

.os-titlebar {
  height:42px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 15px;
  background:var(--os-titlebar);
  border-bottom:1px solid var(--os-titlebar-line);
  user-select:none;
  touch-action:none;
  cursor:grab
}

.os-titlebar.is-dragging {
  cursor:grabbing
}

.os-titlebar:focus-visible {
  outline-offset:-4px!important
}

.os-window.is-maximized .os-titlebar {
  cursor:default
}

.os-titlebar h2 {
  margin:0;
  flex:1;
  font-size:.875rem;
  font-weight:650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.os-traffic-lights {
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:-5px
}

.os-traffic-lights button {
  width:23px;
  height:30px;
  display:grid;
  place-items:center
}

.os-traffic-lights button::before {
  content:"";
  width:12px;
  height:12px;
  border:1px solid oklch(30% .04 35 / .2);
  border-radius:50%;
  grid-area:1/1
}

.os-traffic-lights span {
  grid-area:1/1;
  font-size:11px;
  font-weight:700;
  line-height:12px;
  opacity:0;
  color:oklch(25% .05 35);
  pointer-events:none
}

.os-traffic-lights:hover span,.os-traffic-lights:focus-within span {
  opacity:.85
}

.os-close::before {
  background:#ff6058
}

.os-minimize::before {
  background:#ffbd2e
}

.os-maximize::before {
  background:#29c941
}

.os-window-layout {
  display:grid;
  grid-template-columns:174px minmax(0,1fr);
  min-height:0
}

.os-sidebar {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:3px;
  min-height:0;
  padding:21px 11px 17px;
  background:var(--os-sidebar);
  border-right:1px solid var(--os-sidebar-line);
  overflow:auto
}

.os-sidebar-heading {
  padding:0 9px 7px;
  font-size:12px;
  font-weight:700;
  color:var(--os-muted)
}

.os-sidebar button {
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 9px;
  text-align:left;
  font-size:.875rem;
  min-height:38px;
  white-space:nowrap
}

.os-sidebar button:hover {
  background:var(--os-sidebar-hover)
}

.os-sidebar button[aria-pressed=true] {
  background:var(--os-sidebar-active);
  color:var(--os-sidebar-active-text)
}

.os-sidebar svg {
  width:22px;
  height:20px;
  flex:none
}

.os-sidebar-person {
  margin-top:auto;
  padding:28px 9px 0;
  display:flex;
  flex-direction:column;
  color:var(--os-muted);
  font-size:12px;
  gap:2px
}

.os-sidebar-person strong {
  color:var(--os-text);
  font-weight:600
}

.os-content {
  padding:22px 32px 34px;
  overflow:auto;
  overscroll-behavior:contain;
  min-width:0;
  scrollbar-gutter:stable;
  background:var(--os-content);
  font-size:1rem;
  line-height:1.65
}

.os-content:focus-visible {
  outline-offset:-4px!important
}

.os-content h1 {
  font-size:1.875rem;
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:700;
  margin:0 0 14px
}

.os-content h2 {
  font-size:1.25rem;
  line-height:1.35;
  font-weight:650;
  letter-spacing:-.02em;
  margin:30px 0 10px
}

.os-content p {
  max-width:66ch;
  margin:0 0 17px
}

.os-content a {
  color:var(--os-link)
}

.os-content a:hover {
  text-decoration-thickness:2px
}

.os-content .os-eyebrow {
  font-size:12px;
  color:var(--os-muted);
  letter-spacing:.05em;
  margin:0 0 8px
}

.os-content .os-lead {
  font-size:18px;
  line-height:1.5;
  color:var(--os-muted-2);
  margin:0 0 22px
}

.os-folders {
  display:flex;
  gap:34px;
  flex-wrap:wrap;
  margin:22px 0 28px
}

.os-folders button {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-width:164px;
  padding:15px 10px 12px;
  border-radius:8px;
  font-size:13px
}

.os-folders button:hover,.os-folders button:focus-visible {
  background:var(--os-folder-hover)
}

.os-folders svg {
  width:108px;
  height:86px;
  margin-bottom:9px;
  filter:drop-shadow(0 4px 3px oklch(22% .05 255 / .14))
}

.os-folders strong {
  font-size:14px;
  font-weight:550
}

.os-folders span {
  font-size:12px;
  color:var(--os-muted)
}

.os-content .os-folder-hint {
  font-size:12px;
  color:var(--os-muted)
}

.os-content .os-back {
  font-size:.875rem;
  color:var(--os-link);
  padding:5px 0;
  margin-bottom:20px
}

.os-content .os-back:hover {
  text-decoration:underline
}

.os-facts {
  display:grid;
  gap:13px;
  margin:24px 0 28px;
  padding:20px 0;
  border-block:1px solid var(--os-rule);
  font-size:.875rem
}

.os-facts div {
  display:grid;
  grid-template-columns:95px 1fr;
  gap:12px
}

.os-facts dt {
  color:var(--os-muted)
}

.os-facts dd {
  margin:0
}

.os-process {
  padding-left:23px;
  margin:16px 0 25px;
  display:grid;
  gap:13px;
  font-size:1rem
}

.os-process li::marker {
  color:var(--os-muted)
}

.os-process strong {
  font-weight:600;
  display:block
}

.os-process span {
  color:var(--os-muted-2)
}

.os-benchmark {
  border-collapse:collapse;
  width:100%;
  font-size:.875rem;
  margin:16px 0 12px
}

.os-benchmark caption {
  text-align:left;
  font-size:12px;
  color:var(--os-muted);
  padding-bottom:7px
}

.os-benchmark th,.os-benchmark td {
  padding:9px 0;
  border-bottom:1px solid var(--os-rule);
  text-align:left;
  font-weight:400
}

.os-benchmark td {
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:600
}

.os-content .os-note {
  font-size:12px;
  color:var(--os-muted);
  line-height:1.6
}

.os-action-link {
  display:inline-block;
  font-size:.875rem;
  font-weight:550;
  margin:7px 0 17px
}

.os-job {
  padding:23px 0;
  border-bottom:1px solid var(--os-rule)
}

.os-job:first-of-type {
  padding-top:9px
}

.os-job:last-child {
  border:0
}

.os-job h2 {
  margin:4px 0 4px
}

.os-content .os-job-date {
  font-size:12px;
  color:var(--os-muted);
  margin:0
}

.os-content .os-role {
  font-size:.875rem;
  color:var(--os-muted-2);
  margin:0 0 13px
}

.os-job p:last-child {
  margin:0;
  font-size:1rem
}

.os-document-actions {
  display:flex;
  gap:18px;
  align-items:baseline;
  flex-wrap:wrap;
  font-size:.875rem;
  margin-bottom:25px
}

.os-education {
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:13px 0;
  font-size:.875rem
}

.os-education span {
  color:var(--os-muted-2)
}

.os-contact {
  list-style:none;
  padding:0;
  display:grid;
  gap:9px;
  font-size:14px
}

.os-statusbar {
  height:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 15px;
  font-size:12px;
  color:var(--os-muted);
  background:var(--os-statusbar);
  border-top:1px solid var(--os-statusbar-line)
}

.os-statusbar span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.os-dock {
  position:absolute;
  z-index:2;
  width:max-content;
  left:50%;
  bottom:13px;
  transform:translateX(-50%);
  display:flex;
  gap:9px;
  flex-wrap:nowrap;
  padding:9px 12px 12px;
  border:1px solid var(--os-dock-line);
  border-radius:19px;
  background:var(--os-dock);
  backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 7px 25px oklch(8% .028 255 / .25)
}

.os-dock button {
  position:relative;
  width:54px;
  height:56px;
  border-radius:13px
}

.os-app-icon {
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:12px;
  box-shadow:inset 0 1px 1px oklch(98% .005 255 / .7),0 2px 4px oklch(16% .04 255 / .2);
  transition:transform 140ms cubic-bezier(.22,1,.36,1);
  transform-origin:bottom center
}

.os-app-icon svg {
  width:48px;
  height:42px
}

.os-finder-icon {
  background:linear-gradient(#dff4fc,#b6dcf2)
}

.os-safari-icon {
  background:linear-gradient(#f4f8ff,#d6e4f7)
}

.os-safari-icon svg {
  width:44px;
  height:44px
}

.os-preview-icon {
  background:linear-gradient(#f0f2f8,#d1dbea)
}

.os-notes-icon {
  background:linear-gradient(#fff6d6,#f4dc8e)
}

.os-mail-icon {
  background:linear-gradient(#5db2ff,#2a7de1)
}

.os-dock button:hover .os-app-icon,.os-dock button:focus-visible .os-app-icon {
  transform:translateY(-3px) scale(1.08)
}

.os-dock button::after {
  content:"";
  position:absolute;
  bottom:-8px;
  left:25px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--os-dock-dot);
  opacity:0
}

.os-dock button[data-running=true]::after {
  opacity:1
}

.os-dock-label {
  position:absolute;
  bottom:calc(100% + 16px);
  left:50%;
  transform:translateX(-50%);
  padding:4px 9px;
  border-radius:5px;
  color:var(--os-label-text);
  background:var(--os-label);
  box-shadow:0 2px 9px oklch(10% .025 255 / .2);
  font-size:12px;
  opacity:0;
  pointer-events:none;
  white-space:nowrap
}

.os-dock button:hover .os-dock-label,.os-dock button:focus-visible .os-dock-label {
  opacity:1
}

@container monitor (max-width:620px) {
  .os-menubar {
    padding:0 10px;
    gap:8px;
    height:40px
  }
  .os-menu-left,.os-menu-right {
    gap:10px
  }
  #os-clock {
    display:none
  }
  .os-window {
    border-radius:10px
  }
  .os-window-layout {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr)
  }
  .os-sidebar {
    flex-direction:row;
    gap:3px;
    padding:7px 9px;
    border-right:0;
    border-bottom:1px solid var(--os-sidebar-line)
  }
  .os-sidebar-heading,.os-sidebar-person {
    display:none
  }
  .os-sidebar button {
    padding:5px 6px;
    gap:5px;
    font-size:.875rem;
    min-height:38px;
    justify-content:center;
    flex:1
  }
  .os-sidebar svg {
    width:19px;
    height:17px
  }
  .os-content {
    padding:23px 22px 35px;
    font-size:1rem
  }
  .os-content h1 {
    font-size:1.625rem
  }
  .os-folders {
    gap:10px;
    margin-top:22px
  }
  .os-folders button {
    min-width:118px;
    flex:1;
    padding:12px 3px
  }
  .os-folders svg {
    width:86px;
    height:70px
  }
  .os-folders span {
    font-size:12px
  }
  .os-dock {
    bottom:9px;
    gap:8px;
    padding:7px 10px 11px;
    border-radius:17px
  }
  .os-dock button,.os-app-icon {
    width:48px;
    height:48px
  }
  .os-app-icon svg {
    width:44px;
    height:38px
  }
  .os-safari-icon svg {
    width:40px;
    height:40px
  }
  .os-dock button::after {
    left:22px
  }
  .os-traffic-lights button {
    width:26px;
    height:35px
  }
  .os-titlebar {
    padding:0 10px;
    gap:10px
  }
  .os-facts div {
    grid-template-columns:1fr;
    gap:1px
  }
}

@container monitor (max-width:400px) {
  .os-sidebar svg {display:none}
}

@media(hover:none) {
  .os-dock button {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    width:74px;
    height:auto
  }
  .os-dock-label {
    position:static;
    transform:none;
    padding:0;
    background:none;
    box-shadow:none;
    font-size:12px;
    line-height:16px;
    opacity:1
  }
  .os-dock button::after {left:calc(50% - 2px)}
  .os-traffic-lights span {opacity:.85}
}

@media(prefers-reduced-motion:reduce) {
  .os-app-icon {
    transition:none
  }
  .os-dock button:hover .os-app-icon,.os-dock button:focus-visible .os-app-icon {
    transform:none
  }
}

@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .os-menubar {
    background:var(--os-menubar-solid);
    backdrop-filter:none
  }
  .os-dock {
    background:var(--os-dock-solid);
    backdrop-filter:none
  }
  .os-sidebar {
    background:var(--os-sidebar-solid)
  }
}

@container monitor (max-height:420px) {
  .os-menubar {
    height:30px
  }
  .os-window {
    border-radius:8px
  }
  .os-titlebar {
    height:34px
  }
  .os-statusbar {
    display:none
  }
  .os-pdf-actions {
    display:flex
  }
  .os-sidebar {
    padding:9px 7px
  }
  .os-sidebar-heading,.os-sidebar-person {
    display:none
  }
  .os-content {
    padding:16px 22px 28px
  }
  .os-titlebar {
    padding-inline:10px
  }
  .os-dock {
    bottom:6px;
    padding:5px 8px 10px;
    gap:8px;
    border-radius:13px
  }
  .os-dock button,.os-app-icon {
    width:36px;
    height:36px;
    border-radius:9px
  }
  .os-app-icon svg {
    width:32px;
    height:29px
  }
  .os-safari-icon svg {
    width:30px;
    height:30px
  }
  .os-dock button::after {
    left:16px
  }
  .os-folders {
    margin-block:12px 18px
  }
  .os-folder-hint {
    display:none
  }
}

@media(hover:none) {
  @container monitor (max-height:420px) {
    .os-dock button {width:74px;height:56px}
    .os-dock button::after {left:calc(50% - 2px)}
  }
  /* Six labelled dock buttons on a phone-wide screen: narrower buttons so the dock stays inside it. */
  @container monitor (max-width:620px) {
    .os-dock {gap:4px;padding:6px 6px 9px}
    .os-dock button {width:52px}
    .os-dock-label {font-size:11px}
    .os-dock-divider {margin:0}
  }
}

/* A portrait phone cannot add height to a physical ultrawide screen. Keep
   navigation in one thin row and give the remaining pixels to reading. */
@container monitor (max-height:240px) {
  .os-menubar {height:28px;padding:0 6px;gap:4px}
  .os-menu-left {display:none}
  .os-menu-right {margin-left:auto}
  #os-clock {display:none}
  #os-exit {font-size:12px;padding:2px 4px;min-height:24px}
  .os-window {grid-template-rows:minmax(0,1fr) auto;border-radius:3px}
  .os-titlebar,.os-statusbar {display:none}
  .os-pdf-actions {display:flex;height:20px;padding:0 8px;font-size:11px}
  .os-window-layout {grid-template-rows:auto minmax(0,1fr)}
  .os-sidebar {padding:2px 6px;gap:2px}
  .os-sidebar button {min-height:24px;padding:1px 6px;font-size:12px}
  .os-sidebar svg {display:none}
  .os-content {padding:12px 16px 20px;font-size:14px}
  .os-content h1 {font-size:20px;margin-bottom:12px}
  .os-content .os-eyebrow,.os-folder-hint {display:none}
  .os-folders {margin:0;gap:8px;flex-wrap:nowrap}
  .os-folders button {min-width:0;flex:1;padding:4px;gap:2px}
  .os-folders svg {width:54px;height:42px;margin:0}
  .os-folders span {display:none}
  .os-dock {left:4px;top:1px;bottom:auto;transform:none;gap:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none}
  .os-dock button {width:auto;height:26px;padding:2px 6px;display:block}
  .os-dock .os-app-icon,.os-dock button::after {display:none}
  .os-dock-label {position:static;transform:none;display:block;opacity:1;padding:0;color:oklch(97% .006 255);background:none;box-shadow:none;font-size:11px;line-height:20px}
  .os-dock button[aria-pressed=true] .os-dock-label {text-decoration:underline;text-underline-offset:3px}
}

@container monitor (max-height:240px) and (max-width:360px) {
  .os-exit-label {display:none}
  .os-folders button {flex-direction:row;gap:4px;min-height:40px}
  .os-folders svg {width:30px;height:26px;flex:none}
  .os-folders strong {font-size:12px}
}


/* Files on the desktop, in the right-hand gutter the window leaves free. */
.os-desktop-icons {
  position:absolute;
  right:14px;
  top:50px;
  display:grid;
  gap:4px;
  justify-items:center
}
.os-desktop-icons button,.os-desktop-icons a {
  width:86px;
  text-decoration:none;
  padding:7px 4px 6px;
  border-radius:7px;
  display:grid;
  justify-items:center;
  gap:3px;
  color:#fff;
  font-size:12px;
  line-height:1.2;
  text-align:center;
  text-shadow:0 1px 2px #000a
}
.os-desktop-icons svg {
  width:52px;
  height:42px;
  filter:drop-shadow(0 3px 2px #0005)
}
.os-desktop-icons button:hover,.os-desktop-icons a:hover,.os-desktop-icons :focus-visible {
  background:#ffffff2b
}
.os-desktop-icons span {
  padding:1px 6px;
  border-radius:4px
}
.os-desktop-icons button[aria-pressed=true] span {
  background:#2a62c9
}

/* The dock hides under the window and slides up when the pointer nears the bottom edge, so the window can
   use the screen's full height. Touch screens and the small layouts keep it in place. */
.os-dock-strip {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:16px;
  z-index:2
}
@media (hover:hover) {
  .os-desktop[data-dock=auto] .os-dock {
    transition:transform 220ms cubic-bezier(.22,1,.36,1),opacity 200ms
  }
  .os-desktop[data-dock=auto] .os-dock:not(.is-shown) {
    transform:translate(-50%,calc(100% + 18px));
    opacity:0;
    pointer-events:none
  }
}
@media (prefers-reduced-motion:reduce) {
  .os-desktop[data-dock=auto] .os-dock {transition:none}
}
@container monitor (max-width:620px) {
  .os-desktop-icons {display:none}
}
@container monitor (max-height:420px) {
  .os-desktop-icons,.os-dock-strip {display:none}
}

/* Menubar menus: click a title to open, slide between titles while one is open, arrow keys inside. */
.os-menus {
  display:flex;
  align-items:center;
  gap:2px;
  height:100%
}
.os-menu {
  position:relative;
  height:100%;
  display:flex;
  align-items:center
}
.os-menu-title {
  padding:3px 9px;
  border-radius:5px;
  color:inherit;
  font-size:13px;
  line-height:1.2;
  white-space:nowrap
}
.os-menu.is-open .os-menu-title,.os-menu-title:hover {
  background:oklch(98% .005 255 / .16)
}
.os-menu-list {
  position:absolute;
  left:0;
  top:calc(100% - 5px);
  z-index:3;
  min-width:196px;
  padding:5px;
  border:1px solid var(--os-menu-line);
  border-radius:9px;
  background:var(--os-menu);
  color:var(--os-text);
  box-shadow:0 12px 30px oklch(8% .03 255 / .35);
  backdrop-filter:blur(24px)
}
.os-menu-list [role^=menuitem] {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  padding:5px 12px 5px 26px;
  border-radius:5px;
  text-align:left;
  font-size:13px;
  line-height:1.3;
  white-space:nowrap
}
.os-menu-list [role^=menuitem]:hover,.os-menu-list [role^=menuitem]:focus-visible {
  background:oklch(57% .19 253);
  color:#fff;
  outline:none
}
.os-menu-list [role=menuitemradio][aria-checked=true]::before {
  content:"✓";
  position:absolute;
  left:9px;
  font-size:12px
}
.os-menu-list [aria-disabled=true] {
  opacity:.45;
  cursor:default
}
.os-menu-list [aria-disabled=true]:hover {
  background:transparent;
  color:inherit
}
.os-menu-separator {
  height:1px;
  margin:5px 8px;
  background:var(--os-rule)
}
@container monitor (max-width:400px) {
  .os-menu:not(:first-child) {display:none}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .os-menu-list {backdrop-filter:none;background:var(--os-window)}
}

/* Menubar status area. */
.os-status-button {
  display:grid;
  place-items:center;
  width:26px;
  height:24px;
  color:inherit
}
.os-status-button:hover {
  background:oklch(98% .005 255 / .16)
}
.os-status-glyph {
  display:grid;
  place-items:center;
  opacity:.9
}

/* Desktop widgets on the left, behind the window like the system's own. */
.os-widgets {
  position:absolute;
  left:14px;
  top:50px;
  display:grid;
  gap:10px
}
.os-widget {
  width:100px;
  height:100px;
  padding:9px 11px;
  border-radius:18px;
  background:var(--os-widget);
  color:var(--os-widget-text);
  box-shadow:0 8px 22px oklch(8% .03 255 / .22),inset 0 0 0 1px oklch(100% 0 0 / .2);
  backdrop-filter:blur(18px);
  display:flex;
  flex-direction:column;
  font-size:11px;
  line-height:1.25
}
.os-widget-clock {
  align-items:center;
  padding:8px 8px 7px
}
.os-clock-face {
  width:66px;
  height:66px
}
.os-clock-dial {
  fill:oklch(100% 0 0 / .5);
  stroke:oklch(50% .02 255 / .35);
  stroke-width:1.5
}
:root[data-theme="night"] .os-clock-dial {
  fill:oklch(18% .012 255 / .8);
  stroke:oklch(80% .01 255 / .3)
}
.os-clock-ticks line {
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  opacity:.55
}
.os-clock-hour,.os-clock-minute {
  stroke:currentColor;
  stroke-width:4;
  stroke-linecap:round
}
.os-clock-minute {
  stroke-width:3
}
.os-clock-pin {
  fill:#ff7a45
}
.os-widget-caption {
  margin-top:auto;
  font-weight:600;
  letter-spacing:.01em
}
.os-widget-weather {
  background:var(--os-weather);
  color:#fff;
  text-shadow:0 1px 2px #0004
}
.os-widget-city {
  font-weight:600
}
.os-widget-main {
  margin-top:2px;
  font-size:26px;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.02em
}
.os-widget-main.is-text {
  font-size:15px;
  font-weight:600;
  line-height:1.2;
  margin-top:6px
}
.os-widget-condition {
  margin-top:2px;
  opacity:.95
}
.os-widget-period {
  margin-top:auto;
  font-size:10px;
  opacity:.8
}

/* Spotlight-style search over the desktop. */
.os-spotlight {
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:11%;
  background:oklch(8% .02 255 / .18)
}
.os-spotlight-box {
  width:min(92%,540px);
  max-height:80%;
  display:flex;
  flex-direction:column;
  border:1px solid var(--os-menu-line);
  border-radius:14px;
  background:var(--os-menu);
  color:var(--os-text);
  box-shadow:0 24px 60px oklch(8% .03 255 / .45);
  backdrop-filter:blur(30px);
  overflow:hidden
}
.os-spotlight-field {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  color:var(--os-muted)
}
.os-spotlight-field input {
  flex:1;
  min-width:0;
  border:0;
  padding:4px 0;
  background:transparent;
  color:var(--os-text);
  font:inherit;
  font-size:19px;
  outline:none
}
.os-spotlight-field input::placeholder {
  color:var(--os-muted)
}
#os-spotlight-results {
  list-style:none;
  margin:0;
  padding:0 6px 6px;
  overflow:auto;
  border-top:1px solid var(--os-rule)
}
#os-spotlight-results:empty {
  display:none
}
#os-spotlight-results li {
  display:grid;
  grid-template-columns:82px 1fr;
  column-gap:10px;
  align-items:baseline;
  padding:6px 10px;
  border-radius:7px;
  font-size:13px;
  cursor:default
}
#os-spotlight-results li[aria-selected=true],#os-spotlight-results li:hover {
  background:oklch(57% .19 253);
  color:#fff
}
.os-spotlight-kind {
  font-size:11px;
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.06em
}
.os-spotlight-hint {
  grid-column:2;
  font-size:11px;
  opacity:.75;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.os-spotlight-empty {
  margin:0;
  padding:10px 16px 14px;
  border-top:1px solid var(--os-rule);
  color:var(--os-muted);
  font-size:13px
}

/* A way home at the left end of the dock. */
.os-desk-icon {
  background:linear-gradient(#f4f1ea,#d9d2c4)
}
.os-dock-divider {
  align-self:center;
  width:1px;
  height:40px;
  margin:0 2px;
  background:oklch(30% .02 255 / .25)
}
@container monitor (max-width:620px) {
  .os-widgets {display:none}
  .os-status-glyph {display:none}
}
@container monitor (max-height:420px) {
  .os-widgets {display:none}
  .os-dock-divider {height:26px}
  .os-spotlight {padding-top:5%}
  .os-spotlight-field input {font-size:16px}
}
@container monitor (max-height:240px) {
  .os-dock .os-dock-desk,.os-dock-divider {display:none}
  #os-spotlight-open {display:none}
  .os-spotlight {padding-top:2%}
  .os-spotlight-box {max-height:94%;border-radius:8px}
  .os-spotlight-field {padding:6px 10px}
  .os-spotlight-field input {font-size:14px}
  #os-spotlight-results li {grid-template-columns:1fr;padding:4px 8px}
  .os-spotlight-kind,.os-spotlight-hint {display:none}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .os-widget,.os-spotlight-box {backdrop-filter:none}
  .os-widget {background:var(--os-window)}
  .os-spotlight-box {background:var(--os-window)}
}

/* Windows: the front one has coloured lights; the rest sit back. */
.os-window:not(.is-active) .os-traffic-lights button::before {
  background:oklch(84% .008 255)
}
:root[data-theme="night"] .os-window:not(.is-active) .os-traffic-lights button::before {
  background:oklch(46% .008 255)
}
.os-window:not(.is-active) .os-titlebar h2,.os-window:not(.is-active) .os-address {
  opacity:.65
}

/* Resize handles sit just inside the frame; the corners are larger targets. */
.os-resize {
  position:absolute;
  z-index:3;
  touch-action:none
}
.os-resize[data-edge=n] {top:0;left:14px;right:14px;height:6px;cursor:ns-resize}
.os-resize[data-edge=s] {bottom:0;left:14px;right:14px;height:6px;cursor:ns-resize}
.os-resize[data-edge=e] {top:14px;bottom:14px;right:0;width:6px;cursor:ew-resize}
.os-resize[data-edge=w] {top:14px;bottom:14px;left:0;width:6px;cursor:ew-resize}
.os-resize[data-edge=ne] {top:0;right:0;width:14px;height:14px;cursor:nesw-resize}
.os-resize[data-edge=sw] {bottom:0;left:0;width:14px;height:14px;cursor:nesw-resize}
.os-resize[data-edge=nw] {top:0;left:0;width:14px;height:14px;cursor:nwse-resize}
.os-resize[data-edge=se] {bottom:0;right:0;width:14px;height:14px;cursor:nwse-resize}
.os-window.is-maximized .os-resize {
  display:none
}
.os-desktop.is-manipulating {
  user-select:none
}
.os-desktop.is-manipulating,.os-desktop.is-manipulating * {
  cursor:var(--os-drag-cursor,grabbing)!important
}
.os-desktop.is-manipulating iframe {
  pointer-events:none
}

/* Safari: the two profiles the résumé already links to, drawn from the same copy. */
.os-browser-bar {
  gap:10px
}
.os-browser-nav {
  display:flex;
  gap:2px;
  color:var(--os-muted);
  font-size:20px;
  line-height:1;
  opacity:.5
}
.os-browser-nav span {
  width:22px;
  text-align:center
}
.os-address {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:28px;
  padding:0 12px;
  border-radius:7px;
  background:oklch(50% .02 255 / .12);
  color:var(--os-muted);
  font-size:12.5px;
  text-decoration:none;
  white-space:nowrap
}
.os-address:hover {
  background:oklch(50% .02 255 / .2)
}
.os-address-text {
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--os-text)
}
.os-address-hint {
  opacity:.6
}
.os-browser {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  min-height:0
}
.os-tabs {
  display:flex;
  gap:6px;
  padding:6px 8px;
  background:var(--os-titlebar);
  border-bottom:1px solid var(--os-titlebar-line)
}
.os-tabs [role=tab] {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:28px;
  padding:0 10px;
  border-radius:7px;
  font-size:12.5px;
  color:var(--os-muted)
}
.os-tabs [role=tab]:hover {
  background:oklch(50% .02 255 / .1)
}
.os-tabs [role=tab][aria-selected=true] {
  background:var(--os-window);
  color:var(--os-text);
  box-shadow:0 1px 3px oklch(8% .03 255 / .14)
}
.os-tab-title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.os-tab-favicon {
  flex:none;
  width:10px;
  height:10px;
  border-radius:50%
}
.os-favicon-linkedin {
  background:oklch(55% .17 255)
}
.os-favicon-github {
  background:oklch(28% .01 255)
}
:root[data-theme="night"] .os-favicon-github {
  background:oklch(88% .01 255)
}
.os-web {
  overflow:auto;
  overscroll-behavior:contain;
  background:oklch(94% .006 255);
  color:var(--os-text);
  font-size:14px;
  line-height:1.5
}
:root[data-theme="night"] .os-web {
  background:oklch(19% .012 255)
}
.os-web:focus-visible,.os-note:focus-visible {
  outline-offset:-4px!important
}
.os-web-page {
  max-width:720px;
  margin:0 auto;
  padding:18px 18px 28px
}
.os-profile-banner {
  height:78px;
  border-radius:12px 12px 0 0;
  background:linear-gradient(120deg,oklch(62% .12 230),oklch(72% .1 195))
}
.os-profile-head {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px 18px 18px;
  background:var(--os-window);
  border:1px solid var(--os-rule);
  border-radius:0 0 12px 12px
}
.os-web-github .os-profile-head {
  border-radius:12px
}
.os-avatar {
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background:linear-gradient(150deg,oklch(48% .09 255),oklch(30% .05 255));
  color:#fff;
  font-weight:700;
  font-size:22px;
  letter-spacing:.02em
}
.os-web-linkedin .os-avatar {
  margin-top:-50px;
  border:3px solid var(--os-window)
}
.os-avatar-github {
  background:linear-gradient(150deg,oklch(60% .13 30),oklch(42% .1 300))
}
.os-profile-text h1 {
  margin:0;
  font-size:20px;
  line-height:1.2
}
.os-profile-headline {
  margin:2px 0 0;
  font-size:14px
}
.os-profile-meta {
  margin:2px 0 0;
  font-size:12px;
  color:var(--os-muted)
}
.os-web-cta {
  align-self:center;
  padding:7px 14px;
  border-radius:999px;
  background:oklch(50% .16 255);
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap
}
.os-web-cta:hover {
  background:oklch(44% .16 255)
}
.os-web-card {
  margin-top:14px;
  padding:4px 18px 8px;
  background:var(--os-window);
  border:1px solid var(--os-rule);
  border-radius:12px
}
.os-web-card h2 {
  margin:12px 0 0;
  font-size:16px
}
.os-web .os-job {
  padding:16px 0
}
.os-web .os-job h3 {
  margin:2px 0;
  font-size:15px
}
.os-web .os-job-date {
  margin:0;
  font-size:12px;
  color:var(--os-muted)
}
.os-web .os-role {
  margin:0 0 8px;
  font-size:13px;
  color:var(--os-muted-2)
}
.os-web .os-job p:last-child {
  font-size:13.5px
}
.os-web .os-education {
  padding:12px 0;
  border-bottom:1px solid var(--os-rule)
}
.os-web .os-education:last-child {
  border:0
}
.os-repo {
  padding:12px 0 8px
}
.os-repo h3 {
  margin:0 0 4px;
  font-size:15px
}
.os-repo h3 a {
  color:var(--os-link);
  text-decoration:none
}
.os-repo h3 a:hover {
  text-decoration:underline
}
.os-repo p {
  margin:0 0 8px;
  font-size:13.5px
}
.os-repo-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 6px;
  font-size:12px;
  color:var(--os-muted)
}
.os-repo-meta span {
  white-space:nowrap
}
.os-lang {
  width:10px;
  height:10px;
  border-radius:50%;
  background:#f05138
}

/* Preview: the résumé PDF, loaded when the window first opens. */
.os-pdf-frame {
  min-height:0;
  background:oklch(56% .01 255)
}
:root[data-theme="night"] .os-pdf-frame {
  background:oklch(22% .01 255)
}
.os-pdf {
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:transparent
}
.os-pdf-actions a {
  margin-left:12px;
  color:var(--os-link);
  text-decoration:none
}
.os-pdf-actions a:hover {
  text-decoration:underline
}

/* Notes: two short notes about the site itself. */
.os-notes-layout {
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  min-height:0
}
.os-notes-list {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 8px;
  background:var(--os-sidebar);
  border-right:1px solid var(--os-sidebar-line);
  overflow:auto
}
.os-notes-list button {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0;
  padding:9px 10px;
  border-radius:8px;
  text-align:left
}
.os-notes-list button strong {
  font-size:13px
}
.os-notes-list button span {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color:var(--os-muted)
}
.os-notes-list button:hover {
  background:var(--os-sidebar-hover)
}
.os-notes-list button[aria-pressed=true] {
  background:oklch(86% .12 90 / .6)
}
:root[data-theme="night"] .os-notes-list button[aria-pressed=true] {
  background:oklch(62% .12 90 / .32)
}
.os-note {
  overflow:auto;
  overscroll-behavior:contain;
  padding:22px 28px 30px;
  background:var(--os-content);
  font-size:14.5px;
  line-height:1.6
}
.os-note h1 {
  margin:0 0 12px;
  font-size:20px
}
.os-note p {
  margin:0 0 10px
}

/* Mail: a compose window that hands the draft to the visitor's own mail app. */
.os-compose {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  min-height:0;
  margin:0;
  background:var(--os-content)
}
.os-compose-fields {
  padding:4px 16px 0;
  border-bottom:1px solid var(--os-rule)
}
.os-field {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:32px;
  border-bottom:1px solid var(--os-rule);
  font-size:13.5px
}
.os-field:last-child {
  border-bottom:0
}
.os-field-label {
  flex:none;
  width:62px;
  color:var(--os-muted);
  text-align:right
}
.os-recipient {
  display:inline-block;
  padding:2px 9px;
  border-radius:999px;
  background:oklch(57% .19 253 / .16);
  color:var(--os-text);
  font-size:13px
}
.os-field input {
  flex:1;
  min-width:0;
  padding:4px 0;
  border:0;
  background:transparent;
  color:var(--os-text);
  font:inherit;
  outline:none
}
#os-mail-body {
  display:block;
  box-sizing:border-box;
  width:100%;
  min-height:0;
  padding:14px 16px;
  border:0;
  resize:none;
  background:transparent;
  color:var(--os-text);
  font:inherit;
  font-size:14px;
  line-height:1.55;
  outline:none
}
.os-compose-actions {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border-top:1px solid var(--os-rule)
}
.os-desktop .os-send {
  padding:6px 16px;
  border-radius:999px;
  background:oklch(57% .19 253);
  color:#fff;
  font-weight:600
}
.os-desktop .os-send:hover {
  background:oklch(50% .19 253)
}
.os-compose-hint {
  font-size:12px;
  color:var(--os-muted)
}

@container monitor (max-width:620px) {
  .os-resize,.os-browser-nav {display:none}
  .os-address {padding:0 8px;font-size:12px}
  .os-web-page {padding:12px 12px 20px}
  .os-profile-head {grid-template-columns:auto minmax(0,1fr);padding:12px 14px 14px}
  .os-web-cta {grid-column:1/-1;justify-self:start}
  .os-notes-layout {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .os-notes-list {flex-direction:row;padding:6px 8px;border-right:0;border-bottom:1px solid var(--os-sidebar-line)}
  .os-notes-list button {flex:1}
  .os-notes-list button span {display:none}
  .os-note {padding:16px 18px 24px}
  .os-field-label {width:52px}
}
@container monitor (max-width:400px) {
  .os-tab-title {font-size:11px}
  .os-compose-hint {display:none}
}
@container monitor (max-height:420px) {
  .os-resize {display:none}
  .os-notes-layout {grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .os-notes-list {flex-direction:row;padding:4px 6px;border-right:0;border-bottom:1px solid var(--os-sidebar-line)}
  .os-notes-list button {flex:1;padding:5px 8px}
  .os-notes-list button span {display:none}
  .os-note {padding:12px 16px 20px}
  .os-tabs {padding:4px 6px}
  .os-tabs [role=tab] {height:24px;font-size:12px}
  .os-web-page {padding:10px 12px 16px}
  .os-profile-banner {height:44px}
  .os-web-linkedin .os-avatar {margin-top:-30px}
  .os-avatar {width:56px;height:56px;font-size:17px}
  .os-compose-fields {padding-inline:12px}
  .os-field {min-height:28px}
  .os-compose-actions {padding:6px 12px}
}
@container monitor (max-height:240px) {
  .os-tabs {padding:2px 4px;gap:4px}
  .os-tabs [role=tab] {height:22px;font-size:11px;padding:0 6px}
  .os-profile-banner {display:none}
  .os-web-linkedin .os-avatar {margin-top:0}
  .os-profile-head {border-radius:8px;padding:8px 10px}
  .os-avatar {width:36px;height:36px;font-size:13px}
  .os-profile-text h1 {font-size:15px}
  .os-web-card {margin-top:8px;padding:2px 10px 6px}
  .os-notes-list button {padding:2px 8px}
  .os-notes-list button strong {font-size:12px}
  .os-note {padding:8px 12px 14px;font-size:13px}
  .os-note h1 {font-size:15px;margin-bottom:6px}
  .os-compose-fields {padding-inline:8px}
  .os-field {min-height:22px;font-size:12px}
  .os-field-label {width:48px}
  .os-recipient {padding:0 7px;font-size:12px}
  #os-mail-body {padding:8px}
  .os-compose-actions {padding:4px 8px}
  .os-desktop .os-send {padding:3px 12px;font-size:12px}
}

/* Fill the window: the screen leaves the monitor and takes the whole viewport. */
#os-fill[aria-pressed=true] .os-fill-out,#os-fill[aria-pressed=false] .os-fill-in {
  display:none
}
[role=menuitemcheckbox][aria-checked=true]::before {
  content:"✓"
}

/* GitHub, live from the API when it answers. */
.os-avatar-image {
  display:block;
  object-fit:cover;
  background:oklch(80% .01 255)
}
.os-web-stats {
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  margin:0;
  padding:10px 2px 0;
  font-size:12.5px;
  color:var(--os-muted)
}
.os-web-stats strong {
  color:var(--os-text);
  font-weight:600
}
.os-repo-home {
  color:var(--os-link);
  text-decoration:none
}
.os-repo-home:hover {
  text-decoration:underline
}
.os-repo-meta span+span::before {
  content:"·";
  margin:0 6px 0 2px;
  color:var(--os-muted)
}
.os-repo-meta .os-lang+span::before {
  content:none
}
.os-web-source {
  margin:10px 0 4px;
  font-size:11.5px;
  color:var(--os-muted)
}