@import "../../tokens/kin.tailwind.css";

:root {
  color-scheme: dark;
  --canvas: #08090a;
  --surface-1: #0f1011;
  --surface-2: #141516;
  --surface-3: #191a1c;
  --surface-4: #202124;
  --surface-hover: rgb(255 255 255 / 4.5%);
  --surface-selected: rgb(94 106 210 / 14%);
  --surface-overlay: rgb(8 9 10 / 72%);
  --text-primary: #f4f5f7;
  --text-secondary: #c9cbd1;
  --text-muted: #8b8f98;
  --text-disabled: #62666d;
  --line-subtle: rgb(255 255 255 / 5.5%);
  --line-default: rgb(255 255 255 / 9%);
  --line-strong: rgb(255 255 255 / 15%);
  --accent: #5e6ad2;
  --accent-hover: #6a75d7;
  --accent-soft: rgb(94 106 210 / 14%);
  --focus-ring: rgb(130 143 255 / 72%);
  --positive: #50ad7d;
  --warning: #c69a45;
  --negative: #d26a5c;
  --monitor: #4fd0de;
  --code-bg: #0b0c0e;
  --code-text: #dfe2e8;
  --code-keyword: #8e98ff;
  --code-string: #79b98d;
  --code-comment: #777d87;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --font-ui: Inter, Geist, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  font-family: var(--font-ui);
  font-size: 13px;
  text-rendering: optimizeLegibility;
}

:root[data-theme="light"] {
  color-scheme: light;
  --canvas: #f6f7f8;
  --surface-1: #fff;
  --surface-2: #f4f5f6;
  --surface-3: #eceef0;
  --surface-4: #e4e6e9;
  --surface-hover: rgb(20 22 26 / 4.5%);
  --surface-selected: rgb(83 96 197 / 10%);
  --surface-overlay: rgb(246 247 248 / 76%);
  --text-primary: #18191c;
  --text-secondary: #494c53;
  --text-muted: #6b7079;
  --text-disabled: #a1a5ad;
  --line-subtle: rgb(20 22 26 / 6%);
  --line-default: rgb(20 22 26 / 10%);
  --line-strong: rgb(20 22 26 / 17%);
  --accent: #5360c5;
  --accent-hover: #4653b7;
  --accent-soft: rgb(83 96 197 / 10%);
  --focus-ring: rgb(73 88 196 / 62%);
  --positive: #247b56;
  --warning: #8e650f;
  --negative: #a94838;
  --monitor: #167f8d;
  --code-bg: #f9fafb;
  --code-text: #202228;
  --code-keyword: #5360c5;
  --code-string: #247b56;
  --code-comment: #6b7079;
}

:root[data-theme="dark"][data-contrast="more"] {
  --canvas: #000;
  --surface-1: #08090a;
  --surface-2: #111317;
  --text-primary: #fff;
  --text-secondary: #e1e4e8;
  --text-muted: #b4b9c2;
  --line-default: #747a86;
  --focus-ring: #a8b1ff;
}

:root[data-theme="light"][data-contrast="more"] {
  --canvas: #fff;
  --surface-1: #fff;
  --surface-2: #f2f3f5;
  --text-primary: #08090a;
  --text-secondary: #343840;
  --text-muted: #555b65;
  --line-default: #6a707a;
  --focus-ring: #3946b8;
}

* {
  box-sizing: border-box;
}

html,
body,
#showcase-specimen-app {
  min-height: 100%;
  margin: 0;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--text-primary);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  color: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  z-index: 120;
  top: 8px;
  left: 8px;
  translate: 0 -160%;
  padding: 8px 10px;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-primary);
}

.skip-link:focus {
  translate: 0;
}

.kin-showcase-specimen {
  width: 100%;
  min-height: 360px;
  padding: clamp(18px, 3.5vw, 36px);
  background: var(--canvas);
}

.specimen-canvas {
  width: min(100%, 980px);
  margin-inline: auto;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  overflow: clip;
}

.specimen-canvas--flush {
  border-radius: var(--radius-md);
}

.specimen-bar,
.specimen-section-header,
.specimen-footer {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
}

.specimen-bar {
  border-bottom: 1px solid var(--line-subtle);
}

.specimen-footer {
  min-height: 40px;
  border-top: 1px solid var(--line-subtle);
  color: var(--text-muted);
  font-size: 11px;
}

