:root {
  color-scheme: light;
  --paper: #f8f4ee;
  --ink: #211e25;
  --muted: #655c65;
  --line: #ded6d1;
  --accent: #563a92;
  font-family: "Geist", "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }
p { line-height: 1.75; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #805ed0; outline-offset: 4px; }
.shell { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.skip { position: fixed; z-index: 3; top: 1rem; left: 1rem; padding: 12px; background: white; clip-path: inset(50%); }
.skip:focus { clip-path: none; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }

.site-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}
.wordmark { display: inline-flex; gap: 9px; align-items: center; font-weight: 800; letter-spacing: -.04em; text-decoration: none; font-size: 24px; }
.site-header nav, .site-footer > div { display: flex; align-items: center; gap: clamp(14px, 3vw, 36px); font-size: 14px; font-weight: 600; }
.site-header nav a, .site-footer a { text-decoration: none; }
.site-header nav a:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero { padding-top: clamp(38px, 7vw, 92px); }
.hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  column-gap: 28px;
  align-items: end;
  margin-bottom: clamp(26px, 4vw, 46px);
}
.platform { grid-column: 1 / -1; margin: 0 0 12px; color: var(--accent); font-weight: 700; font-size: 13px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(54px, 9.2vw, 126px); font-weight: 850; line-height: .99; letter-spacing: -.097em; word-break: keep-all; }
h1 em { color: var(--accent); font-style: normal; }
.hero-intro { display: grid; justify-items: start; align-content: end; gap: 12px; padding-bottom: 2px; }
.hero-intro p, .section-intro p { color: var(--muted); max-width: 35ch; font-size: clamp(14px, 1.55vw, 18px); word-break: keep-all; }
.primary { display: inline-flex; align-items: center; gap: 24px; padding: 13px 19px; min-height: 48px; border-radius: 10px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 700; transition: background .18s, translate .18s; }
.primary:hover { background: var(--accent); translate: 0 -2px; }
.primary > span { font-size: 18px; }
.small-link { font-size: 13px; color: var(--muted); text-underline-offset: 4px; }

.demo { margin: 0; }
.demo-stage {
  padding: clamp(12px, 4.1vw, 57px);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 83% 90%, #6b457f 0%, transparent 53%),
    radial-gradient(ellipse at 15% 10%, #764653 0%, transparent 50%),
    #261e3d;
}
.browser-demo {
  color: #f8f3ff;
  background: #211d31;
  border: 1px solid #fff4;
  border-radius: clamp(8px, 1.8vw, 18px);
  overflow: hidden;
  box-shadow: 0 24px 70px #0e0a27a0, inset 0 1px 0 #ffffff1a;
  font-size: clamp(9px, 1.15vw, 13px);
}
.mock-top { display: flex; height: clamp(29px, 4.9vw, 54px); align-items: center; gap: 10px; padding-inline: clamp(8px, 1.3vw, 18px); background: #2a2538; }
.mock-top-name { font-weight: 700; }
.mock-address { display: flex; flex: 1; align-items: center; gap: 9px; min-width: 0; padding: 5px 9px; border: 1px solid #fff2; border-radius: 7px; background: #171522; color: #e0d7eb; }
.mock-address span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mock-address kbd { color: #e5d8ef; font-size: .8em; white-space: nowrap; }
.mock-window { white-space: nowrap; letter-spacing: .17em; }
.mock-body { display: grid; grid-template-columns: minmax(105px, 18%) minmax(0, 1fr); }
.mock-sidebar { display: flex; flex-direction: column; gap: 8px; min-width: 0; background: #252133; padding: clamp(8px, 1.5vw, 19px) clamp(7px, 1.25vw, 15px); }
.mock-sidebar > span { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-sidebar .mock-space { justify-content: space-between; padding: 7px; border: 1px solid #fff2; border-radius: 7px; }
.mock-space > span:first-child { color: #c3a8ff; }
.mock-new, .mock-tab { padding: 6px 8px; }
.mock-tab.current { background: #4a3f61; border-radius: 6px; }
.mock-tab > span { color: #e3c6ff; }
.mock-label { color: #c4b7d0; font-size: .82em; padding-inline: 8px; }
.mock-sidebar .mock-bottom { margin-top: auto; justify-content: center; color: #dcc9f2; }
.mock-page { min-width: 0; aspect-ratio: 1.9; min-height: 270px; position: relative; display: grid; justify-items: center; grid-template-rows: auto 1fr; isolation: isolate; overflow: hidden; }
.demo-wallpaper, .mock-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mock-shade { z-index: -1; background: linear-gradient(180deg, #060a1c59, #08102440 50%, #11102066); }
.mock-page-nav { display: flex; gap: clamp(6px, 1.3vw, 15px); justify-content: center; align-items: center; margin-top: clamp(7px, 1.8vw, 19px); padding: 6px 8px; border: 1px solid #ffffff3d; border-radius: 8px; background: #17172ba0; backdrop-filter: blur(12px); white-space: nowrap; }
.mock-page-nav b { background: #ffffff2b; padding: 4px 7px; border-radius: 4px; }
.mock-home { display: grid; justify-items: center; align-self: center; margin-top: -10px; gap: 7px; width: 100%; padding: 0 10px; }
.mock-place { background: #18172ac9; border: 1px solid #fff3; padding: 3px 8px; border-radius: 5px; }
.mock-place > span:first-child { color: #d5b4ff; }
.mock-clock { font-size: clamp(47px, 8vw, 94px); font-weight: 900; letter-spacing: -.09em; line-height: 1; font-variant-numeric: tabular-nums; padding-inline: .06em; color: #f9e8ff; }
@supports (background-clip: text) {
  .mock-clock { background: linear-gradient(110deg, #ffb3e9 7%, #fbb9f3 24%, #cebaff 50%, #83ddff 77%, #b1ffef 94%); background-clip: text; color: transparent; }
}
.mock-search { display: flex; align-items: center; gap: 8px; justify-content: flex-start; width: min(370px, 85%); padding: 9px 12px; background: #15182ac7; border: 1px solid #ffffff5c; border-radius: 9px; backdrop-filter: blur(12px); }
.mock-dials { display: flex; gap: 6px; margin-top: 6px; }
.mock-dials > span { display: grid; justify-items: center; gap: 4px; min-width: clamp(37px, 6.2vw, 76px); background: #13152cc2; border: 1px solid #fff3; padding: 7px 4px; border-radius: 8px; backdrop-filter: blur(12px); }
.mock-dials i { display: grid; place-items: center; width: 19px; height: 19px; background: #fff; border-radius: 5px; color: #405dce; font-style: normal; font-weight: 800; }
.mock-dials > span:nth-child(2) i { color: #c32345; }
.mock-dials > span:nth-child(3) i { color: #087b4b; }

.demo-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.demo-caption > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.demo-caption strong { font-size: 15px; }
.demo-caption > div:first-child > span { color: var(--muted); font-size: 13px; }
.weather-switch { display: flex; gap: 5px; background: #eee8e3; border-radius: 11px; padding: 4px; }
.weather-switch button { min-height: 36px; min-width: 53px; padding: 5px 8px; white-space: nowrap; color: var(--ink); cursor: pointer; border: 0; background: transparent; border-radius: 7px; }
.weather-switch button:hover { background: #ded4dc; }
.weather-switch button[aria-pressed="true"] { color: #fff; background: #47336e; }

.features, .download { margin-top: clamp(68px, 10vw, 144px); scroll-margin-top: 26px; }
.section-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
h2 { font-size: clamp(37px, 5.7vw, 73px); line-height: 1.07; letter-spacing: -.079em; word-break: keep-all; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.feature { display: grid; align-content: space-between; overflow: hidden; gap: 21px; border: 1px solid #24133114; border-radius: 20px; padding: clamp(19px, 3vw, 34px); }
.feature h3 { font-size: clamp(20px, 2.7vw, 32px); letter-spacing: -.055em; line-height: 1.2; word-break: keep-all; }
.feature p { color: #514654; margin-top: 8px; max-width: 38ch; font-size: 15px; word-break: keep-all; }
.feature-space { background: #ece4f4; }
.feature-split { background: #f4e6d8; }
.feature-search { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; background: #e6e9f6; }
.feature kbd { background: #fff9; border: 1px solid #c7c9df; border-radius: 4px; padding: 1px 4px; white-space: nowrap; font-size: .8em; }
.space-preview, .split-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
.space-preview > div, .split-preview > div, .search-preview { min-width: 0; border: 1px solid #2e193620; border-radius: 11px; padding: 12px; background: #fbf8ff; box-shadow: 0 5px 15px #3824500d; }
.space-preview > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; }
.space-dot { width: 10px; height: 10px; border-radius: 50%; }
.purple { background: #8061c0; }
.orange { background: #c87340; }
.space-item { grid-column: 1 / -1; border-radius: 6px; padding: 7px 8px; color: #54415e; background: #f0eaf8; font-size: 12px; }
.split-preview > div { display: grid; align-content: start; gap: 8px; background: #fffaf4; }
.split-preview span { font-size: 11px; color: #68554b; }
.split-preview img { width: 100%; height: auto; border-radius: 6px; }
.split-preview b { font-size: 13px; word-break: keep-all; }
.split-preview i { height: 4px; width: 85%; border-radius: 2px; background: #ddcfc6; }
.split-preview i:last-child { width: 53%; }
.search-preview { display: grid; gap: 9px; }
.search-preview > div { display: grid; gap: 3px; font-size: 13px; }
.search-preview .search-preview-input { display: flex; gap: 6px; border: 1px solid #cdd0e4; border-radius: 7px; background: #fff; padding: 7px 9px; }
.search-preview small { padding-left: 8px; color: #615474; }
.search-preview span { background: #eeebf8; border-radius: 6px; padding: 6px 8px; }

.download { margin-bottom: clamp(46px, 7vw, 95px); }
.download-panel { display: grid; justify-items: center; text-align: center; gap: 12px; padding: clamp(34px, 7vw, 76px) 18px; border: 1px solid #ddd2e3; border-radius: 24px; background: radial-gradient(ellipse at top, #e6d6f1, #f1e9f0 64%, #f6efe9); }
.download-panel > p { color: var(--muted); }
.download-panel .primary { margin-block: 6px 2px; }
.release-links { display: flex; gap: 18px; font-size: 14px; text-underline-offset: 4px; }
.download-panel .install-note { max-width: 41ch; font-size: 13px; word-break: keep-all; }
.site-footer { min-height: 78px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.site-footer .wordmark { font-size: 20px; }

@media (max-width: 760px) {
  .shell { width: calc(100% - 38px); }
  .hero-copy { grid-template-columns: 1fr; row-gap: 18px; }
  .platform { margin-bottom: -9px; }
  .hero-intro { gap: 9px; }
  .section-intro { display: grid; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-search { grid-column: auto; grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .shell { width: calc(100% - 28px); }
  .site-header { min-height: 60px; }
  .site-header nav, .site-footer > div { gap: 12px; font-size: 12px; }
  .wordmark { font-size: 21px; }
  .wordmark img { width: 26px; height: 26px; }
  .demo-stage { padding: 8px; border-radius: 13px; }
  .mock-body { grid-template-columns: minmax(0, 1fr); }
  .mock-sidebar, .mock-top-name { display: none; }
  .mock-page { min-height: 220px; }
  .demo-caption { align-items: flex-start; flex-direction: column; }
  .weather-switch { width: 100%; }
  .weather-switch button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .primary { transition: none; }
}