/* xhyumiracle.com v4 · circumpolar sky, real constellations, sectioned content, a real shell */

@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'PlexMono'; src: url('../fonts/plexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'NotoSerifSCsub'; src: url('../fonts/notoserif-sc-subset.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
 --bg: #070a12;
 --ink: #e9e4d6;
 --dim: #8b90a0;
 --faint: #565b6b;
 --gold: #d8c08a;
 --cyan: #8ad4cf;
 --line: rgba(233, 228, 214, 0.14);
 --serif: 'Spectral', 'Songti SC', Georgia, serif;
 --cn: 'NotoSerifSCsub', 'Songti SC', 'Noto Serif SC', serif;
 --mono: 'PlexMono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
 background: var(--bg);
 color: var(--ink);
 font-family: var(--serif);
 font-weight: 300;
 line-height: 1.6;
 overflow: hidden; /* the sky is the page */
}
::selection { background: rgba(216, 192, 138, 0.25); }
a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(216,192,138,.3); transition: border-color .25s; }
a:hover { border-bottom-color: var(--gold); }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }

.mono { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--dim); }
.cn-inline, .cn-name, .slogan-cn { font-family: var(--cn); font-weight: 500; }
.sc-tint { color: var(--cyan); }

#sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; transition: opacity 1s ease; touch-action: none; }
#sky.dim { opacity: .2; }
.grain {
 position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 3; pointer-events: none; opacity: .05;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* chrome corners (all above canvas) */
.id-block, .legend, .foot { position: fixed; z-index: 4; }

.id-block { top: 6vh; left: 5vw; max-width: 44ch; transition: opacity .4s ease; }
body.zoomed .id-block { opacity: .22; pointer-events: none; }

.avatar { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line); margin-bottom: 1.1rem; }
.avatar .fig { position: absolute; left: 50%; top: 55%; width: 28px; height: 35px; transform: translate(-50%, -50%); }
.fg-stroke { fill: none; stroke: var(--dim); stroke-width: 2; stroke-linecap: round; }
.fg-fade { stroke: var(--faint); opacity: .45; }
.avatar-q {
 position: absolute; top: -9px; right: -11px;
 font-family: var(--serif); font-style: italic; font-weight: 300;
 font-size: 20px; line-height: 1; color: var(--gold);
 transform: rotate(8deg);
 text-shadow: 0 0 10px rgba(216, 192, 138, .5);
 cursor: help;
}
.avatar-q:hover, .avatar-q:focus { text-shadow: 0 0 16px rgba(216, 192, 138, .85); outline: none; }

.eyebrow { color: var(--faint); }
.name { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 400; letter-spacing: .03em; margin-top: .5rem; white-space: nowrap; }
.cn-name { font-size: .72em; color: var(--dim); margin-left: .5em; }
.slogan-cn { color: var(--gold); font-size: clamp(.92rem, 1.25vw, 1.08rem); letter-spacing: .14em; margin-top: 1.3rem; }
.slogan-en { font-style: italic; color: var(--dim); font-size: .95rem; margin-top: .35rem; }
.role-line { color: var(--gold); margin-top: 1.1rem; }
.fields { margin-top: .35rem; color: var(--faint); }

.legend {
 top: 6vh; right: 4vw; width: min(340px, 30vw);
 background: rgba(10, 14, 25, 0.55);
 border: 1px solid var(--line); border-radius: 10px;
 padding: 14px 10px 8px; backdrop-filter: blur(6px);
}
.legend-title { padding: 0 10px 8px; color: var(--faint); border-bottom: 1px solid var(--line); }
.legend-row {
 display: flex; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 7px;
 transition: background .2s;
 align-items: baseline;
}
.legend-row:hover, .legend-row.lit { background: rgba(233, 228, 214, 0.06); }
.legend-row.current { background: rgba(216, 192, 138, 0.1); }
.lr-key { color: var(--gold); width: 1.6em; flex: none; }
.legend-row.sc .lr-key { color: var(--cyan); }
.legend-row.dim .lr-key { color: var(--faint); }
.lr-name { display: block; font-size: .92rem; color: var(--ink); line-height: 1.3; }
.legend-row.dim .lr-name { color: var(--dim); }
.lr-tags { display: block; font-size: .62rem; color: var(--faint); margin-top: 2px; letter-spacing: .08em; }

