/* Hanami's design system (DESIGN.md), on the web. */
@font-face {
  font-family: "Inter";
  src: url("assets/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --base: #110f16;
  --text: #ece6ee;
  --dim: #9b93a3;
  --accent: #f4b6c8;
  --edge: rgb(255 255 255 / 9%);
  --fill: rgb(255 255 255 / 5%);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 56px;
  --space-7: 96px;
  --radius: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--base); }

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
}

/* As tall as the viewport with a phone's address bar hidden, so the canvas
   keeps its size while the bar slides in and out. */
#petals {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

main, footer {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--dim); }
a:hover { text-decoration-color: var(--accent); }

.hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) 0 var(--space-6);
}

h1 {
  margin: 0 0 var(--space-3);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lead {
  margin: 0 0 var(--space-5);
  max-width: 34em;
  font-size: 18px;
  color: var(--text);
}

.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.button {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--fill);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, transform 80ms ease-out;
}
.button:hover { border-color: var(--dim); background: rgb(255 255 255 / 8%); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Pink means "this one": the download for the visitor's own system. */
.button.mine { background: var(--accent); border-color: var(--accent); color: var(--base); }
.button.mine:hover { background: #f8c9d6; border-color: #f8c9d6; }

.meta { margin: 0; font-size: 13px; color: var(--dim); }
.meta a { color: var(--dim); }

/* The live panel: the app's tokens (DESIGN.md) in CSS. */
.demo-wrap { position: relative; width: 340px; height: 440px; }
.demo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: rgb(23 20 29 / 72%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  outline: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out, border-color 120ms ease-out;
}
.demo:focus-visible { border-color: rgb(244 182 200 / 40%); }
.demo.away { opacity: 0; transform: scale(0.98); pointer-events: none; }
.demo-petals { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-body { position: relative; display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-4); }
.demo-head { display: flex; align-items: center; gap: var(--space-3); padding: 0 14px 6px; }
.demo-title { flex: 1; overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.demo-title.typing { font-weight: 400; }
.demo-count { font-size: 11px; color: var(--dim); }
.demo-help {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.demo-help:hover, .demo-help:focus-visible { background: var(--fill); color: var(--text); outline: none; }
.demo-list { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; overflow: hidden; list-style: none; }
.demo-buttons { display: flex; gap: var(--space-1); }
.demo-row {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px 0 10px;
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease-out;
}
.demo-name { flex: 1; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; transition: color 120ms ease-out; }
.demo-label { font-size: 11px; color: var(--dim); }
.demo-row.selected, .demo-row.renaming { background: rgb(244 182 200 / 14%); }
.demo-row.acting { gap: var(--space-1); padding: 0 6px; cursor: default; }
.demo-icon { flex: none; width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
.demo-chip {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  cursor: pointer;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.demo-chip:hover { background: var(--fill); }
.demo-chip.lit { background: rgb(244 182 200 / 14%); color: var(--accent); }
.demo-rename {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  outline: none;
}
.demo-rename::selection { background: rgb(244 182 200 / 35%); color: var(--text); }
.demo-row.selected .demo-name { color: var(--accent); }
.demo-empty { margin: auto; font-size: 11px; color: var(--dim); }
.demo-foot { margin: 0; overflow: hidden; font-size: 11px; color: var(--dim); text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.demo-foot.notice { color: var(--text); }
.demo-reopen {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--fill);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 120ms ease-out;
}
.demo-reopen:hover { border-color: var(--dim); }

section { padding: var(--space-6) 0; border-top: 1px solid var(--edge); }
.hero { border-top: 0; }

h2 {
  margin: 0 0 var(--space-4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* The videos: the size of the page's column, like a screenshot. */
.clip {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: #000;
}
.section-lead { margin: 0 0 var(--space-4); max-width: 40em; color: var(--dim); }

.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: 0;
}
.points dt { margin-bottom: var(--space-2); font-weight: 600; }
.points dd { margin: 0; color: var(--dim); font-size: 15px; }

.steps { margin: 0; padding-left: var(--space-4); color: var(--dim); }
.steps li { padding-left: var(--space-2); margin-bottom: var(--space-2); }
.steps li::marker { color: var(--dim); }
.steps a { color: var(--text); }

kbd, code {
  font-family: inherit;
  font-size: 0.9em;
  padding: 1px 6px;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: var(--fill);
  color: var(--text);
}

footer {
  padding: var(--space-5) var(--space-4) var(--space-6);
  border-top: 1px solid var(--edge);
  font-size: 13px;
  color: var(--dim);
}
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
footer a { color: var(--dim); }
footer p { margin: 0; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-6); }
  .demo-wrap { justify-self: center; max-width: 100%; }
  h1 { font-size: 44px; }
  .points { grid-template-columns: 1fr; gap: var(--space-4); }
  .button { flex: 1 1 100%; text-align: center; }
}