:root{
  --bg: #f6f6f4;
  --ink: rgba(15, 18, 20, 0.92);
  --muted: rgba(15, 18, 20, 0.56);
  --line: rgba(15, 18, 20, 0.10);
  --panel: rgba(255,255,255,0.58);

  --accent: #ff4d00;
  --glow: rgba(255, 77, 0, 0.18);

  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,0.10);
  --shadowSoft: 0 10px 40px rgba(0,0,0,0.08);
  --blur: 14px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1100px 750px at 16% 10%, rgba(255,77,0,0.06), transparent 58%),
    radial-gradient(950px 700px at 82% 52%, rgba(0,0,0,0.06), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.10;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* Header */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;

  padding: 18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;

  background: rgba(246,246,244,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(15,18,20,0.06);
}

.mark{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
}

.dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--glow);
}

.brandLogo{
  height: 18px;
  width: auto;
  opacity: 0.88;
  transform: translateY(-1px);
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.10));
}

.topbarRight{ display:flex; align-items:center; gap:10px; }

.quiet{
  font-family: var(--mono);
  font-size:12px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
  transition: transform 220ms ease, border-color 220ms ease, opacity 220ms ease;
}
.quiet:hover{
  transform: translateY(-1px);
  border-color: rgba(255,77,0,0.35);
}

/* Links (subtle) */
a{
  color: rgba(20, 70, 210, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 70, 210, 0.20);
}
a:hover{
  border-bottom-color: rgba(20, 70, 210, 0.45);
}

/* World */
.world{
  min-height:100%;
  padding: 110px 22px 60px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Threshold */
.threshold{
  max-width: 760px;
  padding: 14px 0 10px;
}
.anchorLine{
  margin:0;
  font-weight: 560;
  font-size: clamp(34px, 4.7vw, 54px);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.subLine{
  margin: 12px 0 14px;
  color: rgba(15,18,20,0.72);
  font-size: 16px;
  line-height: 1.65;
  max-width: 52ch;
}
.microHint{
  display:inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  color: rgba(15,18,20,0.50);
  font-family: var(--mono);
  font-size: 12px;
}
.microKey{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,18,20,0.12);
  background: rgba(255,255,255,0.55);
}

/* Field */
.field{
  position:relative;
  margin-top: 34px;
  height: min(560px, 66vh);
  border-radius: 24px;
  border: 1px solid rgba(15,18,20,0.08);
  background: rgba(255,255,255,0.34);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
}

.field::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,77,0,0.09), transparent 45%),
    radial-gradient(circle at 75% 60%, rgba(0,0,0,0.06), transparent 48%);
  opacity:0.7;
  pointer-events:none;
}

.object{
  position:absolute;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadowSoft);
  padding: 14px 14px 12px;
  text-align:left;
  cursor:pointer;
  min-width: 210px;
  max-width: 320px;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, opacity 260ms ease;
  overflow:hidden;
}

.object::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 30%), var(--glow), transparent 45%);
  opacity:0.0;
  transition: opacity 240ms ease;
  pointer-events:none;
}

.object:hover{
  transform: translateY(-2px);
  border-color: rgba(255,77,0,0.35);
  box-shadow: var(--shadow);
}
.object:hover::after{ opacity:1; }

.objTitle{
  display:block;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.objMeta{
  display:block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(15,18,20,0.55);
}
.objWeight{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(15,18,20,0.55);
  font-family: var(--mono);
  font-size: 11px;
}
.weightBar{
  position:relative;
  height: 6px;
  flex:1;
  border-radius: 999px;
  background: rgba(15,18,20,0.08);
  overflow:hidden;
}
.weightFill{
  height: 100%;
  width: var(--w, 55%);
  border-radius: 999px;
  background: rgba(255,77,0,0.65);
  box-shadow: 0 0 0 6px rgba(255,77,0,0.08);
}

.object.pulse{
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(255,77,0,0.40);
}

/* Overlay */
.overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding: 22px;
  background: rgba(10,12,14,0.25);
  backdrop-filter: blur(10px);
  z-index:40;
}
.overlay[data-open="true"]{ display:flex; }

