:root {
  --bg: #050805;
  --green: #3cff6a;
  --green-dim: #1a7a35;
  --green-glow: rgba(60, 255, 106, 0.35);
  --green-faint: rgba(60, 255, 106, 0.12);
  --warn: #c8ff3c;
  --text: #9dffb0;
  --muted: #3d6b48;
  --font: "Share Tech Mono", ui-monospace, monospace;
  --col-left: clamp(13.5rem, 20vw, 17.5rem);
  --col-right: clamp(18.5rem, 28vw, 26rem);

  /* Curseurs CRT minimal · flèche / + / I */
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22'%3E%3Cpath fill='%233cff6a' stroke='%23050805' stroke-width='1.2' stroke-linejoin='miter' d='M1.2 1.2v17.2l4.8-4.9 4.3 8.2 2.3-1.2-4.3-8.1h6.5z'/%3E%3C/svg%3E") 1 1, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22' viewBox='0 0 18 22'%3E%3Cpath fill='%233cff6a' stroke='%23050805' stroke-width='1.2' stroke-linejoin='miter' d='M1.2 1.2v17.2l4.8-4.9 4.3 8.2 2.3-1.2-4.3-8.1h6.5z'/%3E%3Cpath fill='none' stroke='%233cff6a' stroke-width='1' d='M3.2 3.2v9.2' opacity='0.55'/%3E%3C/svg%3E") 1 1, pointer;
  --cursor-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='22' viewBox='0 0 14 22'%3E%3Cpath fill='none' stroke='%233cff6a' stroke-width='1.6' stroke-linecap='square' d='M3 2h8M7 2v18M3 20h8'/%3E%3C/svg%3E") 7 11, text;
  --cursor-grab: url("../assets/cursors/hand-open.svg") 9 2, grab;
  --cursor-grabbing: url("../assets/cursors/hand-grab.svg") 9 6, grabbing;
}

@media (pointer: fine) {
  html,
  body,
  .stage,
  .app,
  .boot {
    cursor: var(--cursor-default);
  }

  a,
  button,
  .btn,
  .btn-icon,
  .chip,
  .planet-item,
  .boot-cta,
  label[for],
  summary,
  [role="button"],
  .chat-send,
  .chat-reset {
    cursor: var(--cursor-pointer);
  }

  input,
  textarea,
  [contenteditable="true"],
  .chat-input {
    cursor: var(--cursor-text);
  }

  .search-input::-webkit-search-cancel-button {
    cursor: var(--cursor-pointer);
  }

  #planet-canvas {
    cursor: var(--cursor-grab);
  }

  #planet-canvas:active {
    cursor: var(--cursor-grabbing);
  }
}

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

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--green);
  font-family: var(--font);
}

/* Un seul cadre plein écran : boot et app s'y superposent */
.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

