/* Hex Color Codes smart-download / browser fallback (shared by /hcc/download and /hex-color-codes/download).
   A deliberately small utility page: neutral surface, one orbital motif, no screenshots. */

*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#16181d;--ink-2:#4d5058;--paper:#f1f0ec;--indigo:#574cf0;--hair:rgba(22,24,29,.18);
  --spectrum:conic-gradient(from 0deg,#ff5f6d,#ffb347,#ffe066,#4ade80,#38bdf8,#818cf8,#f472b6,#ff5f6d);
  --c1:#3d338a;--c2:#7678ed;--c3:#f7b801;--c4:#f18701;--c5:#f35b03;
}
html{background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;line-height:1.6}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:focus-visible{outline:3px solid var(--indigo);outline-offset:4px;border-radius:4px}

.bar{padding:18px clamp(20px,5vw,48px)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:650;letter-spacing:-.01em;text-decoration:none}
.brand-ring{width:24px;height:24px;border-radius:50%;background:var(--spectrum);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#000 calc(100% - 4.5px))}

main{flex:1;width:min(100%,760px);margin:0 auto;padding:clamp(16px,4vw,48px) clamp(20px,5vw,48px) clamp(48px,8vw,96px)}

/* The orbit: a hue ring with the five Daybreak palette colors travelling on it (same identity as the product page, much smaller). */
.orbit{--size:clamp(84px,26vw,128px);position:relative;width:var(--size);aspect-ratio:1;margin:0 0 clamp(16px,3vw,32px) 7px}
.orbit-spin{position:absolute;inset:0;border-radius:50%;background:var(--spectrum);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:orbit-turn 90s linear infinite}
.orbit-nodes{position:absolute;inset:0;animation:orbit-turn 90s linear infinite}
.orbit-nodes i{position:absolute;left:50%;top:50%;width:14px;aspect-ratio:1;margin:-7px;border-radius:50%;background:radial-gradient(circle,#f1f0ec 0 27%,var(--c) 29%);box-shadow:0 0 0 2px var(--paper);transform:rotate(var(--a)) translateY(calc(var(--size) * -.5))}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.orbit-spin,.orbit-nodes{animation:none}}

h1{margin:0;font-size:clamp(36px,7vw,60px);font-weight:700;line-height:1.04;letter-spacing:-.036em}
.sub{margin:14px 0 0;max-width:28em;font-size:clamp(16px,2.2vw,20px);color:var(--ink-2)}

.redirecting{margin:24px 0 0;font-size:15px;font-weight:600;color:var(--indigo)}
.redirecting[hidden]{display:none}

.platforms{margin-top:clamp(32px,5vw,52px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:0 clamp(28px,6vw,72px)}
.platform{border-top:1px solid var(--hair);padding-top:18px;padding-bottom:8px}
.platform h2{margin:0;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.state{display:flex;align-items:center;gap:10px;margin:8px 0 0;font-size:clamp(19px,2.6vw,24px);font-weight:650;letter-spacing:-.02em}
.dot{flex:none;width:9px;height:9px;border-radius:50%;background:#2f9e5b}
.dot--soon{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.note{margin:10px 0 0;max-width:30em;color:var(--ink-2);font-size:16px}
.store-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;margin-top:22px;padding:13px 24px;border-radius:10px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:background-color .18s ease,transform .18s ease}
.store-btn:hover{background:#2b2d35;transform:translateY(-1px)}
.store-btn svg{width:20px;height:20px;flex:none;fill:currentColor}

.links{margin:clamp(28px,4vw,44px) 0 0;display:flex;flex-wrap:wrap;gap:0 28px}
.links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.links a:hover{color:var(--indigo)}

@media(max-width:620px){
  .platforms{grid-template-columns:1fr}
  .platform+.platform{margin-top:20px}
  .store-btn{width:100%;justify-content:center}
}
/* short landscape phones: keep the actions reachable without a tall stack */
@media(max-height:480px) and (orientation:landscape){
  .bar{padding-top:6px;padding-bottom:0}
  main{position:relative;padding-top:0}
  .orbit{--size:64px;position:absolute;right:clamp(20px,5vw,48px);top:8px;margin:0}
  h1{font-size:34px}
  .sub{margin-top:6px}
  .platforms{margin-top:16px}
  .platform{padding-top:12px}
  .state{margin-top:4px}
  .note{display:none}
  .store-btn{margin-top:12px;min-height:48px}
  .links{margin-top:6px}
}