@font-face { font-family: Dogica; src: url(fonts/dogicapixel.ttf) format("truetype"); font-display: swap; }
  @font-face { font-family: Dogica; src: url(fonts/dogicapixelbold.ttf) format("truetype"); font-weight: bold; font-display: swap; }

  /* Palette from Muck95 (light/dark pairs), accent #00699B */
  :root {
    --accent: #00699b; --accent-hi: #1a8fc4;
    --face: #c0c0c0; --hi: #fff; --lite: #dfdfdf; --shade: #808080; --dark: #000;
    --text: #000; --dim: #505050; --field: #fff;
    --desk-a: #e9eef2; --desk-b: #c9d3db; --glow: rgba(0, 105, 155, .18); --desk-text: #0d1114;
    --glass: rgba(192, 192, 192, .78);
    --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%2300699b' d='M6 0h1v1H6zM5 1h2v1H5zM0 2h1v1H0zM4 2h3v1H4zM0 3h2v1H0zM3 3h3v1H3zM0 4h5v1H0zM1 5h3v1H1zM2 6h1v1H2z'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --accent-hi: #3aa8dc;
      --face: #3a3a3a; --hi: #6a6a6a; --lite: #4e4e4e; --shade: #202020; --dark: #000;
      --text: #e8e8e8; --dim: #9a9a9a; --field: #262626;
      --desk-a: #12171c; --desk-b: #07090b; --glow: rgba(0, 105, 155, .35); --desk-text: #e8e8e8;
      --glass: rgba(58, 58, 58, .78);
      --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%233aa8dc' d='M6 0h1v1H6zM5 1h2v1H5zM0 2h1v1H0zM4 2h3v1H4zM0 3h2v1H0zM3 3h3v1H3zM0 4h5v1H0zM1 5h3v1H1zM2 6h1v1H2z'/%3E%3C/svg%3E");
    }
    .logo { filter: invert(1); }
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 16px; }
  body {
    margin: 0; padding: 0 16px 80px; min-height: 100vh; color: var(--desk-text);
    background:
      radial-gradient(900px 500px at 85% -10%, var(--glow), transparent 70%),
      radial-gradient(700px 400px at -10% 40%, var(--glow), transparent 70%),
      linear-gradient(180deg, var(--desk-a), var(--desk-b)) fixed;
    font: 12px/2 Dogica, ui-monospace, monospace;
    -webkit-font-smoothing: none; font-smooth: never;
  }
  a { color: var(--accent-hi); }
  h1, h2, h3 { margin: 0 0 .6em; line-height: 1.4; font-weight: bold; }
  h2 { font-size: 16px; }
  p { margin: 0 0 1em; }

  /* 95 bevels */
  .raised { background: var(--face); box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--hi), inset -2px -2px var(--shade), inset 2px 2px var(--lite); }
  .sunken { background: var(--field); box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shade), inset -2px -2px var(--lite), inset 2px 2px var(--dark); }

  .wrap { max-width: 1040px; margin: 0 auto; }

  /* Modern hero, straight on the desktop */
  .hero { padding: 72px 0 56px; }
  .logo { image-rendering: pixelated; width: 100%; max-width: 570px; height: auto; display: block; margin-bottom: 40px; }
  .hero h1 { font-size: clamp(20px, 4.4vw, 40px); line-height: 1.5; max-width: 22ch; }
  .hero h1 em { font-style: normal; color: var(--accent-hi); }
  .hero p { font-size: 13px; max-width: 56ch; color: var(--desk-text); opacity: .8; margin-bottom: 28px; }

  .btn {
    display: inline-block; padding: 12px 20px; color: var(--text); text-decoration: none;
    font: bold 12px/1.4 Dogica, monospace; border: 0; cursor: pointer;
  }
  .btn.go { background: var(--accent); color: #fff; box-shadow: inset -1px -1px var(--dark), inset 1px 1px #4fb4e6, inset -2px -2px #00405f, inset 2px 2px #2a8ab8; }
  .btn:active { box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--dark), inset -2px -2px var(--lite), inset 2px 2px var(--shade); }
  .btn:focus-visible { outline: 1px dotted currentColor; outline-offset: -6px; }
  .row { display: flex; flex-wrap: wrap; gap: 12px; }

  /* Windows, with a modern drop shadow */
  .win { padding: 3px; color: var(--text); margin-bottom: 32px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.28)); }
  .bar {
    display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hi)); color: #fff; font-weight: bold;
  }
  .bar span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .bar button { width: 22px; height: 20px; padding: 0; border: 0; color: var(--text); font: bold 10px/1 Dogica, monospace; cursor: pointer; }
  .win.min .body { display: none; }
  .body { padding: 22px; }

  .grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .projects { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  /* Subgrid: tag, title, text, snapshot, address and button share rows across cards, so they line up */
  .project { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; justify-items: start; padding: 18px; }
  .project h3 { font-size: 14px; margin: 4px 0 8px; }
  .project .addr { justify-self: stretch; align-self: stretch; margin-bottom: 14px; font-size: 10px; color: var(--text); text-decoration: none; white-space: normal; overflow-wrap: anywhere; }
  .project .addr:hover { color: var(--accent-hi); }
  .snap { display: block; justify-self: stretch; align-self: start; aspect-ratio: 16 / 10; padding: 4px; margin-bottom: 8px; overflow: hidden; }
  .snap img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .snap:hover img { filter: brightness(1.08); }
  .play-tile { display: grid; place-items: center; text-decoration: none; color: #fff; font-weight: bold;
    background: radial-gradient(circle at 50% 40%, #2a3a48, #0b0e12 70%); }
  .wip { position: relative; }
  .wip img { filter: grayscale(.6) brightness(.7); }
  .tape {
    position: absolute; left: -10%; right: -10%; top: 50%; transform: translateY(-50%) rotate(-8deg);
    padding: 8px 0; text-align: center; font-weight: bold; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: #000; background: #ffd400; box-shadow: 0 4px 10px rgba(0,0,0,.4);
    border-block: 6px solid; border-image: repeating-linear-gradient(45deg, #111 0 8px, #ffd400 8px 16px) 6;
  }
  .btn.off { color: var(--dim); cursor: default; }
  .btn.off:active { box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--hi), inset -2px -2px var(--shade), inset 2px 2px var(--lite); }
  .logo-tile { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #134a5e, #0b3141 70%); }
  .snap.logo-tile img { width: 80%; height: auto; object-fit: contain; }
  .play-tile span { padding: 10px 16px; background: var(--accent); box-shadow: inset -1px -1px #000, inset 1px 1px #4fb4e6, inset -2px -2px #00405f, inset 2px 2px #2a8ab8; }
  .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-hi); }
  .grid .win { margin: 0; }
  .grid .win.min { align-self: start; }
  .icon { width: 32px; height: 32px; image-rendering: pixelated; margin-bottom: 10px; display: block; }

  .progress { height: 28px; padding: 5px; margin: 4px 0 22px; }
  .progress i {
    display: block; height: 100%; width: 0;
    background: repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 15px);
    animation: load 3s steps(24) forwards;
  }
  @keyframes load { to { width: 100%; } }
  @media (prefers-reduced-motion: reduce) { .progress i { animation: none; width: 100%; } html { scroll-behavior: auto; } }
  ol.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  ol.steps li { counter-increment: s; padding: 16px; }
  ol.steps li::before { content: "0" counter(s); display: block; font-weight: bold; font-size: 20px; color: var(--accent-hi); margin-bottom: 8px; }
  ol.steps b { display: block; margin-bottom: 6px; }

  .addr { display: flex; gap: 10px; padding: 8px 10px; margin-bottom: 18px; overflow: hidden; white-space: nowrap; }
  .addr span { color: var(--dim); flex: none; }
  .end { justify-content: flex-end; margin-top: 18px; }

  /* Taskbar: 95 bevels, modern frosted glass */
  .taskbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 4px; padding: 4px;
    background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: inset 0 1px var(--lite), inset 0 2px var(--hi);
  }
  .taskbar .btn { padding: 7px 10px; font-size: 10px; font-weight: normal; }
  .taskbar .start { font-weight: bold; display: flex; align-items: center; gap: 6px; }
  .drop { width: 18px; height: 18px; image-rendering: pixelated; }
  .tasks { display: flex; gap: 4px; flex: 1; overflow: hidden; }
  .clock { padding: 7px 12px; font-size: 10px; background: transparent; }

  @media (max-width: 640px) {
    body { font-size: 11px; }
    .hero { padding: 40px 0 36px; }
    .hero p { font-size: 11px; }
    .body { padding: 16px; }
    .tasks { display: none; }
    .taskbar { justify-content: space-between; }
  }

  /* Form */
  .form .body { display: grid; gap: 20px; }
  fieldset { border: 0; margin: 0; padding: 22px 16px 16px; display: grid; gap: 14px; min-width: 0;
    box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shade), inset -2px -2px var(--shade), inset 2px 2px var(--hi); }
  legend { padding: 0 8px; font-weight: bold; color: var(--accent-hi); }
  label { display: grid; gap: 6px; }
  .req::after { content: " *"; color: var(--accent-hi); }
  input:not([type=radio]):not([type=checkbox]), select, textarea {
    width: 100%; padding: 9px 10px; border: 0; border-radius: 0; color: var(--text); background: var(--field);
    font: 12px/1.6 Dogica, monospace;
    box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shade), inset -2px -2px var(--lite), inset 2px 2px var(--dark);
  }
  textarea { min-height: 110px; resize: vertical; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px dotted var(--accent-hi); outline-offset: 2px; }
  .choices { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 8px; }
  .choices label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
  /* 95 checkboxes and radios: sunken box, pixel tick, dot */
  input[type=radio], input[type=checkbox] {
    appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer;
    background: var(--field) no-repeat center / 14px;
    box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shade), inset -2px -2px var(--lite), inset 2px 2px var(--dark);
  }
  input[type=radio] { border-radius: 50%; }
  input[type=checkbox]:checked { background-image: var(--tick); }
  input[type=radio]:checked { background-image: radial-gradient(circle, var(--accent-hi) 0 4px, transparent 4.5px); }
  input[type=radio]:focus-visible, input[type=checkbox]:focus-visible { outline: 1px dotted var(--text); outline-offset: 3px; }
  label:has(> input:checked) { color: var(--accent-hi); }
  .two { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .hint { color: var(--dim); font-size: 10px; }
  .hp { position: absolute; left: -9999px; }
  .back { display: inline-block; margin: 32px 0 20px; color: var(--desk-text); }

  /* Site footer: copyright + Trustpilot */
  .site-foot { max-width: 1040px; margin: 8px auto 0; padding: 20px 0 8px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
    font-size: 10px; color: var(--desk-text); opacity: .85; border-top: 1px solid color-mix(in srgb, var(--desk-text) 20%, transparent); }
  .site-foot a { color: var(--accent-hi); }

  /* Reviews */
  .reviews { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 6px; }
  .review { margin: 0; padding: 18px; display: grid; gap: 10px; align-content: start; }
  .review .stars { color: #e0a000; font-size: 16px; letter-spacing: .15em; }
  .review blockquote { margin: 0; }
  .review figcaption { font-weight: bold; }
  .review figcaption span { font-weight: normal; color: var(--dim); }
  .review.empty { grid-column: 1 / -1; text-align: center; justify-items: center; color: var(--dim); }
  .review.empty .stars { color: var(--dim); }