* { margin: 0; padding: 0; box-sizing: border-box; }

:root {

  --fg:            #000000;
  --fg-reverted:   #ffffff;
  --fg-disabled:   #aca899;
  --fg-link:       #215dc6;
  --selection:     #316ac5;
  --face:          #ece9d8;
  --white-frame:   #ffffff;
  --tooltip-bg:    #ffffe1;
  --input-border:  #7f9db9;
  --sep-soft:      #c7c5b2;
  --sep-blue:      #b0c4de;
  --heading-ink:   #0a246a;
  --drop-shadow:   2px 2px 3px 0 rgba(0, 0, 0, .5);

  --title-grad: linear-gradient(180deg,
    #3d95ff 6.7001%, #0372ff 10.36%, #0365f1 13.893%, #0053e1 25.842%,
    #0058ee 56.288%, #026afe 74.104%, #026afe 84.704%, #0060fc 90.793%,
    #0043cf 96.431%, #0020c8 100%);
  --title-inner-shadow: inset 8px 0 5px -5px rgba(34, 37, 46, .54),
                        inset -8px 0 5px -5px rgba(0, 15, 102, .66);
  --disable-wash:  rgba(242, 217, 217, .5);
  --title-border:  #0059e8;
  --title-lateral: #0020c8;
  --border-left:   #1255e7;
  --border-right:  #002ebe;
  --border-left-idle:  #8297ec;
  --border-right-idle: #7984d8;

  --xp-font: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;
  --title-font: Tahoma, "Segoe UI", "Trebuchet MS", sans-serif;

  --ui-font: "Inter", "Segoe UI", Tahoma, sans-serif;

  --tb-h: 30px;

  --z: 1;
}

#desktop, #shutdown, #poweroff {
  zoom: var(--z);
  width: calc(100vw / var(--z));
  height: calc(100vh / var(--z));
}

html, body { height: 100%; overflow: hidden; touch-action: pan-x pan-y; }
body {
  font: 400 11px/normal var(--xp-font);
  color: var(--fg);
  background: #000;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
[hidden] { display: none !important; }
button { font: 400 11px/normal var(--xp-font); cursor: pointer; color: inherit; }
img {
  image-rendering: -webkit-optimize-contrast;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  user-select: none;
}

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('brand/font/pixelify-sans.ttf') format('truetype');
}

#sound-hint {
  position: fixed; left: 50%; top: 28px; transform: translateX(-50%);
  z-index: 1002; pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  font-family: 'Pixelify Sans', var(--xp-font); font-size: 20px; letter-spacing: .02em;
  color: #fff; background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 10px 20px;
  opacity: 0; transition: opacity .4s ease;
}
#sound-hint img { width: 28px; height: 28px; }
#sound-hint.show { opacity: .7; animation: sound-hint-pulse 1.8s ease-in-out infinite; }
@keyframes sound-hint-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }

#bios {
  --bs: min(1px, calc(100vh / 1080), calc(100vw / 1920));
  position: fixed; inset: 0; background: #000; z-index: 1001;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#bios-canvas {
  position: relative; flex: none;
  width: 1920px; height: 1080px;
  transform: scale(min(calc(100vw / 1920), calc(100vh / 1080)));
}
#bios-logo { position: absolute; left: 880px; top: 288px; width: 160px; height: 252px; }
.bios-info {
  position: absolute; left: 670px; top: 657px; width: 580px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 400 20px/normal 'Pixelify Sans', var(--xp-font);
  color: #fff; text-align: center;
}
.bios-bar {
  width: 330px; height: 30px; border: 2px solid #fff; position: relative; overflow: hidden;
}
.bios-bar-fill {
  position: absolute; inset: 0; width: 0%; background: #fff;
  animation: bios-fill 2.05s step-end forwards;
}
@keyframes bios-fill {
  0%      { width: 0%; }
  4.39%   { width: 18%; }
  7.32%   { width: 18%; }
  11.22%  { width: 34%; }
  15.61%  { width: 34%; }
  18.54%  { width: 47%; }
  25.37%  { width: 58%; }
  29.27%  { width: 58%; }
  36.59%  { width: 75%; }
  85.37%  { width: 75%; }
  89.27%  { width: 88%; }
  92.20%  { width: 88%; }
  100%    { width: 100%; }
}
.bios-f9 {
  position: absolute;
  right: calc(60 * var(--bs)); top: calc(45.55 * var(--bs)); width: calc(580 * var(--bs));
  display: flex; flex-direction: column; gap: calc(12 * var(--bs));
  font-family: 'Pixelify Sans', var(--xp-font);
  color: #fff; text-align: right;
}
.bios-f9-line { font-size: calc(20 * var(--bs)); }
.bios-f9-note { font-size: calc(11 * var(--bs)); opacity: .75; }
.bios-energystar {
  position: absolute;
  left: calc(60 * var(--bs)); bottom: calc(45.56 * var(--bs));
  width: calc(160.75 * var(--bs)); height: calc(163.89 * var(--bs));
}
.bios-intel {
  position: absolute;
  right: calc(60 * var(--bs)); bottom: calc(53.08 * var(--bs));
  width: calc(223.85 * var(--bs)); height: calc(280.375 * var(--bs));
}

#boot {
  --bs: min(1px, calc(100vh / 1080), calc(100vw / 1920));
  --bsn: min(1, calc(100vh / 1080px), calc(100vw / 1920px));   /* unitless twin of --bs, for transform: scale() */
  position: fixed; inset: 0; background: #000; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(53.27 * var(--bs));
  color: #fff;
}
html[data-mode="mobile"] #boot {
  --bs: min(1px, calc(100vh / 1080), calc(100vw / 700));
  --bsn: min(1, calc(100vh / 1080px), calc(100vw / 700px));
}
html[data-mode="mobile"] .bios-energystar {
  transform-origin: bottom left;
  transform: scale(3);
}
html[data-mode="mobile"] .bios-intel {
  transform-origin: bottom right;
  transform: scale(2);
}
html[data-mode="mobile"] .bios-f9 {
  transform-origin: top right;
  transform: scale(3);
}
#boot-logo {
  width: calc(396 * var(--bs));
  height: calc(396 * var(--bs));
}
.boot-bar {
  width: calc(454 * var(--bs));
  height: calc(46 * var(--bs));
  overflow: hidden; position: relative;
}
/* built at native 1x pixel size, then scaled as a single unit — keeps every
   stepped-corner piece pixel-aligned instead of each rounding independently */
.boot-bar-px {
  position: absolute; top: 0; left: 0;
  width: 454px; height: 46px;
  transform: scale(var(--bsn)); transform-origin: top left;
}