.boot {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: radial-gradient(ellipse at center, #0a180a 0%, var(--bg) 70%);
  transition: opacity 280ms ease, visibility 280ms ease;
}

.boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-log {
  grid-area: 1 / 1;
  margin: 0;
  width: min(36rem, 100%);
  min-height: 0;
  color: var(--green);
  font-size: clamp(0.75rem, 2.5vw, 0.95rem);
  line-height: 1.55;
  text-shadow: 0 0 8px var(--green-glow);
  white-space: pre-wrap;
  text-align: left;
}

.boot-start {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.35rem;
  width: min(36rem, 100%);
  z-index: 1;
}

.boot-start.is-gone {
  display: none;
}

.boot-status {
  margin: 0;
  color: var(--green);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  animation: boot-status-blink 1s steps(1, end) infinite;
}

.boot-status.is-gone {
  display: none;
}

.boot-cta {
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1.35rem;
  color: var(--bg);
  background: var(--green);
  border: 1px solid var(--green);
  box-shadow: 0 0 14px var(--green-glow);
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.boot-cta:hover,
.boot-cta:focus-visible {
  background: transparent;
  color: var(--green);
  box-shadow: 0 0 18px var(--green-glow);
  outline: none;
}

.boot-cta.is-gone {
  display: none;
}

@keyframes boot-status-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-status {
    animation: none;
    opacity: 1;
  }
}

.btn,
.btn-icon,
.chip {
  font-family: inherit;
  border: 1px solid var(--green-dim);
  background: transparent;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn {
  padding: 0.45rem 0.75rem;
  font-size: 0.68rem;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.btn:hover,
.btn-icon:hover,
.chip:hover,
.planet-item:hover {
  background: var(--green-faint);
  box-shadow: 0 0 14px var(--green-glow);
}

.btn:focus-visible,
.btn-icon:focus-visible,
.chip:focus-visible,
.planet-item:focus-visible,
input:focus-visible {
  outline: 1px solid var(--green);
  outline-offset: 2px;
}

.app {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.app.is-ready {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}

.app.is-ready .col-left {
  animation: panel-in-left 1.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app.is-ready .col-center {
  animation: panel-in-center 1.55s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.app.is-ready .col-right {
  animation: panel-in-right 1.45s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

@keyframes panel-in-left {
  from {
    opacity: 0;
    transform: translateX(-2.25rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes panel-in-right {
  from {
    opacity: 0;
    transform: translateX(2.25rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes panel-in-center {
  from {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.crt,
.vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 40;
}

.crt {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.45;
  animation: flicker 6s infinite;
}

html.is-page-hidden .crt {
  animation: none;
}

.vignette {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 41;
}

@keyframes flicker {
  0%, 100% { opacity: 0.45; }
  47% { opacity: 0.55; }
  48% { opacity: 0.38; }
  93% { opacity: 0.35; }
  94% { opacity: 0.5; }
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--green-dim);
  background: rgba(5, 12, 6, 0.72);
  color: var(--green);
}

.btn-icon.is-on {
  border-color: var(--green);
  background: var(--green);
  color: #050805;
  box-shadow: none;
}

.btn-icon:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.btn-audio .icon-mute-x {
  display: none;
}

.btn-audio.is-off .icon-waves {
  display: none;
}

.btn-audio.is-off .icon-mute-x {
  display: block;
}

.icon-tool {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.workspace {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
  overflow: hidden;
}

.col {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.55rem;
  overflow: hidden;
}

.col-left,
.col-right {
  overflow: hidden;
  background: rgba(6, 14, 8, 0.55);
}

.col-left {
  border-right: 1px solid var(--green-dim);
  gap: 0.55rem;
}

.col-left .panel-state {
  margin: 0;
}

.col-right {
  border-left: 1px solid var(--green-dim);
  gap: 0.55rem;
}

.col-right .panel-state {
  margin: 0;
}

.brand {
  margin: 0;
  flex: 0 0 auto;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--green);
  text-shadow: 0 0 16px var(--green-glow);
}

.brand-target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.col-title {
  margin: 0 0 0.55rem;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.col-title-spaced {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--green-dim);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-wrap {
  display: block;
  flex: 0 0 auto;
}

.search-input {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--green-dim);
  background: #061006;
  color: var(--green);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-input::placeholder {
  color: var(--muted);
  letter-spacing: 0.1em;
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  filter: invert(1) sepia(1) saturate(5) hue-rotate(60deg);
  cursor: var(--cursor-pointer);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  flex: 0 0 auto;
}

.chip {
  padding: 0.28rem 0.45rem;
  font-size: 0.62rem;
}

.chip.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--bg);
  box-shadow: 0 0 10px var(--green-glow);
}

.chip.is-active:hover {
  background: var(--green);
  color: var(--bg);
  box-shadow: 0 0 14px var(--green-glow);
}

.panel-state {
  margin: 0 0 0.45rem;
  padding: 0.5rem;
  border: 1px solid var(--green-dim);
  color: var(--text);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  background: rgba(8, 24, 10, 0.55);
  flex: 0 0 auto;
}

.panel-state.is-loading {
  animation: pulse 1.2s steps(2) infinite;
}

.panel-state.is-error {
  color: var(--warn);
  border-color: var(--warn);
}

@keyframes pulse {
  50% { opacity: 0.55; }
}

.planet-list {
  list-style: none;
  margin: 0;
  padding: 0 0.45rem 5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--green) rgba(8, 24, 10, 0.35);
}

.planet-list::-webkit-scrollbar {
  width: 5px;
}

.planet-list::-webkit-scrollbar-track {
  background: rgba(8, 24, 10, 0.45);
  border-left: 1px solid rgba(26, 122, 53, 0.35);
}

.planet-list::-webkit-scrollbar-thumb {
  background: var(--green-dim);
  border: 1px solid var(--green);
  box-shadow: 0 0 6px var(--green-glow);
}

.planet-list::-webkit-scrollbar-thumb:hover {
  background: var(--green);
}

.planet-item {
  width: 100%;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.4rem;
  padding: 0.45rem 0.45rem;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: rgba(8, 24, 10, 0.35);
  border: 1px solid var(--green-dim);
  content-visibility: auto;
  contain-intrinsic-size: auto 3.4rem;
}

.planet-item.is-selected {
  border-color: var(--green);
  background: var(--green-faint);
  box-shadow: 0 0 12px var(--green-glow);
}

.planet-empty {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.15rem;
  list-style: none;
}

.planet-name {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.planet-meta {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.planet-tag {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text);
}

.viewport-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--green-dim);
  background: #010301;
  overflow: hidden;
}

#planet-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.viewport-freq {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  z-index: 2;
  margin: 0;
  text-align: right;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}

.viewport-freq-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

.viewport-freq-value {
  margin: 0.1rem 0 0;
  color: var(--green);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.viewport-freq-kind {
  margin: 0.08rem 0 0;
  color: var(--muted);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

.viewport-credit {
  position: absolute;
  left: 0.55rem;
  bottom: 0.5rem;
  z-index: 2;
  margin: 0;
  max-width: calc(100% - 10rem);
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}

.viewport-credit a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  pointer-events: auto;
}

.viewport-credit a:hover,
.viewport-credit a:focus-visible {
  color: var(--text);
}

.viewport-toolbar {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.viewport-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  pointer-events: auto;
}

.viewport-toolbar .btn-icon {
  width: 2.55rem;
  height: 2.55rem;
}

.viewport-toolbar .icon-tool {
  width: 1.35rem;
  height: 1.35rem;
}

.col-center {
  padding: 0.45rem;
}

.col-center .panel-state {
  margin-bottom: 0.35rem;
}

.col-right {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--green) rgba(8, 24, 10, 0.35);
}

.col-right::-webkit-scrollbar {
  width: 5px;
}

.col-right::-webkit-scrollbar-track {
  background: rgba(8, 24, 10, 0.45);
  border-left: 1px solid rgba(26, 122, 53, 0.35);
}

.col-right::-webkit-scrollbar-thumb {
  background: var(--green-dim);
  border: 1px solid var(--green);
  box-shadow: 0 0 6px var(--green-glow);
}

.col-right::-webkit-scrollbar-thumb:hover {
  background: var(--green);
}

.clock-block {
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--green-dim);
}

.dose-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

.dose-value {
  margin: 0.15rem 0 0;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px var(--green-glow);
}

.dose-unit {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.3;
}

.stats {
  margin: 0;
  display: grid;
  gap: 0.3rem;
}

.stats > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid rgba(26, 122, 53, 0.35);
}

.stats dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}

.stats dd {
  margin: 0;
  font-size: 0.74rem;
  text-align: right;
  color: var(--green);
  max-width: 12rem;
  word-break: break-word;
}

.source-line {
  margin: 0.55rem 0 5rem;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.chat-panel {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.45rem;
}

.col-right.is-chat .chat-panel {
  display: flex;
}

.chat-panel[hidden] {
  display: none !important;
}

.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0 0.2rem 0.4rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--green) rgba(8, 24, 10, 0.35);
}

.chat-log::-webkit-scrollbar {
  width: 5px;
}

.chat-log::-webkit-scrollbar-thumb {
  background: var(--green-dim);
  border: 1px solid var(--green);
}

.chat-msg {
  margin: 0;
  padding: 0.4rem 0.45rem;
  font-size: 0.74rem;
  line-height: 1.35;
  letter-spacing: 0.03em;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid rgba(26, 122, 53, 0.35);
}

.chat-msg.is-user {
  align-self: flex-end;
  max-width: 92%;
  color: var(--text);
  border-color: var(--green-dim);
  background: rgba(8, 28, 12, 0.55);
}

.chat-msg.is-bot {
  align-self: stretch;
  color: var(--green);
  background: rgba(4, 14, 6, 0.4);
}

.chat-msg.is-system {
  align-self: stretch;
  margin-top: 0.85rem;
  padding: 0.65rem 0.55rem;
  color: var(--green);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  border: 1px solid var(--green);
  background: rgba(60, 255, 106, 0.06);
  box-shadow: inset 0 0 0 1px rgba(8, 24, 10, 0.8);
}

.chat-msg.is-typing {
  align-self: flex-start;
  max-width: 4.5rem;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.5rem 0.55rem;
  color: var(--green);
  border-color: var(--green-dim);
  background: rgba(8, 28, 12, 0.55);
}

.chat-msg.is-typing span {
  width: 0.28rem;
  height: 0.28rem;
  background: var(--green);
  opacity: 0.25;
  animation: chat-typing 0.9s steps(2, end) infinite;
}

.chat-msg.is-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-msg.is-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-typing {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-msg.is-typing span {
    animation: none;
    opacity: 0.7;
  }
}

.chat-form {
  display: flex;
  gap: 0.3rem;
  flex: 0 0 auto;
  padding-bottom: 0.35rem;
}

.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--green-dim);
  background: #061006;
  color: var(--green);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.chat-input::placeholder {
  color: var(--muted);
  letter-spacing: 0.1em;
}

.chat-send,
.chat-reset {
  flex: 0 0 auto;
}

/* Tablette / mobile : toujours dans le viewport, colonnes en grille compacte */
@media (max-width: 960px) {
  .workspace {
    grid-template-columns: 10.5rem minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 42%);
  }

  .col-left {
    grid-row: 1 / 3;
    border-right: 1px solid var(--green-dim);
    border-bottom: 0;
  }

  .col-center {
    grid-column: 2;
    grid-row: 1;
  }

  .col-right {
    grid-column: 2;
    grid-row: 2;
    border-left: 0;
    border-top: 1px solid var(--green-dim);
  }
}

@media (max-width: 640px) {
  :root {
    --col-left: 0;
  }

  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 28% minmax(0, 1fr) 34%;
  }

  .col-left,
  .col-center,
  .col-right {
    grid-column: 1;
    grid-row: auto;
    border: 0;
  }

  .col-left {
    border-bottom: 1px solid var(--green-dim);
  }

  .col-right {
    border-top: 1px solid var(--green-dim);
  }

  .planet-list {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 1.5rem 0.45rem 0;
    scrollbar-color: var(--green) rgba(8, 24, 10, 0.35);
  }

  .planet-list::-webkit-scrollbar {
    height: 5px;
    width: auto;
  }

  .planet-item {
    min-width: 7.5rem;
    width: 7.5rem;
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt,
  .panel-state.is-loading,
  .boot {
    animation: none;
    transition: none;
  }

  .app.is-ready {
    transition: none;
  }

  .app.is-ready .col-left,
  .app.is-ready .col-center,
  .app.is-ready .col-right {
    animation: none;
  }
}