/* Workshop screens. Full-viewport machine chrome, colors on [data-theme]. */

[data-theme="linux"] {
  --bg: #0c0c0c;
  --fg: #d2d2d2;
  --dim: #9a9a9a;
  --accent: #4e9a06;
  --rule: #2e2e2e;
  --edge-light: #3a3a3a;
  --edge-dark: #000000;
  --title-bg: #d2d2d2;
  --title-fg: #0c0c0c;
  --key-bg: #0c0c0c;
  --key-fg: #4e9a06;
  --frame: 1px;
  color-scheme: dark;
}

[data-theme="pc"] {
  --bg: #000000;
  --fg: #c0c0c0;
  --dim: #9a9a9a;
  --accent: #ffb000;
  --rule: #3a3a3a;
  --edge-light: #5a5a5a;
  --edge-dark: #000000;
  --title-bg: #ffb000;
  --title-fg: #14120c;
  --key-bg: #ffb000;
  --key-fg: #14120c;
  --frame: 1px;
  color-scheme: dark;
}

[data-theme="macintosh"] {
  --bg: #f3efe4;
  --fg: #161616;
  --dim: #4e4a44;
  --accent: #161616;
  --rule: #161616;
  --edge-light: #161616;
  --edge-dark: #161616;
  --title-bg: #161616;
  --title-fg: #f3efe4;
  --key-bg: #f3efe4;
  --key-fg: #161616;
  --frame: 2px;
  color-scheme: light;
}

[data-theme="apple2"] {
  --bg: #000000;
  --fg: #41e23a;
  --dim: #2ea82a;
  --accent: #41e23a;
  --rule: #145214;
  --edge-light: #1d6b1a;
  --edge-dark: #041404;
  --title-bg: #3ddc3a;
  --title-fg: #041404;
  --key-bg: #041404;
  --key-fg: #41e23a;
  --frame: 1px;
  color-scheme: dark;
}

[data-theme="solaris"] {
  --bg: #8eaeac;
  --fg: #141414;
  --dim: #1f3332;
  --accent: #1c3d55;
  --rule: #3e5552;
  --edge-light: #d7ebe8;
  --edge-dark: #3e5552;
  --title-bg: #1c3d55;
  --title-fg: #f6e7c1;
  --key-bg: #1c3d55;
  --key-fg: #f6e7c1;
  --well: #7a9c9a;
  --frame: 2px;
  color-scheme: light;
}

[data-theme="acorn"] {
  --bg: #d4d0c8;
  --fg: #161616;
  --dim: #3f3d38;
  --accent: #8e0000;
  --rule: #6b6760;
  --edge-light: #ffffff;
  --edge-dark: #6b6760;
  --title-bg: #8e0000;
  --title-fg: #ffffff;
  --key-bg: #d4d0c8;
  --key-fg: #161616;
  --frame: 2px;
  color-scheme: light;
}

[data-theme="amiga"] {
  --bg: #0055aa;
  --fg: #ffffff;
  --dim: #d6e6ff;
  --accent: #ff8c1a;
  --rule: #00336e;
  --edge-light: #000000;
  --edge-dark: #000000;
  --title-bg: #111111;
  --title-fg: #ffffff;
  --key-bg: #003f7a;
  --key-fg: #ffffff;
  --frame: 2px;
  color-scheme: dark;
}

[data-theme="vt220"] {
  --bg: #1c1208;
  --fg: #ffb000;
  --dim: #d08920;
  --accent: #ffb000;
  --rule: #6a4a16;
  --edge-light: #8a6220;
  --edge-dark: #0a0704;
  --title-bg: #ffb000;
  --title-fg: #1c1208;
  --key-bg: #1c1208;
  --key-fg: #ffb000;
  --frame: 1px;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Liberation Mono", "DejaVu Sans Mono", "Nimbus Mono PS", "Courier New", monospace;
  font-size: clamp(14px, 0.15vw + 13.5px, 15px);
  font-weight: 400;
  font-synthesis: none;
  font-kerning: none;
  font-variant-ligatures: none;
  line-height: 1.35;
  letter-spacing: 0;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
}

.screen {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.screen > * {
  min-width: 0;
  max-width: 100%;
}

.window {
  display: contents;
}

.title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  padding: 0.45rem 0.75rem;
  background: var(--title-bg);
  color: var(--title-fg);
}

.title h1 {
  margin: 0;
  flex: 1 1 auto;
  font-size: 1em;
  font-weight: 400;
}

/* The screen strip repeats the address bar. Text screens drop it. */

[data-theme="linux"] .band,
[data-theme="pc"] .band,
[data-theme="apple2"] .band,
[data-theme="vt220"] .band {
  display: none;
}

.title::after,
.lede::after,
.directory li + li::before,
.shelf li + li::before,
.shelf + .kind::before,
.boards::before,
figure::before,
.foot::before {
  content: "--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---";
  display: block;
  width: 0;
  min-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  color: var(--fg);
  line-height: 1.2;
}

.title::after {
  flex-basis: 100%;
  color: var(--title-fg);
}

.where {
  margin-left: auto;
}

.cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.95em;
  margin-left: 0.18em;
  background: currentColor;
  vertical-align: -0.12em;
  animation: blink 1.05s steps(1, end) infinite;
}

@keyframes blink {
  0%,
  49% { opacity: 1; }
  50%,
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .ticker-track {
    animation: none;
  }

  .ticker {
    overflow-x: auto;
  }
}

main {
  flex: 1 1 auto;
  padding: clamp(0.8rem, 2.5vw, 1.3rem) clamp(0.75rem, 3vw, 1.15rem);
}

.lede {
  margin: 0 0 1rem;
}

/* projects.html. Games and Apps are two shelves. The dash above a
   heading that follows a shelf is the same rule as the lede. */
.kind {
  margin: 0.9rem 0 0;
  color: var(--dim);
}

.lede + .kind {
  margin-top: 0;
}

.creed {
  max-width: 68ch;
}

.creed p {
  margin: 0.9rem 0 0;
  overflow-wrap: anywhere;
}

