@charset "UTF-8";/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
    --width-window-xs: 220px;
    --width-window-sm: 332px;
    --width-window-md: 550px;
  }
}

@layer base, components;

@layer utilities {
  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .static {
    position: static;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .size-min {
    width: min-content;
    height: min-content;
  }

  .w-window-md {
    width: var(--width-window-md);
  }

  .w-window-sm {
    width: var(--width-window-sm);
  }

  .w-window-xs {
    width: var(--width-window-xs);
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }
}

:root {
  --text-color: #222;
  --surface: silver;
  --button-highlight: #fff;
  --button-face: #dfdfdf;
  --button-shadow: gray;
  --window-frame: #0a0a0a;
  --dialog-blue: navy;
  --dialog-blue-light: #1084d0;
  --dialog-gray: gray;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #00f;
  --desktop: #008284;
  --font-chrome: "WebHemi Sans Serif", "Segoe UI", Tahoma, sans-serif;
  --font-size-chrome: 12px;
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --checkbox-total-width-precalc: var(--checkbox-width) + var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 7px;
  --checkmark-left: 3px;
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);
  --default-button-border-raised-outer: inset -2px -2px var(--window-frame),
    inset 1px 1px var(--window-frame);
  --default-button-border-raised-inner: inset 2px 2px var(--button-highlight),
    inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
  --default-button-border-sunken-outer: inset 2px 2px var(--window-frame),
    inset -1px -1px var(--window-frame);
  --default-button-border-sunken-inner: inset -2px -2px var(--button-highlight),
    inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);
  --border-window-outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);
  --border-field: inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow),
    inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);
  --border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
  --border-tab: inset -1px 0 var(--window-frame), inset 1px 1px var(--button-face),
    inset -2px 0 var(--button-shadow), inset 2px 2px var(--button-highlight);
  --width-window-2xs: 175px;
  --width-window-xs: 220px;
  --width-window-sm: 332px;
  --width-window-md: 550px;
  --width-window-lg: 750px;
  --width-window-xl: 1024px;
  --max-height-window-sm: 240px;
  --max-height-window-md: 250px;
  --max-height-window-lg: 500px;
  --min-height-window-md: 500px;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/*
 * Owned Win98 chrome entry (ported from 98.css).
 * Imported from main.js so Vite Sass compiles @use before CSS reaches Tailwind.
 * Tokens: abstract/tokens.css (loaded from main.css).
 */
body {
  font-family: var(--font-chrome);
  font-size: var(--font-size-chrome);
  color: var(--text-color);
}

button,
label,
input,
legend,
textarea,
select,
option,
table,
ul.tree-view,
.window,
.title-bar,
li[role=tab] {
  font-family: var(--font-chrome);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--font-size-chrome);
}

