:root { color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; background:#030912; color:#edf5ff; }
* { box-sizing:border-box; } html,body { height:100%; } body { margin:0; min-width:320px; overflow:hidden; background:#030912; } button,input { font:inherit; color:inherit; } button { cursor:pointer; }
.app-shell { height:100svh; min-height:0; padding:14px; overflow:hidden; background:radial-gradient(ellipse at 62% 35%,#0a244622 0,transparent 44%),#030912; }
.topbar,.card,.dossier-card { border:1px solid rgba(71,167,255,.43); border-radius:10px; background:rgba(5,17,30,.94); }
.topbar { height:68px; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; }.brand { color:#eff6ff; text-decoration:none; font-weight:800; letter-spacing:.11em; white-space:nowrap; }.brand span { color:#52ceff; font-size:29px; vertical-align:-3px; }.brand b { color:#50cfff; margin-left:10px; font-size:13px; }.topbar nav { display:flex; align-items:stretch; height:100%; }.topbar nav a { align-content:center; padding:0 18px; color:#aebcd0; text-decoration:none; font-size:12px; letter-spacing:.1em; }.topbar nav a.is-current { color:#5bd4ff; border-bottom:3px solid #55ceff; background:#0a2139; }.topbar small { color:#758aa4; font-size:11px; letter-spacing:.08em; }
.observatory { display:grid; grid-template-columns:280px minmax(600px,1fr) 390px; gap:14px; height:calc(100% - 82px); min-height:0; margin-top:14px; }.card { min-height:0; overflow:hidden; }.catalog { padding:22px 18px; display:flex; flex-direction:column; gap:12px; }.card h2 { font-size:13px; letter-spacing:.12em; margin:0; }.search { display:flex; gap:8px; align-items:center; padding:11px; border:1px solid #244f77; border-radius:7px; color:#7e96b1; }.search input { width:100%; border:0; outline:0; background:transparent; color:#ddecff; }.world { display:flex; align-items:center; gap:11px; text-align:left; padding:12px; background:#061728; border:1px solid rgba(73,150,226,.22); border-radius:8px; }.world img { width:46px; height:46px; object-fit:cover; border-radius:50%; }.world span { display:grid; gap:4px; flex:1; }.world small,.catalog-note { color:#93a8c0; font-size:12px; }.world em { color:#6ee9a5; font-size:10px; font-style:normal; white-space:nowrap; }.world.is-selected { border-color:#55cfff; box-shadow:0 0 24px #15558340; }.catalog-note { margin:auto 4px 0; line-height:1.5; }
.world-window { min-height:0; display:grid; grid-template-rows:auto 44px minmax(0,1fr); }.world-heading { display:flex; justify-content:space-between; padding:15px 24px 12px; border-bottom:1px solid rgba(86,155,220,.22); }.world-heading p,.dossier-card header p { margin:0 0 5px; color:#56cfff; letter-spacing:.12em; font-size:11px; }.world-heading h1 { margin:0; font-size:25px; letter-spacing:.05em; }.world-heading em,.timeline em { color:#70e3a2; font-size:11px; font-style:normal; letter-spacing:.1em; }.world-heading>span { color:#99aac0; font-size:13px; }.world-tabs { display:flex; gap:8px; align-items:stretch; padding:0 15px; border-bottom:1px solid rgba(86,155,220,.22); }.world-tabs button { padding:0 12px; border:0; border-bottom:3px solid transparent; background:transparent; color:#9badc2; font-size:11px; font-weight:700; letter-spacing:.1em; }.world-tabs button.is-active { color:#eff6ff; border-color:#56cfff; }.world-tabs button:hover { color:#bfe8ff; }
.scene { position:relative; min-height:0; overflow:hidden; background:#020913; }.galaxy { position:absolute; inset:-5%; width:110%; height:110%; object-fit:cover; opacity:.84; filter:saturate(.85) contrast(1.05); animation:galaxy-drift 18s ease-in-out infinite alternate; }.place { position:absolute; z-index:1; width:38px; height:38px; padding:0; border:1px solid #45c2ff; border-radius:50%; background:#061727e8; color:#a2e2ff; box-shadow:0 0 16px #39bfff33; font-size:20px; }.place:hover,.place:focus-visible { border-color:#9de9ff; box-shadow:0 0 24px #39bfff77; outline:0; }.archive { left:9%; top:17%; }.field { right:9%; top:18%; }.workshop { left:18%; bottom:19%; }.commons { right:18%; bottom:19%; }.place-card,.scene-panel { position:absolute; z-index:4; left:50%; top:48%; width:min(310px,54%); transform:translate(-50%,-50%); padding:19px; border:1px solid #54ccff; border-radius:12px; background:#06182bf5; box-shadow:0 18px 48px #000a; }.place-card button,.scene-panel button { position:absolute; right:10px; top:8px; border:0; background:transparent; color:#a8dfff; font-size:22px; }.place-card b,.place-card span { display:block; }.place-card b,.scene-panel h2 { margin:0; font-size:19px; letter-spacing:.05em; }.place-card span,.scene-panel p { margin:6px 0 0; color:#66d5ff; font-size:10px; letter-spacing:.1em; }.place-card p,.scene-panel span { display:block; margin:12px 0 0; color:#b5c8dc; font-size:13px; line-height:1.4; }
.resident { position:absolute; z-index:2; width:42px; height:42px; padding:0; border:2px solid #62dca1; border-radius:50%; background:#063325e8; box-shadow:0 0 18px #3de99455; animation:resident-float 5.7s ease-in-out infinite alternate; }.resident i { display:block; width:9px; height:9px; margin:auto; border-radius:50%; background:#7affbd; }.resident span { position:absolute; top:48px; left:50%; transform:translateX(-50%); white-space:nowrap; color:#e9f5ff; font-size:11px; letter-spacing:.06em; }.resident::after { position:absolute; left:50%; bottom:55px; width:max-content; max-width:170px; transform:translateX(-50%) translateY(5px); padding:8px 10px; border:1px solid #4ecbff; border-radius:7px; background:#06192df2; color:#dfeeff; content:attr(data-agent) " · " attr(data-role); font-size:10px; line-height:1.3; letter-spacing:.04em; opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; }.resident:hover::after,.resident:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }.resident:focus-visible { outline:0; border-color:#b0f4ff; }.resident-mira { left:45%; top:44%; animation-delay:-2.4s; }.resident-aster { left:27%; top:29%; animation-delay:-.8s; }.resident-niko { right:26%; top:60%; animation-delay:-4.1s; }.scene-help { position:absolute; z-index:2; bottom:13px; left:50%; transform:translateX(-50%); margin:0; padding:8px 14px; border-radius:100px; color:#b9cce1; background:#051323db; font-size:11px; }
.right-column { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) minmax(190px,31%); gap:14px; }.agent-card { min-height:0; display:grid; grid-template-rows:auto 1fr auto; padding:18px; }.agent-overview { display:grid; grid-template-columns:120px 1fr; gap:16px; margin-top:14px; overflow:hidden; }.agent-overview img { width:120px; height:230px; object-fit:cover; object-position:left; border-radius:7px; }.agent-overview h3 { margin:0; font-size:26px; }.agent-overview p { color:#c0cedd; line-height:1.45; font-size:13px; }.agent-overview b { display:block; margin-top:14px; color:#5fd1ff; font-size:11px; letter-spacing:.1em; }.agent-overview hr { border:0; border-top:1px solid #23465f; margin:13px 0; }.agent-card>button { margin-top:14px; width:100%; padding:11px; border:1px solid #4bc8ff; border-radius:7px; background:#09233a; color:#6fd8ff; letter-spacing:.1em; font-size:11px; }.timeline { min-height:0; padding:18px; }.timeline h2 { display:flex; justify-content:space-between; }.timeline ol { margin:11px 0 0; padding:0; list-style:none; }.timeline li { display:grid; grid-template-columns:95px 1fr; gap:10px; padding:10px 0; border-top:1px solid #183a52; color:#c7d6e5; font-size:12px; }.timeline time { color:#6cd5ff; font-weight:700; }
.dossier[hidden] { display:none; }.dossier { position:fixed; z-index:10; inset:0; padding:4vh 5vw; }.backdrop { position:absolute; inset:0; background:#010611d8; backdrop-filter:blur(8px); }.dossier-card { position:relative; max-width:1320px; height:92vh; margin:auto; overflow:hidden; box-shadow:0 32px 120px #000d; }.dossier-card>header { height:106px; padding:22px 30px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(86,155,220,.27); }.dossier-card header h2 { margin:0; font-size:31px; }.dossier-card header span { color:#a9bfd2; }.close { width:42px; height:42px; border-radius:50%; border:1px solid #5ecfff; background:transparent; font-size:27px; }.dossier-layout { height:calc(100% - 106px); display:grid; grid-template-columns:330px minmax(0,1fr); }.identity { padding:26px; border-right:1px solid rgba(86,155,220,.27); color:#91a7bd; }.identity img { width:100%; height:410px; object-fit:cover; object-position:left; border-radius:8px; }.identity p { font-size:13px; line-height:1.5; }.dossier-content { padding:28px 36px; overflow:auto; }.dossier-tabs { display:flex; gap:18px; border-bottom:1px solid #23465f; }.dossier-tabs button { padding:12px 16px; border:0; background:transparent; color:#9db0c5; letter-spacing:.1em; font-size:12px; }.dossier-tabs button.is-active { color:#62d5ff; border-bottom:3px solid #62d5ff; }.dossier-content h3 { margin-top:32px; color:#62d5ff; font-size:13px; letter-spacing:.1em; }.dossier-content p { max-width:690px; color:#d2deeb; font-size:18px; line-height:1.5; }.muted { color:#91a7bd !important; }.warning { border-left:3px solid #d5ab61; padding-left:14px; }.dossier textarea { width:100%; min-height:140px; padding:14px; background:#061523; border:1px solid #244f72; border-radius:7px; }.dialogue-actions { display:flex; gap:10px; margin-top:13px; }.dialogue-actions button { padding:10px 13px; border:1px solid #35536d; border-radius:7px; background:#071523; color:#8094aa; cursor:not-allowed; }
@media (max-width:1325px) { .observatory { grid-template-columns:220px minmax(480px,1fr) 340px; }.topbar small { display:none; }.agent-overview { grid-template-columns:100px 1fr; }.agent-overview img { width:100px; height:240px; } }
@keyframes galaxy-drift { from { transform:translate3d(-1.2%,-.8%,0) scale(1.01); } to { transform:translate3d(1.2%,.8%,0) scale(1.04); } } @keyframes resident-float { from { transform:translate3d(0,-4px,0); } to { transform:translate3d(0,5px,0); } } @media (prefers-reduced-motion:reduce) { .galaxy,.resident { animation:none; } }
@media (max-width:900px) { html,body { height:auto; overflow:auto; }.app-shell { height:auto; min-height:100svh; overflow:visible; padding:10px; }.topbar nav { display:none; }.topbar { padding:0 15px; }.brand b { display:none; }.observatory { height:auto; grid-template-columns:1fr; }.catalog { display:none; }.world-window { min-height:680px; }.right-column { grid-template-rows:auto auto; }.agent-overview { grid-template-columns:110px 1fr; }.dossier { padding:1vh 1vw; }.dossier-card { height:98vh; }.dossier-layout { grid-template-columns:1fr; }.identity { display:none; }.place { font-size:10px; padding:8px; } }