/* iConference — KI-Framework interactive page. Pairs with ../colors_and_type.css */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { min-height:100%; background:var(--ink-900); }
body { font-family:var(--font-body); -webkit-font-smoothing:antialiased; color:var(--fg-on-dark); }
button { font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
a { color:inherit; text-decoration:none; }

.page { min-height:100vh; display:flex; flex-direction:column; }

/* top bar */
.fbar { height:62px; flex:none; display:flex; align-items:center; gap:16px; padding:0 26px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.fbar img { height:22px; }
.fbar .divider { width:1px; height:24px; background:rgba(255,255,255,.14); }
.fbar .ttl { font-family:var(--font-display); font-weight:700; font-size:15px; }
.fbar .ttl span { color:var(--cornflower-300); }
.fbar .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.fbar .back { font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--fg-on-dark-2);
  display:inline-flex; align-items:center; gap:7px; transition:color var(--dur) var(--ease); }
.fbar .back:hover { color:#fff; }
.fbar .back svg { width:17px; height:17px; }
.lang { display:flex; border:1.5px solid rgba(255,255,255,.18); border-radius:var(--radius-pill); overflow:hidden; }
.lang button { font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--fg-on-dark-2);
  padding:6px 12px; transition:all var(--dur) var(--ease); }
.lang button.on { background:var(--cornflower-500); color:#fff; }

/* layout: graph + detail */
.fbody { flex:1; display:flex; min-height:0; }
.intro { position:absolute; top:90px; left:40px; max-width:340px; z-index:5; pointer-events:none; }
.intro .eyebrow { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cornflower-300); margin-bottom:10px; }
.intro h1 { font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1.12; letter-spacing:-.02em; }
.intro p { font-size:15px; line-height:1.55; color:var(--fg-on-dark-2); margin-top:12px; }

.graph { flex:1; position:relative; min-width:0; overflow:hidden; }
.graph::before { content:""; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 50%, rgba(201,139,59,.18), transparent 70%); }
.graph svg.links { position:absolute; inset:0; width:100%; height:100%; }
.graph .ln { stroke:rgba(217,170,94,.42); stroke-width:1.5; stroke-dasharray:5 7; animation:flow 8s linear infinite; }
.graph .ln.hot { stroke:var(--cornflower-400); stroke-width:2.2; stroke-dasharray:none; }
@keyframes flow { to { stroke-dashoffset:-130; } }

.ghub { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:172px; height:172px;
  border-radius:50%; background:var(--cornflower-500); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:7px; z-index:3; text-align:center; box-shadow:0 0 0 16px rgba(201,139,59,.16), 0 0 60px rgba(201,139,59,.45); }
.ghub b { font-family:var(--font-display); font-weight:800; font-size:76px; line-height:0.7; color:#fff; letter-spacing:-.01em; }
.ghub > span { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:#f3e6cf; line-height:1; }

.gnode { position:absolute; transform:translate(-50%,-50%); z-index:3; display:flex; flex-direction:column;
  align-items:center; gap:9px; cursor:pointer; width:128px; }
.gnode .chip { width:62px; height:62px; border-radius:18px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
  transition:all var(--dur) var(--ease); }
.gnode .chip svg { width:26px; height:26px; stroke-width:1.75; }
.gnode .lab { font-family:var(--font-display); font-weight:600; font-size:13px; text-align:center; color:#dce7f4;
  text-wrap:balance; line-height:1.2; }
.gnode:hover .chip { transform:translateY(-3px); background:rgba(255,255,255,.12); }
.gnode.sel .chip { background:var(--cornflower-500); border-color:var(--cornflower-300);
  box-shadow:0 0 0 6px rgba(201,139,59,.22); }
.gnode.sel .chip svg { color:#fff; }
.gnode.sel .lab { color:#fff; }

/* detail panel */
.detail { width:380px; flex:none; background:var(--ink-800); border-left:1px solid rgba(255,255,255,.08);
  padding:28px 28px 22px; display:flex; flex-direction:column; overflow-y:auto; }
.detail .deyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cornflower-300); margin-bottom:9px; }
.detail .dh1 { font-family:var(--font-display); font-weight:800; font-size:23px; letter-spacing:-.02em; line-height:1.14; }
.detail .dintro-p { font-size:14px; line-height:1.55; color:var(--fg-on-dark-2); margin-top:10px; }
.detail .ddiv { height:1px; background:rgba(255,255,255,.1); margin:22px 0; }
@keyframes slidein { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.detail .dico { width:50px; height:50px; border-radius:var(--radius-md); display:flex; align-items:center;
  justify-content:center; margin-bottom:16px; }
.detail .dico svg { width:25px; height:25px; stroke-width:1.75; color:#fff; }
.detail h2 { font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.015em; line-height:1.15; }
.detail .dlead { font-size:14.5px; line-height:1.6; color:var(--fg-on-dark-2); margin:12px 0 20px; }
.detail .dlist { list-style:none; display:flex; flex-direction:column; gap:12px; }
.detail .dlist li { display:flex; gap:11px; font-size:14px; line-height:1.45; color:#dfe8f3; }
.detail .dlist li svg { width:17px; height:17px; color:var(--cornflower-300); flex:none; margin-top:2px; }
.detail .dtags { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }
.detail .dtag { font-family:var(--font-mono); font-size:11px; color:#cfe; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-pill); padding:4px 10px; }
.detail .hint { margin-top:auto; padding-top:20px; font-family:var(--font-mono); font-size:11px;
  color:var(--fg-on-dark-2); border-top:1px solid rgba(255,255,255,.08); display:flex; align-items:flex-start; gap:9px; line-height:1.5; }
.detail .hint svg { width:15px; height:15px; flex:none; margin-top:1px; }

/* placeholder note (template pending) */
.tplnote { position:absolute; bottom:22px; left:40px; z-index:5; font-family:var(--font-mono); font-size:11px;
  color:var(--fg-on-dark-2); background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.18);
  border-radius:var(--radius-md); padding:9px 13px; max-width:330px; line-height:1.5; }

@media (max-width:920px) {
  .page { display:block; }
  .intro { position:static; max-width:none; padding:24px 24px 0; }
  .fbody { display:block; }
  .graph { height:520px; overflow:visible; }
  .detail { width:auto; overflow:visible; }
}

@media (max-width:600px) {
  .fbar { padding:0 14px; gap:10px; }
  .fbar .divider, .fbar .ttl { display:none; }
  .fbar .back { font-size:0; gap:0; }
  .fbar .back svg { width:18px; height:18px; }
  .graph { transform:scale(.86); transform-origin:center; overflow:visible; }
  .gnode .lab { font-size:11px; max-width:94px; }
}