h1 {
  font-size: 5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

u {
  text-decoration: none;
  border-bottom: 0.5px solid #222222;
}

button,
input[type=submit],
input[type=reset] {
  box-sizing: border-box;
  border: none;
  color: transparent;
  text-shadow: 0 0 var(--text-color);
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  border-radius: 0;
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
}

button.default,
input[type=submit].default,
input[type=reset].default {
  box-shadow: var(--default-button-border-raised-outer), var(--default-button-border-raised-inner);
}

.vertical-bar {
  width: 4px;
  height: 20px;
  background: var(--surface);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

button:not(:disabled):active,
input[type=submit]:not(:disabled):active,
input[type=reset]:not(:disabled):active {
  box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  text-shadow: 1px 1px var(--text-color);
}

button.default:not(:disabled):active,
input[type=submit].default:not(:disabled):active,
input[type=reset].default:not(:disabled):active {
  box-shadow: var(--default-button-border-sunken-outer), var(--default-button-border-sunken-inner);
}

/* Sass cannot parse `@media (not(hover))`; use Level 4 `not (hover)` with a space. */
@media not (hover) {
  button:not(:disabled):hover,
  input[type=submit]:not(:disabled):hover,
  input[type=reset]:not(:disabled):hover {
    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  }
}
button:focus,
input[type=submit]:focus,
input[type=reset]:focus {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}

button::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner {
  border: 0;
}

:disabled,
:disabled + label,
input[readonly],
input[readonly] + label {
  color: var(--button-shadow);
}

/* Must beat `input[type=submit|reset] { color: transparent }` (higher specificity). */
button:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled,
:disabled + label {
  color: var(--button-shadow);
  text-shadow: 1px 1px 0 var(--button-highlight);
}

.window {
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 3px;
}

.title-bar {
  background: linear-gradient(90deg, var(--dialog-blue), var(--dialog-blue-light));
  padding: 3px 2px 3px 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-bar.inactive {
  background: linear-gradient(90deg, var(--dialog-gray), var(--dialog-gray-light));
}

.title-bar-text {
  font-weight: bold;
  color: white;
  letter-spacing: 0;
  margin-right: 24px;
}

.title-bar-controls {
  display: flex;
}

.title-bar-controls button {
  padding: 0;
  display: block;
  min-width: 16px;
  min-height: 14px;
}

.title-bar-controls button:active {
  padding: 0;
}

.title-bar-controls button:focus {
  outline: none;
}

.title-bar-controls button[aria-label=Minimize],
.title-bar-controls button[aria-label].minimize {
  background-image: url("data:image/svg+xml,%3csvg%20width='6'%20height='2'%20viewBox='0%200%206%202'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='6'%20height='2'%20fill='black'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: bottom 3px left 4px;
}

.title-bar-controls button[aria-label=Maximize],
.title-bar-controls button[aria-label].maximize {
  background-image: url("data:image/svg+xml,%3csvg%20width='9'%20height='9'%20viewBox='0%200%209%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%200H0V2V8V9H1H8H9V8V2V0ZM8%202H1V8H8V2Z'%20fill='black'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label=Maximize]:disabled,
.title-bar-controls button[aria-label].maximize:disabled {
  background-image: url("data:image/svg+xml,%3csvg%20width='10'%20height='10'%20viewBox='0%200%2010%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M10%201H1V3V9V10H2H9H10V9V3V1ZM9%203H2V9H9V3Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%200H0V2V8V9H1H8H9V8V2V0ZM8%202H1V8H8V2Z'%20fill='%23808080'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label=Restore],
.title-bar-controls button[aria-label].restore {
  background-image: url("data:image/svg+xml,%3csvg%20width='8'%20height='9'%20viewBox='0%200%208%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='2'%20width='6'%20height='2'%20fill='black'/%3e%3crect%20x='7'%20y='2'%20width='1'%20height='4'%20fill='black'/%3e%3crect%20x='2'%20y='2'%20width='1'%20height='1'%20fill='black'/%3e%3crect%20x='6'%20y='5'%20width='1'%20height='1'%20fill='black'/%3e%3crect%20y='3'%20width='6'%20height='2'%20fill='black'/%3e%3crect%20x='5'%20y='5'%20width='1'%20height='4'%20fill='black'/%3e%3crect%20y='5'%20width='1'%20height='4'%20fill='black'/%3e%3crect%20x='1'%20y='8'%20width='4'%20height='1'%20fill='black'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: top 2px left 3px;
}

.title-bar-controls button[aria-label=Help],
.title-bar-controls button[aria-label].help {
  background-image: url("data:image/svg+xml,%3csvg%20width='6'%20height='9'%20viewBox='0%200%206%209'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20y='1'%20width='2'%20height='2'%20fill='black'/%3e%3crect%20x='1'%20width='4'%20height='1'%20fill='black'/%3e%3crect%20x='4'%20y='1'%20width='2'%20height='2'%20fill='black'/%3e%3crect%20x='3'%20y='3'%20width='2'%20height='1'%20fill='black'/%3e%3crect%20x='2'%20y='4'%20width='2'%20height='2'%20fill='black'/%3e%3crect%20x='2'%20y='7'%20width='2'%20height='2'%20fill='black'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: top 2px left 5px;
}

.title-bar-controls button[aria-label=Close],
.title-bar-controls button[aria-label].close {
  margin-left: 2px;
  background-image: url("data:image/svg+xml,%3csvg%20width='8'%20height='7'%20viewBox='0%200%208%207'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%200H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z'%20fill='black'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: top 3px left 4px;
}

.status-bar {
  margin: 0px 1px;
  display: flex;
  gap: 1px;
}

.status-bar-field {
  box-shadow: var(--border-status-field);
  flex-grow: 1;
  padding: 2px 3px;
  margin: 0;
}

.window-body {
  margin: var(--element-spacing);
}

fieldset {
  border-image: url("data:image/svg+xml,%3csvg%20width='5'%20height='5'%20viewBox='0%200%205%205'%20fill='grey'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%200H5V5H0V2H2V3H3V2H0'%20fill='white'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%200H4V4H0V1H1V3H3V1H0'%20fill='%23808080'%20/%3e%3c/svg%3e") 2;
  padding: calc(2 * var(--border-width) + var(--element-spacing));
  padding-block-start: var(--element-spacing);
  margin: 0;
}

legend {
  background: var(--surface);
}

.field-row {
  display: flex;
  align-items: center;
}

[class^=field-row] + [class^=field-row] {
  margin-top: var(--grouped-element-spacing);
}

.field-row > * + * {
  margin-left: var(--grouped-element-spacing);
}

.field-row-stacked {
  display: flex;
  flex-direction: column;
}

.field-row-stacked * + * {
  margin-top: var(--grouped-element-spacing);
}

label {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

input[type=radio],
input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  background: 0;
  position: fixed;
  opacity: 0;
  border: none;
}

input[type=radio] + label,
input[type=checkbox] + label {
  line-height: 13px;
}

input[type=radio] + label {
  position: relative;
  margin-left: var(--radio-total-width);
}

input[type=radio] + label::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(-1 * (var(--radio-total-width-precalc)));
  display: inline-block;
  width: var(--radio-width);
  height: var(--radio-width);
  margin-right: var(--radio-label-spacing);
  background: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z'%20fill='%23808080'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%201H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%203H10V4H9V3ZM10%208V4H11V8H10ZM8%2010V9H9V8H10V9V10H8ZM4%2010V11H8V10H4ZM4%2010V9H2V10H4Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%202H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M4%202H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z'%20fill='white'/%3e%3c/svg%3e");
}

input[type=radio]:active + label::before {
  background: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z'%20fill='%23808080'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%201H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%203H10V4H9V3ZM10%208V4H11V8H10ZM8%2010V9H9V8H10V9V10H8ZM4%2010V11H8V10H4ZM4%2010V9H2V10H4Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%202H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M4%202H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z'%20fill='%23C0C0C0'/%3e%3c/svg%3e");
}

input[type=radio]:checked + label::after {
  content: "";
  display: block;
  width: var(--radio-dot-width);
  height: var(--radio-dot-width);
  top: var(--radio-dot-top);
  left: var(--radio-dot-left);
  position: absolute;
  background: url("data:image/svg+xml,%3csvg%20width='4'%20height='4'%20viewBox='0%200%204%204'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3%200H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z'%20fill='black'/%3e%3c/svg%3e");
}

input[type=radio]:focus + label,
input[type=checkbox]:focus + label {
  outline: 1px dotted #000000;
}

input[type=radio][disabled] + label::before {
  background: url("data:image/svg+xml,%3csvg%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%200H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z'%20fill='%23808080'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%201H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%203H10V4H9V3ZM10%208V4H11V8H10ZM8%2010V9H9V8H10V9V10H8ZM4%2010V11H8V10H4ZM4%2010V9H2V10H4Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%202H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M4%202H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z'%20fill='%23C0C0C0'/%3e%3c/svg%3e");
}

input[type=radio][disabled]:checked + label::after {
  background: url("data:image/svg+xml,%3csvg%20width='4'%20height='4'%20viewBox='0%200%204%204'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3%200H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z'%20fill='%23808080'/%3e%3c/svg%3e");
}

input[type=checkbox] + label {
  position: relative;
  margin-left: var(--checkbox-total-width);
}

input[type=checkbox] + label::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--checkbox-total-width-precalc)));
  display: inline-block;
  width: var(--checkbox-width);
  height: var(--checkbox-width);
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  margin-right: var(--radio-label-spacing);
}

input[type=checkbox]:active + label::before {
  background: var(--surface);
}

input[type=checkbox]:checked + label::after {
  content: "";
  display: block;
  width: var(--checkmark-width);
  height: var(--checkmark-width);
  position: absolute;
  left: calc(-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left));
  background: url("data:image/svg+xml,%3csvg%20width='7'%20height='7'%20viewBox='0%200%207%207'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7%200H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z'%20fill='black'/%3e%3c/svg%3e");
}

input[type=checkbox][disabled] + label::before {
  background: var(--surface);
}

input[type=checkbox][disabled]:checked + label::after {
  background: url("data:image/svg+xml,%3csvg%20width='7'%20height='7'%20viewBox='0%200%207%207'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7%200H6V1H5V2H4V3H3V4H2V3H1V2H0V5H1V6H2V7H3V6H4V5H5V4H6V3H7V0Z'%20fill='%23808080'/%3e%3c/svg%3e");
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=search],
select,
textarea {
  padding: 3px 4px;
  border: none;
  box-shadow: var(--border-field);
  background-color: var(--button-highlight);
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=tel],
input[type=search],
select {
  height: 21px;
}

input[type=number] {
  /* need this 1 pixel to fit the spinner controls in box */
  height: 22px;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* clears the ‘X’ from Chrome */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=search] {
  /* For some reason descenders are getting cut off without this */
  line-height: 2;
}

input[type=email]:disabled,
input[type=url]:disabled,
input[type=tel]:disabled,
input[type=password]:disabled,
input[type=text]:disabled,
input[type=number]:disabled,
input[type=search]:disabled,
input[type=email]:read-only,
input[type=url]:read-only,
input[type=tel]:read-only,
input[type=password]:read-only,
input[type=text]:read-only,
input[type=number]:read-only,
input[type=search]:read-only,
textarea:disabled {
  background-color: var(--surface);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  padding-right: 32px;
  background-color: var(--button-highlight);
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0V1V16H1V1H15V0Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1V15H2V2H14V1H2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H15H0V16H15V0H16V17Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201H14V15H1V16H14H15V1Z'%20fill='%23808080'/%3e%3crect%20x='2'%20y='2'%20width='12'%20height='13'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%206H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z'%20fill='black'/%3e%3c/svg%3e");
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
  border-radius: 0;
  /* Prefer a light OS popup when the closed control is navy (Firefox). */
  color-scheme: light;
}

/* Classic <option> popup: browsers that honor these (and Firefox with light scheme). */
select option {
  background-color: var(--button-highlight);
  color: var(--text-color);
}

select option:disabled {
  color: var(--button-shadow);
}

select:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=search]:focus,
textarea:focus {
  outline: none;
}

select:focus {
  color: var(--button-highlight);
  background-color: var(--dialog-blue);
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0V1V16H1V1H15V0Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1V15H2V2H14V1H2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H15H0V16H15V0H16V17Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201H14V15H1V16H14H15V1Z'%20fill='%23808080'/%3e%3crect%20x='2'%20y='2'%20width='12'%20height='13'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%206H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z'%20fill='black'/%3e%3c/svg%3e");
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
}

select:focus option {
  color: var(--text-color);
  background-color: var(--button-highlight);
}

/*
 * While the list is open, keep the closed control light so Firefox does not
 * infer a dark OS popup from the navy focus face (see Firefox bug 1825958).
 * Win98 list itself is white; navy highlight is on the selected row.
 */
select:open {
  color: var(--text-color);
  background-color: var(--button-highlight);
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0V1V16H1V1H15V0Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1V15H2V2H14V1H2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H15H0V16H15V0H16V17Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201H14V15H1V16H14H15V1Z'%20fill='%23808080'/%3e%3crect%20x='2'%20y='2'%20width='12'%20height='13'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%206H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z'%20fill='black'/%3e%3c/svg%3e");
  background-position: top 2px right 2px;
  background-repeat: no-repeat;
}

select:active {
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%200H15H16V17H15H0V16V1V0ZM1%2016H15V1H1V16Z'%20fill='%23808080'/%3e%3crect%20x='1'%20y='1'%20width='14'%20height='15'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12%207H5V8H6V9H7V10H8V11H9V10H10V9H11V8H12V7Z'%20fill='black'/%3e%3c/svg%3e");
}

/*
 * Customizable select (Chromium / supporting engines): style the real picker
 * instead of the OS menu. Progressive enhancement — classic path above remains.
 */
@supports (appearance: base-select) {
  select,
  ::picker(select) {
    appearance: base-select;
  }
  select::picker-icon {
    display: none;
  }
  ::picker(select) {
    border: none;
    border-radius: 0;
    padding: 0;
    color: var(--text-color);
    background: var(--button-highlight);
    box-shadow: var(--border-field);
    color-scheme: light;
  }
  select option {
    padding: 1px 4px;
    font-family: var(--font-chrome);
    font-size: var(--font-size-chrome);
    background: var(--button-highlight);
    color: var(--text-color);
  }
  select option:checked,
  select option:hover {
    background: var(--dialog-blue);
    color: var(--button-highlight);
  }
  select option::checkmark {
    display: none;
  }
}
a {
  color: var(--link-blue);
}

a:focus {
  outline: 1px dotted var(--link-blue);
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 21px;
  width: 11px;
  background: url("data:image/svg+xml,%3csvg%20width='11'%20height='21'%20viewBox='0%200%2011%2021'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%200V16H2V18H4V20H5V19H3V17H1V1H10V0Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M1%201V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z'%20fill='%23C0C7C8'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%201H10V16H8V18H6V20H5V19H7V17H9Z'%20fill='%2387888F'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M10%200H11V16H9V18H7V20H5V21H6V19H8V17H10Z'%20fill='black'/%3e%3c/svg%3e");
  transform: translateY(-8px);
  box-shadow: none;
  border: none;
}

input[type=range].has-box-indicator::-webkit-slider-thumb {
  background: url("data:image/svg+xml,%3csvg%20width='11'%20height='21'%20viewBox='0%200%2011%2021'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%200V20H1V1H10V0Z'%20fill='white'/%3e%3crect%20x='1'%20y='1'%20width='8'%20height='18'%20fill='%23C0C7C8'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%201H10V20H1V19H9Z'%20fill='%2387888F'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M10%200H11V21H0V20H10Z'%20fill='black'/%3e%3c/svg%3e");
  transform: translateY(-10px);
}

input[type=range]::-moz-range-thumb {
  height: 21px;
  width: 11px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3csvg%20width='11'%20height='21'%20viewBox='0%200%2011%2021'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%200V16H2V18H4V20H5V19H3V17H1V1H10V0Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M1%201V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z'%20fill='%23C0C7C8'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%201H10V16H8V18H6V20H5V19H7V17H9Z'%20fill='%2387888F'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M10%200H11V16H9V18H7V20H5V21H6V19H8V17H10Z'%20fill='black'/%3e%3c/svg%3e");
  transform: translateY(2px);
}

input[type=range].has-box-indicator::-moz-range-thumb {
  background: url("data:image/svg+xml,%3csvg%20width='11'%20height='21'%20viewBox='0%200%2011%2021'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%200V20H1V1H10V0Z'%20fill='white'/%3e%3crect%20x='1'%20y='1'%20width='8'%20height='18'%20fill='%23C0C7C8'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%201H10V20H1V19H9Z'%20fill='%2387888F'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M10%200H11V21H0V20H10Z'%20fill='black'/%3e%3c/svg%3e");
  transform: translateY(0px);
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  box-sizing: border-box;
  background: black;
  border-right: 1px solid grey;
  border-bottom: 1px solid grey;
  box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey, 0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;
}

.is-vertical {
  display: inline-block;
  width: 4px;
  height: 150px;
  transform: translateY(50%);
}

.is-vertical > input[type=range] {
  width: 150px;
  height: 4px;
  margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);
  transform-origin: left;
  transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));
}

.is-vertical > input[type=range]::-webkit-slider-runnable-track {
  border-left: 1px solid grey;
  border-right: 0;
  border-bottom: 1px solid grey;
  box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, 1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
}

.is-vertical > input[type=range]::-moz-range-track {
  border-left: 1px solid grey;
  border-right: 0;
  border-bottom: 1px solid grey;
  box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, 1px -1px 0 darkgrey, 0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;
}

.is-vertical > input[type=range]::-webkit-slider-thumb {
  transform: translateY(-8px) scaleX(-1);
}

.is-vertical > input[type=range].has-box-indicator::-webkit-slider-thumb {
  transform: translateY(-10px) scaleX(-1);
}

.is-vertical > input[type=range]::-moz-range-thumb {
  transform: translateY(2px) scaleX(-1);
}

.is-vertical > input[type=range].has-box-indicator::-moz-range-thumb {
  transform: translateY(0px) scaleX(-1);
}

ul.tree-view {
  display: block;
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 6px;
  margin: 0;
}

ul.tree-view li {
  list-style-type: none;
}

ul.tree-view a {
  text-decoration: none;
  color: #000;
}

ul.tree-view a:focus {
  background-color: var(--dialog-blue);
  color: var(--button-highlight);
}

ul.tree-view ul,
ul.tree-view li {
  margin-top: 3px;
}

ul.tree-view ul {
  margin-left: 16px;
  padding-left: 16px;
  /* Goes down too far */
  border-left: 1px dotted #808080;
}

ul.tree-view ul > li {
  position: relative;
}

ul.tree-view ul > li::before {
  content: "";
  display: block;
  position: absolute;
  left: -16px;
  top: 6px;
  width: 12px;
  border-bottom: 1px dotted #808080;
}

/* Cover the bottom of the left dotted border */
ul.tree-view ul > li:last-child::after {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 7px;
  bottom: 0px;
  width: 8px;
  background: var(--button-highlight);
}

ul.tree-view details {
  margin-top: 0;
}

ul.tree-view details[open] summary {
  margin-bottom: 0;
}

ul.tree-view ul details > summary:before {
  margin-left: -22px;
  position: relative;
  z-index: 1;
}

ul.tree-view details > summary:before {
  text-align: center;
  display: block;
  float: left;
  content: "+";
  border: 1px solid #808080;
  width: 8px;
  height: 9px;
  line-height: 8px;
  margin-right: 5px;
  padding-left: 1px;
  background-color: #fff;
}

ul.tree-view details[open] > summary:before {
  content: "-";
}

ul.tree-view details > summary::marker,
ul.tree-view details > summary::-webkit-details-marker {
  content: "";
}

pre {
  display: block;
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 12px 8px;
  margin: 0;
}

code,
code * {
  font-family: monospace;
}

summary:focus {
  outline: 1px dotted #000000;
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar:horizontal {
  height: 17px;
}

::-webkit-scrollbar-corner {
  background: var(--button-face);
}

::-webkit-scrollbar-track {
  background-image: url("data:image/svg+xml,%3csvg%20width='2'%20height='2'%20viewBox='0%200%202%202'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M1%200H0V1H1V2H2V1H1V0Z'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%200H1V1H0V2H1V1H2V0Z'%20fill='white'/%3e%3c/svg%3e");
}

::-webkit-scrollbar-thumb {
  background-color: var(--button-face);
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}

::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0V1V16H1V1H15V0Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1V15H2V2H14V1H2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H15H0V16H15V0H16V17Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201H14V15H1V16H14H15V1Z'%20fill='%23808080'/%3e%3crect%20x='2'%20y='2'%20width='12'%20height='13'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%206H7V7H6V8H5V9H4V10H11V9H10V8H9V7H8V6Z'%20fill='black'/%3e%3c/svg%3e");
}

::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0V1V16H1V1H15V0Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1V15H2V2H14V1H2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H15H0V16H15V0H16V17Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201H14V15H1V16H14H15V1Z'%20fill='%23808080'/%3e%3crect%20x='2'%20y='2'%20width='12'%20height='13'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%206H4V7H5V8H6V9H7V10H8V9H9V8H10V7H11V6Z'%20fill='black'/%3e%3c/svg%3e");
}