.specimen-title {
  display: grid;
  gap: 3px;
}

.specimen-title strong {
  font-size: 13px;
  font-weight: 600;
}

.specimen-title span,
.specimen-meta {
  color: var(--text-muted);
  font-size: 11px;
}

.specimen-actions,
.button-cluster,
.inline-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.kin-button,
.kin-icon-button,
.kin-segmented button,
.kin-chip {
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color 140ms cubic-bezier(0.2, 0, 0, 1),
    border-color 140ms cubic-bezier(0.2, 0, 0, 1),
    color 140ms cubic-bezier(0.2, 0, 0, 1),
    opacity 90ms linear,
    transform 100ms cubic-bezier(0.23, 1, 0.32, 1);
}

.kin-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  white-space: nowrap;
}

.kin-button svg,
.kin-icon-button svg,
.kin-chip svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.6;
}

.kin-button:active,
.kin-icon-button:active,
.kin-segmented button:active,
.kin-chip:active {
  opacity: 0.78;
}

.kin-button--primary {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}

.kin-button--ghost {
  border-color: transparent;
  background: transparent;
}

.kin-button--danger {
  border-color: color-mix(in srgb, var(--negative) 64%, var(--line-default));
  background: color-mix(in srgb, var(--negative) 10%, transparent);
  color: var(--negative);
}

.kin-button[disabled] {
  cursor: not-allowed;
  opacity: 0.46;
}

.kin-icon-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
}

.kin-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.kin-segmented button {
  min-height: 28px;
  padding: 0 9px;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}

.kin-segmented button[aria-pressed="true"] {
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--line-subtle);
}

.kin-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

.kin-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  content: "";
}

.kin-status[data-tone="positive"]::before {
  background: var(--positive);
}

.kin-status[data-tone="warning"]::before {
  background: var(--warning);
}

.kin-status[data-tone="negative"]::before {
  background: var(--negative);
}

.kin-rule-layout {
  display: grid;
  min-height: 300px;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
}

.kin-rule-main,
.kin-rule-side {
  padding: 24px;
}

.kin-rule-side {
  border-left: 1px solid var(--line-subtle);
  background: color-mix(in srgb, var(--surface-2) 38%, transparent);
}

.kin-rule-main h2,
.change-review h2,
.execution-card h2,
.trace-heading h2,
.timeline-copy h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.015em;
}

.kin-rule-main > p,
.change-review > p,
.execution-card > p,
.trace-heading p,
.timeline-copy p {
  margin: 7px 0 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.kin-property-list {
  margin: 24px 0 0;
}

.kin-property-list > div {
  display: grid;
  min-height: 42px;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  border-top: 1px solid var(--line-subtle);
}

.kin-property-list dt {
  color: var(--text-muted);
}

.kin-property-list dd {
  margin: 0;
  font-weight: 560;
}

.kin-rule-side label {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 11px;
}

.kin-rule-side select {
  width: 100%;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
}

.button-specimen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.button-specimen-group {
  min-height: 184px;
  padding: 24px;
}

.button-specimen-group + .button-specimen-group {
  border-left: 1px solid var(--line-subtle);
}

.button-specimen-group h2 {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 560;
}

.button-specimen-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.confirmation-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px;
  border-top: 1px solid var(--line-subtle);
  background: color-mix(in srgb, var(--negative) 7%, transparent);
}

.confirmation-strip strong,
.confirmation-strip span {
  display: block;
}

.confirmation-strip span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.command-stage {
  display: grid;
  min-height: 310px;
  place-items: center;
  padding: 30px;
  background: color-mix(in srgb, var(--surface-2) 32%, transparent);
}

.command-stage__context {
  display: grid;
  width: min(100%, 480px);
  min-height: 42px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-muted);
}

.command-stage__context svg {
  width: 15px;
}

.command-stage__context kbd {
  padding: 3px 5px;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-xs);
  font: 10px var(--font-mono);
}

.danger-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-top: 1px solid var(--line-subtle);
}

.danger-strip strong,
.danger-strip span {
  display: block;
}

.danger-strip span {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.evidence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
}

