@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Noto+Sans+TC:wght@400;500;600&display=swap");

/* Grok Bot Style — component styles. Values come from tokens.css; nothing here re-declares a token. */

.dl-root { font-family: var(--font-sans); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }

/* ---------- Button ---------- */
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  font: 500 14px/20px var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--ink); color: var(--on-ink);
  transition: background-color .14s cubic-bezier(.25, 1, .5, 1), box-shadow .14s cubic-bezier(.25, 1, .5, 1);
}
.dl-btn:hover { background: var(--ink-soft); }
.dl-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dl-btn--soft { background: var(--chip); color: var(--ink); }
.dl-btn--soft:hover { background: var(--chip); box-shadow: inset 0 0 0 100px var(--scrim); }
.dl-btn--ghost { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-ring); }
.dl-btn--ghost:hover { background: var(--paper); }
.dl-btn--accent { background: var(--orange); color: var(--ink); }
.dl-btn--accent:hover { background: var(--orange); box-shadow: inset 0 0 0 100px var(--scrim); }
.dl-btn--lg { height: 48px; padding: 0 var(--space-6); font-size: 16px; }
.dl-btn--icon { width: 40px; height: 40px; padding: 0; background: var(--chip); color: var(--ink); }
.dl-btn--icon:hover { background: var(--chip); box-shadow: inset 0 0 0 100px var(--scrim); }
.dl-btn--icon svg { width: 16px; height: 16px; }
.dl-btn[disabled] { background: var(--chip); color: var(--ink-soft); opacity: .6; cursor: not-allowed; box-shadow: none; }

/* split button: label + caret, like a download button */
.dl-split { display: inline-flex; border-radius: var(--radius-pill); background: var(--ink); }
.dl-split .dl-btn { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.dl-split .dl-btn + .dl-btn { width: 32px; padding: 0; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25); }

/* ---------- Chip (category pill) ---------- */
.dl-chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-3); border: 0;
  border-radius: var(--radius-pill); background: var(--chip); color: var(--ink);
  font: 500 14px/20px var(--font-sans); cursor: pointer; text-decoration: none;
}
.dl-chip:hover { box-shadow: inset 0 0 0 100px var(--scrim); }
.dl-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dl-chip[aria-pressed="true"], .dl-chip[aria-current="page"] { background: var(--ink); color: var(--on-ink); }

/* ---------- Badge ---------- */
.dl-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill); background: var(--chip); color: var(--ink);
  font: 500 12px/16px var(--font-sans);
}
.dl-badge__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
.dl-badge--success { background: var(--success-soft); color: var(--success); }
.dl-badge--danger { background: var(--danger-soft); color: var(--danger); }
.dl-badge svg { width: 12px; height: 12px; flex: none; }

/* ---------- Card (two-tone guide card) ---------- */
.dl-card { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.dl-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.dl-card__thumb { display: grid; grid-template-columns: 38% 1fr; aspect-ratio: 296 / 156; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-2); }
.dl-card__eyes { display: grid; place-items: center; padding: 6%;transition: transform .3s cubic-bezier(.25, 1, .5, 1); }
.dl-card__eyes svg { width: 100%; height: 100%; }
.dl-card__name { display: flex; align-items: center; padding: 0 12% 0 14%; font: 500 15px/1.2 var(--font-sans); color: var(--on-ink); }
.dl-card:hover .dl-card__eyes { transform: translateX(4%) rotate(-4deg); }
.dl-card--coral .dl-card__eyes { background: var(--coral); }
.dl-card--coral .dl-card__name { background: var(--coral-deep); }
.dl-card--azure .dl-card__eyes { background: var(--azure); }
.dl-card--azure .dl-card__name { background: var(--azure-deep); }
.dl-card--violet .dl-card__eyes { background: var(--violet); }
.dl-card--violet .dl-card__name { background: var(--violet-deep); }
.dl-card--jade .dl-card__eyes { background: var(--jade); }
.dl-card--jade .dl-card__name { background: var(--jade-deep); }
.dl-card__cat { font: 500 12px/16px var(--font-sans); color: var(--ink); }
.dl-card__title { margin: 0; font: 500 16px/24px var(--font-sans); }
.dl-card__text { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-soft); }

/* ---------- Input ---------- */
.dl-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
.dl-field__label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.dl-field__hint { font: 400 12px/16px var(--font-sans); color: var(--ink-soft); }
.dl-field__hint--error { color: var(--danger); }
.dl-input {
  height: 40px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--canvas); color: var(--ink); font: 400 16px/24px var(--font-sans);
}
.dl-input::placeholder { color: var(--ink-soft); opacity: .7; }
.dl-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dl-input[aria-invalid="true"] { border-color: var(--danger); }
.dl-search { height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--chip); color: var(--ink); font: 400 14px/20px var(--font-sans); }
.dl-search::placeholder { color: var(--ink-soft); }
.dl-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Navbar ---------- */
.dl-nav {
  display: flex; align-items: center; gap: var(--space-8); height: var(--header-height); padding: 0 var(--space-8);
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); font-family: var(--font-sans);
}
.dl-nav__brand { font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.dl-nav__links { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.dl-nav__links a { font: 500 14px/20px var(--font-sans); color: var(--ink); text-decoration: none; }
.dl-nav__links a:hover { color: var(--ink-soft); }
.dl-nav__links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.dl-nav__end { display: flex; gap: var(--space-2); margin-left: auto; }

/* ---------- Mascot ---------- */
.dl-mascot { display: inline-block; line-height: 0; }
.dl-mascot svg { display: block; width: 100%; height: auto; }
.dl-mascot--float { animation: dl-float 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes dl-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5%) rotate(-3deg); } }