::-webkit-scrollbar-button:horizontal:start {
  width: 16px;
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0V1V16H1V1H15V0Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1V15H2V2H14V1H2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H15H0V16H15V0H16V17Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201H14V15H1V16H14H15V1Z'%20fill='%23808080'/%3e%3crect%20x='2'%20y='2'%20width='12'%20height='13'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%204H8V5H7V6H6V7H5V8H6V9H7V10H8V11H9V4Z'%20fill='black'/%3e%3c/svg%3e");
}

::-webkit-scrollbar-button:horizontal:end {
  width: 16px;
  background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0V1V16H1V1H15V0Z'%20fill='%23DFDFDF'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1V15H2V2H14V1H2Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H15H0V16H15V0H16V17Z'%20fill='black'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201H14V15H1V16H14H15V1Z'%20fill='%23808080'/%3e%3crect%20x='2'%20y='2'%20width='12'%20height='13'%20fill='%23C0C0C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7%204H6V11H7V10H8V9H9V8H10V7H9V6H8V5H7V4Z'%20fill='black'/%3e%3c/svg%3e");
}

.window[role=tabpanel] {
  position: relative;
  z-index: 2;
}

menu[role=tablist] {
  position: relative;
  margin: 0 0 -2px 0;
  text-indent: 0;
  list-style-type: none;
  display: flex;
  padding-left: 3px;
}

menu[role=tablist] > li {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  box-shadow: var(--border-tab);
  z-index: 1;
}

menu[role=tablist] > li[aria-selected=true] {
  padding-bottom: 2px;
  margin-top: -2px;
  background-color: var(--surface);
  position: relative;
  z-index: 8;
  margin-left: -3px;
}

menu[role=tablist] > li > a {
  display: block;
  color: #222;
  margin: 6px;
  text-decoration: none;
}

menu[role=tablist] > li[aria-selected=true] > a:focus {
  outline: none;
}

menu[role=tablist] > li > a:focus {
  outline: 1px dotted #222;
}

menu[role=tablist].multirows {
  flex-wrap: wrap;
}

menu[role=tablist].multirows > li {
  flex-grow: 1;
  text-align: center;
}

.sunken-panel {
  box-sizing: border-box;
  border: 2px groove transparent;
  border-image: url("data:image/svg+xml,%3csvg%20width='5'%20height='5'%20viewBox='0%200%205%205'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='4'%20height='1'%20x='0'%20y='0'%20fill='%23808080'/%3e%3crect%20width='1'%20height='4'%20x='0'%20y='0'%20fill='%23808080'/%3e%3crect%20width='2'%20height='1'%20x='1'%20y='1'%20fill='%230a0a0a'/%3e%3crect%20width='1'%20height='2'%20x='1'%20y='1'%20fill='%230a0a0a'/%3e%3crect%20width='5'%20height='1'%20x='0'%20y='4'%20fill='%23fff'/%3e%3crect%20width='1'%20height='5'%20x='4'%20y='0'%20fill='%23fff'/%3e%3crect%20width='1'%20height='3'%20x='3'%20y='1'%20fill='%23dfdfdf'/%3e%3crect%20width='3'%20height='1'%20x='1'%20y='3'%20fill='%23dfdfdf'/%3e%3c/svg%3e") 2;
  overflow: auto;
  background-color: #fff;
}

table {
  border-collapse: collapse;
  position: relative;
  text-align: left;
  white-space: nowrap;
  background-color: #fff;
  /* Fill the host (.sunken-panel); columns share extra width proportionally. */
  width: 100%;
}

table > thead > tr > * {
  position: sticky;
  top: 0;
  height: 17px;
  box-shadow: var(--border-raised-outer), var(--border-raised-inner);
  background: var(--surface);
  box-sizing: border-box;
  font-weight: normal;
  padding: 0 var(--grouped-element-spacing);
}

table.interactive > tbody > tr {
  cursor: pointer;
}

table > tbody > tr.highlighted {
  color: #fff;
  background-color: var(--dialog-blue);
}

table > tbody > tr > * {
  padding: 0 var(--grouped-element-spacing);
  height: 14px;
}

.field-border {
  background: var(--button-highlight);
  box-shadow: var(--border-field);
  padding: 2px;
}

.field-border-disabled {
  background: var(--surface);
  box-shadow: var(--border-field);
  padding: 2px;
}

.status-field-border {
  background: var(--surface);
  box-shadow: var(--border-status-field);
  padding: 1px;
}

.progress-indicator {
  height: 32px;
  position: relative;
  box-shadow: var(--border-sunken-inner);
  padding: 4px 4px;
  border: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

.progress-indicator > .progress-indicator-bar {
  height: 100%;
  display: block;
  background-color: var(--dialog-blue);
}

.progress-indicator.segmented > .progress-indicator-bar {
  width: 100%;
  background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
  background-image: linear-gradient(90deg, var(--dialog-blue) 0 16px, transparent 0 2px);
  background-repeat: repeat;
  background-size: 18px 100%;
}
/* Product: document shell, WebHemi face, base focus. */
@font-face {
  font-family: "WebHemi Sans Serif";
  src: url("./WebHemi%20Sans%20Serif-L7aovkyO.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  user-select: none;
}

body.dashboard {
  margin: 0;
  padding: 20px 20px 44px;
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: #008284;
  color: #222;
  font-family: "WebHemi Sans Serif", "Segoe UI", Tahoma, sans-serif;
  /* Pixelated MS Sans was 11px; WebHemi glyphs read ~9–14% shorter at the same size. */
  font-size: 12px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "kern", "liga" 0, "clig" 0;
  scroll-behavior: smooth;
}

/* Chrome control font (WebHemi); size tuned vs classic 11px pixel face. */
.title-bar,
.window,
button,
input,
label,
legend,
li[role=tab],
option,
select,
table,
textarea,
ul.tree-view {
  font-family: "WebHemi Sans Serif", "Segoe UI", Tahoma, sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*:focus {
  outline: none;
}

/* Product: desktop icons. */
/* --- Desktop icons --- */
.dashboard > .icon-list {
  position: static;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.icon {
  width: 90px;
  height: 90px;
  z-index: 0;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Desktop shell icons — 48×48 SVGs in assets/icons/ */
.dashboard > .icon-list > .icon,
.panel.icon-list .icon {
  background-size: 48px 48px;
}

.icon.projects {
  background-image: url("./projects-Bl3ktBrP.svg");
}

.icon.about-me {
  background-image: url("./about-me-BKWIvqla.svg");
}

.icon.contact {
  background-image: url("./contact-CyBIxHB2.svg");
}

.icon.file-pdf {
  background-image: url("./file-pdf-DBoPOWBH.svg");
}

.icon.github {
  background-image: url("./github-CkndLro0.svg");
}

.dashboard [draggable=true],
.dashboard .window.shell-draggable {
  touch-action: none;
}

.dashboard [draggable=true].is-dragging,
.dashboard .window.shell-draggable.is-dragging {
  cursor: move;
}

.icon > a {
  display: block;
  text-align: center;
  color: #ffffff;
  width: 90px;
  padding-top: 50px;
  height: 90px;
  text-decoration: none;
}

.panel.icon-list .icon > a {
  color: #000000;
}

.icon > a > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 88px;
  max-height: 30px; /* 2 × line-height */
  line-height: 15px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.icon > a:focus {
  outline: none !important;
}

.icon > a:focus > span {
  outline: 1px dotted #880000;
  background-color: #000080;
  color: #ffffff;
}

/*.panel.icon-list .icon > a:focus > span {*/
/*  outline: 1px dotted #880000;*/
/*  background-color: #000080;*/
/*  color: #ffffff;*/
/*}*/
.icon.prj-webhemi {
  background-image: url("./prj-webhemi-Cc95q6jm.svg");
}

.icon.prj-snowrunner-tuning-shop {
  background-image: url("./prj-snowrunner-tuning-shop-DGguwCST.png");
}

.icon.prj-pixicon {
  background-image: url("./prj-pixicon-BqKCgOaD.png");
}

.icon.prj-astraeus {
  background-image: url("./prj-astraeus-DFljkciL.svg");
}

/* Product: taskbar, Start menu, task buttons, clock. */
/*
 * Taskbar / Start menu host. Fixed to the desktop bottom edge; not a
 * draggable shell window (see main.js shellWindows filter).
 */
#toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 10000;
  margin: 0;
  box-sizing: border-box;
}

#toolbar > .window-body {
  margin: 3px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
}

#toolbar button.menu {
  background-color: silver;
  background-image: url("./menu-CEmzUute.svg");
  background-repeat: no-repeat;
  background-position: 4px center;
  background-size: 16px 16px;
  padding-left: 24px;
  font-weight: 700;
  flex: 0 0 auto;
}

#toolbar button.menu[aria-expanded=true] {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
  padding: 1px 11px 0 25px;
  background-position: 5px 4px;
}

/* Classic Start menu popup above the Menu button. */
#toolbar .start-menu {
  position: absolute;
  left: 2px;
  bottom: calc(100% - 2px);
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

#toolbar .start-menu[hidden] {
  display: none;
}