.evidence-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.evidence-row {
  display: grid;
  width: 100%;
  min-height: 92px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 17px 20px;
  border: 0;
  border-bottom: 1px solid var(--line-subtle);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.evidence-row[aria-selected="true"] {
  background: var(--surface-hover);
}

.evidence-index {
  padding-top: 2px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.evidence-row strong,
.task-row strong,
.trace-step strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.evidence-row p,
.task-row p,
.trace-step p {
  margin: 5px 0 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.evidence-detail {
  padding: 20px;
  border-left: 1px solid var(--line-subtle);
  background: color-mix(in srgb, var(--surface-2) 36%, transparent);
}

.evidence-detail h3 {
  margin: 0;
  font-size: 14px;
}

.evidence-detail dl {
  margin: 18px 0 0;
}

.evidence-detail dl > div {
  padding: 10px 0;
  border-top: 1px solid var(--line-subtle);
}

.evidence-detail dt {
  color: var(--text-muted);
  font-size: 11px;
}

.evidence-detail dd {
  margin: 4px 0 0;
  line-height: 1.45;
}

.change-review,
.execution-card {
  padding: 26px;
}

.value-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 22px 0;
  border: 1px solid var(--line-subtle);
}

.value-compare > div {
  padding: 16px;
}

.value-compare > div + div {
  border-left: 1px solid var(--line-subtle);
  background: var(--accent-soft);
}

.value-compare span,
.scope-list span {
  color: var(--text-muted);
  font-size: 11px;
}

.value-compare strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.review-reason {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line-subtle);
}

.review-reason dt {
  color: var(--text-muted);
}

.review-reason dd {
  margin: 0;
}

.review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

.scope-list {
  margin: 22px 0;
  padding: 0;
  border-top: 1px solid var(--line-subtle);
  list-style: none;
}

.scope-list li {
  display: grid;
  min-height: 48px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line-subtle);
}

.scope-list svg {
  width: 15px;
  color: var(--text-muted);
}

.scope-list strong {
  font-weight: 560;
}

.progress-track {
  height: 3px;
  overflow: hidden;
  background: var(--surface-3);
}

.progress-track > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--progress-ratio, 0));
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

.task-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-row {
  display: grid;
  min-height: 76px;
  grid-template-columns: 32px minmax(0, 1fr) 118px auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-subtle);
}

.task-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.task-icon svg {
  width: 14px;
}

.task-progress {
  display: grid;
  gap: 6px;
}

.task-progress span {
  color: var(--text-muted);
  font-size: 10px;
  text-align: right;
}

.table-shell {
  overflow: auto;
}

.kin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.kin-table th,
.kin-table td {
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-subtle);
  text-align: left;
}

.kin-table th {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 560;
}

.kin-table tbody tr[data-selected="true"] {
  background: var(--surface-hover);
}

.kin-table tbody tr[data-selected="true"] {
  background: var(--surface-selected);
}

.kin-table button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.mini-app-shell {
  display: grid;
  min-height: 410px;
  grid-template-columns: 158px minmax(0, 1fr) 216px;
}

.mini-sidebar,
.mini-inspector {
  padding: 14px;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface-1));
}

.mini-sidebar {
  border-right: 1px solid var(--line-subtle);
}

.mini-inspector {
  border-left: 1px solid var(--line-subtle);
}

.mini-brand {
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 650;
}

.mini-nav {
  display: grid;
  gap: 3px;
}

.mini-nav span {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  text-align: left;
}

.mini-nav span[data-active="true"] {
  background: var(--navigation-selected);
  box-shadow: inset 0 1px 0 var(--edge-highlight), var(--shadow-contact);
  color: var(--text-primary);
}

.mini-nav svg {
  width: 14px;
}

.mini-workspace {
  min-width: 0;
}

.mini-location {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-subtle);
}

.mini-content {
  padding: 20px;
}

.mini-content h2 {
  margin: 0;
  font-size: 17px;
}

.mini-list {
  margin-top: 18px;
  border-top: 1px solid var(--line-subtle);
}

.mini-list button {
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line-subtle);
  background: transparent;
  color: inherit;
  text-align: left;
}

.mini-list button[aria-selected="true"] {
  background: var(--surface-selected);
}

.mini-list span,
.mini-inspector dt {
  color: var(--text-muted);
  font-size: 10px;
}

.mini-inspector h3 {
  margin: 0 0 14px;
  font-size: 12px;
}

.mini-inspector dl {
  margin: 0;
}

.mini-inspector dl > div {
  padding: 10px 0;
  border-top: 1px solid var(--line-subtle);
}

