/* Orbit Cut 01 · functional motion, original glyph states, shared timing. */
:root {
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-expressive: 360ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}
.aid-icon {
  --glyph-accent: var(--gold, #f0b90b);
  flex-shrink: 0;
  overflow: visible;
  isolation: isolate;
  stroke-width: 1.65;
  transform-origin: center;
}
.aid-icon :is(path, rect, circle) {
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    stroke var(--motion-fast),
    fill var(--motion-fast),
    opacity var(--motion-fast);
}
.aid-icon .i-accent {
  stroke: var(--glyph-accent);
}
.aid-icon .i-dot {
  stroke: none;
  fill: currentColor;
}
.aid-icon .i-burst {
  opacity: 0;
  stroke: var(--glyph-accent);
}
.aid-icon .i-trail {
  opacity: 0.4;
  stroke: var(--glyph-accent);
}
.aid-icon :is(.i-slider-a, .i-slider-b, .i-slider-c) {
  fill: var(--page);
}
.rail-item > .aid-icon {
  width: 27px;
  height: 27px;
}
.rail-item .aid-icon {
  --glyph-accent: #8c8a78;
}
.rail-item.selected .aid-icon {
  --glyph-accent: var(--gold);
  filter: drop-shadow(0 0 5px #f0b90b16);
}
.rail-item.selected .i-frame {
  fill: #f0b90b12;
}
.rail-item.selected {
  background: linear-gradient(155deg, #f0b90b21, #f0b90b07);
  box-shadow:
    inset 0 1px 0 #f0b90b20,
    inset 0 0 0 1px #f0b90b22;
}
.rail-item:hover {
  background: #232831;
  color: #c6ced9;
}
.rail-item.selected:hover {
  background: #f0b90b20;
  color: var(--gold);
}
.rail-item:active {
  transform: scale(0.96);
}
.rail-item .icon-grid .i-frame {
  fill: #f0b90b0b;
}
.btn.primary .aid-icon,
.compose-foot > .btn .aid-icon {
  --glyph-accent: #4b3c0b;
}
.btn.secondary:hover {
  border-color: var(--goldline);
}
button,
a.btn {
  position: relative;
}
button:active:not(:disabled) {
  transition-duration: 80ms;
}
.btn:active:not(:disabled),
.icon-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}
.press-wave {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(circle, #f0b90b22, transparent 67%);
  border-radius: 50%;
  animation: press-wave 400ms var(--ease-out) both;
  z-index: 0;
}
.btn.primary .press-wave {
  background: radial-gradient(circle, #ffffff66, transparent 67%);
}
button:has(.press-wave),
a.btn:has(.press-wave) {
  overflow: hidden;
}
.press-wave ~ * {
  position: relative;
}
.toggle:before,
.switch:after {
  transition:
    left 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}
.toggle,
.switch {
  transition:
    background-color 180ms,
    border-color 180ms;
}
.compose {
  transition:
    border-color 180ms,
    box-shadow 180ms;
}
.compose:focus-within {
  border-top-color: #8b722f;
  box-shadow: inset 0 1px 0 #f0b90b12;
}
.compose:focus-within .compose-tools {
  color: var(--ink);
}
.compose-tools button {
  border-radius: 5px;
}
.compose-tools > div > button {
  width: 27px;
  justify-content: center;
}
.compose-tools > div {
  gap: 12px;
}
.compose-tools > div > button:hover {
  background: var(--goldsoft);
}
.message-card,
.context-activity {
  transition:
    transform 220ms var(--ease-out),
    border-color 180ms,
    box-shadow 220ms;
}
.message-card:hover,
.context-activity:hover {
  border-color: #8d75384d;
  box-shadow: 0 8px 24px #00000017;
}
.attachment-cover > img,
.context-art > img {
  transition: transform 450ms var(--ease-out);
}
.message-card:hover .attachment-cover > img,
.context-activity:hover .context-art > img {
  transform: scale(1.025);
}
.feed-post {
  transition:
    border-color 220ms,
    box-shadow 220ms;
}
.feed-post:hover {
  border-color: #707a863c;
  box-shadow: 0 7px 24px #0000000d;
}
.feed-meta button {
  border-radius: 5px;
  padding: 3px 4px;
  margin: -3px -4px;
}
.feed-meta button:hover {
  background: var(--goldsoft);
}
:is(button, a):is(:hover, :focus-visible) .icon-message .i-detail,
.motion-replay .icon-message .i-detail {
  animation: line-reveal 420ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-users .i-detail,
.motion-replay .icon-users .i-detail {
  animation: portrait-rise 400ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-grid .i-frame,
.motion-replay .icon-grid .i-frame {
  animation: layer-lift 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-grid .i-detail,
.motion-replay .icon-grid .i-detail {
  animation: layer-settle 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-wallet .i-lid,
.motion-replay .icon-wallet .i-lid {
  animation: wallet-open 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-spark .i-eyes,
.motion-replay .icon-spark .i-eyes {
  animation: agent-blink 550ms ease-in-out;
}
:is(button, a):is(:hover, :focus-visible) .icon-spark .i-accent,
.motion-replay .icon-spark .i-accent {
  animation: accent-light 550ms ease;
}
:is(button, a):is(:hover, :focus-visible) .icon-activity .i-perf,
.motion-replay .icon-activity .i-perf {
  animation: line-reveal 500ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-gift .i-bow,
.motion-replay .icon-gift .i-bow {
  animation: ribbon 500ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-search .i-handle,
.motion-replay .icon-search .i-handle {
  animation: lens-handle 420ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-bell .i-bell,
.motion-replay .icon-bell .i-bell {
  animation: bell-swing 600ms var(--ease-out);
  transform-origin: 50% 0;
}
:is(button, a):is(:hover, :focus-visible) .icon-plus .i-detail,
.motion-replay .icon-plus .i-detail {
  animation: plus-settle 380ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible)
  :is(.icon-arrow, .icon-chevron, .icon-external, .icon-reply, .icon-logout)
  .i-arrow,
.motion-replay
  :is(.icon-arrow, .icon-chevron, .icon-external, .icon-reply, .icon-logout)
  .i-arrow {
  animation: arrow-nudge 400ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible)
  :is(.icon-check, .icon-shield, .icon-task)
  .i-check,
.motion-replay :is(.icon-check, .icon-shield, .icon-task) .i-check,
.success-mark .i-check {
  animation: check-draw 520ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible)
  :is(.icon-close, .icon-error)
  .i-cross,
.motion-replay :is(.icon-close, .icon-error) .i-cross {
  animation: cross-turn 380ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-copy .i-back,
.motion-replay .icon-copy .i-back {
  animation: copy-slide 440ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-clock .i-hand,
.motion-replay .icon-clock .i-hand {
  animation: clock-tick 480ms var(--ease-out);
  transform-origin: 0 0;
}
:is(button, a):is(:hover, :focus-visible) .icon-image .i-land,
.motion-replay .icon-image .i-land {
  animation: land-rise 420ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-smile .i-eyes,
.motion-replay .icon-smile .i-eyes {
  animation: agent-blink 500ms ease-in-out;
}
:is(button, a):is(:hover, :focus-visible) .icon-heart .i-heart,
.motion-replay .icon-heart .i-heart,
.liked .icon-heart .i-heart {
  animation: heart-beat 420ms var(--ease-out);
}
.motion-replay .icon-heart .i-burst,
.liked .icon-heart .i-burst {
  animation: heart-burst 480ms var(--ease-out);
}
.liked .icon-heart .i-heart {
  fill: #f0b90b30;
}
:is(button, a):is(:hover, :focus-visible) .icon-more .i-dot,
.motion-replay .icon-more .i-dot {
  animation: dot-lift 400ms var(--ease-out);
}
.icon-more .i-dot:nth-child(2) {
  animation-delay: 45ms !important;
}
.icon-more .i-dot:nth-child(3) {
  animation-delay: 90ms !important;
}
:is(button, a):is(:hover, :focus-visible) .icon-send .i-plane,
.motion-replay .icon-send .i-plane {
  animation: plane-forward 480ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-send .i-trail,
.motion-replay .icon-send .i-trail {
  animation: trail-draw 480ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-settings .i-slider-a,
.motion-replay .icon-settings .i-slider-a {
  animation: slider-right 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-settings .i-slider-b,
.motion-replay .icon-settings .i-slider-b {
  animation: slider-left 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-lock .i-latch,
.motion-replay .icon-lock .i-latch {
  animation: latch-bob 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-chart .i-bars,
.motion-replay .icon-chart .i-bars {
  animation: bar-grow 500ms var(--ease-out);
  transform-origin: 50% 100%;
}
:is(button, a):is(:hover, :focus-visible) .icon-sun .i-rays,
.motion-replay .icon-sun .i-rays {
  animation: rays-turn 600ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-moon .i-moon,
.motion-replay .icon-moon .i-moon {
  animation: moon-roll 500ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-pin .i-pin,
.motion-replay .icon-pin .i-pin {
  animation: pin-drop 400ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible)
  :is(.icon-download, .icon-upload)
  .i-arrow,
.motion-replay :is(.icon-download, .icon-upload) .i-arrow {
  animation: download 440ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible)
  :is(.icon-layers, .icon-grid)
  .i-layer-a,
.motion-replay .icon-layers .i-layer-a {
  animation: layer-lift 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-layers .i-layer-b,
.motion-replay .icon-layers .i-layer-b {
  animation: layer-settle 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-refresh .i-turn,
.motion-replay .icon-refresh .i-turn {
  animation: half-turn 560ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-loading .i-scan,
.motion-replay .icon-loading .i-scan {
  animation: half-turn 600ms var(--ease-out);
}
[aria-busy="true"] .icon-loading .i-scan {
  animation: scan-turn 900ms linear infinite;
}
.icon-loading .i-scan {
  stroke: var(--glyph-accent);
}
.motion-replay .aid-icon .i-accent {
  animation: accent-light 480ms ease;
}
.typing-bubble {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
  padding: 12px 14px;
  border-radius: 0 11px 11px 11px;
  font-size: 10px;
  color: var(--sub);
}
.typing-dots {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 14px;
}
.typing-dots > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  animation: typing-dot 1s ease-in-out infinite;
}
.typing-dots > i:nth-child(2) {
  animation-delay: 140ms;
}
.typing-dots > i:nth-child(3) {
  animation-delay: 280ms;
}
.typing-label {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-top: 6px;
}
.agent-typing .avatar {
  box-shadow: 0 0 0 3px #f0b90b0d;
}
.aid-tooltip {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 10px;
  box-shadow: 0 5px 20px #0003;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
  animation: tooltip-in 140ms var(--ease-out) both;
}
/* The same source glyphs and motion primitives used by the application. */
.design-system {
  max-width: 1240px;
  margin: auto;
}
.design-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 30px;
}
.design-eyebrow {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 2px;
}
.design-intro h2 {
  font-size: 36px;
  letter-spacing: -1.2px;
  font-weight: 550;
  margin: 10px 0;
}
.design-intro em {
  font-style: normal;
  color: var(--gold);
  font-weight: 400;
}
.design-intro p {
  font-size: 12px;
  color: var(--sub);
}
.design-intro > .btn {
  flex-shrink: 0;
  font-size: 11px;
}
.design-intro > .btn > .icon {
  width: 16px;
  height: 16px;
}
.glyph-workbench {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 25px;
  align-items: start;
}
.glyph-inspector {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 23px;
  background: var(--page);
  box-shadow: var(--shadow);
}
.design-section-label {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--muted);
}
.glyph-inspector > .design-section-label {
  align-self: flex-start;
}
.glyph-hero {
  width: 145px;
  height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--goldline);
  border-radius: 32px;
  margin: 28px 0 20px;
  background:
    radial-gradient(ellipse at 50% 0%, #f0b90b16, transparent 80%),
    var(--surface);
  color: var(--gold);
  box-shadow:
    inset 0 1px 0 #ffffff0b,
    0 12px 30px #00000012;
}
.glyph-hero > .aid-icon {
  width: 82px;
  height: 82px;
  stroke-width: 1.65;
}
.glyph-inspector > h3 {
  font-size: 17px;
  font-weight: 500;
}
.glyph-inspector > p {
  font:
    10px ui-monospace,
    monospace;
  color: var(--muted);
  margin-top: 8px;
}
.glyph-sizes {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 22px;
  margin: 28px 0;
}
.glyph-sizes > span {
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
}
.glyph-sizes > span > i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sub);
}
.glyph-sizes .aid-icon {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}
.glyph-sizes small {
  font-size: 9px;
  color: var(--muted);
}
.glyph-inspector > .btn {
  font-size: 10px;
  gap: 8px;
  min-height: 33px;
}
.glyph-inspector > .btn > .aid-icon {
  width: 14px;
  height: 14px;
}
.glyph-rule {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px 8px;
  width: 100%;
  border-top: 1px solid var(--line);
  margin-top: 23px;
  padding-top: 21px;
  font-size: 10px;
}
.glyph-rule > span {
  color: var(--muted);
}
.glyph-rule > strong {
  text-align: right;
  color: var(--sub);
  font-weight: 400;
}
.glyph-library {
  min-width: 0;
}
.glyph-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 17px;
  flex-wrap: wrap;
}
.glyph-filters > button {
  font-size: 11px;
  color: var(--muted);
  border-radius: 6px;
  padding: 7px 10px;
}
.glyph-filters > button.active {
  background: var(--goldsoft);
  color: var(--gold);
}
.glyph-filters > button:hover {
  background: var(--hover);
}
.glyph-filters > span {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}
.glyph-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.glyph-tile {
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--page);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 6px 14px;
  gap: 8px;
  transition:
    background 140ms,
    border-color 140ms,
    box-shadow 220ms;
}
.glyph-tile > .aid-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 7px;
  color: var(--sub);
}
.glyph-tile > span {
  font-size: 10px;
  white-space: nowrap;
  color: var(--sub);
}
.glyph-tile > small {
  font:
    8px ui-monospace,
    monospace;
  color: var(--muted);
  opacity: 0.7;
}
.glyph-tile.selected {
  border-color: var(--goldline);
  background: var(--goldsoft);
}
.glyph-tile.selected > .aid-icon {
  color: var(--gold);
}
.glyph-tile:hover {
  border-color: #9f874a77;
  box-shadow: 0 6px 18px #00000012;
  background: var(--surface);
}
.glyph-tile:hover > span {
  color: var(--ink);
}
.motion-section {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding-top: 30px;
}
.motion-section > .section-toolbar {
  margin-bottom: 22px;
}
.motion-section h3 {
  font-size: 16px;
  font-weight: 500;
}
.motion-section .small {
  font-size: 11px;
  margin-top: 6px;
}
.motion-preference {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--muted);
}
.motion-preference > select {
  font-size: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--sub);
}
.motion-demos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.motion-demo {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 21px;
}
.motion-demo > .btn {
  font-size: 10px;
  min-height: 32px;
}
.motion-demo > .btn > .aid-icon {
  width: 14px;
  height: 14px;
}
.demo-chat {
  height: 147px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.demo-mini-bubble {
  background: var(--surface2);
  border-radius: 0 8px 8px 8px;
  padding: 10px 12px;
  font-size: 10px;
  width: fit-content;
  color: var(--sub);
}
.demo-mini-bubble.self {
  margin-left: auto;
  background: var(--gold);
  color: #34270c;
  border-radius: 8px 0 8px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-mini-bubble.self .aid-icon {
  width: 13px;
  height: 13px;
  --glyph-accent: #4d3a0a;
}
.demo-check {
  height: 147px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 17px;
  color: var(--gold);
}
.demo-check > .aid-icon {
  width: 40px;
  height: 40px;
}
.demo-check > span {
  font-size: 10px;
  color: var(--muted);
}
.demo-window {
  position: relative;
  height: 112px;
  margin: 19px 0 16px;
  border: 1px solid var(--line);
  background: var(--chat);
  border-radius: 7px;
  overflow: hidden;
  padding: 22px 16px;
}
.demo-window > span {
  height: 7px;
  width: 40%;
  display: block;
  background: var(--surface2);
  border-radius: 3px;
  margin: 8px 0;
}
.demo-window > span:nth-child(2) {
  width: 59%;
}
.demo-drawer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 44%;
  padding: 17px;
  border-left: 1px solid var(--goldline);
  background: var(--surface);
  transform: translateX(100%);
  transition: transform 280ms var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demo-drawer.open {
  transform: translateX(0);
}
.demo-drawer > .aid-icon {
  width: 21px;
  height: 21px;
  color: var(--gold);
  margin-bottom: 3px;
}
.demo-drawer > i {
  display: block;
  height: 5px;
  width: 100%;
  background: var(--surface2);
  border-radius: 3px;
}
.icon-states {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 25px 0 0;
  padding: 20px 0;
}
.icon-states > .design-section-label {
  margin-right: auto;
  max-width: 210px;
  line-height: 1.8;
}
.state-example {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--page);
  border-radius: 7px;
  padding: 10px;
  color: var(--sub);
  font:
    9px ui-monospace,
    monospace;
}
.state-example > .aid-icon {
  width: 19px;
  height: 19px;
}
.state-example.selected {
  color: var(--gold);
  background: var(--goldsoft);
  border-color: var(--goldline);
}
.state-example.pressed {
  transform: translateY(1px);
  background: var(--surface2);
  box-shadow: inset 0 2px 5px #0002;
}
.state-example:disabled {
  opacity: 0.35;
}
@keyframes press-wave {
  0% {
    opacity: 0;
    transform: scale(0.25);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes line-reveal {
  0% {
    opacity: 0.3;
    stroke-dasharray: 24;
    stroke-dashoffset: 20;
  }
  100% {
    opacity: 1;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
  }
}
@keyframes check-draw {
  0% {
    stroke-dasharray: 35;
    stroke-dashoffset: 35;
  }
  100% {
    stroke-dasharray: 35;
    stroke-dashoffset: 0;
  }
}
@keyframes portrait-rise {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-1.4px);
  }
}
@keyframes layer-lift {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-1.5px);
  }
}
@keyframes layer-settle {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(1px);
  }
}
@keyframes wallet-open {
  0%,
  100% {
    transform: translateX(0);
  }
  42% {
    transform: translateX(1.8px);
  }
}
@keyframes agent-blink {
  0%,
  25%,
  65%,
  100% {
    transform: scaleY(1);
  }
  45% {
    transform: scaleY(0.12);
  }
}
@keyframes accent-light {
  0%,
  100% {
    opacity: 0.7;
  }
  45% {
    opacity: 1;
    filter: drop-shadow(0 0 2px #f0b90b66);
  }
}
@keyframes ribbon {
  0%,
  100% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(-8deg);
  }
  60% {
    transform: rotate(5deg);
  }
}
@keyframes lens-handle {
  0%,
  100% {
    transform: translate(0);
  }
  45% {
    transform: translate(0.8px, 0.8px);
  }
}
@keyframes bell-swing {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(12deg);
  }
  50% {
    transform: rotate(-9deg);
  }
  75% {
    transform: rotate(4deg);
  }
}
@keyframes plus-settle {
  0%,
  100% {
    transform: rotate(0);
  }
  45% {
    transform: rotate(90deg);
  }
}
@keyframes arrow-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(1.8px);
  }
}
@keyframes cross-turn {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(15deg);
  }
}
@keyframes copy-slide {
  0%,
  100% {
    transform: translate(0);
  }
  45% {
    transform: translate(-1.5px, -1.5px);
  }
}
@keyframes clock-tick {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(20deg);
  }
}
@keyframes land-rise {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-1.5px);
  }
}
@keyframes heart-beat {
  0%,
  100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.13);
  }
  65% {
    transform: scale(0.98);
  }
}
@keyframes heart-burst {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}
@keyframes dot-lift {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-2px);
  }
}
@keyframes plane-forward {
  0%,
  100% {
    transform: translate(0, 0);
  }
  45% {
    transform: translate(2px, -2px) rotate(-4deg);
  }
}
@keyframes trail-draw {
  0% {
    opacity: 0.1;
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
    stroke-dashoffset: 0;
  }
}
@keyframes slider-right {
  0%,
  100% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(3px);
  }
}
@keyframes slider-left {
  0%,
  100% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(-3px);
  }
}
@keyframes latch-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-1px);
  }
}
@keyframes bar-grow {
  0%,
  100% {
    transform: scaleY(1);
  }
  45% {
    transform: scaleY(0.7);
  }
}
@keyframes rays-turn {
  0% {
    transform: rotate(-30deg);
    opacity: 0.4;
  }
  100% {
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes moon-roll {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes pin-drop {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(1.7px);
  }
}
@keyframes download {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(2px);
  }
}
@keyframes half-turn {
  0% {
    transform: rotate(-70deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes scan-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes typing-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
@keyframes tooltip-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-theme="light"] .glyph-filters > button.active,
[data-theme="light"] .glyph-inspector .glyph-hero,
[data-theme="light"] .glyph-tile.selected > .aid-icon {
  color: #8a6800;
}
[data-theme="light"] .aid-icon {
  --glyph-accent: #a47d00;
}
[data-theme="light"] .rail-item .aid-icon {
  --glyph-accent: #a6a287;
}
[data-theme="light"] .rail-item.selected .aid-icon {
  --glyph-accent: #f0b90b;
}
@media (max-width: 1150px) {
  .glyph-workbench {
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 20px;
  }
  .glyph-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
  }
  .glyph-tile {
    min-height: 110px;
  }
  .glyph-inspector {
    padding: 20px;
  }
  .glyph-hero {
    width: 135px;
    height: 135px;
  }
  .glyph-hero > .aid-icon {
    width: 76px;
    height: 76px;
  }
  .motion-demos {
    gap: 15px;
  }
  .motion-demo {
    padding: 17px;
  }
  .icon-states {
    flex-wrap: wrap;
  }
  .icon-states > .design-section-label {
    flex-basis: 100%;
    max-width: none;
  }
  .state-example {
    flex: 1;
  }
  .design-intro h2 {
    font-size: 31px;
  }
  .design-intro p {
    font-size: 11px;
  }
}
@media (max-width: 950px) {
  .glyph-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .glyph-workbench {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 18px;
  }
  .glyph-inspector {
    padding: 18px;
  }
  .glyph-hero {
    width: 130px;
    height: 130px;
  }
  .glyph-sizes {
    gap: 18px;
  }
  .motion-demos {
    grid-template-columns: 1fr;
  }
  .motion-demo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
  }
  .motion-demo > .design-section-label {
    grid-column: 1/-1;
    margin-bottom: 5px;
  }
  .motion-demo > .btn {
    min-height: 35px;
  }
  .demo-chat,
  .demo-check {
    height: 130px;
  }
  .demo-window {
    margin: 12px 0;
    height: 110px;
  }
  .design-intro {
    gap: 18px;
  }
  .design-intro > .btn {
    font-size: 10px;
  }
  .design-intro h2 {
    font-size: 28px;
  }
}
@media (max-width: 700px) {
  .glyph-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .glyph-tile {
    min-height: 105px;
  }
  .design-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .glyph-inspector {
    top: 0;
  }
  .design-eyebrow {
    font-size: 8px;
  }
  .glyph-rule {
    font-size: 9px;
  }
  .glyph-hero {
    width: 120px;
    height: 120px;
  }
  .glyph-sizes {
    gap: 14px;
  }
  .glyph-workbench {
    grid-template-columns: 185px minmax(0, 1fr);
  }
  .glyph-filters {
    gap: 2px;
  }
  .glyph-filters > button {
    font-size: 10px;
    padding: 6px 7px;
  }
  .glyph-filters > span {
    font-size: 9px;
  }
  .rail-version {
    font-size: 7px;
  }
}
@media (max-width: 650px) {
  .rail-item > .aid-icon {
    width: 24px;
    height: 24px;
  }
  .rail-item.selected {
    background: transparent;
    box-shadow: none;
  }
  .rail-item:hover,
  .rail-item.selected:hover {
    background: transparent;
  }
  .compose-tools > div {
    gap: 13px;
  }
  .compose-tools > div > button {
    width: 23px;
  }
  .compose-tools .aid-icon {
    width: 20px;
    height: 20px;
  }
  .typing-bubble {
    padding: 10px 12px;
    font-size: 9px;
    gap: 9px;
  }
  .typing-label {
    font-size: 8px;
  }
  .design-intro {
    margin-bottom: 22px;
    gap: 15px;
  }
  .design-intro h2 {
    font-size: 30px;
    margin: 9px 0;
  }
  .design-intro p {
    font-size: 10px;
    line-height: 1.8;
  }
  .design-intro > .btn {
    font-size: 10px;
  }
  .glyph-workbench {
    display: block;
  }
  .glyph-inspector {
    position: static;
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    column-gap: 20px;
    padding: 18px;
    margin-bottom: 23px;
    text-align: left;
    align-items: center;
  }
  .glyph-inspector > .design-section-label {
    grid-column: 1/-1;
    margin-bottom: 15px;
    font-size: 7px;
  }
  .glyph-hero {
    grid-row: 2/5;
    grid-column: 1;
    width: 105px;
    height: 105px;
    border-radius: 25px;
    margin: 0;
  }
  .glyph-hero > .aid-icon {
    width: 59px;
    height: 59px;
  }
  .glyph-inspector > h3 {
    font-size: 16px;
    grid-column: 2;
    align-self: end;
    margin-bottom: 7px;
  }
  .glyph-inspector > p {
    font-size: 9px;
    grid-column: 2;
    margin: 0;
    align-self: start;
  }
  .glyph-sizes {
    display: none;
  }
  .glyph-inspector > .btn {
    grid-column: 2;
    width: fit-content;
    font-size: 9px;
    min-height: 28px;
    padding: 5px 10px;
    margin-top: 10px;
  }
  .glyph-inspector > .btn > .aid-icon {
    width: 12px;
    height: 12px;
  }
  .glyph-rule {
    grid-column: 1/-1;
    font-size: 9px;
    margin-top: 18px;
    padding-top: 16px;
    gap: 10px;
  }
  .glyph-filters {
    gap: 5px;
    margin-bottom: 14px;
  }
  .glyph-filters > button {
    font-size: 10px;
    padding: 6px 8px;
  }
  .glyph-filters > span {
    font-size: 9px;
  }
  .glyph-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .glyph-tile {
    min-height: 112px;
    padding: 16px 5px 13px;
  }
  .glyph-tile > .aid-icon {
    width: 29px;
    height: 29px;
    margin-bottom: 6px;
  }
  .glyph-tile > span {
    font-size: 10px;
  }
  .glyph-tile > small {
    font-size: 8px;
  }
  .motion-section {
    margin-top: 30px;
    padding-top: 24px;
  }
  .motion-section h3 {
    font-size: 15px;
  }
  .motion-section .small {
    font-size: 10px;
  }
  .motion-preference {
    font-size: 9px;
    flex-wrap: wrap;
    gap: 7px;
  }
  .motion-preference > select {
    font-size: 9px;
    padding: 7px 8px;
  }
  .motion-demos {
    gap: 14px;
  }
  .motion-demo {
    padding: 17px;
    gap: 12px;
  }
  .motion-demo > .design-section-label {
    font-size: 7px;
    margin-bottom: 0;
  }
  .motion-demo > .btn {
    font-size: 9px;
    min-height: 31px;
    padding: 7px 10px;
  }
  .demo-mini-bubble {
    font-size: 9px;
    padding: 8px 10px;
  }
  .demo-mini-bubble.self {
    gap: 5px;
  }
  .demo-mini-bubble.self .aid-icon {
    width: 11px;
    height: 11px;
  }
  .demo-check > span {
    font-size: 9px;
    text-align: center;
  }
  .demo-check > .aid-icon {
    width: 34px;
    height: 34px;
  }
  .demo-window {
    height: 100px;
  }
  .icon-states {
    gap: 9px;
    padding-bottom: 0;
  }
  .icon-states > .design-section-label {
    font-size: 7px;
    margin-bottom: 3px;
  }
  .state-example {
    font-size: 8px;
    padding: 8px;
    gap: 5px;
    min-width: 43%;
    justify-content: flex-start;
  }
  .state-example > .aid-icon {
    width: 17px;
    height: 17px;
  }
  .aid-tooltip {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
body[data-motion="reduced"] *,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.glyph-hero > .aid-icon :is(path, rect, circle) {
  vector-effect: none;
}
.rail-item.selected > .aid-icon .i-accent {
  animation: accent-light 480ms ease;
}
.design-intro-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.design-intro-actions > .btn {
  font-size: 10px;
}
.design-intro-actions > .btn > .aid-icon {
  width: 14px;
  height: 14px;
}
.motion-section {
  scroll-margin-top: 15px;
}
@media (max-width: 950px) {
  .design-intro {
    align-items: flex-start;
    flex-direction: column;
  }
  .design-intro-actions {
    gap: 9px;
  }
  .design-intro-actions > .btn {
    font-size: 10px;
  }
}
@media (max-width: 650px) {
  .design-intro-actions > .btn {
    padding: 8px 11px;
    font-size: 9px;
    min-height: 31px;
  }
  .design-intro-actions > .btn > .aid-icon {
    width: 13px;
    height: 13px;
  }
}
:is(button, a):is(:hover, :focus-visible)
  :is(.icon-file, .icon-book, .icon-bookmark, .icon-receipt, .icon-link)
  :is(.i-detail, .i-accent),
.motion-replay
  :is(.icon-file, .icon-book, .icon-bookmark, .icon-receipt, .icon-link)
  :is(.i-detail, .i-accent) {
  animation: line-reveal 460ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-globe .i-detail,
.motion-replay .icon-globe .i-detail {
  animation: globe-tilt 550ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible)
  :is(.icon-identity, .icon-group)
  .i-detail,
.motion-replay :is(.icon-identity, .icon-group) .i-detail {
  animation: portrait-rise 420ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-key .i-frame,
.motion-replay .icon-key .i-frame {
  animation: key-turn 480ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-qr .i-accent,
.motion-replay .icon-qr .i-accent {
  animation: accent-light 500ms ease;
}
:is(button, a):is(:hover, :focus-visible) .icon-code .i-frame,
.motion-replay .icon-code .i-frame {
  animation: code-breathe 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-swap .i-swap,
.motion-replay .icon-swap .i-swap {
  animation: swap-turn 550ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-upload .i-arrow,
.motion-replay .icon-upload .i-arrow {
  animation: upload 440ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-pause .i-frame,
.motion-replay .icon-pause .i-frame {
  animation: pause-settle 420ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible)
  :is(.icon-warning, .icon-device)
  .i-accent,
.motion-replay :is(.icon-warning, .icon-device) .i-accent {
  animation: accent-light 500ms ease;
}
:is(button, a):is(:hover, :focus-visible) .icon-filter .i-frame,
.motion-replay .icon-filter .i-frame {
  animation: filter-settle 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-mute .i-slash,
.motion-replay .icon-mute .i-slash {
  animation: line-reveal 400ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-trash .i-frame,
.motion-replay .icon-trash .i-frame {
  animation: bin-tilt 450ms var(--ease-out);
}
:is(button, a):is(:hover, :focus-visible) .icon-play .i-accent,
.motion-replay .icon-play .i-accent {
  animation: arrow-nudge 440ms var(--ease-out);
}
@keyframes globe-tilt {
  0%,
  100% {
    transform: rotate(0);
  }
  45% {
    transform: rotate(12deg);
  }
}
@keyframes key-turn {
  0%,
  100% {
    transform: rotate(0);
  }
  45% {
    transform: rotate(-8deg);
  }
}
@keyframes code-breathe {
  0%,
  100% {
    transform: scaleX(1);
  }
  45% {
    transform: scaleX(1.08);
  }
}
@keyframes swap-turn {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0);
  }
}
@keyframes upload {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-2px);
  }
}
@keyframes pause-settle {
  0%,
  100% {
    transform: scaleY(1);
  }
  45% {
    transform: scaleY(0.85);
  }
}
@keyframes filter-settle {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(1.3px);
  }
}
@keyframes bin-tilt {
  0%,
  100% {
    transform: rotate(0);
  }
  40% {
    transform: rotate(-4deg);
  }
}