:root { color-scheme: dark; --bg:#0d1016; --panel:#171c25; --panel2:#1e2530; --ink:#f5f1e9; --muted:#a9b0bc; --line:#39424f; --accent:#e9bd72; --pink:#e8a4ba; --blue:#8ebbd1; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 25% -10%,#26303b 0,transparent 36%),var(--bg); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; }
a { color:var(--accent); }
button,select { font:inherit; }
.shell { max-width:1320px; margin:auto; padding:40px 32px 24px; }
.eyebrow,.kicker { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.2em; }
h1 { margin:10px 0 8px; font-size:clamp(30px,4vw,54px); letter-spacing:.04em; line-height:1.2; }
h2 { margin:4px 0 0; font-size:22px; }
h3 { margin:12px 0; font-size:24px; }
p { margin:8px 0; }
.masthead p { color:var(--muted); max-width:770px; }
.toolbar { display:flex; align-items:end; gap:20px; margin:30px 0 16px; }
.stat { min-width:118px; display:flex; flex-direction:column; border-left:2px solid var(--accent); padding-left:12px; }
.stat strong { font-size:29px; line-height:1; }
.stat span,.toolbar label { font-size:12px; color:var(--muted); }
.toolbar label { margin-left:auto; display:flex; flex-direction:column; gap:5px; }
select { border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:8px 38px 8px 12px; border-radius:7px; }
.content { display:grid; grid-template-columns:minmax(0,2fr) minmax(290px,1fr); gap:16px; }
.map-card,.detail-card,.records { background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.map-card { overflow:hidden; }
.section-head { display:flex; justify-content:space-between; align-items:end; padding:20px 23px 0; }
.hint { color:var(--muted); font-size:12px; }
#map { width:100%; height:auto; display:block; min-height:350px; }
.map-edge { stroke:#b3a892; stroke-width:2.5; opacity:.75; cursor:pointer; }
.map-edge:hover,.map-edge.selected { stroke:var(--accent); stroke-width:5; opacity:1; }
.edge-hit { stroke:transparent; stroke-width:24; cursor:pointer; }
.person circle { stroke:#252a34; stroke-width:5; cursor:pointer; }
.person.thirty circle { fill:var(--pink); }
.person.angel circle { fill:var(--blue); }
.person.selected circle { stroke:var(--accent); stroke-width:6; }
.person text { fill:var(--ink); font-size:16px; font-weight:700; text-anchor:middle; pointer-events:none; }
.person .initial { fill:#11151c; font-size:21px; }
.person { cursor:pointer; }
.legend { display:flex; gap:20px; padding:0 22px 19px; color:var(--muted); font-size:12px; flex-wrap:wrap; }
.legend span { display:flex; align-items:center; gap:7px; }
.dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot.thirty { background:var(--pink); }.dot.angel { background:var(--blue); }
.legend-line:before { content:""; width:22px; height:2px; background:var(--accent); display:inline-block; }
.detail-card { padding:21px 23px; min-height:380px; }
.detail-card p { color:var(--muted); }
.detail-card .type { display:inline-block; color:var(--accent); background:#3b3227; padding:3px 9px; border-radius:20px; font-size:12px; }
.detail-card .meta { font-size:13px; color:var(--muted); margin:14px 0; }
.source { display:inline-block; margin-top:16px; font-weight:700; }
.records { margin-top:16px; padding-bottom:16px; }
#record-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:20px 23px 8px; }
.record { text-align:left; color:var(--ink); background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:13px 15px; cursor:pointer; }
.record:hover,.record.selected { border-color:var(--accent); }
.record strong,.record small { display:block; }
.record small { color:var(--muted); margin-top:3px; }
footer { color:var(--muted); font-size:12px; margin-top:25px; }
@media (max-width:850px) { .shell { padding:24px 14px; }.content { grid-template-columns:1fr; }.detail-card { min-height:250px; } }
@media (max-width:560px) { .toolbar { flex-wrap:wrap; }.toolbar label { width:100%; margin-left:0; } select { width:100%; } #record-list { grid-template-columns:1fr; } .hint { display:none; } }