*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--canvas); color: var(--ink); }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.skip {
  position: absolute;
  left: 16px;
  top: -40px;
  background: var(--ink);
  color: var(--canvas);
  padding: 6px 10px;
  border-radius: 8px;
  z-index: 40;
}
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.icon { display: inline-flex; width: 18px; height: 18px; }
.icon svg { width: 100%; height: 100%; }
[data-theme="light"] .icon-sun,
[data-theme="dark"] .icon-moon { display: none; }

.badge {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hue, var(--ink-soft));
  color: #fff;
  flex: none;
}
.badge .icon,
.badge svg { color: #fff; }
.badge svg { stroke: currentColor; }
.badge .icon { width: 16px; height: 16px; }
.badge.sm { width: 26px; height: 26px; border-radius: 8px; }
.badge.sm .icon { width: 14px; height: 14px; }
.tone-review { --hue: var(--review); --tint: var(--review-tint); }
.tone-stuck { --hue: var(--stuck); --tint: var(--stuck-tint); }
.tone-moving { --hue: var(--moving); --tint: var(--moving-tint); }
.tone-shipped { --hue: var(--shipped); --tint: var(--shipped-tint); }
.tone-todo { --hue: var(--todo); --tint: var(--todo-tint); }
.tone-neutral { --hue: var(--ink-soft); --tint: var(--inset); }
.lane-1, .channel[data-lane="栏目/四时日月"], .lane[data-lane="栏目/四时日月"] { --hue: var(--lane-1); --tint: var(--lane-1-tint); }
.lane-2, .channel[data-lane="栏目/隔洋看世界"], .lane[data-lane="栏目/隔洋看世界"] { --hue: var(--lane-2); --tint: var(--lane-2-tint); }
.lane-3, .channel[data-lane="栏目/大蒜粒机研所"], .lane[data-lane="栏目/大蒜粒机研所"] { --hue: var(--lane-3); --tint: var(--lane-3-tint); }

.chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tint, var(--inset));
  color: var(--hue, var(--ink));
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.when { color: var(--ink-soft); font-size: 12px; white-space: nowrap; }

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tint, var(--inset));
  color: var(--hue, var(--ink));
  font-size: 11px;
  font-weight: 650;
  flex: none;
}

.mast {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
}
.mast-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.word { font-weight: 650; font-size: 15px; text-decoration: none; }
.mast-date { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.mast-actions { display: flex; align-items: center; gap: 8px; }
.view-toggle {
  display: flex;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.view-toggle button {
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--ink-soft);
  line-height: 1.2;
}
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.icon-btn:hover, .view-toggle button:hover { background: var(--hover); }
.icon-btn kbd { font: inherit; font-size: 12px; color: var(--ink-soft); }
.primary {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 650;
}
.primary:hover { background: var(--primary-hover); }
.demo-note {
  margin: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--review-tint);
  color: var(--review);
  font-size: 12px;
  font-weight: 650;
}
.progress {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 55px;
  height: 2px;
  background: var(--primary);
}

.filter-note {
  margin: 0 16px 8px;
  color: var(--ink-soft);
  font-size: 13px;
}
.filter-note button { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#today {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  padding: 0 16px 8px;
}
.stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.tile-wait { grid-column: 1 / 5; grid-row: 2; }
.tile-stuck { grid-column: 5 / 9; grid-row: 2; }
.tile-feed { grid-column: 9 / 13; grid-row: 2; }
.channels {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  min-height: 0;
}

.stat, .tile, .channel, .lane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
  min-height: 0;
}
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px var(--pad);
  background: var(--tint, var(--surface));
}
.stat-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat b {
  font-size: 28px;
  font-weight: 650;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--hue, var(--ink));
}
.stat-copy span { color: var(--ink-soft); font-size: 13px; }

.tile, .channel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tile-head, .channel-top, .lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  min-height: 64px;
  padding: 14px var(--pad);
  background: var(--tint, transparent);
}
.tile-title, .channel-id, .lane-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.tile-head h2, .channel-name, .lane-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
}
.channel-name, .lane-head h2 { color: var(--hue, var(--ink)); }
.tile-head .count, .stage-head span {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 650;
}
.channel-plat, .lane-head small {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-id, .lane-id { align-items: flex-start; }
.channel.is-muted { opacity: 0.55; }

.channel-main, .tile-body, .lane-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px var(--pad) 16px;
}
.tile-body, .lane-body { overflow: auto; display: block; padding-top: 12px; }
.channel-main { gap: 10px; }
.channel-main > .tile-body { padding: 0; }

.bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--inset);
  gap: 2px;
}
.seg { display: block; height: 100%; border-radius: 999px; background: var(--hue, var(--line-strong)); min-width: 4px; }

.counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.counts div { min-width: 0; }
.counts b {
  display: block;
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--hue, var(--ink));
}
.counts small { color: var(--ink-soft); font-size: 11px; }
.stuck-note {
  margin: 0;
  min-height: 18px;
  color: var(--stuck);
  font-size: 12px;
  font-weight: 650;
}
.stuck-note.is-zero { color: var(--ink-soft); font-weight: 500; }

