:root{
  --bg:#0b0b0e;
  --panel:#12121a;
  --line:#2a7cff;
  --text:#e8e8ee;
  --muted:#9aa0b5;
  --accent:#39ff14;
  --brand:#ff4e00;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(80vw 80vh at 60% 40%, #111 0%, #0a0a0a 60%, #050505 100%);
  color:var(--text);
  font: 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Sidebar */
.sidebar{
  position:fixed; inset:0 auto 0 0;
  width:280px; padding:18px 16px 72px;
  background: linear-gradient(180deg, rgba(18,18,26,.96), rgba(18,18,26,.84));
  border-right:1px solid #22262f;
  display:flex; flex-direction:column; gap:10px;
  backdrop-filter: blur(6px);
  z-index:5;
}
.sidebar h2{font-size:18px; margin:0 0 4px; letter-spacing:.5px; color:#cfd3e6}
.cat{display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:10px; cursor:pointer;}
.cat:hover{background:#1a1f29}
.cat input{appearance:none; width:18px; height:18px; border-radius:4px; border:2px solid #3a4060; position:relative}
.cat input:checked{background:conic-gradient(from 45deg, var(--brand), var(--accent)); border-color:transparent}
.cat input:checked::after{content:""; position:absolute; inset:3px; background:#111; border-radius:2px}
.cat span{color:#dfe3f7; font-size:14px}

/* Actions */
.actions{margin-top:auto; display:flex; gap:8px; flex-wrap:wrap}
.btn{display:inline-block; padding:8px 12px; border-radius:12px; background:#1b2130; color:#dfe3f7; text-decoration:none; border:1px solid #263044}
.btn:hover{filter:brightness(1.2)}
.btn.primary{background:linear-gradient(135deg, var(--brand), #ff8a00); color:#111; font-weight:700}

/* Top-right collapsible menu */
.menu-toggle{position:fixed; right:16px; top:16px; width:1px; height:1px; opacity:0; pointer-events:none}
.menu-button{
  position:fixed; right:16px; top:16px; width:44px; height:44px;
  display:grid; place-items:center; cursor:pointer; z-index:6;
  background:#101420; border:1px solid #263044; border-radius:12px; font-size:22px;
}
.top-menu{
  position:fixed; right:16px; top:72px; width:260px;
  background:#121725; border:1px solid #263044; border-radius:14px;
  transform:scale(.92) translateY(-8px); opacity:0; pointer-events:none;
  transition:.25s ease; z-index:6; padding:10px 12px;
}
.top-menu h3{margin:6px 6px 8px; font-size:14px; color:#dfe3f7; opacity:.9; letter-spacing:.4px}
.top-menu ul{list-style:none; margin:0; padding:0}
.top-menu li{padding:8px 10px; border-radius:8px}
.top-menu li:hover{background:#1a2031}
.top-menu a{color:#e9edff; text-decoration:none; font-size:14px}
.menu-toggle:checked ~ .top-menu{transform:none; opacity:1; pointer-events:auto}

/* Stage */
.stage{
  margin-left:280px; /* space for sidebar */
  height:100vh; position:relative; overflow:hidden;
}
.axis{
  position:absolute; inset:0; margin:0 auto; max-width:1200px;
}
.axis-h, .axis-v{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  background: var(--line);
}
.axis-h{width:80%; height:4px}
.axis-v{width:4px; height:80%}

/* Placeholders (always visible, keep positions) */
.placeholder{
  position:absolute; width:max-content; min-width:90px; padding:4px 8px;
  border:1px dashed #3a4060; border-radius:8px; color:var(--muted);
  font-size:12px; text-align:center; opacity:.6;
}

/* Words */
.word{
  position:absolute; white-space:nowrap; font-weight:500; letter-spacing:.4px;
  text-shadow:0 1px 0 #000;
}
.word.bold{font-weight:800}
.word.underline{text-decoration: underline 2px}
.word.big{font-size:1.35rem}
.word.huge{font-size:2.2rem; font-weight:800; letter-spacing:1px}

/* --- Coordinate helpers (percent-based, tuned to layout) --- */
/* Top-left cluster */
.p-tl1, .tl1{ left:6%; top:18%; }
.p-tl2, .tl2{ left:6%; top:26%; }
.p-tl3, .tl3{ left:6%; top:32%; }

/* Top-center cluster */
.p-tc1, .tc1{ left:44.5%; top:5%; }
.p-tc2, .tc2{ left:43.5%; top:10%; }
.p-tc3, .tc3{ left:42%; top:15%; }
.p-tc4, .tc4{ left:37.8%; top:20%; }
.p-tc5, .tc5{ left:39%; top:26%; }
.p-tc6, .tc6{ left:44%; top:30%; }

/* Top-right cluster */
.p-tr1, .tr1{ left:70%; top:32%; }
.p-tr2, .tr2{ left:66%; top:32%; }

/* Left-center cluster (Fine) */
.p-lc1, .lc1{ left:18%; top:40%; }
.p-lc2, .lc2{ left:18%; top:46%; }
.p-lc3, .lc3{ left:20%; top:50%; }
.p-lc4, .lc4{ left:22%; top:56%; }
.p-lc5, .lc5{ left:22%; top:62%; }
.p-lc6, .lc6{ left:22%; top:68%; }

/* Right-center cluster (Fatal) */
.p-rc1, .rc1{ right:20%; top:50%; }
.p-rc2, .rc2{ right:20%; top:56%; }
.p-rc3, .rc3{ right:20%; top:62%; }
.p-rc4, .rc4{ right:20%; top:68%; }

/* Bottom-center cluster (Random) */
.p-bc1, .bc1{ left:46%; bottom:26%; }
.p-bc2, .bc2{ left:36%; bottom:22%; }
.p-bc3, .bc3{ left:38%; bottom:16%; }
.p-bc4, .bc4{ left:41%; bottom:12%; }
.p-bc5, .bc5{ left:35%; bottom:8%; }
.p-bc6, .bc6{ left:42%; bottom:4%; }

/* Center */
.p-center1, .c1{ left:38%; top:50%; }
.p-center2, .c2{ left:44%; top:58%; }

/* Responsive */
@media (max-width: 900px){
  .sidebar{width:230px}
  .stage{margin-left:230px}
  .word.huge{font-size:1.6rem}
  .word.big{font-size:1.1rem}
}
@media (max-width: 680px){
  .sidebar{position:fixed; width:100%; height:auto; inset:auto 0 auto 0; top:0}
  .stage{margin-left:0; padding-top:160px}
  .axis-h{width:92%}
}