@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/plex-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body { margin: 0; padding: 0; background: #121212; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { color: #ededed; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.page { min-height: 100vh; padding: 0 24px; }
a { color: #ededed; text-decoration: underline; text-decoration-color: #555555; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: #ffffff; text-decoration-color: #FFD43B; text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid #FFD43B; outline-offset: 3px; }
::selection { background: #FFD43B; color: #111111; }
code { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 0.9em; background: #1f1f1f; color: #e6e6e6; padding: 2px 6px; border-radius: 2px; overflow-wrap: anywhere; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.skip { position: absolute; left: -9999px; top: 8px; background: #FFD43B; color: #111111; padding: 8px 14px; z-index: 10; }
.skip:focus { left: 16px; }

.nav-link { text-decoration: none; color: inherit; padding: 10px 0; }
.nav-link:hover { color: #ffffff; }
.btn { display: inline-block; text-decoration: none; padding: 14px 24px; border-radius: 2px; }
.btn-primary { background: #FFD43B; color: #111111; border: 1px solid #FFD43B; }
.btn-primary:hover { background: #ffe066; border-color: #ffe066; color: #111111; }
.btn-ghost { color: #ededed; border: 1px solid #3a3a3a; }
.btn-ghost:hover { border-color: #ededed; color: #ffffff; }

.br { position: absolute; width: 18px; height: 18px; border-color: #ededed; border-style: solid; border-width: 0; pointer-events: none; }
.br-tl { top: -1px; left: -1px; border-top-width: 3px; border-left-width: 3px; }
.br-tr { top: -1px; right: -1px; border-top-width: 3px; border-right-width: 3px; }
.br-bl { bottom: -1px; left: -1px; border-bottom-width: 3px; border-left-width: 3px; }
.br-brr { bottom: -1px; right: -1px; border-bottom-width: 3px; border-right-width: 3px; }

.tui { height: 100%; overflow: auto; color: #d6d6d6; padding: 28px 32px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 18px; }
.tui-line { white-space: pre; min-height: 18px; }
.t-d { color: #4d4d4d; }
.t-c { color: #FFD43B; }
.t-g { color: #8CF0A0; }
.t-a { color: #ff7a59; }
.t-m { color: #8a8a8a; }
.t-w { color: #e3b341; }
.t-b { font-weight: 700; color: #ffffff; }

.frame { position: relative; }
.pv { background: #0b0b0b; border: 1px solid #262626; height: 456px; overflow: hidden; }
.pv-soon { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; text-align: center; }

/* Phones: every product shows its own preview, nothing to switch. */
.sw { display: flex; flex-direction: column; gap: 64px; }
.product { display: flex; flex-direction: column; gap: 24px; }
.info { display: flex; flex-direction: column; }
.tile-btn { all: unset; color: #ffffff; }
.tile-bottom { margin-top: auto; padding-top: 14px; }

/* Wide screens: one shared preview above three columns; a column picks what it shows. */
@media (min-width: 901px) {
  .sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .product { display: contents; }
  .frame { grid-row: 1; grid-column: 1 / -1; }
  .product:not(.is-on) .frame { visibility: hidden; }
  .info { grid-row: 2; }
  .product:nth-child(1) .info { grid-column: 1; }
  .product:nth-child(2) .info { grid-column: 2; }
  .product:nth-child(3) .info { grid-column: 3; }
  .tile-btn { cursor: pointer; color: #8f8f8f; transition: color 0.2s; }
  .tile-btn::before { content: ''; display: inline-block; width: 0; height: 10px; margin-right: 0; background: #FFD43B; vertical-align: middle; transform: translateY(-2px); transition: width 0.2s, margin-right 0.2s; }
  .product.is-on .tile-btn::before { width: 10px; margin-right: 12px; }
  .info:hover .tile-btn, .product.is-on .tile-btn { color: #ffffff; }
}

.role-1, .role-2 { color: #8f8f8f; display: inline-block; }
.role-1 { font-size: 12px; transform: translateY(-1.1em); }
.role-2 { font-size: 11px; transform: translateY(-0.7em); }

.del { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; }
.heart { position: relative; display: inline-block; }
.heart svg { position: absolute; left: 50%; top: calc(85% + 1px); width: clamp(4.2px, 0.544vw, 7.4px); height: clamp(3.4px, 0.442vw, 6px); transform: translateX(-45%); overflow: visible; }

@keyframes cbFade { from { opacity: 0; } to { opacity: 1; } }
.fade { animation: cbFade 0.35s ease both; }
@keyframes cbIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.enter { animation: cbIn 0.7s cubic-bezier(.2,.7,.2,1) both; }
.enter-2 { animation: cbIn 0.7s 0.12s cubic-bezier(.2,.7,.2,1) both; }
.enter-3 { animation: cbIn 0.7s 0.24s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enter, .enter-2, .enter-3, .fade { animation: none; }
}

@media (max-width: 900px) {
  .frame-soon { display: none; }
  .del { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .section { padding: 72px 0 !important; }
  .hero { padding: 56px 0 40px !important; }
  .tui { font-size: 11px; line-height: 15px; padding: 20px; }
  .tui-line { min-height: 15px; }
  .pv { height: auto; }
  .card { padding: 24px !important; }
}

@media (max-width: 600px) {
  .role-1 { font-size: 10px; transform: translateY(-0.45em); }
  .role-2 { font-size: 9px; transform: translateY(-0.3em); }
}