.overlayCard{
  width:min(920px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow:hidden;
  transform: translateY(12px);
  animation: rise 220ms ease forwards;

  max-height: min(86vh, 860px);
  display:flex;
  flex-direction: column;
}
@keyframes rise{ to { transform: translateY(0px); } }

.overlayTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,18,20,0.08);
  flex: 0 0 auto;
}
.overlayNameWrap{ display:flex; flex-direction:column; gap:6px; }
.overlayName{
  font-size: 13px;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform:uppercase;
  color: rgba(15,18,20,0.62);
}
.overlayMeta{
  font-size: 13px;
  color: rgba(15,18,20,0.70);
  line-height: 1.45;
  max-width: 62ch;
}
.close{
  font-family: var(--mono);
  font-size: 12px;
  background: transparent;
  border: 1px solid rgba(15,18,20,0.12);
  border-radius: 999px;
  padding: 9px 12px;
  cursor:pointer;
  flex: 0 0 auto;
}
.close:hover{ border-color: rgba(255,77,0,0.35); }

.overlayBody{
  padding: 18px 18px 10px;
  color: rgba(15,18,20,0.82);
  line-height: 1.72;
  font-size: 16px;
  overflow:auto;
  flex: 1 1 auto;
}

.block{
  padding: 14px 14px;
  border: 1px solid rgba(15,18,20,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  margin: 12px 0;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(15,18,20,0.55);
  padding: 8px 10px;
  border: 1px solid rgba(15,18,20,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.60);
}
.spark{
  width:8px; height:8px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--glow);
}
.callout{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,77,0,0.25);
  background: rgba(255,77,0,0.06);
  margin: 14px 0 10px;
}
.small{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(15,18,20,0.55);
}

.overlayFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(15,18,20,0.08);
  flex: 0 0 auto;
}
.sig{
  font-family: var(--mono);
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-size: 11px;
  color: rgba(15,18,20,0.45);
}
.footnote{
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(15,18,20,0.45);
}

/* Broadway: zoom + pan + drag */
.broadwayMedia{
  margin: 14px 0 12px;
  position: relative;
  user-select: none;
}

.broadwayMedia::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 18px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(15,18,20,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  pointer-events:none;
  opacity: 0.85;
  transition: opacity 240ms ease, transform 240ms ease, border-color 240ms ease;
}

.broadwayFrame{
  position: relative;
  border-radius: 16px;
  overflow:hidden;
  width: 100%;
  height: clamp(220px, 34vh, 440px);
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.broadwayImg{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.98;

  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--s, 1));
  transition: transform 220ms ease, filter 220ms ease;
  filter: saturate(1.02) contrast(1.02);
  will-change: transform;
}

.broadwayFrame.is-zoomed .broadwayImg{
  object-fit: cover;
  filter: saturate(1.04) contrast(1.04);
}

.broadwayFrame:active{ cursor: grabbing; }

.broadwayMedia:hover::before{
  opacity: 1;
  transform: translateY(-1px);
  border-color: rgba(255,77,0,0.18);
}

/* Hush mode */
body[data-hush="true"] .microHint{ opacity:0.0; transform: translateY(-2px); pointer-events:none; }
body[data-hush="true"] .subLine{ opacity:0.35; }
body[data-hush="true"] .objMeta{ opacity:0.38; }

@media (max-width: 720px){
  .field{
    height: auto;
    padding: 14px;
  }
  .object{
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
    min-width: 0;
  }
  .broadwayFrame{
    height: clamp(240px, 30vh, 380px);
  }

  /* Fix iOS Safari top-chop: center modal in the true visible viewport */
  .overlay{
    align-items: center;
    padding:
      calc(env(safe-area-inset-top) + 14px)
      14px
      calc(env(safe-area-inset-bottom) + 14px);
  }

  .overlayCard{
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px);
    border-radius: 20px;
  }

  .overlayTop{
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 2;
  }

  .overlayBody{
    -webkit-overflow-scrolling: touch;
  }
}

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