/* /download/windows: the homepage's look (site.css) plus the download cards, a Windows desktop for the
   pointer and the install steps. */
kbd { display: inline-block; font: 600 .82em/1 var(--font); padding: .32em .55em .28em; border-radius: 6px; background: #fff; color: var(--ink); box-shadow: inset 0 -2px 0 rgba(34, 32, 28, .14), 0 0 0 1px rgba(34, 32, 28, .14); vertical-align: .08em; white-space: nowrap; }
code { font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.windows-hero .eyebrow { display: inline-flex; align-items: center; gap: 4px; }

/* The two downloads: the recommended one is dark, like the homepage's primary button. */
.arch-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 600px; margin: 6px auto 0; }
.arch { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; text-decoration: none; text-align: left; background: #fff; box-shadow: 0 0 0 1.5px rgba(34, 32, 28, .14), 0 6px 20px rgba(0, 0, 0, .04); transition: transform .15s, box-shadow .15s; }
.arch:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px rgba(34, 32, 28, .3), 0 10px 26px rgba(0, 0, 0, .07); }
.arch[data-recommended] { background: var(--ink); color: var(--paper); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
.arch[data-recommended]:hover { background: #000; }
.arch-text { display: flex; flex-direction: column; min-width: 0; }
.arch-title { font-weight: 650; font-size: 16px; }
.arch-detail { font-size: 13px; color: var(--ink-3); }
.arch[data-recommended] .arch-detail { color: #c9c3b8; }
.win-glyph { width: 20px; height: 20px; flex: none; fill: currentColor; }
.arch .win-glyph { width: 24px; height: 24px; }
.arch:not([data-recommended]) .win-glyph { fill: #2d7ae0; }
.btn .win-glyph { width: 15px; height: 15px; }
.windows-hero .requirements a { color: var(--ink); font-weight: 600; }

/* A Windows 11 desktop, drawn rather than filmed: the island listening, Settings open, the pointer on
   Battery saver. Sizes are in em off the desk's width so it scales as one picture. */
.monitor { background: #1b1b1d; border-radius: 16px; padding: 12px; box-shadow: 0 0 0 1.5px #3a3a3e inset, 0 30px 70px rgba(0, 0, 0, .18); }
.desk { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; container-type: inline-size; font-size: clamp(7px, 1.3cqi, 12px); text-align: left; background: radial-gradient(70% 90% at 70% 110%, #2f6fe0 0%, rgba(47, 111, 224, 0) 60%), radial-gradient(60% 80% at 20% 0%, #9fc3f5 0%, rgba(159, 195, 245, 0) 70%), linear-gradient(160deg, #d6e6fb 0%, #8fb4ef 55%, #3d6fd1 100%); }
.stand { width: 18%; height: 34px; margin: 0 auto; background: linear-gradient(#bdbdc2, #9b9ba1); clip-path: polygon(30% 0, 70% 0, 85% 100%, 15% 100%); }
.desk .island { width: 52%; height: 15%; border-radius: 0 0 2.4cqi 2.4cqi; }
.desk .island .island-content { opacity: 1; }
.desk .keys { color: #a8a8a8; }

.w-win { position: absolute; left: 11%; top: 19%; width: 70%; height: 66%; background: #F3F3F3; border-radius: .8cqi; box-shadow: 0 1.4cqi 4cqi rgba(10, 30, 70, .35), 0 0 0 1px rgba(0, 0, 0, .06); color: #1b1b1b; display: flex; flex-direction: column; overflow: hidden; }
.w-title { display: flex; justify-content: space-between; align-items: center; padding: .6em 1em; font-size: .95em; }
.w-controls { display: flex; gap: 1.6em; }
.w-controls i { width: .8em; height: .8em; border: 1.5px solid #555; border-radius: 1px; }
.w-controls i:first-child { height: 0; border-width: 1.5px 0 0; align-self: center; }
.w-controls i:last-child { border: 0; background: linear-gradient(45deg, transparent 44%, #555 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #555 44% 56%, transparent 56%); }
.w-body { display: flex; flex: 1; min-height: 0; }
.w-side { width: 33%; padding: .4em .8em; display: flex; flex-direction: column; gap: .2em; }
.w-side > div { display: flex; align-items: center; gap: .8em; padding: .45em .7em; border-radius: .4em; white-space: nowrap; }
.w-side > div.active { background: #e6e6e6; position: relative; }
.w-side > div.active::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 2px; background: #0067c0; }
.w-side > .w-user { padding: .2em .4em .7em; gap: .7em; line-height: 1.25; }
.w-user small { color: #666; font-size: .85em; }
.w-avatar { width: 2.6em; height: 2.6em; border-radius: 50%; background: linear-gradient(135deg, #f7b26a, #e5603c); flex: none; }
.w-side > .w-search { background: #fff; border-bottom: 1.5px solid #8a8a8a; border-radius: .4em; color: #777; margin-bottom: .5em; }
.w-ico { width: 1.1em; height: 1.1em; border-radius: .25em; flex: none; }
.w-ico-blue { background: #0067c0; } .w-ico-teal { background: #0f9fb5; } .w-ico-indigo { background: #4f5bd5; } .w-ico-orange { background: #e8833a; } .w-ico-grey { background: #7a7a7a; } .w-ico-green { background: #2f9e57; }
.w-main { flex: 1; padding: .4em 1.6em 1em .6em; }
.w-main h4 { margin: 0 0 .8em; font-size: 1.7em; font-weight: 600; letter-spacing: -.01em; }
.w-main h4 span { color: #888; font-weight: 400; }
.w-battery { display: flex; align-items: center; gap: 1em; margin-bottom: .9em; }
.w-battery b { font-size: 1.5em; font-weight: 600; }
.w-meter { width: 5em; height: 1.2em; border: 1.5px solid #333; border-radius: .25em; padding: 1.5px; }
.w-meter i { display: block; height: 100%; width: 82%; background: #2f9e57; border-radius: 1px; }
.w-row { position: relative; display: flex; justify-content: space-between; align-items: center; background: #fbfbfb; border: 1px solid #e5e5e5; border-radius: .4em; padding: 1em 1.2em; margin-bottom: .35em; }
.w-row > span { color: #555; }
.w-toggle { display: inline-flex; align-items: center; gap: .6em; }
.w-toggle::after { content: ""; width: 2.6em; height: 1.3em; border-radius: 1em; border: 1.5px solid #666; box-sizing: border-box; background: radial-gradient(circle at 30% 50%, #666 0 .3em, transparent .32em); }
.w-mark { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.w-mark rect { fill: rgba(240, 69, 43, .08); stroke: var(--pointer); stroke-width: 2; }
.w-target .pointer { left: 72%; top: 58%; width: 2cqi; height: 2cqi; animation: w-hover 2.4s ease-in-out infinite; }
.w-target .bubble { right: 30%; top: 112%; }
@keyframes w-hover { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -4px); } }
@media (prefers-reduced-motion: reduce) { .w-target .pointer { animation: none; } }

.taskbar { position: absolute; inset: auto 0 0 0; height: 7%; background: rgba(238, 242, 249, .82); border-top: 1px solid rgba(255, 255, 255, .6); display: flex; align-items: center; justify-content: center; gap: 1.2em; }
.taskbar > i { width: 1.7em; height: 1.7em; border-radius: .35em; background: #4f7fd9; opacity: .75; }
.taskbar > i:nth-child(3) { background: #e8a33a; } .taskbar > i:nth-child(4) { background: #2f9e57; } .taskbar > i:nth-child(5) { background: #7a5bd5; }
.taskbar > .tb-start { opacity: 1; background: conic-gradient(#0a74da 0 25%, #1c8bf0 0 50%, #0a74da 0 75%, #1c8bf0 0); border-radius: .2em; }
.tb-tray { position: absolute; right: 1.4em; display: flex; align-items: center; gap: .8em; color: #222; font-size: .95em; }
.tb-clicky { display: block; width: 1.4em; height: 1.4em; border-radius: .35em; background: url("/assets/app-icon.png") center / cover; }

/* Install steps and keys */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: none; }
.steps li, .key-card { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.steps h3, .key-card h3 { margin: 14px 0 6px; font-size: 18px; }
.steps p, .key-card p { margin: 0; color: var(--ink-2); font-size: 15px; }
.steps code { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.step-number { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pointer); color: #fff; font-weight: 700; font-size: 14px; }
.keys-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.key-card .keycaps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--ink-3); font-weight: 600; font-size: 14px; min-height: 32px; }
.key-card .keycaps kbd { font-size: 14px; }
.key-card p:last-child { font-size: 14px; }
#same .points { margin-bottom: 32px; }
#same .points code { font-size: 14px; color: var(--ink); }
.credit { display: flex; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 18px; background: var(--paper-deep); }
.credit img { flex: none; border-radius: 11px; }
.credit p { margin: 0; color: var(--ink-2); }
.credit a { color: var(--ink); font-weight: 600; }
.faq code { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }

.windows-try { padding-top: 96px; }
.windows-try .btn-ghost { color: #EDE9E1; box-shadow: inset 0 0 0 1.5px rgba(237, 233, 225, .35); }
.windows-try .btn-primary .win-glyph { fill: #2d7ae0; }

@media (max-width: 960px) { .keys-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .arch-picker { grid-template-columns: 1fr; }
  .keys-grid { grid-template-columns: 1fr; }
  .nav-links a[href="#install"] { display: none; }
  .credit { flex-direction: column; align-items: flex-start; }
  .windows-try { padding-top: 64px; }
}