.mini-inspector dd {
  margin: 4px 0 0;
}

.trace-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.8fr);
}

.trace-main,
.trace-context {
  padding: 22px;
}

.trace-context {
  border-left: 1px solid var(--line-subtle);
  background: color-mix(in srgb, var(--surface-2) 34%, transparent);
}

.trace-list {
  position: relative;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.trace-list::before {
  position: absolute;
  top: 10px;
  bottom: 12px;
  left: 7px;
  width: 1px;
  background: var(--line-default);
  content: "";
}

.trace-step {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 0 0 22px;
}

.trace-node {
  z-index: 1;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 3px solid var(--surface-1);
  border-radius: 50%;
  background: var(--text-muted);
}

.trace-step[data-state="completed"] .trace-node {
  background: var(--positive);
}

.trace-step[data-state="running"] .trace-node {
  background: var(--monitor);
}

.trace-step[data-state="failed"] .trace-node {
  background: var(--negative);
}

.trace-step time {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.trace-step__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tool-activity {
  margin-top: 9px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm);
}

.tool-activity summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  cursor: pointer;
  list-style: none;
}

.trace-review-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  margin-top: 12px;
  color: var(--accent);
  font-weight: 600;
  text-underline-offset: 3px;
}

.trace-recovery {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--line-subtle);
  scroll-margin-top: 16px;
}

.trace-recovery p {
  margin: 5px 0 0;
  color: var(--text-secondary);
}

.tool-activity summary::-webkit-details-marker {
  display: none;
}

.tool-activity summary svg {
  width: 14px;
}

.tool-activity pre {
  margin: 0;
  padding: 11px;
  overflow: auto;
  border-top: 1px solid var(--line-subtle);
  color: var(--text-secondary);
  font: 11px/1.55 var(--font-mono);
}

.trace-context dl {
  margin: 0;
}

.trace-context dl > div {
  padding: 10px 0;
  border-top: 1px solid var(--line-subtle);
}

.trace-context dt {
  color: var(--text-muted);
  font-size: 10px;
}

.trace-context dd {
  margin: 5px 0 0;
}

.code-shell {
  border: 1px solid var(--line-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--code-bg);
  color: var(--code-text);
}

.code-toolbar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--line-default);
}

.code-toolbar code {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font: 11px var(--font-mono);
}

.code-toolbar code svg {
  width: 14px;
}

.code-specimen-stage {
  padding: clamp(18px, 3vw, 28px);
}

.code-scroll {
  max-height: 360px;
  overflow: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

.code-lines {
  min-width: max-content;
  margin: 0;
  padding: 14px 0;
  counter-reset: line;
  font: 12px/1.7 var(--font-mono);
}

.code-lines code {
  display: grid;
  font: inherit;
}

.code-line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding-right: 20px;
}

.code-line::before {
  counter-increment: line;
  color: var(--text-disabled);
  content: counter(line);
  text-align: right;
  padding-right: 14px;
  user-select: none;
}

.code-line__source {
  min-width: 0;
  white-space: pre;
}

.code-lines[data-wrap="true"] {
  min-width: 0;
}

.code-lines[data-wrap="true"] .code-line__source {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.token-keyword {
  color: var(--code-keyword);
}

.token-string {
  color: var(--code-string);
}

.token-comment {
  color: var(--code-comment);
}

.timeline-shell {
  overflow: hidden;
}

.timeline-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px 4px;
}

.timeline-copy {
  max-width: 580px;
}

