/* InputWeave website. The page is the app's arrangement canvas: a dotted
   ground, white screen tiles and the purple thread, in one left-aligned
   column. Colors are the app's five brand tokens plus text colors. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2?v=f01ee507") format("woff2-variations"), url("fonts/archivo-latin.woff2?v=f01ee507") format("woff2");
  font-weight: 500 900;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2002-200B, U+2010-2015, U+2018-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}

:root {
  --canvas: #ECEDF1;
  --grid: #D3D5DC;
  --tile: #FFFFFF;
  --edge: #C4C7D0;
  --thread: #8E3FD8;
  --ink: #1C1D22;
  --muted: #555863;
  --bar: #E3E4EA;
  --sel: #B4D5FE;
  --chip-bg: #1C1D22;
  --chip-fg: #F4F4F7;
  --display: "Archivo", "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Cantarell, Ubuntu, "Noto Sans", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #18191D; --grid: #2C2E35; --tile: #2A2C33; --edge: #41444E; --thread: #BF8CFF;
    --ink: #ECEDF1; --muted: #A4A7B2; --bar: #33353D; --sel: #3B5B86; --chip-bg: #ECEDF1; --chip-fg: #18191D;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55 }
html:lang(zh-Hant) body { line-height: 1.75 }
img { max-width: 100%; height: auto }
a { color: var(--thread); text-underline-offset: 0.18em }
a:hover { text-decoration-thickness: 2px }
:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; border-radius: 3px }
.skip { position: absolute; left: 12px; top: -48px; background: var(--ink); color: var(--canvas); padding: 8px 12px; border-radius: 8px; z-index: 20 }
.skip:focus { top: 12px }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Header */
.top { padding-block: 18px }
.top .wrap { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 19px; letter-spacing: -0.01em }
.brand svg { flex: none }
.nav { display: flex; gap: 6px 18px; flex-wrap: wrap; margin-left: auto; font-size: 15px }
.nav a { color: var(--ink); text-decoration: none }
.nav a:hover, .nav a[aria-current="page"] { color: var(--thread) }
.lang-switch { font-size: 14px; color: var(--ink); text-decoration: none; border: 1px solid var(--edge); background: var(--tile); border-radius: 999px; padding: 3px 12px }
.lang-switch:hover { border-color: var(--muted) }
@media (max-width: 560px) {
  .nav { margin-left: 0; order: 3; flex-basis: 100% }
  .lang-switch { margin-left: auto }
}

/* Type */
h1, h2, h3 { font-family: var(--display); color: var(--ink); text-wrap: balance; margin: 0 }
h1 { font-weight: 820; font-stretch: 116%; font-size: clamp(2.2rem, 1rem + 3.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.018em; max-width: 20ch }
h2 { font-weight: 780; font-stretch: 110%; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem); line-height: 1.12; letter-spacing: -0.01em }
h3 { font-weight: 740; font-stretch: 106%; font-size: 1.25rem; line-height: 1.25 }
html:lang(zh-Hant) h1, html:lang(zh-Hant) h2, html:lang(zh-Hant) h3 { letter-spacing: 0; font-stretch: 100%; line-height: 1.25 }
html:lang(zh-Hant) h1 { max-width: 15em }
p { margin: 0; max-width: 64ch }
.lead { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); color: var(--muted); max-width: 58ch }
.small { font-size: 14px; color: var(--muted) }
code { font-family: var(--mono); font-size: 0.86em }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 600; padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; cursor: pointer; line-height: 1.2 }
.btn-ink { background: var(--ink); color: var(--canvas) }
.btn-ink:hover { text-decoration: none; opacity: 0.9 }
.btn-line { background: var(--tile); color: var(--ink); border-color: var(--edge) }
.btn-line:hover { border-color: var(--muted); text-decoration: none }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px }

/* Sections */
.band { padding-block: clamp(56px, 7vw, 96px) }
.band + .band { border-top: 1px solid var(--edge) }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0 }
.section-head { display: flex; flex-direction: column; gap: 12px }