#toolbar .start-menu-banner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  padding: 6px 0 8px;
  box-sizing: border-box;
  background: linear-gradient(to top, #000080, #000000);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  user-select: none;
}

#toolbar .start-menu-banner > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 1px;
  white-space: nowrap;
}

#toolbar .start-menu-list {
  list-style: none;
  margin: 0;
  padding: 2px;
  min-width: 200px;
}

#toolbar .start-menu-list > .separator {
  height: 0;
  margin: 3px 2px;
  border: none;
  border-top: 1px solid grey;
  border-bottom: 1px solid #fff;
}

#toolbar .start-menu-list .start-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 4px 28px 4px 40px;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 4px center;
  background-size: 32px 32px;
  color: #222;
  text-shadow: none;
}

#toolbar .start-menu-list .start-item:focus {
  outline: none;
}

#toolbar .start-menu-list .start-item:hover,
#toolbar .start-menu-list .start-item:focus-visible,
#toolbar .start-menu-list .start-item:not(:disabled):active {
  background-color: navy;
  box-shadow: none;
  color: #fff;
  text-shadow: none;
}

#toolbar .start-menu-list .start-item.uploads {
  background-image: url("../icons/48x48/uploads.gif");
}

#toolbar .start-menu-list .start-item.projects {
  background-image: url("./projects-Bl3ktBrP.svg");
}

#toolbar .start-menu-list .start-item.about-me {
  background-image: url("./about-me-BKWIvqla.svg");
}

#toolbar .start-menu-list a.start-item {
  text-decoration: none;
  color: #222;
}

#toolbar .start-menu-list .start-item.contact {
  background-image: url("./contact-CyBIxHB2.svg");
}

#toolbar .start-menu-list .start-item.linkedin {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20height='72'%20viewBox='0%200%2072%2072'%20width='72'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20fill='none'%20fill-rule='evenodd'%3e%3cpath%20d='M8,72%20L64,72%20C68.418278,72%2072,68.418278%2072,64%20L72,8%20C72,3.581722%2068.418278,-8.11624501e-16%2064,0%20L8,0%20C3.581722,8.11624501e-16%20-5.41083001e-16,3.581722%200,8%20L0,64%20C5.41083001e-16,68.418278%203.581722,72%208,72%20Z'%20fill='%23007EBB'/%3e%3cpath%20d='M62,62%20L51.315625,62%20L51.315625,43.8021149%20C51.315625,38.8127542%2049.4197917,36.0245323%2045.4707031,36.0245323%20C41.1746094,36.0245323%2038.9300781,38.9261103%2038.9300781,43.8021149%20L38.9300781,62%20L28.6333333,62%20L28.6333333,27.3333333%20L38.9300781,27.3333333%20L38.9300781,32.0029283%20C38.9300781,32.0029283%2042.0260417,26.2742151%2049.3825521,26.2742151%20C56.7356771,26.2742151%2062,30.7644705%2062,40.051212%20L62,62%20Z%20M16.349349,22.7940133%20C12.8420573,22.7940133%2010,19.9296567%2010,16.3970067%20C10,12.8643566%2012.8420573,10%2016.349349,10%20C19.8566406,10%2022.6970052,12.8643566%2022.6970052,16.3970067%20C22.6970052,19.9296567%2019.8566406,22.7940133%2016.349349,22.7940133%20Z%20M11.0325521,62%20L21.769401,62%20L21.769401,27.3333333%20L11.0325521,27.3333333%20L11.0325521,62%20Z'%20fill='%23FFF'/%3e%3c/g%3e%3c/svg%3e");
}

#toolbar .start-menu-list .start-item.download {
  background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2032%2032'%20shape-rendering='crispEdges'%3e%3crect%20x='16'%20y='3'%20width='15'%20height='1'%20fill='%23808080'/%3e%3crect%20x='16'%20y='4'%20width='1'%20height='4'%20fill='%23808080'/%3e%3crect%20x='17'%20y='4'%20width='14'%20height='4'%20fill='%23ffffff'/%3e%3crect%20x='16'%20y='8'%20width='7'%20height='1'%20fill='%23808080'/%3e%3crect%20x='23'%20y='8'%20width='2'%20height='1'%20fill='%23000000'/%3e%3crect%20x='25'%20y='8'%20width='6'%20height='1'%20fill='%23808080'/%3e%3crect%20x='23'%20y='9'%20width='8'%20height='1'%20fill='%23808080'/%3e%3crect%20x='16'%20y='9'%20width='6'%20height='2'%20fill='%23808080'/%3e%3crect%20x='22'%20y='9'%20width='1'%20height='2'%20fill='%23000000'/%3e%3crect%20x='23'%20y='10'%20width='1'%20height='1'%20fill='%23808080'/%3e%3crect%20x='24'%20y='10'%20width='1'%20height='1'%20fill='%23ffffff'/%3e%3crect%20x='25'%20y='10'%20width='1'%20height='1'%20fill='%23808080'/%3e%3crect%20x='26'%20y='10'%20width='1'%20height='2'%20fill='%23ffffff'/%3e%3crect%20x='27'%20y='10'%20width='4'%20height='2'%20fill='%23808080'/%3e%3crect%20x='16'%20y='11'%20width='10'%20height='1'%20fill='%23808080'/%3e%3crect%20x='16'%20y='12'%20width='8'%20height='1'%20fill='%23808080'/%3e%3crect%20x='24'%20y='12'%20width='2'%20height='1'%20fill='%23ffffff'/%3e%3crect%20x='26'%20y='12'%20width='5'%20height='1'%20fill='%23808080'/%3e%3crect%20x='16'%20y='13'%20width='15'%20height='1'%20fill='%23808080'/%3e%3crect%20x='3'%20y='14'%20width='21'%20height='1'%20fill='%23808080'/%3e%3crect%20x='2'%20y='15'%20width='1'%20height='1'%20fill='%23808080'/%3e%3crect%20x='3'%20y='15'%20width='13'%20height='1'%20fill='%23c0c0c0'/%3e%3crect%20x='24'%20y='14'%20width='1'%20height='3'%20fill='%23000000'/%3e%3crect%20x='25'%20y='14'%20width='1'%20height='3'%20fill='%23ffffff'/%3e%3crect%20x='26'%20y='14'%20width='5'%20height='3'%20fill='%23808080'/%3e%3crect%20x='16'%20y='15'%20width='8'%20height='2'%20fill='%23808080'/%3e%3crect%20x='1'%20y='16'%20width='1'%20height='1'%20fill='%23808080'/%3e%3crect%20x='2'%20y='16'%20width='14'%20height='1'%20fill='%23c0c0c0'/%3e%3crect%20x='31'%20y='3'%20width='1'%20height='15'%20fill='%23000000'/%3e%3crect%20x='1'%20y='17'%20width='15'%20height='1'%20fill='%23ffffff'/%3e%3crect%20x='16'%20y='17'%20width='15'%20height='1'%20fill='%23808080'/%3e%3crect%20x='2'%20y='18'%20width='14'%20height='1'%20fill='%23c0c0c0'/%3e%3crect%20x='16'%20y='18'%20width='16'%20height='1'%20fill='%23000000'/%3e%3crect%20x='2'%20y='19'%20width='19'%20height='2'%20fill='%23c0c0c0'/%3e%3crect%20x='21'%20y='19'%20width='2'%20height='2'%20fill='%23ff0000'/%3e%3crect%20x='23'%20y='19'%20width='3'%20height='2'%20fill='%23c0c0c0'/%3e%3crect%20x='2'%20y='21'%20width='7'%20height='1'%20fill='%23c0c0c0'/%3e%3crect%20x='9'%20y='21'%20width='8'%20height='1'%20fill='%23808080'/%3e%3crect%20x='17'%20y='21'%20width='9'%20height='1'%20fill='%23c0c0c0'/%3e%3crect%20x='3'%20y='22'%20width='6'%20height='1'%20fill='%23808080'/%3e%3crect%20x='17'%20y='22'%20width='6'%20height='1'%20fill='%23808080'/%3e%3crect%20x='2'%20y='22'%20width='1'%20height='2'%20fill='%23c0c0c0'/%3e%3crect%20x='9'%20y='22'%20width='8'%20height='2'%20fill='%23000000'/%3e%3crect%20x='23'%20y='22'%20width='3'%20height='2'%20fill='%23c0c0c0'/%3e%3crect%20x='3'%20y='23'%20width='6'%20height='1'%20fill='%23ffffff'/%3e%3crect%20x='17'%20y='23'%20width='6'%20height='1'%20fill='%23ffffff'/%3e%3crect%20x='26'%20y='19'%20width='3'%20height='6'%20fill='%23808080'/%3e%3crect%20x='29'%20y='19'%20width='1'%20height='6'%20fill='%23000000'/%3e%3crect%20x='2'%20y='24'%20width='7'%20height='1'%20fill='%23c0c0c0'/%3e%3crect%20x='9'%20y='24'%20width='8'%20height='1'%20fill='%23ffffff'/%3e%3crect%20x='17'%20y='24'%20width='9'%20height='1'%20fill='%23c0c0c0'/%3e%3crect%20x='0'%20y='17'%20width='1'%20height='9'%20fill='%23808080'/%3e%3crect%20x='1'%20y='18'%20width='1'%20height='8'%20fill='%23ffffff'/%3e%3crect%20x='2'%20y='25'%20width='24'%20height='1'%20fill='%23c0c0c0'/%3e%3crect%20x='26'%20y='25'%20width='2'%20height='1'%20fill='%23808080'/%3e%3crect%20x='28'%20y='25'%20width='1'%20height='1'%20fill='%23000000'/%3e%3crect%20x='0'%20y='26'%20width='27'%20height='1'%20fill='%23808080'/%3e%3crect%20x='27'%20y='26'%20width='1'%20height='1'%20fill='%23000000'/%3e%3crect%20x='1'%20y='27'%20width='26'%20height='1'%20fill='%23000000'/%3e%3c/svg%3e");
}

