.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn--primary { background: var(--accent); color: var(--charcoal); }
.btn--primary:hover { background: var(--accent-strong); }

.btn--ghost { border-color: var(--line); color: var(--text-muted); }
.btn--ghost:hover { border-color: var(--gray); color: var(--text); }

.btn--quiet { color: var(--text-dim); padding-inline: var(--s-3); }
.btn--quiet:hover { color: var(--text); }

.btn--icon {
  inline-size: 44px;
  padding: 0;
  border-radius: var(--radius);
  color: var(--text-muted);
}
.btn--icon:hover { background: rgba(255,255,255,.06); color: var(--text); }

.ev {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-3);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.9;
  border: 1px solid;
}

.ev__symbol { font-weight: 700; direction: ltr; }

.ev--verified    { color: #7FD1A6; border-color: rgba(127,209,166,.4); background: rgba(127,209,166,.08); }
.ev--observation { color: var(--silver); border-color: rgba(201,206,212,.34); background: rgba(201,206,212,.07); }
.ev--assumption  { color: #E3C56B; border-color: rgba(227,197,107,.4); background: rgba(227,197,107,.08); }
.ev--proposed    { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

.card__title { font-size: var(--fs-md); margin-block-end: var(--s-2); }

.pending {
  border: 1px dashed var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  display: grid;
  gap: var(--s-2);
}
.pending__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  display: flex; align-items: center; gap: var(--s-2);
}
.pending__note { font-size: var(--fs-sm); color: var(--text-muted); }
.pending__src {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  direction: ltr;
  text-align: start;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}

.media {
  position: relative;
  inline-size: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--graphite);
  border: 1px solid var(--line);
  aspect-ratio: var(--ratio, 16 / 9);
}

.media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.media--product {
  background: var(--warm-white);
  border-color: rgba(255,255,255,.14);
  padding: var(--s-3);
}
.media--product > img { object-fit: contain; }

.media--empty {
  border-style: dashed;
  display: grid;
  place-content: center;
  gap: var(--s-2);
  padding: var(--s-5);
  text-align: center;
  
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 12px,
      rgba(255,255,255,.014) 12px 24px
    ), var(--graphite);
}

.media__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 600;
  max-inline-size: 34ch;
}

.media__hint {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

.media--device {
  border-radius: 26px;
  border-width: 6px;
  border-style: solid;
  border-color: var(--graphite-line);
  max-inline-size: 280px;
  margin-inline: auto;
}

.cmp {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  overflow: hidden;
}

.cmp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line);
}

.cmp__title { font-size: var(--fs-md); font-weight: 600; }

.cmp__states { display: flex; gap: var(--s-2); }

.cmp__state-btn {
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  min-block-size: 44px;   
}

.cmp__state-btn[aria-pressed='true'] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}

.cmp__panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  padding: var(--s-5);
}

.cmp__pane { display: grid; gap: var(--s-3); }

.cmp__pane-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cmp__pane--before .cmp__pane-label { color: var(--text-dim); }
.cmp__pane--after  .cmp__pane-label { color: var(--accent); }

.cmp[data-pattern='toggle'][data-state='before'] .cmp__pane--after,
.cmp[data-pattern='toggle'][data-state='after']  .cmp__pane--before { display: none; }
.cmp[data-pattern='toggle'] .cmp__panes { grid-template-columns: 1fr; }

.cmp__slider {
  position: relative;
  inline-size: 100%;
  aspect-ratio: var(--ratio, 16 / 10);
  overflow: hidden;
  border-radius: var(--radius);
  touch-action: pan-y;   
}
.cmp__layer { position: absolute; inset: 0; }
.cmp__layer--after {
  
  clip-path: inset(0 0 0 var(--split, 50%));
}
[dir='rtl'] .cmp__layer--after {
  clip-path: inset(0 var(--split, 50%) 0 0);
}

.cmp__handle {
  position: absolute;
  inset-block: 0;
  inline-size: 2px;
  background: var(--accent);
  inset-inline-start: var(--split, 50%);
  cursor: ew-resize;
  touch-action: none;
}
.cmp__handle::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 44px; block-size: 44px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--shadow);
}

.cmp__why {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border-block-start: 1px solid var(--line);
  background: rgba(0,0,0,.16);
}
.cmp__why-row { display: grid; gap: var(--s-1); }
.cmp__why-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 700;
}

@media (min-width: 768px) {
  .cmp__why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}

.prose { display: grid; gap: var(--s-5); }

.prose p { max-inline-size: 62ch; }

.prose__display {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text);
  max-inline-size: 40ch;
  text-wrap: balance;
}

.prose__headline {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  max-inline-size: 46ch;
}

.prose__caption {
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

.prose__accent { color: var(--accent); font-weight: 600; }

.prose__points {
  display: grid;
  gap: var(--s-5);
  max-inline-size: 68ch;
}

.prose__point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
}

.prose__point-index {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  min-inline-size: 2ch;
}

.prose__point-text { color: var(--text-muted); line-height: 1.8; }