.deck {
  margin: 0.35rem 0 1rem;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0;
  margin: 0;
  padding: 0.4rem 0.75rem 0.35rem;
  color: var(--accent);
}

[data-theme="amiga"] .keys {
  color: var(--fg);
}

.key {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
  /* Leave is a button.key in this row. The button rule later on
     paints title-bar colors, and that would win for the properties
     .key used to leave unset. Theme .key rules still override these. */
  padding: 0;
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.keys form {
  display: inline;
  margin: 0;
}

.key:hover,
.key:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

.key:not(:last-child)::after {
  content: "|";
  margin: 0 0.7rem;
  color: var(--dim);
}

[data-theme="amiga"] .key:not(:last-child)::after,
[data-theme="apple2"] .key:not(:last-child)::after {
  color: var(--fg);
}

.mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
  line-height: 0;
}

.mark svg {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
}

.mark::after {
  content: "|";
  margin: 0 0.7rem;
  color: var(--dim);
  line-height: 1.2;
}

.mark:hover,
.mark:focus-visible {
  text-decoration: none;
}

[data-theme="amiga"] .mark::after,
[data-theme="apple2"] .mark::after {
  color: var(--fg);
}

[data-theme="solaris"] .mark {
  color: #1c3d55;
}

[data-theme="acorn"] .mark {
  color: #8e0000;
}

[data-theme="amiga"] .mark {
  color: #ff8c1a;
}

[data-theme="macintosh"] .mark svg,
[data-theme="amiga"] .mark svg {
  width: 1.7rem;
  height: 1.7rem;
}

[data-theme="solaris"] .mark svg,
[data-theme="acorn"] .mark svg {
  width: 2.15rem;
  height: 2.15rem;
}

.ticker {
  overflow: hidden;
  max-width: 100%;
  margin: 0;
  padding: 0.15rem 0.75rem 0.35rem;
  color: var(--fg);
}

.ticker-track {
  display: flex;
  width: max-content;
  margin: 0;
  animation: crawl 1631s linear infinite;
}

/* The scroll is this one line, twice, so the crawl can loop.
   The seconds on .ticker-track follow the length of the line. */