#toolbar .start-menu-list .start-item.logout {
  background-image: url("../icons/48x48/logout.gif");
}

#toolbar .start-menu-list .start-item.tour {
  background-image: url("./menu-CEmzUute.svg");
}

#toolbar .task-buttons {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 3px;
  overflow: hidden;
}

#toolbar .task-buttons > .task {
  box-sizing: border-box;
  flex: 1 1 0;
  width: 0;
  max-width: 160px;
  min-width: 0;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin: 0;
  padding: 2px 6px 2px 22px;
  overflow: hidden;
  text-align: left;
  background-color: silver;
  background-image: url("../icons/48x48/general-app.gif");
  background-repeat: no-repeat;
  background-position: 3px center;
  background-size: 16px 16px;
}

#toolbar .task-buttons > .task.my-projects {
  background-image: url("./projects-Bl3ktBrP.svg");
}

#toolbar .task-buttons > .task.about-me {
  background-image: url("./about-me-BKWIvqla.svg");
}

#toolbar .task-buttons > .task.contact {
  background-image: url("./contact-CyBIxHB2.svg");
}

#toolbar .task-buttons > .task.settings {
  background-image: url("../icons/48x48/settings.gif");
}

#toolbar .task-buttons > .task > .task-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* display:flex above beats the UA [hidden] { display:none }. */
#toolbar .task-buttons > .task[hidden] {
  display: none;
}

/* Sticky pressed look for the active window's task button (98.css :active inset). */
#toolbar .task-buttons > .task.active,
#toolbar .task-buttons > .task[aria-pressed=true] {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
  padding: 3px 5px 1px 23px;
  background-position: 4px 3px;
}

#toolbar .sunken-panel.clock {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: stretch;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Product: window positioning, resize, bounded height, shell bits. */
/* --- Window shell (positioning / resize; visual chrome from assets/style/chrome) --- */
.window {
  z-index: 1;
}

.window.is-closed,
.window.is-minimized {
  display: none !important;
}

.window.is-maximized > .window-resize-handle {
  display: none;
}

.window.resizable {
  --window-min-width: 500px;
  --window-min-height: 340px;
  min-width: var(--window-min-width);
  min-height: var(--window-min-height);
  display: flex;
  flex-direction: column;
}

.window.resizable.size-min {
  width: var(--window-min-width);
  height: var(--window-min-height);
}

.window.resizable > .title-bar,
.window.resizable > .status-bar {
  flex: 0 0 auto;
}

.window.resizable > .window-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/*
 * Scroll host is .window-pane.scrollable (inside sunken / field-border chrome).
 * Pane fills the body; when content is taller, the custom scrollbar scrolls
 * the pane panels together.
 */
.window.resizable > .window-body > .window-pane {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.window.resizable.is-sized > .window-body > .window-pane.min-h-window-md {
  min-height: 0;
}

/* Tighter body when the pane draws its own field border. */
.window > .window-body:has(> .window-pane.field-border) {
  margin: 4px;
  padding: 0;
}

.window-resize-handle {
  position: absolute;
  z-index: 20;
  background: transparent;
}

.window-resize-handle[data-edge=e],
.window-resize-handle[data-edge=w] {
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
}

.window-resize-handle[data-edge=e] {
  right: 0;
}

.window-resize-handle[data-edge=w] {
  left: 0;
}

.window-resize-handle[data-edge=s] {
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 6px;
  cursor: ns-resize;
}

.window-resize-handle[data-edge=se],
.window-resize-handle[data-edge=sw] {
  width: 12px;
  height: 12px;
  bottom: 0;
}

.window-resize-handle[data-edge=se] {
  right: 0;
  cursor: nwse-resize;
}

.window-resize-handle[data-edge=sw] {
  left: 0;
  cursor: nesw-resize;
}

.window.is-resizing,
.window.is-resizing * {
  cursor: inherit;
}

html.is-window-resizing,
html.is-window-resizing * {
  cursor: inherit !important;
}

/*
 * .bounded: height-capped windows need the same flex height chain as
 * .resizable so nested .scrollable hosts get a definite height and can
 * overflow (custom scrollbar). Pair with a max-h-window-* utility.
 */
.window.bounded {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.window.bounded > .title-bar,
.window.bounded > .status-bar {
  flex: 0 0 auto;
}

.window.bounded > .window-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.window.bounded > .window-body > .window-pane {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.window.bounded > .window-body > .window-pane > .panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.window.bounded > .window-body > .window-pane > .panel > .columns {
  flex: 1 1 auto;
  min-height: 0;
}

.title-bar-text.my-projects,
.title-bar-text.contact,
.title-bar-text.about-me,
.title-bar-text.settings {
  padding-left: 22px;
  background-repeat: no-repeat;
  background-position: 2px center;
  background-size: 16px 16px;
}

.title-bar-text.my-projects {
  background-image: url("./projects-Bl3ktBrP.svg");
}

.title-bar-text.about-me {
  background-image: url("./about-me-BKWIvqla.svg");
}

/* About Me: large default footprint (~48% × 62% of work area; see layoutAboutMeWindow). */
.about-me-window.resizable {
  --about-me-init-width-ratio: 0.48;
  --about-me-init-height-ratio: 0.62;
  --about-me-init-horizontal-bias: 0.32;
}

.about-me-window.resizable:not(.is-sized) {
  width: calc(var(--about-me-init-width-ratio) * 100%);
  height: calc(var(--about-me-init-height-ratio) * (100vh - 64px));
}

.title-bar-text.contact {
  background-image: url("./contact-CyBIxHB2.svg");
}

.title-bar-text.settings {
  background-image: url("../icons/48x48/settings.gif");
}

.status-bar .status-bar-field {
  white-space: nowrap;
  min-width: 50px;
  max-width: 34%;
  flex-grow: 1;
}

.status-bar .status-bar-field.description {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 66%;
}

/*
 * Bleed content to the window chrome inside .window-body
 * (98.css uses margin: 8px on .window-body). Prefer layout-encoded bleed;
 * keep .stretched for one-off cases.
 */
.stretched {
  margin-top: -7px;
  margin-right: -8px;
  margin-left: -8px;
  width: calc(100% + 16px);
  max-width: none;
  box-sizing: border-box;
}

/* Product: window-pane layouts (icon / wizard / heading / dialog). */
/* --- Window pane layouts --- */
/*
 * Win98 groove separators between stacked / wizard panels.
 * First: bottom only; last: top only; middle: both.
 */
.wizard-panel-layout > .panel,
.heading-panel-layout > .panel {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #868a8e;
}

.wizard-panel-layout > .panel:first-child,
.heading-panel-layout > .panel:first-child {
  border-top: 0;
}

.wizard-panel-layout > .panel:last-child,
.heading-panel-layout > .panel:last-child {
  border-bottom: 0;
}

/* icon-panel-layout: info (fixed) + icon-list (grow); status-bar by convention */
.icon-panel-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
}

/* Flex lives on the viewport after scrollbar.js wraps children. */
.icon-panel-layout.has-custom-scrollbar {
  display: grid;
}

.icon-panel-layout > .panel.info,
.icon-panel-layout > .scrollable-viewport > .panel.info {
  display: flex;
  flex-direction: column;
  flex: 0 0 175px;
  min-width: 180px;
  max-width: var(--width-window-xs);
  padding: 12px 14px;
  background: linear-gradient(182deg, rgba(16, 134, 214, 0.4) 0%, #fff 100%);
  border-right: 1px solid #dfdfdf;
}

.icon-panel-layout > .panel.info > img,
.icon-panel-layout > .panel.info > h1,
.icon-panel-layout > .panel.info > hr,
.icon-panel-layout > .panel.info > p,
.icon-panel-layout > .scrollable-viewport > .panel.info > img,
.icon-panel-layout > .scrollable-viewport > .panel.info > h1,
.icon-panel-layout > .scrollable-viewport > .panel.info > hr,
.icon-panel-layout > .scrollable-viewport > .panel.info > p {
  display: block;
}

.icon-panel-layout > .panel.info.unselected > img,
.icon-panel-layout > .panel.info.unselected > h1,
.icon-panel-layout > .panel.info.unselected > hr,
.icon-panel-layout > .panel.info.unselected > p,
.icon-panel-layout > .scrollable-viewport > .panel.info.unselected > img,
.icon-panel-layout > .scrollable-viewport > .panel.info.unselected > h1,
.icon-panel-layout > .scrollable-viewport > .panel.info.unselected > hr,
.icon-panel-layout > .scrollable-viewport > .panel.info.unselected > p {
  display: none;
}

.icon-panel-layout .panel.info > .info-icon {
  width: 48px;
  height: 48px;
}

.icon-panel-layout .panel.info > .info-title {
  font-size: 24px;
  font-weight: 700;
  margin: 8px 0;
  min-width: 110px;
  color: #000080;
  word-break: break-word;
  line-break: anywhere;
}

.icon-panel-layout .panel.info > .info-separator {
  margin: 8px 0 16px 0;
  border: 0;
  border-top: 1px solid #5a94c6;
}

.icon-panel-layout .panel.info > .info-description {
  max-width: 100%;
  overflow-wrap: break-word;
  font-size: 12px;
  line-height: 1.35;
}

.icon-panel-layout > .panel.icon-list,
.icon-panel-layout > .scrollable-viewport > .panel.icon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  flex: 1 1 auto;
  padding: 12px;
  background: #fff;
}

.disable-pwd-mgr {
  display: none;
}

/* wizard-panel-layout: banner | info, actions full width below; bleeds into body margin */
.wizard-panel-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "banner info" ". actions";
  margin-top: -7px;
  margin-right: -8px;
  margin-left: -8px;
  width: calc(100% + 16px);
  max-width: none;
  box-sizing: border-box;
}

.wizard-panel-layout > .panel.banner {
  grid-column: 1;
  grid-row: 1;
  background: #000080;
}

.wizard-panel-layout > .panel.banner img {
  display: block;
}

.wizard-panel-layout > .panel.info {
  grid-column: 2;
  grid-row: 1;
  background: #fff;
  padding: 16px 14px;
}

.wizard-panel-layout > .panel.info h4 {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px;
}

.wizard-panel-layout > .panel.info p {
  font-size: 11px;
  margin: 0 0 12px;
  line-height: 1.35;
}

.wizard-panel-layout > .panel.info p:last-child {
  margin-bottom: 0;
}

.wizard-panel-layout > .panel.actions {
  grid-column: 2;
  grid-row: 2;
  padding: 10px 8px 0 8px;
}

.wizard-panel-layout > .panel.actions > .field-row {
  gap: 8px;
}

.wizard-panel-layout > .panel.actions > .field-row > * + * {
  margin-left: 0;
}

/* about-me-panel-layout: gray content + wizard-style footer (Back / Next). */
.about-me-panel-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.about-me-panel-layout > .panel.about-me-tabs {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--surface);
  padding: 8px 8px 0;
  box-sizing: border-box;
}