.foot { left: 5vw; bottom: 5vh; transition: opacity .5s ease; }
.contact a { margin-right: 1.4em; font-size: .88rem; }
.status-line { margin-top: .7rem; color: var(--faint); }
body.zoomed .foot { opacity: .12; pointer-events: none; }

/* sky navigation chrome: back button + chevrons, only meaningful while zoomed */
.sky-back, .chev {
 position: fixed; z-index: 5;
 opacity: 0; pointer-events: none;
 transition: opacity .3s ease, color .2s, border-color .2s;
 border: 1px solid var(--line); background: rgba(10, 14, 25, .5); backdrop-filter: blur(4px);
 color: var(--dim);
}
body.zoomed .sky-back, body.zoomed .chev { opacity: 1; pointer-events: auto; }
.sky-back {
 top: 4vh; left: 4vw;
 font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
 padding: 7px 12px; border-radius: 7px;
}
.chev {
 top: 50%; transform: translateY(-50%);
 width: 42px; height: 42px; border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 font-size: 1.3rem; line-height: 1;
}
.chev-l { left: 3vw; }
.chev-r { right: 3vw; }
.sky-back:hover, .chev:hover { color: var(--gold); border-color: rgba(216, 192, 138, .4); }

/* module content: floating typeset on the sky, no card */
.module-content {
 position: fixed; top: 0; right: 0; width: 50vw; height: 100vh; z-index: 6;
 overflow-y: auto; overscroll-behavior: contain;
 padding: calc(6vh + 295px) 5vw 22vh 3vw; /* clears the legend card (top:6vh + ~271px tall) + 24px gap */
 pointer-events: none;
}
.mod { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; outline: none; }
.mod.show { opacity: 1; transform: none; pointer-events: auto; }
.mod[hidden] { display: none; }
.mod:focus { outline: none; }

.panel-title { font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.4; margin-bottom: 1.1rem; }
.sc-hook { font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.5; margin-bottom: 1.1rem; color: var(--ink); }

/* subsections: mono path header + evidence list, repeated per facet */
.subsec { margin-top: 1.9rem; }
.subsec:first-of-type { margin-top: 0; }
.sub-slug { color: var(--gold); opacity: .6; margin-bottom: .6rem; }

.evidence { list-style: none; }
.evidence li {
 font-size: .95rem; color: var(--dim);
 padding: .7rem 0 .7rem 1.3rem; position: relative;
 border-top: 1px solid var(--line);
}
.evidence li:last-child { border-bottom: 1px solid var(--line); }
.evidence li::before {
 content: ''; position: absolute; left: .1rem; top: 1.35rem;
 width: 4px; height: 4px; border-radius: 50%;
 background: var(--gold); opacity: .55;
}
.aside { margin-top: 1.7rem; font-style: italic; font-size: .8rem; color: var(--faint); }
.sc-answer { color: var(--dim); margin-bottom: 1.4rem; }
.sc-ship { color: var(--faint); margin-bottom: 1.4rem; }
.sc-links { margin-bottom: .2rem; }
.sc-links a { margin-right: 1.6em; }

.research-line { color: var(--faint); margin: -.4rem 0 1.6rem; }
.pubs { list-style: none; margin-top: .3rem; }
.pub { padding: .6rem 0; border-top: 1px solid var(--line); }
.pub:last-child { border-bottom: 1px solid var(--line); }
.pub-title { display: inline; font-size: .93rem; color: var(--gold); }
.pub-title.notlink { color: var(--ink); border-bottom: none; }
.pub-code { margin-left: .7em; font-size: .64rem; color: var(--faint); border-bottom: 1px dotted var(--faint); }
.pub-code:hover { color: var(--gold); border-bottom-color: var(--gold); }
.pub-meta { display: block; margin-top: 3px; font-size: .66rem; color: var(--faint); letter-spacing: .08em; }
.pub-divider { padding: .5rem 0 .2rem; color: var(--faint); text-transform: lowercase; border: none; }
.talks-count { margin-top: .9rem; color: var(--faint); }

.faint-list { list-style: none; }
.faint-list li { padding: .55rem 0; font-size: .95rem; }
.faint-note { display: block; font-size: .8rem; color: var(--faint); margin-top: .1rem; }
.faint-dead { color: var(--dim); }
.ch-meta { margin-bottom: 1.2rem; }
.coda { margin-top: 1.6rem; }
.coda .cn-inline { color: var(--gold); opacity: .8; font-size: .9rem; letter-spacing: .18em; }

