/* Exhibit styles: each object keeps the look of its own period, inside the Win95 window that runs it. */

/* ENIAC */
.a-eniac { background: #2d2f2b; border: 8px solid #1c1d1a; color: #e9e4d4; direction: ltr; font-family: "Courier New", monospace; padding: 10px; width: 380px; }
.a-eniac .tubes { display: grid; gap: 4px; grid-template-columns: repeat(12, 1fr); margin-bottom: 10px; }
.a-eniac .tube { aspect-ratio: 1 / 1.6; background: radial-gradient(circle at 50% 35%, #6b5a40, #3a3226 70%); border: 1px solid #111; border-radius: 40% 40% 3px 3px; padding: 0; }
.a-eniac.running .tube { animation: tube .25s steps(2) infinite; background: radial-gradient(circle at 50% 35%, #ffcf6b, #c25a14 60%, #3a3226); }
.a-eniac.running .tube:nth-child(3n) { animation-delay: .12s; }
.a-eniac .tube.burnt, .a-eniac.running .tube.burnt { animation: none; background: radial-gradient(circle at 50% 35%, #555, #222 70%); cursor: pointer; outline: 2px dashed #c33; outline-offset: 1px; }
@keyframes tube { 50% { filter: brightness(.7); } }
.a-eniac .panels { align-items: center; display: flex; gap: 4px; justify-content: space-between; }
.a-eniac .acc { background: #1a1b18; border: 2px solid #4a4c45; padding: 6px; text-align: center; }
.a-eniac .lbl { font-size: 10px; letter-spacing: .05em; margin-bottom: 4px; }
.a-eniac .decades { display: flex; gap: 3px; justify-content: center; }
.a-eniac .decade { background: #111; border: 1px solid #333; display: flex; flex-direction: column; gap: 2px; padding: 3px; }
.a-eniac .decade i { background: #3a1a10; border-radius: 50%; display: block; height: 7px; width: 7px; }
.a-eniac .decade i.on { background: #ff7a2e; box-shadow: 0 0 5px #ff7a2e; }
.a-eniac .val { font-size: 16px; font-weight: 700; margin-top: 4px; }
.a-eniac .cable { height: 46px; opacity: .15; width: 46px; }
.a-eniac .cable path { fill: none; stroke: #111; stroke-linecap: round; stroke-width: 7; }
.a-eniac.plugged .cable { opacity: 1; }
.a-eniac.plugged .cable path { stroke: #b23a2a; }
.a-eniac .controls { align-items: center; direction: rtl; display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.a-eniac button.plug, .a-eniac button.start, .a-eniac select { background: #c9c2ad; border: 2px outset #eee; color: #000; font-family: inherit; font-size: 13px; padding: 3px 10px; }
.a-eniac button.plug[aria-pressed="true"] { border-style: inset; }
.a-eniac .start { font-weight: 700; }
.a-eniac .reps { font-family: var(--ui); font-size: 13px; }
.a-eniac .log { direction: rtl; font-family: var(--ui); font-size: 13px; line-height: 1.4; margin-top: 8px; min-height: 38px; text-align: center; }

/* Tennis for Two */
.a-tennis { width: 380px; }
.a-tennis .scope { background: #3b3b38; border-radius: 12px; padding: 10px; }
.a-tennis canvas { background: #000; border-radius: 50% / 46%; box-shadow: inset 0 0 18px #000, 0 0 0 4px #222; display: block; width: 100%; }
.a-tennis .boxes { align-items: stretch; direction: ltr; display: flex; gap: 6px; justify-content: space-between; margin-top: 8px; }
.a-tennis .box { align-items: center; background: #6f6a5c; border: 2px outset #a8a290; color: #fff; display: flex; flex-direction: column; font-size: 12px; gap: 4px; padding: 6px; width: 104px; }
.a-tennis .box input[type=range] { width: 88px; }
.a-tennis .box button { background: #c0c0c0; border: 2px outset #fff; font-weight: 700; padding: 3px 8px; }
.a-tennis .box button:active { border-style: inset; }
.a-tennis .box :disabled { opacity: .5; }
.a-tennis .mid { direction: rtl; display: flex; flex-direction: column; font-size: 12px; gap: 6px; justify-content: center; }

/* Spacewar! */
.a-spacewar { background: #2a2c30; border: 10px solid #1d1e21; border-radius: 8px; padding: 8px; width: 400px; }
.a-spacewar canvas { background: #000; border-radius: 22px; display: block; width: 100%; aspect-ratio: 380 / 300; }
.a-spacewar canvas:focus-visible { outline: 2px dotted #9cf; outline-offset: 3px; }
.a-spacewar .pad { align-items: center; direction: ltr; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.a-spacewar .pad button { background: #c0c0c0; border: 2px outset #fff; font-size: 16px; min-height: 34px; min-width: 40px; touch-action: none; user-select: none; }
.a-spacewar .pad button:active { border-style: inset; }
.a-spacewar .pad .fire { font-size: 13px; font-weight: 700; }
.a-spacewar label { color: #cdd; direction: rtl; font-size: 12px; }

/* ELIZA: a teletype on a roll of paper */
.a-eliza { background: #d9d2bd; border: 10px solid #8c8471; border-radius: 6px; padding: 10px; width: 380px; }
.a-eliza .paper {
  background: #fbf8ec repeating-linear-gradient(#fbf8ec 0 21px, #eef3f8 21px 22px); color: #1b1b1b; direction: ltr;
  font-family: "Courier New", monospace; font-size: 13px; height: 230px; line-height: 22px; overflow: auto; padding: 4px 10px; text-align: left;
}
.a-eliza .paper .you::before { content: "* "; }
.a-eliza .paper [dir="rtl"] { font-family: var(--ui); text-align: right; }
.a-eliza .paper .you { color: #0b2a8a; }
.a-eliza form { align-items: center; background: #fbf8ec; border-top: 1px dashed #aaa; direction: ltr; display: flex; font-family: "Courier New", monospace; gap: 6px; padding: 4px 10px; }
.a-eliza input { background: none; border: none; flex: 1; font: inherit; font-size: 13px; outline: none; unicode-bidi: plaintext; }
.a-eliza:focus-within { outline: 1px dotted #000; outline-offset: 2px; }

/* ARPANET map */
.a-arpanet { background: #101010; border: 10px solid #2b2b2b; padding: 10px; width: 440px; }
.a-arpanet svg { display: block; width: 100%; }
.a-arpanet line { stroke: #e8e8e8; stroke-width: 1.5; transition: opacity .3s; }
.a-arpanet .off { opacity: 0; pointer-events: none; }
.a-arpanet .node { cursor: pointer; outline: none; transition: opacity .3s; }
.a-arpanet .node:focus-visible rect { stroke: #ffd36a; stroke-width: 3; }
.a-arpanet .node rect { fill: #111; stroke: #e8e8e8; stroke-width: 1.5; transition: fill .2s; }
.a-arpanet .node:hover rect { fill: #333; }
.a-arpanet .node.active rect { fill: #e8e8e8; }
.a-arpanet .node.active text { fill: #111; }
.a-arpanet text { fill: #e8e8e8; font-family: "Courier New", monospace; font-size: 11px; }
.a-arpanet text.head { font-size: 11px; letter-spacing: .08em; }
.a-arpanet .years { align-items: center; color: #e8e8e8; display: flex; font-size: 13px; gap: 10px; margin-top: 6px; }
.a-arpanet .years input { flex: 1; }
.a-arpanet .log { color: #9f9; font-family: "Courier New", monospace; font-size: 12px; height: 34px; margin-top: 6px; direction: ltr; text-align: left; }

/* email terminal */
.a-terminal {
  background: #1d1a14; border: 14px solid #b9ae97; border-radius: 14px 14px 4px 4px;
  box-shadow: inset 0 0 0 3px #8f846d; color: #ffb000; direction: ltr;
  font-family: "Courier New", monospace; font-size: 13px; height: 230px; padding: 12px; text-align: left; width: 360px;
  text-shadow: 0 0 6px rgba(255,176,0,.6); overflow: hidden;
}
.a-terminal:focus-within { outline: 2px dotted var(--text); outline-offset: 4px; }
.a-terminal .out { white-space: pre-wrap; }
.a-terminal input {
  background: none; border: none; caret-color: #ffb000; color: inherit; font: inherit; outline: none;
  text-shadow: inherit; width: 85%;
}

/* Creeper */
.a-creeper { background: #1f2a24; border: 10px solid #39463e; padding: 10px; width: 400px; }
.a-creeper .hosts { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.a-creeper .host, .a-reaper .host {
  align-items: stretch; background: #e9e4d2; border: 3px solid #7f7a68; color: #222; display: flex; flex-direction: column;
  font-family: "Courier New", monospace; gap: 4px; min-height: 86px; padding: 4px; text-align: left; direction: ltr;
}
.a-creeper .host .name { background: #7f7a68; color: #fff; font-size: 10px; padding: 1px 4px; }
.a-creeper .host .scr { color: #777; font-size: 11px; line-height: 1.25; }
.a-creeper .host.on { background: #fff7c2; border-color: #b8860b; }
.a-creeper .host.on .scr { color: #000; font-weight: 700; }
.a-creeper .host.miss, .a-reaper .host.miss { animation: shake .3s; }
@keyframes shake { 33% { transform: translateX(-3px); } 66% { transform: translateX(3px); } }
.a-creeper .bar, .a-reaper .bar { align-items: center; color: #e9e4d2; display: flex; flex-wrap: wrap; font-size: 13px; gap: 10px; justify-content: space-between; margin-top: 10px; }

/* Reaper */
.a-reaper { background: #1f2a24; border: 10px solid #39463e; padding: 10px; width: 360px; }
.a-reaper .grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.a-reaper .host { align-items: center; justify-content: center; min-height: 64px; }
.a-reaper .host .scr { font-size: 12px; font-weight: 700; }
.a-reaper .host.inf { background: #f6d1c8; border-color: #a33; color: #a33; }
.a-reaper .host.reaper { background: #23324a; border-color: #8ab4ff; color: #fff; }
.a-reaper .host.near { outline: 2px dashed #8ab4ff; outline-offset: 2px; }
.a-reaper .go { background: #c0c0c0; border: 2px outset #fff; font-weight: 700; padding: 3px 10px; }

/* Pong */
.a-pong { background: #6b4b2e; border: 12px solid #4a321d; border-radius: 6px; padding: 10px; width: 404px; }
.a-pong canvas { background: #000; border-radius: 10px; display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: none; }
.a-pong canvas:focus-visible { outline: 2px dotted #fff; outline-offset: 3px; }

/* Altair 8800 */
.a-altair { background: #1c3a6b; border: 6px solid #c9ccd1; color: #fff; direction: ltr; font-family: Arial, sans-serif; padding: 10px 12px; width: 420px; }
.a-altair .brand { align-items: baseline; display: flex; gap: 8px; margin-bottom: 8px; }
.a-altair .brand b { font-size: 16px; letter-spacing: .12em; }
.a-altair .brand span { font-size: 10px; letter-spacing: .2em; }
.a-altair .row { display: grid; gap: 2px; grid-template-columns: repeat(16, 1fr); justify-items: center; }
.a-altair .row.stat, .a-altair .row.data { align-items: center; display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 6px; }
.a-altair .tag { font-size: 9px; letter-spacing: .1em; margin-inline-end: auto; }
.a-altair small { font-size: 8px; margin-inline-end: 6px; }
.a-altair i { background: #ff3b2e; border-radius: 50%; box-shadow: 0 0 6px #ff3b2e; display: block; height: 9px; opacity: .15; width: 9px; }
.a-altair .row.addr { margin-bottom: 2px; }
.a-altair .row.nums { font-size: 8px; margin-bottom: 2px; }
.a-altair .toggle {
  background: linear-gradient(#ddd, #888); border: 1px solid #222; border-radius: 3px; height: 24px; position: relative; width: 12px;
}
.a-altair .toggle::after { background: #f1f1f1; border-radius: 2px; content: ""; height: 9px; left: 1px; position: absolute; right: 1px; top: 13px; }
.a-altair .toggle.up::after { top: 1px; }
.a-altair .row.ctl { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 10px; }
.a-altair .ctl button { background: #c9ccd1; border: 2px outset #eee; color: #000; font-size: 10px; font-weight: 700; padding: 3px 5px; }
.a-altair .ctl button:active { border-style: inset; }
.a-altair .foot { align-items: center; direction: rtl; display: flex; gap: 10px; margin-top: 10px; }
.a-altair .load { background: #ffd34d; border: 2px outset #fff3b0; color: #000; font-family: var(--ui); font-size: 13px; padding: 3px 8px; }
.a-altair .msg { font-family: var(--ui); font-size: 12.5px; }

/* first spam */
.a-spam { background: #111; border: 12px solid #cfcab8; border-radius: 10px; color: #8f8; direction: ltr; font-family: "Courier New", monospace; font-size: 12px; padding: 10px; text-align: left; width: 400px; }
.a-spam .hdr div { line-height: 1.4; }
.a-spam .to { max-height: 34px; overflow: hidden; }
.a-spam .to.open { max-height: 120px; overflow: auto; }
.a-spam .more { background: none; border: 1px dashed #8f8; color: #8f8; font: inherit; padding: 0 4px; }
.a-spam .body { border-top: 1px dashed #4a4; line-height: 1.4; margin-top: 6px; padding-top: 6px; }
.a-spam .note { color: #6a6; font-family: var(--ui); font-size: 11px; margin-top: 2px; }
.a-spam .actions { align-items: center; display: flex; gap: 8px; margin-top: 8px; min-height: 26px; }
.a-spam .send { background: #8f8; border: none; color: #000; font: inherit; font-weight: 700; padding: 3px 12px; }
.a-spam .send:disabled { opacity: .4; }
.a-spam .prog { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-spam .inbox { list-style: none; margin-top: 6px; max-height: 120px; overflow: auto; }
.a-spam .inbox button { background: none; border: none; color: #ff6; font: inherit; padding: 2px 0; text-align: left; }
.a-spam .inbox p { color: #cfc; line-height: 1.35; padding: 2px 0 6px 12px; }

/* first .com */
.a-dns { background: #f4f1e6; border: 1px solid #888; direction: ltr; font-family: "Courier New", monospace; font-size: 13px; padding: 12px; text-align: left; width: 380px; }
.a-dns .head { border-bottom: 2px solid #000; font-weight: 700; margin-bottom: 8px; padding-bottom: 4px; }
.a-dns .reg { align-items: center; display: flex; gap: 4px; }
.a-dns .reg input { border: 1px solid #000; flex: 1; font: inherit; min-width: 0; padding: 3px 4px; }
.a-dns .reg button, .a-dns .find { background: #c0c0c0; border: 2px outset #fff; font: inherit; font-weight: 700; padding: 2px 8px; }
.a-dns .list { background: #fff; border: 1px solid #aaa; list-style: decimal inside; margin: 8px 0; max-height: 120px; overflow: auto; padding: 4px 6px; }
.a-dns .list li { display: flex; gap: 8px; }
.a-dns .list .n { flex: 1; }
.a-dns .list .d { color: #666; }
.a-dns .list li.mine { background: #ffef9e; }
.a-dns .lookup { align-items: center; display: flex; flex-direction: column; gap: 8px; }
.a-dns .steps { align-items: center; display: flex; gap: 4px; }
.a-dns .steps span { border: 1px solid #888; color: #888; font-size: 11px; padding: 2px 5px; }
.a-dns .steps span.on { background: #000080; border-color: #000080; color: #fff; }
.a-dns .steps i { border-top: 2px dotted #888; width: 18px; }
.a-dns .find { font-family: var(--ui); font-weight: 400; }
.a-dns .out { direction: rtl; font-family: var(--ui); margin-top: 8px; min-height: 20px; text-align: center; unicode-bidi: plaintext; }

/* Brain */
.a-brain { background: #111; border: 14px solid #c9c3ad; border-radius: 10px 10px 4px 4px; padding: 8px; width: 400px; }
.a-brain .scr { color: #d0d0d0; direction: ltr; font-family: "Courier New", monospace; font-size: 12px; height: 220px; line-height: 1.3; margin: 0; overflow: hidden; text-align: left; white-space: pre-wrap; }
.a-brain.infected .scr { color: #e6e6e6; }
.a-brain .btns { display: grid; gap: 4px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
.a-brain .btns button { background: #c0c0c0; border: 2px outset #fff; font-family: var(--ui); font-size: 12px; padding: 4px; }
.a-brain .btns button:disabled { color: #808080; text-shadow: 1px 1px #fff; }

/* Morris worm */
.a-worm { background: #e8e8e8; border: 1px solid #999; padding: 10px; width: 400px; }
.a-worm .grid { direction: ltr; display: grid; gap: 2px; grid-template-columns: repeat(12, 1fr); }
.a-worm .m { aspect-ratio: 1; background: #b9c4cf; border: 1px solid #8996a3; padding: 0; }
.a-worm .m.vuln { background: #f2d84b; border-color: #b39b16; }
.a-worm .m.inf { background: color-mix(in srgb, #e33 calc(40% + var(--load) * 60%), #f6b2b2); border-color: #a11; }
.a-worm .m.down { background: #222; border-color: #000; }
.a-worm .m.ok { background: #6ccf7d; border-color: #2f8a3e; }
.a-worm .bar { align-items: center; display: flex; flex-wrap: wrap; font-size: 12.5px; gap: 8px; margin-top: 8px; min-height: 30px; }
.a-worm .go { background: #c0c0c0; border: 2px outset #fff; font-weight: 700; padding: 3px 10px; }

/* IRC */
.a-irc { background: #000; border: 2px solid #555; color: #c0c0c0; direction: ltr; font-family: "Courier New", monospace; font-size: 12px; text-align: left; width: 400px; }
.a-irc .top { background: #00a; color: #fff; padding: 2px 6px; }
.a-irc .log { height: 230px; overflow: auto; padding: 4px 6px; }
.a-irc .log .sys { color: #5ff; }
.a-irc .log .join { color: #5f5; }
.a-irc .log .split { color: #ff5; }
.a-irc .log .mine { color: #fff; }
.a-irc form { border-top: 1px solid #555; display: flex; gap: 6px; padding: 3px 6px; }
.a-irc .me { color: #ff5; }
.a-irc input { background: none; border: none; color: #fff; flex: 1; font: inherit; outline: none; }
.a-irc:focus-within { outline: 1px dotted #000; outline-offset: 2px; }

/* firewall */
.a-fw { background: #f0f0f0; border: 1px solid #999; padding: 10px; width: 400px; }
.a-fw .lane { align-items: center; display: flex; font-family: "Courier New", monospace; font-size: 10px; gap: 4px; }
.a-fw .side { font-weight: 700; }
.a-fw .road { background: repeating-linear-gradient(90deg, #ddd 0 8px, #ccc 8px 16px); flex: 1; height: 28px; position: relative; }
.a-fw .road.in { flex: 0 0 40px; }
.a-fw .wall { background: repeating-linear-gradient(#a33 0 6px, #822 6px 7px); color: #fff; font-size: 9px; padding: 8px 2px; writing-mode: vertical-rl; }
.a-fw.alarm .road.in { background: #f99; }
.a-fw .pk { background: #6ccf7d; border: 1px solid #2f8a3e; font-size: 10px; padding: 2px 3px; position: absolute; top: 5px; }
.a-fw .pk.bad { background: #f88; border-color: #a11; }
.a-fw .conf { background: #fff; border: 1px solid #888; direction: ltr; font-family: "Courier New", monospace; font-size: 12px; margin-top: 10px; text-align: left; }
.a-fw .file { background: #000080; color: #fff; padding: 2px 6px; }
.a-fw .conf button { background: none; border: none; display: block; font: inherit; padding: 3px 6px; text-align: left; width: 100%; }
.a-fw .conf button:hover { background: #eef; }
.a-fw .conf .verb { color: #070; font-weight: 700; display: inline-block; width: 44px; }
.a-fw .conf .deny .verb { color: #b00; }
.a-fw .conf .cm { color: #888; }
.a-fw .score { font-size: 12px; line-height: 1.4; margin-top: 8px; min-height: 34px; }

/* coffee cam */
.a-coffee { align-items: center; background: #ddd; border: 1px solid #888; display: flex; flex-direction: column; gap: 6px; padding: 10px; width: 300px; }
.a-coffee .cam { background: #000; border: 2px inset #bbb; padding: 4px; }
.a-coffee canvas { display: block; height: 256px; image-rendering: pixelated; width: 256px; }
.a-coffee .info { direction: ltr; display: flex; font-family: "Courier New", monospace; font-size: 12px; justify-content: space-between; width: 264px; }
.a-coffee .lvl { direction: rtl; font-family: var(--ui); font-weight: 700; }
.a-coffee .refill { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; }

/* first livestream */
.a-stream { background: #d6d6d6; border: 1px solid #888; padding: 10px; width: 360px; }
.a-stream .vic { background: #c8c8c8; border: 2px outset #fff; direction: ltr; font-family: Helvetica, Arial, sans-serif; margin: 0 auto; width: 332px; }
.a-stream .vt { background: #3a5f8a; color: #fff; font-size: 11px; padding: 2px 6px; }
.a-stream canvas { background: #000; display: block; height: 240px; image-rendering: pixelated; margin: 4px auto; width: 320px; }
.a-stream .vs { display: flex; font-size: 10px; justify-content: space-between; padding: 0 6px 3px; }
.a-stream .ctl { align-items: center; display: flex; flex-wrap: wrap; font-size: 13px; gap: 10px; justify-content: space-between; margin-top: 8px; }
.a-stream .ctl label { align-items: center; display: flex; gap: 6px; }
.a-stream .play { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; }
.a-stream .viewers { font-size: 12px; margin-top: 6px; }

/* Netscape */
.a-nav { background: #c0c0c0; border: 2px outset #fff; direction: ltr; font-family: Arial, sans-serif; text-align: left; width: 400px; }
.a-nav .tools { align-items: center; display: flex; gap: 2px; padding: 3px; }
.a-nav .tools button { background: #c0c0c0; border: 1px outset #fff; font-size: 9px; padding: 8px 2px 2px; width: 40px; }
.a-nav .tools .tb-stop { cursor: pointer; }
.a-nav .throb { background: #000; border: 2px inset #fff; height: 38px; margin-left: auto; width: 38px; }
.a-nav .throb svg { fill: none; height: 100%; stroke: #9cf; stroke-width: 1.5; width: 100%; }
.a-nav .throb .comet { fill: #fff; opacity: 0; stroke: none; }
.a-nav.loading .throb .comet { animation: comet 1s linear infinite; opacity: 1; }
@keyframes comet { from { transform: translate(0, 0); } to { transform: translate(30px, 26px); } }
.a-nav .loc { align-items: center; display: flex; font-size: 11px; gap: 6px; padding: 2px 4px; }
.a-nav .url { background: #fff; border: 2px inset #ddd; flex: 1; font-family: "Courier New", monospace; overflow: hidden; padding: 1px 4px; white-space: nowrap; }
.a-nav .page { background: #c0c0c0; border: 2px inset #fff; font-family: "Times New Roman", serif; height: 220px; margin: 3px; overflow: auto; padding: 8px 10px; }
.a-nav .page h3 { font-size: 20px; margin-bottom: 4px; }
.a-nav .page p { font-size: 13px; margin: 4px 0; }
.a-nav .page canvas { border: 1px solid #000; display: block; height: 144px; image-rendering: pixelated; width: 240px; }
.a-nav .blink { animation: blinkhard 1s steps(1) infinite; color: #c00; font-weight: 700; }
.a-nav .status { align-items: center; border-top: 1px solid #888; display: flex; font-size: 11px; gap: 6px; padding: 2px 4px; }
.a-nav .st { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-nav .load { background: #c0c0c0; border: 2px outset #fff; font-family: var(--ui); font-size: 12px; padding: 1px 8px; }

/* MP3 */
.a-mp3 { background: #f2f2f2; border: 1px solid #999; padding: 12px; text-align: center; width: 360px; }
.a-mp3 .files { align-items: center; direction: ltr; display: flex; gap: 10px; justify-content: center; }
.a-mp3 .file { background: #fff; border: 1px solid #888; display: flex; flex-direction: column; font-size: 12px; padding: 8px 12px; width: 120px; }
.a-mp3 .file.mp3 { background: #fff7d1; }
.a-mp3 .arrow { font-size: 22px; }
.a-mp3 .q { align-items: center; display: flex; gap: 8px; justify-content: center; margin: 12px 0 6px; }
.a-mp3 .dl { font-size: 13px; min-height: 36px; }
.a-mp3 .play { background: #c0c0c0; border: 2px outset #fff; font-weight: 700; padding: 4px 16px; }

/* eBay 1995 */
.a-ebay { background: #fff; border: 1px solid #888; direction: ltr; font-family: "Times New Roman", serif; padding: 12px; text-align: left; width: 380px; }
.a-ebay .logo { color: #003399; font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.a-ebay .item { display: flex; gap: 12px; }
.a-ebay .pic { border: 1px solid #ccc; height: 70px; padding: 4px; width: 130px; }
.a-ebay .pic svg { height: 100%; width: 100%; }
.a-ebay .meta { font-size: 13px; line-height: 1.5; }
.a-ebay form { align-items: center; display: flex; gap: 4px; margin-top: 10px; }
.a-ebay input { border: 1px solid #888; font: inherit; padding: 2px 4px; width: 90px; }
.a-ebay button { background: #c0c0c0; border: 2px outset #fff; font: inherit; font-weight: 700; padding: 2px 10px; }
.a-ebay .log { direction: rtl; font-family: var(--ui); font-size: 13px; line-height: 1.5; margin-top: 8px; min-height: 40px; text-align: right; unicode-bidi: plaintext; }

/* dancing baby */
.a-baby { width: 320px; }
.a-baby .mail { background: #fff; border: 1px solid #888; direction: ltr; font-family: Arial, sans-serif; padding: 8px; text-align: left; }
.a-baby .hd { border-bottom: 1px solid #ccc; font-size: 11px; margin-bottom: 6px; padding-bottom: 4px; }
.a-baby canvas { display: block; margin: 0 auto; }
.a-baby .att { color: #555; font-size: 11px; margin-top: 4px; }
.a-baby .row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.a-baby button { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; }
.a-baby .count { font-size: 13px; }

/* SixDegrees */
.a-six { background: #fff; border: 1px solid #889; font-size: 13px; padding: 10px; width: 380px; }
.a-six .hdr { color: #1d3c8f; direction: ltr; font-family: Verdana, Arial, sans-serif; font-size: 20px; text-align: left; }
.a-six .hdr span { color: #e86a10; }
.a-six .me { background: #eef2ff; margin: 6px 0; padding: 4px 6px; }
.a-six .sugg { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.a-six .sugg button { background: #f6f6f6; border: 1px solid #aab; border-radius: 3px; font-size: 12px; padding: 2px 6px; }
.a-six .net > div { margin-top: 4px; }
.a-six .net b { display: block; font-size: 12px; margin-bottom: 2px; }
.a-six .p { border-radius: 10px; display: inline-block; font-size: 12px; margin: 1px; padding: 1px 7px; }
.a-six .p1 { background: #1d3c8f; color: #fff; }
.a-six .p2 { background: #a9b9ef; }
.a-six .p3 { background: #e3e8f8; }

/* Winamp-style player */
.a-amp { background: #23232e; border: 1px solid #000; color: #ddd; direction: ltr; font-family: Arial, sans-serif; font-size: 11px; padding: 6px; text-align: left; width: 300px; }
.a-amp .ttl { background: linear-gradient(#5b5b74, #2b2b3a); color: #e6e6ff; font-size: 9px; letter-spacing: .15em; padding: 1px 4px; }
.a-amp .disp { align-items: center; background: #000; display: grid; gap: 4px; grid-template-columns: auto 1fr; margin: 4px 0; padding: 4px; }
.a-amp .time { color: #3e3; font-family: "Courier New", monospace; font-size: 20px; }
.a-amp .disp canvas { justify-self: end; }
.a-amp .scroll { color: #3e3; grid-column: 1 / -1; overflow: hidden; white-space: nowrap; }
.a-amp .song { animation: marq 8s linear infinite; display: inline-block; padding-right: 100%; }
.a-amp .btns { align-items: center; display: flex; gap: 2px; }
.a-amp .btns button { background: #4a4a5c; border: 1px outset #888; color: #ddd; font-size: 11px; height: 20px; width: 26px; }
.a-amp .btns .play.on { color: #3e3; }
.a-amp .vol { align-items: center; display: flex; gap: 4px; margin-left: auto; }
.a-amp .vol input { width: 70px; }
.a-amp .eq { align-items: flex-end; display: flex; gap: 12px; margin-top: 6px; }
.a-amp .eq .ttl { align-self: stretch; writing-mode: vertical-rl; }
.a-amp .eq label { align-items: center; display: flex; flex-direction: column; gap: 2px; }
.a-amp .eq input { direction: rtl; height: 60px; width: 18px; writing-mode: vertical-lr; }
.a-amp .pl { background: #000; list-style: none; margin-top: 6px; padding: 2px; }
.a-amp .pl button { background: none; border: none; color: #3e3; font-size: 11px; padding: 1px 4px; text-align: left; width: 100%; }
.a-amp .pl button.on { background: #0000c6; color: #fff; }

/* Google 1998 */
.a-google { background: #fff; border: 1px solid #999; direction: ltr; font-family: "Times New Roman", serif; padding: 12px; text-align: left; width: 400px; }
.a-google .logo { font-family: "Times New Roman", serif; font-size: 40px; font-weight: 700; letter-spacing: -1px; text-align: center; text-shadow: 2px 2px 0 #bbb; }
.a-google .logo small { color: #888; font-size: 12px; margin-left: 4px; text-shadow: none; }
.a-google form { display: flex; gap: 4px; justify-content: center; margin: 6px 0 10px; }
.a-google input { border: 1px solid #888; font-size: 14px; padding: 2px 4px; width: 200px; }
.a-google form button { background: #ddd; border: 2px outset #fff; font-size: 12px; padding: 1px 8px; }
.a-google .res { list-style: none; min-height: 120px; }
.a-google .res li { margin-bottom: 6px; }
.a-google .res a { color: #00c; font-size: 15px; }
.a-google .res .bar { background: #eee; display: inline-block; height: 6px; margin: 0 6px; vertical-align: middle; width: 80px; }
.a-google .res .bar i { background: #2a9d34; display: block; height: 100%; }
.a-google .res small { color: #2a7a2a; font-size: 11px; }
.a-google .links { align-items: center; border-top: 1px solid #ddd; direction: rtl; display: flex; flex-wrap: wrap; font-family: var(--ui); font-size: 12px; gap: 4px; padding-top: 6px; }
.a-google .links select { direction: ltr; font-size: 11px; max-width: 120px; }
.a-google .links .add { background: #ddd; border: 2px outset #fff; font-size: 12px; padding: 1px 8px; }

/* Napster */
.a-napster { background: #ececec; border: 1px solid #888; direction: ltr; font-family: Tahoma, Arial, sans-serif; font-size: 11px; padding: 8px; text-align: left; width: 410px; }
.a-napster .ttl { background: #1c1c1c; color: #ccc; padding: 4px 6px; }
.a-napster .ttl b { color: #fff; font-size: 15px; }
.a-napster form { display: flex; gap: 4px; margin: 6px 0; }
.a-napster input { border: 1px solid #888; flex: 1; font: inherit; padding: 2px 4px; }
.a-napster form button { background: #c0c0c0; border: 2px outset #fff; font: inherit; padding: 1px 8px; }
.a-napster table { background: #fff; border-collapse: collapse; width: 100%; }
.a-napster th { background: #d6d6d6; border: 1px solid #aaa; font-weight: 400; padding: 1px 4px; text-align: left; }
.a-napster td { border-bottom: 1px solid #eee; padding: 2px 4px; }
.a-napster td.fn { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-napster tr[tabindex]:hover, .a-napster tr[tabindex]:focus { background: #000080; color: #fff; outline: none; }
.a-napster .tr { margin-top: 6px; }
.a-napster .tr ul { background: #fff; border: 1px solid #aaa; list-style: none; min-height: 60px; padding: 2px 4px; }
.a-napster .tr li { align-items: center; display: flex; gap: 6px; padding: 1px 0; }
.a-napster .tr .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-napster .tr progress { width: 70px; }
.a-napster .tr .s { width: 140px; }
.a-napster .tr li.bad .s { color: #b00; }

/* eMule */
.a-emule { background: #ecebe6; border: 1px solid #888; direction: ltr; font-family: Tahoma, Arial, sans-serif; font-size: 11px; padding: 8px; text-align: left; width: 410px; }
.a-emule .top { align-items: center; background: linear-gradient(#4a6ea9, #2c4f86); color: #fff; display: flex; justify-content: space-between; padding: 4px 6px; }
.a-emule .net { font-size: 10px; }
.a-emule table { background: #fff; border-collapse: collapse; margin-top: 6px; width: 100%; }
.a-emule th { background: #dcdad2; border: 1px solid #b7b4a8; font-weight: 400; padding: 1px 4px; text-align: left; }
.a-emule td { border-bottom: 1px solid #eee; padding: 2px 4px; }
.a-emule td button { background: #dcdad2; border: 1px outset #fff; font: inherit; padding: 0 6px; }
.a-emule .dl { background: #fff; border: 1px solid #b7b4a8; margin-top: 6px; min-height: 64px; padding: 6px; }
.a-emule .dl progress { margin: 4px 0; width: 100%; }
.a-emule .dl .st { direction: rtl; font-family: var(--ui); font-size: 12px; text-align: right; }
.a-emule .share { direction: rtl; display: block; font-family: var(--ui); font-size: 12.5px; margin-top: 6px; text-align: right; }

/* CAPTCHA */
.a-captcha { background: #fff; border: 1px solid #aaa; padding: 12px; width: 300px; }
.a-captcha .box { align-items: center; display: flex; gap: 6px; justify-content: center; }
.a-captcha canvas { border: 1px solid #999; display: block; }
.a-captcha .again { background: #eee; border: 1px solid #999; font-size: 16px; height: 30px; width: 30px; }
.a-captcha form { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.a-captcha input { border: 1px solid #888; direction: ltr; font-size: 15px; padding: 3px 6px; width: 170px; }
.a-captcha form button { background: #c0c0c0; border: 2px outset #fff; padding: 2px 12px; }
.a-captcha .res { font-size: 13px; margin-top: 8px; min-height: 36px; text-align: center; }
.a-captcha .count { color: #666; font-size: 12px; text-align: center; }

/* TheFacebook 2004 */
.a-fb { background: #fff; border: 1px solid #3b5998; direction: ltr; font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; font-size: 11px; text-align: left; width: 360px; }
.a-fb .hd { align-items: center; background: #3b5998; color: #fff; display: flex; justify-content: space-between; padding: 8px 10px; }
.a-fb .hd b { font-size: 16px; font-weight: 400; letter-spacing: .02em; }
.a-fb .body { min-height: 150px; padding: 10px; }
.a-fb .reg { display: grid; gap: 6px; }
.a-fb .reg label { display: grid; gap: 2px; }
.a-fb .reg input, .a-fb .reg select { border: 1px solid #bdc7d8; font: inherit; padding: 3px; }
.a-fb .reg button, .a-fb .add { background: #3b5998; border: 1px solid #0e1f5b; color: #fff; font: inherit; justify-self: start; padding: 3px 10px; }
.a-fb .msg { color: #900; direction: rtl; font-family: var(--ui); font-size: 12.5px; margin-top: 6px; min-height: 18px; text-align: right; unicode-bidi: plaintext; }
.a-fb .profile { display: flex; gap: 10px; }
.a-fb .pic { background: repeating-linear-gradient(45deg, #dfe4ee 0 6px, #eef1f7 6px 12px); border: 1px solid #bdc7d8; height: 110px; width: 90px; }
.a-fb .info { display: grid; gap: 4px; }
.a-fb .info b { color: #3b5998; font-size: 14px; }
.a-fb .time { border-top: 1px solid #dde; direction: rtl; padding: 6px 10px; text-align: right; }
.a-fb .adv { background: #c0c0c0; border: 2px outset #fff; font-family: var(--ui); font-size: 12px; padding: 2px 8px; }

/* Gmail 2004 */
.a-gmail { background: #fff; border: 1px solid #aaa; padding: 10px; width: 360px; }
.a-gmail .hd { color: #c33; direction: ltr; font-family: "Times New Roman", serif; font-size: 26px; font-weight: 700; text-align: left; }
.a-gmail .hd small { color: #888; font-family: Arial, sans-serif; font-size: 10px; margin-left: 4px; }
.a-gmail .m { margin-top: 8px; }
.a-gmail .lbl { display: flex; font-size: 12.5px; justify-content: space-between; }
.a-gmail .bar { background: #eee; border: 1px solid #ccc; height: 12px; }
.a-gmail .bar i { background: #6aa84f; display: block; height: 100%; transition: width .3s; }
.a-gmail .m.full .bar i { background: #c33; }
.a-gmail .v { direction: ltr; unicode-bidi: isolate; }
.a-gmail .m.full .v { direction: rtl; }
.a-gmail .m.full .v { color: #c33; font-weight: 700; }
.a-gmail .row { display: flex; gap: 6px; margin-top: 10px; }
.a-gmail .row button { background: #c0c0c0; border: 2px outset #fff; font-size: 12.5px; padding: 3px 8px; }
.a-gmail .inbox { border-top: 1px solid #ddd; margin-top: 8px; min-height: 80px; }
.a-gmail .mail { border-bottom: 1px solid #eee; display: flex; font-size: 12.5px; justify-content: space-between; padding: 3px 2px; }
.a-gmail .mail span { color: #888; direction: ltr; }

/* Numa Numa */
.a-numa { width: 300px; }
.a-numa .cam { background: #111; border: 3px solid #444; border-radius: 6px; padding: 6px; position: relative; }
.a-numa canvas { display: block; margin: 0 auto; }
.a-numa .rec { color: #f33; direction: ltr; font-family: Arial, sans-serif; font-size: 11px; left: 12px; position: absolute; top: 10px; }
.a-numa .moves { display: grid; gap: 4px; grid-template-columns: repeat(4, 1fr); margin-top: 8px; }
.a-numa button { background: #c0c0c0; border: 2px outset #fff; font-size: 12.5px; padding: 4px 2px; }
.a-numa button:active { border-style: inset; }
.a-numa .row { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.a-numa .views { font-size: 12.5px; }

/* YouTube 2005 */
.a-yt { background: #fff; border: 1px solid #ccc; direction: ltr; font-family: Arial, sans-serif; padding: 10px; text-align: left; width: 280px; }
.a-yt .hd { align-items: baseline; display: flex; font-size: 22px; font-weight: 700; gap: 0; }
.a-yt .tube { background: #c00; border-radius: 6px; color: #fff; margin-left: 2px; padding: 0 5px; }
.a-yt .hd small { color: #666; font-size: 9px; font-weight: 400; margin-left: 6px; }
.a-yt .title { font-size: 14px; font-weight: 700; margin: 6px 0 4px; }
.a-yt .title small { color: #888; font-weight: 400; }
.a-yt canvas { background: #000; display: block; width: 100%; }
.a-yt .ctl { align-items: center; background: #ddd; display: flex; gap: 6px; padding: 3px 4px; }
.a-yt .pp { background: #eee; border: 1px solid #999; font-size: 11px; height: 20px; width: 28px; }
.a-yt .prog { background: #999; flex: 1; height: 6px; }
.a-yt .prog i { background: #c00; display: block; height: 100%; }
.a-yt .tm { font-size: 10px; }
.a-yt .meta { align-items: center; display: flex; font-size: 11px; justify-content: space-between; margin-top: 4px; }
.a-yt .stars button { background: none; border: none; color: #ccc; font-size: 16px; padding: 0 1px; }
.a-yt .stars button.on { color: #e7a100; }
.a-yt .cap { direction: rtl; font-family: var(--ui); font-size: 12.5px; min-height: 20px; text-align: center; }

/* twttr */
.a-tw { background: #9ae4e8; border: 1px solid #6bb; direction: ltr; font-family: "Lucida Grande", Arial, sans-serif; padding: 10px; text-align: left; width: 340px; }
.a-tw .hd { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: -1px; text-shadow: 1px 1px #3aa; }
.a-tw form { background: #fff; border-radius: 4px; margin-top: 6px; padding: 8px; }
.a-tw label { display: block; font-size: 15px; margin-bottom: 4px; }
.a-tw textarea { border: 1px solid #aaa; font: inherit; font-size: 13px; padding: 4px; resize: none; unicode-bidi: plaintext; width: 100%; }
.a-tw .row { align-items: center; display: flex; justify-content: space-between; margin-top: 4px; }
.a-tw .left { color: #999; font-size: 18px; }
.a-tw .left.over { color: #c00; }
.a-tw form button { background: #eee; border: 1px solid #999; padding: 2px 10px; }
.a-tw .tl { background: #fff; border-radius: 4px; list-style: none; margin-top: 6px; padding: 4px 8px; }
.a-tw .tl li { border-bottom: 1px dashed #ddd; font-size: 12px; padding: 4px 0; unicode-bidi: plaintext; }
.a-tw .tl b { color: #2a7ab0; }
.a-tw .tl small { color: #999; }

/* iPhone 2007 */
.a-ip { display: flex; justify-content: center; width: 240px; }
.a-ip .body { align-items: center; background: linear-gradient(#2a2a2a, #111); border: 3px solid #8a8a8a; border-radius: 30px; display: flex; flex-direction: column; padding: 34px 12px 12px; width: 230px; }
.a-ip .screen { background: #000; color: #fff; direction: ltr; font-family: Helvetica, Arial, sans-serif; height: 300px; overflow: hidden; position: relative; width: 200px; }
.a-ip .sb { background: rgba(0,0,0,.6); display: flex; font-size: 10px; justify-content: space-between; padding: 2px 5px; }
.a-ip .lock { align-items: center; background: linear-gradient(#0c2c5a, #3e6ea8 70%, #000); display: flex; flex-direction: column; height: calc(100% - 16px); }
.a-ip .big { font-size: 42px; font-weight: 300; margin-top: 18px; }
.a-ip .date { font-size: 11px; }
.a-ip .slider { align-items: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; display: flex; height: 40px; margin-top: auto; margin-bottom: 18px; position: relative; width: 180px; }
.a-ip .slider span { color: rgba(255,255,255,.75); font-size: 12px; left: 56px; pointer-events: none; position: absolute; }
.a-ip .knob { align-items: center; background: linear-gradient(#fff, #bbb); border-radius: 8px; color: #555; cursor: grab; display: flex; font-size: 18px; height: 34px; justify-content: center; margin-left: 2px; touch-action: none; width: 48px; }
.a-ip .home { align-content: start; background: linear-gradient(#1a2d48, #000); display: grid; gap: 14px 6px; grid-template-columns: repeat(4, 1fr); height: calc(100% - 16px); padding: 14px 6px; }
.a-ip .app { align-items: center; background: none; border: none; color: #fff; display: flex; flex-direction: column; font-size: 9px; gap: 3px; }
.a-ip .app i { border-radius: 9px; box-shadow: inset 0 12px 0 rgba(255,255,255,.25); display: block; height: 38px; width: 38px; }
.a-ip .appview { background: #fff; color: #000; height: calc(100% - 16px); overflow: auto; }
.a-ip .appview canvas { display: block; margin: 6px auto 0; }
.a-ip .tip { color: #666; font-size: 9px; padding: 2px; text-align: center; }
.a-ip .ttl { background: linear-gradient(#b5c0ce, #6d84a2); color: #fff; font-size: 13px; font-weight: 700; padding: 6px; text-align: center; }
.a-ip .contacts { list-style: none; }
.a-ip .contacts li { border-bottom: 1px solid #ddd; font-size: 14px; font-weight: 700; padding: 8px 10px; }
.a-ip .bigclock { font-size: 32px; padding-top: 110px; text-align: center; }
.a-ip .na { direction: rtl; font-family: var(--ui); font-size: 13px; line-height: 1.5; padding: 30px 14px; text-align: center; }
.a-ip .hb { background: radial-gradient(#333, #111); border: 2px solid #666; border-radius: 50%; height: 30px; margin-top: 10px; width: 30px; }

/* GitHub 2008 */
.a-gh { background: #fff; border: 1px solid #ccc; direction: ltr; font-family: Helvetica, Arial, sans-serif; font-size: 12px; padding: 10px; text-align: left; width: 380px; }
.a-gh .hd { align-items: center; display: flex; font-size: 15px; gap: 6px; }
.a-gh .pub { border: 1px solid #ccc; border-radius: 8px; color: #777; font-size: 10px; padding: 0 5px; }
.a-gh .acts { display: flex; gap: 4px; margin: 8px 0; }
.a-gh .acts button { background: linear-gradient(#fafafa, #e6e6e6); border: 1px solid #bbb; border-radius: 3px; font-size: 12px; padding: 3px 10px; }
.a-gh .acts button:disabled { color: #aaa; }
.a-gh .graph { display: block; width: 100%; }
.a-gh .graph .ln { fill: none; stroke: #999; stroke-width: 2; }
.a-gh .graph .br { stroke: #4183c4; }
.a-gh .graph .c { fill: #fff; stroke: #666; stroke-width: 2; }
.a-gh .graph .b { fill: #4183c4; }
.a-gh .graph .mg { fill: #6cc644; stroke: #3a8a1e; stroke-width: 2; }
.a-gh .graph text { fill: #666; font-size: 10px; }
.a-gh .log { direction: rtl; font-family: var(--ui); font-size: 12.5px; margin: 6px 0; min-height: 36px; text-align: right; unicode-bidi: plaintext; }
.a-gh .contrib { display: grid; gap: 2px; grid-auto-flow: column; grid-template-rows: repeat(7, 9px); justify-content: start; }
.a-gh .contrib i { background: #eee; display: block; height: 9px; width: 9px; }
.a-gh .contrib i[data-l="1"] { background: #c6e48b; }
.a-gh .contrib i[data-l="2"] { background: #7bc96f; }
.a-gh .contrib i[data-l="3"] { background: #239a3b; }
.a-gh .contrib i[data-l="4"] { background: #196127; }

/* Bitcoin */
.a-btc { background: #fdf8ee; border: 1px solid #d8a84a; padding: 10px; width: 380px; }
.a-btc .blk { background: #fff; border: 1px solid #ccc; direction: ltr; font-family: "Courier New", monospace; font-size: 11.5px; line-height: 1.5; padding: 8px; text-align: left; }
.a-btc .data { color: #555; }
.a-btc .hash { overflow-wrap: anywhere; }
.a-btc mark { background: #f7931a; color: #fff; }
.a-btc .row { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; }
.a-btc .mine { background: #f7931a; border: 2px outset #ffd08a; color: #fff; font-weight: 700; padding: 3px 16px; }
.a-btc .st { font-size: 12.5px; margin-top: 6px; min-height: 36px; }

/* Instagram 2010 */
.a-ig { align-items: center; background: #fff; border: 1px solid #bbb; display: flex; flex-direction: column; gap: 8px; padding: 10px; width: 260px; }
.a-ig .hd { align-self: stretch; background: linear-gradient(#5f8fb7, #3d6d96); color: #fff; direction: ltr; font-family: Georgia, serif; font-size: 18px; font-style: italic; padding: 4px; text-align: center; }
.a-ig canvas { border: 6px solid #fff; box-shadow: 0 0 0 1px #ccc; display: block; }
.a-ig .filters { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.a-ig .filters button { background: #f2f2f2; border: 1px solid #bbb; border-radius: 3px; font-size: 12px; padding: 2px 6px; }
.a-ig .filters button[aria-pressed="true"] { background: #3d6d96; border-color: #2c5272; color: #fff; }
.a-ig .row { align-items: center; display: flex; gap: 10px; }
.a-ig .share { background: #3d6d96; border: 1px solid #2c5272; color: #fff; padding: 3px 14px; }
.a-ig .likes { color: #c33; font-weight: 700; }

/* emoji */
.a-emoji { background: #fff; border: 1px solid #bbb; padding: 10px; width: 320px; }
.a-emoji .grid { display: grid; gap: 4px; grid-template-columns: repeat(5, 1fr); }
.a-emoji .grid button { background: #f5f5f5; border: 1px solid #ddd; border-radius: 6px; font-size: 24px; line-height: 1.2; padding: 4px 0; }
.a-emoji .grid button:hover { background: #fff3c4; }
.a-emoji .msg { border: 1px solid #ccc; border-radius: 12px; font-size: 20px; margin-top: 8px; min-height: 36px; padding: 4px 10px; }
.a-emoji .info { font-size: 12.5px; line-height: 1.6; margin-top: 8px; min-height: 90px; }
.a-emoji .info .big { font-size: 34px; }
.a-emoji code { direction: ltr; display: inline-block; font-family: "Courier New", monospace; unicode-bidi: isolate; }
.a-emoji .note { color: #666; }

/* Transformer */
.a-tf { background: #fbfbfd; border: 1px solid #bbc; padding: 10px; width: 440px; }
.a-tf .arcs { display: block; height: 110px; width: 100%; }
.a-tf .arcs path { fill: none; stroke: #e0662e; stroke-linecap: round; }
.a-tf .words { direction: ltr; display: flex; flex-wrap: nowrap; gap: 3px; justify-content: space-between; }
.a-tf .words button { background: #eef; border: 1px solid #ccd; border-radius: 4px; font-family: Georgia, serif; font-size: 13px; padding: 3px 4px; }
.a-tf .words button.on { background: #e0662e; border-color: #b04a1a; color: #fff; }
.a-tf .end { align-items: center; display: flex; flex-wrap: wrap; font-size: 12.5px; gap: 6px; margin-top: 10px; }
.a-tf .end button { background: #f2f2f2; border: 1px solid #bbb; border-radius: 3px; font-size: 12px; padding: 2px 8px; }
.a-tf .end button[aria-pressed="true"] { background: #333; color: #fff; }
.a-tf .exp { font-size: 13px; margin-top: 8px; min-height: 38px; unicode-bidi: plaintext; }

/* Zoom 2020 */
.a-zoom { background: #1c1c1e; border-radius: 6px; padding: 8px; width: 420px; }
.a-zoom .grid { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.a-zoom .tile { aspect-ratio: 4 / 3; background: var(--bg, #555); border: 2px solid transparent; border-radius: 4px; overflow: hidden; position: relative; }
.a-zoom .tile.me { --bg: #6b7a8f; --c: #f0c9a0; }
.a-zoom .tile.speaking { border-color: #2dd36f; }
.a-zoom .face { background: var(--c, #f0c9a0); border-radius: 50% 50% 40% 40%; bottom: 0; height: 70%; left: 30%; position: absolute; width: 40%; }
.a-zoom .face::before { background: #333; border-radius: 50%; box-shadow: 18px 0 #333; content: ""; height: 5px; left: 28%; position: absolute; top: 34%; width: 5px; }
.a-zoom .initial { align-items: center; background: #333; color: #fff; display: flex; font-size: 28px; inset: 0; justify-content: center; position: absolute; }
.a-zoom .beach { background: linear-gradient(#7cc7f2 0 55%, #f2d58c 55%); inset: 0; opacity: .85; position: absolute; mask: radial-gradient(ellipse 22% 38% at 50% 72%, transparent 98%, #000); -webkit-mask: radial-gradient(ellipse 22% 38% at 50% 72%, transparent 98%, #000); }
.a-zoom .cat { bottom: 0; font-size: 30px; left: 4px; position: absolute; }
.a-zoom .nm { background: rgba(0,0,0,.55); bottom: 3px; color: #fff; font-size: 10px; inset-inline-start: 3px; padding: 0 4px; position: absolute; }
.a-zoom .mic { font-size: 11px; inset-inline-end: 4px; position: absolute; top: 3px; }
.a-zoom .bubble { background: #fff; border-radius: 8px; color: #000; font-size: 11px; inset-inline: 4px; padding: 2px 5px; position: absolute; top: 4px; }
.a-zoom .tile.me.hand::after { content: "✋"; font-size: 22px; inset-inline-start: 4px; position: absolute; top: 2px; }
.a-zoom .tile.me.sharing { background: #000; }
.a-zoom .tile.me.sharing .face { display: none; }
.a-zoom.left .grid { opacity: .15; }
.a-zoom .bar { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }
.a-zoom .bar button { background: #333; border: 1px solid #555; border-radius: 4px; color: #eee; font-size: 12px; padding: 4px 8px; }
.a-zoom .bar .mute[aria-pressed="true"] { color: #ff6b6b; }
.a-zoom .bar .leave { background: #c0392b; border-color: #8e2a1f; }

/* Wordle */
.a-wordle { align-items: center; background: #fff; border: 1px solid #ccc; display: flex; flex-direction: column; gap: 6px; padding: 10px; width: 330px; }
.a-wordle:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.a-wordle .board { direction: ltr; display: grid; gap: 4px; grid-template-columns: repeat(5, 36px); }
.a-wordle .board span { align-items: center; border: 2px solid #d3d6da; display: flex; font-family: Arial, sans-serif; font-size: 20px; font-weight: 700; height: 36px; justify-content: center; }
.a-wordle .board span:not(:empty) { border-color: #878a8c; }
.a-wordle .correct { background: #6aaa64 !important; border-color: #6aaa64 !important; color: #fff; }
.a-wordle .present { background: #c9b458 !important; border-color: #c9b458 !important; color: #fff; }
.a-wordle .absent { background: #787c7e !important; border-color: #787c7e !important; color: #fff; }
.a-wordle .msg { font-size: 13px; min-height: 18px; text-align: center; }
.a-wordle .share { direction: ltr; font-family: inherit; font-size: 14px; line-height: 1.2; margin-top: 4px; }
.a-wordle .kb { direction: ltr; display: flex; flex-direction: column; gap: 3px; }
.a-wordle .kb > div { display: flex; gap: 3px; justify-content: center; }
.a-wordle .kb button { background: #d3d6da; border: none; border-radius: 3px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; min-width: 26px; padding: 7px 4px; }
.a-wordle .again { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; }

/* ChatGPT: a tiny next-word model */
.a-gpt { background: #f7f7f8; border: 1px solid #ccc; padding: 10px; width: 400px; }
.a-gpt .chat { background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; min-height: 96px; padding: 8px; }
.a-gpt .you { background: #e9eef8; border-radius: 10px; display: inline-block; font-size: 13px; margin-bottom: 6px; padding: 3px 10px; }
.a-gpt .bot { font-size: 14px; line-height: 1.6; }
.a-gpt .caret { animation: blinkhard 1s steps(1) infinite; color: #10a37f; }
.a-gpt form { display: flex; gap: 6px; margin-top: 8px; }
.a-gpt form input { border: 1px solid #bbb; border-radius: 4px; flex: 1; font: inherit; padding: 3px 6px; }
.a-gpt button { background: #10a37f; border: 1px solid #0c7d61; border-radius: 4px; color: #fff; font-size: 12.5px; padding: 3px 10px; }
.a-gpt .cands { background: #fff; border: 1px dashed #bbb; border-radius: 6px; margin-top: 8px; min-height: 110px; padding: 6px 8px; }
.a-gpt .cands .lbl { color: #666; font-size: 11.5px; margin-bottom: 2px; }
.a-gpt .c { align-items: center; display: grid; font-size: 12.5px; gap: 6px; grid-template-columns: 90px 1fr 34px; }
.a-gpt .c .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-gpt .c .b { background: #eee; height: 8px; }
.a-gpt .c .b i { background: #10a37f; display: block; height: 100%; }
.a-gpt .c .p { color: #555; direction: ltr; font-size: 11px; }
.a-gpt .row { align-items: center; display: flex; flex-wrap: wrap; font-size: 12px; gap: 6px; margin-top: 8px; }
.a-gpt .row label { align-items: center; display: flex; gap: 4px; margin-inline-start: auto; }
.a-gpt .row input { width: 80px; }

/* smiley */
.a-smiley {
  background: #fff; border: 1px solid #bbb; direction: ltr; font-family: "Courier New", monospace;
  font-size: 12px; padding: 14px; text-align: left; width: 330px;
}
.a-smiley .post-head { border-bottom: 1px dashed #999; color: #555; margin-bottom: 10px; padding-bottom: 6px; }
.a-smiley .face {
  background: none; border: none; color: inherit; display: block; font-family: inherit; font-size: 64px;
  line-height: 1.2; margin: 10px auto; padding: 0 8px; transition: transform .6s var(--slide-ease); user-select: none;
}
.a-smiley .face.turned { transform: rotate(90deg); }
.a-smiley .row { display: flex; gap: 6px; justify-content: center; }
.a-smiley .row button { background: #eee; border: 1px solid #aaa; font-family: inherit; padding: 2px 8px; }

/* first website: CERN pages in a NeXTSTEP-style WorldWideWeb window */
.a-www { background: #aaa; border: 1px solid #000; direction: ltr; font-family: Helvetica, Arial, sans-serif; text-align: left; width: 420px; }
.a-www .menu { background: #000; color: #fff; display: flex; flex-wrap: wrap; font-size: 10px; gap: 2px 8px; padding: 2px 6px; }
.a-www .menu b { margin-right: 6px; }
.a-www .menu button { background: none; border: 1px solid #555; color: #fff; font: inherit; padding: 0 6px; }
.a-www .menu button:hover:not(:disabled) { background: #fff; color: #000; }
.a-www .menu button:disabled { color: #666; }
.a-www .addr { background: #ddd; border-bottom: 1px solid #000; color: #333; font-family: "Courier New", monospace; font-size: 10.5px; overflow: hidden; padding: 1px 6px; text-overflow: ellipsis; white-space: nowrap; }
.a-www .page .isindex { color: #666; font-style: italic; }
.a-www .doc { background: #fff; border: 1px solid #000; margin: 6px; }
.a-www .bar { background: #000; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; text-align: center; }
.a-www .page { font-family: "Times New Roman", Times, serif; font-size: 14px; height: 280px; line-height: 1.3; overflow: auto; padding: 8px 12px; }
.a-www .page h1 { font-size: 22px; margin-bottom: 6px; }
.a-www .page h3 { font-size: 15px; margin: 8px 0 4px; }
.a-www .page p { margin-bottom: 6px; }
.a-www .page dl { margin-top: 6px; }
.a-www .page dt { margin-top: 4px; }
.a-www .page dd { margin-left: 24px; }
.a-www .page ul { margin-left: 22px; }
.a-www .page address { font-style: italic; margin-top: 6px; }
.a-www .page xmp, .a-www .page pre { font-size: 12px; white-space: pre-wrap; }
.a-www .page a { color: #000; text-decoration: underline; }
.a-www .page a:not([href]) { text-decoration: none; }
.a-www .page:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.a-www .note { direction: rtl; font-family: var(--ui); font-size: 12.5px; min-height: 18px; padding: 0 8px; text-align: right; }
.a-www .note a, .a-www .credit a { color: #00008b; }
.a-www .credit { direction: rtl; font-family: var(--ui); font-size: 11.5px; padding: 2px 8px 6px; text-align: right; }

/* modem */
.a-modem { align-items: center; display: flex; flex-direction: column; gap: 10px; width: 360px; }
.a-modem .box {
  background: linear-gradient(#efe9dc, #cfc6b3); border-radius: 8px 8px 4px 4px; height: 74px; padding: 14px 18px;
  position: relative; width: 100%; box-shadow: inset 0 -6px 0 #b3a993;
}
.a-modem .brand { font-family: "Rubik Mono One", sans-serif; font-size: 13px; color: #555; letter-spacing: .1em; direction: ltr; }
.a-modem .leds { direction: ltr; display: flex; gap: 12px; margin-top: 10px; }
.a-modem .led { align-items: center; display: flex; flex-direction: column; font-size: 9px; color: #666; gap: 2px; font-family: Arial, sans-serif; }
.a-modem .led i { background: #4a1010; border-radius: 50%; display: block; height: 8px; width: 8px; }
.a-modem .led.on i { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.a-modem .led.blink i { animation: led .12s steps(2) infinite; }
@keyframes led { 50% { background: #4a1010; box-shadow: none; } }
.a-modem .screen { background: #fff; border: 2px inset #ddd; font-family: Tahoma, Arial, sans-serif; font-size: 13px; padding: 10px; text-align: center; width: 100%; }
.a-modem .steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.a-modem .step { align-items: center; color: #999; display: flex; flex-direction: column; font-size: 12px; gap: 2px; width: 70px; }
.a-modem .step svg { fill: #ddd; height: 32px; stroke: #999; stroke-width: 1.5; width: 32px; }
.a-modem .step.on { color: #000; }
.a-modem .step.on svg { fill: #ffd34d; stroke: #000; }
.a-modem .step.now svg { animation: led .5s steps(2) infinite; }
.a-modem .status { min-height: 20px; }
.a-modem .phase { color: #777; direction: ltr; font-family: "Courier New", monospace; font-size: 11px; min-height: 16px; }
.a-modem .connect { background: #c0c0c0; border: 2px outset #fff; margin-top: 6px; padding: 2px 16px; }

/* counter */
.a-counter {
  background: #000 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><text x='8' y='26' font-size='14' fill='%23333'>✦</text></svg>");
  border: 3px ridge #888; color: #ff0; font-family: "Comic Sans MS", "Comic Sans", cursive; padding: 16px; text-align: center; width: 340px;
}
.a-counter marquee, .a-counter .marquee { color: #0ff; font-size: 14px; overflow: hidden; white-space: nowrap; }
.a-counter .marquee span { animation: marq 9s linear infinite; display: inline-block; padding-right: 100%; }
@keyframes marq { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.a-counter .digits { direction: ltr; display: inline-flex; gap: 3px; margin: 12px 0; }
.a-counter .digit {
  background: linear-gradient(#222, #000 50%, #222 50%, #111); border: 1px solid #555; color: #3f3;
  font-family: "Courier New", monospace; font-size: 30px; font-weight: 700; height: 44px; overflow: hidden; width: 28px;
}
.a-counter .digit .reel { transition: transform .5s var(--slide-ease); }
.a-counter .digit .reel span { display: block; height: 44px; line-height: 44px; }
.a-counter .construction {
  background: repeating-linear-gradient(45deg, #fc0 0 14px, #111 14px 28px); color: #000; font-weight: 700;
  margin-top: 10px; padding: 6px; animation: blinkhard 1s steps(1) infinite;
}
.a-counter .construction span { background: #fc0; padding: 0 6px; }
@keyframes blinkhard { 50% { filter: brightness(.6); } }
.a-counter button { background: #c0c0c0; border: 2px outset #fff; color: #000; font-family: inherit; padding: 2px 10px; }

/* ICQ-style messenger */
.a-icq { display: flex; gap: 10px; align-items: flex-end; direction: ltr; }
.a-icq .pane { background: #c0c0c0; border: 2px outset #fff; font-family: Tahoma, Arial, sans-serif; font-size: 12px; text-align: left; }
.a-icq .title { background: #000080; color: #fff; font-weight: 700; padding: 3px 6px; }
.a-icq .contacts { width: 140px; }
.a-icq .contacts ul { background: #fff; list-style: none; margin: 4px; min-height: 160px; padding: 4px; }
.a-icq .contacts li button {
  align-items: center; background: none; border: none; display: flex; font: inherit; gap: 6px; padding: 3px;
  text-align: left; width: 100%;
}
.a-icq .contacts li button:hover { background: #e6efff; }
.a-icq .contacts li button[aria-pressed="true"] { background: #000080; color: #fff; }
.a-icq .dot { background: #2c2; border: 1px solid #070; border-radius: 50%; display: inline-block; height: 10px; width: 10px; }
.a-icq .dot.away { background: #fc0; border-color: #a80; }
.a-icq .dot.off { background: #d33; border-color: #800; }
.a-icq .uin { color: #555; font-size: 10px; padding: 0 6px 4px; }
.a-icq .chat { width: 230px; }
.a-icq .chat .msgs { background: #fff; height: 150px; margin: 4px; overflow: auto; padding: 4px; }
.a-icq .chat .msgs div { margin-bottom: 4px; }
.a-icq .chat .msgs b { color: #a00; }
.a-icq .chat .msgs b.me { color: #00a; }
.a-icq .chat form { display: flex; gap: 4px; margin: 4px; }
.a-icq .chat input { flex: 1; font: inherit; padding: 2px; border: 1px inset #999; }
.a-icq .chat button { background: #c0c0c0; border: 2px outset #fff; font: inherit; padding: 0 6px; }

/* guestbook */
.a-guestbook {
  background: #003 radial-gradient(#fff 1px, transparent 1px) 0 0 / 22px 22px; border: 4px double #f0f;
  color: #fff; font-family: "Times New Roman", serif; padding: 14px; width: 360px;
}
.a-guestbook h3 { color: #f0f; font-size: 24px; text-align: center; text-shadow: 2px 2px #0ff; }
.a-guestbook form { display: grid; gap: 6px; margin: 10px 0; }
.a-guestbook input, .a-guestbook textarea { font: inherit; font-size: 14px; padding: 4px; }
.a-guestbook textarea { height: 50px; resize: none; }
.a-guestbook button { background: #ff0; border: 2px outset #fff; font-weight: 700; padding: 3px; }
.a-guestbook .entries { max-height: 120px; overflow: auto; }
.a-guestbook .entry { border-top: 1px dashed #0ff; font-size: 14px; padding: 5px 0; }
.a-guestbook .entry b { color: #ff0; }
.a-guestbook .entry small { color: #aaa; }

/* Y2K */
.a-y2k { background: #1b1b1b; border: 12px solid #3a3a3a; border-radius: 10px; padding: 18px; text-align: center; width: 340px; }
.a-y2k .clock {
  background: #000; border: 2px solid #222; color: #f22; direction: ltr; font-family: "Courier New", monospace;
  font-size: 30px; font-weight: 700; letter-spacing: 2px; padding: 12px 6px; text-shadow: 0 0 8px #f00;
}
.a-y2k .clock small { display: block; font-size: 18px; }
.a-y2k .msg { color: #ddd; font-size: 14px; margin-top: 10px; min-height: 40px; }
.a-y2k.bug .clock { animation: glitch .15s steps(2) infinite; }
@keyframes glitch { 50% { transform: translateX(3px); color: #ff0; } }
.a-y2k button { background: #333; border: 1px solid #777; color: #eee; margin-top: 8px; padding: 4px 14px; }
.a-y2k .bsod {
  background: #0000aa; color: #fff; direction: ltr; font-family: "Courier New", monospace; font-size: 12px;
  margin-top: 10px; padding: 10px; text-align: left; display: none;
}
.a-y2k.bug .bsod { display: block; }

/* wiki */
.a-wiki { background: #fff; border: 1px solid #a7d7f9; font-family: "Linux Libertine", Georgia, "Frank Ruhl Libre", serif; width: 370px; }
.a-wiki .top { align-items: center; border-bottom: 1px solid #a7d7f9; display: flex; justify-content: space-between; padding: 6px 10px; font-family: Arial, sans-serif; font-size: 12px; }
.a-wiki .top button { background: none; border: none; color: #0645ad; font-size: 12px; }
.a-wiki .top button.on { font-weight: 700; }
.a-wiki .body { padding: 10px 14px; min-height: 200px; }
.a-wiki h3 { border-bottom: 1px solid #a2a9b1; font-size: 22px; font-weight: 400; margin-bottom: 6px; }
.a-wiki .content { font-size: 14px; line-height: 1.55; outline: none; }
.a-wiki .content[contenteditable="true"] { background: #fffbe6; box-shadow: 0 0 0 2px #fc3; }
.a-wiki .content a { color: #0645ad; }
.a-wiki .history { color: #54595d; font-family: Arial, sans-serif; font-size: 11px; padding: 6px 14px; border-top: 1px solid #eaecf0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .a-counter .marquee span { animation: none; padding-right: 0; }
  .a-counter .construction, .a-y2k.bug .clock, .a-modem .led.blink i, .a-eniac.running .tube, .a-modem .step.now svg, .a-nav .blink, .a-nav.loading .throb .comet, .a-amp .song, .a-gpt .caret { animation: none; }
  .a-smiley .face, .a-counter .digit .reel { transition: none; }
}

/* the real recording, from its official YouTube upload (artifacts.js: youtube()) */
.ytbox { margin-top: 8px; }
.yt iframe { aspect-ratio: 16 / 9; border: 2px inset #fff; display: block; width: 100%; }
.yt a, .yt-note { display: block; font-size: 12px; margin-top: 4px; }
.yt a { color: #00e; }
.a-numa .row.real button { flex: 1; }

/* TCP/IP flag day */
.a-tcp { background: #0b1a2e; border: 1px solid #35597f; color: #cfe0f2; padding: 8px; width: 400px; }
.a-tcp canvas { display: block; width: 100%; }
.a-tcp .row { align-items: center; display: flex; flex-wrap: wrap; font-size: 12.5px; gap: 6px; margin-top: 6px; }
.a-tcp input[type=text] { background: #061020; border: 1px solid #35597f; color: #7cf29a; flex: 1; font-family: "Courier New", monospace; min-width: 0; padding: 4px; }
.a-tcp button { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; }
.a-tcp .buf { font-family: "Courier New", monospace; font-size: 18px; letter-spacing: 2px; margin-top: 6px; min-height: 24px; }
.a-tcp .buf span { color: #4d6a88; }
.a-tcp .buf span.ok { color: #7cf29a; }
.a-tcp .log { font-size: 12.5px; min-height: 18px; }

/* Doom */
.a-doom { background: #2a2a2a; border: 3px ridge #777; padding: 6px; width: 340px; }
.a-doom canvas { display: block; image-rendering: pixelated; touch-action: none; width: 100%; }
.a-doom canvas:focus-visible { outline: 2px dotted #e33; }
.a-doom .hud { background: #555; border-top: 2px solid #888; color: #e33; display: flex; font: bold 13px "Courier New", monospace; gap: 8px; justify-content: space-between; padding: 4px 6px; }
.a-doom .msg { color: #ddd; flex: 1; font-family: var(--ui); font-weight: 400; text-align: center; }
.a-doom .pad { direction: ltr; display: none; gap: 4px; grid-template-columns: repeat(5, 1fr); margin-top: 6px; }
.a-doom .pad button { background: #c0c0c0; border: 2px outset #fff; font-size: 16px; min-height: 40px; touch-action: none; user-select: none; }
@media (pointer: coarse) { .a-doom .pad { display: grid; } }

/* Amazon */
.a-amazon { width: 380px; }
.a-amazon .page { background: #fff; border: 1px solid #888; font-family: "Times New Roman", serif; padding: 8px 10px; text-align: left; }
.a-amazon .top { align-items: baseline; border-bottom: 2px solid #000080; display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.a-amazon .top b { font-size: 20px; }
.a-amazon .cart { font-size: 12px; margin-left: auto; }
.a-amazon .bar { font-size: 12px; margin: 4px 0 6px; }
.a-amazon .bar a { color: #00e; }
.a-amazon .books { list-style: none; }
.a-amazon .books li { border-bottom: 1px dotted #aaa; font-size: 13px; padding: 4px 0; }
.a-amazon .books b { color: #00e; text-decoration: underline; }
.a-amazon .books button, .a-amazon .buy { background: #c0c0c0; border: 2px outset #fff; font-family: Arial, sans-serif; font-size: 11px; padding: 1px 6px; }
.a-amazon .checkout { margin-top: 6px; }
.a-amazon .buy:disabled { color: #808080; }
.a-amazon .garage { align-items: center; background: #d9cdb4; border: 1px solid #8a7a5a; display: flex; font-size: 13px; gap: 8px; margin-top: 8px; padding: 6px 8px; }
.a-amazon .bell { font-size: 22px; transform-origin: 50% 10%; }
.a-amazon .bell.ring { animation: bell .6s ease-in-out; }
@keyframes bell { 20% { rotate: 18deg; } 40% { rotate: -16deg; } 60% { rotate: 10deg; } 80% { rotate: -6deg; } }

/* Hotmail */
.a-hotmail { width: 360px; }
.a-hotmail .mail { background: #fff; border: 1px solid #888; font-family: Arial, sans-serif; font-size: 12px; text-align: left; }
.a-hotmail .hd { background: #f2b33d; color: #000; padding: 4px 8px; }
.a-hotmail .body { padding: 8px; }
.a-hotmail .ps { background: #ffffd0; color: #00e; }
.a-hotmail .grid { background: #0a1a40; direction: ltr; display: grid; gap: 2px; grid-template-columns: repeat(24, 1fr); margin-top: 8px; padding: 4px; }
.a-hotmail .grid i { aspect-ratio: 1; background: #22305a; border-radius: 50%; }
.a-hotmail .grid i.on { background: #6fa8ff; }
.a-hotmail .grid i.new { background: #ffe066; }
.a-hotmail .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.a-hotmail button { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; }
.a-hotmail .stat { font-size: 13px; margin-top: 4px; min-height: 20px; }

/* ILOVEYOU */
.a-love { width: 360px; }
.a-love .mailer { background: #fff; border: 1px solid #888; font-family: Tahoma, Arial, sans-serif; font-size: 12px; text-align: left; }
.a-love .list { background: #dfe7f5; border-bottom: 1px solid #99a; padding: 4px 6px; }
.a-love .body { padding: 8px 6px; }
.a-love .att { align-items: center; border-top: 1px solid #ccc; display: flex; gap: 6px; padding: 6px; }
.a-love .file { background: none; border: 1px dotted transparent; font: inherit; padding: 1px 3px; }
.a-love .file:hover, .a-love .file:focus { background: #000080; color: #fff; }
.a-love .ico { background: #fff; border: 1px solid #555; display: inline-block; height: 20px; position: relative; width: 16px; }
.a-love .ico.txt::after { background: repeating-linear-gradient(#555 0 1px, transparent 1px 4px); content: ""; inset: 4px 3px; position: absolute; }
.a-love .ico.script { background: #d8e8ff; }
.a-love .ico.script::after { color: #0040a0; content: "VB"; font: bold 7px Arial; left: 1px; position: absolute; top: 5px; }
.a-love .files { border-top: 1px solid #ccc; padding: 6px; }
.a-love .files ul { columns: 2; list-style: none; margin-top: 3px; }
.a-love.infected .files li { color: #c00; }
.a-love .ext { display: block; font-size: 12.5px; margin-top: 6px; }
.a-love .row { align-items: center; display: flex; gap: 6px; justify-content: space-between; margin-top: 4px; min-height: 28px; }
.a-love .world { font-size: 13px; font-weight: 700; }
.a-love .again { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; }

/* Rickroll */
.a-rick { width: 380px; }
.a-rick .forum { background: #ffffee; border: 1px solid #c9b8a0; color: #800000; font-family: Arial, sans-serif; font-size: 12px; padding: 6px; text-align: left; }
.a-rick .board { color: #af0a0f; font-size: 18px; font-weight: 700; margin-bottom: 6px; text-align: center; }
.a-rick .post { background: #f0e0d6; border: 1px solid #d9bfb7; margin: 4px 0; padding: 4px 6px; }
.a-rick .name { color: #117743; font-weight: 700; }
.a-rick .no { color: #800000; }
.a-rick .post p { color: #000; margin-top: 3px; }
.a-rick .bait { color: #0000ee; }
.a-rick .reveal { align-items: center; display: flex; font-size: 15px; justify-content: space-between; margin-top: 6px; }
.a-rick .reveal button { background: #c0c0c0; border: 2px outset #fff; padding: 2px 10px; }

/* Minecraft */
.a-mc { width: 368px; }
.a-mc canvas { border: 2px solid #3a3a3a; display: block; image-rendering: pixelated; touch-action: none; width: 100%; }
.a-mc .row { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.a-mc .mode { background: #c0c0c0; border: 2px outset #fff; font-size: 12.5px; padding: 3px 8px; }
.a-mc .bar { background: #3a3a3a; display: flex; gap: 2px; padding: 2px; }
.a-mc .bar button { background: #8b8b8b; border: 2px solid #555; height: 26px; padding: 3px; width: 26px; }
.a-mc .bar button.on { border-color: #fff; }
.a-mc .bar canvas { display: block; image-rendering: pixelated; }
.a-mc .msg { font-size: 12.5px; margin-top: 4px; min-height: 18px; }

/* the 32-bit view counter */
.a-counter { width: 380px; }
.a-counter .player { background: #000; border: 1px solid #333; }
.a-counter .screen { align-items: center; aspect-ratio: 16 / 7; background: linear-gradient(135deg, #1b1b3a, #3a1b3a); color: #fff; display: flex; font-size: 30px; justify-content: center; }
.a-counter .views { background: #f9f9f9; color: #333; font-family: Arial, sans-serif; font-size: 13px; padding: 6px 8px; text-align: left; }
.a-counter .views b { font-size: 18px; font-variant-numeric: tabular-nums; }
.a-counter.broken .views b { color: #d00; }
.a-counter .bits { background: #111; color: #5f5; font: 11px/1.4 "Courier New", monospace; margin-top: 6px; padding: 4px 6px; text-align: left; word-break: break-all; }
.a-counter.broken .bits { color: #f55; }
.a-counter .row { align-items: center; display: flex; flex-wrap: wrap; font-size: 12.5px; gap: 6px; margin-top: 6px; }
.a-counter button { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; touch-action: manipulation; user-select: none; }
.a-counter .msg { font-size: 13px; margin-top: 4px; min-height: 36px; }

/* image generators */
.a-diff { width: 300px; }
.a-diff .ui { display: flex; gap: 4px; }
.a-diff select { flex: 1; font-size: 12.5px; min-width: 0; }
.a-diff button { background: #10a37f; border: none; border-radius: 4px; color: #fff; padding: 4px 10px; }
.a-diff canvas { background: #888; display: block; image-rendering: pixelated; margin: 8px auto 0; width: 256px; }
.a-diff .step { font-size: 12.5px; margin-top: 4px; text-align: center; }

/* computer use */
.a-agent { width: 440px; }
.a-agent .tasks { display: flex; flex-wrap: wrap; gap: 4px; }
.a-agent .tasks button { background: #f0eee6; border: 1px solid #b8b2a0; border-radius: 4px; font-size: 12.5px; padding: 4px 8px; }
.a-agent .split { display: grid; gap: 6px; grid-template-columns: 1fr 160px; margin-top: 6px; }
.a-agent .mini { background: #008080; height: 220px; overflow: hidden; position: relative; transition: background .4s; }
.a-agent .ico { align-items: center; color: #fff; display: flex; flex-direction: column; font-size: 11px; gap: 2px; position: absolute; right: 8px; width: 52px; }
.a-agent .ico[data-a=calc] { top: 8px; }
.a-agent .ico[data-a=note] { top: 66px; }
.a-agent .ico[data-a=disp] { top: 124px; }
.a-agent .ico i { background: #c0c0c0; border: 1px solid #000; display: block; height: 26px; width: 26px; }
.a-agent .ico i.calc { background: linear-gradient(#9fc 0 30%, #c0c0c0 0); }
.a-agent .ico i.note { background: repeating-linear-gradient(#fff 0 4px, #88f 4px 5px); }
.a-agent .ico i.disp { background: linear-gradient(#008080 0 70%, #808080 0); }
.a-agent .wnd { background: #c0c0c0; box-shadow: var(--raised-window); left: 10px; padding: 2px; position: absolute; top: 14px; width: 190px; }
.a-agent .tt { background: #000080; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 4px; }
.a-agent .bd { padding: 4px; }
.a-agent .bd .disp { background: #fff; box-shadow: var(--sunken-thin); font-family: "Courier New", monospace; padding: 2px 4px; text-align: right; }
.a-agent .bd .keys { display: grid; gap: 3px; grid-template-columns: repeat(4, 1fr); margin-top: 4px; }
.a-agent .bd .keys span { background: #c0c0c0; box-shadow: var(--raised); font-size: 12px; padding: 3px 0; text-align: center; }
.a-agent .bd .pad { background: #fff; box-shadow: var(--sunken-thin); font-size: 12px; min-height: 90px; padding: 4px; }
.a-agent .bd .sw { display: flex; gap: 6px; padding: 8px; }
.a-agent .bd .sw span { border: 1px solid #000; height: 28px; width: 28px; }
.a-agent .ptr { border-color: #000 transparent transparent #000; border-style: solid; border-width: 7px; filter: drop-shadow(1px 1px 0 #fff); height: 0; left: 0; pointer-events: none; position: absolute; top: 0; transition: translate .55s cubic-bezier(.3, .1, .2, 1); translate: 120px 100px; width: 0; z-index: 2; }
.a-agent .ptr.down { scale: .8; }
.a-agent .shot { inset: 0; pointer-events: none; position: absolute; }
.a-agent .shot.flash { animation: shot .4s; }
@keyframes shot { 0% { background: rgba(255, 255, 255, .25); box-shadow: inset 0 0 0 3px #d97757; } 100% { box-shadow: inset 0 0 0 3px transparent; } }
.a-agent .log { background: #faf9f5; border: 1px solid #d9d4c7; font-size: 12px; height: 220px; list-style: none; overflow: auto; padding: 6px; }
.a-agent .log li { margin-bottom: 5px; }
.a-agent .log li.s { color: #888; font-size: 11px; }
.a-agent .log li.task { font-weight: 700; }
.a-agent .log li.done { color: #2a6b2a; }

/* DOS 1.0 on a green-phosphor monitor */
.a-dos1 { background: #d8d2bf; border-radius: 10px 10px 4px 4px; padding: 14px 14px 18px; width: 440px; }
.a-dos1 .crt { background: #031a05; border-radius: 12px; box-shadow: inset 0 0 24px rgba(0, 0, 0, .9); color: #4dff6a; cursor: text; direction: ltr; font: 13px/1.3 "Courier New", monospace; height: 270px; overflow: auto; padding: 10px 12px; text-align: left; text-shadow: 0 0 4px rgba(77, 255, 106, .6); }
.a-dos1 .out { font: inherit; margin: 0; white-space: pre-wrap; word-break: break-all; }
.a-dos1 .line { display: flex; white-space: pre; }
.a-dos1 input { background: transparent; border: none; caret-color: #4dff6a; color: inherit; flex: 1; font: inherit; min-width: 0; outline: none; padding: 0; text-shadow: inherit; }

/* Xerox Alto: a portrait bitmap screen, black on white */
.a-alto { width: 320px; }
.a-alto .alto-screen {
  background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 4px 4px; border: 10px solid #d9d3c4; border-radius: 4px;
  box-shadow: 0 0 0 1px #8a8474; height: 420px; overflow: hidden; position: relative; width: 320px;
}
.a-alto .aw { background: #fff; border: 2px solid #000; display: flex; flex-direction: column; font: 12px/1.35 "Times New Roman", serif; position: absolute; }
.a-alto .aw.folded { height: auto !important; }
.a-alto .aw.folded .ab { display: none; }
.a-alto .at { background: #000; color: #fff; cursor: move; flex: none; font: bold 11px Arial, sans-serif; padding: 2px 6px; touch-action: none; user-select: none; width: max-content; }
.a-alto .ab { flex: 1; min-height: 0; overflow: hidden; padding: 6px; }
.a-alto .ab:focus { outline: none; }
.a-alto canvas.ab { cursor: crosshair; padding: 0; touch-action: none; width: 100%; }
.a-alto .st { font: 11px/1.4 "Courier New", monospace; }
.a-alto .alto-base { align-items: center; display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.a-alto .kbd { background: #d9d3c4; border: 1px solid #8a8474; border-radius: 3px; display: block; height: 18px; width: 180px; background-image: repeating-linear-gradient(90deg, transparent 0 10px, #b5ae9c 10px 11px); }
.a-alto .mouse { background: #d9d3c4; border: 1px solid #8a8474; border-radius: 10px 10px 6px 6px; display: flex; gap: 1px; height: 30px; padding: 2px; width: 26px; }
.a-alto .mouse i { background: #333; border-radius: 2px; display: block; flex: 1; height: 8px; }
.a-doom .real { background: #c0c0c0; border: 2px outset #fff; display: block; font-weight: 700; margin-top: 6px; padding: 4px; width: 100%; }

/* Apple I: a bare board on a TV */
.a-apple1 { width: 420px; }
.a-apple1 .tv { background: #2b2b2b; border-radius: 18px; padding: 16px; }
.a-apple1 .scr { background: #0a0a0a; border-radius: 10px; box-shadow: inset 0 0 20px #000; color: #d8f5d8; cursor: text; direction: ltr; font: 12px/1.25 "Courier New", monospace; height: 330px; margin: 0; overflow: hidden; padding: 10px; text-align: left; text-shadow: 0 0 3px rgba(200, 255, 200, .5); white-space: pre; }
.a-apple1 .scr:focus { outline: 2px solid #3a6; outline-offset: 2px; }
.a-apple1 .row { display: flex; gap: 6px; margin-top: 8px; }
.a-apple1 button { background: #c0c0c0; border: 2px outset #fff; padding: 3px 10px; }
.a-apple1 .demo { flex: 1; }

/* Apple II: beige case, colour TV */
.a-apple2 { width: 400px; }
.a-apple2 .case { background: #e6dcc0; border-radius: 6px; box-shadow: inset 0 -6px #c9bd9c; padding: 12px; }
.a-apple2 .tv { background: #222; border-radius: 14px; padding: 14px; }
.a-apple2 canvas { border-radius: 8px; display: block; image-rendering: pixelated; touch-action: none; width: 100%; }
.a-apple2 canvas:focus { outline: 2px solid #6af; outline-offset: 2px; }
.a-apple2 .kbd { background: #8a7a5a repeating-linear-gradient(90deg, #4a3f2a 0 14px, #8a7a5a 14px 16px); border-radius: 3px; height: 22px; margin: 10px 20px 0; }

/* Macintosh 128K: 512x342, black on white */
.a-mac { align-items: center; display: flex; flex-direction: column; gap: 8px; width: 560px; }
.a-mac .mac-body { background: #e8e2d2; border-radius: 10px 10px 4px 4px; box-shadow: inset 0 -10px #d5cdb8; padding: 22px 22px 46px; position: relative; }
.a-mac .mac-slot { background: #555; border-radius: 2px; bottom: 22px; height: 4px; position: absolute; right: 70px; width: 80px; }
.a-mac .mac-screen { background: #fff; border: 2px solid #333; cursor: default; font: 12px/1.2 "Chicago", "Charcoal", Arial, sans-serif; height: 346px; overflow: hidden; position: relative; text-align: left; width: 516px; }
.a-mac .mac-boot { align-items: center; background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 2px 2px; display: flex; inset: 0; justify-content: center; position: absolute; }
.a-mac .mac-boot svg { background: #fff; height: 64px; padding: 6px; width: 52px; }
.a-mac .menubar-mac { background: #fff; border-bottom: 1px solid #000; display: flex; font-weight: 700; gap: 16px; height: 20px; padding: 2px 10px; position: relative; z-index: 999; }
.a-mac .desk { background: repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0 / 2px 2px; inset: 20px 0 0 0; position: absolute; }
.a-mac .mic { align-items: center; background: none; border: none; display: flex; flex-direction: column; font: inherit; gap: 2px; padding: 0; position: absolute; width: 64px; }
.a-mac .mic span { background: #fff; padding: 0 3px; }
.a-mac .mic.sel span { background: #000; color: #fff; }
.a-mac .mic i { background: #fff; border: 2px solid #000; display: block; height: 30px; width: 30px; }
.a-mac .mic.disk i { border-radius: 2px; box-shadow: inset 0 -10px #000, inset 0 -12px #fff; }
.a-mac .mic.trash i { border-radius: 0 0 4px 4px; height: 32px; width: 26px; background: repeating-linear-gradient(90deg, #fff 0 5px, #000 5px 6px); }
.a-mac .mic.app i { border-radius: 4px; }
.a-mac .mic.paint i { background: linear-gradient(135deg, #fff 0 45%, #000 45% 55%, #fff 55%); }
.a-mac .mic.write i { background: repeating-linear-gradient(#fff 0 5px, #000 5px 6px); }
.a-mac .mic.doc i { background: repeating-linear-gradient(#fff 0 6px, #888 6px 7px); width: 24px; }
.a-mac .mw { background: #fff; border: 1px solid #000; box-shadow: 1px 1px 0 #000; display: flex; flex-direction: column; position: absolute; }
.a-mac .mt { align-items: center; background: repeating-linear-gradient(#000 0 1px, #fff 1px 2px) 0 3px / 100% 13px no-repeat; border-bottom: 1px solid #000; display: flex; flex: none; height: 19px; justify-content: center; position: relative; touch-action: none; user-select: none; }
.a-mac .mt span { background: #fff; font-weight: 700; padding: 0 6px; }
.a-mac .mc { background: #fff; border: 1px solid #000; height: 11px; left: 8px; padding: 0; position: absolute; width: 11px; }
.a-mac .mb { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.a-mac .mfolder { height: 100%; position: relative; }
.a-mac .mfolder .mic span { background: none; }
.a-mac .mempty { padding: 10px; }
.a-mac .mwrite { font: 13px/1.4 Georgia, "Times New Roman", serif; height: 100%; overflow: auto; padding: 8px; }
.a-mac .mwrite:focus { outline: none; }
.a-mac .mpaint { display: flex; height: 100%; }
.a-mac .mtools { border-right: 1px solid #000; display: flex; flex-direction: column; }
.a-mac .mtools button { background: #fff; border: none; border-bottom: 1px solid #000; font-size: 14px; height: 28px; padding: 0; width: 30px; }
.a-mac .mtools button.on { background: #000; color: #fff; }
.a-mac .mpaint canvas { cursor: crosshair; display: block; flex: 1; image-rendering: pixelated; min-width: 0; touch-action: none; }
.a-mac .hello { background: #c0c0c0; border: 2px outset #fff; padding: 4px 12px; }