/* lars-gossard.de: an Amiga Workbench 3.1 screen.
   Layout: full-screen Workbench, screen bar on top, drive icons on the right, freely movable windows.
   One theme on purpose: the four-colour Workbench 3.1 default palette. */

@font-face {
  font-family: VT323;
  src: url("../fonts/vt323-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: VT323;
  src: url("../fonts/vt323-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --pen0: #aaa; /* grey, background */
  --pen1: #000; /* black */
  --pen2: #fff; /* white */
  --pen3: #6688bb; /* blue, active window */
  --dim: #555;
  --guru: #ff2a00;
  /* A free Topaz recreation goes in front of VT323 once it is self-hosted too. */
  --topaz: "VT323", ui-monospace, monospace;
  --mono: var(--topaz);
  --line: transparent;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--pen0);
  color: var(--pen1);
  font-family: var(--topaz);
  font-size: 20px;
  line-height: 1.1;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: none;
}

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px dotted var(--pen1); outline-offset: 1px; }

[hidden] { display: none !important; }

/* Screen bar */
.sbar { position: fixed; left: 0; right: 0; top: 0; height: 24px; background: var(--pen2); border-bottom: 2px solid var(--pen1); display: flex; align-items: center; z-index: 9000; white-space: nowrap; overflow: hidden; }
.sbar .txt { padding-left: 6px; flex: 1; min-width: 0; overflow: hidden; text-overflow: clip; }
.sbar .dg { width: 30px; height: 100%; border: 0; border-left: 2px solid var(--pen1); display: grid; place-items: center; background: var(--pen2); cursor: pointer; padding: 0; }
.menus { display: none; padding-left: 4px; flex: 1; }
.sbar.menu .txt { display: none; }
.sbar.menu .menus { display: flex; }
.menus > div { position: relative; padding: 0 10px; height: 22px; display: flex; align-items: center; cursor: default; }
.menus > div.hot { background: var(--pen1); color: var(--pen2); }
.drop { position: fixed; top: 24px; background: var(--pen2); border: 2px solid var(--pen1); box-shadow: 2px 2px 0 var(--pen1); display: none; min-width: 240px; z-index: 9001; padding: 2px 0; }
.drop div { padding: 1px 10px; cursor: default; }
.drop div.hot { background: var(--pen1); color: var(--pen2); }
.drop hr { border: 0; border-top: 2px dotted var(--pen1); margin: 2px 4px; }

/* Cycle gadget (GadTools CYCLE_KIND) for the language */
.cyc { height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 4px; border: 0; border-left: 2px solid var(--pen1); background: var(--pen2); cursor: pointer; white-space: nowrap; flex: none; }
.cyc svg { width: 16px; height: 11px; shape-rendering: crispEdges; padding-right: 5px; border-right: 2px solid var(--pen1); box-sizing: content-box; }
.cyc:active { background: var(--pen3); }
.sbar.menu .cyc { display: none; }

/* "Made with <3 in Europe" as a recessed text gadget */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--pen0); border: 2px solid; border-color: var(--pen1) var(--pen2) var(--pen2) var(--pen1); box-shadow: 0 0 0 2px var(--pen0), 0 0 0 4px var(--pen1); white-space: nowrap; }
.badge svg { width: 18px; height: 14px; shape-rendering: crispEdges; }
.desk > .badge { position: absolute; left: 12px; bottom: 12px; z-index: 5; }
.legal { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; gap: 8px; }
.legal a { padding: 0 4px; background: var(--pen2); color: var(--pen1); border: 2px solid var(--pen1); text-decoration: none; }
.legal a:hover { background: var(--pen3); }

/* Desktop icons */
.desk { position: absolute; inset: 26px 0 0; }
.dicons { position: absolute; right: 12px; top: 12px; display: grid; gap: 14px; justify-items: center; }
.ico { display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 2px 4px; cursor: default; width: 96px; text-align: center; }
.ico svg { width: 56px; height: 44px; image-rendering: pixelated; shape-rendering: crispEdges; }
.ico span { background: var(--pen0); padding: 0 2px; overflow-wrap: anywhere; }
.grid { display: flex; flex-wrap: wrap; gap: 10px 6px; padding: 10px; align-content: flex-start; }
.sel-info { position: sticky; bottom: 0; margin-top: auto; flex: none; padding: 2px 8px; border-top: 2px solid var(--pen1); background: var(--pen2); }

