File size: 5,585 Bytes
a6ddf4c 8f493c4 a6ddf4c 3843250 a6ddf4c 3843250 a6ddf4c 011a4c1 b400c06 8f493c4 011a4c1 8f493c4 b400c06 8f493c4 a489d26 8f493c4 b400c06 a6ddf4c 8f493c4 3843250 a6ddf4c 8f493c4 a6ddf4c 3843250 a6ddf4c 8f493c4 a6ddf4c 3843250 a6ddf4c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | :root {
--bg: #0a0b0d;
--text: #f4f5f7;
--muted: #8b8f98; /* inactive tokens, captions */
--dim: #5a5e66; /* separators, hairlines */
--accent: #38bdf8; /* active token, slider, play, progress */
--hairline: #1e2127;
--ui: 'Inter', system-ui, -apple-system, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--ui);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem 2rem; }
/* Header — one line, no hero */
.head { display:flex; justify-content:space-between; align-items:baseline;
gap:1.5rem; flex-wrap:wrap; }
.head h1 { font-size:1.5rem; font-weight:600; letter-spacing:-0.02em; }
.head h1 .muted { color:var(--muted); font-weight:400; }
.head-links { display:flex; gap:1.25rem; flex-shrink:0; }
.head-links a { color:var(--muted); text-decoration:none; font-size:.95rem;
display:inline-flex; align-items:center; gap:.35rem;
border-bottom:1px solid transparent; transition:.15s; }
.head-links a:hover { color:var(--text); border-bottom-color:var(--dim); }
.head-links svg { width:14px; height:14px; }
.caption { margin-top:.5rem; font-family:var(--mono); font-size:.95rem;
color:var(--muted); letter-spacing:.02em; }
/* Plot — globes float on the dark canvas */
.viz-wrap { position:relative; }
#plot { width:100%; height:clamp(280px, 37vw, 440px); margin:0 0 .1rem; }
/* Spectra panel — overlays the right half of #plot in spectra mode */
#spectra-panel {
position:absolute; left:50%; top:0;
width:50%; height:100%;
background:var(--bg); z-index:5;
padding:.75rem .5rem .75rem 1.5rem;
display:flex; flex-direction:column;
}
#spectra-panel.hidden { display:none; }
#spectra-chart { flex:1; min-height:0; display:block; }
.spectra-msg {
flex:1; display:flex; align-items:center; justify-content:center;
font-family:var(--mono); font-size:.75rem; color:var(--muted);
}
/* Globe labels — positioned over each sphere center */
.globe-labels { position:relative; width:100%; height:1.3rem; margin-top:1.1rem; }
.globe-label { position:absolute; transform:translateX(-50%);
font-family:var(--mono); font-size:.95rem; color:#aab0bb;
letter-spacing:.08em; white-space:nowrap; }
.globe-label:first-child { left:24.25%; }
.globe-label:last-child { left:75.75%; }
.drag-hint { font-family:var(--mono); font-size:.7rem; color:var(--dim);
text-align:center; margin:.12rem 0 0; letter-spacing:.04em; }
/* Thin streamed progress / status bar */
.status { position:relative; height:30px; border-radius:6px; overflow:hidden;
background:rgba(56,189,248,0.06);
border:1px solid rgba(56,189,248,0.18);
display:flex; align-items:center; padding:0 .9rem;
font-family:var(--mono); font-size:.72rem; color:var(--muted);
transition:opacity .3s; }
.status::before { content:''; position:absolute; inset:0;
width:var(--p,0%); background:rgba(56,189,248,0.16);
transition:width .25s ease; }
.status span { position:relative; z-index:1; }
.status.hidden { opacity:0; pointer-events:none; height:0; border:0; margin:0; }
/* Controls */
.controls { display:flex; flex-direction:column; gap:.7rem; margin-top:.6rem; }
.row { display:flex; align-items:baseline; gap:.5rem 1.5rem; flex-wrap:wrap; }
.row > .label { font-family:var(--mono); font-size:.85rem; color:var(--muted);
text-transform:uppercase; letter-spacing:.08em;
min-width:9.5rem; flex-shrink:0; }
/* Inline text-token selector */
.tokens { display:flex; flex-wrap:wrap; align-items:baseline; flex:1; }
.token { font-size:.95rem; color:var(--muted); cursor:pointer;
transition:color .15s; white-space:nowrap; }
.token:hover { color:var(--text); }
.token.active { color:var(--text); text-decoration:underline;
text-decoration-color:var(--accent);
text-underline-offset:4px; text-decoration-thickness:1.5px; }
.sep { color:var(--dim); pointer-events:none; padding:0 .5rem; }
/* Hairline slider (members) */
.slider-row input[type=range] { -webkit-appearance:none; appearance:none;
flex:1; max-width:220px; height:16px; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track { height:1px; background:var(--dim); }
input[type=range]::-moz-range-track { height:1px; background:var(--dim); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none;
width:12px; height:12px; margin-top:-6px; border-radius:50%;
background:var(--accent); }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border:0;
border-radius:50%; background:var(--accent); }
.val { font-family:var(--mono); font-size:.9rem; color:var(--text);
min-width:2ch; }
/* Timeline + play */
.timeline-controls { display:flex; align-items:center; gap:.75rem; flex:1; }
.timeline-controls #timeline { flex:1; }
.play { font-family:var(--mono); font-size:.78rem; color:var(--accent);
background:none; border:0; cursor:pointer; padding:0;
letter-spacing:.04em; }
.play:hover { color:var(--text); }
.lead { font-family:var(--mono); font-size:.9rem; color:var(--muted);
min-width:9ch; }
@media (max-width:720px) {
.wrap { padding:1.5rem 1.1rem 3rem; }
.row > .label { min-width:100%; }
#plot { height:78vw; }
}
|