/* shutdown overlay */
.shutdown-veil {
 position: fixed; inset: 0; z-index: 20; background: #000;
 display: flex; align-items: center; justify-content: center;
 opacity: 0; pointer-events: none; transition: opacity 2s ease;
}
.shutdown-veil.show { opacity: 1; pointer-events: auto; }
.shutdown-line {
 font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; color: var(--faint);
 opacity: 0; transition: opacity 1s ease;
}
.shutdown-line.show { opacity: 1; }

/* docked prompt bar: always visible, one line, output pane expands up */
.shell-dock {
 position: fixed; left: 32%; right: 4%; bottom: 0; z-index: 9;
 padding-bottom: env(safe-area-inset-bottom, 0px);
}
.shell-pane {
 max-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
 background: rgba(10, 14, 25, .72); backdrop-filter: blur(8px);
 transition: max-height .28s ease;
 font-size: .74rem; line-height: 1.7;
}
.shell-pane::-webkit-scrollbar { width: 0; height: 0; }
.xterm-viewport { scrollbar-width: none; }
.xterm-viewport::-webkit-scrollbar { width: 0; height: 0; }
.shell-dock.expanded .shell-pane { max-height: 44vh; }
.shell-pane .sl { color: var(--dim); white-space: pre-wrap; word-break: break-word; padding: 2px 14px; }
.shell-pane .sl-cmdline { color: var(--ink); opacity: .85; margin-top: 6px; }
.shell-pane .sl:first-child { margin-top: 10px; }
.shell-pane .sl:last-child { margin-bottom: 8px; }
#xtermMount { padding: 8px 10px 0; }
#xtermMount .xterm { padding: 0 4px; }

.shell-row {
 position: relative; display: flex; align-items: center; gap: .35em;
 padding: .8em 1em; white-space: nowrap; overflow: hidden;
 background: rgba(10, 14, 25, .55); backdrop-filter: blur(8px);
 border-top: 1px solid var(--line);
}
.shell-ps { color: var(--gold); font-size: .74rem; letter-spacing: .04em; flex: none; }
.shell-typed { color: var(--ink); font-size: .78rem; letter-spacing: .02em; }
.shell-cursor {
 display: inline-block; width: .55em; height: 1em; background: var(--gold);
 opacity: .85; animation: shcursor 1s step-end infinite; flex: none;
}
@keyframes shcursor { 50% { opacity: 0; } }
.shell-ghost { color: var(--faint); font-size: .78rem; opacity: 0; transition: opacity .5s ease; }
.shell-ghost.show { opacity: .8; }
.shell-input {
 position: absolute; inset: 0; width: 100%; height: 100%;
 background: transparent; border: 0; outline: 0; opacity: 0;
 font-family: var(--mono); font-size: .78rem; color: transparent; caret-color: transparent;
 padding: .8em 1em;
}

/* mobile */
@media (max-width: 720px) {
 body { overflow-y: auto; } /* tiny page: header + sky + legend stack */
 #sky { position: fixed; }
 .id-block { position: relative; top: 0; left: 0; padding: 5vh 6vw 0; max-width: none; }
 .legend {
  position: relative; top: 0; right: 0; width: auto;
  margin: 100vh 4vw 0; /* clear the fixed bottom-55vh module content */
 }
 .foot { position: relative; left: 0; bottom: 0; padding: 4vh 6vw 12vh; }
 .lr-tags { font-size: .6rem; }
 .fields { font-size: .62rem; }

 .sky-back { top: 3vh; left: 4vw; }
 .chev { width: 38px; height: 38px; }
 .chev-l { left: 2vw; } .chev-r { right: 2vw; }

 .module-content {
  top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 55vh;
  padding: 4vh 7vw 8vh;
 }
 .shell-dock { left: 0; right: 0; }
}

/* shot mode + reduced motion (JS adds html.still for either case): everything instant */
html.still .id-block, html.still .mod, html.still .sky-back, html.still .chev,
html.still .shutdown-veil, html.still .shutdown-line, html.still #sky, html.still .shell-pane, html.still .shell-cursor { transition: none; animation: none; }

.id-block .fields { white-space: nowrap; }
@media (max-width: 720px) { .id-block .fields { white-space: normal; } }