.about-me-tablist {
  flex: 0 0 auto;
}

.about-me-tabpanel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.about-me-tabpanel > .window-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: var(--element-spacing);
  display: flex;
  flex-direction: column;
}

.about-me-tab-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.about-me-tab-section[hidden] {
  display: none !important;
}

.about-me-tab-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

.about-me-panel-layout > .panel.actions {
  flex: 0 0 auto;
  padding: 10px 8px 0;
}

.about-me-panel-layout > .panel.actions > .field-row {
  gap: 8px;
}

.about-me-panel-layout > .panel.actions > .field-row > * + * {
  margin-left: 0;
}

/* heading-panel-layout: column; first panel bleeds */
.heading-panel-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.heading-panel-layout > .panel:first-child {
  margin-top: -7px;
  margin-right: -8px;
  margin-left: -8px;
  width: calc(100% + 16px);
  max-width: none;
  box-sizing: border-box;
}

/* dialog-panel-layout: compact column (contact / alert / message) */
.dialog-panel-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.dialog-panel-layout > .panel.banner {
  margin-top: -7px;
  margin-right: -8px;
  margin-left: -8px;
  width: calc(100% + 16px);
  max-width: none;
  box-sizing: border-box;
}

.dialog-panel-layout > .panel.banner .contact-banner,
.dialog-panel-layout > .panel.banner > img {
  display: block;
  width: 100%;
}

.dialog-panel-layout > .panel:not(.banner):not(.actions) {
  padding-top: 10px;
}

.dialog-panel-layout > .panel .field-row label {
  min-width: 75px;
}

.dialog-panel-layout > .panel .field-row input[type=text],
.dialog-panel-layout > .panel .field-row input[type=password] {
  max-width: var(--width-window-xs);
}

#window-contact .dialog-panel-layout > .panel .field-row input[type=text] {
  background-color: #ffffff;
}

#window-contact #contact-email {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text;
}

.dialog-panel-layout > .panel.actions {
  margin-top: 14px;
}

/* Message-box layout: icon left, content indented (webhemi-ui DialogWindow). */
.dialog-panel-layout > .panel.dialog-typed {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.dialog-panel-layout > .panel.dialog-typed > .dialog-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
  image-rendering: pixelated;
}

.dialog-panel-layout > .panel.dialog-typed > .dialog-body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.dialog-panel-layout > .panel.dialog-typed > .dialog-body > :first-child {
  margin-top: 0;
}

/* Product: columns/stack/field-column, sunken defaults.
 * Window size / justify utilities live in Tailwind @theme (main.css).
 */
/* --- In-panel primitives (dialog / form building blocks) --- */
.columns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
}

.columns > * {
  flex: 1 1 0;
  min-width: 0;
}