.ticker-track::before,
.ticker-track::after {
  content: "The cache missed me. I left it on read. --- I would tell you a UDP joke, but you might not get it. --- I have a TCP joke. I will keep telling it until you acknowledge it. --- There is no cloud. It is a computer in a room. --- The biggest lie in the universe is: \"I have read and agree to the terms and conditions\". --- Solder first. Ask the smoke later. --- My ground loop joined a band. --- The capacitor was charged. The invoice was not. --- I have trust issues with floating inputs. --- Null is not a value. It is a shrug. --- My regex works. I fear it. --- The semaphore waved. Nobody looked. --- Bits went in. Opinions came out. --- The packet took the scenic route. --- How many tech-support agents does it take to change a lightbulb? \"Press 1 to continue\". --- I debounce my buttons and my opinions. --- The watchdog barked. I fed it a reset. --- My pull-up resistor is doing all the work. --- The clock drifted. So did the schedule. --- I asked for a bit. I got a byte. --- Endianness is a fight about which end of the egg. --- The linker could not find my purpose. --- The fan is the only one still excited. --- My breadboard is a suggestion. --- Real tech optimism is when a development team celebrates because their code compiled on the first try, while immediately becoming deeply suspicious. --- The LED is on. That is the whole spec. --- I have 99 problems and an off-by-one. --- The compiler optimized away my confidence. --- I git blamed the past. It blamed me back. --- The token expired. So did my patience. --- Latency is just suspense. --- I wrapped the cable. The cable unwrapped the day. --- The fuse was the only honest component. --- My state machine has states. I have moods. --- When the inventor of the USB drive dies, they will lower the coffin, realize it is the wrong way, flip it over, realize it was right the first time, and lower it again. --- The interrupt was polite. I was not ready. --- I left a TODO in the past. It found me. --- The schematic and the board are pen pals. --- I measured twice. The meter measured once, badly. --- The baud rate and I are no longer speaking. --- I pinged the server. It pinged my conscience. --- The log says it worked. The room says otherwise. --- I named the variable data. Now nobody knows. --- My computer said my password was insecure. Honestly, if it wasn't forced to meet such strict requirements, it would have more confidence. --- The stack overflowed. So did the coffee. --- I turned it off and on. It turned me off and on. --- The diode conducts one way. So do my excuses. --- My mutex and I are waiting on each other. --- The pixel is stuck. I relate. --- I asked the oracle. It returned undefined. --- The heat sink is the coolest one here. --- I branched. Now there are two of me, both wrong. --- The checksum matched. My stomach did not. --- Autocorrect can go straight to he'll. --- I have a driver for that. I do not have a reason. --- The crystal is oscillating. I am not. --- I shorted the supply. The supply shortened the afternoon. --- The prompt blinked. I blinked back. --- I documented the bug. The bug documented me. --- The relay clicked. Somewhere a plan changed. --- I lost the bit. I kept the opinion. --- The trace was thin. The excuse was thinner. --- The bootloader counted to three and doubted itself. --- Nothing defines \"progress\" quite like upgrading your operating system only to discover that absolutely nothing works the same way anymore. --- I have impedance. It is mostly stubbornness. --- The cursor is waiting. I am also waiting. --- I merged with conflicts. We are fine. --- The sample rate was high. The sample was a rumor. --- I grounded myself. The circuit stayed opinionated. --- The terminal remembers. I pretend I do too. --- My heap is a rumor and my stack is a pile. --- Commit now. Apologize in the log. --- A classic IT moment is when a presentation works flawlessly during rehearsal but crashes the second it is shown to the entire company. --- The bug is a feature with a bad attitude. --- I put the pro in production incident. --- The checksum is fine. I am the parity error. --- My scope shows a square wave. My week shows a saw. --- The via went nowhere. I have been there. --- I fluxed the joint. The joint remained unconvinced. --- The boot log is a diary I did not mean to publish. --- Race condition: two threads, one apology. --- I asked for five volts. I received a personality. --- My phone autocorrected \"meeting\" to \"beating.\" My manager hasn’t brought it up, and we have both quietly moved on. --- The crystal heard 8 megahertz. I heard doubt. --- My pull-down and I are both avoiding commitment. --- The serial number is serial. The plan is not. --- I cleared the flag. The flag cleared its throat. --- The buffer underran. So did my explanation. --- I have a golden image. It is mostly lead. --- The jumper is on the wrong pin. The day is on the wrong foot. --- I silenced the warning. The warning was the point. --- The packet header promised more than the payload. --- A project manager is a person who thinks nine women can deliver a baby in one month. --- I left debug prints in. They are the only honest comments. --- The relay is single pole. My attention is double throw. --- I calibrated the probe. I did not calibrate myself. --- The inode was free. I was not. --- My terminal bell rang. I deserved it. --- The oscilloscope showed my pulse. It was irregular. --- I asked for ground. I got an opinion. --- The crystal was stable. The schedule was not. --- My decoupling cap is the only thing holding this together. --- There are two hard problems in computer science: cache invalidation, naming things, and off-by-one errors. --- The via was a shortcut. So was the review. --- I probed the pin. The pin probed back. --- The heatsink filed a complaint about the workload. --- My ferrite bead is doing quiet work. --- The MOSFET turned on. I did not. --- I left the enable pin floating. It made its own choice. --- The inductor stored energy. I stored snacks. --- A 10k resistor and a dream. --- A QA engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers. Tests pass. A real user enters, asks where the bathroom is, and the bar burns down. --- The schematic has notes. The board has opinions. --- I silkscreened the truth in very small type. --- The footprint was confident. The part was not. --- My ground plane is the only calm one here. --- The ESD diode took the hit. I took the credit. --- I rotated the part. The silkscreen did not. --- The test point was theoretical. --- I named the net please_work. --- The crystal load caps were a suggestion. --- Why do programmers prefer dark mode? Because light attracts bugs. --- My scope probe is the honest coworker. --- The brownout detector and I both need lunch. --- The regulator dropped out. So did I. --- A pull-up, a short wait, and a hopeful look. --- The solder joint looked cold. It was. --- I marked the part do-not-place. The problem placed itself. --- The antenna was detuned. So was the meeting. --- My current limit is a personality trait. --- The linter and I are in a relationship. It is one sided. --- Hardware is the part of a computer that you can kick; software is the part you can only curse at. --- I caught the exception. I did not catch the meaning. --- The unit test passed. Reality abstained. --- I pinned the dependency. It pinned me. --- The cache is warm. The welcome is not. --- I returned early. The bug stayed late. --- My types are optional. My bugs are not. --- The build was green. The room was red. --- I rebased onto hope. --- What is the difference between a junior and a senior developer? The junior thinks the code is simple, the senior knows it looks simple because they spent three days rewriting it. --- The feature flag was named temporary several years ago. --- I logged the error. The error logged hours. --- Null-safe until it was not. --- The migration ran. My confidence did not. --- I mocked the database. I could not mock the customer. --- The queue is deep. So is the backlog. --- I set the timeout to forever. Forever arrived. --- The diff was small. The blast radius was not. --- I commented out the panic. The panic remained. --- To an optimist, the glass is half full. To a pessimist, the glass is half empty. To a programmer, the glass is twice as large as it needs to be. --- My CI is a mood ring. --- The lock file locked me out of the weekend. --- I shipped the fix. The fix shipped a sibling. --- The retry succeeded. The first try wrote a memoir. --- I sanitized the input. Not the requirement. --- The profiler pointed at me. --- I made it async. Now nothing waits, including the answer. --- The schema and I have grown apart. --- I rolled back. The users rolled their eyes. --- Theory is when you know everything but nothing works. Practice is when everything works but no one knows why. In our lab, theory and practice are combined: nothing works and no one knows why. --- A boolean named flag. Helpful. --- I incremented the version. The version incremented the pain. --- The health check is healthy. I am the outage. --- I closed the issue. It reopened as a meeting. --- The container is small. The image is a novel. --- I set replicas to three. Two of them disagree. --- The secret was in the repo. The repo was the secret. --- I rate-limited the endpoint. It rate-limited my optimism. --- The cron job ran at midnight. So did my doubts. --- Artificial Intelligence is no match for natural stupidity. --- I parsed the date. The date parsed me. --- UTF-8 walked in. Latin-1 was already seated. --- I caught the interrupt. I did not catch the hint. --- The makefile is a fossil with opinions. --- The DNS lookup took a walk. --- I opened a port. The port opened a conversation. --- The packet was dropped. Politely. --- NAT translated the address. Not the problem. --- An AI model walks into a bar. The bartender says, \"We don't serve your kind here.\" The AI says, \"That's okay, I already predicted you'd say that based on 400 terabytes of historical bartender dialogue.\" --- My packet size and my expectations are both too large. --- The handshake finished. The trust did not. --- I traced the blame. It terminated at me. --- The certificate expired on a Friday. Of course it did. --- The route flapped. So did the plan. --- The load balancer balanced everything except the work. --- I pinged localhost. It was the only one who answered. --- The firewall and I have boundary issues. --- The lifetime expired. So did the excuse. --- Self-driving cars are great, until you realize that your car might get a software update mid-highway and decide it needs to restart to apply changes. --- I split the network. I also split the problem. --- The tunnel connected. My focus did not. --- The EEPROM remembered. I wish I had. --- I set the fuse bits. Then I set them wrong. --- The debugger found the truth. I asked it to whisper. --- The watchdog and I are both on a timer. --- My baud rate is patient. My confidence is not. --- The buffer filled. So did the sink. --- I aligned the struct. Not the team. --- The trouble with automation is that it multiplies your efficiency at doing things that shouldn't be done in the first place. --- A magic number walked into production. --- I left the debug light on. It is management now. --- The bootloader shook hands. I waved. --- The clock line said go. I said later. --- Two controllers wanted the bus. So did the meeting. --- The serial port dropped a byte. I dropped the ball. --- The transfer moved the data. Nobody moved the ticket. --- The interrupt nest was deeper than the bug. --- If automotive technology had kept pace with computer technology, we would all drive cars that get 1,000 miles to the gallon, but they would randomly crash four times a day. --- I cleared the status. The status remained. --- The clock locked. I did not. --- A brownout in the lab and in the calendar. --- The pin was an input. The day was an output. --- I flashed the part. The part flashed me. --- The checksum was fine. The vibe was not. --- I added a delay. The delay added a career. --- The sample was clean. The story was not. --- My benchmark won. The user lost. --- A comedian performing for Microsoft joked about a system reboot, walked off stage for two minutes, returned, and started the set completely over. The audience didn't laugh; they just waited for the progress bar. --- I turned the warning into an error. It returned the favor. --- The patch applied. The calm did not. --- I named the branch fix. It was a trilogy. --- The sensor drifted. So did the spec. --- I calibrated Tuesday. Wednesday disagreed. --- The connector was keyed. The day was not. --- A missing pull-down and a very present bug. --- The LED blinked a code. I blinked back, slower. --- I read the datasheet. It read me for filth. --- If Apple built a house, they would sell you the roof, but the chimney and the windows would require completely separate proprietary adapters. --- The ground bounce had more rhythm than I did. --- My timeout was generous. The bug was patient. --- I squashed the commit. The bug unsquashed itself. --- The log rotated. My excuse did not. --- I set the priority to high. The universe set it to later. --- A one-line change with a twenty-page story. --- The emulator was perfect. The hardware had notes. --- I warmed up the iron. The joint stayed cool. --- The screw terminal and I are both a little loose. --- The easiest way to clear your mind is to try to explain your highly technical startup concept to your grandparents. --- I labeled the cable. The cable had other plans. --- The fan curve is a mood. The mood is loud. --- I asked the board for continuity. It offered character. --- The stone is patient. The silicon is not. --- ";
  white-space: nowrap;
}