.story-timeline {
  position: relative;
  min-height: 300px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.story-timeline__track {
  position: relative;
  display: grid;
  width: max(100%, 900px);
  min-height: 292px;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  padding: 56px 26px 22px;
  margin: 0;
  list-style: none;
}

.story-timeline__track::before,
.story-timeline__progress {
  position: absolute;
  top: 88px;
  right: 40px;
  left: 40px;
  height: 1px;
  content: "";
  transform-origin: left center;
}

.story-timeline__track::before {
  background: var(--line-default);
}

.story-timeline__progress {
  background: var(--accent);
  scale: 0 1;
}

.story-timeline[data-ready="true"] .story-timeline__progress {
  animation: timeline-draw 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.story-milestone {
  position: relative;
  display: grid;
  grid-template-rows: 50px 28px auto;
  justify-items: start;
  padding: 0 14px;
}

.story-milestone time {
  align-self: end;
  padding-bottom: 8px;
  color: var(--text-muted);
  font: 10px var(--font-mono);
}

.story-marker {
  z-index: 1;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  margin-left: -2px;
  border: 4px solid var(--surface-1);
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 1px var(--line-default);
  cursor: pointer;
}

.story-milestone[data-active="true"] .story-marker {
  background: var(--surface-selected);
  box-shadow: 0 0 0 1px var(--line-strong);
}

.story-milestone__body {
  padding-top: 12px;
}

.story-milestone__body strong {
  display: block;
  font-size: 13px;
}

.story-milestone__body p {
  max-width: 22ch;
  margin: 6px 0 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.timeline-detail {
  display: grid;
  min-height: 74px;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid var(--line-subtle);
  background: color-mix(in srgb, var(--surface-2) 35%, transparent);
}

.timeline-detail span {
  color: var(--text-muted);
  font-size: 11px;
}

.timeline-detail strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
}

.timeline-cue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 10px;
}

.timeline-cue svg {
  width: 14px;
}

.auth-stage {
  position: relative;
  min-height: 470px;
  background: var(--canvas);
}

.auth-context {
  padding: 24px;
}

.auth-context h2 {
  margin: 0;
  font-size: 18px;
}

.auth-context p {
  max-width: 48ch;
  color: var(--text-muted);
}

.kin-auth-dialog {
  width: min(430px, calc(100% - 28px));
  padding: 0;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 var(--edge-highlight-strong), var(--shadow-floating);
}

.kin-auth-dialog::backdrop {
  background: rgb(3 4 5 / 66%);
}

.auth-dialog__body {
  padding: 22px;
}

.auth-dialog__body h2 {
  margin: 0;
  font-size: 17px;
}

.auth-dialog__body p {
  margin: 7px 0 20px;
  color: var(--text-muted);
  line-height: 1.5;
}

.auth-dialog__body label {
  display: grid;
  gap: 7px;
  color: var(--text-secondary);
}

.auth-dialog__body input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-default);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-primary);
}

.auth-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.auth-reopen {
  position: absolute;
  bottom: 22px;
  left: 24px;
}

.spinning {
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    rotate: 360deg;
  }
}

@keyframes timeline-draw {
  to {
    scale: 1 1;
  }
}