/* Windows */
.win { position: absolute; background: var(--pen0); border: 2px solid; border-color: var(--pen2) var(--pen1) var(--pen1) var(--pen2); display: grid; grid-template-columns: minmax(0, 1fr) 18px; grid-template-rows: 24px minmax(0, 1fr) 18px; min-width: 200px; min-height: 110px; max-width: calc(100vw - 8px); }
.win .tb { grid-column: 1 / 3; display: flex; align-items: stretch; height: 24px; border-bottom: 2px solid var(--pen1); background: var(--pen0); cursor: move; touch-action: none; }
.win.act .tb { background: var(--pen3); }
.win .tb .t { flex: 1; padding: 2px 8px 0; white-space: nowrap; overflow: hidden; min-width: 0; }
.gad { width: 28px; flex: none; border: 0; border-left: 2px solid var(--pen2); border-right: 2px solid var(--pen1); background: inherit; padding: 0; display: grid; place-items: center; cursor: pointer; }
.gad:active { border-left-color: var(--pen1); border-right-color: var(--pen2); }
.gad svg { width: 18px; height: 14px; shape-rendering: crispEdges; }
.win .bd { overflow: auto; min-height: 0; min-width: 0; position: relative; scrollbar-width: none; border-left: 2px solid var(--pen2); }
.win .bd:has(> .sel-info) { display: flex; flex-direction: column; }
.win .bd::-webkit-scrollbar { display: none; }
.win .bd.txt { background: var(--pen0); padding: 8px 12px; user-select: text; font-size: 20px; line-height: 1.15; }

/* Scroll bars in the Workbench 3.1 style: proportional gadget in the window border, both arrows together at the end */
.vs, .hs { display: flex; background: var(--pen0); min-width: 0; min-height: 0; }
.vs { flex-direction: column; border-left: 2px solid var(--pen1); }
.hs { border-top: 2px solid var(--pen1); }
.tr { flex: 1; position: relative; margin: 3px; min-width: 0; min-height: 0; cursor: default; touch-action: none; }
.hs .tr { margin: 2px 3px; }
.kn { position: absolute; left: 0; right: 0; top: 0; background: var(--pen0); border: 2px solid; border-color: var(--pen2) var(--pen1) var(--pen1) var(--pen2); min-height: 8px; min-width: 8px; touch-action: none; }
.hs .kn { top: 0; bottom: 0; left: 0; right: auto; }
.kn:active { border-color: var(--pen1) var(--pen2) var(--pen2) var(--pen1); }
.ar { flex: none; width: 100%; height: 16px; padding: 0; border: 2px solid; border-color: var(--pen2) var(--pen1) var(--pen1) var(--pen2); background: var(--pen0); display: grid; place-items: center; cursor: pointer; touch-action: none; }
.hs .ar { width: 18px; height: 100%; }
.ar:active { border-color: var(--pen1) var(--pen2) var(--pen2) var(--pen1); }
.ar svg { width: 10px; height: 6px; shape-rendering: crispEdges; }
.hs .ar svg { width: 6px; height: 10px; }
.win .sz { position: relative; border-left: 2px solid var(--pen1); border-top: 2px solid var(--pen1); background: var(--pen0); cursor: nwse-resize; touch-action: none; }
.win .sz::after { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 9px; border: 2px solid; border-color: var(--pen2) var(--pen1) var(--pen1) var(--pen2); }
.win.act .vs, .win.act .hs, .win.act .sz { background: var(--pen3); }

/* Selected desktop icon */
.ico.sel svg { filter: invert(1); }
.ico.sel span { background: var(--pen1); color: var(--pen2); }

