/*
 * WEIRD 12.5.3
 * ------------------------------------------------------------------
 * Corrected Bundle baseline.
 * CSS extracted from the supplied last-known-good HTML.
 * No animation behavior was intentionally changed.
 */

html, body {
 background-color: #111;
 color: #eee;
 }

 body {
 font-family: "Iowan Old Style", Georgia, sans-serif;
 -webkit-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 }

 blockquote {
 position: relative;
 max-width: 800px;
 margin: 100px auto;
 padding: 20px;
 font-size: 22px;
 line-height: 1.7;
 -webkit-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 }

 #original-quote {
 visibility: hidden;
 }

 /*
 * The original quote and attribution both remain in the
 * document so the browser controls their normal layout.
 */
 #original-text {
 visibility: hidden;
 }

 #weird-layer {
 position: absolute;
 left: 0;
 top: 0;
 pointer-events: none;
 -webkit-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 overflow: visible;
 }

 .weird-letter {
 position: absolute;
 white-space: pre;
 transform-origin: center center;
 will-change: transform;
 pointer-events: none;
 -webkit-user-select: none;
 user-select: none;
 }

 .attribution {
 display: block;
 text-align: right;
 white-space: nowrap;
 font-size: 0.7em;
 -webkit-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 }

 @media (max-width: 600px) {

 blockquote {
 margin: 40px 20px;
 font-size: 19px;
 }

 }


/*
 * Cursor-zone visualization. The JavaScript sets the actual ring sizes
 * from cursorSafeZone and cursorFadeDistance.
 */
#cursor-zones {
 position: fixed;
 left: 0;
 top: 0;
 width: 0;
 height: 0;
 pointer-events: none;
 z-index: 9999;
 }

.cursor-zone {
 position: absolute;
 left: 0;
 top: 0;
 border: 1px dashed rgba(238, 238, 238, 0.14);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 pointer-events: none;
 box-sizing: border-box;
 }

.cursor-safe {
 border-style: solid;
 border-color: rgba(238, 238, 238, 0.22);
 }


/*
 * Distortion-zone visualization.
 * A small green dot marks each live distortion-zone center.
 */
#distortion-zones {
 position: fixed;
 left: 0;
 top: 0;
 width: 0;
 height: 0;
 pointer-events: none;
 z-index: 9998;
 }

.distortion-zone-marker {
 position: absolute;
 left: 0;
 top: 0;
 width: 8px;
 height: 8px;
 background: #39ff14;
 border-radius: 50%;
 transform: translate(-50%, -50%);
 pointer-events: none;
 box-sizing: border-box;
 }

/* Ephemeral keyboard-control captions */
#keyboard-captions {
  position: fixed;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  width: min(90vw, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 10000;
  transition: opacity 180ms ease;
}
#keyboard-captions.keyboard-captions-hidden { opacity: 0; }
.keyboard-caption {
  padding: 2px 8px;
  background: rgba(17,17,17,0.78);
  color: #eee;
  font-family: Arial, sans-serif;
  font-size: 35px;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.keyboard-caption-expired {
  opacity: 0;
  transition: opacity 180ms ease;
}

/* Keyboard help legend */
#keyboard-legend {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 520px);
  padding: 18px 22px;
  background: rgba(17,17,17,0.92);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  z-index: 10001;
  pointer-events: none;
  box-sizing: border-box;
}
#keyboard-legend.keyboard-legend-hidden {
  display: none;
}
.keyboard-legend-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
.keyboard-legend-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 3px 0;
}
.keyboard-legend-keys {
  font-weight: bold;
  text-align: right;
}
.keyboard-legend-description {
  text-align: left;
}


/*
 * Hidden knob trigger: the bold "weirder and weirder" letters enter
 * URL-knob mode when tapped/clicked, while retaining the normal arrow
 * cursor so the trigger is not visually advertised on desktop.
 */
.knob-trigger {
 cursor: default;
 pointer-events: auto;
}