/* A research atlas in deep space. The galaxies are live, seeded canvas drawings. */
.cosmic-home { --bg:#080c16; --bg-soft:#0d1423; --surface:#111a2b; --surface-2:#131d30; --ink:#eef2ff; --ink-soft:#bbc6dc; --muted:#97a7c3; --accent:#aebeff; --accent-ink:#c7d2ff; --accent-soft:#9aaeff14; --accent-line:#9aaeff44; --line:#bfcee520; --line-strong:#bfcee538; }
.cosmic-home .navbar { background:#080d18b8; border-color:#b1c5ed10; backdrop-filter:blur(20px); }
.cosmic-home .navbar.scrolled { background:#080d18f0; }
.cosmic-home .nav-logo a { color:#e5ecff; letter-spacing:-.04em; }
.cosmic-home .nav-link { color:#a1aec7; }
.cosmic-home .nav-link:hover,.cosmic-home .nav-link.active { color:#e8eeff; background:#a9beff0a; }
.universe.playground { display:block; position:relative; max-width:none; padding:0; margin:0; height:max(850px,100svh); max-height:1150px; min-height:850px; overflow:hidden; background:#050913; isolation:isolate; }
.universe .universe-stage { position:absolute; inset:0; height:100%; width:100%; border-radius:0; background:#050913; overflow:hidden; }
.universe-vignette { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0509130a 65%,#080c16 100%),linear-gradient(90deg,#05091350,transparent 55%); z-index:1; }
.universe-intro { position:absolute; z-index:4; left:6.5%; top:145px; padding:0; width:min(620px,46vw); pointer-events:none; }
.universe-intro .intro-line { color:#a5b5d1; font-size:.73rem; letter-spacing:.01em; }
.universe-intro .presence-dot { background:#b7c9fa; box-shadow:0 0 12px #9eb6ff77; width:5px; height:5px; }
.universe h1 { font-size:clamp(2.9rem,4.3vw,4.5rem); font-weight:500; line-height:1.08; letter-spacing:-.055em; color:#eff3ff; margin:22px 0 18px; }
.universe .intro-description { color:#99aac6; font-size:.88rem; max-width:330px; line-height:1.8; }
.universe .intro-actions { flex-direction:row; align-items:center; gap:25px; margin-top:25px; pointer-events:auto; }
.universe .enter-playground { background:transparent; border:1px solid #b0c5ef5c; border-radius:4px; padding:11px 16px; font-size:.72rem; color:#dce7fc; gap:25px; }
.universe .enter-playground:hover { background:#a4bbf515; border-color:#b0c5ef; transform:none; }
.universe .intro-actions > a { color:#8598b8; font-size:.68rem; text-decoration:none; }
.universe .intro-actions > a:hover { color:#dce7fc; }
.universe-coordinate { position:absolute; right:6.5%; top:127px; display:flex; align-items:center; gap:16px; color:#8394b1; font: .62rem/1.8 var(--font-body); pointer-events:none; z-index:2; }
.coordinate-cross { color:#a4b6d8; font-size:24px; font-weight:300; }
.universe .research-node { background:none; backdrop-filter:none; box-shadow:none; border:0; border-radius:0; padding:12px 14px; transform:translate(-50%,0); gap:10px; color:#e5ecfc; min-height:76px; z-index:3; transition:opacity .3s,color .3s; text-shadow:0 2px 12px #000; }
.universe .research-node:hover,.universe .research-node:focus-visible { background:none; box-shadow:none; color:#fff; }
.universe .node-copy { gap:4px; text-align:left; }
.universe .node-copy strong { font-family:var(--font-display); color:#edf2ff; font-size:1rem; letter-spacing:-.02em; font-weight:500; }
.universe .node-copy small { display:block; font-size:.62rem; color:var(--topic-color); letter-spacing:.025em; }
.universe .node-copy > span { font-size:.6rem; color:#8d9fbd; letter-spacing:.015em; }
.universe .node-arrow { color:#93a6c9; align-self:center; font-size:1rem; margin-left:6px; }
.galaxy-marker { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--topic-color); box-shadow:0 0 9px var(--topic-color); }
.galaxy-hit { position:absolute; width:var(--hit-size,220px); height:calc(var(--hit-size,220px)*.75); left:50%; bottom:calc(100% - 16px); transform:translateX(-50%); border-radius:50%; }
.research-node::before { content:''; position:absolute; height:19px; width:1px; background:linear-gradient(transparent,var(--topic-color)); top:-15px; left:50%; opacity:.5; transition:height .3s; }
.research-node:hover::before { height:30px; }
.universe [data-open="play"] { --topic-color:#e1b47d; }
.universe [data-open="create"] { --topic-color:#bba1f7; }
.universe [data-open="connect"] { --topic-color:#83cdc9; }
.universe [data-open="space"] { --topic-color:#8aaff6; }
.universe-stage.is-travelling .research-node { opacity:0; pointer-events:none; }
.universe .node-play { left:24%;top:59%; }
.universe .node-create { left:69%;top:39%; }
.universe .node-connect { left:80%;top:75%; }
.universe .node-space { left:48%;top:83%; }
.universe-footer { position:absolute; bottom:38px; left:6.5%; right:6.5%; display:flex; justify-content:space-between; align-items:flex-end; gap:35px; z-index:4; pointer-events:none; }
.universe-footer > * { pointer-events:auto; }
.universe .exploration-passport { margin:0; max-width:280px; }
.universe .passport-top { color:#8a9cba; font-size:.65rem; max-width:245px; gap:40px; }
.universe .discovery-slots { gap:27px; margin:13px 0 8px; }
.universe .slot-symbol { width:25px;height:25px;font-size:17px;background:transparent;border:1px solid #8fa7d32e;color:#53627e; }
.universe .discovery-slots button { color:#8397b8; font-size:.58rem; }
.universe .discovery-slots button.discovered .slot-symbol { color:var(--topic-color); background:color-mix(in srgb,var(--topic-color) 12%,transparent); border-color:var(--topic-color); box-shadow:0 0 16px color-mix(in srgb,var(--topic-color) 20%,transparent); }
.universe #passport-note { font-size:.61rem;color:#7e91b2;max-width:290px;min-height:0; }
.universe .completion-actions { margin-top:8px;gap:18px; }
.universe .completion-actions button { font-size:.65rem;color:#c3d1fa; }
.universe-instructions { display:flex;align-items:center;gap:14px;padding-bottom:10px; }
.universe-instructions p { font-size:.66rem;line-height:1.8;color:#7d91b2; }
.navigation-star { color:#afc3ec;font-size:31px;font-weight:300; }
.universe #motion-toggle { color:#8297b8;font-size:.64rem;margin-bottom:15px;text-decoration:none;border-bottom:1px solid #8297b83b;padding:0 0 3px; }
.universe .canvas-fallback { top:48%;left:37%;width:26%;color:#c2cfea; }
.cosmic-home .experiment-dialog { background:#0e1626;border:1px solid #859dcd38;box-shadow:0 30px 120px #0009; }
.cosmic-home .experiment-dialog::backdrop { background:#02050bd9;backdrop-filter:blur(7px); }
.cosmic-home .experiment-lab { background:radial-gradient(ellipse at 45% 40%,color-mix(in srgb,var(--topic-color) 10%,#101725),#0b1220 80%); }
.cosmic-home .lab-top { color:#afc0df; }
.cosmic-home #lab-category { color:var(--topic-color); }
.cosmic-home #close-experiment { color:#b3c3df;background:#172236;border-color:#8498be40; }
.cosmic-home .experiment-prompt { color:#e5ecfb; }
.cosmic-home .experiment-hint,.cosmic-home .notes-label { color:#8b9dbb; }
.cosmic-home .experiment-feedback { color:var(--topic-color); }
.cosmic-home .experiment-notes h2 { color:#e9efff; }
.cosmic-home #experiment-description { color:#a6b7d2; }
.cosmic-home .experiment-work { border-color:#8196be24; }
.cosmic-home .experiment-work small { color:#7f94b7; }
.cosmic-home .experiment-work strong { color:#cfddf8; }
.cosmic-home .experiment-work:hover strong { color:#fff; }
.cosmic-home #next-experiment { background:#20304e;color:#d1dfff;border:1px solid #7b96c549; }
.cosmic-home .play-target { background:radial-gradient(circle at 33% 27%,#f7ddb2,#c48e50 50%,#5e3f3d);border-color:#d6b18266;color:#201610;box-shadow:0 0 35px #c8994630; }
.cosmic-home .play-target[aria-pressed="true"] { background:#d4b37b;color:#22190e; }
.cosmic-home .mood-choices button { background:#19253b;border-color:#7388b04d;color:#b4c1db; }
.cosmic-home .mood-choices button[aria-pressed="true"] { background:#69609d;color:white; }
.cosmic-home .wave-reference { stroke:#a7bad663; }
.cosmic-home .wave-player { stroke:#83cdc9; }
.cosmic-home .tuning-label { color:#b6c6df; }
.cosmic-home #rhythm-tuner { accent-color:#83cdc9; }
.depth-scene { position:relative;height:190px;margin:20px 0;perspective:500px;overflow:hidden; }
.depth-world { width:150px;height:130px;position:absolute;left:50%;top:30px;transform:translateX(-50%) rotateX(10deg) rotateY(-24deg);transform-style:preserve-3d; }
.depth-plane { position:absolute;inset:0;border:1px solid #7da8ed66;background:linear-gradient(135deg,#719fe318,#1a325825);display:grid;place-items:center;font-size:.65rem;color:#9db9e7;transition:transform .12s linear; }
.depth-plane:first-child { transform:translateZ(calc(var(--depth,0)*-1px)); }
.depth-plane:nth-child(2) { transform:translateZ(calc(var(--depth,0)*0px)); }
.depth-plane:last-child { transform:translateZ(calc(var(--depth,0)*1px));border-color:#b1d3ff;background:#233f6255; }
#depth-control { width:100%;accent-color:#8aaff6;margin:16px 0; }
.cosmic-home .project-section { border-color:#728ab125; }
.cosmic-home .selected-project { border-color:#728ab125; }
.cosmic-home .project-description .project-detail,.cosmic-home .project-context,.cosmic-home .project-publication { color:#8e9eba; }
.cosmic-home .theme-card .t-icon { color:#aec0e9; }
.cosmic-home .chip { border-color:#637da044; }
.cosmic-home .chip.active { background:#24345a;color:#d9e5ff; }
.cosmic-home .pub-venue { color:#c0d1f6; }
.cosmic-home :focus-visible { outline-color:#bfd0ff; }
@media (min-width:1700px) { .universe-intro { left:10%; } .universe-footer { left:10%;right:10%; } }
@media (max-width:1100px) { .universe-intro { top:125px;left:5%;width:400px; } .universe h1 { font-size:3.3rem; } .universe .node-copy strong { font-size:.85rem; } .universe .node-copy > span { font-size:.55rem; } .universe-coordinate { right:5%;font-size:.57rem; } .universe-footer { left:5%;right:5%; } }
@media (max-width:800px) { .universe.playground { height:1100px;min-height:1100px;max-height:none;display:block; } .universe .universe-stage { height:100%;width:100%;margin:0;border-radius:0; } .universe-intro { top:115px;left:7%;width:86%; } .universe h1 { font-size:3.5rem;line-height:1.06;margin:23px 0 15px; } .universe h1 br { display:block; } .universe .intro-line { font-size:.66rem; } .universe .intro-description { font-size:.8rem; } .universe-coordinate { display:none; } .universe .intro-actions { margin-top:20px;gap:22px; } .universe .enter-playground { padding:10px 12px;font-size:.66rem;gap:16px; } .universe-footer { left:7%;right:7%;bottom:28px;gap:15px; } .universe-instructions { display:none; } .universe .exploration-passport { max-width:260px; } .universe .node-copy small { font-size:.56rem; } .universe .node-copy strong { font-size:.82rem; } .universe .node-copy > span { font-size:.54rem; } .universe .node-arrow { display:block;font-size:.8rem; } .universe .research-node { padding:8px;gap:8px; } .universe .node-play { left:26%;top:47%; } .universe .node-create { left:72%;top:59%; } .universe .node-connect { left:28%;top:73%; } .universe .node-space { left:72%;top:84%; } .universe .galaxy-hit { width:180px; } }
@media (max-width:480px) { .universe.playground { height:1080px;min-height:1080px; } .universe h1 { font-size:2.65rem;letter-spacing:-.055em; } .universe .intro-line { font-size:.57rem;gap:7px; } .universe .intro-description { font-size:.75rem; } .universe .node-copy > span { display:none; } .universe .node-copy strong { font-size:.75rem; } .universe .node-copy small { font-size:.55rem; } .universe .node-arrow { margin-left:0;font-size:.75rem; } .universe .galaxy-marker { width:3px;height:3px; } .universe .research-node { min-height:55px;gap:6px; } .universe .discovery-slots { gap:20px; } .universe #passport-note { max-width:230px; } .universe #motion-toggle { font-size:.58rem;white-space:nowrap; } .universe .canvas-fallback { top:55%;left:15%;width:70%; } }
/* The same galaxy renderer powers these previews and the homepage. */
.galaxy-preview { margin:10px 0 20px; }
.galaxy-preview canvas { display:block;width:100%;height:auto;aspect-ratio:20/9; }
.galaxy-preview-caption { font-size:.68rem;line-height:1.6;color:var(--topic-color);min-height:2.2em;text-align:center; }
.galaxy-preview-actions { display:flex;justify-content:center;gap:22px;margin-top:12px; }
.galaxy-preview-actions button { font: .65rem var(--font-body);background:none;border:0;border-bottom:1px solid #8599be55;padding:5px 0;color:#b6c6e1;cursor:pointer; }
.galaxy-preview-actions button:hover { color:#fff;border-color:#c6d7f4; }
.cosmic-home .play-targets { position:static;display:flex;justify-content:center;flex-wrap:wrap;gap:10px;height:auto;margin:0; }
.cosmic-home .play-target { position:static;width:auto;height:auto;min-height:42px;border-radius:24px;padding:10px 16px;background:#19253b;border:1px solid #7388b04d;color:#c4d1e7;box-shadow:none;font-size:.72rem; }
.cosmic-home .play-target[aria-pressed="true"] { transform:none;background:#684e2d;border-color:#d6b18299;color:#ffe1aa; }
.cosmic-home .play-target:hover { transform:none;border-color:#e1b47d; }
.cosmic-home .wave-view { height:65px;margin:0 0 14px; }
.cosmic-home #experiment-surface { padding:18px 0;min-height:320px; }
@media (max-width:480px) { .galaxy-preview-actions { gap:18px; } .cosmic-home .play-target { padding:9px 12px;font-size:.68rem; } }
/* Works, rather than abstract preferences, are the choices within every galaxy. */
.project-choices { display:grid;gap:8px; }
.project-choice { display:flex;flex-direction:column;gap:4px;text-align:left;width:100%;padding:11px 14px;border:1px solid #8198c033;border-radius:6px;background:#121e30;color:#d3def2;cursor:pointer;font:inherit; }
.project-choice strong { font-size:.76rem;line-height:1.35;font-weight:500; }
.project-choice small { font-size:.61rem;color:#91a5c5; }
.project-choice:hover { border-color:var(--topic-color);background:#19283d; }
.project-choice[aria-pressed="true"] { border-color:var(--topic-color);background:color-mix(in srgb,var(--topic-color) 12%,#101725); }
.project-choice[aria-pressed="true"] strong::after { content:' ✓';color:var(--topic-color); }
.project-visual-note { font-size:.75rem;line-height:1.8;color:#a6b7d2; }
.cosmic-home .experiment-notes h2 { overflow-wrap:anywhere; }
.cosmic-home .galaxy-preview { margin-bottom:16px; }
/* Visitor interests lead to a related work, with an explicit reason for the match. */
.project-choices { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.project-choice { align-items:center;justify-content:center;text-align:center;border-radius:14px;min-height:84px;padding:10px 8px; }
.project-choice small { line-height:1.5; }
.recommendation-reason { margin-bottom:20px;padding-left:14px;border-left:2px solid var(--topic-color); }
.recommendation-reason > strong { font-size:.72rem;font-weight:500;color:var(--topic-color); }
.recommendation-reason p { font-size:.77rem;line-height:1.75;color:#b4c3dc;margin-top:6px; }
@media (max-width:480px) { .project-choice strong { font-size:.69rem; } .project-choice small { font-size:.57rem; } }
/* Four gestures, one stable visual identity for each galaxy. */
.interest-constellation { position:relative;display:flex;justify-content:space-between;gap:10px;min-height:123px;padding:14px 0 0; }
.interest-constellation::before { content:'';position:absolute;left:16%;right:16%;top:35px;height:1px;background:linear-gradient(90deg,transparent,#e1b47d44,transparent);pointer-events:none; }
.interest-star { position:relative;display:flex;flex:1;flex-direction:column;align-items:center;gap:6px;padding:0 3px;border:0;background:none;color:#a5b2c9;cursor:pointer;font:inherit; }
.interest-star::before { content:'✧';display:grid;place-items:center;width:40px;height:40px;font-size:30px;color:#ae8e65;transition:color .2s,text-shadow .2s; }
.interest-star[aria-pressed="true"]::before { content:'✦';color:#ffe0ac;text-shadow:0 0 20px #e1b47d99; }
.interest-star[aria-pressed="true"] strong { color:#ffe0ac; }
.interest-star strong { font-size:.73rem;font-weight:500;line-height:1.5; }
.interest-star small { font-size:.6rem;line-height:1.5;color:#8d9fbd; }
.intention-composer { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px 0 6px; }
.intention-prefix { flex-basis:100%;text-align:center;color:#b7a6dc;font-size:.9rem;margin-bottom:8px; }
.intention-word { display:flex;flex-direction:column;gap:4px;background:transparent;border:0;border-bottom:1px solid #bba1f744;border-radius:0;padding:10px 7px;color:#b4bdd1;cursor:pointer;font:inherit; }
.intention-word strong { font-size:.75rem;font-weight:500; }
.intention-word small { font-size:.58rem;color:#8b9dbb; }
.intention-word[aria-pressed="true"] { color:#e4d4ff;border-color:#bba1f7;background:#bba1f70a; }
.signal-interaction,.spatial-interaction { padding:0 3px; }
.galaxy-range { display:block;width:100%;height:28px;margin:8px 0;accent-color:var(--topic-color);cursor:ew-resize; }
.range-stops { display:flex;justify-content:space-between;gap:6px; }
.range-stop { flex:1;background:none;border:0;border-top:1px solid #8599be33;padding:8px 2px;min-height:44px;font: .65rem/1.5 var(--font-body);color:#8d9fbd;cursor:pointer; }
.range-stop[aria-pressed="true"] { color:var(--topic-color);border-color:var(--topic-color); }
.cosmic-home .signal-interaction .wave-view { height:52px;margin:0 0 10px; }
.cosmic-home .spatial-interaction .depth-scene { height:100px;margin:0 0 10px; }
.spatial-interaction .depth-world { width:120px;height:66px;top:16px; }
.spatial-interaction .depth-plane { font-size:.6rem; }
.cosmic-home .tuning-label { gap:10px;font-size:.69rem; }
.tuning-label > span { color:var(--topic-color);text-align:right; }
.interest-star:hover,.intention-word:hover,.range-stop:hover { color:#fff; }
.related-research { margin:12px 0 0;font-size:.73rem; }
.related-research summary { color:#b7c8e6;cursor:pointer;padding:10px 0; }
.related-research .experiment-work strong { font-size:.76rem;line-height:1.6; }
@media (min-width:801px) { .cosmic-home #experiment-surface { padding:10px 0; } .cosmic-home .galaxy-preview { margin-bottom:10px; } .galaxy-preview canvas { max-height:140px;object-fit:contain; } }
@media (prefers-reduced-motion:reduce) { .interest-star::before,.depth-plane { transition:none; } }
@media (max-width:480px) { .interest-star strong { font-size:.66rem; } .interest-star small { font-size:.57rem; } .intention-word strong { font-size:.67rem; } .intention-word small { font-size:.55rem; } .intention-composer { gap:3px; } .range-stop { font-size:.6rem; } }