/* Window contents */
.bd.txt h2 { font-size: 22px; font-weight: normal; margin: 0 0 6px; background: var(--pen1); color: var(--pen2); display: inline-block; padding: 0 6px; }
.bd.txt p { margin: 0 0 10px; max-width: 62ch; }
.bd.txt a { color: var(--pen1); background: var(--pen2); text-decoration: none; padding: 0 3px; border: 1px solid var(--pen1); }
.bd.txt a:hover { background: var(--pen3); }
.bd.txt .dim { color: var(--dim); }
.bd.txt table { border-collapse: collapse; font: inherit; }
.bd.txt td { padding: 0 12px 0 0; vertical-align: top; }
.bd.txt .inset p { margin: 0; }
.inset { background: var(--pen0); border: 2px solid; border-color: var(--pen1) var(--pen2) var(--pen2) var(--pen1); padding: 4px 8px; margin: 4px 0 10px; }
.ex { display: inline-block; background: var(--pen3); color: var(--pen1); padding: 0 4px; font-size: 16px; vertical-align: 2px; }
.info-head { display: flex; gap: 14px; align-items: flex-start; }
.info-head img { flex: none; border: 2px solid; border-color: var(--pen1) var(--pen2) var(--pen2) var(--pen1); }
.info-label { margin-top: 8px; }
.proj-note { margin-top: 8px; }
.page-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0; }
.bd.txt a.cta { background: var(--pen3); color: var(--pen2); padding: 3px 12px; border: 2px solid; border-color: var(--pen2) var(--pen1) var(--pen1) var(--pen2); }
.bd.txt a.cta:hover { background: var(--pen1); }
.bd.txt a.cta:active { border-color: var(--pen1) var(--pen2) var(--pen2) var(--pen1); }
.about .badge { margin: 4px 4px 12px; }
.heart-hd { display: none; }

/* Shell */
.shell { background: var(--pen0); padding: 6px 8px; font-size: 20px; user-select: text; cursor: text; }
.shell pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.shell .ln { display: flex; }
.shell input { flex: 1; min-width: 0; background: transparent; border: 0; font: inherit; color: var(--pen1); outline: none; padding: 0; caret-color: var(--pen3); }

/* Guru Meditation */
.guru { position: fixed; inset: 0; background: var(--pen1); z-index: 9999; display: none; padding: 12px; cursor: pointer; }
.guru div { border: 6px solid var(--guru); color: var(--guru); text-align: center; padding: 14px 8px; font-size: 22px; line-height: 1.4; animation: blink 1s steps(1) infinite; }

@keyframes blink { 50% { border-color: var(--pen1); } }

@media (max-width: 700px) {
  body { overflow: auto; }
  .desk { position: relative; inset: auto; padding: 28px 8px 16px; display: flex; flex-direction: column; gap: 10px; }
  .dicons { position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; }
  .win { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; grid-template-rows: 24px auto 0; }
  .win .bd { max-height: 60vh; }
  .win .hs, .win .sz { visibility: hidden; }
  .desk > .badge { position: static; align-self: center; margin-top: 6px; order: 99; }
  .desk > .legal { position: static; align-self: center; order: 100; }
}

@media (prefers-reduced-motion: reduce) { .guru div { animation: none; } }

/* =====================================================================
   HD mode: the same Workbench, redrawn for high-resolution screens.
   Same parts (title bars, gadgets, drawers, scroll bars), but vector instead of
   pixels, so real product images and app icons do not clash with four-colour art.
   ===================================================================== */