/* Let a scrollable column shrink inside a height-bounded .columns row. */
.columns > .scrollable {
  min-height: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* Content-sized group boxes; do not stretch to fill the column. */
.stack > fieldset {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

/*
 * Horizontal group of .field-row items (radios, checkboxes, etc.).
 * Chrome .field-row is the label+control pair; this lays those pairs in a row.
 */
.field-column {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.field-column > .field-row {
  margin-top: 0;
  margin-left: 12px;
}

.field-column > .field-row > * + * {
  margin-left: 6px;
}

/* Chrome .sunken-panel defaults to white; keep surface gray unless asked. */
.sunken-panel {
  background-color: silver;
}

.bg-white {
  background-color: #fff;
}

/* Product: custom Win98 scrollbar host (scrollbar.js). */
/*
 * Custom Win98 scrollbar host (see assets/script/scrollbar.js).
 * .scrollable becomes a grid shell; .scrollable-viewport is the real overflow box.
 */
.scrollable {
  position: relative;
  box-sizing: border-box;
  min-height: 0;
}

.scrollable.has-custom-scrollbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.scrollable.has-custom-scrollbar.sb-show-y {
  grid-template-columns: minmax(0, 1fr) 16px;
}

.scrollable.has-custom-scrollbar.sb-show-x {
  grid-template-rows: minmax(0, 1fr) 17px;
}

.scrollable-viewport {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}

.scrollable-viewport::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.sunken-panel.scrollable .scrollable-viewport {
  padding: 10px;
  min-height: 100px;
}

.icon-panel-layout.has-custom-scrollbar > .scrollable-viewport {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background-color: #fff;
}

.icon-panel-layout.has-custom-scrollbar.sb-show-y > .scrollable-viewport > .panel.icon-list {
  padding-right: 12px;
}

.scrollable > .sb {
  box-sizing: border-box;
  user-select: none;
  z-index: 5;
}

.scrollable > .sb-y,
.scrollable > .sb-x,
.scrollable > .sb-corner {
  display: none;
}

.scrollable.sb-show-y > .sb-y {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  width: 16px;
  background: #dfdfdf;
}

.scrollable.sb-show-x > .sb-x {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  height: 17px;
  background: #dfdfdf;
}

.scrollable.sb-show-y.sb-show-x > .sb-corner {
  grid-column: 2;
  grid-row: 2;
  display: block;
  width: 16px;
  height: 17px;
  background: #dfdfdf;
}

.scrollable > .sb .sb-btn {
  flex: 0 0 auto;
  min-width: 16px;
  min-height: 17px;
  width: 16px;
  height: 17px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  color: transparent;
  text-shadow: none;
  background-color: silver;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.scrollable > .sb-y .sb-dec {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");
}

.scrollable > .sb-y .sb-inc {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
}

.scrollable > .sb-x .sb-dec {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");
}

.scrollable > .sb-x .sb-inc {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");
}

.scrollable > .sb-y .sb-dec:disabled {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20width='16'%20height='17'%20fill='none'%20version='1.1'%20id='svg6'%20sodipodi:docname='button-up-disabled.svg'%20inkscape:version='1.4.4%20(dcaf3e7,%202026-05-05)'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs6'%20/%3e%3csodipodi:namedview%20id='namedview6'%20pagecolor='%23505050'%20bordercolor='%23ffffff'%20borderopacity='1'%20inkscape:showpageshadow='0'%20inkscape:pageopacity='0'%20inkscape:pagecheckerboard='1'%20inkscape:deskcolor='%23505050'%20inkscape:zoom='256'%20inkscape:cx='7.8671875'%20inkscape:cy='8.7246094'%20inkscape:window-width='3840'%20inkscape:window-height='2054'%20inkscape:window-x='3829'%20inkscape:window-y='-11'%20inkscape:window-maximized='1'%20inkscape:current-layer='svg6'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0v16h1V1h14V0z'%20fill='%23DFDFDF'%20id='path1'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1v14h1V2h12V1H2z'%20fill='%23fff'%20id='path2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H0v-1h15V0h1v17z'%20fill='%23000'%20id='path3'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201h-1v14H1v1h14V1z'%20fill='gray'%20id='path4'%20/%3e%3cpath%20fill='silver'%20d='M2%202h12v13H2z'%20id='path5'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%206H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z'%20fill='%23000'%20id='path6'%20style='fill:%23868a8e;fill-opacity:1'%20/%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:4.01386'%20id='rect6'%20width='6.9960938'%20height='0.9921875'%20x='5.0078125'%20y='10.003906'%20/%3e%3c/svg%3e");
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff, inset -2px -2px #c0c0c0, inset 2px 2px #dfdfdf;
}

.scrollable > .sb-y .sb-inc:disabled {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20width='16'%20height='17'%20fill='none'%20version='1.1'%20id='svg6'%20sodipodi:docname='button-down-disabled.svg'%20inkscape:version='1.4.4%20(dcaf3e7,%202026-05-05)'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs6'%20/%3e%3csodipodi:namedview%20id='namedview6'%20pagecolor='%23505050'%20bordercolor='%23ffffff'%20borderopacity='1'%20inkscape:showpageshadow='0'%20inkscape:pageopacity='0'%20inkscape:pagecheckerboard='1'%20inkscape:deskcolor='%23505050'%20inkscape:zoom='150.9881'%20inkscape:cx='12.491051'%20inkscape:cy='8.6132619'%20inkscape:window-width='3840'%20inkscape:window-height='2054'%20inkscape:window-x='3829'%20inkscape:window-y='-11'%20inkscape:window-maximized='1'%20inkscape:current-layer='svg6'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0v16h1V1h14V0z'%20fill='%23DFDFDF'%20id='path1'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1v14h1V2h12V1H2z'%20fill='%23fff'%20id='path2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H0v-1h15V0h1v17z'%20fill='%23000'%20id='path3'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201h-1v14H1v1h14V1z'%20fill='gray'%20id='path4'%20/%3e%3cpath%20fill='silver'%20d='M2%202h12v13H2z'%20id='path5'%20/%3e%3cg%20id='g6'%20transform='translate(1.0093399,-0.98675392)'%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:0.979944'%20id='rect6-5'%20width='1.9995502'%20height='1.0001334'%20x='8.9921875'%20y='8'%20/%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:0.979944'%20id='rect6'%20width='1.9995502'%20height='1.0001334'%20x='7.0071411'%20y='10.000566'%20/%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:0.979944'%20id='rect6-2'%20width='1.9995502'%20height='1.0001334'%20x='8.0039062'%20y='9'%20/%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:0.690134'%20id='rect6-8'%20width='0.99173772'%20height='1.0001334'%20x='7.0039062'%20y='11'%20/%3e%3c/g%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%206H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z'%20fill='%23000'%20id='path6'%20style='fill:%23868a8e;fill-opacity:1'%20/%3e%3c/svg%3e");
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff, inset -2px -2px #c0c0c0, inset 2px 2px #dfdfdf;
}

.scrollable > .sb-x .sb-dec:disabled {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20width='16'%20height='17'%20fill='none'%20version='1.1'%20id='svg6'%20sodipodi:docname='button-left-disabled.svg'%20inkscape:version='1.4.4%20(dcaf3e7,%202026-05-05)'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs6'%20/%3e%3csodipodi:namedview%20id='namedview6'%20pagecolor='%23505050'%20bordercolor='%23ffffff'%20borderopacity='1'%20inkscape:showpageshadow='0'%20inkscape:pageopacity='0'%20inkscape:pagecheckerboard='1'%20inkscape:deskcolor='%23505050'%20inkscape:zoom='128'%20inkscape:cx='3.3984375'%20inkscape:cy='6.6835937'%20inkscape:window-width='3840'%20inkscape:window-height='2054'%20inkscape:window-x='3829'%20inkscape:window-y='-11'%20inkscape:window-maximized='1'%20inkscape:current-layer='svg6'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0v16h1V1h14V0z'%20fill='%23DFDFDF'%20id='path1'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1v14h1V2h12V1H2z'%20fill='%23fff'%20id='path2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H0v-1h15V0h1v17z'%20fill='%23000'%20id='path3'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201h-1v14H1v1h14V1z'%20fill='gray'%20id='path4'%20/%3e%3cpath%20fill='silver'%20d='M2%202h12v13H2z'%20id='path5'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9%204H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z'%20fill='%23000'%20id='path6'%20style='stroke:none;fill:%23868a8e;fill-opacity:1'%20/%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:2.80538'%20id='rect6'%20width='0.99617684'%20height='6.9919229'%20x='9.0001888'%20y='5.0021648'%20/%3e%3c/svg%3e");
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff, inset -2px -2px #c0c0c0, inset 2px 2px #dfdfdf;
}

.scrollable > .sb-x .sb-inc:disabled {
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20width='16'%20height='17'%20fill='none'%20version='1.1'%20id='svg6'%20sodipodi:docname='button-right-disabled.svg'%20inkscape:version='1.4.4%20(dcaf3e7,%202026-05-05)'%20xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'%20xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:svg='http://www.w3.org/2000/svg'%3e%3cdefs%20id='defs6'%20/%3e%3csodipodi:namedview%20id='namedview6'%20pagecolor='%23505050'%20bordercolor='%23ffffff'%20borderopacity='1'%20inkscape:showpageshadow='0'%20inkscape:pageopacity='0'%20inkscape:pagecheckerboard='1'%20inkscape:deskcolor='%23505050'%20inkscape:zoom='90.509668'%20inkscape:cx='4.6293397'%20inkscape:cy='7.7947474'%20inkscape:window-width='3840'%20inkscape:window-height='2054'%20inkscape:window-x='3829'%20inkscape:window-y='-11'%20inkscape:window-maximized='1'%20inkscape:current-layer='svg6'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%200H0v16h1V1h14V0z'%20fill='%23DFDFDF'%20id='path1'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M2%201H1v14h1V2h12V1H2z'%20fill='%23fff'%20id='path2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M16%2017H0v-1h15V0h1v17z'%20fill='%23000'%20id='path3'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15%201h-1v14H1v1h14V1z'%20fill='gray'%20id='path4'%20/%3e%3cpath%20fill='silver'%20d='M2%202h12v13H2z'%20id='path5'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7%204H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z'%20fill='%23000'%20id='path6'%20style='fill:%23868a8e;fill-opacity:1'%20/%3e%3cg%20id='g6'%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:0.979944'%20id='rect6-5'%20width='1.9995502'%20height='1.0001334'%20x='8.9921875'%20y='8'%20/%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:0.979944'%20id='rect6'%20width='1.9995502'%20height='1.0001334'%20x='7.0071411'%20y='10.000566'%20/%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:0.979944'%20id='rect6-2'%20width='1.9995502'%20height='1.0001334'%20x='8.0039062'%20y='9'%20/%3e%3crect%20style='fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:0.690134'%20id='rect6-8'%20width='0.99173772'%20height='1.0001334'%20x='7.0039062'%20y='11'%20/%3e%3c/g%3e%3c/svg%3e");
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff, inset -2px -2px #c0c0c0, inset 2px 2px #dfdfdf;
}

.scrollable > .sb-x .sb-btn {
  height: 17px;
  width: 16px;
}

.scrollable > .sb .sb-btn:not(:disabled):active {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

.scrollable > .sb .sb-btn:disabled {
  opacity: 1;
  filter: none;
  color: transparent;
  text-shadow: none;
}

.scrollable > .sb .sb-track {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  background-color: #dfdfdf;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E");
}

.scrollable > .sb .sb-thumb {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background-color: #b5b5b5;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}

.scrollable > .sb-y .sb-thumb {
  width: 100%;
  min-height: 17px;
}

.scrollable > .sb-x .sb-thumb {
  height: 100%;
  min-width: 17px;
}

.scrollable-viewport > p:first-child {
  margin-top: 0;
}

.scrollable-viewport > p:last-child {
  margin-bottom: 0;
}

/* Product: modal layer + message dialog (webhemi-ui DialogWindow pattern). */
/*
 * Alert host: does not capture pointer events — desktop, taskbar, and Start
 * menu stay usable. Only the dialog window itself is interactive.
 */
.dashboard > .desktop-modal-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Floor stacking; JS raises to match / exceed shell windows on open. */
  z-index: 50;
}

.dashboard > .desktop-modal-layer.is-closed {
  display: none;
}

.dashboard > .desktop-modal-layer > .window {
  position: absolute;
  margin: 0;
  pointer-events: auto;
}

#window-message-dialog {
  min-width: var(--width-window-sm, 332px);
  min-height: 120px;
}

/* Dim + block only the owning shell window while its alert is open. */
.dashboard > .window.has-modal-blocker {
  position: absolute;
}

.dashboard > .window.has-modal-blocker > .modal-blocker {
  position: absolute;
  inset: 0;
  z-index: 40;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: auto;
}

/* About Me tab panels — document-style content (inside scroll viewport). */
.about-me-tab-scroll.has-custom-scrollbar > .scrollable-viewport {
  padding: 0;
  background: #fff;
}

.about-doc {
  --about-doc-accent: #1086d6;
  --about-doc-accent-soft: #e8f4fc;
  --about-doc-ink: #1a1a1a;
  --about-doc-muted: #555;
  --about-doc-rule: #d0d0d0;
  --about-doc-panel: #f6f8fa;
  max-width: 52rem;
  margin: 0 auto;
  padding: 20px 22px 28px;
  color: var(--about-doc-ink);
  font-size: 13px;
  line-height: 1.55;
}

.about-doc h1,
.about-doc h2,
.about-doc h3 {
  margin: 0 0 8px;
  font-weight: bold;
  line-height: 1.25;
}

.about-doc h2 {
  font-size: 16px;
  color: var(--about-doc-accent);
  border-bottom: 2px solid var(--about-doc-accent-soft);
  padding-bottom: 4px;
  margin-top: 22px;
  margin-bottom: 12px;
}

.about-doc h2:first-child {
  margin-top: 0;
}

.about-doc h3 {
  font-size: 14px;
  margin-top: 0;
}

.about-doc p {
  margin: 0 0 10px;
}

.about-doc p:last-child {
  margin-bottom: 0;
}

.about-doc ul {
  margin: 0 0 10px;
  padding-left: 18px;
}

.about-doc li + li {
  margin-top: 4px;
}

.about-doc a {
  color: var(--about-doc-accent);
  text-decoration: underline;
}

.about-doc strong {
  font-weight: bold;
}

/* --- Business card (Overview) --- */
.about-card {
  --about-card-photo-gap: 20px;
  display: grid;
  grid-template-columns: minmax(120px, 148px) minmax(0, 1fr);
  column-gap: var(--about-card-photo-gap);
  row-gap: 10px;
  padding: 16px;
  background: linear-gradient(135deg, #fafbfc 0%, var(--about-doc-accent-soft) 100%);
  border: 1px solid var(--about-doc-rule);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}

.about-card-photo {
  align-self: start;
}

.about-card-details {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.about-card-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 18%;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.about-card-name {
  font-size: 23px;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.about-card-name-note {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--about-doc-muted);
  font-style: italic;
}

.about-card-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: bold;
  color: var(--about-doc-accent);
}

.about-card-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.about-doc .about-card-meta {
  padding-left: 0;
  margin-bottom: 0;
}

.about-card-meta li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.about-card-meta strong {
  flex: 0 0 4.5rem;
  color: var(--about-doc-muted);
  font-weight: normal;
}

.about-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.about-chip {
  display: inline-block;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid var(--about-doc-rule);
  border-radius: 2px;
  font-size: 12px;
  text-decoration: none;
  color: var(--about-doc-ink);
}

a.about-chip:hover {
  border-color: var(--about-doc-accent);
  background: var(--about-doc-accent-soft);
}

.about-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.about-stat {
  text-align: center;
  padding: 10px 8px;
  background: var(--about-doc-panel);
  border: 1px solid var(--about-doc-rule);
}

.about-stat-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: var(--about-doc-accent);
  line-height: 1.2;
}

.about-stat-label {
  display: block;
  font-size: 11px;
  color: var(--about-doc-muted);
  margin-top: 2px;
}

.about-callout {
  margin: 14px 0;
  padding: 10px 12px;
  background: var(--about-doc-accent-soft);
  border-left: 4px solid var(--about-doc-accent);
}

.about-callout p:last-child {
  margin-bottom: 0;
}

/* --- Experience timeline --- */
.about-timeline {
  --tl-rail-center: 5px;
  --tl-dot-size: 11px;
  --tl-rail-width: 3px;
  --tl-content-indent: 24px;
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--tl-content-indent);
  list-style: none;
  border-left: 0;
}

.about-doc .about-timeline {
  padding-left: var(--tl-content-indent);
  margin-bottom: 0;
}

.about-timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-rail-center) - var(--tl-rail-width) / 2);
  top: 0;
  bottom: 0;
  width: var(--tl-rail-width);
  background: var(--about-doc-accent-soft);
}

.about-timeline-item {
  position: relative;
  padding: 0 0 18px 14px;
}

.about-timeline-item:last-child {
  padding-bottom: 0;
}

.about-timeline-item::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-rail-center) - var(--tl-dot-size) / 2 - var(--tl-content-indent));
  top: 4px;
  width: var(--tl-dot-size);
  height: var(--tl-dot-size);
  border-radius: 50%;
  background: var(--about-doc-accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--about-doc-accent);
  box-sizing: border-box;
}

.about-timeline-period {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: bold;
  background: var(--about-doc-panel);
  border: 1px solid var(--about-doc-rule);
  color: var(--about-doc-muted);
}

.about-timeline-head {
  margin-bottom: 6px;
}

.about-timeline-role {
  font-size: 14px;
  font-weight: bold;
}

.about-timeline-company {
  color: var(--about-doc-accent);
  font-weight: bold;
}

.about-timeline-location {
  font-size: 12px;
  color: var(--about-doc-muted);
}

