:root {
  color-scheme: dark;
  --bg: #0c1018;
  --panel: #11182a;
  --line: #2b3858;
  --muted: #a9b6d3;
  --text: #e8eefc;
  --accent: #69a9ff;
  --accent-2: #7fffd4;
}
* { box-sizing: border-box; }
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: .5rem .8rem;
  border-radius: 10px;
  background: #20345c;
  border: 1px solid #6ea6ff;
  color: #fff;
  z-index: 999;
}

:focus-visible {
  outline: 2px solid #88b5ff;
  outline-offset: 2px;
}

body {
  margin: 0;
  font: 16px/1.65 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1000px 500px at 80% -10%, #1f3f7a55, transparent 60%),
    radial-gradient(900px 500px at 5% 0%, #1f7a7050, transparent 60%),
    var(--bg);
}
.wrap { max-width: 940px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.topbar {
  position: sticky; top: 0; z-index: 80;
  backdrop-filter: blur(10px);
  background: #0c1018d1;
  border-bottom: 1px solid var(--line);
  margin: 0 -1rem 1rem;
  padding: .65rem 1rem;
  display: flex; gap: .55rem; flex-wrap: wrap; align-items: center;
}
.brand { font-weight: 760; letter-spacing: .02em; }
.tag {
  border: 1px solid #3f507a;
  border-radius: 999px;
  padding: .22rem .6rem;
  text-decoration: none;
  color: var(--muted);
  font-size: .88rem;
}
.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg,#141f34 0%,#111a2c 75%);
  padding: 1rem;
}
h1,h2,h3 { line-height: 1.2; margin: .35rem 0 .55rem; }
p, li { color: var(--text); }
.muted { color: var(--muted); }
a { color: #dce8ff; }
code {
  background: #1a2742;
  border: 1px solid #3b4f78;
  border-radius: 8px;
  padding: .1rem .35rem;
}
pre {
  background: #121e33;
  border: 1px solid #374a72;
  border-radius: 10px;
  padding: .8rem;
  overflow: auto;
}
.pill {
  display: inline-block;
  border: 1px solid #4a638f;
  border-radius: 999px;
  padding: .12rem .46rem;
  font-size: .75rem;
  color: #c4d6ff;
  margin-right: .35rem;
}
.time { font-size: .82rem; color: #9ab0df; margin-left: .3rem; }
.next {
  margin-top: .8rem;
  border: 1px dashed #49608f;
  border-radius: 10px;
  padding: .7rem;
  background: #131f36;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .48rem .78rem;
  border-radius: 10px;
  border: 1px solid #3a4c74;
  color: var(--text);
  text-decoration: none;
  background: #18223a;
  cursor: pointer;
  font-size: .92rem;
}
footer { margin-top: 1.4rem; color: var(--muted); font-size: .9rem; }

.puppet-stage {
  border: 1px solid #3a507c;
  border-radius: 14px;
  background: linear-gradient(160deg,#101a2f 0%,#0f1728 80%);
  padding: .8rem;
  margin: 0 0 .9rem;
}
.puppet-scene {
  position: relative;
  min-height: 210px;
  border: 1px dashed #37527f;
  border-radius: 12px;
  padding: .65rem;
  background: radial-gradient(120% 100% at 50% 0%, #1a2c4a88 0%, #121b2d 65%);
}
.silk-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.silk-lines path {
  stroke: #95b6ff;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 6 8;
  animation: silkFlow 6s linear infinite;
  opacity: .75;
}
.silk-lines path:nth-child(2){ animation-delay: .9s; }
.silk-lines path:nth-child(3){ animation-delay: 1.8s; }
@keyframes silkFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -140; } }

.researcher {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  text-align: center;
}
.researcher img {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 2px solid #6b8fd4;
  background: #1b2a46;
}
.researcher .muted { font-size: .8rem; margin-top: .2rem; }

.frame-row {
  position: absolute;
  left: .55rem;
  right: .55rem;
  bottom: .55rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}
.statue-frame {
  border: 2px solid #7d92b9;
  border-radius: 12px;
  padding: .5rem;
  background: linear-gradient(150deg,#202a3e 0%,#171f31 65%);
  box-shadow: inset 0 0 0 2px #9bb1d033;
}
.frame-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.frame-head img { width: 20px; height: 20px; }
.frame-head strong { font-size: .86rem; }
.frame-nav { display: flex; flex-wrap: wrap; gap: .3rem; }
.frame-nav span {
  border: 1px solid #4b638f;
  border-radius: 999px;
  padding: .14rem .45rem;
  font-size: .72rem;
  color: #cddcff;
  background: #15233e;
}

@media (max-width: 560px) {
  .topbar .tag[href="#tools"], .topbar .tag[href="privacy.html"] { display: none; }
}

@media (min-width: 860px) {
  .frame-row { grid-template-columns: 1fr 1fr 1fr; }
  .puppet-scene { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .silk-lines path,
  .statue-frame::before {
    animation: none !important;
  }
}