@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jost-latin.woff2") format("woff2");
}

:root {
  --sky-1: #163e73;
  --sky-2: #3f7bb8;
  --sky-3: #f3c29a;
  --haze-blue: 86 138 171;
  --haze-peach: 243 194 154;
  --haze-mist: 194 192 197;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.1 0 0 0 0 0.18 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --ink: #0f1b2d;
  --ink-2: #4b5768;
  --ink-3: #7a8494;
  --paper: #f6f7f9;
  --line: rgb(15 27 45 / 0.22);
  --accent: #163e73;
  --accent-hover: #0f2f5a;
  --focus: #2f6fd6;

  --display: "Jost", "Futura", -apple-system, system-ui, sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero: clamp(2.5rem, 4.4vw, 3.75rem);
  --fs-h2: clamp(2rem, 3.8vw, 3.25rem);
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-tiny: 0.8125rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 144px;

  --r-button: 10px;
  --r-window: 12px;
  
  --page: 1200px;
  --shadow-window: 0 0 0 1px rgb(8 18 36 / 0.3), 0 40px 80px -12px rgb(8 22 48 / 0.32), 0 12px 24px rgb(8 22 48 / 0.14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--ui);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--grain),
    radial-gradient(ellipse 620px 520px at 92% 140px, rgb(var(--haze-peach) / 0.7), transparent 72%),
    radial-gradient(ellipse 520px 640px at 4% 520px, rgb(var(--haze-blue) / 0.38), transparent 72%),
    radial-gradient(ellipse 700px 560px at 78% 1900px, rgb(var(--haze-mist) / 0.8), transparent 72%),
    radial-gradient(ellipse 560px 700px at 10% 2900px, rgb(var(--haze-peach) / 0.55), transparent 72%),
    radial-gradient(ellipse 760px 520px at 88% 3700px, rgb(var(--haze-blue) / 0.3), transparent 72%),
    radial-gradient(ellipse 600px 600px at 18% 4300px, rgb(var(--haze-mist) / 0.75), transparent 72%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

img { display: block; max-width: 100%; height: auto; }

code { font-family: var(--mono); font-size: 0.88em; letter-spacing: 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 600; text-wrap: balance; }

p, dd { text-wrap: pretty; }

.desk {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--sp-9);
}

.desk::before {
  content: "";
  position: absolute;
  inset: 0 0 34%;
  z-index: -1;
  background:
    linear-gradient(to right, rgb(246 247 249 / 0.86) max(20%, calc(50% - 250px)), rgb(246 247 249 / 0.5) max(36%, calc(50% + 40px)), transparent max(56%, calc(50% + 260px))),
    var(--sky-2) url(img/wallpaper.webp) center 12% / cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, #000 62%, transparent);
}

.menubar {
  height: 44px;
  padding: 0 max(var(--sp-5), calc((100% - var(--page)) / 2 + var(--sp-5)));
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  background: rgb(232 238 245 / 0.5);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
}

.menubar a { color: inherit; text-decoration: none; }
.menubar a:hover { text-decoration: underline; }
.menubar-app { font-weight: 700; }

.menubar-extra {
  margin-left: auto;
  display: inline-flex;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 6px;
  background: rgb(15 27 45 / 0.12);
}

.desk-inner {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.hero {
  max-width: 34rem;
  padding: var(--sp-9) 0 var(--sp-8);
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.lead {
  margin: var(--sp-5) 0 var(--sp-6);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
}

.button {
  display: inline-block;
  padding: 14px var(--sp-5);
  border-radius: var(--r-button);
  background: var(--accent);
  color: #fafcff;
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.button { transition: background-color 150ms ease-out, transform 100ms ease-out; }
.button:hover { background: var(--accent-hover); }
.button:active { transform: translateY(1px) scale(0.99); }

.version {
  margin-left: 0.3em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: 0.62;
}

.meta {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
}

.stage {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.shot {
  width: 100%;
  border-radius: var(--r-window);
  box-shadow: var(--shadow-window);
}

.zoomable {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-window);
}

.shot-window { width: 84%; }

.shot-panel {
  position: absolute;
  z-index: 1;
  top: 6px;
  right: var(--sp-5);
  width: 300px;
}

.notes {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7);
}

.notes dt { font-weight: 600; font-size: var(--fs-body); }

.notes dt, .limits dt { display: flex; align-items: flex-start; gap: var(--sp-2); }

.ico {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notes dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.feature { padding-top: var(--sp-10); }

.feature-head {
  max-width: var(--page);
  margin: 0 auto var(--sp-7);
  padding: 0 var(--sp-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: end;
}

.feature h2 {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.018em;
}

.feature-head p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
}

.limits {
  max-width: var(--page);
  margin: 0 auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

.limits h2 { margin-bottom: var(--sp-7); }

.limits dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--sp-6);
}

.limits dl div { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.limits dt { font-weight: 600; }
.limits dd { margin: var(--sp-1) 0 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }

.closing {
  margin-top: var(--sp-8);
  padding: calc(var(--sp-10) + var(--sp-9)) var(--sp-5) var(--sp-6);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sp-10));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sp-10));
  text-align: center;
  color: var(--ink);
  background: radial-gradient(ellipse 34% 42% at 50% 46%, rgb(251 233 214 / 0.92) 0%, rgb(251 233 214 / 0.7) 45%, rgb(251 233 214 / 0) 100%), var(--sky-3) url(img/wallpaper.webp) center 62% / cover;
}