.row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-in);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
}
.tile-body .row, .channel-main .row { background: var(--canvas); }
.row + .row { margin-top: 8px; }
.row:hover { background: var(--hover); border-color: var(--line-strong); }
.row-title, .mini h3, .feed-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-title {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0;
}
.row-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.brief {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reason, .mini .stuck-reason {
  color: var(--stuck);
  font-size: 12px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-actions { display: flex; gap: 4px; }
.row-actions button, .text-btn {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}
.row-actions button:hover { background: var(--hover); }
.row-actions .pass { background: var(--shipped); border-color: transparent; color: #fff; }
[data-theme="dark"] .row-actions .pass { color: #0e1014; }
.quiet { margin: 8px 0; color: var(--ink-soft); font-size: 13px; }
.quiet a { color: var(--primary); }

.colophon {
  flex: none;
  display: flex;
  gap: 16px;
  align-items: baseline;
  height: 32px;
  padding: 0 16px;
  color: var(--ink-soft);
  font-size: 12px;
}
.colophon p { margin: 0; }
.colophon .fine, .colophon .links { display: none; }
.mode.is-write { color: var(--shipped); }

#line-view { display: none; flex: 1; min-height: 0; flex-direction: column; }
html[data-view="line"] #today { display: none; }
html[data-view="line"] #line-view { display: flex; }
.line-switch { display: none; gap: 8px; padding: 0 16px 8px; overflow: auto; }
.line-switch button {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.line-switch button.is-current { background: var(--hue, var(--ink)); color: #fff; border-color: transparent; }
[data-theme="dark"] .line-switch button.is-current { color: #0e1014; }

.lanes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding: 0 16px 8px;
}
.lane { display: flex; flex-direction: column; overflow: hidden; }
.lane-body { display: flex; flex-direction: column; gap: 8px; }
.stage {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  flex: none;
}
.stage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 24px;
  padding: 2px 4px 6px;
}
.stage-head h3 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: 0; color: var(--hue, var(--ink-soft)); }
.stage[data-status="待做"] { --hue: var(--todo); }
.stage[data-status="进行中"] { --hue: var(--moving); }
.stage[data-status="待验收"] { --hue: var(--review); }
.stage[data-status="已发布"],
.stage[data-status="已完成"] { --hue: var(--shipped); }
.stage[data-status="卡住"] { --hue: var(--stuck); }
.stage.is-drop { outline: 2px solid var(--primary); outline-offset: -2px; }
.mini {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 6px;
  padding: 8px;
  border-radius: var(--radius-in);
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
}
.mini:hover { background: var(--hover); }
.mini.is-source { opacity: 0.45; }
.mini h3 { margin: 0; font-size: 13px; font-weight: 650; line-height: 1.35; letter-spacing: 0; }
.mini p { margin: 4px 0 0; }
.grip {
  display: inline-flex;
  width: 16px;
  height: 22px;
  color: var(--ink-soft);
  cursor: grab;
  flex: none;
}
.grip .icon { width: 14px; height: 14px; }
.stage-empty { margin: 2px 4px 4px; color: var(--ink-soft); font-size: 12px; }
body.is-dragging, body.is-dragging * { cursor: grabbing; }
#drag-floater {
  position: fixed;
  z-index: 70;
  top: 0;
  left: 0;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--canvas);
  pointer-events: none;
  font-size: 13px;
  box-shadow: var(--shadow);
}

dialog:not([open]) { display: none; }
dialog::backdrop { background: rgba(16, 18, 24, 0.4); }
#palette {
  width: min(560px, calc(100% - 32px));
  max-height: min(640px, 74vh);
  margin: 10vh auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
#palette[open] { display: flex; flex-direction: column; }
.palette-search input {
  width: 100%;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 16px;
}
.palette-search input:focus { outline: none; }
#palette-list { overflow: auto; padding: 6px; }
.palette-group { margin: 8px 10px 2px; color: var(--ink-soft); font-size: 12px; }
.palette-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
}
.palette-item.is-active, .palette-item:hover { background: var(--inset); }
.palette-item .hint { color: var(--ink-soft); font-size: 12px; }
.palette-empty { margin: 12px; color: var(--ink-soft); }
.palette-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--line);
}
.palette-foot button { padding: 6px 10px; border-radius: 999px; color: var(--ink-soft); }
.palette-foot button:hover { background: var(--hover); }
.palette-foot .hint { margin-left: auto; }

#settings, #composer, #prompt {
  width: min(460px, calc(100% - 32px));
  margin: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
#settings[open], #composer[open], #prompt[open] { display: block; }
.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-head h2, #prompt h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.dialog-actions { justify-content: flex-end; margin-top: 14px; }
.dialog-actions button, .drawer-bar button, .drawer-bar a {
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--inset);
  border: 1px solid var(--line);
  text-decoration: none;
}
.dialog-actions button[type="submit"], #comment-submit { background: var(--primary); border-color: transparent; color: var(--primary-ink); }
label { display: block; margin: 12px 0 6px; font-size: 13px; }
input, select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--inset);
}
textarea { resize: vertical; }
.hint { color: var(--ink-soft); font-size: 13px; }
#prompt-text { margin: 10px 0; }

