/* All rules stay inside the new tool shell, including when its live DOM moves. */
.nt-view .nt-saver-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

.nt-view .nt-saver-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 6%;
  margin: 0;
  background: #111;
  color: #fff;
  text-align: center;
  font-size: clamp(12px, 3cqw, 28px);
}

.nt-view .nt-flip {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5cqh;
  overflow: hidden;
  background: #111;
  color: #ededed;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.nt-view .nt-flip-clock {
  position: relative;
  max-width: 96%;
}

.nt-view .nt-flip-digits {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  font-size: min(14cqw, 31cqh);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nt-view .nt-flip-digit {
  position: relative;
  display: block;
  width: 0.83em;
  height: 1.25em;
  border-radius: 0.075em;
  background: #242424;
  box-shadow: 0 0.04em 0.09em #0009;
  perspective: 5em;
}

.nt-view .nt-flip-digit::after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 0;
  right: 0;
  height: max(1px, 0.018em);
  background: #080808;
  box-shadow: 0 1px #ffffff10;
  pointer-events: none;
}

.nt-view .nt-flip-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}

.nt-view .nt-flip-half > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nt-view .nt-flip-upper,
.nt-view .nt-flip-old {
  top: 0;
  border-radius: 0.075em 0.075em 0 0;
  transform-origin: bottom;
  background: linear-gradient(#292929, #202020);
}

.nt-view .nt-flip-upper > span,
.nt-view .nt-flip-old > span {
  top: 0;
}

.nt-view .nt-flip-lower,
.nt-view .nt-flip-new {
  bottom: 0;
  border-radius: 0 0 0.075em 0.075em;
  transform-origin: top;
  background: linear-gradient(#292929, #242424);
}

.nt-view .nt-flip-lower > span,
.nt-view .nt-flip-new > span {
  bottom: 0;
}

.nt-view .nt-flip-old,
.nt-view .nt-flip-new {
  visibility: hidden;
  z-index: 3;
}

.nt-view .nt-flipping .nt-flip-old {
  animation: nt-saver-flip-up 0.28s ease-in;
}

.nt-view .nt-flipping .nt-flip-new {
  animation: nt-saver-flip-down 0.28s 0.28s ease-out;
}

.nt-view .nt-flip-separator {
  font-size: 0.65em;
  opacity: 0.65;
}

.nt-view .nt-without-seconds .nt-flip-seconds {
  display: none;
}

.nt-view .nt-without-seconds {
  font-size: min(19cqw, 36cqh);
}

.nt-view .nt-flip-period {
  position: absolute;
  right: 0;
  bottom: -1.8em;
  color: #b5b5b5;
  font-size: min(3cqw, 5cqh);
}

.nt-view .nt-flip-date {
  margin: 0;
  color: #aaa;
  font-family: system-ui, sans-serif;
  font-size: min(2.6cqw, 4.5cqh);
  letter-spacing: 0.035em;
}

.nt-view .nt-quote {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 7cqh 7cqw;
  background: #111;
  color: #f4f1eb;
  text-align: center;
}

.nt-view .nt-quote-card {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.nt-view .nt-quote-copy {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: min(6.5cqw, 20cqh);
  line-height: 1.28;
  font-weight: 400;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.nt-view .nt-quote-author {
  margin-top: 4cqh;
  color: #b6b2ac;
  font-family: system-ui, sans-serif;
  font-size: min(2.5cqw, 4cqh);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nt-view .nt-cyber {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4cqh;
  overflow: hidden;
  padding: 2cqh 2cqw;
  background: #020d0a;
  color: #75e4b0;
  font: min(1.75cqw, 3.1cqh)/1.55 ui-monospace, 'SF Mono', Menlo, monospace;
}

.nt-view .nt-cyber-top,
.nt-view .nt-cyber-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  flex-shrink: 0;
  white-space: nowrap;
}

.nt-view .nt-cyber-top {
  border-bottom: 1px solid #246044;
  padding-bottom: 1cqh;
}

.nt-view .nt-cyber-top strong {
  color: #b3fdd3;
  font-size: 1.05em;
  letter-spacing: 0.06em;
}

.nt-view .nt-cyber-top time {
  font-variant-numeric: tabular-nums;
}

.nt-view .nt-cyber-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.3cqh 1.2cqw;
  flex: 1;
  min-height: 0;
}

.nt-view .nt-cyber-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #1d4e38;
  background: #061710;
  padding: 1.2cqh 1.2cqw;
}

.nt-view .nt-cyber-panel h2 {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin: 0 0 1cqh;
  padding: 0 0 0.8cqh;
  border-bottom: 1px solid #183b2d;
  color: #a0f6c6;
  font: inherit;
  font-weight: 600;
  font-size: 0.78em;
  letter-spacing: 0.06em;
}

.nt-view .nt-cyber-panel h2 span {
  color: #6baa87;
}

.nt-view .nt-cyber-panel pre {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  font: inherit;
  font-size: 0.83em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: transparent;
  border: 0;
  padding: 0;
}

.nt-view .nt-cyber-terminal pre {
  flex: 1;
}

.nt-view .nt-cyber-cursor {
  height: 1em;
  line-height: 1;
  animation: nt-saver-cursor 1.2s steps(2, jump-none) infinite;
}

.nt-view .nt-cyber-network svg {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.nt-view .nt-cyber-network path {
  fill: none;
  stroke: #39805b;
  stroke-width: 1;
}

.nt-view .nt-cyber-network circle {
  fill: #246647;
  stroke: #6cd49b;
  stroke-width: 1;
}

.nt-view .nt-cyber-network .nt-cyber-active {
  fill: #bfffdc;
  stroke: #dcffeb;
  stroke-width: 3;
}

.nt-view .nt-cyber-node-labels {
  fill: #70ac8b;
  font: 9px ui-monospace, monospace;
}

.nt-view .nt-cyber-panel p {
  margin: 0.3em 0 0;
  font: inherit;
  font-size: 0.8em;
  color: #8cbe9e;
}

.nt-view .nt-cyber-metrics > div {
  display: flex;
  gap: 0.7em;
  align-items: center;
}

.nt-view .nt-cyber-metrics meter {
  width: 100%;
  flex: 1;
  min-width: 0;
  height: 0.9em;
  accent-color: #72dca5;
}

.nt-view .nt-cyber-metrics output {
  min-width: 3ch;
}

.nt-view .nt-cyber-metrics pre {
  color: #548f6c;
  margin-top: 0.5em;
}

.nt-view .nt-cyber-footer {
  color: #74a98b;
  font-size: 0.8em;
}

.nt-view .nt-cyber-paused .nt-cyber-cursor {
  animation-play-state: paused;
}

[data-nt-app] .nt-controls .nt-simulation-label {
  border-left: 2px solid currentColor;
  padding-left: 0.7rem;
}

.nt-view .nt-color-bars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #111;
  isolation: isolate;
}

.nt-view .nt-bars-upper {
  height: 66.6667%;
  background: linear-gradient(to right, #bfbfbf 0% 14.2857%, #bfbf00 14.2857% 28.5714%, #00bfbf 28.5714% 42.8571%, #00bf00 42.8571% 57.1429%, #bf00bf 57.1429% 71.4286%, #bf0000 71.4286% 85.7143%, #0000bf 85.7143% 100%);
}

.nt-view .nt-bars-middle {
  height: 8.3333%;
  background: linear-gradient(to right, #0000bf 0% 14.2857%, #131313 14.2857% 28.5714%, #bf00bf 28.5714% 42.8571%, #131313 42.8571% 57.1429%, #00bfbf 57.1429% 71.4286%, #131313 71.4286% 85.7143%, #bfbfbf 85.7143% 100%);
}

.nt-view .nt-bars-lower {
  height: 25%;
  background: linear-gradient(to right, #00214c 0% 17.8571%, #fff 17.8571% 35.7143%, #32006a 35.7143% 53.5714%, #131313 53.5714% 71.4286%, #090909 71.4286% 76.1905%, #131313 76.1905% 80.9524%, #1d1d1d 80.9524% 85.7143%, #131313 85.7143% 100%);
}

.nt-view .nt-bars-noise {
  position: absolute;
  inset: -12%;
  opacity: 0.1;
  background-image: repeating-conic-gradient(#fff8 0% 25%, #0008 0% 50%), repeating-linear-gradient(23deg, transparent 0 3px, #fff7 4px 5px);
  background-size: 3px 5px, 7px 11px;
  mix-blend-mode: soft-light;
  animation: nt-saver-noise 0.27s steps(3, jump-none) infinite;
}

.nt-view .nt-bars-scan {
  position: absolute;
  inset: -20% 0;
  opacity: 0.22;
  background: repeating-linear-gradient(transparent 0 3px, #0007 3px 4px);
  animation: nt-saver-scan 7s linear infinite;
}

.nt-view .nt-bars-label {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  padding: 0.35em 0.7em;
  border: 1px solid #fff4;
  background: #080808;
  color: #fff;
  font: 700 min(6cqw, 11cqh)/1.2 ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.nt-view .nt-bars-label[hidden] {
  display: none;
}

.nt-view .nt-bars-static .nt-bars-noise,
.nt-view .nt-bars-static .nt-bars-scan {
  animation: none;
}

@keyframes nt-saver-flip-up {
  from { visibility: visible; transform: rotateX(0); }
  to { visibility: visible; transform: rotateX(-90deg); }
}

@keyframes nt-saver-flip-down {
  from { visibility: visible; transform: rotateX(90deg); }
  to { visibility: visible; transform: rotateX(0); }
}

@keyframes nt-saver-cursor {
  from { opacity: 1; }
  to { opacity: 0.25; }
}

@keyframes nt-saver-noise {
  0% { transform: translate(0, 0); }
  33% { transform: translate(1%, -2%); }
  66% { transform: translate(-2%, 1%); }
  100% { transform: translate(1%, 2%); }
}

@keyframes nt-saver-scan {
  from { transform: translateY(0); }
  to { transform: translateY(12%); }
}

@media (prefers-reduced-motion: reduce) {
  .nt-view .nt-flipping .nt-flip-old,
  .nt-view .nt-flipping .nt-flip-new,
  .nt-view .nt-cyber-cursor {
    animation: none;
  }
}