.closing img {
  margin: 0 auto var(--sp-5);
  filter: drop-shadow(0 10px 20px rgb(8 22 48 / 0.35));
}

.closing h2 { font-size: var(--fs-h2); letter-spacing: -0.018em; line-height: 1.06; }

.closing p { margin: var(--sp-3) auto var(--sp-6); max-width: 32em; color: var(--ink-2); }

.foot {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.foot p { margin: 0; }
.foot p:first-child { display: flex; align-items: center; gap: 0.4em; }
.foot a { color: inherit; }
.maker { display: flex; }

.codcube-mark {
  display: block;
  width: 1.75em;
  height: 1.3em;
  overflow: visible;
  fill: none;
  opacity: 0.75;
}

.codcube-mark .cc-core { stroke: #90a4ae; stroke-width: 10; transform-box: fill-box; transform-origin: center; }
.codcube-mark .cc-left, .codcube-mark .cc-right { stroke: #4fc3f7; stroke-width: 15; }

.maker:hover .codcube-mark, .maker:focus-visible .codcube-mark { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .codcube-mark .cc-core { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .codcube-mark .cc-left, .codcube-mark .cc-right { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
}

.maker:hover .cc-core, .maker:focus-visible .cc-core { transform: rotate(90deg); }
.maker:hover .cc-left, .maker:focus-visible .cc-left { transform: translateX(-14px); }
.maker:hover .cc-right, .maker:focus-visible .cc-right { transform: translateX(14px); }

@media (max-width: 900px) {
  .feature-head { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero { padding: var(--sp-8) 0 var(--sp-7); }
  .menubar-clock { display: none; }
  .menubar a { align-self: stretch; display: flex; align-items: center; }
  .maker { padding: var(--sp-2); margin: calc(var(--sp-2) * -1); }
  .closing { padding-top: calc(var(--sp-10) + var(--sp-7)); background-size: auto, auto 118%; background-position: 0 0, center top; }
  .closing { background-image: radial-gradient(ellipse 90% 34% at 50% 62%, rgb(251 233 214 / 0.92) 0%, rgb(251 233 214 / 0.72) 55%, rgb(251 233 214 / 0) 100%), url(img/wallpaper.webp); }
  .shot-window { width: 100%; }
  .shot-panel { display: none; }
  .notes { grid-template-columns: 1fr; gap: var(--sp-5); }
  .limits dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { padding-top: var(--sp-9); }
}

@media (max-width: 560px) {
  .limits dl { grid-template-columns: 1fr; }
}

.zoom {
  padding: 0;
  border: 0;
  background: none;
  max-width: 96vw;
  max-height: 96vh;
  overflow: visible;
  cursor: zoom-out;
}

.zoom::backdrop { background: rgb(10 22 40 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.zoom img {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  border-radius: var(--r-window);
  box-shadow: var(--shadow-window);
}

.zoom form { display: flex; justify-content: center; margin-top: var(--sp-3); }

.zoom-close {
  font: 500 var(--fs-small)/1 var(--ui);
  color: var(--ink);
  background: #fafcff;
  border: 0;
  border-radius: var(--r-button);
  padding: 10px var(--sp-4);
  cursor: pointer;
}

@media (max-width: 900px) {
  .zoom { width: 100vw; max-width: 100vw; overflow-x: auto; overscroll-behavior-x: contain; }
  .zoom img { width: 960px; max-width: none; max-height: none; border-radius: 0; }
  .zoom form { position: sticky; left: 0; width: 100vw; }
}

@media (prefers-reduced-motion: no-preference) {
  .zoom[open] { animation: zoom-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .zoom[open]::backdrop { animation: fade-in 200ms ease-out; }

}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.97); }
}

@keyframes fade-in {
  from { opacity: 0; }
}