/* Hero */
.hero { padding-block: clamp(20px, 4vw, 40px) clamp(40px, 5vw, 64px) }
.hero .text { display: flex; flex-direction: column; gap: 20px }
.stage {
  position: relative;
  margin-top: clamp(28px, 4vw, 44px);
  border-radius: 16px;
  border: 1px solid var(--edge);
  background-color: var(--canvas);
  background-image: radial-gradient(circle, var(--grid) 1.3px, transparent 1.6px);
  background-size: 18px 18px;
  background-position: 9px 9px;
  overflow: hidden;
}
.stage svg { display: block; width: 100%; height: auto; touch-action: pan-y }
.caption { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 12px; min-height: 30px; font-size: 14px; color: var(--muted) }
.caption button { font: inherit; font-size: 13px; color: var(--ink); background: var(--tile); border: 1px solid var(--edge); border-radius: 999px; padding: 3px 11px; cursor: pointer }
.caption .turn { display: inline-flex; align-items: center; gap: 8px 12px; flex-wrap: wrap }
.caption .turn[hidden], .caption button[hidden] { display: none }
@media (hover: none) { .caption .turn-hint { display: none } }

/* Hero drawing */
.t-tile { fill: var(--tile); stroke: var(--edge); stroke-width: 1 }
.t-bar { fill: var(--bar) }
.t-pill { fill: var(--canvas); stroke: var(--edge); stroke-width: 0.6 }
.t-name { fill: var(--ink); font: 600 9.5px var(--body) }
.t-res { fill: var(--muted); font: 8px var(--body) }
.t-line { fill: var(--bar) }
.t-text { fill: var(--ink); font: 8.2px var(--mono) }
.t-sel { fill: var(--sel) }
.t-seam { fill: none; stroke: var(--thread); stroke-width: 1.8; stroke-linejoin: round }
.t-chip { fill: var(--chip-bg) }
.t-chiptext { fill: var(--chip-fg); font: 600 8.6px var(--body) }
.t-term { fill: #1E1F24 }
.t-termtext { fill: #E7E8EE; font: 8px var(--mono) }
.t-termdim { fill: #8D909B; font: 8px var(--mono) }
.t-doc { fill: var(--tile); stroke: var(--muted); stroke-width: 0.9 }
.t-docline { fill: var(--edge) }
.t-doclabel { fill: var(--ink); font: 7.6px var(--body) }
.t-badge { fill: var(--tile); stroke: var(--edge); stroke-width: 0.8 }
.t-glyph { fill: none; stroke: var(--ink); stroke-width: 0.9 }
.t-trail { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3 }
.t-glow-l { fill: url(#glowL) }
.t-glow-r { fill: url(#glowR) }
.g-thread { stop-color: var(--thread) }
#badge { transition: transform 240ms cubic-bezier(.3, 1.35, .5, 1) }
.fade { transition: opacity 220ms ease }
@media (prefers-reduced-motion: reduce) { #badge, .fade { transition: none } }

/* Things that follow the pointer */
.rows { display: grid; margin-top: 34px; border-top: 1px solid var(--edge) }
.row { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 28px; align-items: center; padding-block: 26px; border-bottom: 1px solid var(--edge) }
.row svg { width: 100%; max-width: 240px; height: auto }
.row .stack { gap: 8px }
@media (max-width: 680px) { .row { grid-template-columns: minmax(0, 1fr); gap: 14px } }

/* Screenshots */
.shots { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 22px; margin-top: 34px; align-items: start }
.shots figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.shots .frame { border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--tile) }
.shots .frame.panel { padding: 8px }
.shots img { display: block; width: 100% }
.shots figcaption { font-size: 14px; color: var(--muted) }
@media (max-width: 760px) { .shots { grid-template-columns: minmax(0, 1fr) } }

/* Steps: a real sequence, so numbered */
.steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: step }
.steps li { counter-increment: step; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.steps li::before { content: counter(step); font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: 15px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-flex; align-items: center; justify-content: center }
.code6 { font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink) }
@media (max-width: 820px) { .steps { grid-template-columns: minmax(0, 1fr) } }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 44px; margin-top: 34px }
.facts .stack { gap: 6px }
@media (max-width: 760px) { .facts { grid-template-columns: minmax(0, 1fr) } }

/* Download */
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; align-items: stretch }
.plat { position: relative; background: var(--tile); border: 1px solid var(--edge); border-radius: 14px; padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.plat.mine::after { content: ""; position: absolute; inset: 5px; border: 1.5px dashed var(--thread); border-radius: 10px; pointer-events: none }
.plat .mine-note { position: absolute; top: -11px; right: 18px; background: var(--canvas); color: var(--thread); font-size: 12px; font-weight: 600; padding: 0 8px; line-height: 22px }
.plat .mine-note[hidden] { display: none }
.plat .file { font-family: var(--mono); font-size: 13px; color: var(--ink); background: var(--canvas); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 9px; overflow-wrap: anywhere }
.plat .files { display: flex; flex-direction: column; gap: 6px }
.plat a.file { display: block; text-decoration: none; position: relative; z-index: 1 }
.plat a.file:hover { border-color: var(--thread) }
.plat .grow { flex: 1 }
.plat .btn { align-self: flex-start; position: relative; z-index: 1 }
.cmd { display: flex; gap: 8px; align-items: stretch; min-width: 0 }
.cmd code { flex: 1; min-width: 0; display: block; background: var(--canvas); border: 1px solid var(--edge); border-radius: 6px; padding: 6px 9px; font-size: 12.5px; overflow-x: auto; white-space: nowrap }
.copy-btn { font: inherit; font-size: 12px; border: 1px solid var(--edge); background: var(--tile); color: var(--ink); border-radius: 6px; padding: 3px 10px; cursor: pointer; position: relative; z-index: 1 }
.release-line { margin-top: 18px }
@media (max-width: 900px) { .platforms { grid-template-columns: minmax(0, 1fr) } }

/* License */
.lic { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center }
@media (max-width: 820px) { .lic { grid-template-columns: minmax(0, 1fr) } }
.woven { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--tile); border: 1px solid var(--edge); border-radius: 6px; color: var(--thread); font-family: var(--body); font-weight: 650; letter-spacing: 0.01em; line-height: 1.2 }
.woven::after { content: ""; position: absolute; inset: 5px; border: 1.5px dashed var(--thread); border-radius: 3px; pointer-events: none }
.woven.big { font-size: 30px; padding: 20px 38px }
.woven.sm { font-size: 13px; padding: 6px 13px }
.woven.sm::after { inset: 3px; border-width: 1px }
.trialtag { display: inline-flex; align-items: center; font-size: 13px; padding: 4px 11px; border-radius: 999px; background: var(--bar); color: var(--muted) }
.lic-demo { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border-radius: 16px; border: 1px solid var(--edge); background-color: var(--canvas); background-image: radial-gradient(circle, var(--grid) 1.2px, transparent 1.5px); background-size: 16px 16px }
.lic-demo .pair { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }

/* Document pages (license, privacy) */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; max-width: 760px }
.doc .stack { gap: 10px }
.doc h2 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem) }
.doc ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; max-width: 64ch }
.doc .effective { font-size: 14px; color: var(--muted) }
.copyline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap }
.copyline .addr { font-family: var(--mono); font-size: 15px; -webkit-user-select: all; user-select: all; background: var(--tile); border: 1px solid var(--edge); border-radius: 6px; padding: 3px 8px }

/* Footer */
.foot { padding-block: 36px 48px; border-top: 1px solid var(--edge) }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px }
.foot .links a { color: var(--ink) }
.foot .links a:hover { color: var(--thread) }
.foot .legal { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px }
.foot .addr { -webkit-user-select: all; user-select: all; color: var(--ink) }