.prose__stat {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  justify-self: start;
  min-inline-size: min(100%, 260px);
}
.prose__stat-value {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  line-height: 1.1;
}
.prose__stat-caption { font-size: var(--fs-sm); color: var(--text-dim); }

.scene__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 600;
  margin-block-end: var(--s-3);
}

.scene__title {
  font-size: var(--fs-xl);
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-inline-size: 24ch;
  text-wrap: balance;
}

.scene__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block-start: var(--s-3);
}

.pgal {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  padding-block: var(--s-4);
  
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
}

.pgal__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-inline: var(--s-5);
  padding-block-end: var(--s-4);
}

.pgal__title { font-size: var(--fs-md); font-weight: 600; }

.pgal__count {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.pgal__nav { margin-inline-start: auto; display: flex; gap: var(--s-2); }

.pgal__track {
  display: grid;
  grid-auto-flow: column;
  
  grid-auto-columns: 200px;
  gap: var(--s-4);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  padding-inline: var(--s-5);
  padding-block-end: var(--s-2);
  scrollbar-width: thin;
  min-inline-size: 0;
}
.pgal__track > * { scroll-snap-align: start; }

.pgal__item { display: grid; gap: var(--s-2); align-content: start; }

.pgal__frame {
  aspect-ratio: 1 / 1;
  background: var(--warm-white);
  border-radius: var(--radius);
  padding: var(--s-3);
  overflow: hidden;
}
.pgal__frame > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.pgal__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  max-inline-size: none;
}

.pgal__meta {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  max-inline-size: none;
}
.pgal__sku { direction: ltr; font-variant-numeric: tabular-nums; }

.pgal__src {
  font-size: var(--fs-xs);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

@media (max-width: 640px) {
  
  .pgal__track { grid-auto-columns: min(62vw, 240px); }
}

.concept-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 2px var(--s-3);
  border-radius: 999px;
}

.value-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.aud-rank {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  direction: ltr;
}

.aud--secondary { border-style: dashed; }
.aud--secondary .aud-rank { color: var(--text-dim); }

.roadmap { display: grid; gap: var(--s-4); }

@media (min-width: 860px) {
  .roadmap {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

.phase {
  position: relative;
  padding-block-start: var(--s-5);
  border-block-start: 2px solid var(--line);
}
.phase::before {
  content: '';
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: 0;
  inline-size: 10px; block-size: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.phase__num { font-size: var(--fs-xs); color: var(--accent); font-weight: 700; direction: ltr; }
.phase__title { font-size: var(--fs-md); margin-block: var(--s-2); }
.phase__dur { font-size: var(--fs-sm); color: var(--text-dim); }

.pkg-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: start;
}

.pkg {
  display: grid;
  gap: var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

.pkg--recommended { border-color: var(--accent-line); }
.pkg__badge {
  justify-self: start;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 2px var(--s-3);
  border-radius: 999px;
}

.pkg__num { font-size: var(--fs-xs); color: var(--text-dim); direction: ltr; }
.pkg__name { font-size: var(--fs-lg); }
.pkg__name-en {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  letter-spacing: 0.1em;
  direction: ltr;
  text-align: start;
}

.pkg__commercials {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius);
  background: rgba(0,0,0,.24);
  border: 1px solid var(--line);
}
.pkg__row { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; }
.pkg__row-label { font-size: var(--fs-xs); color: var(--text-dim); font-weight: 600; }
.pkg__row-value { font-size: var(--fs-sm); font-weight: 600; }

.placeholder-value {
  color: var(--accent);
  border-block-end: 1px dashed var(--accent-line);
  font-weight: 600;
}

.pkg__list { display: grid; gap: var(--s-2); }
.pkg__list-title {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-dim);
  margin-block-end: var(--s-1);
}
.pkg__list li {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: baseline;
}
.pkg__list li::before { content: '—'; color: var(--text-dim); }
.pkg__list--excludes li::before { content: '×'; color: var(--gray); }
.pkg__list--includes li::before { content: '+'; color: var(--accent); }

.actions {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.action-note {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  margin-block-start: var(--s-4);
}

.tlm-footer {
  border-block-start: 1px solid var(--line);
  padding: var(--s-7) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom));
  display: grid;
  gap: var(--s-3);
  text-align: center;
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.tlm-footer__line { font-weight: 600; color: var(--text-muted); }
.tlm-footer__meta { font-size: var(--fs-xs); direction: ltr; }
.tlm-footer a { color: var(--brand); font-weight: 700; text-underline-offset: .2em; }

.toast {
  position: fixed;
  inset-block-end: calc(var(--s-5) + env(safe-area-inset-bottom));
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  max-inline-size: calc(100vw - 2 * var(--gutter));
  background: var(--graphite-raised);
  border: 1px solid var(--accent-line);
  color: var(--text);
  padding: var(--s-3) var(--s-5);
  border-radius: 999px;
  font-size: var(--fs-sm);
  z-index: 200;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast[data-show='true'] { opacity: 1; transform: translateY(0); }