/* ---------- Video: shared stage (1920×1080 design units) ---------- */
.dl-stage { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--canvas); font-family: var(--font-sans); color: var(--ink); }
.dl-stage--portrait { width: 1080px; height: 1920px; }

/* ---------- Video: TitleCard (two-tone, like the guide card) ---------- */
.dl-titlecard { position: absolute; inset: 0; display: grid; grid-template-columns: 38% 1fr; }
.dl-titlecard__eyes { display: grid; place-items: center; padding: 120px 80px; }
.dl-titlecard__eyes svg { width: 100%; height: 100%; }
.dl-titlecard__words { display: flex; flex-direction: column; justify-content: center; padding: 0 160px 0 140px; color: var(--on-ink); }
.dl-titlecard__tag { margin-bottom: var(--space-6); font: 500 26px/1.2 var(--font-mono); letter-spacing: .04em; opacity: .8; }
.dl-titlecard__title { margin: 0; font: 500 120px/.98 var(--font-sans); letter-spacing: -.01em; }
.dl-titlecard__sub { margin: var(--space-8) 0 0; font: 400 48px/1.35 var(--font-sans); opacity: .85; }
.dl-titlecard--coral .dl-titlecard__eyes { background: var(--coral); }
.dl-titlecard--coral .dl-titlecard__words { background: var(--coral-deep); }
.dl-titlecard--azure .dl-titlecard__eyes { background: var(--azure); }
.dl-titlecard--azure .dl-titlecard__words { background: var(--azure-deep); }
.dl-titlecard--violet .dl-titlecard__eyes { background: var(--violet); }
.dl-titlecard--violet .dl-titlecard__words { background: var(--violet-deep); }
.dl-titlecard--jade .dl-titlecard__eyes { background: var(--jade); }
.dl-titlecard--jade .dl-titlecard__words { background: var(--jade-deep); }

/* ---------- Video: LowerThird ---------- */
.dl-lower {
  position: absolute; left: var(--space-24); bottom: var(--space-24);
  display: inline-flex; align-items: center; gap: 24px; padding: 20px 40px 20px 20px;
  border-radius: var(--radius-pill); background: var(--canvas); box-shadow: var(--shadow-pop);
}
.dl-lower .dl-mascot { width: 96px; }
.dl-lower__name { display: block; font: 500 40px/1.2 var(--font-sans); }
.dl-lower__role { display: block; margin-top: 2px; font: 400 28px/1.3 var(--font-sans); color: var(--ink-soft); }

/* ---------- Video: Subtitle ---------- */
.dl-subtitle {
  position: absolute; left: 50%; bottom: var(--space-40); transform: translateX(-50%);
  max-width: 1440px; padding: 10px 32px 12px; border-radius: 28px;
  background: var(--plate); color: var(--ink); text-align: center; font: 500 44px/1.4 var(--font-sans);
}

/* ---------- Video: Callout (mascot reacts to a point) ---------- */
.dl-callout { position: absolute; display: inline-flex; align-items: flex-end; gap: 12px; }
.dl-callout .dl-mascot { width: 150px; flex: none; }
.dl-callout__bubble {
  margin-bottom: 70px; padding: 20px 32px; border-radius: 32px 32px 32px 8px;
  background: var(--canvas); box-shadow: var(--shadow-pop); font: 500 40px/1.25 var(--font-sans);
}

/* ---------- Video: ChapterTag + progress ---------- */
.dl-chapter {
  position: absolute; top: var(--space-24); left: var(--space-24);
  display: inline-flex; align-items: center; gap: 16px; height: 64px; padding: 0 28px 0 10px;
  border-radius: var(--radius-pill); background: var(--plate); font: 500 26px/1.2 var(--font-mono); letter-spacing: .04em;
}
.dl-chapter .dl-mascot { width: 48px; }
.dl-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--chip); }
.dl-progress__fill { height: 100%; background: var(--ink); }
.dl-progress__marks { position: absolute; inset: 0; display: flex; }
.dl-progress__marks span { flex: 1; border-right: 4px solid var(--canvas); }
.dl-progress__marks span:last-child { border-right: 0; }

@media (prefers-reduced-motion: reduce) {
  .dl-btn, .dl-card__eyes { transition: none; }
  .dl-card:hover .dl-card__eyes { transform: none; }
  .dl-mascot--float { animation: none; }
}