.about-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.about-doc .about-tag-list {
  padding-left: 0;
  margin-bottom: 0;
}

.about-doc .about-tag-list li + li {
  margin-top: 0;
}

.about-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  line-height: 1.35;
  background: #fff;
  border: 1px solid var(--about-doc-rule);
  color: var(--about-doc-muted);
}

/* --- Charts row --- */
.about-charts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 16px 0 8px;
}

.about-chart-block {
  padding: 12px;
  background: var(--about-doc-panel);
  border: 1px solid var(--about-doc-rule);
  text-align: center;
}

.about-chart-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: bold;
  color: var(--about-doc-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.about-pie-3d {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.about-pie-3d-stage {
  width: 130px;
  height: 78px;
  perspective: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.about-pie-3d-disk {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: rotateX(58deg);
  transform-origin: center center;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.about-pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  font-size: 11px;
}

.about-pie-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.about-pie-swatch {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* --- Skill groups --- */
.about-skill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.about-skill-group {
  padding: 10px 12px;
  background: var(--about-doc-panel);
  border: 1px solid var(--about-doc-rule);
}

.about-skill-group h3 {
  margin-bottom: 8px;
  color: var(--about-doc-accent);
}

.about-meter {
  margin-bottom: 8px;
}

.about-meter:last-child {
  margin-bottom: 0;
}

.about-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 3px;
  color: var(--about-doc-muted);
}

.about-meter-track {
  height: 8px;
  background: #fff;
  border: 1px solid var(--about-doc-rule);
  overflow: hidden;
}

.about-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--about-doc-accent), #5eb3ef);
}

.about-cert-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-cert-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--about-doc-rule);
}

.about-cert-list li:last-child {
  border-bottom: 0;
}

@media (max-width: 480px) {
  .about-card {
    grid-template-columns: 1fr;
    row-gap: var(--about-card-photo-gap, 20px);
  }
  .about-card-photo {
    max-width: 140px;
  }
  .about-stat-row {
    grid-template-columns: 1fr;
  }
}
/* Product: simplified mobile shell (Win98 palette, no window manager). */
@media (max-width: 768px), ((orientation: landscape) and (max-height: 500px)) {
  html,
  body.dashboard {
    height: auto;
    min-height: 100%;
    overflow: auto;
  }
  body.dashboard {
    padding: 0;
    overflow-x: hidden;
  }
  body.dashboard.is-mobile {
    user-select: text;
  }
  body.dashboard.is-mobile > .icon-list,
  body.dashboard.is-mobile > .window,
  body.dashboard.is-mobile > #toolbar {
    display: none !important;
  }
  body.dashboard.is-mobile > .desktop-modal-layer:not(.is-closed) {
    display: block !important;
  }
  .mobile-portfolio {
    --mobile-dock-height: 48px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: calc(var(--mobile-dock-height) + env(safe-area-inset-bottom, 0px));
    background-color: #008284;
    color: #222;
  }
  .mobile-portfolio[hidden] {
    display: none !important;
  }
  .mobile-header {
    flex: 0 0 auto;
    padding: 14px 12px 0;
  }
  .mobile-name {
    margin: 0 2px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px #0a0a0a;
  }
  .mobile-tagline {
    margin: 6px 2px 0;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px #0a0a0a;
  }
  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
  }
  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px 8px;
    border: 0;
    background: var(--surface);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    font: inherit;
    font-size: 11px;
    color: #222;
    cursor: pointer;
  }
  .mobile-nav-btn.is-active,
  .mobile-nav-btn[aria-current=page] {
    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  }
  .mobile-nav-icon {
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
  }
  .mobile-nav-btn.about-me .mobile-nav-icon {
    background-image: url("./about-me-BKWIvqla.svg");
  }
  .mobile-nav-btn.projects .mobile-nav-icon {
    background-image: url("./projects-Bl3ktBrP.svg");
  }
  .mobile-nav-btn.contact .mobile-nav-icon {
    background-image: url("./contact-CyBIxHB2.svg");
  }
  .mobile-main {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 12px;
  }
  .mobile-panel {
    height: 100%;
  }
  .mobile-scroll {
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .mobile-scroll > .about-doc {
    max-width: none;
    margin: 0 0 16px;
    padding: 14px 14px 18px;
    background: #fff;
    box-shadow: var(--border-field);
  }
  .mobile-scroll > .about-doc:last-child {
    margin-bottom: 0;
  }
  .mobile-scroll .about-me-tab-scroll,
  .mobile-scroll .field-border {
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  .mobile-scroll .scrollable,
  .mobile-scroll .scrollable-viewport {
    overflow: visible !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .mobile-scroll .sb {
    display: none !important;
  }
  .mobile-window {
    background: var(--surface);
    box-shadow: var(--border-window-outer), var(--border-window-inner);
    padding: 3px;
  }
  .mobile-window-title {
    padding: 2px 0 0 22px;
    font-weight: bold;
    color: #000;
    background-repeat: no-repeat;
    background-position: 0 center;
    background-size: 16px 16px;
  }
  .mobile-window-title.contact {
    background-image: url("./contact-CyBIxHB2.svg");
  }
  .mobile-window-body {
    margin: 8px;
    background: #fff;
    box-shadow: var(--border-field);
    padding: 12px;
  }
  .mobile-contact-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 10px;
    align-items: baseline;
  }
  .mobile-contact-label {
    color: #555;
  }
  .mobile-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .mobile-contact-actions button {
    min-width: 0;
  }
  .mobile-projects-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
  }
  .mobile-project-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px;
    border: 0;
    text-align: left;
    background: var(--surface);
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .mobile-project-icon {
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px 48px;
  }
  .mobile-project-item.prj-webhemi .mobile-project-icon {
    background-image: url("./prj-webhemi-Cc95q6jm.svg");
  }
  .mobile-project-item.prj-snowrunner-tuning-shop .mobile-project-icon {
    background-image: url("./prj-snowrunner-tuning-shop-DGguwCST.png");
  }
  .mobile-project-item.prj-pixicon .mobile-project-icon {
    background-image: url("./prj-pixicon-BqKCgOaD.png");
  }
  .mobile-project-item.prj-astraeus .mobile-project-icon {
    background-image: url("./prj-astraeus-DFljkciL.svg");
  }
  .mobile-project-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
  }
  .mobile-project-copy strong {
    font-size: 13px;
  }
  .mobile-project-copy span {
    font-size: 11px;
    color: #555;
    line-height: 1.4;
  }
  .mobile-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: var(--mobile-dock-height);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    box-shadow: inset 0 1px #fff, inset 0 -1px #868a8e;
  }
  .mobile-dock-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 23px;
    padding: 0 12px 0 28px;
    border: 0;
    border-radius: 0;
    background-color: var(--surface);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px 16px;
    box-shadow: var(--border-raised-outer), var(--border-raised-inner);
    font: inherit;
    font-size: 12px;
    line-height: 23px;
    color: var(--text-color);
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-dock-btn:not(:disabled):active {
    box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
  }
  .mobile-dock-btn.file-pdf {
    background-image: url("./file-pdf-DBoPOWBH.svg");
  }
  .mobile-dock-btn.github {
    background-image: url("./github-CkndLro0.svg");
  }
  body.dashboard.is-mobile > .desktop-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
  }
  body.dashboard.is-mobile > .desktop-modal-layer > #window-message-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 24px);
    touch-action: auto;
  }
  body.dashboard.is-mobile > .desktop-modal-layer > #window-message-dialog .title-bar {
    cursor: default;
    touch-action: auto;
  }
  .mobile-scroll .about-charts-row {
    grid-template-columns: 1fr;
  }
  .mobile-scroll .about-stat-row {
    grid-template-columns: 1fr;
  }
  .mobile-scroll .about-card {
    grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
    column-gap: 16px;
  }
  .mobile-scroll .about-card-photo img {
    max-width: 120px;
  }
}
body.dashboard:not(.is-mobile) > .mobile-portfolio {
  display: none !important;
}

/* Product: desktop onboarding tour (Win98 coach marks). */
.desktop-tour-layer {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: auto;
}

.desktop-tour-layer.is-closed {
  display: none;
}

.desktop-tour-layer[hidden] {
  display: none !important;
}

.desktop-tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.desktop-tour-spotlight {
  position: fixed;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 0;
  box-shadow: 0 0 0 2px var(--dialog-blue), 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.desktop-tour-dialog {
  position: fixed;
  margin: 0;
  min-width: min(100vw - 24px, var(--width-window-sm, 332px));
  max-width: calc(100vw - 24px);
  z-index: 1;
}

.desktop-tour-dialog.is-wizard-step {
  min-width: min(100vw - 24px, var(--width-window-md, 550px));
  overflow: hidden;
}

.desktop-tour-dialog.is-wizard-step > .window-body {
  margin: var(--element-spacing);
  padding: 0;
  overflow: hidden;
}

.desktop-tour-coach-body,
.desktop-tour-wizard-body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.desktop-tour-coach-body[hidden],
.desktop-tour-wizard-body[hidden] {
  display: none !important;
}

.desktop-tour-coach-body > .desktop-tour-body {
  margin: 0 0 12px;
  line-height: 1.45;
}

.desktop-tour-wizard-pane.wizard-panel-layout {
  grid-template-areas: "banner info";
  grid-template-rows: auto;
  flex: 0 0 auto;
}

.desktop-tour-wizard-pane.wizard-panel-layout > .panel.info {
  border-bottom: 1px solid #868a8e;
  min-width: 0;
  color: #1a1a1a;
  font-size: 13px;
  line-height: 1.55;
}

.desktop-tour-wizard-pane.wizard-panel-layout > .panel.info h4 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.25;
  margin: 0 0 12px;
  color: #1086d6;
}

.desktop-tour-wizard-pane.wizard-panel-layout > .panel.info p {
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 10px;
}

.desktop-tour-wizard-pane.wizard-panel-layout > .panel.info p:last-child {
  margin-bottom: 0;
}

.desktop-tour-dialog > .title-bar {
  cursor: default;
}

.desktop-tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.desktop-tour-coach-body > .desktop-tour-footer {
  margin-top: 0;
  padding: 0;
}

.desktop-tour-wizard-footer {
  flex: 0 0 auto;
  margin-top: 0;
  margin-left: -8px;
  margin-right: -8px;
  width: calc(100% + 16px);
  padding: 10px 16px 0 8px;
  border-top: 1px solid #ffffff;
}

.desktop-tour-progress {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  color: #555;
  text-align: left;
  white-space: nowrap;
}

.desktop-tour-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.desktop-tour-actions > * + * {
  margin-left: 0;
}

body.is-tour-active .desktop-tour-layer ~ * {
  /* Tour layer is last child; keep desktop usable only through tour dialog. */
}