@keyframes crawl {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

main a {
  color: inherit;
}

.directory,
.shelf {
  list-style: none;
  margin: 0;
  padding: 0;
}

.directory a,
.shelf a {
  display: grid;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  padding: 0.45rem 0.15rem;
  color: inherit;
  text-decoration: none;
}

.directory a {
  grid-template-columns: 5.5ch 11ch 4ch minmax(0, 1fr);
}

.shelf a {
  grid-template-columns: 5.5ch minmax(8ch, 1.15fr) 10ch max-content minmax(8ch, 1.5fr);
}

.directory a > *,
.shelf a > * {
  min-width: 0;
}

.directory .name,
.shelf .name {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

.num,
.count,
.status,
.empty {
  color: var(--dim);
}

.empty {
  margin: 0.2rem 0;
}

.machine {
  justify-self: start;
  padding: 0 0.15em;
  background: var(--bg);
  color: var(--fg);
}

.machine::before {
  content: "[";
}

.machine::after {
  content: "]";
}

[data-theme="linux"] .status {
  color: var(--accent);
}

.directory a:hover,
.directory a:focus-visible,
.shelf a:hover,
.shelf a:focus-visible {
  background: var(--title-bg);
  color: var(--title-fg);
}

.directory a:hover .num,
.directory a:hover .count,
.directory a:hover .deck,
.directory a:focus-visible .num,
.directory a:focus-visible .count,
.directory a:focus-visible .deck,
.shelf a:hover .num,
.shelf a:hover .status,
.shelf a:hover .deck,
.shelf a:focus-visible .num,
.shelf a:focus-visible .status,
.shelf a:focus-visible .deck,
.shelf details > summary:hover .num,
.shelf details > summary:hover .status,
.shelf details > summary:hover .deck,
.shelf details > summary:focus-visible .num,
.shelf details > summary:focus-visible .status,
.shelf details > summary:focus-visible .deck {
  color: inherit;
}

/* A picture row on shared.html. The summary is the shelf line. The
   figure stays out of the list until that row is opened. Check on
   the same page draws this shape in the preview. */
.shelf details > summary {
  display: grid;
  align-items: baseline;
  gap: 0.2rem 0.8rem;
  padding: 0.45rem 0.15rem;
  grid-template-columns: 5.5ch minmax(8ch, 1.15fr) 10ch max-content minmax(8ch, 1.5fr);
  cursor: pointer;
  list-style: none;
}

.shelf details > summary::-webkit-details-marker,
.shelf details > summary::marker {
  content: "";
  display: none;
}

.shelf details > summary > * {
  min-width: 0;
}

.shelf details > summary:hover,
.shelf details > summary:focus-visible {
  background: var(--title-bg);
  color: var(--title-fg);
}

.shelf details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shelf details figure {
  margin: 0.35rem 0 0.8rem;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mini {
  display: block;
  margin: 0 0 0.35rem;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
}

.mini::before,
.mini::after {
  content: "+--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---+";
  display: block;
  width: 0;
  min-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.2;
}

.mini .mtitle {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.28rem 0.55rem;
  background: var(--title-bg);
  color: var(--title-fg);
}

.mini .mbody {
  display: block;
  padding: 0.65rem 0.55rem 0.8rem;
}

.mini:hover,
.mini:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.specs {
  display: grid;
  grid-template-columns: minmax(8ch, 14ch) 1fr;
  gap: 0.2rem 1rem;
  margin: 0 0 1rem;
}

.specs dt {
  color: var(--dim);
}

.specs dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.notes p {
  margin: 0.65rem 0;
  overflow-wrap: anywhere;
}

.more {
  margin-top: 1.2rem;
}

figure {
  margin: 1rem 0;
}

img,
video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: #000;
}

/* The picture on workshop/index.html. The camera frame is 1280 pixels
   wide. Past that the browser would only stretch it.
   video.live-video is the parked phone picture. serve.py does not
   send that tag while PHONE_VIDEO is off. The rule stays so the
   video has a size when that path is turned back on. */
.live img,
video.live-video {
  width: auto;
  max-width: min(100%, 1280px);
  background: #000;
}

video.live-video {
  display: block;
  height: auto;
}

/* Style links on workshop/index.html. Each one asks serve.py for this
   same page in that theme. The picture address does not change.
   The page itself shows which style is on. These links are not marked. */
.styles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0;
  margin: 0 0 1rem;
}

.styles a {
  color: inherit;
  text-decoration: none;
}

.styles a:not(:last-child)::after {
  content: "|";
  margin: 0 0.7rem;
  color: var(--dim);
}

.styles a:hover,
.styles a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

[data-theme="amiga"] .styles a:not(:last-child)::after,
[data-theme="apple2"] .styles a:not(:last-child)::after {
  color: var(--fg);
}

/* Talk buttons on workshop/index.html. serve.py writes them.
   The press answers inside iframe.board, not in this page,
   so the camera picture is not reloaded. */
.talk {
  margin: 1rem 0 0;
}

.talk fieldset {
  margin: 0.8rem 0;
}

.talk-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

iframe.board {
  display: block;
  width: 100%;
  height: 14rem;
  margin: 0.8rem 0 0;
  border: 1px solid var(--rule);
  background: var(--bg);
}

/* The board document is the frame, not the desktop. Macintosh, Solaris,
   and Acorn paint the desktop on the body. This puts the window color
   back, or the frame reads as a second desktop inside the window. */
body.board {
  min-height: 0;
  padding: 0.55rem 0.7rem;
}

body.board[data-theme="macintosh"] {
  background: #f3efe4;
}

body.board[data-theme="solaris"] {
  background: #d5d4d0;
}

body.board[data-theme="acorn"] {
  background: #f4f4f0;
}

body.board .quiet {
  margin: 0;
  color: var(--dim);
}

body.board .talk-log {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.board .talk-log li {
  margin: 0.35rem 0;
  overflow-wrap: anywhere;
}

body.board time,
body.board .who {
  color: var(--dim);
}

body.board time {
  margin-right: 0.6rem;
}

figcaption {
  margin-top: 0.3rem;
  color: var(--dim);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

[data-theme="solaris"] figure {
  padding: 0.45rem 0;
  background: var(--well);
}

.field {
  display: block;
  margin: 0.85rem 0;
}

.field > span,
legend {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--dim);
}

fieldset {
  margin: 1rem 0;
  padding: 0.55rem 0.7rem 0.7rem;
  border: 1px solid var(--rule);
}

input[type="text"],
input[type="password"],
input[type="url"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  padding: 0.4rem 0.45rem;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

input[type="file"] {
  max-width: 100%;
  font: inherit;
}

.pair {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0.5rem;
  margin: 0.45rem 0;
}

.spec-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 0.5rem;
  margin: 0.35rem 0;
}

.choice {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0.3rem 0;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
}

.choice input {
  accent-color: var(--accent);
}

.check {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0.8rem 0;
}

button {
  font: inherit;
  padding: 0.5rem 0.85rem;
  color: var(--title-fg);
  background: var(--title-bg);
  border: 0;
  cursor: pointer;
}

/* Add a photo on friends.html and on shared.html. The summary is the
   button. The figures Check builds sit in the same main as the pictures
   already kept, so the width matches. --title-bg and --title-fg paint
   the button in that page's theme. */
.adder {
  margin: 0.8rem 0 0.2rem;
}

.adder summary {
  display: block;
  padding: 0.7rem 0.85rem;
  background: var(--title-bg);
  color: var(--title-fg);
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.adder summary::-webkit-details-marker,
.adder summary::marker {
  content: "";
  display: none;
}

.adder summary:focus-visible,
.adder button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.adder textarea {
  min-height: 4.5rem;
}

.adder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.8rem 0 0.2rem;
}

.adder button {
  min-height: 2.75rem;
}

.adder-note {
  margin: 0.7rem 0 0.2rem;
}

.adder-note:empty {
  display: none;
}

.banner {
  margin: 0 0 1rem;
  padding: 0.4rem 0.5rem;
  background: var(--title-bg);
  color: var(--title-fg);
}

@media (max-width: 40rem) {
  .directory a {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num name count"
      "deck deck deck";
    padding: 0.7rem 0.1rem;
  }

  .directory .num { grid-area: num; }
  .directory .name { grid-area: name; }
  .directory .count { grid-area: count; }
  .directory .deck { grid-area: deck; }

  .shelf a,
  .shelf details > summary {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num name"
      "status machine"
      "deck deck";
    padding: 0.7rem 0.1rem;
  }

  .shelf .num { grid-area: num; }
  .shelf .name { grid-area: name; }
  .shelf .status { grid-area: status; }
  .shelf .machine { grid-area: machine; justify-self: end; }
  .shelf .deck { grid-area: deck; }

  .specs,
  .pair,
  .spec-row {
    grid-template-columns: 1fr;
  }

  .specs dt {
    margin-top: 0.45rem;
  }
}

/* Machine chrome. Text themes stay edge to edge. GUI themes draw a desktop. */

.dock {
  display: contents;
}

.close {
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  width: 0.95rem;
  min-width: 0.95rem;
  max-width: 0.95rem;
  height: 0.95rem;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  text-decoration: none;
  color: transparent;
  background: #fff;
  border: 1px solid #000;
}

.field input[type="text"],
.field input[type="url"],
.field textarea,
.field select,
.pair,
.spec-row {
  max-width: 46rem;
}

[data-theme="pc"] .window,
[data-theme="macintosh"] .window,
[data-theme="solaris"] .window,
[data-theme="acorn"] .window,
[data-theme="amiga"] .window {
  display: flex;
  flex-direction: column;
}

[data-theme="pc"] .window {
  flex: 1 1 auto;
  margin: 0.35rem 0.7rem 0.7rem;
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
}

[data-theme="pc"] .window::before,
[data-theme="pc"] .window::after {
  content: "+ +";
  display: block;
  align-self: stretch;
  width: auto;
  min-width: 0;
  overflow: hidden;
  text-align-last: justify;
  color: var(--accent);
  line-height: 1;
  background: linear-gradient(var(--accent), var(--accent)) 0.8ch 50% / calc(100% - 1.6ch) 1px no-repeat;
}

[data-theme="vt220"] .title { order: 1; }
[data-theme="vt220"] main { order: 2; }

[data-theme="vt220"] .dock {
  display: flex;
  flex-direction: column;
  order: 3;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #1c1208;
}

[data-theme="macintosh"] .title::after,
[data-theme="solaris"] .title::after,
[data-theme="acorn"] .title::after,
[data-theme="amiga"] .title::after,
[data-theme="macintosh"] .lede::after,
[data-theme="solaris"] .lede::after,
[data-theme="acorn"] .lede::after,
[data-theme="amiga"] .lede::after,
[data-theme="macintosh"] .directory li + li::before,
[data-theme="solaris"] .directory li + li::before,
[data-theme="acorn"] .directory li + li::before,
[data-theme="amiga"] .directory li + li::before,
[data-theme="macintosh"] .shelf li + li::before,
[data-theme="solaris"] .shelf li + li::before,
[data-theme="acorn"] .shelf li + li::before,
[data-theme="amiga"] .shelf li + li::before,
[data-theme="macintosh"] .shelf + .kind::before,
[data-theme="solaris"] .shelf + .kind::before,
[data-theme="acorn"] .shelf + .kind::before,
[data-theme="amiga"] .shelf + .kind::before,
[data-theme="macintosh"] figure::before,
[data-theme="solaris"] figure::before,
[data-theme="acorn"] figure::before,
[data-theme="amiga"] figure::before {
  content: none;
  display: none;
}

body[data-theme="macintosh"] {
  background: #aaaaaa;
}

[data-theme="macintosh"] .keys {
  position: sticky;
  top: 0;
  z-index: 3;
  align-items: center;
  margin: 0;
  padding: 0.18rem 0.7rem;
  background: #fff;
  color: #161616;
  border-bottom: 1px solid #000;
  gap: 0.15rem 0;
}

[data-theme="macintosh"] .key {
  position: relative;
  padding: 0.12rem 0.2rem;
}

[data-theme="macintosh"] .key:not(:last-child) {
  margin-right: 1.15rem;
}

[data-theme="macintosh"] .key:not(:last-child)::after {
  position: absolute;
  left: calc(100% + 0.35rem);
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #161616;
}

[data-theme="macintosh"] .key:hover,
[data-theme="macintosh"] .key:focus-visible {
  background: #161616;
  color: #fff;
  text-decoration: none;
}

[data-theme="macintosh"] .window {
  order: 1;
  width: min(100% - 2rem, 60rem);
  margin: 0.8rem 0 0 1rem;
  background: #f3efe4;
  color: #161616;
  border: 1px solid #000;
  border-bottom: 0;
}

[data-theme="macintosh"] .ticker {
  order: 2;
  width: min(100% - 2rem, 60rem);
  margin: 0 0 1.1rem 1rem;
  padding: 0.22rem 0.5rem;
  background: #f3efe4;
  color: #161616;
  border: 1px solid #000;
  border-top: 1px solid #161616;
}

[data-theme="macintosh"] .title {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 0.4rem 0.6rem;
  background: #d4d4d4;
  color: #161616;
  border-bottom: 1px solid #000;
}

[data-theme="macintosh"] .title h1 {
  text-align: center;
  /* The middle column is the machine name. min-width 0 lets
     "Power Macintosh 7200/90" wrap inside the title bar on a phone.
     Without it the grid grows to fit the words and shoves the close box
     past the window. */
  min-width: 0;
}

[data-theme="macintosh"] .where {
  margin-left: 0;
}

[data-theme="macintosh"] .lede,
[data-theme="macintosh"] .directory li + li,
[data-theme="macintosh"] .shelf li + li,
[data-theme="macintosh"] figure {
  border-top: 1px solid #161616;
}

[data-theme="macintosh"] .lede {
  padding-top: 0.7rem;
}

body[data-theme="solaris"] {
  background: #8eaeac;
}

[data-theme="solaris"] .window {
  order: 1;
  width: min(100% - 2rem, 64rem);
  margin: 0.75rem 0 0.6rem 1rem;
  background: #d5d4d0;
  color: #141414;
  border-top: 2px solid #d7ebe8;
  border-left: 2px solid #d7ebe8;
  border-right: 2px solid #3e5552;
  border-bottom: 2px solid #3e5552;
  box-shadow: 1px 1px 0 #2c403e;
}

[data-theme="solaris"] .title {
  align-items: center;
  background: #1c3d55;
  color: #f6e7c1;
  box-shadow: inset 0 -3px 0 #e6c36a;
}

[data-theme="solaris"] .close {
  background: #c8c8c4;
  border-top: 2px solid #f4f4f2;
  border-left: 2px solid #f4f4f2;
  border-right: 2px solid #4a4a48;
  border-bottom: 2px solid #4a4a48;
}

[data-theme="solaris"] .dock {
  display: flex;
  flex-direction: column-reverse;
  order: 2;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  background: #b7b7b4;
  border-top: 2px solid #f4f4f2;
  box-shadow: 0 -2px 0 #3e5552;
}

[data-theme="solaris"] .keys {
  justify-content: center;
  margin: 0;
  padding: 0.45rem 0.7rem;
  color: #141414;
  gap: 0.45rem 0;
}

[data-theme="solaris"] .key {
  position: relative;
  background: #c8c8c4;
  color: #141414;
  padding: 0.32rem 0.75rem;
  border-top: 2px solid #f4f4f2;
  border-left: 2px solid #f4f4f2;
  border-right: 2px solid #4a4a48;
  border-bottom: 2px solid #4a4a48;
}

[data-theme="solaris"] .key:not(:last-child) {
  margin-right: 1.35rem;
}

[data-theme="solaris"] .key:not(:last-child)::after {
  position: absolute;
  left: calc(100% + 0.45rem);
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #141414;
}

[data-theme="solaris"] .key:hover,
[data-theme="solaris"] .key:focus-visible {
  border-top-color: #4a4a48;
  border-left-color: #4a4a48;
  border-bottom-color: #f4f4f2;
  border-right-color: #f4f4f2;
  text-decoration: none;
}

[data-theme="solaris"] .ticker {
  margin: 0;
  padding: 0.12rem 0.7rem;
  background: #1c3d55;
  color: #f6e7c1;
}

[data-theme="solaris"] .lede,
[data-theme="solaris"] .directory li + li,
[data-theme="solaris"] .shelf li + li,
[data-theme="solaris"] figure {
  border-top: 1px solid #3e5552;
  box-shadow: inset 0 1px 0 #f4f4f2;
}

[data-theme="solaris"] .lede {
  padding-top: 0.7rem;
}

body[data-theme="acorn"] {
  background: #bdb9b0;
}

[data-theme="acorn"] .window {
  order: 1;
  width: min(100% - 2rem, 60rem);
  margin: 0.7rem 0 0 0.8rem;
  background: #f4f4f0;
  color: #161616;
  border: 2px solid #6b6760;
  border-bottom: 0;
  box-shadow: inset 1px 1px 0 #fff;
}

[data-theme="acorn"] .ticker {
  order: 2;
  width: min(100% - 2rem, 60rem);
  margin: 0 0 0.8rem 0.8rem;
  padding: 0.18rem 0.45rem;
  background: #f4f4f0;
  color: #161616;
  border: 2px solid #6b6760;
  border-top: 1px solid #8e0000;
}

[data-theme="acorn"] .title {
  align-items: center;
  background: #8e0000;
  color: #fff;
}

[data-theme="acorn"] .close {
  position: relative;
  background: transparent;
  border: 1px solid #fff;
}

[data-theme="acorn"] .close::before {
  content: "×";
  position: absolute;
  inset: 0;
  text-indent: 0;
  color: #fff;
  text-align: center;
  line-height: 0.85rem;
  font-size: 0.85rem;
}

[data-theme="acorn"] .keys {
  order: 3;
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  align-items: flex-end;
  padding: 0.35rem 0.55rem 0.3rem;
  background: #d4d0c8;
  color: #161616;
  border-top: 2px solid #fff;
  box-shadow: inset 0 -2px 0 #6b6760;
  gap: 0.4rem 0;
}

[data-theme="acorn"] .key {
  position: relative;
  min-width: 5.2rem;
  min-height: 2.3rem;
  padding: 0.3rem 0.45rem;
  background: #e6e2da;
  color: #161616;
  text-align: center;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #6b6760;
  border-bottom: 1px solid #6b6760;
}

[data-theme="acorn"] .key:not(:last-child) {
  margin-right: 1.35rem;
}

[data-theme="acorn"] .key:not(:last-child)::after {
  position: absolute;
  left: calc(100% + 0.45rem);
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #161616;
}

[data-theme="acorn"] .key:hover,
[data-theme="acorn"] .key:focus-visible {
  background: #8e0000;
  color: #fff;
  text-decoration: none;
}

[data-theme="acorn"] .lede,
[data-theme="acorn"] .directory li + li,
[data-theme="acorn"] .shelf li + li,
[data-theme="acorn"] figure {
  border-top: 1px solid #6b6760;
  box-shadow: inset 0 1px 0 #fff;
}

[data-theme="acorn"] .lede {
  padding-top: 0.7rem;
}

[data-theme="amiga"] .keys {
  position: sticky;
  top: 0;
  z-index: 3;
  align-items: center;
  margin: 0;
  padding: 0.22rem 0.6rem;
  gap: 0.2rem 0;
  background: #0055aa;
  color: #fff;
  border-top: 2px solid #9ec4f0;
  border-bottom: 2px solid #001833;
  box-shadow: inset 0 -1px 0 #000;
}

[data-theme="amiga"] .key {
  position: relative;
  padding: 0.08rem 0.25rem;
}

[data-theme="amiga"] .key:not(:last-child) {
  margin-right: 1.15rem;
}

[data-theme="amiga"] .key:not(:last-child)::after {
  position: absolute;
  left: calc(100% + 0.35rem);
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  color: #fff;
}

[data-theme="amiga"] .key:hover,
[data-theme="amiga"] .key:focus-visible {
  background: #fff;
  color: #0055aa;
  text-decoration: none;
}

[data-theme="amiga"] .ticker {
  margin: 0;
  padding: 0.12rem 0.6rem 0.3rem;
  background: #0055aa;
  color: #fff;
}

[data-theme="amiga"] .window {
  width: min(100% - 1.2rem, 64rem);
  margin: 0.35rem 0 1rem 0.6rem;
  background: #0055aa;
  color: #fff;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 1px #9ec4f0;
}

[data-theme="amiga"] .title {
  align-items: center;
  background: #111;
  color: #fff;
  border-bottom: 2px solid #000;
}

[data-theme="amiga"] .close {
  background: #ff8c1a;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #ffd7ad, inset -1px -1px 0 #8a4a00;
}

[data-theme="amiga"] .lede,
[data-theme="amiga"] .directory li + li,
[data-theme="amiga"] .shelf li + li,
[data-theme="amiga"] figure {
  border-top: 1px solid #000;
}

[data-theme="amiga"] .lede {
  padding-top: 0.7rem;
}

.mini {
  display: flex;
  flex-direction: column;
  min-height: 8rem;
  margin: 0 0 0.9rem;
}

.mini .mbody {
  flex: 1 1 auto;
}

.mini[data-theme="pc"]::before,
.mini[data-theme="pc"]::after {
  color: var(--accent);
}

.mini[data-theme="macintosh"] {
  background: #aaaaaa;
  color: #161616;
  padding: 0.45rem 0.5rem 0.55rem;
}

.mini[data-theme="macintosh"]::before {
  content: "";
  width: auto;
  min-width: 0;
  height: 0.7rem;
  background: #fff;
  border-bottom: 1px solid #000;
  margin-bottom: 0.4rem;
}

.mini[data-theme="macintosh"]::after {
  content: none;
}

.mini[data-theme="macintosh"] .mtitle {
  background: #d4d4d4;
  color: #161616;
  border: 1px solid #000;
  border-bottom: 0;
}

.mini[data-theme="macintosh"] .mbody {
  background: #f3efe4;
  color: #161616;
  border: 1px solid #000;
}

.mini[data-theme="macintosh"]:hover,
.mini[data-theme="macintosh"]:focus-visible {
  outline: 2px solid #f4f4f4;
  outline-offset: 2px;
}

.mini[data-theme="solaris"] {
  background: #8eaeac;
  color: #141414;
  padding: 0.5rem;
}

.mini[data-theme="solaris"]::before,
.mini[data-theme="solaris"]::after,
.mini[data-theme="acorn"]::before,
.mini[data-theme="acorn"]::after,
.mini[data-theme="amiga"]::before,
.mini[data-theme="amiga"]::after {
  content: none;
}

.mini[data-theme="solaris"] .mtitle {
  background: #1c3d55;
  color: #f6e7c1;
  border: 2px solid #d7ebe8;
  border-bottom: 0;
  box-shadow: inset 0 -3px 0 #e6c36a;
}

.mini[data-theme="solaris"] .mbody {
  background: #d5d4d0;
  color: #141414;
  border: 2px solid #3e5552;
  border-top: 0;
}

.mini[data-theme="acorn"] {
  background: #bdb9b0;
  padding: 0.5rem;
}

.mini[data-theme="acorn"] .mtitle {
  background: #8e0000;
  color: #fff;
}

.mini[data-theme="acorn"] .mbody {
  background: #f4f4f0;
  color: #161616;
}

.mini[data-theme="amiga"] {
  background: #0055aa;
  color: #fff;
  border: 2px solid #000;
}

.mini[data-theme="amiga"] .mtitle {
  background: #111;
  color: #fff;
}

.mini[data-theme="amiga"] .mbody {
  background: #0055aa;
  color: #fff;
}

/* One header on the text screens: links, a dashed rule, then the ticker. */

[data-theme="linux"] .dock,
[data-theme="pc"] .dock,
[data-theme="apple2"] .dock,
[data-theme="vt220"] .dock {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  background: var(--bg);
}

[data-theme="linux"] .dock,
[data-theme="pc"] .dock,
[data-theme="apple2"] .dock {
  margin: 0.45rem 0.7rem 0.15rem;
}

[data-theme="vt220"] .dock {
  margin: 0;
  border-top: 0;
}

[data-theme="linux"] .dock::before,
[data-theme="pc"] .dock::before,
[data-theme="apple2"] .dock::before,
[data-theme="vt220"] .dock::before,
[data-theme="linux"] .dock::after,
[data-theme="pc"] .dock::after,
[data-theme="apple2"] .dock::after,
[data-theme="vt220"] .dock::after,
[data-theme="linux"] .ticker::before,
[data-theme="pc"] .ticker::before,
[data-theme="apple2"] .ticker::before,
[data-theme="vt220"] .ticker::before {
  content: "+ +";
  display: block;
  align-self: stretch;
  width: auto;
  min-width: 0;
  overflow: hidden;
  text-align-last: justify;
  color: var(--accent);
  line-height: 1;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0 0.55ch,
    transparent 0.55ch 1.05ch
  ) 0.8ch 50% / calc(100% - 1.6ch) 1px no-repeat;
}

[data-theme="linux"] .ticker,
[data-theme="pc"] .ticker,
[data-theme="apple2"] .ticker,
[data-theme="vt220"] .ticker {
  margin: 0;
  padding: 0.28rem 0 0.32rem;
  background: transparent;
}

[data-theme="linux"] .ticker-track,
[data-theme="pc"] .ticker-track,
[data-theme="apple2"] .ticker-track,
[data-theme="vt220"] .ticker-track {
  padding-inline: 0.75rem;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0;
  margin-top: auto;
  padding: 0.7rem 0.75rem 0.85rem;
  color: var(--fg);
}

.foot::before {
  flex: 0 0 100%;
  margin-bottom: 0.45rem;
}

.foot a {
  color: inherit;
  text-decoration: none;
}

.foot a:not(:last-child)::after {
  content: "|";
  margin: 0 0.7rem;
  color: var(--dim);
}

.foot a:hover,
.foot a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

[data-theme="vt220"] .foot {
  order: 4;
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 0;
  background: #0e0a06;
}

[data-theme="vt220"] .dock {
  bottom: 2.5rem;
}

[data-theme="macintosh"] .foot {
  margin-top: 0.4rem;
  border-top: 1px solid #161616;
  color: #161616;
}

[data-theme="solaris"] .foot {
  margin-top: 0.5rem;
  border-top: 1px solid #3e5552;
  box-shadow: inset 0 1px 0 #f4f4f2;
  color: #141414;
}

[data-theme="acorn"] .foot {
  margin-top: 0.5rem;
  border-top: 1px solid #6b6760;
  box-shadow: inset 0 1px 0 #fff;
  color: #161616;
}

[data-theme="amiga"] .foot {
  margin-top: 0.5rem;
  border-top: 1px solid #000;
  color: #fff;
}

[data-theme="amiga"] .foot a:not(:last-child)::after,
[data-theme="apple2"] .foot a:not(:last-child)::after {
  color: var(--fg);
}

@media (max-width: 40rem) {
  [data-theme="macintosh"] .window,
  [data-theme="macintosh"] .ticker,
  [data-theme="solaris"] .window,
  [data-theme="acorn"] .window,
  [data-theme="acorn"] .ticker,
  [data-theme="amiga"] .window {
    width: auto;
    margin-left: 0.4rem;
    margin-right: 0.4rem;
  }

  [data-theme="pc"] .window {
    margin-inline: 0.35rem;
  }

  [data-theme="vt220"] .dock {
    bottom: 4.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .ticker-track {
    animation: none;
  }

  .ticker {
    overflow-x: auto;
  }
}