/* ==========================================================
   aiyuda: a website that is a desktop.
   Platinum window chrome + neumorphic surfaces + macOS behavior.
   ========================================================== */

:root {
  --bg: #e4e1d9;
  --bg-hi: #fffffb;
  --bg-lo: #bdb9ae;
  --panel: #ebe8e1;
  --ink: #1d1a24;
  --muted: #655f70;
  --line: #9c978b;
  --purple: #7a4bbd;
  --purple-d: #5b3592;
  --lilac: #d9c8f2;
  --yellow: #f8d84a;
  --orange: #f5a623;
  --green: #12873d;

  --raise: 8px 8px 18px var(--bg-lo), -8px -8px 18px var(--bg-hi);
  --raise-sm: 4px 4px 9px var(--bg-lo), -4px -4px 9px var(--bg-hi);
  --inset: inset 4px 4px 9px var(--bg-lo), inset -4px -4px 9px var(--bg-hi);

  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-body: "DM Sans", system-ui, sans-serif;
  --f-ui: "Pixelify Sans", "Chicago", monospace;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-hand: "Caveat", cursive;

  --menubar-h: 36px;
  --dock-reserve: 136px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(29, 26, 36, .07) 1px, transparent 1.2px),
    radial-gradient(rgba(29, 26, 36, .045) 1px, transparent 1.2px);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
  user-select: none;
}
.win__body, .form, input, textarea { user-select: text; }
svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.linklike { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--purple-d); text-decoration: underline; cursor: pointer; }

