/* dai3.v2core.com: the exe homepage's chrome (exe-stats chrome.css, copied verbatim below the rule) and
   this site's own few rules, as rotk5.v2core.com has them. The desk defines the look: the exe repository's internal/server/ui/index.html. */
:root {
  --black: #262626;
  --g200: #eee; --g300: #ddd; --g400: #ccc; --g500: #bbb; --g600: #999; --g700: #808080; --g800: #666;
  --hl: #333399; --lav: #ccf;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; padding: 24px 12px 48px; background: var(--g400); color: var(--black); cursor: default;
  padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  font: 12px/1.45 "Charcoal", "Chicago", "Geneva", "Lucida Grande", "Lucida Sans", Verdana, sans-serif; }
a { color: var(--hl); }
.window { position: relative; max-width: 640px; margin: 0 auto 22px;
  background: var(--g400); border: 1px solid var(--black);
  box-shadow: 2px 2px 0 var(--black); }
.window::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.5), inset -1px -1px 0 var(--g600), inset 1px 1px 0 #fff; }
.titlebar { display: flex; align-items: center; gap: 4px; padding: 2px 4px;
  background: var(--g400); user-select: none; }
.titlebar .stripe { flex: 1; height: 12px; min-width: 8px; position: relative;
  background-color: var(--g300);
  background-image: linear-gradient(#fff, #fff 50%, #777 50%, #777);
  background-size: 100% 2px; background-repeat: repeat; }
.titlebar .stripe::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background-image: linear-gradient(#fff, #fff 50%, #ccc 50%, #ccc);
  background-size: 100% 2px; background-repeat: repeat; border-bottom: 1px solid #ccc; }
.titlebar .stripe::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background-image: linear-gradient(#ccc, #ccc 50%, #777 50%, #777);
  background-size: 100% 2px; background-repeat: repeat; }
.titlebar .title { font-weight: bold; font-size: 12px; line-height: 13px; padding: 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%;
  background: var(--g400); }
.tbox { display: block; width: 13px; height: 13px; flex: none; position: relative;
  border: none; padding: 0; cursor: default;
  background: linear-gradient(135deg, #9a9a9a 0%, #f1f1f1 100%) 50% / 9px 9px;
  box-shadow: inset 1px 1px 0 var(--g700), inset -1px -1px 0 #fff,
    inset 0 0 0 2px var(--black), inset 3px 3px 0 #fff, inset -3px -3px 0 var(--g700); }
.tbox:active::after { content: ""; position: absolute; inset: 2px; z-index: 1;
  background-image: linear-gradient(135deg, #353535cc 0%, #9c9c9ccc 100%); }
.frame { margin: 0 4px 4px; border: 1px solid var(--black); background: #fff;
  box-shadow: -1px -1px 0 var(--g600), 1px 1px 0 #fff; }
.statusbar { border-top: 1px solid var(--black); background: var(--g300);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 #aaa;
  padding: 3px 8px; font-size: 11px; color: #333; display: flex; align-items: center; gap: 12px; }
.btn { display: inline-block; box-sizing: border-box; min-width: 58px; height: 20px; padding: 2px 13px;
  background: var(--g300); color: var(--black); text-decoration: none; text-align: center;
  font-size: 12px; line-height: 14px; font-weight: bold; white-space: nowrap;
  border: 1px solid var(--black); border-radius: 3px;
  box-shadow: inset 1px 1px 0 var(--g300), inset -1px -1px 0 #777, inset 2px 2px 0 #fff, inset -2px -2px 0 #aaa; }
.btn:active { background: var(--g800); color: #fff;
  box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #888, inset 2px 2px 0 #555, inset -2px -2px 0 #777; }

/* ---- this site ---- */
@font-face { font-family: "Geneva"; font-weight: normal; src: local("Geneva"); }
@font-face { font-family: "Geneva"; font-weight: bold; src: local("Lucida Grande Bold"), local("LucidaGrande-Bold"); }
.statusbar > :last-child:not(:first-child) { margin-left: auto; }
h1 { margin: 0; font-size: 12px; line-height: 16px; }
h1 small { display: block; font-size: 12px; font-weight: normal; }
h2 { margin: 16px 0 4px; font-size: 12px; line-height: 16px; }
p { margin: 0 0 8px; }
ul { margin: 0 0 8px; padding: 0 0 0 18px; }
li { margin: 0 0 4px; }
code { font: 11px/1.45 Monaco, Menlo, Consolas, "DejaVu Sans Mono", monospace; overflow-wrap: anywhere; }
/* the line under the window; its own name, so no strip inside a window inherits its measure */
.colophon { max-width: 720px; margin: 0 auto; text-align: center; font-size: 11px; color: #333; }

/* ---- the window, in the Dict app's shape: the intro on the toolbar's grey at the top with the tabs
   standing on it, their feet on the page's top line; the page white and flush with the frame at the sides
   and with the status bar below, whose top line is the one seam there ---- */
.frame { background: #eee; }
.top { padding: 14px 16px 0; background: #eee; }
.head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.head img { display: block; width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
/* the desktop's Platinum tab control (internal/server/ui/index.html .tabbar and .tab, copied), as the Dict
   app stands it: the open tab filled with the page's white, since the page is what it opens onto. The bar
   reaches 3px below its line so the open tab's foot covers the page's top line, and past what fits it
   scrolls sideways with its scroll bar hidden. */
.tabbar { display: flex; align-items: flex-start; padding: 4px 0 3px; margin: 0 -10px -3px; 
  position: relative; z-index: 2; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  height: 22px; color: #000; font-size: 11px; font-weight: bold; line-height: 14px;
  text-align: center; padding: 0 2px; position: relative; white-space: nowrap; text-decoration: none;
  border-style: solid; border-width: 8px 14px 0 14px;
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='22'><path d='M4.5 23 L11 5.5 Q11.8 1.5 14 1.5 L30 1.5 Q32.2 1.5 33 5.5 L39.5 23' fill='%23ccc' stroke='%23000'/><path d='M6.2 23 L12 5.8 Q12.6 2.5 14 2.5 L29.5 2.5' fill='none' stroke='%23ddd'/><path d='M30 2.5 Q31.6 2.5 32.2 5.8 L37.8 23' fill='none' stroke='%23aaa'/></svg>") 8 14 0 14 fill stretch;
  display: flex; align-items: flex-start; flex: none;
}
.tab + .tab { margin-left: -7px; }
.tab.active {
  height: 25px; margin-bottom: -3px; z-index: 3;
  border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='25'><path d='M3.8 25 L11 5.5 Q11.8 1.5 14 1.5 L30 1.5 Q32.2 1.5 33 5.5 L40.2 25 Z' fill='%23fff'/><path d='M4.9 22 L11 5.5 Q11.8 1.5 14 1.5 L30 1.5 Q32.2 1.5 33 5.5 L39.1 22' fill='none' stroke='%23000'/><path d='M6.6 22 L12 5.8 Q12.6 2.5 14 2.5 L29.5 2.5' fill='none' stroke='%23fff'/><path d='M30 2.5 Q31.6 2.5 32.2 5.8 L37.4 22' fill='none' stroke='%23bbb'/></svg>") 8 14 0 14 fill stretch;
}
/* the word stands 3px higher than the desktop's block sets it, 6px clear each way, as in Dict */
.tab > span { position: relative; top: -3px; }
.page { position: relative; background: #fff; border-top: 1px solid #262626; padding: 12px 16px 8px; }
.page > p:first-child { margin-top: 0; }

/* the downloads: a row a file, the sum under it in a quieter line; the three columns keep their widths
   whatever a name's length, and a phone stacks a row */
table.dl { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
table.dl td { padding: 6px 8px 2px 0; vertical-align: top; border-top: 1px solid #ddd; }
table.dl tr.sum td { border-top: 0; padding: 0 8px 6px 0; }
table.dl td.sys { width: 72px; white-space: nowrap; font-weight: bold; }
table.dl td.size { width: 64px; text-align: right; white-space: nowrap; }
table.dl a.file { font-weight: bold; }
table.dl .what { color: #555; }
table.dl tr.sum code { color: #555; font-size: 10px; }
ul.notes { margin-top: 8px; color: #333; }
@media (max-width: 480px) {
  table.dl, table.dl tbody, table.dl tr, table.dl td { display: block; width: auto; }
  table.dl td { border-top: 0; padding: 0 0 2px; }
  table.dl tr { border-top: 1px solid #ddd; padding: 6px 0 2px; }
  table.dl tr.sum { border-top: 0; padding: 0 0 6px; }
  table.dl tr.sum td:first-child { display: none; }
  table.dl td.size { text-align: left; color: #555; }
}

/* a set (of downloads, of pictures) and a revision: a block each, its heading first, a quieter word
   after the heading's name */
.set h2, .rev h2 { margin: 12px 0 4px; }
.set:first-of-type h2, .rev:first-of-type h2 { margin-top: 0; }
.set .who, .rev .who, .rev .date { color: #555; font-weight: normal; }
.rev .date { margin-right: 6px; }
.rev ul { margin-bottom: 0; }

/* the gallery: each picture a sunken field keeping its shape before it arrives */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.grid figure { margin: 0; }
.grid .shot { position: relative; display: block; border: 1px solid #262626; background: #ccf; overflow: hidden;
  box-shadow: -1px -1px 0 #999, 1px 1px 0 #fff; }
.grid .shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.grid .gif { position: absolute; right: 4px; bottom: 4px; padding: 0 3px; font-size: 9px; font-weight: bold;
  line-height: 12px; color: #fff; background: #262626; }
.grid figcaption { margin: 4px 0 0; font-size: 11px; line-height: 14px; color: #333; }
/* four pictures of an edition over its files, two to a row on a phone */
.grid.four { grid-template-columns: repeat(4, 1fr); margin: 4px 0 12px; }
@media (max-width: 480px) { .grid.four { grid-template-columns: repeat(2, 1fr); } }
/* each edition, and the source packages after them, stand apart from the edition before */
.set.edition + .set { margin-top: 36px; }

/* ---- the picture viewer: a window over the page (the documentation's Contents box, as a picture frame).
   The picture is on the desk's lavender in a sunken field at its own size, and no larger than the screen
   leaves for it; the window takes the picture's width. ---- */
.picbox { padding: 0; border: 0; background: none; max-width: none; max-height: none; width: fit-content; height: fit-content; margin: auto; }
.picbox::backdrop { background: rgba(38, 38, 38, .45); }
/* the window itself holds the keyboard focus while it is open (the arrows walk, Tab reaches the buttons),
   so no focus ring lands on the close box when it opens or after a key */
.picbox:focus { outline: none; }
.picbox .window { margin: 0; max-width: none; width: fit-content; }
.picbox .frame { background: #ccf; }
.picbox .pic { padding: 8px; }
.picbox .pic img { display: block; width: auto; height: auto; box-sizing: content-box;
  max-width: calc(100vw - 56px); max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px);
  border: 1px solid #262626; background: #000; box-shadow: -1px -1px 0 #99c, 1px 1px 0 #fff; }
.picbox .foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid #262626;
  background: #ddd; color: #333; font-size: 11px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 #aaa; }
.picbox .foot .fill { flex: 1 1 auto; min-width: 8px; }
.picbox .foot .btn { min-width: 0; padding: 2px 10px; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; }
.picbox .btn .g { display: none; font-size: 14px; line-height: 12px; }
/* the window's title is the caption; the foot's count never wraps */
.picbox .titlebar .title { max-width: none; flex: 0 1 auto; }
.picbox .foot > span:first-child { white-space: nowrap; }
/* a phone: the words give way to the glyphs, Open goes, and the picture fills what is left */
@media (max-width: 480px) {
  .picbox .btn .t { display: none; }
  .picbox .btn .g { display: inline; }
  .picbox .foot .btn.open { display: none; }
  .picbox .pic img { max-width: calc(100vw - 44px); }
}

/* ---- the guide ---- */
.guide h3 { margin: 12px 0 2px; font-size: 12px; line-height: 16px; color: #333; }
.guide .sect { margin-top: 22px; padding-top: 10px; border-top: 1px solid #ccc; }
.guide .sect h2 { margin-top: 0; }
.guide .toc { margin: 0 0 4px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.guide .toc li { margin: 0; }
.guide .sources { margin-top: 22px; padding-top: 10px; border-top: 1px solid #ccc; font-size: 11px; color: #555; }
table.cmds { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
table.cmds th, table.cmds td { padding: 5px 10px 5px 0; text-align: left; vertical-align: top; border-top: 1px solid #ddd; }
table.cmds th { width: 92px; white-space: nowrap; }
dl.years { display: grid; grid-template-columns: 44px 1fr; gap: 5px 12px; margin: 4px 0 10px; }
dl.years dt { font-weight: bold; }
dl.years dd { margin: 0; }
/* the main screen explained: the picture at its own size, a light line on a dark edge inside it, a plain
   line in the margin, a numbered badge and a word at each line's end. It is wider than the window, so it
   stands over the window in a panel of its own, centred on it, and the window keeps its width: 940 px where
   the screen has room, else the screen's width less the body's gutters and a scroll bar. Narrower than its
   words can be read at, the box scrolls sideways instead. */
.screen { position: relative; z-index: 5; box-sizing: border-box; width: min(940px, calc(100vw - 40px));
  margin: 12px 0 6px calc((100% - min(940px, calc(100vw - 40px))) / 2); padding: 10px 13px 8px;
  background: #fff; border: 1px solid var(--black); box-shadow: 2px 2px 0 var(--black); }
.screen .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.screen svg { display: block; width: 100%; min-width: 720px; max-width: 912px; height: auto; margin: 0 auto; }
.screen figcaption { max-width: 640px; margin: 6px auto 0; font-size: 11px; line-height: 14px; color: #333; }
.screen .edge { fill: none; stroke: #262626; stroke-width: 1; }
.screen .ln polyline { fill: none; stroke: #262626; stroke-width: 1; }
.screen .halo polyline, .screen .halo rect { fill: none; stroke: #262626; stroke-width: 3; stroke-linejoin: round; }
.screen .core polyline, .screen .core rect { fill: none; stroke: #ffe066; stroke-width: 1; }
.screen .end circle { fill: #ffe066; stroke: #262626; stroke-width: 1; }
.screen .lab circle { fill: var(--hl); }
.screen .lab .n { fill: #fff; font-size: 11px; font-weight: bold; text-anchor: middle; }
.screen .lab .t { fill: var(--black); font-size: 12px; }
/* at its own size the picture keeps its pixels square (DPR 2 doubles each exactly) */
@media (min-width: 980px) { .screen .pic { image-rendering: pixelated; } }
ol.callouts { margin: 12px 0 4px; padding: 0; list-style: none; columns: 2 300px; column-gap: 28px; }
ol.callouts li { position: relative; margin: 0 0 7px; padding-left: 26px; break-inside: avoid; }
ol.callouts .n { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--hl); color: #fff; font-size: 11px; font-weight: bold; line-height: 18px; text-align: center; }
.screen .narrow { display: none; font-weight: bold; }
@media (max-width: 760px) { .screen .narrow { display: inline; } }
/* the commands' tables: each command's button, clipped from the game, at its own size, and over the text the
   menu it opens; the pixels stay square when a screen doubles them */
img.clip { display: block; image-rendering: pixelated; }
table.cmds.clips th { width: 56px; padding-top: 6px; }
table.cmds.clips td { padding-top: 6px; }
table.cmds .menu { display: block; margin: 0 0 5px; max-width: 100%; overflow-x: auto; }

/* dai3: the Music page's table of tracks */
table.tracks { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
table.tracks th, table.tracks td { padding: 4px 10px 4px 0; text-align: left; vertical-align: top; border-top: 1px solid #ddd; }
table.tracks thead th { border-top: 0; color: #555; font-weight: normal; }
table.tracks td.n, table.tracks td.len { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tracks td.n { width: 40px; }
table.tracks td.len { width: 56px; }
table.tracks td.note { color: #555; }
table.tracks td i { color: #808080; }