/* ─────────────────────────────────────────────────────────────────
   HeimDNS teaser (assets/teaser.js): 1280x720 stage scaled to its
   container. Scoped under .ht so nothing leaks into the page.
   ───────────────────────────────────────────────────────────────── */

[data-teaser] {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hd-bg, #07080B);
  contain: layout paint;
}

.ht {
  --m-fg: var(--hd-fg, #ECEBE6);
  --m-dim: var(--hd-dim, #8E92A1);
  --m-faint: var(--hd-faint, #565A66);
  --m-line: var(--hd-line, #3A3D48);
  --m-bg: var(--hd-bg, #07080B);
  --m-bg2: var(--hd-bg-2, #0E1015);
  --m-bg3: #161922;
  --m-accent: var(--hd-accent, #A6E3C4);
  --m-accent2: var(--hd-accent2, #C9A6E3);
  --m-blue: var(--hd-blue, #7EB6E3);
  --m-yellow: var(--hd-yellow, #E3D28A);
  --m-red: var(--hd-red, #E38A8A);
  --m-magenta: var(--hd-magenta, #D99CD6);
  --m-orange: var(--hd-orange, #E3B07E);
  --m-green: var(--hd-green, #A6E3C4);
  --m-on-accent: var(--hd-on-accent, #07080B);
  --m-mono: var(--hd-mono, "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", "Berkeley Mono", ui-monospace, Menlo, Consolas, monospace);
}

.ht-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--m-bg);
  color: var(--m-fg);
  font-family: var(--m-mono);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  font-feature-settings: "calt" 1, "liga" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  pointer-events: none;
}
.ht-stage *, .ht-stage *::before, .ht-stage *::after { box-sizing: border-box; }

/* Faint character grid behind everything */
.ht-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--m-bg2) 1px, transparent 1px), linear-gradient(90deg, var(--m-bg2) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .55;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}

/* Colour utilities */
.ht .dim { color: var(--m-dim); }
.ht .faint { color: var(--m-faint); }
.ht .fg { color: var(--m-fg); }
.ht .acc { color: var(--m-accent); }
.ht .acc2 { color: var(--m-accent2); }
.ht .yel { color: var(--m-yellow); }
.ht .red { color: var(--m-red); }
.ht .b { font-weight: 700; }
.ht .sm { font-size: .85em; }
.ht .kbd { color: var(--m-accent2); font-weight: 700; padding: 1px 5px; border: 1px solid transparent; }
.ht .kbd.press { border-color: var(--m-accent2); background: var(--m-bg2); }
.ht .rt { font-weight: 700; }
.ht .trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht .rt.blue { color: var(--m-blue); }
.ht .rt.mag { color: var(--m-magenta); }
.ht .rt.yel { color: var(--m-yellow); }
.ht .rt.ora { color: var(--m-orange); }
.ht .rt.grn { color: var(--m-green); }

.ht-caret { display: inline-block; width: .55em; height: 1.15em; margin-right: -.55em; vertical-align: -.2em; background: var(--m-fg); }
.ht-caret.off { visibility: hidden; }

/* ── Brand ──────────────────────────────────────────────────────── */
.ht-brand { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; white-space: nowrap; transform-origin: 0 0; }
.ht-brand__row { display: flex; align-items: baseline; gap: 8px; }
.ht-brand__name { font-weight: 700; letter-spacing: .12em; }
.ht-brandsub { position: absolute; left: 0; right: 0; text-align: center; font-size: 1.1em; color: var(--m-dim); letter-spacing: .06em; }

/* ── Headline + sub ─────────────────────────────────────────────── */
.ht-head { position: absolute; left: 64px; right: 64px; top: 128px; z-index: 2; }
.ht-hl { font-size: 2.6em; font-weight: 700; line-height: 1.15; letter-spacing: .01em; }
.ht-hl .acc { margin-right: .45em; }
.ht-sub { margin-top: 10px; font-size: 1.15em; color: var(--m-dim); }

/* ── Visual area ────────────────────────────────────────────────── */
.ht-viz { position: absolute; left: 64px; right: 64px; top: 290px; bottom: 56px; z-index: 2; }

/* keys */
.ht-keys { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--m-dim); }
.ht-keys__gap { width: 26px; }
.ht-key { display: inline-block; min-width: 2em; padding: .15em .55em; text-align: center; border: 1px solid var(--m-line); background: var(--m-bg2); color: var(--m-dim); font-weight: 700; transition: none; }
.ht-key.press { border-color: var(--m-accent2); color: var(--m-accent2); background: var(--m-bg3); transform: translateY(2px); }

/* command palette */
.ht-pal { width: 720px; border: 1px solid var(--m-accent); background: var(--m-bg2); box-shadow: 0 30px 80px -30px rgba(166, 227, 196, .35); }
.ht-pal__q { padding: 14px 18px; border-bottom: 1px solid var(--m-line); font-size: 1.1em; }
.ht-pal__item { padding: 9px 18px; }
.ht-pal__item.sel { background: var(--m-bg3); color: var(--m-fg); }

/* zone view */
.ht-zone { width: 760px; border: 1px solid var(--m-line); background: var(--m-bg2); }
.ht-zone__hd { display: flex; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--m-line); }
.ht-zone__ft { padding: 8px 18px; border-top: 1px solid var(--m-line); font-size: .9em; }
.ht-row { display: grid; grid-template-columns: 70px 90px 1fr; gap: 14px; padding: 6px 18px; color: var(--m-dim); }
.ht-row .nm { color: var(--m-fg); }
.ht-row.sel { background: var(--m-bg3); color: var(--m-fg); box-shadow: inset 3px 0 0 var(--m-accent); }
.ht-row.sel .ct { color: var(--m-fg); }

/* record form */
.ht-form { width: 900px; display: flex; flex-direction: column; gap: 14px; }
.ht-form__row { display: flex; align-items: center; gap: 12px; }
.ht-lbl { color: var(--m-dim); font-size: .85em; letter-spacing: .04em; min-width: 3.2em; }
.ht-box { display: inline-block; padding: 8px 14px; border: 1px solid var(--m-line); background: var(--m-bg2); min-width: 5.5em; }
.ht-box.wide { flex: 1; }
.ht-box.focus { border-color: var(--m-accent); }
.ht-box.bad { border-color: var(--m-red); }
.ht-box.ok { border-color: var(--m-accent); }
.ht-badtok { color: var(--m-red); text-decoration: underline wavy var(--m-red); text-underline-offset: 3px; }
.ht-ins { display: flex; align-items: center; gap: 8px; font-size: .95em; padding-left: calc(3.2em + 12px); }
.ht-ins.red { color: var(--m-red); }
.ht-ins.acc { color: var(--m-accent); }
.ht-fix { margin-left: 12px; padding: 2px 10px; border: 1px solid var(--m-accent2); color: var(--m-accent2); font-weight: 700; }
.ht-fix.press { background: var(--m-accent2); color: var(--m-on-accent); }

/* mcp transcript */
.ht-term { width: 980px; border: 1px solid var(--m-line); background: var(--m-bg2); padding: 12px 20px 16px; }
.ht-term__hd { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--m-line); font-size: .85em; }
.ht-line { padding: 5px 0; white-space: nowrap; }
.ht-tool { color: var(--m-fg); font-weight: 700; padding: 0 6px; border: 1px solid var(--m-line); background: var(--m-bg3); }

/* everywhere: one UI panel at a time */
.ht-panel { position: absolute; left: 0; right: 0; top: 0; }
.ht .sp { letter-spacing: .12em; }
.ht-mode { background: var(--m-accent); color: var(--m-on-accent); font-weight: 700; padding: 0 8px; letter-spacing: .08em; font-size: .85em; }

/* web ui */
.ht-web { border: 1px solid var(--m-line); background: var(--m-bg2); font-size: .85em; line-height: 1.5; }
.ht-web__hd { display: flex; align-items: center; gap: 28px; padding: 8px 16px; border-bottom: 1px solid var(--m-line); }
.ht-web__brand { display: flex; flex-direction: column; line-height: 1.2; }
.ht-web__brand > span { display: flex; gap: 8px; align-items: baseline; }
.ht-web__nav { display: flex; gap: 18px; color: var(--m-dim); }
.ht-web__nav .fg { box-shadow: 0 2px 0 var(--m-accent); }
.ht-web__k { margin-left: auto; }
.ht-web__body { display: grid; grid-template-columns: 200px 1fr; }
.ht-web__aside { padding: 10px 14px; border-right: 1px solid var(--m-line); display: flex; flex-direction: column; gap: 4px; color: var(--m-dim); }
.ht-web__aside .sel { color: var(--m-fg); background: var(--m-bg3); margin: 0 -14px; padding: 2px 14px; }
.ht-web__main { padding: 8px 0 6px; }
.ht-web__zh { display: flex; justify-content: space-between; align-items: baseline; padding: 0 16px 8px; }
.ht-trow { display: grid; grid-template-columns: 64px 70px 1fr 64px 90px; gap: 14px; padding: 4px 16px; color: var(--m-dim); }
.ht-trow--hd { border-bottom: 1px solid var(--m-line); }
.ht-trow.sel { background: var(--m-bg3); color: var(--m-fg); box-shadow: inset 3px 0 0 var(--m-accent); }
.ht-trow.sel .trunc { color: var(--m-fg); }
.ht-web__ft { display: flex; align-items: center; gap: 16px; padding: 6px 16px; border-top: 1px solid var(--m-line); }
.ht-web__ft-r { margin-left: auto; color: var(--m-dim); }

/* tui */
.ht-tui { border: 1px solid var(--m-faint); background: var(--m-bg); padding: 10px 16px 8px; font-size: .85em; line-height: 1.5; }
.ht-tui__logo { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.ht-tui__right { margin-left: auto; }
.ht-tui__box { position: relative; margin-top: 10px; padding: 12px 0 6px; border: 1px solid var(--m-line); }
.ht-tui__title { position: absolute; top: -.8em; left: 12px; padding: 0 6px; background: var(--m-bg); color: var(--m-fg); }
.ht-tui__row { display: grid; grid-template-columns: 14px 64px 70px 1fr 64px 90px; gap: 14px; padding: 1px 12px; color: var(--m-dim); }
.ht-tui__row--hd { border-bottom: 1px solid var(--m-line); margin: 0 12px 2px; padding: 1px 0; }
.ht-tui__row.sel { background: var(--m-bg3); color: var(--m-fg); }
.ht-tui__row.sel .trunc { color: var(--m-fg); }
.ht-tui__bar { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--m-line); }

/* mobile */
.ht-ph-wrap { display: flex; align-items: center; justify-content: center; gap: 56px; }
.ht-ph { width: 236px; height: 350px; border: 2px solid var(--m-line); border-radius: 22px; background: var(--m-bg2); padding: 8px 12px; font-size: .78em; line-height: 1.45; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ht-ph__notch { width: 60px; height: 6px; margin: 0 auto 4px; border-radius: 3px; background: var(--m-line); }
.ht-ph__hd { display: flex; justify-content: space-between; align-items: baseline; }
.ht-ph__zone { display: flex; flex-direction: column; margin: 4px 0 2px; }
.ht-ph__card { display: grid; grid-template-columns: 44px 40px 1fr; gap: 8px; align-items: baseline; padding: 6px 8px; border: 1px solid var(--m-line); background: var(--m-bg); }
.ht-ph__card.sel { border-color: var(--m-accent); }
.ht-ph__ct { font-size: .9em; }
.ht-ph__fab { margin-top: auto; text-align: center; padding: 6px; background: var(--m-accent); color: var(--m-on-accent); font-weight: 700; }
.ht-ph__side { display: flex; flex-direction: column; gap: 10px; font-size: .95em; }

/* agent */
.ht-ag { border: 1px dashed var(--m-line); background: var(--m-bg2); font-size: .85em; line-height: 1.5; }
.ht-ag__hd { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 16px; border-bottom: 1px solid var(--m-line); }
.ht-ag__body { display: grid; grid-template-columns: 1fr 1.25fr; }
.ht-ag__col { padding: 12px 16px; }
.ht-ag__term { border-left: 1px solid var(--m-line); }
.ht-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ht-chip { padding: 1px 8px; border: 1px solid var(--m-line); background: var(--m-bg3); }
.ht-ag__cli { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--m-line); }

/* ── End card ───────────────────────────────────────────────────── */
.ht-end { position: absolute; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.ht-end .url { font-size: 1.9em; font-weight: 700; letter-spacing: .06em; color: var(--m-accent); }
.ht-btn { display: inline-block; padding: .5em 1.3em; background: var(--m-accent); color: var(--m-on-accent); font-weight: 700; font-size: 1.2em; letter-spacing: .03em; }
.ht-end .ks { color: var(--m-dim); }

/* ── Progress ticks ─────────────────────────────────────────────── */
.ht-prog { position: absolute; left: 64px; right: 64px; bottom: 24px; display: flex; gap: 6px; }
.ht-prog__seg { flex: 1; height: 3px; background: var(--m-line); overflow: hidden; }
.ht-prog__seg span { display: block; height: 100%; background: var(--m-accent); transform-origin: 0 0; }

.ht-wipe { position: absolute; left: 0; top: 0; z-index: 60; display: none; pointer-events: none; }