.explore-intro { padding-bottom: 70px; }
.explore-intro h1 { font: 400 clamp(58px, 9vw, 120px)/.9 var(--serif); letter-spacing: -.045em; margin: 35px 0 28px; }
.explore-intro > p:last-child { max-width: 700px; font: 300 23px/1.5 var(--serif); }
.graph-shell { padding-top: 0; }
.graph-controls { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(180px, 240px)) auto; gap: 18px; align-items: end; padding: 22px 0; border-top: 1px solid var(--line); }
.graph-controls label { display: grid; gap: 6px; }
.graph-controls label span { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.graph-controls input, .graph-controls select, .graph-controls button { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); padding: 10px 13px; font: inherit; }
.graph-controls button { width: auto; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.graph-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); min-height: 680px; border: 1px solid var(--line); }
.graph-stage { min-width: 0; min-height: 680px; position: relative; overflow: hidden; background: #e7e7df; }
#graph-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#graph-canvas.dragging { cursor: grabbing; }
.graph-status { position: absolute; left: 18px; bottom: 12px; margin: 0; color: #667060; font-size: 11px; pointer-events: none; }
.graph-detail { border-left: 1px solid var(--line); padding: 40px 30px; background: var(--paper); }
.graph-detail h2 { font: 400 36px/1.05 var(--serif); margin: 18px 0; }
.graph-detail .detail-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 0 0 22px; color: #667060; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.graph-detail .detail-topics { display: flex; flex-wrap: wrap; gap: 7px; margin: 24px 0; }
.graph-detail .detail-topics span { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; font-size: 11px; }
.graph-detail .detail-related { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 20px; }
.graph-detail .detail-related p { margin: 0 0 10px; }
.graph-detail .detail-related button { display: block; border: 0; border-bottom: 1px solid transparent; background: none; color: inherit; padding: 5px 0; text-align: left; font: inherit; cursor: pointer; }
.graph-detail .detail-related button:hover { border-color: var(--ink); }
.graph-key { display: flex; flex-wrap: wrap; gap: 20px; padding-top: 16px; font-size: 11px; color: #667060; }
.graph-key span { display: inline-flex; align-items: center; gap: 7px; }
.graph-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.graph-key .essay { background: #526045; }.graph-key .memoir { background: #9b674f; }.graph-key .poetry { background: #7b7395; }.graph-key .other { background: #767b72; }
@media (max-width: 800px) {
  .graph-controls { grid-template-columns: 1fr 1fr; }.graph-controls button { width: 100%; }
  .graph-layout { grid-template-columns: 1fr; }.graph-stage { min-height: 520px; }
  .graph-detail { border-left: 0; border-top: 1px solid var(--line); min-height: 280px; }
}
@media (max-width: 520px) { .graph-controls { grid-template-columns: 1fr; }.graph-stage { min-height: 430px; } }