/* ---------- Menu bar ---------- */
.menubar {
  position: fixed; inset: 0 0 auto 0; z-index: 9500;
  display: flex; justify-content: space-between; align-items: center;
  height: var(--menubar-h); padding: 0 6px;
  background: linear-gradient(#f4f2ec, #dad7ce);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(29, 26, 36, .12);
  font-family: var(--f-ui); font-size: 15px;
}
.menubar__left { display: flex; align-items: center; height: 100%; }
.menubar__right { display: flex; align-items: center; gap: 18px; padding-right: 8px; }
.menu { position: relative; height: 100%; }
.menu-item {
  appearance: none; border: 0; background: none; cursor: default;
  font: inherit; height: 100%; padding: 0 14px; gap: 7px; display: inline-flex; align-items: center; white-space: nowrap;
}
.menu-item--bold { font-weight: 700; }
.menu-item:hover, .menu-item[aria-expanded="true"] { background: var(--ink); color: #fff; }
.menu-pop {
  position: absolute; top: 100%; left: 0; min-width: 230px; padding: 5px;
  background: #f4f2ec; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px;
  box-shadow: 8px 10px 22px rgba(29, 26, 36, .22);
  font-family: var(--f-ui); font-size: 15px;
}
.menu-pop button {
  display: flex; justify-content: space-between; gap: 18px; width: 100%; padding: 6px 12px 6px 22px; position: relative;
  appearance: none; background: none; border: 0; border-radius: 6px; text-align: left; cursor: default;
}
.menu-pop button:hover:not(:disabled) { background: var(--purple); color: #fff; }
.menu-pop button:disabled { color: #a6a199; }
.menu-pop button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 7px; }
.menu-pop .kbd { opacity: .6; font: 400 12px var(--f-mono); align-self: center; }
.menu-pop button:hover:not(:disabled) .kbd { opacity: .9; }
.menu-pop hr { border: 0; border-top: 1px solid #cfcbc1; margin: 5px 4px; }
.menubar__status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(18, 135, 61, .2); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(18, 135, 61, 0); } }
.clock { font: 500 14px var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------- Desktop ---------- */
.desktop { position: fixed; inset: var(--menubar-h) 0 0 0; overflow: hidden; }

/* Icons are placed (and dragged) by script.js; they start in columns down the right edge. */
.icons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.icons .icon { position: absolute; top: 0; left: 0; pointer-events: auto; touch-action: none; }
.icons:not(.is-placed) .icon { visibility: hidden; }
.icon.is-moving { z-index: 2; opacity: .85; cursor: grabbing; }
.icon.is-moving svg { transform: scale(1.06); transition: none; }
.icon {
  appearance: none; background: none; border: 0; cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: 112px; padding: 4px 4px 6px;
  border-radius: 10px; font: 500 13px/1.25 var(--f-body); text-align: center;
}
.icon svg {
  width: 68px; height: 68px; overflow: visible;
  filter: drop-shadow(5px 6px 5px rgba(110, 101, 85, .24)) drop-shadow(-4px -4px 5px rgba(255, 255, 251, .9));
  will-change: transform; transition: transform .16s ease-out; /* transform only: animating the drop-shadow filter makes the icons shimmer */
}
.icon span { padding: 2px 8px; border-radius: 99px; }
html:not([data-theme="90s"]) .icon:hover svg { transform: translateY(-3px); }
html:not([data-theme="90s"]) .icon.is-selected svg {
  filter: drop-shadow(2px 4px 3px rgba(29, 26, 36, .24)) drop-shadow(7px 14px 9px rgba(29, 26, 36, .16)) drop-shadow(0 0 9px rgba(122, 75, 189, .65));
}
html:not([data-theme="90s"]) .icon:active svg { transform: translateY(1px) scale(.97); }
.icon.is-selected span, .icon:focus-visible span { background: var(--purple); color: #fff; box-shadow: 2px 3px 8px rgba(91, 53, 146, .35); }
.icon:focus-visible { outline: none; }

/* ---------- Windows ---------- */
.win {
  position: absolute; z-index: 10;
  display: flex; flex-direction: column;
  max-width: calc(100% - 16px);
  max-height: calc(100% - var(--dock-reserve) - 8px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 4px 4px 10px var(--bg-lo), -3px -3px 8px var(--bg-hi);
  overflow: hidden;
  transition: box-shadow .18s;
}
.win.is-active { box-shadow: 14px 16px 34px rgba(29, 26, 36, .24), -8px -8px 18px var(--bg-hi); }
.win.is-opening { animation: openwin .22s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes openwin { from { scale: .94; opacity: 0; } }
.win.is-zoomed { max-height: none; max-width: none; }
.win.is-flash { animation: flash .5s ease-out; }
@keyframes flash { 25% { box-shadow: 0 0 0 4px var(--purple), 14px 16px 34px rgba(29, 26, 36, .24); } }

.titlebar {
  position: relative; flex: none;
  height: 30px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, #f5f3ed 0 2px, #cfccc2 2px 3px);
  font-family: var(--f-ui); font-size: 15px; user-select: none; cursor: default; touch-action: none;
}
.win:not(.is-active) .titlebar { background: #e9e6de; color: #8b8696; }
.titlebar__title { background: var(--panel); padding: 0 12px; position: relative; z-index: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.win:not(.is-active) .titlebar__title { background: #e9e6de; }
.closebox, .zoombox {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 14px; height: 14px; padding: 0; cursor: pointer;
  border: 1px solid var(--ink); background: #f3f1ea;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--bg-lo);
}
.closebox { left: 10px; }
.zoombox { right: 10px; }
.closebox::before, .closebox::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--ink);
  translate: -50% -50%; rotate: 45deg;
}
.closebox::after { rotate: -45deg; }
.zoombox::after { content: ""; position: absolute; inset: 2px 5px 5px 2px; border: 1px solid var(--ink); }
.closebox:active, .zoombox:active { background: var(--bg-lo); box-shadow: none; }
.win:not(.is-active) .closebox, .win:not(.is-active) .zoombox { opacity: .45; }

.win__body { padding: 28px; overflow: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; container-type: inline-size; }
.win.is-shaded .win__body { display: none; }
.win.is-shaded .titlebar { border-bottom: 0; }
.win.is-dragging { transition: none; }
.win.is-dragging .titlebar { cursor: grabbing; }
.win__head { margin-bottom: 26px; }
.win__head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; }
.win__head p { margin: 12px 0 0; color: var(--muted); }
.scribble { background: linear-gradient(transparent 62%, var(--yellow) 62% 92%, transparent 92%); padding: 0 .12em; }

/* Stickies */
.win--sticky { background: #fff3a3; border-color: #d3b92f; border-radius: 6px; rotate: 1.5deg; }
.win--sticky .titlebar { background: repeating-linear-gradient(to bottom, #fbe97c 0 2px, #e6cf4b 2px 3px); border-color: #d3b92f; height: 24px; }
.win--sticky:not(.is-active) .titlebar { background: #f2e07a; }
.win--sticky .titlebar__title, .win--sticky:not(.is-active) .titlebar__title { background: #fff3a3; font-size: 13px; }
.win--sticky .win__body { padding: 16px 18px 6px; font: 600 1.45rem/1.15 var(--f-hand); color: #3b3320; background: #fff3a3; }
.win--sticky .linklike { color: var(--purple-d); font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  font: 700 1rem var(--f-body); color: var(--ink);
  padding: 14px 24px; border-radius: 14px;
  border: 1px solid rgba(29, 26, 36, .18);
  background: linear-gradient(145deg, #f2f0ea, #dedbd2);
  box-shadow: var(--raise-sm);
  transition: box-shadow .12s, transform .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { box-shadow: var(--inset); transform: translateY(0); }
.btn--primary {
  color: #fff; background: linear-gradient(145deg, #8d5fd1, #653a9f); border-color: var(--purple-d);
  box-shadow: 4px 4px 10px rgba(91, 53, 146, .38), -4px -4px 9px var(--bg-hi), inset 1px 1px 0 rgba(255, 255, 255, .35);
}
.btn--primary:active { box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .35); }
.btn--small { padding: 9px 16px; font-size: .92rem; margin-top: 6px; }

/* ---------- Welcome ---------- */
.welcome { padding: 34px 38px 38px; }
.wordmark { display: block; width: min(340px, 86%); height: auto; margin: -6px 0 18px -6px; overflow: visible; }
.welcome h1 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); font-weight: 800; margin-bottom: 20px; }
.welcome h1 mark { background: linear-gradient(transparent 58%, var(--lilac) 58% 94%, transparent 94%); color: inherit; padding: 0 .06em; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 54ch; margin-bottom: 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.cta-note { display: flex; align-items: flex-end; gap: 4px; margin: -2px 0 6px 56px; color: var(--purple-d); }
.cta-note svg { width: 54px; rotate: 180deg; scale: 1 -1; flex: none; }
.cta-note span { font: 700 1.5rem/1 var(--f-hand); rotate: -3deg; padding-bottom: 4px; white-space: nowrap; }
.fineprint { font-size: .9rem; color: var(--muted); margin: 0; }

/* ---------- Cards / services ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 6px; }
.card {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 22px 24px; border-radius: 20px; background: var(--bg); box-shadow: var(--raise-sm);
  border: 1px solid rgba(29, 26, 36, .06);
}
.card--wide { grid-column: span 2; }
.card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 14px; }
.card p { color: var(--muted); font-size: .97rem; }
.card .btn { align-self: flex-start; margin-top: auto; }
.card--featured { background: linear-gradient(160deg, #f3ecfb, var(--lilac)); border-color: rgba(122, 75, 189, .4); }
.card .price { font: 800 1.85rem/1.05 var(--f-display); color: var(--ink); margin: 0 0 2px; letter-spacing: -.03em; }
.price small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.card .price__note { font: 400 .78rem var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.badge {
  position: absolute; top: -12px; right: 16px; rotate: 3deg;
  font: 700 .8rem var(--f-ui); padding: 4px 11px; border-radius: 99px;
  background: var(--yellow); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.badge--free { background: #bdeccb; }
.badge--alt { background: var(--lilac); }
.sticker {
  display: inline-block; margin: 30px 0 0; padding: 6px 14px; rotate: -1.5deg;
  font: 700 1.35rem var(--f-hand); color: var(--purple-d);
  border: 2px dashed var(--purple); border-radius: 10px; background: rgba(217, 200, 242, .4);
}

/* ---------- Steps ---------- */
.progress { height: 24px; padding: 4px; border-radius: 8px; background: var(--bg); box-shadow: var(--inset); border: 1px solid var(--line); margin-bottom: 30px; }
.progress__bar {
  height: 100%; width: 62%; border-radius: 4px; border: 1px solid var(--purple-d);
  background: repeating-linear-gradient(135deg, var(--purple) 0 10px, #9569d3 10px 20px);
  background-size: 28px 28px; animation: barber 1.2s linear infinite;
}
@keyframes barber { to { background-position: 28px 0; } }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.steps h3 { font-size: 1.1rem; margin: 12px 0 8px; font-weight: 700; }
.steps p { font-size: .94rem; color: var(--muted); margin: 0; }
.steps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 800 1.2rem var(--f-display); color: var(--purple-d); background: var(--bg); box-shadow: var(--raise-sm); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.readme { font-family: var(--f-mono); font-size: .92rem; line-height: 1.6; background: #fffefa; padding: 22px; border-radius: 14px; box-shadow: var(--inset); }
.readme p { margin-bottom: .9em; }
.ticks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; border-radius: 5px;
  background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.7 2.7L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 2px 2px 4px var(--bg-lo);
}
.people { display: grid; gap: 20px; }
.person { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; padding: 20px; border-radius: 20px; background: var(--bg); box-shadow: var(--raise-sm); }
.person h3 { font-size: 1.15rem; font-weight: 700; }
.person p { color: var(--muted); font-size: .94rem; margin-bottom: 0; }
.role { font: 500 .76rem var(--f-mono) !important; text-transform: uppercase; letter-spacing: .06em; color: var(--purple-d) !important; margin: 3px 0 8px !important; }
.avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; font: 800 1.8rem var(--f-display); color: #fff; box-shadow: var(--inset), inset 0 0 0 5px var(--bg); }
.avatar--t { background: var(--purple); }
.avatar--a { background: var(--orange); }
.avatar--p { background: var(--green); font-family: var(--f-ui); }
.person--pilot { border: 2px dashed var(--line); background: transparent; box-shadow: none; }

/* ---------- Form ---------- */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
label, legend { font-weight: 700; padding: 0; }
legend { margin-bottom: 10px; }
small { font-weight: 400; color: var(--muted); }
input, select, textarea {
  width: 100%; font: 500 1rem var(--f-body); color: var(--ink);
  padding: 14px 16px; border: 1px solid transparent; border-radius: 14px; background: var(--bg); box-shadow: var(--inset);
}
input::placeholder, textarea::placeholder { color: #9a95a3; }
textarea { resize: vertical; }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); translate: 0 -75%; rotate: 45deg; pointer-events: none; }
select { appearance: none; padding-right: 44px; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.chip span { display: inline-block; padding: 10px 16px; border-radius: 99px; font-weight: 500; font-size: .95rem; background: var(--bg); box-shadow: var(--raise-sm); transition: box-shadow .12s; }
.chip input:checked + span { box-shadow: var(--inset); color: var(--purple-d); font-weight: 700; background: #e4daf3; }
.chip input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }
.cond { animation: pop .3s ease both; }
@keyframes pop { from { opacity: 0; translate: 0 8px; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { color: #b3261e; font-weight: 700; margin: 0; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ---------- Dock ---------- */
.dock {
  position: fixed; left: 50%; bottom: 14px; translate: -50% 0; z-index: 9000;
  display: flex; align-items: flex-end; gap: 14px; padding: 14px 18px 12px;
  border-radius: 30px; background: var(--bg);
  border: 1px solid rgba(29, 26, 36, .05);
  box-shadow: inset 7px 7px 14px var(--bg-lo), inset -7px -7px 14px var(--bg-hi), 0 18px 30px -18px rgba(29, 26, 36, .25);
}
.dock__item {
  position: relative; display: grid; justify-items: center; gap: 5px;
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.dock__tile {
  display: grid; place-items: center; width: 62px; height: 62px;
  transform-origin: 50% 100%; will-change: transform;
}
.dock__tile svg {
  width: 100%; height: 100%;
  filter: drop-shadow(5px 6px 5px rgba(110, 101, 85, .24)) drop-shadow(-4px -4px 5px rgba(255, 255, 251, .9));
}
html:not([data-theme="90s"]) .dock__item:active .dock__tile { translate: 0 2px; }
.dock__dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.dock__item.is-open .dock__dot { background: var(--purple); box-shadow: 0 0 6px rgba(122, 75, 189, .7); }
.dock__item::after {
  content: attr(data-label); position: absolute; bottom: calc(100% + 18px); left: 50%; translate: -50% 4px; opacity: 0; pointer-events: none;
  padding: 4px 10px; border-radius: 8px; background: var(--ink); color: #fff; font: 500 14px var(--f-ui); white-space: nowrap;
  transition: opacity .12s, translate .12s;
}
.dock__item:hover::after, .dock__item:focus-visible::after { opacity: 1; translate: -50% 0; }
.dock__sep { width: 3px; align-self: stretch; margin: 8px 0 12px; border-radius: 3px; box-shadow: inset 1px 1px 2px var(--bg-lo), inset -1px -1px 2px var(--bg-hi); }


/* Layouts follow the window's width, so resizing a window reflows its content. */
@container (max-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@container (max-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
}
@container (max-width: 540px) { .field-row { grid-template-columns: 1fr; } .steps { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 440px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
}

/* ---------- Resize handles ---------- */
.rz { position: absolute; z-index: 4; touch-action: none; }
.rz-e { top: 30px; right: 0; bottom: 18px; width: 5px; cursor: ew-resize; }
.rz-s { left: 0; right: 18px; bottom: 0; height: 6px; cursor: ns-resize; }
.rz-se { right: 0; bottom: 0; width: 20px; height: 20px; cursor: nwse-resize; }
.rz-se::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; opacity: .55; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 3px, var(--ink) 3px 4px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.win.is-resized { max-width: none; max-height: none; }
.win.is-resizing { transition: none; user-select: none; }
.win.is-shaded .rz, .win.is-zoomed .rz { display: none; }

/* ---------- Dialog ---------- */
.backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(29, 26, 36, .35); backdrop-filter: blur(2px); }
.dialog {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; width: min(460px, 100%); padding: 26px;
  background: var(--panel); border: 1px solid var(--ink); border-radius: 14px;
  box-shadow: 0 0 0 5px var(--panel), 0 0 0 6px var(--ink), 14px 18px 0 rgba(29, 26, 36, .25);
  animation: drop .25s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes drop { from { scale: .9; opacity: 0; } }
.dialog__icon { width: 56px; }
.dialog h3 { font-size: 1.25rem; margin-bottom: 8px; }
.dialog p { margin: 0; color: var(--muted); font-size: .98rem; }
.dialog__ok { grid-column: 2; justify-self: end; margin-top: 4px; min-width: 96px; }

/* ==========================================================
   Theme: 1996
   Flat Platinum / System 7 chrome, bevels, hard shadows,
   a control strip instead of a dock, and some web 1.0 charm.
   Switch from the N menu, or add ?theme=90s to the URL.
   ========================================================== */
.only-90s { display: none; }

html[data-theme="90s"] {
  --bg: #dcdcdc; --panel: #dcdcdc; --bg-hi: #fff; --bg-lo: #7d7d7d;
  --ink: #000; --muted: #333; --line: #000;
  --purple: #7a4bbd; --lilac: #e4d9f7; --yellow: #ffff00;
  --raise: 0 0 0 1px #000, inset 1px 1px 0 #fff, inset -1px -1px 0 #7d7d7d;
  --raise-sm: 0 0 0 1px #000, inset 1px 1px 0 #fff, inset -1px -1px 0 #7d7d7d;
  --inset: 0 0 0 1px #000, inset 1px 1px 0 #7d7d7d, inset 2px 2px 0 #000;
  --f-display: "Pixelify Sans", "Chicago", monospace;
  --f-body: Verdana, Geneva, "DM Sans", sans-serif;
}
html[data-theme="90s"] body {
  font-size: 15px;
  background: repeating-conic-gradient(#c3b0ea 0 25%, #d8cbf4 0 50%) 0 0 / 4px 4px;
}
html[data-theme="90s"] * { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; }
html[data-theme="90s"] h1, html[data-theme="90s"] h2, html[data-theme="90s"] h3 { letter-spacing: 0; font-weight: 700; line-height: 1.15; }
html[data-theme="90s"] a, html[data-theme="90s"] .linklike { color: #0000ee; }

/* menu bar */
html[data-theme="90s"] .menubar { background: #fff; border-bottom: 1px solid #000; box-shadow: none; }
html[data-theme="90s"] .menu-pop { background: #fff; border: 1px solid #000; border-radius: 0; box-shadow: 3px 3px 0 #000; }
html[data-theme="90s"] .menu-pop button { border-radius: 0; }
html[data-theme="90s"] .menu-pop button:hover:not(:disabled) { background: #000; }
html[data-theme="90s"] .menu-pop hr { border-top: 1px dotted #000; }
html[data-theme="90s"] .menubar__status { width: 210px; overflow: hidden; white-space: nowrap; color: #000; }
html[data-theme="90s"] .menubar__status .dot { display: none; }
html[data-theme="90s"] .status-text { display: inline-block; padding-left: 100%; animation: marquee 9s linear infinite; }
html[data-theme="90s"] .status-text::before { content: "\2605  "; }
html[data-theme="90s"] .status-text::after { content: "  \2605  Book a free call  \2605"; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* windows */
html[data-theme="90s"] .win { border-radius: 0; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, .45); }
html[data-theme="90s"] .win.is-active { box-shadow: 4px 4px 0 #000; }
html[data-theme="90s"] .titlebar { height: 23px; border-bottom: 1px solid #000; background: repeating-linear-gradient(to bottom, #000 0 1px, #fff 1px 3px); }
html[data-theme="90s"] .win:not(.is-active) .titlebar { background: #fff; color: #777; }
html[data-theme="90s"] .titlebar__title, html[data-theme="90s"] .win:not(.is-active) .titlebar__title { background: #fff; padding: 0 10px; }
html[data-theme="90s"] .closebox, html[data-theme="90s"] .zoombox { width: 13px; height: 13px; background: #fff; box-shadow: none; border-radius: 0; }
html[data-theme="90s"] .closebox:active, html[data-theme="90s"] .zoombox:active { background: #bbb; }
html[data-theme="90s"] .win--sticky { rotate: none; background: #ffff99; border-color: #000; }
html[data-theme="90s"] .win--sticky .titlebar { background: repeating-linear-gradient(to bottom, #000 0 1px, #ffff99 1px 3px); height: 20px; }
html[data-theme="90s"] .win--sticky .titlebar__title, html[data-theme="90s"] .win--sticky:not(.is-active) .titlebar__title,
html[data-theme="90s"] .win--sticky .win__body { background: #ffff99; }
html[data-theme="90s"] .win--sticky .win__body { font-size: 1.4rem; }

/* desktop + icons */
html[data-theme="90s"] .icon { font-size: 13px; }
html[data-theme="90s"] .icon svg { filter: none; width: 46px; height: 46px; }
html[data-theme="90s"] .icon span { background: #fff; border-radius: 0; box-shadow: none; padding: 1px 5px; border: 1px solid transparent; }
html[data-theme="90s"] .icon.is-selected span, html[data-theme="90s"] .icon:focus-visible span { background: #000; color: #fff; }

/* buttons */
html[data-theme="90s"] .btn {
  border: 1px solid #000; border-radius: 6px; background: #dcdcdc; color: #000; transform: none;
  font: 700 15px var(--f-ui); padding: 9px 20px;
  box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #7d7d7d;
}
html[data-theme="90s"] .btn:active { background: #bbb; box-shadow: inset 2px 2px 0 #7d7d7d; }
html[data-theme="90s"] .btn--primary { background: #dcdcdc; color: #000; margin: 4px; box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #7d7d7d, 0 0 0 2px #dcdcdc, 0 0 0 4px #000; }
html[data-theme="90s"] .btn--small { margin-top: 6px; padding: 6px 14px; }

/* welcome */
html[data-theme="90s"] .welcome h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
html[data-theme="90s"] .welcome h1 mark, html[data-theme="90s"] .scribble { background: #ffff00; padding: 0 4px; }
html[data-theme="90s"] .cta-note { color: #c00000; }
html[data-theme="90s"] .only-90s { display: block; }
html[data-theme="90s"] .only-90s.inline { display: inline-block; }
.retro-footer { margin-top: 22px; padding-top: 16px; border-top: 2px dotted #000; }
.b88s { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.b88 {
  display: grid; place-items: center; width: 88px; height: 31px; padding: 0 4px; text-align: center;
  font: 700 9.5px/1.05 Verdana, Geneva, sans-serif; border: 1px solid #000; color: #fff;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), inset -1px -1px 0 rgba(0, 0, 0, .4);
}
.b88--a { background: linear-gradient(#3b66d9, #1b3a9e); }
.b88--b { background: linear-gradient(#444, #000); }
.b88--c { background: linear-gradient(#e0412f, #9e1b0e); }
.counter { font: 12px Verdana, Geneva, sans-serif; margin: 0; color: #000; }
.counter__digits { display: inline-block; padding: 1px 5px; background: #000; color: #0f0; font: 700 13px var(--f-mono); letter-spacing: .12em; }
.new90 { font: 700 .72rem Verdana, sans-serif; color: #fff; background: #e00; padding: 1px 5px; vertical-align: middle; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* cards, steps, about, form */
html[data-theme="90s"] .win__head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
html[data-theme="90s"] .card { background: #fff; border: 1px solid #000; border-radius: 0; box-shadow: 3px 3px 0 #000; }
html[data-theme="90s"] .card--featured { background: #ffffcc; border-color: #000; }
html[data-theme="90s"] .card .price { font-family: Verdana, Geneva, sans-serif; letter-spacing: 0; }
html[data-theme="90s"] .badge { border-radius: 0; box-shadow: 2px 2px 0 #000; rotate: none; font-family: Verdana, sans-serif; font-size: .7rem; }
html[data-theme="90s"] .badge--free { background: #66ff66; }
html[data-theme="90s"] .badge--alt { background: #99ccff; }
html[data-theme="90s"] .sticker {
  rotate: none; border-radius: 0; background: #ffff99; color: #000; font: 700 12px Verdana, sans-serif; text-transform: uppercase; letter-spacing: .04em;
  border: 5px solid; border-image: repeating-linear-gradient(45deg, #000 0 9px, #ffd400 9px 18px) 5;
}
html[data-theme="90s"] .progress { border-radius: 0; background: #fff; box-shadow: none; border: 1px solid #000; padding: 2px; }
html[data-theme="90s"] .progress__bar { border-radius: 0; border: 0; background: repeating-linear-gradient(135deg, #1a3fd1 0 8px, #8fa8ff 8px 16px); background-size: 22.6px 22.6px; }
html[data-theme="90s"] .steps__n { font-family: Verdana, Geneva, sans-serif; border-radius: 0; background: #000; color: #fff; box-shadow: 3px 3px 0 #7d7d7d; }
html[data-theme="90s"] .readme { background: #fff; border: 1px solid #000; border-radius: 0; box-shadow: none; }
html[data-theme="90s"] .ticks li::before { border-radius: 0; box-shadow: none; }
html[data-theme="90s"] .person { background: #fff; border: 1px solid #000; border-radius: 0; box-shadow: 3px 3px 0 #000; }
html[data-theme="90s"] .person--pilot { background: #ffffcc; border: 1px dashed #000; box-shadow: none; }
html[data-theme="90s"] .avatar { border-radius: 0; box-shadow: inset 0 0 0 3px #fff; border: 1px solid #000; }
html[data-theme="90s"] input, html[data-theme="90s"] select, html[data-theme="90s"] textarea { background: #fff; border-radius: 0; border: 0; padding: 9px 10px; font-size: 15px; }
html[data-theme="90s"] .chip span { border-radius: 0; background: #dcdcdc; box-shadow: 0 0 0 1px #000, inset 1px 1px 0 #fff, inset -1px -1px 0 #7d7d7d; font-size: 14px; }
html[data-theme="90s"] .chip input:checked + span { background: #000; color: #fff; box-shadow: none; }
html[data-theme="90s"] .chip input:checked + span::before { content: "\2713 "; }
html[data-theme="90s"] .select-wrap::after { border-color: #000; }

/* dialog */
html[data-theme="90s"] .backdrop { backdrop-filter: none; background: rgba(0, 0, 0, .25); }
html[data-theme="90s"] .dialog { border-radius: 0; border: 1px solid #000; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000, 6px 6px 0 3px #000; }

/* classic scrollbars */
html[data-theme="90s"] .win__body::-webkit-scrollbar { width: 16px; height: 16px; }
html[data-theme="90s"] .win__body::-webkit-scrollbar-track { background: repeating-conic-gradient(#bbb 0 25%, #fff 0 50%) 0 0 / 2px 2px; border-left: 1px solid #000; }
html[data-theme="90s"] .win__body::-webkit-scrollbar-thumb { background: #dcdcdc; border: 1px solid #000; box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #7d7d7d; }

/* control strip */
html[data-theme="90s"] .dock {
  gap: 4px; padding: 4px 6px 4px 4px; border-radius: 0 10px 0 0;
  background: #dcdcdc; backdrop-filter: none; border: 1px solid #000; border-bottom: 0;
  box-shadow: inset 1px 1px 0 #fff, 3px -3px 0 rgba(0, 0, 0, .25);
}
@media (min-width: 761px) {
  html[data-theme="90s"] .dock { left: 0; bottom: 0; translate: none; border-left: 0; }
  html[data-theme="90s"] .dock__sep { margin: 4px 2px; background: #7d7d7d; }
}
html[data-theme="90s"] .dock__tile { width: 44px; height: 44px; padding: 5px; border-radius: 0; background: #dcdcdc; box-shadow: 0 0 0 1px #000, inset 1px 1px 0 #fff, inset -1px -1px 0 #7d7d7d; transform: none !important; }
html[data-theme="90s"] .dock__tile--cta { background: #c3b0ea; }
html[data-theme="90s"] .dock__item:active .dock__tile { box-shadow: 0 0 0 1px #000, inset 2px 2px 0 #7d7d7d; }
html[data-theme="90s"] .dock__dot { border-radius: 0; margin-top: 2px; }
html[data-theme="90s"] .dock__item.is-open .dock__dot { background: #12c33f; box-shadow: 0 0 0 1px #000; }
html[data-theme="90s"] .dock__tile svg { filter: none; }
html[data-theme="90s"] .icon:hover svg { transform: none; }
html[data-theme="90s"] .dock__sep { width: 1px; box-shadow: none; border-radius: 0; }
html[data-theme="90s"] .dock__item::after { border-radius: 0; background: #ffffcc; color: #000; border: 1px solid #000; font-family: Verdana, sans-serif; font-size: 11px; box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }


@media (min-width: 761px) and (max-height: 820px) {
  .icon { width: 96px; gap: 5px; }
  .icon svg { width: 46px; height: 46px; }
  html[data-theme="90s"] .icon svg { width: 46px; height: 46px; padding: 0; }
}

/* ---------- Links inside windows ---------- */
.win__body a { color: var(--purple-d); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.win__body a.btn { color: var(--ink); text-decoration: none; }
.win__body a.btn--primary { color: #fff; }

/* ---------- Menu bar search ---------- */
.menubar__search {
  appearance: none; border: 0; background: none; cursor: default; display: grid; place-items: center;
  width: 34px; height: 28px; border-radius: 6px; padding: 0;
}
.menubar__search svg { width: 17px; height: 17px; }
.menubar__search:hover { background: var(--ink); color: #fff; }

/* ---------- Services: what's included ---------- */
.incl { list-style: none; padding: 12px 0 0; margin: 0 0 18px; border-top: 1px dashed var(--line); display: grid; gap: 6px; font-size: .9rem; }
.incl li { position: relative; padding-left: 20px; line-height: 1.35; }
.incl li::before { content: "✓"; position: absolute; left: 0; color: var(--purple); font-weight: 700; }
.incl--cols { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.services__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-top: 30px; }
.services__foot .sticker { margin: 0; }
.morelinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .95rem; color: var(--muted); }
.readme__more { margin: 16px 0 0 !important; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ---------- Browser windows ---------- */
.win__body--flush { padding: 0; display: flex; flex-direction: column; }
.browser {
  display: grid; grid-template-columns: minmax(230px, 30%) 1fr; flex: 1 1 auto; min-height: 0;
  height: min(640px, calc(100vh - var(--menubar-h) - var(--dock-reserve) - 70px));
}
.win.is-zoomed .browser, .win.is-resized .browser { height: auto; }
.browser__side { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); background: #e6e3db; }
.browser__intro { margin: 0; padding: 18px 18px 14px; font-size: .9rem; line-height: 1.45; color: var(--muted); border-bottom: 1px solid #d3cfc5; }
.browser__list { list-style: none; margin: 0; padding: 8px; overflow: auto; flex: 1 1 auto; min-height: 0; display: grid; align-content: start; gap: 4px; }
.browser__item {
  appearance: none; width: 100%; text-align: left; cursor: pointer; border: 0; background: none;
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px;
}
.browser__item b { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.browser__item span { font: 400 .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.browser__item:hover { background: rgba(122, 75, 189, .08); }
.browser__item[aria-current="true"] { background: var(--purple); color: #fff; box-shadow: 2px 3px 8px rgba(91, 53, 146, .35); }
.browser__item[aria-current="true"] span { color: rgba(255, 255, 255, .8); }
.browser__status { margin: 0; padding: 7px 14px; font: 400 .74rem var(--f-mono); color: var(--muted); border-top: 1px solid #d3cfc5; text-align: center; }
.browser__view { overflow: auto; min-height: 0; min-width: 0; padding: 30px 36px 36px; overscroll-behavior: contain; user-select: text; outline: none; }
.browser__view > *, .doc__body > * { max-width: 68ch; }

.doc__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 500 .76rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--purple-d); }
.doc__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; margin-bottom: 12px; }
.doc__lede { font-size: 1.08rem; color: var(--muted); }
.doc__note { font-size: .88rem; padding: 8px 12px; border-radius: 10px; background: rgba(248, 216, 74, .35); border: 1px dashed #c9a700; }
.doc__body h4 { font: 700 1.08rem var(--f-display); margin: 24px 0 6px; }
.doc__body ol, .doc__body ul { padding-left: 1.3em; margin: 0 0 1em; display: grid; gap: 8px; }
.doc__body li::marker { color: var(--purple); font-weight: 700; }
.aside { font: 600 1.3rem/1.2 var(--f-hand); color: var(--purple-d); margin: 18px 0; }
.aside a { color: inherit; }
.doc__tip { font-size: .86rem; color: var(--muted); }
.doc__tip::before { content: "Tip: "; font-weight: 700; color: var(--ink); }
.tag { font: 700 .72rem var(--f-ui); text-transform: none; letter-spacing: 0; padding: 2px 9px; border-radius: 99px; border: 1.5px solid var(--ink); color: var(--ink); }
.tag--real { background: #bdeccb; }
.tag--pilot { background: var(--yellow); }
.tag--example { background: var(--lilac); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 18px 0 22px; padding: 0; }
.facts div { padding: 12px 14px; border-radius: 14px; background: var(--bg); box-shadow: var(--inset); }
.facts dt { font: 500 .7rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-weight: 700; font-size: .93rem; line-height: 1.35; }
.facts--tight { grid-template-columns: 1fr 1fr; }

.redact { background: var(--ink); color: var(--ink); border-radius: 2px; padding: 0 2px; cursor: help; letter-spacing: -.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; user-select: none; }

.prompt { margin: 18px 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fffefa; box-shadow: var(--raise-sm); }
.prompt__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, #f5f3ed 0 2px, #e3e0d7 2px 3px); font: 500 13px var(--f-ui); }
.prompt__bar .btn { margin: 0; }
.prompt__text { margin: 0; padding: 16px 18px; white-space: pre-wrap; font: .86rem/1.55 var(--f-mono); max-height: 320px; overflow: auto; }
.howto { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0 0 10px; list-style: none; counter-reset: s; font-size: .9rem; }
.howto li { counter-increment: s; }
.howto li::before { content: counter(s); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--purple); color: #fff; font: 700 .72rem var(--f-mono); }

.doc__pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: .9rem; }
.doc__pager a:last-child { text-align: right; }
.doc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(160deg, #f3ecfb, var(--lilac)); }
.doc__cta p { margin: 0; font-weight: 700; }
.doc__cta .btn { margin: 0; }

/* ---------- Hours Back calculator ---------- */
.win--calc { background: #dedad0; }
.win--calc .win__body { padding: 20px; }
.calc { display: grid; gap: 16px; }
.lcd {
  padding: 14px 16px; border-radius: 12px; display: grid; gap: 6px;
  background: linear-gradient(#b9c9a3, #a6b98d); color: #1f2b17; box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .35), inset -1px -1px 0 rgba(255, 255, 255, .4);
  border: 6px solid #2c2a33; font-family: var(--f-mono);
}
.lcd__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.lcd__row span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.lcd__row b { font: 700 1.9rem/1 var(--f-mono); letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 rgba(0, 0, 0, .12); }
.lcd__row--small { grid-template-columns: 1fr; gap: 6px; padding-top: 12px; border-top: 1px dashed rgba(31, 43, 23, .35); }
.lcd__row--small b { font-size: 1.2rem; }
.lcd::after { line-height: 1.5; font: 700 .74rem var(--f-mono); text-transform: uppercase; letter-spacing: .05em; padding-top: 4px; }
.lcd[data-verdict="good"]::after { content: "▶ worth a conversation"; }
.lcd[data-verdict="maybe"]::after { content: "▶ maybe. try the free version first"; }
.lcd[data-verdict="no"]::after { content: "▶ skip the build. try a free prompt"; }
.calc__field { display: grid; gap: 6px; font-size: .92rem; }
.calc__field output { font: 700 .92rem var(--f-mono); color: var(--purple-d); }
.calc__field output { justify-self: start; padding: 2px 9px; border-radius: 6px; background: var(--lilac); }
.calc__money { position: relative; }
.calc__money::before { content: "$"; position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-weight: 700; color: var(--muted); }
.calc__money input { padding-left: 28px; }
.calc input[type="range"] { padding: 0; box-shadow: none; background: none; accent-color: var(--purple); height: 28px; }
.calc .fineprint { font-size: .82rem; }

/* ---------- Solution Assistant ---------- */
.wizard__main { display: flex; flex-direction: column; padding: 26px 30px 22px; min-width: 0; min-height: 440px; flex: 1 1 auto; }
.wizard__intro { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); color: var(--muted); font-size: .95rem; }
.wizard__main h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 14px; }
.wizard__step { font: 500 .74rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--purple-d); margin: 0 0 8px; }
.wizard__opts { display: grid; gap: 8px; }
.wizard__opt { position: relative; font-weight: 500; }
.wizard__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.wizard__opt span { display: block; padding: 11px 14px 11px 40px; border-radius: 12px; background: var(--bg); box-shadow: var(--raise-sm); position: relative; }
.wizard__opt span::before { content: ""; position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 14px; height: 14px; border-radius: 50%; box-shadow: var(--inset); background: var(--bg); }
.wizard__opt input:checked + span { box-shadow: var(--inset); color: var(--purple-d); font-weight: 700; background: #e4daf3; }
.wizard__opt input:checked + span::before { background: var(--purple); box-shadow: 0 0 0 3px #fff inset, 0 0 0 1px var(--purple-d); }
.wizard__opt input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }
.wizard__note { padding: 10px 14px; border-radius: 12px; background: rgba(217, 200, 242, .45); font-size: .94rem; }
.wizard__links { display: flex; flex-wrap: wrap; gap: 10px; }
.wizard__links .btn { margin: 0; }
.wizard__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; }
.wizard__foot .btn { margin: 0; }
.wizard__foot .btn:disabled { opacity: .45; cursor: default; transform: none; }
.wizard__dots { display: flex; gap: 6px; margin-right: auto; }
.wizard__dots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: var(--inset); background: var(--bg); }
.wizard__dots i.on { background: var(--purple); box-shadow: none; }

/* ---------- Spotlight ---------- */
.spot { position: fixed; inset: 0; z-index: 9800; display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px; background: rgba(29, 26, 36, .18); }
.spot__box {
  width: min(640px, 100%); border-radius: 18px; overflow: hidden;
  background: rgba(244, 242, 236, .92); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(29, 26, 36, .2); box-shadow: 0 30px 60px -20px rgba(29, 26, 36, .45), 0 0 0 1px rgba(255, 255, 255, .6) inset;
  animation: drop .2s cubic-bezier(.2, 1.4, .4, 1) both;
}
.spot__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(29, 26, 36, .12); }
.spot__bar svg { width: 22px; height: 22px; color: var(--muted); flex: none; }
.spot__bar input { flex: 1; padding: 4px 0; border: 0; background: none; box-shadow: none; font: 500 1.3rem var(--f-body); outline: none; border-radius: 0; }
.spot__bar kbd { font: 500 .72rem var(--f-mono); padding: 3px 7px; border-radius: 6px; background: var(--bg); box-shadow: var(--raise-sm); color: var(--muted); }
.spot__list { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 55vh); overflow: auto; }
.spot__head { padding: 8px 12px 4px; font: 500 .7rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.spot__empty { padding: 18px 14px; color: var(--muted); }
.spot__hit { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.spot__hit svg { width: 34px; height: 34px; overflow: visible; }
.spot__txt { display: grid; min-width: 0; }
.spot__txt b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot__txt small { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot__type { font: 500 .68rem var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.spot__hit[aria-selected="true"] { background: var(--purple); color: #fff; }
.spot__hit[aria-selected="true"] small, .spot__hit[aria-selected="true"] .spot__type { color: rgba(255, 255, 255, .8); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: calc(var(--menubar-h) + 12px); right: 14px; z-index: 9900; max-width: 340px;
  padding: 12px 16px 12px 46px; border-radius: 14px; background: rgba(244, 242, 236, .95); backdrop-filter: blur(12px);
  border: 1px solid rgba(29, 26, 36, .15); box-shadow: 0 14px 30px -10px rgba(29, 26, 36, .35); font-size: .92rem; font-weight: 500;
  animation: slidein .3s cubic-bezier(.2, 1.3, .4, 1) both;
}
.toast::before { content: "📋"; position: absolute; left: 14px; top: 50%; translate: 0 -50%; font-size: 1.2rem; }
@keyframes slidein { from { translate: 30px 0; opacity: 0; } }

/* Browser + assistant layouts follow the window width too. */
@container (max-width: 720px) {
  .browser { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .browser__side { border-right: 0; border-bottom: 1px solid var(--line); }
  .browser__intro, .browser__status { display: none; }
  .browser__list { display: flex; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 8px; }
  .browser__list li { flex: 0 0 210px; }
  .browser__item { height: 100%; }
  .browser__view { padding: 22px; }
  .incl--cols { grid-template-columns: 1fr; }
}

/* ---------- 1996 versions of the new pieces ---------- */
html[data-theme="90s"] .menubar__search { border-radius: 0; }
html[data-theme="90s"] .menubar__search:hover { background: #000; }
html[data-theme="90s"] .win__body a { color: #0000ee; }
html[data-theme="90s"] .win__body a.btn { color: #000; }
html[data-theme="90s"] .incl, html[data-theme="90s"] .doc__pager, html[data-theme="90s"] .readme__more { border-color: #000; }
html[data-theme="90s"] .browser__side { background: #fff; border-color: #000; }
html[data-theme="90s"] .browser__intro, html[data-theme="90s"] .browser__status { border-color: #000; font-family: Verdana, sans-serif; color: #000; }
html[data-theme="90s"] .browser__item { border-radius: 0; }
html[data-theme="90s"] .browser__item[aria-current="true"] { background: #000; box-shadow: none; }
html[data-theme="90s"] .browser__view { background: #fff; }
html[data-theme="90s"] .doc__kicker, html[data-theme="90s"] .wizard__step { color: #000; }
html[data-theme="90s"] .doc__title { font-family: Verdana, Geneva, sans-serif; letter-spacing: -.02em; }
html[data-theme="90s"] .doc__note { border-radius: 0; background: #ffffcc; border: 1px solid #000; }
html[data-theme="90s"] .tag { border-radius: 0; }
html[data-theme="90s"] .facts div { background: #fff; border: 1px solid #000; border-radius: 0; box-shadow: none; }
html[data-theme="90s"] .prompt { border-radius: 0; border-color: #000; box-shadow: 3px 3px 0 #000; }
html[data-theme="90s"] .prompt__bar { background: repeating-linear-gradient(to bottom, #000 0 1px, #fff 1px 3px); border-color: #000; }
html[data-theme="90s"] .prompt__bar span { background: #fff; padding: 0 8px; }
html[data-theme="90s"] .howto li::before { border-radius: 0; background: #000; }
html[data-theme="90s"] .doc__cta { border-radius: 0; background: #ffffcc; border: 1px solid #000; }
html[data-theme="90s"] .win--calc { background: #dcdcdc; }
html[data-theme="90s"] .lcd { border-radius: 0; border: 2px solid #000; box-shadow: inset 2px 2px 0 #7d7d7d; }
html[data-theme="90s"] .wizard__opt span { border-radius: 0; background: #fff; box-shadow: 0 0 0 1px #000; }
html[data-theme="90s"] .wizard__opt span::before { box-shadow: 0 0 0 1px #000; background: #fff; }
html[data-theme="90s"] .wizard__opt input:checked + span { background: #fff; color: #000; box-shadow: 0 0 0 2px #000; }
html[data-theme="90s"] .wizard__opt input:checked + span::before { background: #000; box-shadow: 0 0 0 1px #000, inset 0 0 0 3px #fff; }
html[data-theme="90s"] .wizard__note { border-radius: 0; background: #ffffcc; border: 1px solid #000; }
html[data-theme="90s"] .wizard__dots i { border-radius: 0; box-shadow: 0 0 0 1px #000; background: #fff; }
html[data-theme="90s"] .wizard__dots i.on { background: #000; }
html[data-theme="90s"] .spot { background: rgba(0, 0, 0, .15); }
html[data-theme="90s"] .spot__box { border-radius: 0; background: #fff; backdrop-filter: none; border: 1px solid #000; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000, 6px 6px 0 3px #000; }
html[data-theme="90s"] .spot__bar { border-color: #000; }
html[data-theme="90s"] .spot__bar kbd { border-radius: 0; box-shadow: 0 0 0 1px #000; background: #dcdcdc; color: #000; }
html[data-theme="90s"] .spot__hit { border-radius: 0; }
html[data-theme="90s"] .spot__hit[aria-selected="true"] { background: #000; }
html[data-theme="90s"] .toast { border-radius: 0; background: #ffffcc; backdrop-filter: none; border: 1px solid #000; box-shadow: 3px 3px 0 #000; font-family: Verdana, sans-serif; }

/* ---------- The wallpaper: a dictionary entry ---------- */
.dict { color: var(--ink); font-family: var(--f-body); }
.dict:not(.dict--inline) {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  top: 38px; right: calc(var(--icons-w, 248px) + 14px); width: clamp(220px, calc(100vw - 52vw - var(--icons-w, 248px) - 92px), 420px);
}
.dict__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; }
.dict__word { font: 800 clamp(2.4rem, 4.2vw, 3.6rem)/1 var(--f-display); letter-spacing: -.04em; color: var(--purple); }
.dict__pron { font: 400 1rem var(--f-mono); color: var(--muted); }
.dict__senses { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: clamp(.88rem, .7vw + .35rem, 1.02rem); line-height: 1.4; }
.dict__senses li::marker { font: 700 .9rem var(--f-mono); color: var(--purple); }
.dict__senses i { font-weight: 700; color: var(--muted); }
.dict__eg { margin: 12px 0 0; font: 700 1.55rem/1.1 var(--f-hand); color: var(--purple-d); rotate: -1.5deg; transform-origin: left; }
.dict--inline { display: none; margin-top: 22px; padding-top: 16px; border-top: 2px dotted var(--line); }
.dict--inline .dict__word { font-size: 2rem; }
@media (max-width: 899px) {
  .dict:not(.dict--inline) { top: auto; right: auto; left: 3vw; bottom: calc(var(--dock-reserve) + 6px); width: min(380px, 32vw); }
}
html[data-theme="90s"] .dict:not(.dict--inline) { background: #fff; border: 1px solid #000; box-shadow: 3px 3px 0 #000; padding: 12px 16px 14px; }
html[data-theme="90s"] .dict__word { font-family: var(--f-display); letter-spacing: 0; }
html[data-theme="90s"] .dict__eg { color: #c00000; }

/* ---------- Narrow screens: windows become full-screen apps ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .menubar__status { display: none; }
  .icons {
    position: absolute; inset: 12px 12px auto 12px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 4px; pointer-events: auto;
  }
  .icon, .icons .icon { width: auto; position: static; visibility: visible !important; }
  .icon--trash, .dict:not(.dict--inline) { display: none; }
  .dict--inline { display: block; }

  .win {
    left: 0 !important; top: 0 !important; width: 100% !important; max-width: none;
    height: calc(100% - 92px) !important; max-height: none;
    border-radius: 0; border-left: 0; border-right: 0; rotate: none;
  }
  .zoombox, .rz { display: none; }
  .win.is-active { box-shadow: none; }

  .win__body, .welcome { padding: 22px; }
  .cards, .field-row { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .cta-note { margin-left: 8px; }

  .dock { gap: 6px; padding: 10px 12px 9px; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 16px); justify-content: space-between; }
  .dock__tile { width: 52px; height: 52px; }
  .dock__item::after { display: none; }
  .dock__sep { display: none; }
}
@media (max-width: 760px) {
  .clock { display: none; }
  .menu-pop .kbd, .spot__bar kbd { display: none; }
  .menu-pop { min-width: 210px; }
  .menu-item { padding: 0 10px; }
  .browser { height: auto; }
  .dock { gap: 2px; padding: 8px 8px 7px; }
  .dock__tile { width: 42px; height: 42px; }
  .spot { padding-top: 8vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A clear front door, with the rest of the desktop available to explore. */
.welcome { padding: 26px 30px 28px; }
.welcome .wordmark { width: 205px; margin: -8px 0 10px -4px; }
.welcome__eyebrow { margin: 0 0 12px; font: 500 .7rem var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--purple-d); }
.welcome h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); margin-bottom: 16px; }
.welcome .lede { font-size: 1rem; line-height: 1.6; margin-bottom: 22px; }
.start-paths { display: grid; gap: 10px; margin: 0 0 22px; }
.start-path { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 13px 16px; color: var(--ink); text-decoration: none; border: 1px solid rgba(87, 66, 111, .12); border-radius: 14px; background: linear-gradient(140deg, #f4f1eb, #e1ddd5); box-shadow: 3px 3px 7px #c6c1b8, -3px -3px 7px #fffdf7; transition: transform .15s, box-shadow .15s; }
.start-path:hover { transform: translateY(-2px); box-shadow: 5px 6px 12px #c6c1b8, -3px -3px 7px #fffdf7; }
.start-path__step { grid-column: 1 / -1; font: 500 .59rem var(--f-mono); letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
.start-path strong { font: 700 1.04rem var(--f-body); }
.start-path strong span { margin-left: 7px; color: var(--purple); }
.start-path small { align-self: center; font-size: .76rem; text-align: right; }
.win__body .start-path--call { background: linear-gradient(135deg, #8963bd, #64408f); color: #fff; border-color: #684394; box-shadow: 3px 4px 9px #b5a6c0, inset 1px 1px 0 #b8a0d5; }
.start-path--call .start-path__step, .start-path--call small, .start-path--call strong span { color: #f3eafa; }
.welcome__people { margin: 0; font-size: .8rem; color: var(--muted); line-height: 1.65; }
.welcome__people a { color: var(--purple-d); text-underline-offset: 3px; }
.pricing-note { padding: 14px 18px; border-radius: 12px; font-size: .9rem; line-height: 1.55; background: #e3d9ee; color: #52435e; margin: 0 0 28px; border-left: 3px solid var(--purple); }
.services__pricing-foot { margin-top: 24px; max-width: 70ch; }
.doc__note--neutral { background: #e9e3ef; border: 1px solid #c5b7d2; color: #52435e; }
.tag { display: inline-block; white-space: normal; }
.doc__kicker { flex-wrap: wrap; }

/* Sculpted objects sit on the desktop, rather than inside flat app badges. */
html:not([data-theme="90s"]) .icon svg { width: 76px; height: 76px; filter: drop-shadow(4px 7px 5px rgba(88, 66, 101, .16)) drop-shadow(-2px -2px 3px rgba(255, 253, 247, .8)); }
html:not([data-theme="90s"]) .icon.is-selected svg { filter: drop-shadow(3px 7px 5px rgba(88, 66, 101, .2)) drop-shadow(0 0 7px rgba(148, 113, 190, .35)); }
.dock { padding: 12px 20px 29px; gap: 15px; }
.dock__item { gap: 3px; }
.dock__tile { width: 44px; height: 44px; }
.dock__item--primary .dock__tile { width: 60px; height: 60px; }
.dock__caption { position: absolute; top: calc(100% + 3px); white-space: nowrap; font: 700 .68rem var(--f-body); color: var(--purple-d); }
.dock__item--primary::after { display: none; }
.dock__tile svg { filter: drop-shadow(3px 5px 3px rgba(88, 66, 101, .18)); }
.dock__sep { margin: 5px 2px 10px; }
html[data-theme="90s"] .start-path { border-radius: 0; border: 1px solid #000; background: #fff; color: #000; box-shadow: 2px 2px 0 #000; }
html[data-theme="90s"] .win__body .start-path--call { background: #ffffcc; }
html[data-theme="90s"] .start-path * { color: #000; }
html[data-theme="90s"] .pricing-note, html[data-theme="90s"] .doc__note--neutral { background: #ffffcc; color: #000; border: 1px solid #000; border-radius: 0; }
html[data-theme="90s"] .dock__caption { color: #000; font-family: var(--f-ui); }
html[data-theme="90s"] .dock { padding-bottom: 23px; }
@container (max-width: 480px) {
  .start-path { grid-template-columns: 1fr; gap: 4px; }
  .start-path__step { margin-bottom: 0; }
  .start-path small { text-align: left; }
}
@media (max-width: 760px) {
  .welcome { padding: 20px 22px 24px; }
  .welcome .wordmark { width: 150px; margin-bottom: 8px; }
  .welcome h1 { font-size: 2rem; }
  .welcome .lede { font-size: .95rem; line-height: 1.5; margin-bottom: 18px; }
  .start-path { padding: 10px 14px; gap: 2px; }
  .start-paths { gap: 8px; margin-bottom: 18px; }
  .dock { padding: 8px 9px 25px; gap: 4px; }
  .dock__item--primary .dock__tile { width: 43px; height: 43px; }
  .dock__tile { width: 31px; height: 31px; }
  .dock__caption { font-size: .6rem; }
  .dock__sep { display: block; margin: 4px 0 7px; }
  .win { height: calc(100% - 104px) !important; }
}

@media (min-width: 761px) and (max-width: 1199px) {
  .dict:not(.dict--inline) { display: none; }
}

/* A larger signature, with a compact appearance control on every screen. */
.welcome .wordmark { width: min(320px, 90%); margin-top: -10px; margin-bottom: 12px; }
.mode-toggle .mode-sun, .mode-toggle[aria-pressed="true"] .mode-moon { display: none; }
.mode-toggle[aria-pressed="true"] .mode-sun { display: block; }
.mode-toggle { cursor: pointer; }
@media (max-width: 760px) {
  .welcome .wordmark { width: min(230px, 90%); margin-bottom: 10px; }
  .menubar__right { gap: 4px; padding-right: 2px; }
  .menubar__search { width: 27px; }
  .menu-item { padding: 0 8px; }
  .menu-item--bold > svg { display: none; }
}

/* Evening mode retains the same tactile surfaces and colorful little objects. */
html[data-color-mode="dark"] { --bg: #282430; --bg-hi: #3b3547; --bg-lo: #16131c; --panel: #302a39;
  --ink: #f1ebf6; --muted: #bcb1c9; --line: #5a4e68;
  --purple: #b99add; --purple-d: #d7b6ff; --lilac: #4c395f; --yellow: #66502d; --green: #7cbf9b;
  color-scheme: dark; }
html[data-color-mode="dark"] body { color-scheme: dark; background-image: radial-gradient(rgba(226, 208, 246, .045) 1px, transparent 1.2px), radial-gradient(rgba(226, 208, 246, .025) 1px, transparent 1.2px); }
html[data-color-mode="dark"] .menubar { background: linear-gradient(#37303f, #27222f); box-shadow: 0 2px 8px #15111b; }
html[data-color-mode="dark"] .menu-pop { background: #302a39; box-shadow: 8px 10px 22px #15111b; }
html[data-color-mode="dark"] .menu-pop hr { border-color: var(--line); }
html[data-color-mode="dark"] .menu-pop button:disabled { color: #8d8099; }
html[data-color-mode="dark"] .menu-item:hover, html[data-color-mode="dark"] .menu-item[aria-expanded="true"], html[data-color-mode="dark"] .menubar__search:hover { background: #574364; color: #fff; }
html[data-color-mode="dark"] .menu-pop button:hover:not(:disabled) { background: #735094; }
html[data-color-mode="dark"] .win { box-shadow: 5px 6px 16px #17131d, -3px -3px 9px #3c3448; }
html[data-color-mode="dark"] .win.is-active { box-shadow: 12px 18px 40px #15101ccc, -2px -2px 10px #44384f55; }
html[data-color-mode="dark"] .titlebar { background: repeating-linear-gradient(to bottom, #453a50 0 2px, #332b3e 2px 3px); }
html[data-color-mode="dark"] .win:not(.is-active) .titlebar, html[data-color-mode="dark"] .win:not(.is-active) .titlebar__title { background: #2b2533; color: #a698b5; }
html[data-color-mode="dark"] .closebox, html[data-color-mode="dark"] .zoombox { background: #44384f; box-shadow: inset 1px 1px 0 #6b597d, inset -1px -1px 0 #1c1723; border-color: #bdaacb; }
html[data-color-mode="dark"] .btn { background: linear-gradient(145deg, #443b4d, #2b2534); border-color: #62516f; }
html[data-color-mode="dark"] .btn--primary { background: linear-gradient(145deg, #8a60b8, #64418b); color: #fff; box-shadow: 4px 4px 10px #17111f, -3px -3px 8px #46374f, inset 1px 1px 0 #c5a3e655; }
html[data-color-mode="dark"] .start-path { background: linear-gradient(140deg, #3c3346, #2c2535); border-color: #51445f; box-shadow: 4px 4px 9px #19141f, -3px -3px 8px #473b51; }
html[data-color-mode="dark"] .start-path:hover { box-shadow: 6px 7px 14px #15101c, -3px -3px 8px #473b51; }
html[data-color-mode="dark"] .win__body .start-path--call { background: linear-gradient(135deg, #8d65bd, #64408f); color: #fff; box-shadow: 4px 5px 12px #1a1322, inset 1px 1px 0 #ceb3e855; }
html[data-color-mode="dark"] .card--featured, html[data-color-mode="dark"] .doc__cta { background: linear-gradient(150deg, #4d385f, #392c49); border-color: #735889; }
html[data-color-mode="dark"] .badge, html[data-color-mode="dark"] .tag--pilot { background: #e9c785; color: #30223c; border-color: #a58b65; box-shadow: 2px 2px 0 #18121f; }
html[data-color-mode="dark"] .badge--alt, html[data-color-mode="dark"] .tag--example { background: #d8c2ef; color: #30223c; }
html[data-color-mode="dark"] .badge--free, html[data-color-mode="dark"] .tag--real { background: #b8dfc5; color: #22372d; }
html[data-color-mode="dark"] .pricing-note, html[data-color-mode="dark"] .doc__note--neutral { background: #40324f; color: #e5d7f3; border-color: #79608f; }
html[data-color-mode="dark"] .doc__note:not(.doc__note--neutral) { background: #4b3f29; color: #f3dfb4; border-color: #9b8051; }
html[data-color-mode="dark"] .win--sticky, html[data-color-mode="dark"] .win--sticky .win__body { background: #4b402c; color: #f2dda6; border-color: #89704a; }
html[data-color-mode="dark"] .win--sticky .titlebar, html[data-color-mode="dark"] .win--sticky:not(.is-active) .titlebar { background: repeating-linear-gradient(to bottom, #635131 0 2px, #55462e 2px 3px); color: #f2dda6; border-color: #89704a; }
html[data-color-mode="dark"] .win--sticky .titlebar__title, html[data-color-mode="dark"] .win--sticky:not(.is-active) .titlebar__title { background: #4b402c; color: #f2dda6; }
html[data-color-mode="dark"] .readme, html[data-color-mode="dark"] .prompt { background: #25202d; border-color: var(--line); }
html[data-color-mode="dark"] .browser__side { background: #28222f; }
html[data-color-mode="dark"] .browser__intro, html[data-color-mode="dark"] .browser__status { border-color: var(--line); }
html[data-color-mode="dark"] .browser__item[aria-current="true"], html[data-color-mode="dark"] .spot__hit[aria-selected="true"] { background: #725094; color: #fff; }
html[data-color-mode="dark"] .prompt__bar { background: repeating-linear-gradient(to bottom, #413649 0 2px, #332b3e 2px 3px); }
html[data-color-mode="dark"] .chip input:checked + span, html[data-color-mode="dark"] .wizard__opt input:checked + span { background: #4c365e; color: #f0deff; }
html[data-color-mode="dark"] .wizard__note { background: #42324e; }
html[data-color-mode="dark"] .win--calc { background: #2c2634; }
html[data-color-mode="dark"] .spot__box, html[data-color-mode="dark"] .toast { background: rgba(43, 35, 52, .97); border-color: #655273; box-shadow: 0 24px 50px #100c17aa, inset 0 0 0 1px #78648b44; }
html[data-color-mode="dark"] .spot__bar { border-color: var(--line); }
html[data-color-mode="dark"] .backdrop, html[data-color-mode="dark"] .spot { background: rgba(13, 9, 20, .55); }
html[data-color-mode="dark"] .avatar--t { color: #261832; }
html[data-color-mode="dark"] .dict__word { color: #c5a0ea; }
html[data-color-mode="dark"] .wordmark #hatch line { stroke: #c29ce9; }
html[data-color-mode="dark"] .wordmark tspan:last-child { stroke: #c29ce9; }
html[data-color-mode="dark"] .icon svg { filter: drop-shadow(3px 6px 5px rgba(5, 2, 10, .45)); }
html[data-color-mode="dark"] .icon.is-selected svg { filter: drop-shadow(3px 6px 5px #100919) drop-shadow(0 0 8px #b593d555); }
html[data-color-mode="dark"] .dock__tile svg { filter: drop-shadow(3px 5px 4px rgba(5, 2, 10, .45)); }
html[data-color-mode="dark"] .icon.is-selected span, html[data-color-mode="dark"] .icon:focus-visible span { background: #715095; color: #fff; }

/* 1996 after hours: flat charcoal Platinum, pixel type, and hard bevels. */
html[data-theme="90s"][data-color-mode="dark"] { --bg: #303030; --panel: #303030; --bg-hi: #686868; --bg-lo: #141414;
  --ink: #f0edf4; --muted: #bbb5c3; --line: #746a7c;
  --purple: #b599df; --purple-d: #ccb3f6; --lilac: #493b5d; --yellow: #66532a;
  --raise: 0 0 0 1px #111, inset 1px 1px 0 #777, inset -1px -1px 0 #161616;
  --raise-sm: 0 0 0 1px #111, inset 1px 1px 0 #777, inset -1px -1px 0 #161616;
  --inset: 0 0 0 1px #111, inset 1px 1px 0 #161616, inset -1px -1px 0 #777; }
html[data-theme="90s"][data-color-mode="dark"] body { background: repeating-conic-gradient(#29232f 0 25%, #352d40 0 50%) 0 0 / 4px 4px; }
html[data-theme="90s"][data-color-mode="dark"] a, html[data-theme="90s"][data-color-mode="dark"] .linklike, html[data-theme="90s"][data-color-mode="dark"] .win__body a { color: #cbb1ff; }
html[data-theme="90s"][data-color-mode="dark"] .menubar, html[data-theme="90s"][data-color-mode="dark"] .menu-pop { background: #333; border-color: #8a8093; box-shadow: 3px 3px 0 #111; }
html[data-theme="90s"][data-color-mode="dark"] .menubar { box-shadow: none; }
html[data-theme="90s"][data-color-mode="dark"] .menubar__status { color: #e1d7ed; }
html[data-theme="90s"][data-color-mode="dark"] .menu-pop hr { border-color: #82748f; }
html[data-theme="90s"][data-color-mode="dark"] .win, html[data-theme="90s"][data-color-mode="dark"] .card, html[data-theme="90s"][data-color-mode="dark"] .person, html[data-theme="90s"][data-color-mode="dark"] .readme { border-color: #151515; box-shadow: 3px 3px 0 #101010; }
html[data-theme="90s"][data-color-mode="dark"] .win.is-active { box-shadow: 4px 4px 0 #090909; }
html[data-theme="90s"][data-color-mode="dark"] .titlebar { background: repeating-linear-gradient(to bottom, #9686a5 0 1px, #302a37 1px 3px); border-color: #111; }
html[data-theme="90s"][data-color-mode="dark"] .titlebar__title, html[data-theme="90s"][data-color-mode="dark"] .win:not(.is-active) .titlebar__title { background: #303030; }
html[data-theme="90s"][data-color-mode="dark"] .win:not(.is-active) .titlebar { background: #35313b; color: #aba1b5; }
html[data-theme="90s"][data-color-mode="dark"] .closebox, html[data-theme="90s"][data-color-mode="dark"] .zoombox { background: #4b4254; border-color: #c7bad2; box-shadow: none; }
html[data-theme="90s"][data-color-mode="dark"] .icon span { background: #302a38; color: #eee5f8; }
html[data-theme="90s"][data-color-mode="dark"] .icon.is-selected span, html[data-theme="90s"][data-color-mode="dark"] .icon:focus-visible span { background: #79579b; color: #fff; }
html[data-theme="90s"][data-color-mode="dark"] .icon svg, html[data-theme="90s"][data-color-mode="dark"] .icon.is-selected svg, html[data-theme="90s"][data-color-mode="dark"] .dock__tile svg { filter: none; }
html[data-theme="90s"][data-color-mode="dark"] .btn, html[data-theme="90s"][data-color-mode="dark"] .win__body a.btn { background: #454545; color: #f3eef8; border-color: #111; box-shadow: inset 1px 1px 0 #888, inset -2px -2px 0 #171717; }
html[data-theme="90s"][data-color-mode="dark"] .btn--primary { box-shadow: inset 1px 1px 0 #888, inset -2px -2px 0 #171717, 0 0 0 2px #303030, 0 0 0 4px #9b85b3; }
html[data-theme="90s"][data-color-mode="dark"] .btn:active { background: #39323f; box-shadow: inset 2px 2px 0 #16121b; }
html[data-theme="90s"][data-color-mode="dark"] .welcome h1 mark, html[data-theme="90s"][data-color-mode="dark"] .scribble { background: #5b4930; color: #fff1d5; }
html[data-theme="90s"][data-color-mode="dark"] .start-path { background: #39343f; color: #f0e9f7; border-color: #776984; box-shadow: 2px 2px 0 #111; }
html[data-theme="90s"][data-color-mode="dark"] .start-path * { color: inherit; }
html[data-theme="90s"][data-color-mode="dark"] .start-path__step, html[data-theme="90s"][data-color-mode="dark"] .start-path small { color: #c7bbd2; }
html[data-theme="90s"][data-color-mode="dark"] .win__body .start-path--call { background: #59416f; color: #fff; box-shadow: 2px 2px 0 #111; }
html[data-theme="90s"][data-color-mode="dark"] .start-path:hover { transform: none; box-shadow: 3px 3px 0 #111; }
html[data-theme="90s"][data-color-mode="dark"] .counter { color: #c9c0d3; }
html[data-theme="90s"][data-color-mode="dark"] .retro-footer { border-color: #766582; }
html[data-theme="90s"][data-color-mode="dark"] .card, html[data-theme="90s"][data-color-mode="dark"] .readme, html[data-theme="90s"][data-color-mode="dark"] .person, html[data-theme="90s"][data-color-mode="dark"] .facts div { background: #353137; border-color: #111; }
html[data-theme="90s"][data-color-mode="dark"] .card--featured, html[data-theme="90s"][data-color-mode="dark"] .person--pilot { background: #42364b; border-color: #8d759f; }
html[data-theme="90s"][data-color-mode="dark"] .progress { background: #222; }
html[data-theme="90s"][data-color-mode="dark"] input, html[data-theme="90s"][data-color-mode="dark"] select, html[data-theme="90s"][data-color-mode="dark"] textarea { background: #222; color: var(--ink); }
html[data-theme="90s"][data-color-mode="dark"] .chip span { background: #444; color: var(--ink); box-shadow: 0 0 0 1px #111, inset 1px 1px 0 #777, inset -1px -1px 0 #1b1b1b; }
html[data-theme="90s"][data-color-mode="dark"] .chip input:checked + span { background: #70518e; color: #fff; }
html[data-theme="90s"][data-color-mode="dark"] .select-wrap::after { border-color: #cfc3da; }
html[data-theme="90s"][data-color-mode="dark"] .browser__side { background: #28262b; border-color: #111; }
html[data-theme="90s"][data-color-mode="dark"] .browser__view, html[data-theme="90s"][data-color-mode="dark"] .prompt__bar span { background: #303030; }
html[data-theme="90s"][data-color-mode="dark"] .browser__intro, html[data-theme="90s"][data-color-mode="dark"] .browser__status, html[data-theme="90s"][data-color-mode="dark"] .doc__kicker, html[data-theme="90s"][data-color-mode="dark"] .wizard__step { color: #c7bcd0; border-color: #655b6e; }
html[data-theme="90s"][data-color-mode="dark"] .facts div { box-shadow: none; }
html[data-theme="90s"][data-color-mode="dark"] .doc__cta, html[data-theme="90s"][data-color-mode="dark"] .wizard__note { background: #403546; border-color: #8d759f; }
html[data-theme="90s"][data-color-mode="dark"] .prompt__bar { background: repeating-linear-gradient(to bottom, #7e6d8b 0 1px, #312b39 1px 3px); }
html[data-theme="90s"][data-color-mode="dark"] .wizard__opt span { background: #353137; box-shadow: 0 0 0 1px #8b7998; }
html[data-theme="90s"][data-color-mode="dark"] .wizard__opt input:checked + span { background: #574166; color: #fff; box-shadow: 0 0 0 2px #b69dcb; }
html[data-theme="90s"][data-color-mode="dark"] .wizard__opt span::before, html[data-theme="90s"][data-color-mode="dark"] .wizard__dots i { background: #303030; box-shadow: 0 0 0 1px #a38caf; }
html[data-theme="90s"][data-color-mode="dark"] .wizard__dots i.on { background: #cbb1e5; }
html[data-theme="90s"][data-color-mode="dark"] .win--calc { background: #303030; }
html[data-theme="90s"][data-color-mode="dark"] .spot__box, html[data-theme="90s"][data-color-mode="dark"] .toast, html[data-theme="90s"][data-color-mode="dark"] .dialog { background: #333; border-color: #a18daf; box-shadow: 4px 4px 0 #111; }
html[data-theme="90s"][data-color-mode="dark"] .dock { background: #353535; border-color: #111; box-shadow: inset 1px 1px 0 #777, 3px -3px 0 #111; }
html[data-theme="90s"][data-color-mode="dark"] .dock__tile { background: #404040; box-shadow: 0 0 0 1px #111, inset 1px 1px 0 #888, inset -1px -1px 0 #171717; }
html[data-theme="90s"][data-color-mode="dark"] .dock__caption { color: #ddc9f0; }
html[data-theme="90s"][data-color-mode="dark"] .dock__item::after { background: #46404c; color: #f0e9f7; border-color: #9983aa; }
html[data-theme="90s"][data-color-mode="dark"] .dict:not(.dict--inline) { background: #303030; border-color: #8d759f; box-shadow: 3px 3px 0 #111; }
html[data-theme="90s"][data-color-mode="dark"] .dict__eg { color: #e2b0b0; }
html[data-theme="90s"][data-color-mode="dark"] .win__body::-webkit-scrollbar-track { background: repeating-conic-gradient(#333 0 25%, #555 0 50%) 0 0 / 2px 2px; border-color: #111; }
html[data-theme="90s"][data-color-mode="dark"] .win__body::-webkit-scrollbar-thumb { background: #505050; border-color: #111; box-shadow: inset 1px 1px 0 #888, inset -1px -1px 0 #171717; }

/* Give the classic control-strip labels room to breathe. */
html[data-theme="90s"] .dock__item--primary { min-width: 64px; }
@media (max-width: 760px) {
  html[data-theme="90s"] .dock { gap: 3px; padding: 6px 5px 23px; }
  html[data-theme="90s"] .dock__item--primary { min-width: 50px; }
  html[data-theme="90s"] .dock__tile { width: 28px; height: 28px; padding: 2px; }
  html[data-theme="90s"] .dock__item--primary .dock__tile { width: 40px; height: 40px; }
}

/* Tooltip colors are paired explicitly; dark text tokens are light surfaces. */
html[data-color-mode="dark"] .dock__item::after {
  background: #493951;
  color: #fff8ff;
  border: 1px solid #a58cb8;
  box-shadow: 0 4px 12px #100c18;
}
html[data-theme="90s"][data-color-mode="dark"] .dock__item::after {
  background: #39303f;
  color: #fff8ff;
  border-color: #b6a0c6;
  box-shadow: 3px 3px 0 #111;
}

/* White glove: rounded pearl volumes with soft contact shadows. */
html:not([data-theme="90s"]) .icon[data-open="welcome"] svg,
html:not([data-theme="90s"]) .dock__item[data-open="welcome"] .dock__tile svg {
  filter: drop-shadow(0 2px 1px rgba(53, 37, 70, .18)) drop-shadow(1px 5px 5px rgba(53, 37, 70, .18));
}

html[data-color-mode="dark"]:not([data-theme="90s"]) .icon[data-open="welcome"] svg,
html[data-color-mode="dark"]:not([data-theme="90s"]) .dock__item[data-open="welcome"] .dock__tile svg {
  filter: drop-shadow(1px 4px 4px rgba(5, 2, 10, .3));
}