.boot-bar-px > i { position: absolute; background: #d9d9d9; }
.bb-top, .bb-bottom { width: 437.88px; height: 4px; left: 8.06px; }
.bb-top { top: 0; }
.bb-bottom { top: 42px; }
.bb-tl, .bb-tr, .bb-bl, .bb-br { width: 4px; height: 4px; }
.bb-tl { left: 4.04px; top: 3.99px; }
.bb-tr { right: 4.04px; top: 3.99px; }
.bb-bl { left: 4.04px; top: 37.99px; }
.bb-br { right: 4.04px; top: 37.99px; }
.bb-left, .bb-right { width: 4px; height: 30.106px; top: 7.95px; }
.bb-left { left: 0; }
.bb-right { right: 0; }

.boot-track {
  position: absolute; left: 8.06px; top: 0;
  width: 437.88px; height: 100%;
  overflow: hidden;
}
.boot-blocks {
  position: absolute; top: 7.95px; left: 0;
  display: flex; gap: 4px;
  animation: bootmove 2.4s steps(25) infinite;
}
.boot-blocks i {
  width: 16.6px;
  height: 30.05px;
  flex: none;
  background: linear-gradient(180deg, #172a89 15%, #738bff 50%, #172a89 90%);
}
@keyframes bootmove {
  from { transform: translateX(-57.8px); }
  to   { transform: translateX(437.88px); }
}
.boot-credit {
  width: calc(250 * var(--bs));
  height: calc(20.52 * var(--bs));
}

#welcome {
  position: fixed; inset: 0; z-index: 999;
  background: linear-gradient(180deg, #5a7edc 0%, #4166c0 8%, #2a4ba8 50%, #1e3c94 92%, #16307e 100%);
  display: flex; align-items: center; justify-content: center;
}
.welcome-band {
  position: absolute; top: 12%; bottom: 12%; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  border-top: 2px solid rgba(255, 255, 255, .5);
  border-bottom: 2px solid #ff9c00;
}
.welcome-text {
  position: relative; color: #fff; font-size: 60px; font-style: italic; font-weight: 600;
  font-family: "Franklin Gothic Medium", "Arial Narrow", var(--xp-font);
  text-shadow: 2px 3px 6px rgba(0, 0, 0, .4);
  animation: welcomefade 1.4s ease both;
}
@keyframes welcomefade { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

#desktop { position: fixed; inset: 0; overflow: hidden; }
#bliss {
  position: absolute; inset: 0;

  --wall-img: url("winxpbg.jpg") center center / cover no-repeat;
  background:
    var(--wall-img),
    #2b6cd4;
}

#bliss.hacked {
  background:
    linear-gradient(rgba(6, 20, 46, .42), rgba(6, 20, 46, .42)),
    url("media/nhat/nhat-tile.png") center / 168px repeat,
    linear-gradient(180deg, #2b6cd4 0%, #7fb2ec 46%, #4ba026 62%, #2f7d15 100%);
}

#icons {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
}
.dicon {
  position: absolute; pointer-events: auto; touch-action: none;
  background: none; border: none; width: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 2px;
}
.dicon.dragging { opacity: .7; z-index: 6; }
.dicon:focus-visible span { outline: 1px dotted #fff; }
.dicon img {
  width: 32px; height: 32px;
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, .55));
}
.dicon img.brand-ic {
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, .55))
          drop-shadow(0 0 1px rgba(0, 0, 0, .45));
}
.dicon span {
  color: #fff; line-height: 1.25; text-align: center;
  text-shadow: 1px 1px 2px #000, 0 0 4px rgba(0, 0, 0, .7);
  padding: 1px 3px;
}
.dicon.selected img { filter: drop-shadow(1px 2px 3px rgba(0,0,0,.55)) hue-rotate(-12deg) saturate(1.4) brightness(.85); }
.dicon.selected span { background: var(--selection); outline: 1px dotted #fff; text-shadow: none; }

.xpwin {
  position: absolute; z-index: 10;
  display: flex; flex-direction: column;
  min-width: 220px; min-height: 120px;
  border: none; padding: 0 3px 3px;
  border-radius: 9px 9px 0 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, #052dd7 0 1px, #1464eb 1px 2px, #0855dd 2px 3px) left  / 3px 100% no-repeat,
    linear-gradient(90deg, #0046ee 0 1px, #0028b5 1px 2px, #00148d 2px 3px) right / 3px 100% no-repeat,
    linear-gradient(180deg, #0142ea 0 1px, #0127b4 1px 2px, #00138d 2px 3px) bottom / 100% 3px no-repeat,
    var(--face);
  box-shadow: 2px 4px 14px rgba(0, 0, 30, .45);
}
.xpwin.inactive {
  background:
    linear-gradient(90deg, #6e86e4 0 1px, #76a2ee 1px 2px, #709ae7 2px 3px) left  / 3px 100% no-repeat,
    linear-gradient(90deg, #798fe2 0 1px, #7980c5 1px 2px, #7975b3 2px 3px) right / 3px 100% no-repeat,
    linear-gradient(180deg, #798de0 0 1px, #7a7fc6 1px 2px, #7975b2 2px 3px) bottom / 100% 3px no-repeat,
    var(--face);
}
.xpwin.maximized { border-radius: 0; padding: 0; }
.xpwin.maximized::after { content: none; }
.xpwin.maximized .titlebar {
  margin: 0; border: none; border-radius: 0;
}
.xpwin.maximized .titlebar::after { border-radius: 0; }

.xpwin::after, .nx-win::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;

  left: -1px; right: -1px; top: 29px; bottom: -1px;

  background:
    linear-gradient(135deg, #1464eb, #00138d) left  bottom / 3px 3px no-repeat,
    linear-gradient(225deg, #0028b5, #00148d) right bottom / 3px 3px no-repeat,
    linear-gradient(90deg, #052dd7 0 1px, #1464eb 1px 2px, #0855dd 2px 3px) left  / 3px 100% no-repeat,
    linear-gradient(90deg, #0046ee 0 1px, #0028b5 1px 2px, #00148d 2px 3px) right / 3px 100% no-repeat,
    linear-gradient(180deg, #0142ea 0 1px, #0127b4 1px 2px, #00138d 2px 3px) bottom / 100% 3px no-repeat;
}
.xpwin.inactive::after {
  background:
    linear-gradient(135deg, #76a2ee, #7975b2) left  bottom / 3px 3px no-repeat,
    linear-gradient(225deg, #7980c5, #7975b3) right bottom / 3px 3px no-repeat,
    linear-gradient(90deg, #6e86e4 0 1px, #76a2ee 1px 2px, #709ae7 2px 3px) left  / 3px 100% no-repeat,
    linear-gradient(90deg, #798fe2 0 1px, #7980c5 1px 2px, #7975b3 2px 3px) right / 3px 100% no-repeat,
    linear-gradient(180deg, #798de0 0 1px, #7a7fc6 1px 2px, #7975b2 2px 3px) bottom / 100% 3px no-repeat;
}

.titlebar {
  position: relative;
  height: 29px; flex: none;
  margin: 0 -3px;
  border: 0px solid var(--title-border);
  border-bottom-color: var(--title-lateral);
  border-left-color: var(--title-lateral);
  border-right-color: var(--title-lateral);
  border-radius: 6px 6px 0 0;
  background: var(--title-grad);
  box-shadow: var(--title-inner-shadow);
  display: flex; align-items: center;
  padding: 5px; gap: 5px;
  touch-action: none;
}
.xpwin.inactive .titlebar {
  border-color: #7999e0;
  border-left-color: #797cd0;
  border-right-color: #797cd0;
  border-bottom-color: #797cd0;
}

.xpwin.inactive .titlebar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--disable-wash);
  border-radius: 7px 7px 0 0;
  pointer-events: none;
}
.titlebar > * { position: relative; z-index: 1; }
.titlebar img { width: 16px; height: 16px; flex: none; will-change: transform; }
.title-text {
  flex: 1; color: #fff; font: 520 12px/normal var(--title-font);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xpwin.inactive .title-text { color: #d8e4f8; text-shadow: none; }

.trigram { display: flex; align-items: flex-end; gap: 4px; flex: none; }

.tbtn {
  position: relative;
  width: 21px; height: 21px; flex: none; padding: 0;
  border: 1px solid #fff; border-radius: 2px;
  background: linear-gradient(180deg, #245ff5 33%, #256bf8 66%);
  box-shadow: inset -2px -3px 5px 0 #0844c3,
              inset 10px 2px 8px 0 rgba(255, 255, 255, .33),
              inset 0 0 0 1px #004cff;
  font-size: 0;
}
.tbtn.close {
  background: linear-gradient(180deg, #e46446, #e65d32);
  box-shadow: inset -2px -3px 5px 0 #aa2300,
              inset 10px 2px 8px -2px rgba(255, 255, 255, .1),
              inset 0 0 0 1px #e45f3e;
}
.tbtn:hover { filter: brightness(1.15); }
.tbtn:active { filter: brightness(.82) saturate(1.2); }
.xpwin.inactive .tbtn { opacity: .6; }

.tbtn i { position: absolute; display: block; }
.tbtn.min i,
.tbtn.max i,
.tbtn.close i {
  inset: 0; margin: auto;
  width: 13px; height: 13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.tbtn.min i   { background-image: url("icons/minimize.png"); }
.tbtn.max i   { background-image: url("icons/maximize.svg"); }
.tbtn.close i { background-image: url("icons/close.svg"); }

.winbody { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--face); }

.resize-grip {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize; z-index: 3; touch-action: none;
  background: url("chrome/resize-handler.svg") no-repeat;
  background-position: right 5px bottom 5px;
  background-size: 10px 10px;
}

.menubar {
  flex: none; display: flex; gap: 0; padding: 1px 2px;
  background: var(--face);
}
.menubar span { padding: 4px 8px; }
.menubar span:hover { background: var(--selection); color: var(--fg-reverted); }
.xpwin.inactive .menubar span { color: var(--fg-disabled); }

.addressbar {
  flex: none; display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; color: #444;
  background: linear-gradient(136.65deg, #f3f4f7 0%, #e9e5cb 100%);
  box-shadow: inset 0 -4px 3px -3px #cbc7b8;
}
.addr-field {
  flex: 1; height: 21px;
  background: #fff; border: 1px solid var(--input-border); border-radius: 0;
  display: flex; align-items: center; gap: 4px; padding: 3px; color: var(--fg);
}
.addr-ic { width: 16px; height: 16px; flex: none; }
.ie-go-btn {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 23px; height: 23px; padding: 0; border: none; background: none;
}
.ie-go-btn img { width: 20px; height: 20px; }
.ie-go-btn:hover { filter: brightness(1.1); }
.ie-go-btn:active { filter: brightness(.9); }

.ie-toolbar {
  flex: none; display: flex; align-items: stretch; gap: 1px; padding: 2px 4px;
  background: var(--face); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
}
.ie-tb-sep { flex: none; width: 1px; margin: 3px 3px; background: rgba(0, 0, 0, .2); }
.ie-tbtn {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid transparent; border-radius: 3px; background: none;
  padding: 3px 8px 2px; color: var(--fg); font: 400 10px/1.1 var(--xp-font);
}
.ie-tbtn img { width: 18px; height: 18px; object-fit: contain; }
.ie-tbtn:hover:not(:disabled) { background: #e3edfb; border-color: #9dbde8; }
.ie-tbtn:active:not(:disabled) { background: #cfe0f5; border-color: #6f9bd1; }
.ie-tbtn:disabled { opacity: .4; }
.xpwin.inactive .ie-tbtn { opacity: .7; }

.xpbtn, .err-ok, .shut-foot button {
  min-width: 75px; height: 23px; padding: 4px 12px;
  border: 1px solid #1c5180; border-radius: 2.5px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f0ea 100%);
  color: var(--fg);
  box-shadow: inset 1.5px 1.5px 2px 0 #ffffff,
              inset -1.5px -2.5px 2px 0 rgba(83, 55, 0, .2);
}
.xpbtn:hover, .err-ok:hover, .shut-foot button:hover {
  box-shadow: inset 0 1.5px 2px .5px rgba(255, 255, 255, .75),
              inset 0 -3.5px 2px -2px rgba(0, 0, 0, .25),
              inset 0 0 0 3px #fbca6a;
}
.xpbtn:focus-visible, .err-ok:focus-visible, .shut-foot button:focus-visible {
  outline: none;
  box-shadow: inset 0 3.5px 2px -2px rgba(255, 255, 255, .25),
              inset -1px -3.5px 2px -2px rgba(0, 0, 0, .55),
              inset 0 0 0 3px #93b3e7;
}
.xpbtn:active, .err-ok:active, .shut-foot button:active {
  background: linear-gradient(180deg, #e5e4dd 0%, #e0e0d7 100%);
  box-shadow: inset -1.5px -1.5px 2px 0 #ffffff,
              inset 1.5px 2.5px 2px 0 rgba(83, 55, 0, .2);
}

.explorer { flex: 1; display: flex; overflow: hidden; background: #fff; }
.ex-side {
  width: 186px; flex: none; overflow-y: auto;
  background: linear-gradient(180deg, #7ba2e7 0%, #6b85dc 100%);
  border: 1px solid #fff;
  padding: 20px 10px 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.ex-panel { border-radius: 3px 3px 0 0; overflow: hidden; }
.ex-panel-title {
  height: 24px; padding: 3px 6px;
  display: flex; align-items: center; justify-content: space-between;
  font: 700 11px/normal Arial, var(--xp-font); color: #215dc6;
  background: linear-gradient(90deg, #ffffff 0%, #c6d3f7 100%);
  border-radius: 3px 3px 0 0;
}
.ex-panel:first-child .ex-panel-title {
  color: #fff;
  background: linear-gradient(90deg, #0049b5 0%, #295dce 100%);
  height: 21px;
}
.ex-panel-body {
  background: #d6dff7;
  border: 1px solid #fff; border-top: none;
  padding: 10px; display: flex; flex-direction: column; gap: 5px;
}
.ex-panel:first-child .ex-panel-body { background: #eff3ff; }
.ex-panel-body a { color: var(--fg-link); cursor: pointer; line-height: 16px; }
.ex-panel-body a:hover { text-decoration: underline; text-decoration-skip-ink: from-font; }

.ex-main { flex: 1; overflow-y: auto; padding: 12px 16px; background: #fff; }
.ex-group {
  font-weight: 700; color: #0046d5; margin: 16px 0 16px;
  border-bottom: 1px solid var(--sep-blue); padding-bottom: 2px;
}
.ex-items { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; }
.ex-item {
  width: 150px; display: flex; align-items: center; gap: 7px; padding: 1px;
  border: 1px solid transparent;
}
.ex-item img { width: 32px; height: 32px; flex: none; }
.ex-item:hover { background: var(--selection); color: #fff; }
.ex-exe { cursor: pointer; }

.notepad-text {
  flex: 1; resize: none; border: none; outline: none;
  font: 13px "Lucida Console", "Courier New", monospace;
  padding: 3px 5px; background: #fff; user-select: text;
  border-top: 1px solid #808080;
}
.notepad-text::selection { background: var(--selection); color: #fff; }

.ms-shell {
  flex: 1; background: #c0c0c0; padding: 8px;
  border-top: 2px solid #fff; border-left: 2px solid #fff;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  --ms-ui-scale: 1;
}
.ms-top {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; max-width: 260px; padding: 5px 7px; background: #c0c0c0;
  border: 2px solid; border-color: #808080 #fff #fff #808080;
}
.ms-lcd {
  display: flex; background: #000; padding: 2px;
  border: 1px solid; border-color: #808080 #fff #fff #808080;
}
.ms-digit {
  display: flex; align-items: center; justify-content: center;
  width: calc(13px * var(--ms-ui-scale)); height: calc(23px * var(--ms-ui-scale));
  font: 700 calc(16px * var(--ms-ui-scale)) / 1 "Courier New", monospace;
  font-style: normal; color: #ff2b2b;
}
.ms-digit::before { content: attr(data-d); }
.ms-face {
  width: calc(24px * var(--ms-ui-scale)); height: calc(24px * var(--ms-ui-scale));
  padding: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(15px * var(--ms-ui-scale)); line-height: 1;
  background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
.ms-face:active { border-color: #808080 #fff #fff #808080; }
.ms-grid { display: grid; border: 3px solid; border-color: #808080 #fff #fff #808080; }
.ms-cell {
  width: var(--ms-cell, 20px); height: var(--ms-cell, 20px); padding: 0;
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--ms-cell, 20px) * 0.62); font-weight: 700; line-height: 1;
  background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff;
  position: relative;
}
.ms-cell.open { border: 1px solid #808080; }
.ms-cell.boom { background: #ff0000; }
.ms-cell.wrong::after {
  content: "✕"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); color: #ff0000; font-weight: 900;
  font-size: calc(var(--ms-cell, 20px) * 0.6); text-shadow: 0 0 2px #fff;
}
.ms-cell[data-n="1"] { color: #0000ff; }
.ms-cell[data-n="2"] { color: #008200; }
.ms-cell[data-n="3"] { color: #ff0000; }
.ms-cell[data-n="4"] { color: #000084; }
.ms-cell[data-n="5"] { color: #840000; }
.ms-cell[data-n="6"] { color: #008284; }
.ms-cell[data-n="7"] { color: #000; }
.ms-cell[data-n="8"] { color: #808080; }

#nhatexe {
  position: absolute; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 20, .35);
}
#nhatexe[hidden] { display: none; }

.nx-win {
  position: relative;
  width: min(660px, 85vw);
  display: flex; flex-direction: column;
  border: none; padding: 0 3px 3px; border-radius: 8px 8px 0 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, #052dd7 0 1px, #1464eb 1px 2px, #0855dd 2px 3px) left  / 3px 100% no-repeat,
    linear-gradient(90deg, #0046ee 0 1px, #0028b5 1px 2px, #00148d 2px 3px) right / 3px 100% no-repeat,
    linear-gradient(180deg, #0142ea 0 1px, #0127b4 1px 2px, #00138d 2px 3px) bottom / 100% 3px no-repeat,
    var(--face);
  box-shadow: 2px 6px 22px rgba(0, 0, 30, .5);
}
.nx-win.shake { animation: nx-shake .32s; }
@keyframes nx-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.nx-title {
  height: 29px; flex: none; margin: 0 -3px;
  border: 1px solid var(--title-border);
  border-bottom-color: var(--title-lateral);
  border-left-color: var(--title-lateral); border-right-color: var(--title-lateral);
  border-radius: 8px 8px 0 0;
  background: var(--title-grad); box-shadow: var(--title-inner-shadow);
  display: flex; align-items: center; padding: 5px; gap: 4px;
}
.nx-title img { width: 16px; height: 16px; flex: none; }
.nx-name {
  flex: 1; color: #fff; font: 700 13px/1 var(--title-font);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5); padding-left: 2px;
}

.nx-body {
  height: 300px; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: url("media/nhat/nhat-tile.png") center / 150px repeat;
  image-rendering: auto;
}
.nx-card {
  max-width: 540px; text-align: center;
  background: rgba(236, 233, 216, .92); border: 1px solid var(--input-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  padding: 20px 22px;
}
.nx-msg { font: 400 13px/1.45 var(--xp-font); color: #000; margin-bottom: 16px; }
.nx-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nx-btns a, .nx-btns button {
  height: auto; min-height: 42px; padding: 8px 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 20px/1 var(--xp-font); text-align: center;
  text-decoration: none; color: #000;
}
.nx-foot {
  flex: none; height: 22px;
  background: linear-gradient(177deg, #f3f4f7 0%, #e9e5cb 100%);
  box-shadow: inset 0 -4px 3px -3px #cbc7b8; border-top: 1px solid #fff;
}
@media (max-width: 560px) {
  .nx-body { height: 260px; padding: 12px; }
  .nx-btns { flex-direction: column; }
}

.nw-hys {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: clamp(28px, 8cqi, 56px) clamp(16px, 4cqi, 32px);
  background: #fff;
}
.nw-hys-photo {
  width: min(220px, 50cqi); aspect-ratio: 381 / 400; object-fit: cover;
  filter: grayscale(1) contrast(1.25) brightness(1.05);
}
.nw-hys-headline {
  font: 700 clamp(20px, 5cqi, 32px)/1.2 var(--xp-font);
  color: #0a246a; margin: 0;
}
.nw-hys-btns { display: flex; gap: clamp(24px, 8cqi, 48px); }
.nw-hys-btn {
  appearance: none; -webkit-appearance: none;
  background: none; border: none; padding: 4px 8px; cursor: pointer;
  font: 700 clamp(18px, 4cqi, 26px)/1 var(--xp-font); color: #0a246a;
}
.nw-hys-btn:hover, .nw-hys-btn:focus-visible { text-decoration: underline; }

@font-face {
  font-family: 'Titan One';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('game/font/titan-one-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Titan One';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('game/font/titan-one-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.dn-shell {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.dn-stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.dn-canvas {
  display: block;
  background: #0d2415; touch-action: none; cursor: crosshair;
}

.xpwin.dialog { min-height: 0; }
.err-body { display: flex; gap: 14px; padding: 16px 18px; align-items: center; }
.err-ic { width: 32px; height: 32px; flex: none; }
.err-msg { max-width: 260px; line-height: 1.5; white-space: pre-line; }
.err-foot { display: flex; justify-content: center; padding: 0 0 14px; }

#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--tb-h); z-index: 500;
  display: flex; align-items: stretch; justify-content: space-between;
  background: linear-gradient(180deg,
    #3168d5 2.8044%, #4993e6 6.9948%, #286add 14.1%, #2359d6 19.93%,
    #2157d7 36.28%, #245ddb 57.212%, #2662df 75.354%, #2663e0 90.704%,
    #1e50c4 94.891%, #3155b0 100%);
  overflow: hidden;
}

#startbtn {
  flex: none; height: 100%;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px 24px 7px 10px;
  border: none; border-radius: 0 15px 15px 0;
  background: #4db632;
  box-shadow: 1px 1px 1px #307fe8,
              inset 1px 0 2px rgba(0, 67, 38, .5),
              inset -1px 0 2px rgba(0, 67, 38, .5),
              inset 0 11px 17px rgba(50, 137, 50, .66),
              inset -4px 0 6px #115638,
              inset 0 -3px 4px #328632,
              inset 12px 0 12px rgba(0, 0, 0, .2),
              inset -14px 0 12px rgba(0, 0, 0, .2);
  position: relative; overflow: hidden;
}
#startbtn:hover {
  background: #3ac43b;
  box-shadow: 1px 0 1px #307fe8,
              inset 1px 0 2px rgba(0, 67, 38, .5),
              inset -1px 0 2px rgba(0, 67, 38, .5),
              inset 0 11px 17px #41ab41,
              inset -4px 0 6px rgba(17, 86, 56, .33),
              inset 0 -3px 4px rgba(50, 134, 50, .5),
              inset -14px 0 12px rgba(0, 0, 0, .05);
}

#startbtn:active, #startbtn.open {
  background: #1f9a1f;
  box-shadow: 1px 1px 1px #307fe8,
              inset 2px 2px 4px rgba(0, 67, 38, .66),
              inset -1px 0 2px rgba(0, 67, 38, .5),
              inset 0 -1px 2px rgba(17, 86, 56, .66),
              inset 0 3px 4px #328632,
              inset 12px 6px 12px rgba(0, 0, 0, .2),
              inset -12px 6px 12px rgba(0, 0, 0, .2);
}

#startbtn::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  filter: blur(2px);
  background-repeat: no-repeat;
  background-position: 3.01% 6.67%, 2.02% 10%;
  background-size: 92.03% 13.33%, 2.97% 60%;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .22)),
                     linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, 0));
}
#startbtn:active::before, #startbtn.open::before { opacity: 0; }

.start-flag {
  width: 16px; height: 16px; flex: none;
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .5));
  position: relative; z-index: 1;
}
.start-text {
  font: italic 700 18px/normal var(--ui-font);
  color: #fff; text-shadow: 1px 1.5px 3px #2b3100;
  position: relative; z-index: 1;
  min-width: 43px; white-space: nowrap;
}

#tasks { flex: 1; display: flex; align-items: center; gap: 0.5px; padding: 0 6px; overflow: hidden; }
.taskbtn {
  flex: 0 1 160px; min-width: 36px; height: 25px;
  display: flex; align-items: center; gap: 3px;
  padding: 4px 15px 5px 10px; font-size: 11px;
  border: 1px solid rgba(8, 41, 111, .5); border-radius: 3px;
  color: #fff; text-align: left; overflow: hidden;
  background: linear-gradient(180deg, #4892f7 0%, #397df3 29.796%, #3980f4 66.346%, #3981f4 100%);
  box-shadow: inset -1px -.5px 3px 0 #2652b0,
              inset 2px 0 2px 0 rgba(155, 197, 255, .5);
}
.taskbtn img { width: 16px; height: 16px; flex: none; }
.taskbtn span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.taskbtn:hover {
  border-color: rgba(9, 57, 168, .8);
  background: linear-gradient(180deg, #8bc0ff 0%, #55a3ff 29.796%, #55a0ff 66.346%, #569fff 100%);
  box-shadow: inset -1px -.5px 3px 0 #0051c8, inset 2px 0 2px 0 #9ccaff;
}
.taskbtn.active {
  padding: 5px 15px 4px 10px;
  background: linear-gradient(180deg, #164dbc 0%, #184eb8 100%);
  box-shadow: inset 1px .5px 2px 0 rgba(0, 0, 0, .5), inset -1px -1px 3px 0 #2a5db6;
}
.taskbtn.active:hover {
  background: linear-gradient(180deg, #2f6fed 0%, #3674e8 100%);
  box-shadow: inset 2px 1.5px 2px 0 rgba(0, 0, 0, .2), inset -1px -1px 2px 0 #2a5db6;
}

#tray {
  flex: none; align-self: stretch;
  display: flex; align-items: center; justify-content: flex-end; gap: 1px;
  padding: 3px 8px 3px 11px;
  background: linear-gradient(180deg,
    #095bc9 2.4507%, #19b9f3 5.4108%, #19b9f3 9.7832%, #149eed 10.591%,
    #1290e8 19.471%, #0d8dea 60.172%, #0f9eef 80.893%, #119deb 90.266%,
    #226bce 97.212%);
  filter: drop-shadow(-1px 0 .5px rgba(0, 0, 0, .5));
  color: #fff; position: relative;
}
#tray::after {
  content: ""; position: absolute; inset: 80% 15.28% 6.67% .99%;
  background: linear-gradient(90deg, #1ad7fa, rgba(26, 215, 250, 0));
  opacity: .33; pointer-events: none;
}
.tray-ic { width: 16px; height: 16px; }
#clock { padding: 0 4px; font-size: 11px; }

#langbtn {
  display: flex; align-items: center; gap: 3px;
  margin: 0 2px; padding: 0 3px; height: 18px;
  background: none; border: none; border-radius: 2px;
  color: #fff; font: inherit; font-size: 11px; cursor: pointer;
}
#langbtn:hover { background: rgba(255, 255, 255, .22); }
#langbtn:active { background: rgba(0, 0, 0, .18); }
#langbtn:focus-visible { outline: 1px dotted #fff; outline-offset: -1px; }
#langcode { letter-spacing: .3px; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }

#startmenu {
  position: absolute; left: 0; bottom: var(--tb-h); z-index: 600;
  width: 380px;
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid #215cc5;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg,
    #74aae8 0%, #1969d2 .77526%, #2174db 6.392%, #4792ec 13.18%,
    #448be3 91.946%, #2577df 95.857%, #0d5bc7 100%);
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .5),
              inset -4px 0 4px -1px rgba(0, 46, 137, .25);
}

.sm-header {
  height: 64px; width: 100%; flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 6px; overflow: hidden;
}
.sm-avatar {
  width: 52px; height: 52px; flex: none;
  border: 2px solid #ccd6eb; border-radius: 5px;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .25);
  overflow: hidden; background: linear-gradient(135deg, #f8c471, #d68910);
}
.sm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sm-user {
  font: 600 18px/normal var(--ui-font); letter-spacing: .36px;
  color: #fff; text-shadow: 1px 2px 3px rgba(0, 0, 0, .5);
}

.sm-body {
  position: relative;
  width: 376px; min-height: 374px; flex: 1;
  display: flex; justify-content: space-between; align-items: flex-start;
  background: #fff;
  border-top: 1px solid #1c6bd1; border-bottom: 1px solid #1c6bd1;
  overflow: hidden;
}
.sm-body::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, rgba(255, 138, 29, 0) 0%, #ff8a1d 50%, rgba(255, 138, 29, 0) 100%);
}

.sm-left {
  flex: 1 0 0; min-height: 374px; padding: 6px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}

.sm-right {
  width: 188px; flex: none; align-self: stretch;
  background: #d3e5fa; border-left: 1px solid #95bdee;
  padding: 8px 6px 2px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}

.sm-item {
  display: flex; align-items: center; gap: 4px;
  padding: 2px; border: none; background: none; text-align: left; width: 100%;
  color: #373738;
}
.sm-item img { width: 32px; height: 32px; flex: none; }
.sm-item b { font-weight: 700; color: var(--fg); letter-spacing: .22px; display: block; }
.sm-item small { color: rgba(0, 0, 0, .5); display: block; font-size: 11px; }
.sm-item div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-item:hover { background: var(--selection); color: #fff; }
.sm-item:hover b, .sm-item:hover small { color: #fff; }

.sm-right .sm-item { padding: 1px; color: #0a236a; }
.sm-right .sm-item img { width: 24px; height: 24px; }
.sm-right .sm-item b { color: #0a236a; }
.sm-right .sm-item:hover, .sm-right .sm-item:hover b { color: #fff; }

.sm-sep { height: 1px; margin: 2px; background: #d8d8d8; flex: none; }

.sm-toggle-places { display: none; }

.sm-arrow {
  width: 16px; height: 22px; flex: none; position: relative;
  transition: transform .15s ease;
}
.sm-arrow::after {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-left: 7px solid #3ca03c;
}

.sm-footer {
  height: 40px; width: 100%; flex: none;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 10px; overflow: hidden;
}
.sm-footer button {
  height: 26px; display: flex; align-items: center; gap: 5px;
  border: none; background: none; color: #fff; padding: 2px; border-radius: 0;
}
.sm-footer button:hover { background: var(--selection); }

.sm-fic {
  width: 22px; height: 22px; flex: none;
}
.sm-footer button:hover .sm-fic { filter: brightness(1.15); }

#shutdown {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(10, 30, 90, .45);
  backdrop-filter: saturate(.4) brightness(.8);
  display: flex; align-items: center; justify-content: center;
}
.shut-dialog {
  width: 320px; overflow: hidden;
  border: 1px solid #000205; box-shadow: var(--drop-shadow);
}
.shut-head {
  height: 44px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; color: #fff; font: italic 700 15px/normal var(--ui-font);
  background: #013298;
  text-shadow: 1px 1px 2px rgba(0, 0, 50, .5);
}
.shut-body {
  background: linear-gradient(270deg, #577DDE 0%, #97B4F5 49.64%, #577DDE 100%);
  display: flex; justify-content: center; gap: 20px; padding: 26px 10px;
}
.shut-opt {
  border: none; background: none; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 6px; border-radius: 4px;
  text-shadow: 1px 1px 1px rgba(0, 0, 50, .5);
}
.shut-opt:hover { background: rgba(255, 255, 255, .15); }
.orb {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
  color: #fff;
  box-shadow: none;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}
.orb-off     { background-image: url("icons/power-off-24.png"); }
.orb-restart { background-image: url("icons/restart-32.png"); }
.shut-foot { background: #013298; display: flex; justify-content: flex-end; padding: 8px 12px; }

#poweroff {
  position: fixed; inset: 0; z-index: 1100; background: #000;
  display: flex; align-items: center; justify-content: center;
}
#poweroff span {
  color: #ffffff; font: 400 12px "VT323", monospace; text-align: center; line-height: 1.5;
  opacity: 0;
}
#poweroff span.show { opacity: 1; }

.ex-hint { color: #555; margin-bottom: 10px; }
.ex-hint code { font: 11px "Lucida Console", monospace; background: #f4f2e8; padding: 1px 3px; }

.statusbar {
  flex: none; display: flex; justify-content: space-between; align-items: center;
  min-height: 19px; padding: 3px 20px 3px 10px; gap: 10px;
  background: linear-gradient(177.12deg, #f3f4f7 0%, #e9e5cb 100%);
  box-shadow: inset 0 -4px 3px -3px #cbc7b8;
}

.statusbar.gripbar { padding: 0; }

.ab-page {
  flex: 1; overflow-y: auto; background: #fff; padding: 18px 24px; user-select: text;
  container-type: inline-size;
}
.ab-top {
  display: flex; gap: 22px; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
}
.ab-copy { flex: 1 1 340px; min-width: 0; }

.ab-photo {
  flex: 0 0 auto; width: 34%; max-width: 240px; min-width: 150px;
  aspect-ratio: 760 / 572;
  border: 2px solid #ededed;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .8), inset 2px 2px 4px rgba(0, 0, 0, .25);
  line-height: 0;
}
.ab-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ab-facts {
  display: grid; grid-template-columns: 124px 1fr; gap: 10px 0;
  align-items: baseline;
}
.ab-facts dt { font-weight: 700; color: var(--heading-ink); }
.ab-facts dd { color: #222; }

@container (min-width: 760px) {
  .ab-top { justify-content: space-between; gap: 56px; }
  .ab-copy { flex: 0 1 auto; }
  .ab-photo { width: 38%; max-width: 340px; }
  .ab-blurb { max-width: 62ch; }
}
@container (min-width: 1100px) {
  .ab-top { gap: 88px; }
  .ab-photo { max-width: 420px; }
}

@container (max-width: 520px) {
  .ab-top { flex-direction: column; gap: 16px; }
  .ab-copy { flex: 0 0 auto; }
  .ab-photo { width: 100%; max-width: 320px; align-self: flex-start; }
}
@container (max-width: 360px) {
  .ab-photo { max-width: none; align-self: stretch; }
  .ab-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .ab-facts dd { margin-bottom: 8px; }
}
.ab-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ab-logo { width: 48px; height: 48px; flex: none; }
.ab-head h2 { font: 700 18px/1.2 var(--title-font); color: var(--heading-ink); }
.ab-role { color: #444; margin-top: 3px; }
.ab-blurb { max-width: 60ch; }
.ab-blurb p { line-height: 1.65; margin-bottom: 10px; }

.wk-scroll { flex: 1; overflow-y: auto; padding: 0 0 16px; background: #fff; user-select: text; }
.wk-player { width: 100%; margin-bottom: 11.3px; }
.wk-noplayer { text-align: center; padding: 20px; color: #cfd6e6; max-width: 44ch; }
.wk-noplayer b { display: block; font-size: 13px; color: #fff; margin-bottom: 6px; }
.wk-noplayer p { line-height: 1.6; color: #9aa6bd; }

.wk-stage {
  position: relative; width: 100%; height: 353px; background: #000;
  display: flex; flex-direction: column;
  border-bottom: 1px solid #000; overflow: hidden;
}
.wk-frame {
  flex: 1; min-height: 0; margin: 0 40px;
  display: flex; align-items: center; justify-content: center;
}
.wk-frame video { cursor: pointer; }
.wk-frame video, .wk-frame img {
  width: 100%; height: 100%; border: 0; display: block;
  object-fit: contain; background: #000;
}
.wk-watch {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 14px;
  background: #fff; color: #ff0000; text-decoration: none; border: 1.5px solid #ff0000;
  border-radius: 3px; font: 700 12.5px/1 var(--xp-font);
}
.wk-watch:hover, .wk-watch:focus-visible { background: #ffecec; }
.wk-watch[hidden] { display: none; }
.wk-watch-ic { width: 21px; height: 15px; flex: none; }
.wk-slidebar {
  flex: none; height: 30px; padding: 4.5px 12.25px;
  display: flex; align-items: center; justify-content: space-between;
  background: #eff2fb; border-top: 1px solid var(--sep-blue); border-bottom: 1px solid var(--sep-blue);
}
.wk-slidenavs { display: flex; align-items: center; gap: 15.5px; }
.wk-slidenav {
  flex: none; width: 20.6px; height: 20.6px; padding: 0; border: none;
  border-radius: 100px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 37% 33%,
    #74c1ff 0%, #429ee8 50%, #2a8ddc 75%, #117bd0 100%);
}
.wk-slidenav img { width: 10.3px; height: 10.3px; display: block; }
.wk-slidenav:active img { transform: translate(.5px, .5px); }
.wk-slidenav:focus-visible { outline: 1px dotted #123; outline-offset: 2px; }
.wk-count { font: 11px/1 var(--xp-font); color: #000; text-align: right; }
.wk-still { display: block; }

.wk-scroll > :not(.wk-player) { margin-left: 18px; margin-right: 18px; }
.wk-title { font: 700 17px/1.2 var(--title-font); color: var(--heading-ink); }
.wk-summary { color: #555; margin: 2px 0 12px; }
.wk-meta, .wk-credits {
  display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px;
  align-items: baseline; margin-bottom: 14px;
}
.wk-meta dt, .wk-credits dt { font-weight: 700; color: var(--heading-ink); }
.wk-body { max-width: 62ch; margin-bottom: 14px; }
.wk-body p { line-height: 1.65; margin-bottom: 10px; }

.cp-content {
  flex: 1; min-width: 0; position: relative; overflow: auto;
  background: #6375d6; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.cp-watermark {
  position: absolute; right: 0; bottom: 0; width: 290px; height: 290px;
  opacity: .1; pointer-events: none;
}
.cp-mosaic {
  flex: 1; position: relative;
  display: flex; flex-wrap: wrap; align-content: flex-start;
  justify-content: space-between; row-gap: 10px;
}
.cp-tile {
  flex: 0 1 211px; min-width: 0; display: flex; align-items: flex-start; gap: 6px;
  background: none; border: 1px solid transparent; padding: 4px; text-align: left;
  cursor: pointer;
}
.cp-tile img { width: 48px; height: 48px; flex: none; }
.cp-tile b {
  flex: 1; min-width: 0; font: 700 11px/1.25 var(--xp-font); color: #fff; letter-spacing: .22px;
}
.cp-tile small { display: block; font-weight: 400; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.cp-tile:hover b { text-decoration: underline; }
.cp-tile:focus-visible { outline: 1px dotted #fff; }

.ab-services { flex: none; overflow: hidden; padding: 14px 16px; }
.ab-services .cp-watermark { width: 190px; height: 190px; }

.nw-addr-text { font: 11px/normal var(--xp-font); }

.nw-statusbar { font: 11px/normal var(--xp-font); color: #333; }
.nw-status-zone { flex: none; margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nw-status-zone img { width: 14px; height: 14px; }

.nw-main { container-type: inline-size; padding: 0; display: flex; flex-direction: column; overflow-y: scroll; }

.nw-masthead {
  flex: none; display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(14px, 4cqi, 20px); padding: clamp(14px, 4cqi, 22px) clamp(18px, 6cqi, 51px);
  background: linear-gradient(0deg, rgba(10, 20, 70, .5), rgba(10, 20, 70, .5)), url('brand/newshead.png') center / cover no-repeat, #0d1950;
  border-bottom: 5px solid #fea75e;
}
.nw-mast-logo {
  flex: none; width: clamp(40px, 9cqi, 70px); height: clamp(40px, 9cqi, 70px);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3));
}
.nw-mast-title { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.nw-mast-title h1 {
  font: 700 clamp(20px, 8cqi, 44px)/1.1 var(--xp-font);
  color: #fff; text-align: left; white-space: nowrap; text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .15);
}
.nw-mast-tagline {
  font: 700 clamp(11px, 2.5cqi, 15px)/1.3 var(--xp-font);
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .15);
}

.nw-navbar {
  flex: none; display: flex; overflow-x: auto;
  background: #0d2b6b;
  padding: 0 clamp(8px, 3cqi, 26px);
}
.nw-nav-link {
  flex: none; font: 700 11px var(--xp-font); text-transform: uppercase; letter-spacing: .5px;
  color: #cfe0ff; text-decoration: none; white-space: nowrap;
  padding: 8px clamp(8px, 2.5cqi, 16px);
  border-right: 1px solid rgba(255, 255, 255, .15);
}
.nw-nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nw-nav-link.is-current { background: #fea75e; color: #1a1a1a; }

.nw-404 {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: clamp(28px, 10cqi, 56px) clamp(16px, 4cqi, 32px);
}
.nw-404-code {
  font: 700 clamp(48px, 16cqi, 80px)/1 "Times New Roman", Georgia, "Noto Serif", serif;
  color: #245ff5;
}
.nw-404-msg { max-width: 420px; color: #444; line-height: 1.4; }

.nw-body { padding: clamp(12px, 6cqi, 32px) clamp(12px, 4cqi, 32px); }

.nw-ad {
  appearance: none; -webkit-appearance: none;
  display: block;
  width: 100%; margin-top: 12px;
  padding: 3px 8px; border: 0; border-top: 2px solid #7a2c00;
  background: linear-gradient(135deg, #fff200 0%, #ffb300 50%, #ff5e00 100%);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .3);
  font: 700 9px/1.4 var(--xp-font); color: #7a2c00; text-align: center;
  cursor: pointer;
  animation: nw-ad-blink 1.4s steps(2) infinite;
}
.nw-ad-badge {
  display: inline-block; font-size: 7px; letter-spacing: .5px; opacity: .7;
  vertical-align: middle; margin-right: 4px;
}
.nw-ad:hover { filter: brightness(1.08); }
.nw-ad:focus-visible { outline: 1px dotted #123; outline-offset: -2px; }
@keyframes nw-ad-blink {
  50% { box-shadow: 0 0 0 2px #fff, 0 -2px 6px rgba(0, 0, 0, .3); }
}

.nw-hero {
  display: flex; gap: clamp(10px, 3cqi, 24px); align-items: flex-start;
  cursor: pointer; padding: 6px; margin: -6px -6px 6px;
}
.nw-hero:hover { background: #f5f7fd; }
.nw-hero:focus-visible { outline: 1px dotted #123; outline-offset: -2px; }
.nw-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.nw-badge {
  display: inline-block; background: #dc2020; color: #fff;
  font: 700 13px/1 var(--xp-font); padding: 4px 8px; margin-bottom: 6px;
}
.nw-headline { font: 700 14px/1.3 var(--xp-font); color: var(--heading-ink); margin-bottom: 6px; }
.nw-desc { color: #444; margin-bottom: 6px; }
.nw-desc p { line-height: 1.4; margin-bottom: 6px; }
.nw-meta { font-size: 11px; color: #777; margin-top: auto; padding-top: 6px; }
.nw-timestamp { font-size: 11px; color: #999; font-style: italic; margin-top: 4px; }
.nw-figure {
  flex: 0 0 340px; aspect-ratio: 3 / 2; background: #d9d9d9;
  line-height: 0;
}
.nw-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-empty, .nw-past-empty { color: #777; padding: 4px 0 16px; }

.nw-rule { border-top: 1px solid #245ff5; margin: 4px 0 14px; }
.nw-rule-buzz { margin: 24px 0 28px; }

.nw-past-title { font: 700 11px/normal var(--xp-font); color: #0046d5; margin-bottom: 16px; }
.nw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px 12px;
}
.nw-card {
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  background: none; border: none; padding: 4px; margin: -4px; text-align: left; color: var(--fg);
}
.nw-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; background: #d9d9d9; overflow: hidden; }
.nw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-thumb-empty { display: flex; align-items: center; justify-content: center; }
.nw-thumb-empty img { width: 32px; height: 32px; object-fit: contain; }
.nw-card-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nw-card-meta b {
  font: 700 11px/normal var(--xp-font); color: var(--heading-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nw-card-meta span { font-size: 11px; color: var(--fg-link); }
.nw-card:hover .nw-card-meta b, .nw-card:hover .nw-card-meta span { text-decoration: underline; }
.nw-card:focus-visible { outline: 1px dotted #123; outline-offset: 2px; }

.nw-buzz { margin-top: 18px; }
.nw-buzz-list { display: flex; flex-direction: column; }
.nw-buzz-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer; width: 100%;
  background: none; border: none; border-top: 1px dotted #ccc; text-align: left; color: var(--fg);
  padding: 10px 0;
}
.nw-buzz-item:first-child { border-top: none; padding-top: 0; }
.nw-buzz-avatar {
  flex: none; width: 56px; height: 56px; overflow: hidden;
  background: #d9d9d9; display: flex; align-items: center; justify-content: center;
  font: 700 16px var(--xp-font); color: #777;
}
.nw-buzz-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-buzz-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nw-buzz-headline { font: 700 12px/1.3 var(--xp-font); color: var(--fg-link); }
.nw-buzz-item:hover .nw-buzz-headline { text-decoration: underline; }
.nw-buzz-tag { font-size: 11px; color: #777; }
.nw-buzz-item:focus-visible { outline: 1px dotted #123; outline-offset: 2px; }

@container (max-width: 480px) {
  .nw-hero { flex-direction: column; }
  .nw-figure { flex: none; max-width: none; width: 100%; }
}

.shut-logo { width: 28px; height: 28px; }

.ct-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; background: #fff;
  user-select: text; display: flex; flex-direction: column;
}
.ct-tabs { display: none; }
.ct-top { flex: none; }
.ct-title { font: 700 18px/1.2 var(--title-font); color: var(--heading-ink); margin-bottom: 6px; }
.ct-intro { color: #444; margin-bottom: 14px; }
.ct-links { display: flex; flex-direction: column; gap: 4px; }
.ct-row {
  display: grid; grid-template-columns: 32px 72px 1fr; align-items: center; gap: 8px;
  padding: 6px 8px; text-decoration: none; color: var(--fg);
  border: 1px solid transparent; border-radius: 3px;
}
.ct-row img { width: 32px; height: 32px; }
.ct-row b { color: var(--heading-ink); }
.ct-row span { color: var(--fg-link); }
.ct-row:hover { background: var(--selection); border-color: #1c4f9c; }
.ct-row:hover b, .ct-row:hover span { color: #fff; }
.ct-note { margin-top: 16px; color: #777; }

#ctxmenu {
  position: absolute; z-index: 700;
  min-width: 148px; padding: 3px;
  background: #fff;
  border: 1px solid var(--fg-disabled);
  box-shadow: var(--drop-shadow);
  display: flex; flex-direction: column;
}
.ctx-item {
  display: flex; align-items: center;
  height: 17px; padding: 2px 2px 2px 22px;
  border: none; background: none; text-align: left; width: 100%;
  color: var(--fg);
}
.ctx-item:hover, .ctx-item:focus-visible {
  background: var(--selection); color: var(--fg-reverted); outline: none;
}
.ctx-sep { height: 9px; position: relative; }
.ctx-sep::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--sep-soft);
}

:root { --crt: 1; }

#crt {
  position: fixed; inset: 0; z-index: 2000;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
html[data-crt="on"] #crt { display: block; }

#crt > * { position: absolute; inset: 0; }

.crt-lines {
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, .26) 0px, rgba(0, 0, 0, .26) 1px,
    rgba(0, 0, 0, 0)   1px, rgba(0, 0, 0, 0)   3px);
  opacity: calc(var(--crt) * 1);
}

.crt-mask {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 0, 0, .10) 0px, rgba(255, 0, 0, .10) 1px,
    rgba(0, 255, 0, .10) 1px, rgba(0, 255, 0, .10) 2px,
    rgba(0, 0, 255, .10) 2px, rgba(0, 0, 255, .10) 3px);
  mix-blend-mode: screen;
  opacity: calc(var(--crt) * .55);
}
html:not([data-crt-lines="on"]) .crt-lines,
html:not([data-crt-lines="on"]) .crt-mask { display: none; }

.crt-glow {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(ellipse 78% 78% at 50% 50%,
      rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .16) 82%, rgba(0, 0, 0, .42) 100%);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, .38),
    inset 0 0 18px rgba(0, 0, 0, .30);
  border-radius: 0px;
  opacity: calc(var(--crt) * 1);
}
html:not([data-crt-glow="on"]) .crt-glow { display: none; }

.crt-roll {
  inset: -30% 0 auto 0; height: 26%;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .045) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: crtroll 7s linear infinite;
  opacity: calc(var(--crt) * 1);
}
@keyframes crtroll { from { transform: translateY(0); } to { transform: translateY(500%); } }

html[data-crt="on"][data-crt-motion="on"] #desktop { animation: crtflicker .18s steps(2) infinite; }
@keyframes crtflicker { 0%, 100% { opacity: 1; } 50% { opacity: .985; } }

html:not([data-crt-motion="on"]) .crt-roll { display: none; }

@media (prefers-reduced-motion: reduce) {
  .crt-roll { animation: none; display: none; }
  html[data-crt="on"][data-crt-motion="on"] #desktop { animation: none; }
}

.dp-body { flex: 1; overflow-y: auto; padding: 14px 16px; background: var(--face); }
.dp-preview { display: flex; justify-content: center; margin-bottom: 14px; }
.dp-monitor {
  position: relative; width: 190px; height: 169px;
  background: url('brand/monitorframe.png') no-repeat center / contain;
}
.dp-screen {
  position: absolute; left: 12px; top: 16px; width: 162px; height: 119px;
  border-radius: 4px;
  background: linear-gradient(160deg, #1c3f8f, #0a1d4a 60%, #061233);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .65);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dp-screen img { width: 48px; height: 48px; opacity: .95; }
html[data-crt="on"] .dp-screen::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 3px);
}

.dp-group {
  border: 1px solid var(--sep-soft); border-radius: 3px;
  padding: 14px 12px 12px; margin-bottom: 10px; position: relative;
}
.dp-group-title {
  position: absolute; top: -7px; left: 8px; padding: 0 4px;
  background: var(--face); color: #2b46d4;
}
.dp-sub { margin: 6px 0 10px 16px; display: flex; flex-direction: column; gap: 5px; }
.dp-row { display: flex; align-items: center; gap: 8px; }
.dp-row label { min-width: 54px; }
.dp-row input[type="range"] { flex: 1; max-width: 190px; accent-color: #316ac5; }
.dp-foot {
  flex: none; display: flex; justify-content: flex-end; gap: 8px;
  padding: 8px 12px; background: var(--face);
  border-top: 1px solid #fff;
}

.xpcheck { display: inline-flex; align-items: center; gap: 5px; padding: 0 1px; cursor: pointer; }
.xpcheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.xpcheck i {
  width: 11px; height: 11px; flex: none; position: relative;
  border: 1px solid #1c5180; background: #fff;
  box-shadow: inset 8px 8px 12px -6px rgba(76, 76, 51, .3);
}
.xpcheck:hover i { background: #f1efdf; box-shadow: inset 0 0 0 2px #fff0cf; }
.xpcheck input:active + i { box-shadow: inset 8px 8px 15px -7px rgba(84, 84, 69, .6); }
.xpcheck input:checked + i::after {
  content: ""; position: absolute; inset: 0;
  background: url("icons/Check.svg") no-repeat center / 8px 8px;
}
.xpcheck input:focus-visible + i { outline: 1px dotted #000; outline-offset: 2px; }
.xpcheck input:disabled + i { border-color: #cac8bb; background: #fff; }
.xpcheck input:disabled ~ span { color: var(--fg-disabled); text-shadow: 1px 1px 1px #fff; }

.reel { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #000; }

.reel-screen {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000; border-bottom: 1px solid #000; overflow: hidden;
}
.reel-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.reel-stage video, .reel-stage iframe, .reel-stage img {
  width: 100%; height: 100%; border: 0; display: block; background: #000;
  object-fit: contain;
}

.reel-stage video, .reel-stage img { cursor: pointer; }
.reel-stage .player-ph { color: #cfd6e6; }

.reel-osd {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 10px 18px; border-radius: 8px;
  background: rgba(0, 0, 96, .82); color: #b0fe14;
  font: 22px/1 var(--xp-font); letter-spacing: .5px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), inset 0 2px 3px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .25s ease-out; pointer-events: none;
}
.reel-osd.on { opacity: 1; transition: none; }
.reel-osd small { display: block; font-size: 10px; opacity: .75; margin-bottom: 3px; }

.reel-deck {
  flex: none; height: 120px; padding: 25px 30px 0;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #fdfdfd 0%, #e4e9f9 32.031%, #98afd6 58.383%,
                                      #d1e7ff 79.358%, #b5cbeb 94.416%);
}

.reel-bar { flex: none; display: flex; align-items: center; gap: 7.8px; }
.reel-transport { flex: none; display: flex; align-items: center; gap: 5.8px; }

.reel-btn {
  flex: none; position: relative; width: 51.7px; height: 16.2px;
  padding: 0; border: none; background: none; cursor: pointer;
}
.reel-btn img { position: absolute; left: -3.9px; top: -3.9px; width: 57.5px; height: 22px; }
.reel-btn:active img { transform: translate(.5px, .5px); }
.reel-btn:disabled { opacity: .4; cursor: default; }
.reel-btn:focus-visible { outline: 1px dotted #123; outline-offset: 2px; }

.reel-pause {
  border: 1px solid rgba(0, 0, 0, .25); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 25% 22%,
    #fff 0%, #d7ddef 57%, #cce0f1 78%, #c1e3f3 100%);
  box-shadow: -1.3px -1.3px 2.6px rgba(0, 0, 0, .25),
              .6px .6px 1.3px #fff,
              inset -1.3px -2.6px 2.6px rgba(0, 0, 0, .25);
}
.reel-pause i {
  width: 9px; height: 9px; background: #98b1cb;
  box-shadow: inset .6px .6px 1.3px rgba(0, 0, 0, .25);
}
.reel-pause:active { box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35); }

.reel-slider {
  flex: 1; min-width: 0; position: relative; height: 16.2px; border-radius: 999px;
  background: url("chrome/reel-slider-track.png") 0 0 / 100% 100% no-repeat;
  box-shadow: 0 1.3px 1.3px #fff;
  cursor: pointer; touch-action: none; overflow: hidden;
}
.reel-slider:focus-visible { outline: 1px dotted #123; outline-offset: 1px; }
.reel-slider[aria-disabled="true"] { cursor: default; opacity: .55; }

.reel-elapsed { position: absolute; left: 1.9px; top: 1.3px; bottom: 1.3px; width: 0; min-width: 14px; }
.reel-cursor {
  position: absolute; right: -14px; top: 0; bottom: 0; width: 28px;
  border-radius: 999px; background: #f3f3ef;

  border-left: 6.5px solid #22be20; border-right: 6.5px solid #22be20;
  box-shadow: inset 2.6px 2.6px 4px rgba(255, 255, 255, .5),
              inset -1.3px -1.3px 4px rgba(0, 0, 0, .33),
              .6px .6px 1.3px rgba(0, 0, 0, .5);
}

.reel-row { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: space-between; }
.reel-nav {
  flex: none; position: relative; width: 38.8px; height: 38.8px;
  padding: 0; border: none; background: none; cursor: pointer;
}

.reel-nav img { position: absolute; left: -3.9px; top: -3.9px; width: 44.6px; height: 44.6px; }
.reel-nav:active img { transform: translate(.5px, .5px); }
.reel-nav:disabled { opacity: .45; cursor: default; }
.reel-nav:focus-visible { outline: 1px dotted #123; outline-offset: 2px; }

.reel-info {
  flex: 1; min-width: 0; margin: 0 16px; height: 38.8px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 19.4px;
  padding: 12.9px 43.3px;
  background: #000060; color: #b0fe14;
  box-shadow: 0 2.6px 1.3px #fff, inset 0 2.6px 2.6px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.reel-num { flex: none; width: 35.6px; font: 25.9px/1 var(--xp-font); letter-spacing: -.5px; }
.reel-meta { flex: 1; min-width: 0; }
.reel-name {
  font: 10.3px/1.25 var(--xp-font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reel-sub { font: 9px/1.3 var(--xp-font); }
.reel-time { flex: none; font: 9.7px/1 var(--xp-font); white-space: nowrap; }

::-webkit-scrollbar { width: 17px; height: 17px; }
::-webkit-scrollbar:vertical {
  background:
    linear-gradient(#eeede5, #eeede5) left  / 1px 100% no-repeat,
    linear-gradient(#eeede5, #eeede5) right / 1px 100% no-repeat,
    linear-gradient(90deg, #f3f1ec 0%, #fefefb 100%);
}
::-webkit-scrollbar:horizontal {
  background:
    linear-gradient(#eeede5, #eeede5) top    / 100% 1px no-repeat,
    linear-gradient(#eeede5, #eeede5) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, #f3f1ec 0%, #fefefb 100%);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece { background: transparent; }
::-webkit-scrollbar-corner { background: #f7f6f1; }

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
  border: solid transparent;
  border-width: 1px 2px 2px 1px;
  border-radius: 2px;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement { display: none; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { display: block; }
::-webkit-scrollbar-button:vertical   { height: 17px; }
::-webkit-scrollbar-button:horizontal { width: 17px; }

::-webkit-scrollbar-button:vertical:start:decrement {
  background-image:
    url("chrome/sb-caret-up.svg"),
    linear-gradient(#c1d3fb, #c1d3fb),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:vertical:end:increment {
  background-image:
    url("chrome/sb-caret-down.svg"),
    linear-gradient(#c1d3fb, #c1d3fb),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image:
    url("chrome/sb-caret-left.svg"),
    linear-gradient(#c1d3fb, #c1d3fb),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:horizontal:end:increment {
  background-image:
    url("chrome/sb-caret-right.svg"),
    linear-gradient(#c1d3fb, #c1d3fb),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#fff, #fff);
}

::-webkit-scrollbar-button:vertical,
::-webkit-scrollbar-button:horizontal {
  background-position: center, 0 0, right, bottom, 0 0;
  background-size: auto, auto, 1px 100%, 100% 1px, auto;
  background-origin: padding-box, padding-box, border-box, border-box, border-box;
  background-clip:   padding-box, padding-box, border-box, border-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(149, 178, 246, .5),
              inset -4px -4px 3px -2px #b1ccfa,
              inset 4px 4px 3px -2px #e0eaff;
}

::-webkit-scrollbar-button:vertical:start:decrement:hover,
::-webkit-scrollbar-button:vertical:end:increment:hover,
::-webkit-scrollbar-button:horizontal:start:decrement:hover,
::-webkit-scrollbar-button:horizontal:end:increment:hover {
  box-shadow: inset 0 0 0 1px rgba(32, 84, 193, .33),
              inset -4px -4px 3px -2px #b9dafb,
              inset 4px 4px 3px -2px rgba(246, 255, 255, .66);
}
::-webkit-scrollbar-button:vertical:start:decrement:hover {
  background-image: url("chrome/sb-caret-up.svg"), linear-gradient(#c8e1fb, #c8e1fb),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:vertical:end:increment:hover {
  background-image: url("chrome/sb-caret-down.svg"), linear-gradient(#c8e1fb, #c8e1fb),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:horizontal:start:decrement:hover {
  background-image: url("chrome/sb-caret-left.svg"), linear-gradient(#c8e1fb, #c8e1fb),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:horizontal:end:increment:hover {
  background-image: url("chrome/sb-caret-right.svg"), linear-gradient(#c8e1fb, #c8e1fb),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
}

::-webkit-scrollbar-button:vertical:start:decrement:active,
::-webkit-scrollbar-button:vertical:end:increment:active,
::-webkit-scrollbar-button:horizontal:start:decrement:active,
::-webkit-scrollbar-button:horizontal:end:increment:active {
  box-shadow: inset 0 0 0 1px rgba(32, 84, 193, .33),
              inset 4px 4px 3px -2px #889dda,
              inset -4px -4px 3px -2px #c3cfff;
}
::-webkit-scrollbar-button:vertical:start:decrement:active {
  background-image: url("chrome/sb-caret-up.svg"), linear-gradient(#9caef3, #9caef3),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:vertical:end:increment:active {
  background-image: url("chrome/sb-caret-down.svg"), linear-gradient(#9caef3, #9caef3),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:horizontal:start:decrement:active {
  background-image: url("chrome/sb-caret-left.svg"), linear-gradient(#9caef3, #9caef3),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
}
::-webkit-scrollbar-button:horizontal:end:increment:active {
  background-image: url("chrome/sb-caret-right.svg"), linear-gradient(#9caef3, #9caef3),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
}

::-webkit-scrollbar-button:disabled {
  background-image: url("chrome/sb-caret-disabled.svg"), linear-gradient(#eaeae2, #eaeae2),
    linear-gradient(#c4c4af, #c4c4af), linear-gradient(#c4c4af, #c4c4af), linear-gradient(#fff, #fff);
  box-shadow: inset 0 0 0 1px rgba(208, 208, 190, .5);
}

::-webkit-scrollbar-thumb:vertical {
  min-height: 12px;
  background-image:
    url("chrome/sb-grip.svg"),
    linear-gradient(90deg, #c8d6fb 0%, #c8d8fb 29.631%, #bad0fc 69.712%, #b9cbf3 92.308%),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#fff, #fff);
  background-position: 3px calc(50% - .5px), 0 0, right, bottom, 0 0;
  background-size: 7px 8px, auto, 1px 100%, 100% 1px, auto;
  background-origin: padding-box, padding-box, border-box, border-box, border-box;
  background-clip:   padding-box, padding-box, border-box, border-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(146, 175, 247, .33),
              inset 0 2px 1px 0 rgba(225, 234, 254, .5),
              inset 2px 0 1px 0 rgba(225, 234, 254, .5);
}
::-webkit-scrollbar-thumb:vertical:hover {
  background-image:
    url("chrome/sb-grip.svg"),
    linear-gradient(90deg, #d8e8ff 0%, #d8e8ff 29.631%, #d6e7ff 69.712%, #cce1ff 92.308%),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
  box-shadow: inset 0 0 0 1px rgba(9, 112, 255, .2),
              inset 0 2px 1px 0 rgba(234, 243, 255, .66),
              inset 2px 0 1px 0 rgba(234, 243, 255, .66);
}
::-webkit-scrollbar-thumb:vertical:active {
  background-image:
    url("chrome/sb-grip.svg"),
    linear-gradient(90deg, #abc1fa 0%, #aac0f9 29.631%, #9abafa 69.712%, #91b3f7 92.308%),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
  box-shadow: inset 0 0 0 1px rgba(32, 84, 193, .33),
              inset 4px 4px 3px -2px #889dda;
}

::-webkit-scrollbar-thumb:horizontal {
  min-width: 12px;
  background-image:
    url("chrome/sb-grip-h.svg"),
    linear-gradient(180deg, #c8d6fb 0%, #c8d8fb 29.631%, #bad0fc 69.712%, #b9cbf3 92.308%),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#7c9fd3, #7c9fd3),
    linear-gradient(#fff, #fff);
  background-position: calc(50% - .5px) 3px, 0 0, right, bottom, 0 0;
  background-size: 8px 7px, auto, 1px 100%, 100% 1px, auto;
  background-origin: padding-box, padding-box, border-box, border-box, border-box;
  background-clip:   padding-box, padding-box, border-box, border-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(146, 175, 247, .33),
              inset 0 2px 1px 0 rgba(225, 234, 254, .5),
              inset 2px 0 1px 0 rgba(225, 234, 254, .5);
}
::-webkit-scrollbar-thumb:horizontal:hover {
  background-image:
    url("chrome/sb-grip-h.svg"),
    linear-gradient(180deg, #d8e8ff 0%, #d8e8ff 29.631%, #d6e7ff 69.712%, #cce1ff 92.308%),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
  box-shadow: inset 0 0 0 1px rgba(9, 112, 255, .2),
              inset 0 2px 1px 0 rgba(234, 243, 255, .66),
              inset 2px 0 1px 0 rgba(234, 243, 255, .66);
}
::-webkit-scrollbar-thumb:horizontal:active {
  background-image:
    url("chrome/sb-grip-h.svg"),
    linear-gradient(180deg, #abc1fa 0%, #aac0f9 29.631%, #9abafa 69.712%, #91b3f7 92.308%),
    linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#7c9fd3, #7c9fd3), linear-gradient(#fff, #fff);
  box-shadow: inset 0 0 0 1px rgba(32, 84, 193, .33),
              inset 4px 4px 3px -2px #889dda;
}

@supports not selector(::-webkit-scrollbar-thumb) {
  * { scrollbar-color: #c1d3fb #f3f1ec; scrollbar-width: auto; }
}

.msg-head {
  flex: none; display: flex; gap: 10px; padding: 8px 10px;
  background: var(--face); border-bottom: 1px solid var(--sep-blue);
}
.msg-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msg-field span { color: var(--heading-ink); font-weight: 700; }
.msg-field input {
  width: 100%; height: 21px; padding: 2px 4px;
  border: 1px solid var(--input-border); background: #fff; font: 11px var(--xp-font);
}
.msg-field input:focus { outline: none; border-color: var(--heading-ink); }
.msg-body { flex: 1; min-height: 0; resize: none; }

.msg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg-foot {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; background: var(--face); border-top: 1px solid var(--sep-blue);
}
.msg-status { flex: 1; min-width: 0; color: #444; }
.msg-status[data-kind="ok"] { color: #1a6b1a; font-weight: 700; }
.msg-status[data-kind="warn"] { color: #a00; font-weight: 700; }
.msg-count { color: #777; font-size: 10px; }
.ct-compose {
  flex: 1 1 auto; min-height: 190px;
  display: flex; flex-direction: column;
  border: 1px solid var(--sep-blue); background: var(--face);
}
.ct-compose .msg-head, .ct-compose .msg-foot { flex: none; }
.ct-compose .msg-body {
  flex: 1 1 auto; min-height: 0; height: auto; width: 100%; display: block;
  border-bottom: 1px solid #808080;
}

html[data-mode="mobile"] {
  --tb-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html[data-mode="mobile"] #desktop,
html[data-mode="mobile"] #shutdown,
html[data-mode="mobile"] #poweroff {
  zoom: 1; width: 100%; height: 100%;
}
html[data-mode="mobile"] body { font-size: 13px; }

@media (hover: none) {
  .sm-item:hover, .ex-item:hover, .ctx-item:hover,
  .menubar span:hover { background: none; color: inherit; }
  .sm-item:hover b, .sm-item:hover small { color: inherit; }
  .ex-item:hover { color: inherit; }
}

html[data-mode="mobile"] #icons {
  position: absolute; inset: 0 0 auto 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 4px; padding: 14px 10px;
  pointer-events: auto;
}
html[data-mode="mobile"] .dicon {
  position: static; width: auto; min-height: 44px;
  padding: 10px 4px; gap: 6px; touch-action: manipulation;
}
html[data-mode="mobile"] .dicon img { width: 48px; height: 48px; }
html[data-mode="mobile"] .dicon span { font-size: 12px; line-height: 1.3; }

html[data-mode="mobile"] .xpwin {
  position: fixed !important;
  left: 0 !important; top: 0 !important;
  width: 100% !important;
  height: calc(100% - var(--tb-h) - var(--safe-b)) !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none;
}

html[data-mode="mobile"] .xpwin::after { content: none; }
html[data-mode="mobile"] .titlebar {
  height: 44px; margin: 0; border-radius: 0; padding: 6px 8px; gap: 8px;
}
html[data-mode="mobile"] .title-text { font-size: 15px; }
html[data-mode="mobile"] .titlebar img { width: 20px; height: 20px; }
html[data-mode="mobile"] .trigram { gap: 8px; }
html[data-mode="mobile"] .tbtn { width: 32px; height: 32px; }
html[data-mode="mobile"] .tbtn.min, html[data-mode="mobile"] .tbtn.max { display: none; }
html[data-mode="mobile"] .tbtn.close i {
  width: 16px; height: 16px;
}
html[data-mode="mobile"] .resize-grip { display: none; }
html[data-mode="mobile"] .menubar { display: none; }
html[data-mode="mobile"] .ie-toolbar { display: none; }
html[data-mode="mobile"] .ie-go-btn { display: none; }

html[data-mode="mobile"] .explorer { flex-direction: column; overflow-y: auto; }
html[data-mode="mobile"] .ex-main {
  order: 1; flex: 1 1 auto; padding: 14px;
}
html[data-mode="mobile"] .ex-side {
  order: 2; width: 100%; flex: 0 0 auto;
  padding: 10px;
  flex-direction: row; flex-wrap: wrap; gap: 8px;
}
html[data-mode="mobile"] .ex-panel { flex: 1 1 200px; }
html[data-mode="mobile"] .ex-panel-title { height: 22px; padding: 2px 8px; }
html[data-mode="mobile"] .ex-panel:first-child .ex-panel-title { height: 22px; }
html[data-mode="mobile"] .ex-panel-body { padding: 8px; gap: 2px; }
html[data-mode="mobile"] .ex-panel-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 2px 10px;
}
html[data-mode="mobile"] .ex-item { width: 100%; padding: 10px 6px; min-height: 44px; }
html[data-mode="mobile"] .ex-panel-body a { padding: 7px 0; min-height: 34px; }
html[data-mode="mobile"] .addressbar { padding: 6px; }
html[data-mode="mobile"] .addr-field { height: 32px; }

html[data-mode="mobile"] .ab-facts, html[data-mode="mobile"] .wk-meta,
html[data-mode="mobile"] .wk-credits { grid-template-columns: 1fr; gap: 2px 0; }
html[data-mode="mobile"] .ab-facts dd, html[data-mode="mobile"] .wk-meta dd,
html[data-mode="mobile"] .wk-credits dd { margin-bottom: 8px; }
html[data-mode="mobile"] .ct-row { grid-template-columns: 32px 1fr; row-gap: 2px; min-height: 44px; }
html[data-mode="mobile"] .ct-row span { grid-column: 2; }

html[data-mode="mobile"] .ct-body { padding: 0; overflow: hidden; }
html[data-mode="mobile"] .ct-tabs {
  display: flex; flex: none;
  border-bottom: 1px solid var(--sep-blue); background: var(--face);
}
html[data-mode="mobile"] .ct-tab {
  flex: 1; min-height: 44px; padding: 10px 8px;
  border: none; border-bottom: 2px solid transparent;
  background: none; font: 700 13px var(--xp-font); color: #444;
}
html[data-mode="mobile"] .ct-tab.is-active { color: var(--heading-ink); border-bottom-color: var(--heading-ink); }
html[data-mode="mobile"] .ct-top { display: none; overflow-y: auto; padding: 16px 18px; }
html[data-mode="mobile"] .ct-top .ex-group { display: none; }
html[data-mode="mobile"] .ct-compose { display: none; margin: 0; border: none; }
html[data-mode="mobile"] .ct-body[data-page="info"] .ct-top { display: block; }
html[data-mode="mobile"] .ct-body[data-page="message"] .ct-compose { display: flex; }

html[data-mode="mobile"] .msg-field input,
html[data-mode="mobile"] .ct-compose .msg-body { font-size: 16px; }
html[data-mode="mobile"] .wk-scroll > :not(.wk-player) { margin-left: 14px; margin-right: 14px; }
html[data-mode="mobile"] .wk-frame { margin: 0 10px; }

html[data-mode="mobile"] .cp-tile { flex-basis: 100%; }
html[data-mode="mobile"] .cp-content { padding: 12px; }
html[data-mode="mobile"] .reel-deck { height: 116px; padding: 16px 12px 0; gap: 12px; }
html[data-mode="mobile"] .reel-bar { gap: 8px; }
html[data-mode="mobile"] .reel-transport { gap: 6px; }
html[data-mode="mobile"] .reel-btn { width: 46px; height: 26px; }
html[data-mode="mobile"] .reel-btn img { left: -3px; top: -3px; width: 52px; height: 32px; }
html[data-mode="mobile"] .reel-pause i { width: 11px; height: 11px; }
html[data-mode="mobile"] .reel-slider { height: 22px; }
html[data-mode="mobile"] .reel-cursor { width: 32px; right: -16px; border-left-width: 7px; border-right-width: 7px; }
html[data-mode="mobile"] .reel-elapsed { min-width: 16px; }
html[data-mode="mobile"] .reel-nav { width: 46px; height: 46px; }
html[data-mode="mobile"] .reel-nav img { left: -4.6px; top: -4.6px; width: 53px; height: 53px; }
html[data-mode="mobile"] .reel-info { height: 46px; margin: 0 8px; padding: 6px 16px; gap: 10px; }
html[data-mode="mobile"] .reel-num { width: 26px; font-size: 19px; }
html[data-mode="mobile"] .reel-name { font-size: 12px; }
html[data-mode="mobile"] .reel-sub { font-size: 9.5px; }
html[data-mode="mobile"] .reel-time { display: none; }
html[data-mode="mobile"] .reel-osd { font-size: 18px; padding: 8px 14px; }

html[data-mode="mobile"] #taskbar {
  height: calc(var(--tb-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  align-items: stretch;
}
html[data-mode="mobile"] #startbtn {
  padding: 0 16px 0 12px; gap: 6px; border-radius: 0 20px 20px 0;
  align-items: center;
}
html[data-mode="mobile"] .start-flag { width: 22px; height: 22px; }
html[data-mode="mobile"] .start-text { font-size: 18px; min-width: 0; }
html[data-mode="mobile"] #tasks {
  gap: 6px; padding: 6px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
html[data-mode="mobile"] #tasks::-webkit-scrollbar { display: none; }
html[data-mode="mobile"] .taskbtn {
  height: 40px; min-width: 44px; flex: 0 0 auto; max-width: 110px;
  padding: 0 10px; font-size: 13px; gap: 6px;
}
html[data-mode="mobile"] .taskbtn img { width: 20px; height: 20px; }
html[data-mode="mobile"] #tray { padding: 0 8px; gap: 4px; }
html[data-mode="mobile"] .tray-ic { display: none; }

html[data-mode="mobile"] #langbtn .tray-ic { display: block; }
html[data-mode="mobile"] #langbtn { height: 28px; padding: 0 6px; font-size: 13px; margin: 0; }
html[data-mode="mobile"] #clock { display: none; }

html[data-mode="mobile"] #startmenu {
  left: 0; right: 0; width: auto;
  bottom: calc(var(--tb-h) + var(--safe-b));
  max-height: 76vh; border-radius: 0;
  overflow-y: auto;
}
html[data-mode="mobile"] .sm-body {
  display: grid; grid-template-columns: 1fr;
  width: 100%; min-height: 0; flex: none; overflow: visible;
}

html[data-mode="mobile"] .sm-left, html[data-mode="mobile"] .sm-right {
  grid-area: 1 / 1;
  width: 100%; min-height: 0; padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; align-content: start;
}
html[data-mode="mobile"] .sm-left .sm-pinned, html[data-mode="mobile"] .sm-left .sm-sep {
  grid-column: 1 / -1;
}
html[data-mode="mobile"] .sm-right { border-left: none; border-top: 1px solid #95bdee; visibility: hidden; }
html[data-mode="mobile"] #startmenu.sm-more-open .sm-left { visibility: hidden; }
html[data-mode="mobile"] #startmenu.sm-more-open .sm-right { visibility: visible; }
html[data-mode="mobile"] .sm-toggle-places {
  grid-row: 2; grid-column: 1;
  display: flex; justify-content: flex-end; gap: 8px;
  width: 100%; border-top: 1px solid #d8d8d8;
}
html[data-mode="mobile"] .sm-item { min-height: 48px; padding: 8px; gap: 10px; font-size: 14px; }
html[data-mode="mobile"] .sm-item img { width: 32px; height: 32px; }
html[data-mode="mobile"] .sm-right .sm-item img { width: 28px; height: 28px; }
html[data-mode="mobile"] .sm-header {
  height: 68px;
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #4792ec 0%, #448be3 100%);
}
html[data-mode="mobile"] .sm-footer { height: auto; min-height: 56px; gap: 14px; }
html[data-mode="mobile"] .sm-footer button { min-height: 52px; padding: 10px 14px; font-size: 15px; gap: 8px; }
html[data-mode="mobile"] .sm-fic { width: 28px; height: 28px; }

html[data-mode="mobile"] #ctxmenu { display: none !important; }
html[data-mode="mobile"] .shut-dialog { width: min(340px, 92vw); }
html[data-mode="mobile"] .err-msg { max-width: none; }
html[data-mode="mobile"] .xpbtn,
html[data-mode="mobile"] .err-ok,
html[data-mode="mobile"] .shut-foot button { min-height: 40px; font-size: 13px; }

html[data-touch="yes"] .dicon,
html[data-touch="yes"] .taskbtn,
html[data-touch="yes"] .sm-item,
html[data-touch="yes"] .ex-item,
html[data-touch="yes"] .tbtn,
html[data-touch="yes"] #startbtn {
  touch-action: manipulation;
}
html[data-touch="yes"][data-mode="desktop"] .dicon { padding: 8px 2px; }
html[data-touch="yes"][data-mode="desktop"] .sm-item { min-height: 40px; }
html[data-touch="yes"][data-mode="desktop"] .ex-item { min-height: 40px; padding: 6px 4px; }
html[data-touch="yes"][data-mode="desktop"] .ex-panel-body a { padding: 5px 0; }
html[data-touch="yes"][data-mode="desktop"] .resize-grip { width: 26px; height: 26px; }
html[data-touch="yes"][data-mode="desktop"] .statusbar { min-height: 24px; padding-right: 28px; }

html[data-mode="mobile"] .ms-shell {
  --ms-cell: min(48px, calc((100vw - 48px) / 9));
  --ms-ui-scale: 1.8;
  gap: 18px; padding: 20px; justify-content: center;
}
html[data-mode="mobile"] .ms-top { max-width: 438px; padding: 10px 14px; }

html[data-mode="mobile"] .ab-page { padding: 14px; }
html[data-mode="mobile"] .ab-top { flex-direction: column; gap: 14px; }
html[data-mode="mobile"] .ab-photo { width: 100%; max-width: none; align-self: stretch; }

html[data-mode="mobile"] .nw-hero { flex-direction: column; }
html[data-mode="mobile"] .nw-figure { flex: none; width: 100%; max-width: none; }
html[data-mode="mobile"] .nw-main { order: 0; }
html[data-mode="mobile"] .nw-masthead { gap: 12px; margin: -14px -14px 0; padding: 16px 14px; }
html[data-mode="mobile"] .nw-mast-logo { width: 48px; height: 48px; }
html[data-mode="mobile"] .nw-mast-title h1 { font-size: 20px; }
html[data-mode="mobile"] .nw-mast-tagline { font-size: 11px; }
html[data-mode="mobile"] .nw-navbar { margin: 0 -14px; padding: 0 10px; }
html[data-mode="mobile"] .nw-nav-link { font-size: 13px; padding: 11px 12px; }

.tm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.tm-card {
  --mb-bg: #ccc; --mb-accent: #fff; --mb-ink: #fff;
  border: 1px solid var(--sep-soft); border-radius: 4px;
  overflow: hidden; cursor: pointer; background: #fff;
}
.tm-card:hover  { border-color: #f8b334; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.tm-card:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }
.tm-swatch {
  aspect-ratio: 3 / 4; background: var(--mb-bg);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.tm-swatch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-mono {
  font: 700 30px/1 var(--title-font); color: var(--mb-accent);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.tm-meta { padding: 7px 9px; display: flex; flex-direction: column; gap: 1px; background: #fff; }
.tm-meta b { color: var(--heading-ink); }
.tm-meta span { color: #666; }

.mb-page {
  --mb-bg: #1b2a5e; --mb-accent: #ffd75e; --mb-ink: #fff;
  --mb-muted: rgba(255,255,255,.72); --mb-sheet: rgba(0,0,0,.3); --mb-edge: rgba(255,255,255,.22);
  --mb-textshadow: 0 1px 3px rgba(0,0,0,.55);
  flex: 1; overflow-y: auto; user-select: text;
  background: var(--mb-bg);
  background-attachment: local;
  color: var(--mb-ink);
  container-type: inline-size;
}
.mb-hero { display: flex; align-items: flex-end; gap: 20px; padding: 22px 24px 16px; }
.mb-tile {
  width: 190px; aspect-ratio: 3 / 4; height: auto;
  flex: none; position: relative; overflow: hidden;
  border-radius: 6px; border: 2px solid var(--mb-edge);
  background: rgba(0, 0, 0, .18);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .38);
}
.mb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-monogram { font: 700 58px/1 var(--title-font); color: var(--mb-accent); }
.mb-id { min-width: 0; padding-bottom: 6px; }
.mb-name {
  font: 700 26px/1.15 var(--title-font); color: var(--mb-accent);
  text-shadow: var(--mb-textshadow);
}
.mb-role { color: var(--mb-ink); margin-top: 4px; font-size: 13px; text-shadow: var(--mb-textshadow); }

.mb-sheet {
  margin: 0 24px 24px; padding: 16px 18px;
  background: var(--mb-sheet);
  border: 1px solid var(--mb-edge); border-radius: 5px;
  backdrop-filter: blur(2px);
}
.mb-bio p { line-height: 1.7; margin-bottom: 10px; color: var(--mb-ink); }
.mb-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mb-link {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 10px; text-decoration: none;
  border: 1px solid var(--mb-edge); border-radius: 3px;
  color: var(--mb-ink); background: rgba(255, 255, 255, .06);
}
.mb-link b { color: var(--mb-accent); }
.mb-link:hover { border-color: var(--mb-accent); }

@container (max-width: 520px) {
  .mb-tile { width: 150px; }
  .mb-name { font-size: 22px; }
}
@container (max-width: 380px) {
  .mb-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mb-tile { width: 100%; max-width: 220px; }
  .mb-sheet { margin: 0 24px 16px; }
}
html[data-mode="mobile"] .mb-hero { padding: 16px; }
html[data-mode="mobile"] .mb-sheet { margin: 0 16px 16px; }
html[data-mode="mobile"] .tm-card { min-height: 44px; }