@media (max-width: 720px) {
  .code-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .code-toolbar .inline-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .code-toolbar .inline-actions .kin-button {
    flex: 1 1 150px;
  }

  .kin-showcase-specimen {
    padding: 12px;
  }

  .specimen-bar,
  .specimen-section-header,
  .specimen-footer {
    padding-inline: 12px;
  }

  .specimen-actions {
    max-width: 58%;
    overflow-x: auto;
  }

  .kin-rule-layout,
  .evidence-layout,
  .trace-shell,
  .button-specimen-grid {
    grid-template-columns: 1fr;
  }

  .kin-rule-main,
  .kin-rule-side,
  .change-review,
  .execution-card,
  .trace-main,
  .trace-context {
    padding: 18px;
  }

  .kin-rule-side,
  .evidence-detail,
  .trace-context {
    border-top: 1px solid var(--line-subtle);
    border-left: 0;
  }

  .evidence-detail {
    min-height: 210px;
  }

  .danger-strip,
  .review-actions,
  .confirmation-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .danger-strip .kin-button,
  .review-actions .kin-button,
  .confirmation-strip .kin-button {
    width: 100%;
  }

  .button-specimen-group + .button-specimen-group {
    border-top: 1px solid var(--line-subtle);
    border-left: 0;
  }

  .task-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .task-progress {
    grid-column: 2 / -1;
  }

  .mini-app-shell {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .mini-sidebar {
    padding: 10px 8px;
  }

  .mini-brand {
    font-size: 0;
  }

  .mini-brand::before {
    font-size: 11px;
    content: "KIN";
  }

  .mini-nav span {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .mini-inspector {
    display: none;
  }

  .timeline-heading {
    padding: 14px 18px 0;
  }

  .timeline-cue {
    margin-top: 0;
  }

  .story-timeline {
    min-height: 490px;
    overflow: visible;
  }

  .story-timeline__track {
    display: block;
    width: auto;
    min-height: 0;
    padding: 18px;
  }

  .story-timeline__track::before,
  .story-timeline__progress {
    top: 26px;
    right: auto;
    bottom: 36px;
    left: 31px;
    width: 1px;
    height: auto;
    transform-origin: center top;
  }

  .story-timeline__progress {
    scale: 1 0;
  }

  .story-timeline[data-ready="true"] .story-timeline__progress {
    animation-name: timeline-draw-vertical;
  }

  .story-milestone {
    min-height: 86px;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding: 0;
  }

  .story-milestone time {
    grid-column: 2;
    align-self: auto;
    padding: 0 0 4px;
  }

  .story-marker {
    position: relative;
    width: 44px;
    min-height: 44px;
    grid-column: 1;
    grid-row: 1 / 3;
    margin: -13px 0 0 -15px;
    border: 13px solid transparent;
    background: var(--text-muted) content-box;
    box-shadow: inset 0 0 0 1px var(--line-default);
  }

  .story-milestone[data-active="true"] .story-marker {
    background: var(--surface-selected) content-box;
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }

  .story-milestone__body {
    grid-column: 2;
    padding: 0;
  }

  .story-milestone__body p {
    max-width: none;
  }

  .timeline-detail {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 16px 18px;
  }
}

@keyframes timeline-draw-vertical {
  to {
    scale: 1 1;
  }
}

@media (pointer: coarse) {
  .kin-button,
  .kin-icon-button,
  .kin-segmented button,
  .story-marker,
  .tool-activity summary,
  .trace-review-link {
    min-height: 44px;
  }

  .kin-icon-button,
  .story-marker {
    width: 44px;
  }

  .story-marker {
    position: relative;
    margin-top: -13px;
    margin-left: -15px;
    border: 13px solid transparent;
    background: var(--text-muted) content-box;
    box-shadow: inset 0 0 0 1px var(--line-default);
  }

  .story-milestone[data-active="true"] .story-marker {
    background: var(--surface-selected) content-box;
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
}

@media (hover: hover) and (pointer: fine) {
  .kin-button:hover,
  .kin-icon-button:hover,
  .kin-segmented button:hover,
  .kin-chip:hover {
    border-color: var(--line-strong);
    background: var(--surface-hover);
    color: var(--text-primary);
  }

  .kin-button--primary:hover {
    border-color: transparent;
    background: var(--accent-hover);
    color: #fff;
  }

  .evidence-row:hover,
  .kin-table tbody tr:hover {
    background: var(--surface-hover);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .kin-button:active,
  .kin-icon-button:active,
  .kin-segmented button:active,
  .kin-chip:active {
    transform: scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kin-button,
  .kin-icon-button,
  .kin-segmented button,
  .progress-track > span {
    transition: none;
  }

  .spinning {
    animation: none;
  }

  .story-timeline__progress {
    scale: 1 1;
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .specimen-canvas,
  .kin-button,
  .kin-icon-button,
  .kin-segmented,
  .evidence-row,
  .tool-activity,
  .code-shell,
  .kin-auth-dialog {
    border-color: CanvasText;
  }

  .story-marker,
  .trace-node,
  .kin-status::before {
    forced-color-adjust: none;
  }
}

/* Explorer specimens use the same material order as their direct references:
   one raised canvas, contact-level local surfaces, and floating dialogs. */
.specimen-canvas,
.code-shell {
  box-shadow: inset 0 1px 0 var(--edge-highlight-strong), var(--shadow-raised);
}

.specimen-bar,
.specimen-section-header,
.specimen-footer,
.mini-sidebar,
.mini-inspector,
.trace-context,
.evidence-detail {
  box-shadow: inset 0 1px 0 var(--edge-highlight), inset 0 -1px 0 var(--edge-contact);
}

.command-stage__context,
.tool-activity,
.task-icon,
.kin-rule-side select {
  box-shadow: inset 0 1px 0 var(--edge-highlight), var(--shadow-contact);
}

@media (forced-colors: active) {
  .specimen-canvas,
  .code-shell,
  .specimen-bar,
  .specimen-section-header,
  .specimen-footer,
  .mini-sidebar,
  .mini-inspector,
  .trace-context,
  .evidence-detail,
  .command-stage__context,
  .tool-activity,
  .task-icon,
  .kin-rule-side select {
    border-color: CanvasText;
    box-shadow: none;
  }
}