:root {
  color-scheme: dark;
  --bg: #0e0d0c;
  --panel: #171512;
  --panel-2: #1e1a16;
  --line: #302820;
  --text: #f5f1e8;
  --muted: #b7aa98;
  --dim: #756b5f;
  --ember: #ff7a1a;
  --ember-2: #ffad51;
  --ash: #c6cbd0;
  --good: #91d7a3;
  --bad: #ff6d68;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0,0,0,.32);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at 82% -10%, rgba(255,122,26,.13), transparent 30rem),
  radial-gradient(circle at -10% 24%, rgba(198,203,208,.06), transparent 26rem),
  var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,select { font: inherit; }
button { color: inherit; }
.app-shell { width: min(1400px, 100%); margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 8px 4px 18px; }
.brand-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.mark { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-weight:1000; letter-spacing:-.06em; background: linear-gradient(145deg, #2a251f, #141210); border:1px solid #463726; box-shadow: inset 0 0 18px rgba(255,122,26,.12); color:var(--ember-2); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(1.05rem, 4vw, 1.45rem); letter-spacing:-.02em; }
h2 { margin-bottom:10px; font-size:clamp(1.4rem, 4.6vw, 2.25rem); line-height:1.03; letter-spacing:-.045em; }
h3 { letter-spacing:-.02em; }
p { color:var(--muted); line-height:1.58; }
.eyebrow { color:var(--ember-2); font-size:.72rem; line-height:1.2; letter-spacing:.14em; font-weight:900; text-transform:uppercase; margin-bottom:6px; }
.panel { background: linear-gradient(180deg, rgba(28,25,21,.98), rgba(20,18,16,.98)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.hero { padding:clamp(20px, 5vw, 36px); display:grid; gap:26px; grid-template-columns: minmax(0, 1.5fr) minmax(250px,.8fr); align-items:end; overflow:hidden; position:relative; }
.hero::after { content:""; position:absolute; width:220px; height:220px; border-radius:999px; background:rgba(255,122,26,.07); filter:blur(30px); right:-80px; top:-80px; pointer-events:none; }
.hero p { max-width:760px; margin-bottom:0; font-size:clamp(.96rem,2.5vw,1.08rem); }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; position:relative; z-index:1; }
.stat { padding:14px 10px; border:1px solid #3a3026; background:#12100e; border-radius:14px; text-align:center; }
.stat strong { display:block; font-size:1.45rem; color:var(--text); }
.stat span { display:block; margin-top:3px; color:var(--dim); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.tabs { display:flex; gap:7px; padding:14px 0; overflow-x:auto; scrollbar-width:none; position:sticky; top:0; z-index:10; background:linear-gradient(var(--bg) 70%, transparent); }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; border:1px solid var(--line); background:#151310; border-radius:999px; padding:10px 16px; font-weight:850; cursor:pointer; }
.tab.active { background:var(--ember); color:#170b02; border-color:var(--ember); }
.view { display:none; }
.view.active { display:block; }
.toolbar { display:flex; flex-wrap:wrap; gap:12px; padding:15px; align-items:end; }
.field { display:flex; flex-direction:column; gap:7px; min-width:150px; }
.field.grow { flex:1 1 300px; }
.field > span { color:var(--muted); font-size:.75rem; font-weight:850; text-transform:uppercase; letter-spacing:.075em; }
input,select { width:100%; min-height:46px; border:1px solid #3b3128; background:#100f0d; color:var(--text); border-radius:12px; padding:0 13px; outline:none; }
input:focus,select:focus { border-color:var(--ember); box-shadow:0 0 0 3px rgba(255,122,26,.10); }
.range-field input { accent-color: var(--ember); min-height:auto; padding:0; }
.archive-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 4px 10px; color:var(--dim); font-size:.86rem; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.archive-card { background:#16130f; border:1px solid var(--line); border-radius:16px; padding:16px; text-align:left; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.archive-card:hover { transform:translateY(-2px); border-color:#604529; background:#1c1712; }
.card-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; margin-bottom:13px; }
.id { font-size:.7rem; color:var(--ember-2); letter-spacing:.08em; font-weight:900; }
.badge,.pill { display:inline-flex; align-items:center; width:max-content; border:1px solid #41352a; color:#cdbda8; background:#100f0d; border-radius:999px; padding:5px 8px; font-size:.67rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.archive-card h3 { margin-bottom:9px; font-size:1.02rem; line-height:1.17; }
.archive-card p { margin-bottom:14px; font-size:.84rem; color:#a99d8e; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.meta-line { display:flex; gap:8px; flex-wrap:wrap; color:var(--dim); font-size:.72rem; }
.forge-layout { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.5fr); gap:14px; align-items:start; }
.controls-panel { padding:20px; display:grid; gap:14px; position:sticky; top:68px; }
.controls-panel h2 { font-size:1.55rem; }
.button-stack { display:grid; gap:8px; }
.primary-btn,.secondary-btn,.ghost-btn { border-radius:12px; min-height:46px; border:1px solid transparent; padding:0 15px; font-weight:950; cursor:pointer; }
.primary-btn { background:linear-gradient(135deg,var(--ember),#f5a147); color:#1e0f04; box-shadow:0 9px 25px rgba(255,122,26,.18); }
.secondary-btn { background:#211b15; border-color:#4c3928; color:#f1dcc5; }
.ghost-btn { background:#171512; border-color:#3a3129; }
.text-btn { border:0; background:transparent; color:var(--ember-2); padding:6px 0; cursor:pointer; font-weight:850; }
.text-btn.danger { color:var(--bad); }
.microcopy { color:var(--dim); font-size:.75rem; margin:0; line-height:1.45; }
.forge-output { min-height:540px; }
.empty-state { min-height:540px; display:grid; place-items:center; align-content:center; text-align:center; padding:30px; }
.empty-state p { max-width:440px; }
.ember-orb { width:84px; height:84px; border-radius:999px; display:grid; place-items:center; font-size:2rem; background:#20150d; border:1px solid #5c351d; margin-bottom:18px; box-shadow:0 0 50px rgba(255,122,26,.15); }
.idea-card { padding:clamp(20px,4vw,32px); }
.idea-title-row { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.idea-card h2 { font-size:clamp(1.75rem,5vw,3rem); max-width:880px; }
.pitch { font-size:1.05rem; color:#d3c7b8; border-left:3px solid var(--ember); padding-left:15px; }
.idea-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:20px 0; }
.idea-field { border:1px solid #32291f; border-radius:14px; background:#12100e; padding:14px; }
.idea-field span { display:block; color:var(--ember-2); font-size:.67rem; text-transform:uppercase; font-weight:900; letter-spacing:.08em; margin-bottom:7px; }
.idea-field p { margin:0; color:#d7cbbb; font-size:.9rem; }
.idea-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.idea-actions button { flex:1 1 140px; }
.prompt-box { margin-top:16px; border:1px solid #3b3026; background:#0d0c0b; border-radius:14px; padding:14px; }
.prompt-box summary { cursor:pointer; font-weight:900; color:#e8dac8; }
.prompt-box pre { white-space:pre-wrap; font:inherit; font-size:.82rem; color:#a99d8e; margin:14px 0 0; line-height:1.52; }
.concept-bank { padding:20px; margin-top:14px; }
.inline-heading { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.concept-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.concept-card { border:1px solid #332a21; background:#12100e; border-radius:14px; padding:15px; }
.concept-card h3 { margin:5px 0 8px; font-size:1rem; }
.concept-card p { font-size:.82rem; margin-bottom:10px; }
.concept-card button { margin-top:2px; }
.continuity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.host-card { padding:24px; min-height:230px; }
.ash-card { box-shadow: inset 0 1px 0 rgba(198,203,208,.14), var(--shadow); }
.ember-card { box-shadow: inset 0 1px 0 rgba(255,122,26,.16), var(--shadow); }
.continuity-rules,.continuityView > .panel,.view > .panel { margin-bottom:12px; }
.continuity-rules { padding:22px; }
.rule-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.rule-grid > div { border:1px solid #332a21; background:#12100e; border-radius:13px; padding:13px; }
.rule-grid strong { color:var(--ember-2); display:block; margin-bottom:7px; }
.rule-grid span { color:var(--muted); font-size:.8rem; line-height:1.4; }
#continuityView > .panel:last-child { padding:22px; }
.thread-list { display:grid; gap:8px; }
.thread { border-left:3px solid #4e3a28; background:#12100e; border-radius:0 12px 12px 0; padding:12px 14px; color:#c7bbac; line-height:1.45; font-size:.87rem; }
.saved-list { display:grid; gap:10px; margin-top:14px; }
#savedView > .panel { padding:22px; }
.saved-card { border:1px solid #33291f; background:#12100e; border-radius:14px; padding:15px; }
.saved-card h3 { margin-bottom:6px; }
.saved-card p { margin-bottom:10px; font-size:.86rem; }
.saved-actions { display:flex; gap:14px; }
.hidden { display:none !important; }
.detail-dialog { width:min(860px, calc(100% - 22px)); max-height:88vh; border:1px solid #493729; border-radius:20px; background:#14110e; color:var(--text); padding:0; box-shadow:0 30px 100px rgba(0,0,0,.75); }
.detail-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.dialog-close { position:sticky; top:10px; margin:10px 10px 0 auto; display:grid; place-items:center; width:38px; height:38px; border-radius:999px; border:1px solid #3d3128; background:#17130f; font-size:1.45rem; cursor:pointer; z-index:2; }
#detailContent { padding:8px 24px 28px; }
.detail-description { font-size:1.02rem; }
.detail-sections { display:grid; gap:9px; margin-top:18px; }
.detail-section { border:1px solid #32291f; background:#100f0d; border-radius:13px; padding:13px; }
.detail-section strong { display:block; color:var(--ember-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; }
.detail-section span { color:#cdbfae; line-height:1.48; }
.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translate(-50%, 18px); background:#f6ede2; color:#1a120b; border-radius:999px; padding:10px 15px; font-weight:900; opacity:0; pointer-events:none; transition:.2s ease; z-index:100; box-shadow:0 10px 40px rgba(0,0,0,.4); }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 960px) {
  .hero { grid-template-columns:1fr; }
  .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .forge-layout { grid-template-columns:1fr; }
  .controls-panel { position:static; }
  .forge-output,.empty-state { min-height:420px; }
  .rule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .app-shell { padding-left:10px; padding-right:10px; }
  .hero { padding:20px 17px; }
  .hero-stats { gap:5px; }
  .stat { padding:11px 5px; }
  .stat strong { font-size:1.2rem; }
  .stat span { font-size:.58rem; }
  .toolbar { padding:12px; }
  .toolbar .field { min-width:calc(50% - 6px); flex:1; }
  .toolbar .grow { min-width:100%; }
  .card-grid,.concept-grid,.continuity-grid,.idea-grid { grid-template-columns:1fr; }
  .archive-card { padding:14px; }
  .controls-panel,.concept-bank,#continuityView > .panel,#savedView > .panel { padding:17px; }
  .rule-grid { grid-template-columns:1fr; }
  .idea-title-row { display:block; }
  .idea-title-row .pill { margin-bottom:10px; }
  .topbar .ghost-btn { min-height:40px; }
}

/* V2 */
.toggle-field { min-height:46px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid #3b3128; background:#100f0d; border-radius:12px; color:var(--muted); font-size:.78rem; font-weight:850; white-space:nowrap; }
.toggle-field input { width:18px; min-height:18px; height:18px; accent-color:var(--ember); margin:0; padding:0; }
.card-actions { display:flex; align-items:center; gap:7px; }
.favorite-btn,.favorite-big { border:1px solid #493726; background:#100f0d; color:#9f8e7b; cursor:pointer; transition:.15s ease; }
.favorite-btn { width:34px; height:34px; border-radius:999px; display:grid; place-items:center; padding:0; font-size:1rem; }
.favorite-btn:hover,.favorite-btn.active,.favorite-big.active { border-color:var(--ember); color:var(--ember-2); background:#24170e; }
.archive-card.favorite { border-color:#5a3b22; box-shadow:inset 0 0 0 1px rgba(255,122,26,.08); }
.archive-open { display:block; width:100%; border:0; background:transparent; color:inherit; padding:0; text-align:left; cursor:pointer; }
.archive-open h3 { margin-bottom:9px; font-size:1.02rem; line-height:1.17; }
.archive-open p { margin-bottom:14px; font-size:.84rem; color:#a99d8e; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.chaos-btn { min-height:48px; border-radius:12px; border:1px solid #6f3322; background:linear-gradient(135deg,#2b100c,#21120c); color:#ffb06c; font-weight:1000; cursor:pointer; box-shadow:inset 0 0 24px rgba(255,90,30,.07); }
.chaos-btn:hover { border-color:#a9482c; background:linear-gradient(135deg,#35120d,#27150d); }
.dialog-title-row { display:flex; gap:14px; justify-content:space-between; align-items:flex-start; }
.favorite-big { border-radius:999px; padding:9px 12px; flex:0 0 auto; font-weight:900; }
.related-section { margin-top:24px; padding-top:20px; border-top:1px solid #33291f; }
.related-section h3 { margin-bottom:12px; }
.related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.related-card { border:1px solid #352b22; background:#100f0d; border-radius:13px; padding:12px; text-align:left; cursor:pointer; color:var(--text); }
.related-card:hover { border-color:#604529; background:#18130f; }
.related-card .id { display:block; margin-bottom:5px; }
.related-card strong { display:block; font-size:.86rem; line-height:1.25; }
.related-card small { display:block; margin-top:6px; color:var(--dim); font-size:.68rem; }
.research-card { margin-top:14px; border:1px solid #4a3928; background:linear-gradient(180deg,#15110d,#100e0c); border-radius:14px; padding:15px; }
.research-card ul { margin:8px 0 0; padding-left:19px; color:#c5b8a7; }
.research-card li { margin:7px 0; line-height:1.45; font-size:.84rem; }
.favorites-panel { margin-bottom:12px; }
.compact-empty { min-height:170px; }
.favorite-saved { border-color:#49331f; }
@media (max-width:620px) {
  .toggle-field { width:100%; }
  .dialog-title-row { display:block; }
  .favorite-big { margin:-2px 0 12px; }
  .related-grid { grid-template-columns:1fr; }
}


/* V3 · Canon constellation + cinematic era browser */
.tabs { mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 38px),transparent 100%); -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 38px),transparent 100%); padding-right:38px; }
.tab[data-view="map"]::before { content:"✦"; margin-right:6px; color:var(--ember-2); }
.tab[data-view="timeline"]::before { content:"◫"; margin-right:6px; color:var(--ember-2); }
.tab.active::before { color:#351302; }

.visual-hero { position:relative; overflow:hidden; padding:clamp(24px,5vw,42px); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr); align-items:center; gap:24px; margin-bottom:12px; isolation:isolate; }
.visual-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(circle at 80% 22%,rgba(255,122,26,.16),transparent 24rem),
  linear-gradient(110deg,rgba(255,255,255,.025),transparent 38%); z-index:-1; }
.visual-hero h2 { font-size:clamp(2rem,6vw,4.2rem); max-width:860px; }
.visual-hero p { max-width:770px; margin-bottom:0; }
.visual-hero-mark { height:190px; position:relative; opacity:.92; }
.visual-hero-mark::before,.visual-hero-mark::after { content:""; position:absolute; border:1px solid rgba(255,159,72,.22); border-radius:999px; inset:18px; transform:rotate(-14deg); box-shadow:0 0 50px rgba(255,122,26,.08); }
.visual-hero-mark::after { inset:50px 6px 34px 48px; transform:rotate(24deg); border-color:rgba(207,214,220,.16); }
.visual-hero-mark span { position:absolute; width:13px; height:13px; border-radius:999px; background:var(--ember); box-shadow:0 0 18px rgba(255,122,26,.8); }
.visual-hero-mark span:nth-child(1){left:20%;top:28%}.visual-hero-mark span:nth-child(2){left:63%;top:13%}.visual-hero-mark span:nth-child(3){left:78%;top:58%}.visual-hero-mark span:nth-child(4){left:42%;top:72%}.visual-hero-mark span:nth-child(5){left:11%;top:61%}
.visual-hero-mark span::after { content:""; position:absolute; width:90px; height:1px; background:linear-gradient(90deg,rgba(255,122,26,.48),transparent); transform-origin:left center; transform:rotate(24deg); top:6px; left:6px; }

.map-toolbar,.timeline-toolbar { padding:14px; display:flex; flex-wrap:wrap; gap:11px; align-items:end; margin-bottom:12px; }
.map-reset { min-width:120px; }
.map-stage { position:relative; overflow:hidden; padding:0; min-height:clamp(520px,69vw,760px); background:#090807; border-color:#38291d; box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 0 80px rgba(255,106,24,.035); }
.canon-map { min-height:clamp(520px,69vw,760px); touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; }
.canon-map:active { cursor:grabbing; }
.canon-svg { display:block; width:100%; height:auto; min-height:clamp(520px,69vw,760px); }
.star-field circle { fill:#f3e5d5; opacity:.22; }
.map-edge { stroke:#72543b; stroke-width:1.1; opacity:.24; transition:opacity .22s ease,stroke-width .22s ease,stroke .22s ease; }
.map-edge:not(.strong) { stroke-dasharray:4 7; }
.map-edge.strong { stroke:#bb6e37; stroke-width:1.55; opacity:.42; }
.map-edge.dim { opacity:.035; }
.map-edge.active.strong { opacity:.68; }
.map-node { cursor:pointer; transition:opacity .2s ease; outline:none; }
.map-node .node-halo { fill:rgba(255,122,26,.10); stroke:none; opacity:.2; }
.map-node .node-core { fill:#e87420; stroke:#ffc17e; stroke-width:1.2; filter:url(#nodeGlow); transition:r .18s ease,fill .18s ease,stroke-width .18s ease; }
.map-node.concept .node-core { fill:#8e8172; stroke:#d5c9ba; filter:none; }
.map-node.favorite .node-core { fill:#ff9a38; }
.map-node .favorite-ring { fill:none; stroke:#ffd28d; stroke-width:1.3; opacity:.75; }
.map-node .node-label { fill:#a99783; font-size:10px; font-weight:900; letter-spacing:.04em; pointer-events:none; }
.map-node.dim { opacity:.10; }
.map-node.active:hover .node-core,.map-node:focus .node-core { stroke-width:2.8; }
.map-node.selected .node-core { fill:#ffd09a; stroke:#fff1dc; stroke-width:3.2; }
.map-node.selected .node-halo { opacity:.8; fill:rgba(255,122,26,.24); }
.map-node.selected .node-label { fill:#fff1dd; }
.map-legend { position:absolute; z-index:3; left:14px; top:14px; display:flex; flex-wrap:wrap; gap:8px 12px; max-width:calc(100% - 28px); padding:8px 10px; border:1px solid rgba(84,65,49,.72); border-radius:999px; background:rgba(11,10,9,.76); backdrop-filter:blur(14px); color:#948574; font-size:.64rem; font-weight:850; letter-spacing:.04em; }
.map-legend span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:#e87420; box-shadow:0 0 8px rgba(255,122,26,.5); }
.legend-dot.favorite-dot { background:#ffd28d; }
.legend-dot.concept-dot { background:#8e8172; box-shadow:none; }
.legend-line { width:18px; height:1px; display:inline-block; background:#bb6e37; }
.inferred-line { background:repeating-linear-gradient(90deg,#72543b 0 4px,transparent 4px 7px); }
.map-hint { position:absolute; z-index:3; bottom:12px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 30px); border:1px solid #33271d; background:rgba(10,9,8,.82); backdrop-filter:blur(10px); border-radius:999px; padding:7px 11px; color:#77695b; font-size:.64rem; font-weight:800; text-align:center; }
.map-inspector { margin-top:12px; padding:clamp(18px,4vw,28px); min-height:170px; }
.inspector-empty { display:flex; align-items:center; gap:18px; min-height:120px; }
.small-orb { width:58px; height:58px; min-width:58px; font-size:1.15rem; margin:0; }
.inspector-empty h3 { margin:0 0 5px; font-size:1.2rem; }
.inspector-empty p { margin:0; font-size:.88rem; }
.inspector-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.inspector-head h2 { max-width:850px; font-size:clamp(1.7rem,5vw,3rem); }
.era-badge { flex:0 0 auto; display:inline-flex; align-items:center; border:1px solid #55402d; background:#171009; color:#ffc17d; border-radius:999px; padding:8px 11px; font-size:.7rem; font-weight:950; }
.neighbor-list { margin-top:18px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.neighbor-list > .eyebrow { grid-column:1/-1; }
.neighbor-chip { border:1px solid #34291f; border-radius:13px; background:#100f0d; color:inherit; text-align:left; padding:11px; cursor:pointer; min-width:0; }
.neighbor-chip:hover { border-color:#71462a; background:#19130f; }
.neighbor-chip strong,.neighbor-chip span,.neighbor-chip small { display:block; }
.neighbor-chip strong { color:var(--ember-2); font-size:.67rem; letter-spacing:.06em; }
.neighbor-chip span { color:#eee5da; margin:5px 0; font-size:.78rem; font-weight:850; line-height:1.2; }
.neighbor-chip small { color:#7f7264; font-size:.64rem; line-height:1.35; }
.inspector-actions,.detail-nav-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.inspector-actions button,.detail-nav-actions button { min-width:120px; }
.detail-nav-actions { margin:13px 0 2px; }
.detail-nav-actions button { min-height:38px; font-size:.78rem; }

.timeline-visual-hero::before { background:
  radial-gradient(circle at 82% 28%,rgba(255,122,26,.16),transparent 23rem),
  linear-gradient(90deg,transparent 0 55%,rgba(255,255,255,.025)); }
.timeline-glyph { height:170px; display:flex; align-items:center; justify-content:center; gap:0; position:relative; }
.timeline-glyph::before { content:""; position:absolute; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,#7f4b27 18%,#f18637 50%,#7f4b27 82%,transparent); box-shadow:0 0 18px rgba(255,122,26,.24); }
.timeline-glyph span,.timeline-glyph b { position:relative; z-index:1; display:block; border-radius:999px; background:#18120e; border:1px solid #7a4a2a; box-shadow:0 0 20px rgba(255,122,26,.12); }
.timeline-glyph span { width:18px; height:18px; }
.timeline-glyph b { width:8px; height:8px; margin:0 34px; background:#ff8a2d; border-color:#ffaf68; box-shadow:0 0 20px rgba(255,122,26,.7); }
.era-rail { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:1px 0 12px; scroll-snap-type:x proximity; }
.era-rail::-webkit-scrollbar { display:none; }
.era-chip { flex:0 0 auto; display:flex; align-items:center; gap:8px; border:1px solid #3b3026; background:#14110e; color:#b8aa98; border-radius:999px; min-height:38px; padding:0 11px; font-weight:900; cursor:pointer; scroll-snap-align:start; }
.era-chip:hover { border-color:#6c472b; color:#f2ddc3; }
.era-chip b { display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:999px; background:#24170f; color:#ff9a46; font-size:.68rem; }
.timeline-shell { padding:0; overflow:hidden; position:relative; box-shadow:0 24px 70px rgba(0,0,0,.4); }
.timeline-shell::before { content:""; position:absolute; inset:0 auto 0 0; width:40px; z-index:3; pointer-events:none; background:linear-gradient(90deg,#14120f,transparent); }
.timeline-shell::after { content:""; position:absolute; inset:0 0 0 auto; width:52px; z-index:3; pointer-events:none; background:linear-gradient(270deg,#14120f,transparent); }
.timeline-track { display:flex; gap:0; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#4d3625 #100e0c; min-height:650px; background:
  linear-gradient(180deg,rgba(255,255,255,.018),transparent 20%),
  #100f0d; }
.timeline-track::-webkit-scrollbar { height:8px; }
.timeline-track::-webkit-scrollbar-track { background:#100e0c; }
.timeline-track::-webkit-scrollbar-thumb { background:#4d3625; border-radius:999px; }
.era-column { flex:0 0 min(88vw,500px); scroll-snap-align:start; padding:26px 22px 34px; border-right:1px solid #2b241d; position:relative; }
.era-column:nth-child(even) { background:rgba(255,255,255,.012); }
.era-header { display:flex; gap:13px; align-items:flex-start; min-height:100px; }
.era-index { color:#3f3329; font-size:3rem; line-height:.85; letter-spacing:-.08em; font-weight:1000; }
.era-header h2 { margin-bottom:4px; font-size:1.75rem; }
.era-header p { margin:0; color:#73685c; font-size:.75rem; }
.era-line { height:24px; position:relative; margin-bottom:12px; }
.era-line::before { content:""; position:absolute; left:-22px; right:-22px; top:11px; height:1px; background:linear-gradient(90deg,#674226,#3c2c20 70%,transparent); }
.era-line span { position:absolute; z-index:1; top:5px; left:0; width:13px; height:13px; border-radius:50%; background:var(--ember); border:2px solid #1a120c; box-shadow:0 0 18px rgba(255,122,26,.6); }
.era-cards { display:grid; gap:10px; }
.timeline-card { position:relative; overflow:hidden; border:1px solid #33291f; border-radius:15px; background:linear-gradient(145deg,#17130f,#110f0d); padding:15px; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.timeline-card::before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(#ff963f,transparent 70%); opacity:.35; }
.timeline-card:hover { transform:translateY(-2px); border-color:#654329; box-shadow:0 12px 28px rgba(0,0,0,.23); }
.timeline-card.favorite { border-color:#624225; }
.timeline-card.favorite::after { content:"★"; position:absolute; right:13px; bottom:10px; color:#8e6337; font-size:.75rem; }
.timeline-card.flash { animation:timelineFlash 1.6s ease; }
@keyframes timelineFlash { 0%,100%{box-shadow:none} 20%,65%{border-color:#ff9940;box-shadow:0 0 0 2px rgba(255,122,26,.15),0 0 34px rgba(255,122,26,.17)} }
.timeline-card-top { display:flex; justify-content:space-between; gap:10px; margin-bottom:9px; }
.timeline-date { color:#d3a06d; font-size:.7rem; font-weight:900; }
.timeline-card h3 { margin:0 0 8px; font-size:1rem; }
.timeline-card p { color:#9d9182; font-size:.79rem; line-height:1.48; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.timeline-meta { display:flex; flex-wrap:wrap; gap:5px; }
.timeline-meta span { border:1px solid #30271f; border-radius:999px; padding:4px 6px; color:#756a5e; font-size:.6rem; font-weight:850; }
.timeline-actions { display:flex; gap:14px; margin-top:7px; }
.timeline-actions .text-btn { font-size:.72rem; }
.timeline-empty { min-width:100%; display:grid; place-items:center; align-content:center; text-align:center; padding:40px; min-height:600px; }
.timeline-empty p { max-width:430px; }

@media (max-width:900px) {
  .visual-hero { grid-template-columns:1fr; }
  .visual-hero-mark,.timeline-glyph { height:100px; opacity:.75; }
  .neighbor-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .tabs { margin-right:-16px; }
  .visual-hero { padding:23px 20px; gap:8px; }
  .visual-hero h2 { font-size:2.35rem; }
  .visual-hero-mark { height:78px; margin-top:2px; }
  .timeline-glyph { height:72px; }
  .timeline-glyph b { margin:0 18px; }
  .map-toolbar,.timeline-toolbar { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
  .map-toolbar .grow,.timeline-toolbar .grow { grid-column:1/-1; }
  .map-toolbar .map-reset,.timeline-toolbar > button { grid-column:1/-1; }
  .map-stage,.canon-map,.canon-svg { min-height:570px; }
  .map-legend { border-radius:14px; max-width:calc(100% - 24px); left:12px; top:12px; padding:8px; }
  .map-hint { width:calc(100% - 28px); border-radius:12px; }
  .inspector-head { display:block; }
  .era-badge { margin-bottom:12px; }
  .neighbor-list { grid-template-columns:1fr; }
  .inspector-actions { display:grid; grid-template-columns:1fr 1fr; }
  .inspector-actions button:first-child { grid-column:1/-1; }
  .era-column { flex-basis:88vw; padding:22px 16px 30px; }
  .era-line::before { left:-16px; right:-16px; }
  .timeline-track { min-height:620px; }
}

.map-zoom-controls { position:absolute; right:13px; bottom:13px; z-index:4; display:grid; gap:6px; }
.map-zoom-controls button { width:42px; height:42px; border-radius:13px; border:1px solid #4b3828; background:rgba(16,14,12,.88); backdrop-filter:blur(12px); color:#f2dcc4; font-size:1.3rem; font-weight:900; cursor:pointer; box-shadow:0 7px 20px rgba(0,0,0,.28); }
.map-zoom-controls button:active { transform:scale(.96); background:#26170e; border-color:#87522d; }
@media (max-width:620px) { .map-zoom-controls { right:10px; bottom:54px; } }