.drawer {
  width: min(520px, 100%);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 16px 0 0 16px;
  background: var(--surface);
  color: var(--ink);
}
.drawer[open] { display: flex; flex-direction: column; }
.drawer-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.drawer-bar a { margin-left: auto; }
.drawer-scroll { flex: 1; overflow: auto; padding: 0 22px 22px; }
.drawer-scroll h2 { margin: 6px 0 10px; font-size: 28px; line-height: 1.25; letter-spacing: 0; }
.drawer-kicker { margin: 0; color: var(--ink-soft); font-size: 12px; }
.section-label { margin: 22px 0 8px; color: var(--ink-soft); font-size: 12px; font-weight: 650; }
.move-row { display: flex; flex-wrap: wrap; gap: 6px; }
.move-row button {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--tint, var(--inset));
  color: var(--hue, var(--ink-soft));
  border: 1px solid transparent;
}
.move-row button.is-current { background: var(--hue, var(--ink)); color: #fff; }
[data-theme="dark"] .move-row button.is-current { color: #0e1014; }
.reason-callout { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--stuck-tint); color: var(--stuck); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; }
.output-links { display: flex; flex-direction: column; gap: 4px; }
.output-links a { color: var(--primary); }
.markdown { font-size: 14px; line-height: 1.55; }
.markdown h2, .markdown h3, .markdown h4 { margin: 0.7em 0 0.25em; font-size: 15px; letter-spacing: 0; }
.markdown h2:first-child, .markdown h3:first-child, .markdown h4:first-child { margin-top: 0; }
.markdown p { margin: 0.3em 0; }
.drawer-scroll .section-label { margin: 14px 0 6px; }
.markdown pre { overflow: auto; padding: 10px; border-radius: 10px; background: var(--inset); }
.drawer-meta { margin: 0 0 8px; }
.timeline { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.timeline li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--inset); }
.timeline li.is-shawn { background: var(--review-tint); border-color: transparent; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--ink-soft); font-size: 12px; }
.who-name { color: var(--ink); font-weight: 650; }
.who-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
}
.who-badge.is-shawn { background: var(--primary); border-color: transparent; color: var(--primary-ink); }
.comment-count { font-variant-numeric: tabular-nums; }
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.comment-form label { margin: 0 0 6px; }
.comment-compose, .comment-setup { display: flex; flex-direction: column; min-height: 0; }
.comment-compose[hidden], .comment-setup[hidden] { display: none; }
.comment-setup { max-height: 46dvh; overflow: auto; }
.comment-setup p { margin: 0; }
.comment-setup ol { margin: 8px 0; padding-left: 1.2em; font-size: 13px; }
.comment-setup li { margin: 3px 0; }
.comment-setup label { margin-top: 4px; }
.token-link {
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  text-decoration: none;
  font-size: 13px;
}
.comment-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.comment-note { flex: 1; margin: 0; min-width: 0; font-size: 12px; line-height: 1.45; }
.comment-note.is-ok { color: var(--shipped); }
.comment-note.is-error { color: var(--stuck); }
.comment-hint { margin: 4px 0 0; font-size: 12px; }
.text-btn { padding: 7px 8px; border-radius: 999px; color: var(--ink-soft); background: transparent; }
#comment-submit, #setup-back, #drawer-token-save { padding: 7px 14px; border-radius: 999px; }
#setup-back { background: var(--inset); border: 1px solid var(--line); color: var(--ink); }
#drawer-token-save { background: var(--primary); border-color: transparent; color: var(--primary-ink); }
.pill { padding: 3px 8px; border-radius: 999px; background: var(--review-tint); color: var(--review); font-size: 12px; font-weight: 650; }
.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
}
.noscript { margin: 16px; }

@media (max-width: 800px) {
  html, body { height: auto; overflow: auto; }
  body { display: block; }
  .frame { display: block; }
  #today {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-bottom: 16px;
  }
  .stats { grid-template-columns: 1fr 1fr; }
  .channels { display: flex; flex-direction: column; }
  .tile, .channel { height: auto; }
  .tile-body, .channel-main { overflow: visible; }
  .kbd, #theme-toggle { display: none; }
  .icon-btn { width: 32px; padding: 0; }
  .mast { height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .colophon { display: block; height: auto; padding-bottom: 20px; }
  .colophon .fine, .colophon .links { display: block; margin-top: 6px; }
  html[data-view="line"] .frame { display: flex; flex-direction: column; min-height: 0; height: calc(100dvh - 72px); }
  html[data-view="line"] body { height: 100dvh; overflow: hidden; display: flex; }
  html[data-view="line"] .line-switch { display: flex; }
  html[data-view="line"] .lanes { display: block; overflow: hidden; }
  html[data-view="line"] .lane { display: none; height: 100%; }
  html[data-view="line"] .lane.is-current { display: flex; }
  .drawer { width: 100%; border-radius: 0; }
  #palette { width: 100%; max-height: 88dvh; margin: 0; border-radius: 0 0 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