html.hd {
  --pen0: #e7eaf0; /* window surface */
  --pen1: #14171d; /* ink */
  --pen2: #fff;
  --pen3: #4a6fb5; /* the Workbench blue, desaturated and deepened */
  --desk1: #9aa5ba;
  --desk2: #717d95;
  --line: rgb(20 23 29 / 14%);
  --soft: #f4f6f9;
  --muted: #6a7182;
  --tb-ink: #4b5262;
  --night: #10131a;
  --night-ink: #d6dbe5;
  --topaz: "Figtree", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

html.hd body { background: radial-gradient(120% 90% at 30% 0%, var(--desk1), var(--desk2)); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
html.hd .sbar { height: 30px; background: rgb(255 255 255 / 82%); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; }
html.hd .sbar .txt { padding-left: 12px; }
html.hd .sbar .dg { border-left: 1px solid var(--line); background: transparent; width: 36px; }
html.hd .desk { inset: 30px 0 0; }
html.hd .drop { top: 30px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgb(20 25 40 / 25%); padding: 4px; font-size: 14px; }
html.hd .drop div { padding: 5px 12px; border-radius: 5px; }
html.hd .drop div.hot { background: var(--pen3); color: var(--pen2); }
html.hd .drop hr { border-top: 1px solid var(--line); }
html.hd .menus > div { height: 28px; padding: 0 12px; font-weight: 600; }
html.hd .menus > div.hot { background: var(--pen3); color: var(--pen2); }

html.hd .win {
  border: 1px solid rgb(10 14 22 / 28%);
  border-radius: 10px;
  overflow: hidden;
  background: var(--pen2);
  grid-template-columns: minmax(0, 1fr) 12px;
  grid-template-rows: 32px minmax(0, 1fr) 12px;
  box-shadow: 0 18px 40px -12px rgb(15 20 35 / 45%), 0 2px 6px rgb(15 20 35 / 18%);
}
html.hd .win .tb { height: 32px; background: linear-gradient(#e9ecf2, #dde1e9); border-bottom: 1px solid var(--line); color: var(--tb-ink); }
html.hd .win.act .tb { background: linear-gradient(#5d81c4, #4a6fb5); color: var(--pen2); border-bottom-color: #3d5f9e; }
html.hd .win .tb .t { padding: 6px 10px 0; font-weight: 600; font-size: 14px; }
html.hd .gad { width: 32px; border: 0; color: inherit; opacity: 0.85; }
html.hd .gad:hover { opacity: 1; background: rgb(255 255 255 / 14%); }
html.hd .win .bd { border-left: 0; }
html.hd .win .bd.txt { background: var(--pen2); padding: 16px 20px; font-size: 15px; line-height: 1.55; }
html.hd .win .bd:not(.txt, .shell) { background: var(--pen2); }
html.hd .grid { gap: 14px 8px; padding: 16px; }
html.hd .sel-info { padding: 8px 16px; border-top: 1px solid var(--line); background: var(--soft); color: var(--tb-ink); font-size: 13px; }

/* Scroll bars: narrow and calm, but still in the window border as on the Workbench */
html.hd .win .vs, html.hd .win .hs { background: var(--pen2); border: 0; }
html.hd .ar { display: none; }
html.hd .tr { margin: 3px; }
html.hd .kn { border: 0; border-radius: 6px; background: rgb(20 23 29 / 22%); min-height: 24px; min-width: 24px; }
html.hd .kn:hover { background: rgb(74 111 181 / 80%); }
html.hd .win .sz { border: 0; background: var(--pen2); }
html.hd .win .sz::after { left: 2px; top: 2px; width: 6px; height: 6px; border: 0; border-right: 2px solid rgb(20 23 29 / 30%); border-bottom: 2px solid rgb(20 23 29 / 30%); }
html.hd .win.act .vs, html.hd .win.act .hs, html.hd .win.act .sz { background: var(--pen2); }
html.hd .win.act .kn { background: rgb(74 111 181 / 55%); }

/* Product sheet (HD information window) */
html.hd .sheet { display: grid; gap: 14px; }
html.hd .sheet-head { display: flex; gap: 16px; align-items: center; }
html.hd .sheet-head img, html.hd .sheet-head .noimg { width: 88px; height: 88px; flex: none; border-radius: 20px; box-shadow: 0 6px 18px rgb(0 0 0 / 22%); }
html.hd .sheet .noimg { display: grid; place-items: center; background: #1d2433; color: #9fb0d0; font-size: 12px; }
html.hd .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
html.hd .shot { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; border: 1px dashed rgb(20 23 29 / 28%); background: repeating-linear-gradient(135deg, var(--soft) 0 12px, #eef1f5 12px 24px); display: grid; place-items: center; color: var(--muted); font-size: 13px; font-weight: 500; }
html.hd .shot-media { display: block; width: 100%; height: auto; border: 0; background: #0b0e18; object-fit: cover; }

/* The badge, as in the original */
html.hd .badge { background: #0b0e15; color: #f2f4f8; border: 1px solid #2a3040; border-radius: 999px; box-shadow: 0 10px 30px rgb(0 0 0 / 25%); padding: 10px 22px; font-size: 16px; font-weight: 500; gap: 10px; }
html.hd .desk > .badge { left: 16px; bottom: 16px; }
html.hd .badge svg { width: 22px; height: 20px; shape-rendering: geometricPrecision; }
html.hd .heart-pal { display: none; }
html.hd .heart-hd { display: inline; }

/* Icons */
html.hd .ico { width: 104px; gap: 6px; border-radius: 8px; padding: 6px 4px; }
html.hd .ico img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 25%)); }
html.hd .ico span { background: none; font-size: 13px; font-weight: 500; padding: 1px 6px; border-radius: 4px; line-height: 1.3; }
html.hd .dicons .ico span { color: var(--pen2); text-shadow: 0 1px 3px rgb(0 0 0 / 55%); }
html.hd .ico.sel { background: rgb(74 111 181 / 16%); }
html.hd .ico.sel span, html.hd .dicons .ico.sel span { background: var(--pen3); color: var(--pen2); text-shadow: none; }

/* Gadget and icon drawings */
html.hd .gad svg { width: 16px; height: 16px; shape-rendering: auto; }
html.hd .ico svg { width: 56px; height: 48px; image-rendering: auto; shape-rendering: auto; }
html.hd .ico.sel svg, html.hd .ico.sel img { filter: none; }

/* Window contents */
html.hd .bd.txt h2 { background: none; color: var(--pen1); padding: 0; font-size: 21px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
html.hd .bd.txt .dim { color: var(--muted); }
html.hd .bd.txt a { background: none; border: 0; border-bottom: 1px solid currentcolor; color: var(--pen3); padding: 0; }
html.hd .bd.txt a.cta { background: var(--pen3); color: var(--pen2); border: 0; border-radius: 999px; padding: 9px 20px; font-weight: 600; box-shadow: 0 4px 12px rgb(74 111 181 / 35%); }
html.hd .bd.txt a.cta:hover { background: #3b5c9c; }
html.hd .cta-note { color: var(--muted); font-size: 14px; }
html.hd .bd.txt .sheet .proj-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
html.hd .inset { border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 10px 14px; }
html.hd .ex { border-radius: 4px; color: var(--pen2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; padding: 1px 6px; }

html.hd .bd.txt .sheet h2 { margin: 0; }
html.hd .bd.txt .sheet p { margin: 0; }

html.hd .bd.txt .sheet .chips span { font-size: 12px; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--tb-ink); background: var(--soft); }

/* Screen bar gadgets */
html.hd .sbar .cyc { border-left: 1px solid var(--line); background: transparent; font-size: 13px; font-weight: 600; gap: 8px; padding: 0 12px 0 10px; }
html.hd .sbar .cyc svg { border-right: 1px solid var(--line); padding-right: 8px; }
html.hd .sbar .cyc:hover { background: rgb(74 111 181 / 10%); }

/* Shell */
html.hd .shell { background: var(--night); color: var(--night-ink); font-family: var(--mono); font-size: 13.5px; line-height: 1.55; padding: 12px 14px; }
html.hd .shell input { color: var(--pen2); caret-color: #7fa2e8; }

html.hd .legal { right: 16px; bottom: 16px; gap: 14px; }
html.hd .desk .legal a { padding: 0; background: none; border: 0; color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 3px rgb(0 0 0 / 55%); }
html.hd .desk .legal a:hover { text-decoration: underline; background: none; }

@media (max-width: 700px) {
  html.hd .desk { inset: auto; padding-top: 38px; }
}