/* Mac OS 9 Platinum, drawn with base16 slots: bevels are base03 over base00. */
body.codes{font:13px/1.4 var(--text);overflow:hidden;
  background:var(--base00) radial-gradient(var(--base02) 1px,transparent 1.5px) 0 0/6px 6px}
.mac{position:fixed;inset:0}
.menubar{position:fixed;top:0;left:0;right:0;height:22px;display:flex;align-items:center;gap:2px;padding:0 8px;z-index:100000;
  background:var(--base05);color:var(--base00);border-bottom:1px solid var(--base00);font:600 13px var(--head)}
.menubar .menu{position:relative}
.menubar .title{background:none;border:0;padding:1px 10px;cursor:default;color:inherit;font:inherit}
.menubar .menu.open .title{background:var(--base01);color:var(--base06)}
.menubar .drop{position:absolute;top:21px;left:0;min-width:15em;background:var(--base05);color:var(--base00);
  border:1px solid var(--base00);box-shadow:2px 2px 0 rgb(0 0 0/.45);padding:3px 0}
.menubar .item{display:block;width:100%;text-align:left;background:none;border:0;padding:2px 18px;color:inherit;text-decoration:none;font:500 13px var(--text);cursor:default}
.menubar .item:hover{background:var(--base01);color:var(--base06)}
.menubar hr{border:0;border-top:1px dotted var(--base03);margin:3px 0}
.menubar .right{margin-left:auto;font-weight:400}
.desktop{position:fixed;top:34px;right:12px;bottom:8px;display:flex;flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-start;gap:8px 4px;align-items:center}
.icon{display:flex;flex-direction:column;align-items:center;gap:3px;width:84px;background:none;border:0;color:var(--base05);text-decoration:none;cursor:pointer;font-family:var(--text)}
.icon .glyph{width:42px;height:42px;display:grid;place-items:center;font-size:24px;color:var(--base0B);
  background:var(--base02);border:1px solid var(--base03);box-shadow:inset 1px 1px 0 var(--base03),2px 2px 0 var(--base00)}
.icon .label{background:var(--base00);padding:0 4px;font-size:12px}
.icon:focus .label,.icon:hover .label{background:var(--base01);color:var(--base06)}
.window{position:absolute;display:flex;flex-direction:column;background:var(--base02);color:var(--base05);
  border:1px solid var(--base00);box-shadow:inset 1px 1px 0 var(--base03),inset -1px -1px 0 var(--base00),3px 3px 0 rgb(0 0 0/.4);
  max-width:calc(100vw - 20px);max-height:calc(100vh - 30px)}
.titlebar{display:flex;align-items:center;gap:8px;height:22px;padding:0 6px;cursor:grab;user-select:none;
  background:repeating-linear-gradient(to bottom,var(--base03) 0 1px,var(--base02) 1px 3px)}
.titlebar h2{margin:0 auto;padding:0 10px;background:var(--base02);font:700 13px var(--head);color:var(--base06)}
.close{width:13px;height:13px;padding:0;background:var(--base02);border:1px solid var(--base00);box-shadow:inset 1px 1px 0 var(--base03);cursor:pointer}
.close:active{background:var(--base00)}
.window .body{padding:8px 10px;overflow:auto;flex:1;min-height:0;background:var(--base00);margin:0 5px 5px;border:1px solid var(--base03)}
.w-timel{width:min(1100px,calc(100vw - 230px));height:min(640px,80vh)}
.w-repos{width:min(640px,92vw);height:min(520px,75vh)}
.w-getin{width:380px}
.w-query{width:min(900px,92vw);height:min(620px,80vh)}
.w-activ{width:min(720px,92vw);height:min(560px,80vh)}
.w-appea{width:min(560px,92vw);height:min(520px,75vh)}
.w-about{width:340px}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.toolbar input:not([type]),.appearance input,.query textarea,.query select{background:var(--base00);border:1px solid var(--base03);
  box-shadow:inset 1px 1px 0 rgb(0 0 0/.4);padding:3px 6px}
.note{color:var(--base04);font-size:12px}
.loading{color:var(--base0A)}
.btn{display:inline-block;padding:3px 14px;background:var(--base02);border:1px solid var(--base00);border-radius:4px;
  box-shadow:inset 1px 1px 0 var(--base03),inset -1px -1px 0 var(--base00);color:var(--base06);text-decoration:none;cursor:pointer;font:500 13px var(--text)}
.btn:active{background:var(--base00)}
.btn.default{outline:2px solid var(--base0A);outline-offset:1px}
.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
.timeline{width:100%;display:block}
.timeline .lane{font:700 11px var(--head);fill:var(--base04)}
.timeline .year{font:11px var(--code);fill:var(--base04)}
.timeline .grid{stroke:var(--base02);stroke-width:1}
.timeline .sep{stroke:var(--base03);stroke-dasharray:2 3}
.timeline .bar{cursor:pointer}
.timeline .bar:hover{opacity:1;stroke:var(--base06);stroke-width:.6}
.scroll{overflow:auto;max-height:100%}
table.list{width:100%;border-collapse:collapse;font-size:12px}
table.list th{position:sticky;top:0;background:var(--base02);text-align:left;padding:2px 6px;border-bottom:1px solid var(--base03);cursor:default;font-weight:600}
table.list th.on{background:var(--base03)}
table.list td{padding:1px 6px;border-bottom:1px solid var(--base01);white-space:nowrap;max-width:420px;overflow:hidden;text-overflow:ellipsis}
table.list tr:hover td{background:var(--base01)}
table.list tr.sel td{background:var(--base0D);color:var(--base00)}
.num{text-align:right;font-family:var(--code)}
.info h3,.about h3{margin:0 0 6px;font:700 16px var(--head);color:var(--base0B)}
.info table th,.about table th{text-align:left;padding-right:12px;color:var(--base04);font-weight:500}
.query{display:flex;flex-direction:column;height:100%}
.query textarea{width:100%;font:12px/1.4 var(--code);resize:vertical}
.query .error{color:var(--base08);white-space:pre-wrap}
.activity .years{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.activity .years .btn{padding:1px 8px;font-size:12px}
.heat{width:100%;max-width:640px;display:block;margin:6px 0 10px}
.heat .l0{fill:var(--base01)}.heat .l1{fill:var(--base0B);opacity:.3}.heat .l2{fill:var(--base0B);opacity:.55}
.heat .l3{fill:var(--base0B);opacity:.8}.heat .l4{fill:var(--base0B)}
.appearance ul{list-style:none;margin:6px 0;padding:0}
.appearance li{padding:2px 6px;cursor:pointer;display:flex;gap:2px;align-items:center}
.appearance li.sel{background:var(--base0D);color:var(--base00)}
.appearance li.saved{font-weight:700}
.appearance .dot{width:12px;height:12px;border:1px solid var(--base03);display:inline-block}
.appearance .scroll{max-height:calc(100% - 80px)}
@media (max-width:700px){.menubar{overflow:hidden;white-space:nowrap}.menubar .right{display:none}.menubar .title{padding:1px 6px}.desktop{flex-direction:row;flex-wrap:wrap;top:auto;bottom:6px;left:6px;right:6px;justify-content:center}
  .window{left:4px!important;top:28px!important;width:calc(100vw - 8px)!important}}
.icon.alias .label{font-style:italic}
.icon.alias .glyph{font-size:20px;color:var(--base0E)}
.menubar .drop .item{max-width:46em;overflow:hidden;text-overflow:ellipsis}