/* App layout - minimal CSS, most styling via Tailwind */ .app-shell { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; background: var(--surface-app); box-shadow: inset 0 0 0 1px var(--border-primary); } .app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) .hololake-bar { border-bottom-color: rgba(132, 158, 214, .16); color: #e9efff; background: #0c1731; } .app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) .hololake-bar__context { color: #7f8dab; } .app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) [data-testid="status-bar"] { border-top-color: rgba(132, 158, 214, .16) !important; color: #7e8dab !important; background: #091329 !important; } .hololake-bar { height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; color: var(--text-primary); background: var(--surface-panel); border-bottom: 1px solid var(--border-default); letter-spacing: .02em; } .hololake-bar__brand, .hololake-bar__library { border: 0; background: transparent; color: inherit; cursor: pointer; } .hololake-bar__brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; letter-spacing: .02em; } .hololake-bar__brand b { color: var(--accent-blue); font-weight: 600; } .hololake-bar__mark { display: block; width: 24px; height: 28px; object-fit: contain; object-position: center; flex: 0 0 24px; } .hololake-bar__line { width: 1px; height: 16px; background: var(--border-default); } .hololake-bar__context { color: var(--text-secondary); font-size: 12px; } .hololake-bar__library { margin-left: auto; padding: 5px 9px; border: 1px solid var(--border-default); border-radius: 6px; color: var(--text-secondary); font-size: 12px; } .hololake-bar__library:hover { background: var(--state-hover-subtle); color: var(--text-primary); } .hololake-theme-nav { display: grid; min-width: 198px; grid-template-columns: 10px minmax(0, 1fr) 16px; align-items: center; gap: 10px; margin-left: auto; padding: 7px 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s ease; } .hololake-theme-nav:hover, .hololake-theme-nav[data-state="open"] { border-color: color-mix(in srgb, var(--accent-blue) 28%, var(--border-default)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent-blue) 15%, transparent), color-mix(in srgb, var(--accent-blue) 4%, transparent)); color: var(--text-primary); } .hololake-theme-nav:active { transform: translateY(1px); } .hololake-theme-nav > i, .hololake-theme-menu__item > i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--theme-dot); box-shadow: 0 0 12px color-mix(in srgb, var(--theme-dot) 76%, transparent); } .hololake-theme-nav > span { display: grid; min-width: 0; gap: 1px; }.hololake-theme-nav small { color: var(--text-muted); font-size: 9px; font-weight: 500; letter-spacing: .1em; }.hololake-theme-nav strong { overflow: hidden; color: var(--text-primary); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.hololake-theme-nav > b { color: var(--text-muted); font-size: 16px; font-weight: 400; transition: transform .2s ease; }.hololake-theme-nav[data-state="open"] > b { transform: rotate(180deg); } .hololake-theme-menu { width: 318px; max-height: min(560px, calc(100vh - 80px)); padding: 8px; border-color: color-mix(in srgb, var(--accent-blue) 26%, var(--border-default)); border-radius: 15px; background: color-mix(in srgb, var(--surface-sidebar) 96%, transparent); box-shadow: 0 24px 70px color-mix(in srgb, #000 30%, transparent), inset 0 1px color-mix(in srgb, #fff 7%, transparent); backdrop-filter: blur(24px); } .hololake-theme-menu > header { display: grid; gap: 5px; padding: 10px 12px 13px; border-bottom: 1px solid var(--border-default); }.hololake-theme-menu > header span { color: var(--accent-blue); font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; }.hololake-theme-menu > header strong { font-size: 15px; font-weight: 650; }.hololake-theme-menu > header small { color: var(--text-muted); font-size: 10px; } .hololake-theme-menu [role="group"] { display: grid; gap: 3px; padding-top: 7px; } .hololake-theme-menu__item { display: grid; min-height: 48px; grid-template-columns: 10px 1fr; gap: 11px; padding: 7px 11px 7px 13px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; } .hololake-theme-menu__item > span:not([data-slot]) { display: grid; gap: 2px; }.hololake-theme-menu__item strong { font-size: 12px; font-weight: 600; }.hololake-theme-menu__item small { color: var(--text-muted); font-size: 10px; } .hololake-theme-menu__item:focus, .hololake-theme-menu__item[data-state="checked"] { border-color: color-mix(in srgb, var(--accent-blue) 24%, var(--border-default)); background: linear-gradient(90deg, color-mix(in srgb, var(--accent-blue) 14%, transparent), color-mix(in srgb, var(--accent-blue) 3%, transparent)); color: var(--text-primary); } .hololake-theme-menu__item [data-slot="dropdown-menu-item-indicator"] { right: 10px; left: auto; color: var(--accent-blue); } .hololake-theme-nav i[data-tone="slate"], .hololake-theme-menu i[data-tone="slate"] { --theme-dot: #94a3b8; }.hololake-theme-nav i[data-tone="sky"], .hololake-theme-menu i[data-tone="sky"] { --theme-dot: #7dd3fc; }.hololake-theme-nav i[data-tone="cyan"], .hololake-theme-menu i[data-tone="cyan"] { --theme-dot: #4fd1c5; }.hololake-theme-nav i[data-tone="aurora"], .hololake-theme-menu i[data-tone="aurora"] { --theme-dot: #22d3ee; }.hololake-theme-nav i[data-tone="ice"], .hololake-theme-menu i[data-tone="ice"] { --theme-dot: #60a5fa; }.hololake-theme-nav i[data-tone="violet"], .hololake-theme-menu i[data-tone="violet"] { --theme-dot: #a78bfa; }.hololake-theme-nav i[data-tone="indigo"], .hololake-theme-menu i[data-tone="indigo"] { --theme-dot: #818cf8; }.hololake-theme-nav i[data-tone="gold"], .hololake-theme-menu i[data-tone="gold"] { --theme-dot: #fbbf24; }.hololake-theme-nav i[data-tone="green"], .hololake-theme-menu i[data-tone="green"] { --theme-dot: #4ade80; }.hololake-theme-nav i[data-tone="peach"], .hololake-theme-menu i[data-tone="peach"] { --theme-dot: #fb7185; } .hololake-theme-nav i[data-tone="native-galaxy"], .hololake-theme-menu i[data-tone="native-galaxy"] { --theme-dot: #8fb8d8; } [data-guanghu-theme="guanghu-native-galaxy"] .app-shell { background: radial-gradient(circle at 16% 4%, rgba(23, 58, 94, .18), transparent 30%), radial-gradient(circle at 86% 96%, rgba(62, 53, 107, .12), transparent 32%), var(--surface-app); } [data-guanghu-theme="guanghu-native-galaxy"] .hololake-bar, [data-guanghu-theme="guanghu-native-galaxy"] .channel-dock, [data-guanghu-theme="guanghu-native-galaxy"] .app__sidebar, [data-guanghu-theme="guanghu-native-galaxy"] .app__note-list { background-color: color-mix(in srgb, var(--surface-sidebar) 92%, transparent); backdrop-filter: blur(18px); } [data-guanghu-theme="guanghu-native-galaxy"] .app__editor { background: radial-gradient(circle at 74% 14%, rgba(62, 53, 107, .08), transparent 28%), var(--surface-editor); } [data-guanghu-theme="guanghu-native-galaxy"] button:focus-visible { outline-color: #8fb8d8; } .channel-dock { display: flex; width: 58px; flex: 0 0 58px; flex-direction: column; align-items: center; gap: 8px; padding: 10px 7px; border-right: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-sidebar) 92%, var(--accent-blue)); } .channel-dock button { display: grid; width: 44px; min-height: 48px; place-items: center; gap: 2px; padding: 5px 2px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--text-secondary); cursor: pointer; }.channel-dock button:hover, .channel-dock button[data-active="true"] { border-color: var(--border-default); background: var(--state-selected); color: var(--text-primary); }.channel-dock button:disabled { opacity: .45; cursor: default; }.channel-dock span { font-family: Georgia, serif; font-size: 16px; }.channel-dock small { font-size: 9px; } /* Tauri's macOS traffic lights are overlaid on the title bar. Keep the product mark and title in a separate, stable lane so they never collide. */ body.mac-chrome .hololake-bar { padding-left: 92px; } .team-foundation { --lighthouse-line: rgba(255,255,255,.09); --lighthouse-muted: #8590a3; display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 100vh; color: #edf2f8; background: #090d13; } .team-foundation button { font: inherit; } .team-foundation__sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 30px 18px 20px; border-right: 1px solid var(--lighthouse-line); background: linear-gradient(180deg, #101720 0%, #0b1017 72%); } .team-foundation__brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; border-bottom: 1px solid var(--lighthouse-line); } .team-foundation__brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(102,213,226,.5); border-radius: 12px; color: #7ce5ed; background: rgba(64,188,207,.1); box-shadow: 0 0 28px rgba(61,201,219,.16); font-size: 28px; } .team-foundation__brand div { display: grid; gap: 5px; }.team-foundation__brand strong { font-size: 17px; letter-spacing: .05em; }.team-foundation__brand div span { color: #667386; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; } .team-foundation__nav { display: grid; gap: 6px; margin-top: 28px; }.team-foundation__nav > p { margin: 0 10px 9px; color: #5d6878; font-size: 10px; letter-spacing: .14em; } .team-foundation__nav button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 9px 10px; border: 1px solid transparent; border-radius: 11px; color: #8f9bad; background: transparent; text-align: left; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .team-foundation__nav button:hover { color: #dbe5f1; background: rgba(255,255,255,.035); }.team-foundation__nav button.is-active { border-color: rgba(95,200,222,.18); color: #f3f8fc; background: linear-gradient(90deg, rgba(43,152,187,.18), rgba(43,152,187,.05)); } .team-foundation__domain-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #70dce5; box-shadow: 0 0 13px rgba(112,220,229,.75); }.team-foundation__nav button[data-tone="blue"] .team-foundation__domain-dot { background: #6ca6ff; box-shadow: 0 0 13px rgba(108,166,255,.7); }.team-foundation__nav button[data-tone="violet"] .team-foundation__domain-dot { background: #a989ff; box-shadow: 0 0 13px rgba(169,137,255,.7); }.team-foundation__nav button[data-tone="amber"] .team-foundation__domain-dot { background: #f0bb62; box-shadow: 0 0 13px rgba(240,187,98,.7); } .team-foundation__nav button > span:last-child { display: grid; gap: 3px; }.team-foundation__nav strong { font-size: 13px; font-weight: 600; }.team-foundation__nav small { color: #667386; font-size: 10px; } .team-foundation__gate { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; margin-top: 22px; padding: 14px 11px; border: 1px solid var(--lighthouse-line); border-radius: 12px; background: rgba(255,255,255,.025); }.team-foundation__gate-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #7d8999; background: rgba(255,255,255,.05); }.team-foundation__gate div { display: grid; gap: 3px; }.team-foundation__gate strong { color: #aab4c1; font-size: 11px; }.team-foundation__gate small { color: #596575; font-size: 9px; }.team-foundation__lock { padding: 3px 6px; border-radius: 999px; color: #777f8b; background: rgba(255,255,255,.06); font-size: 8px; } .team-foundation__sidebar-footer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; margin-top: auto; padding: 18px 9px 0; border-top: 1px solid var(--lighthouse-line); color: #657183; font-size: 9px; }.team-foundation__sidebar-footer code { grid-column: 1 / -1; margin-top: 4px; color: #424d5d; font-size: 8px; }.team-foundation__status-dot { width: 6px; height: 6px; border-radius: 50%; background: #65d6a1; box-shadow: 0 0 9px rgba(101,214,161,.65); } .team-foundation__workspace { min-width: 0; }.team-foundation__topbar { display: flex; height: 66px; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--lighthouse-line); background: rgba(9,13,19,.86); backdrop-filter: blur(16px); }.team-foundation__topbar > div:first-child { display: flex; align-items: center; gap: 12px; }.team-foundation__topbar span { color: #768296; font-size: 11px; }.team-foundation__topbar strong { padding: 4px 8px; border: 1px solid rgba(105,214,224,.18); border-radius: 999px; color: #8cdde5; background: rgba(61,178,194,.08); font-size: 9px; font-weight: 500; }.team-foundation__topbar-actions { display: flex; gap: 7px; }.team-foundation__topbar-actions button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--lighthouse-line); border-radius: 9px; color: #8692a4; background: rgba(255,255,255,.025); cursor: pointer; } .team-foundation__content { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 58px 0 72px; } .team-foundation__hero { position: relative; display: grid; min-height: 355px; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; overflow: hidden; padding: 52px 58px; border: 1px solid var(--lighthouse-line); border-radius: 24px; background: radial-gradient(circle at 78% 45%, rgba(40,174,201,.17), transparent 29%), linear-gradient(135deg, #111923, #0c121a 68%); box-shadow: 0 28px 80px rgba(0,0,0,.22); } .team-foundation__hero-copy { position: relative; z-index: 2; }.team-foundation__hero-copy > p:first-child { margin: 0 0 17px; color: #59c8d5; font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; }.team-foundation__hero h1 { margin: 0; color: #f4f7f9; font: 500 clamp(44px, 6vw, 76px)/1.05 Georgia, "Songti SC", serif; letter-spacing: .02em; }.team-foundation__hero h2 { margin: 17px 0 11px; color: #c7d3df; font-size: 17px; font-weight: 500; }.team-foundation__hero-copy > p:nth-of-type(2) { max-width: 570px; margin: 0; color: #8794a6; font-size: 13px; line-height: 1.8; } .team-foundation__hero-actions { display: flex; align-items: center; gap: 17px; margin-top: 28px; }.team-foundation__hero-actions button { padding: 11px 17px; border: 1px solid rgba(104,216,228,.4); border-radius: 9px; color: #0b171b; background: #71d8e1; box-shadow: 0 8px 28px rgba(64,193,210,.16); font-size: 11px; cursor: pointer; }.team-foundation__hero-actions button span { margin-left: 12px; color: inherit; }.team-foundation__hero-actions > span { color: #536070; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; } .team-foundation__orbit { position: relative; display: grid; width: 280px; height: 280px; place-items: center; justify-self: end; }.team-foundation__orbit::before, .team-foundation__orbit::after { position: absolute; content: ""; border: 1px solid rgba(114,220,229,.16); border-radius: 50%; }.team-foundation__orbit::before { inset: 24px; }.team-foundation__orbit::after { inset: 62px; border-style: dashed; animation: lighthouse-spin 26s linear infinite; }.team-foundation__orbit-core { display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid rgba(126,228,235,.42); border-radius: 50%; color: #b8f3f5; background: radial-gradient(circle, rgba(93,214,224,.25), rgba(36,126,147,.07)); box-shadow: 0 0 55px rgba(57,193,210,.24), inset 0 0 26px rgba(103,221,231,.1); font: 28px Georgia, serif; }.team-foundation__orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #6cd8e2; box-shadow: 0 0 12px #6cd8e2; }.team-foundation__orbit i:nth-of-type(1) { top: 22px; left: 136px; }.team-foundation__orbit i:nth-of-type(2) { top: 135px; right: 22px; background: #81a9ff; box-shadow: 0 0 12px #81a9ff; }.team-foundation__orbit i:nth-of-type(3) { bottom: 22px; left: 136px; background: #a98cff; box-shadow: 0 0 12px #a98cff; }.team-foundation__orbit i:nth-of-type(4) { top: 135px; left: 22px; background: #eeb963; box-shadow: 0 0 12px #eeb963; } .team-foundation__modules { padding-top: 55px; }.team-foundation__section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }.team-foundation__section-heading p { margin: 0 0 7px; color: #4c8793; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }.team-foundation__section-heading h2 { margin: 0; font-size: 22px; font-weight: 520; }.team-foundation__section-heading > span { color: #5d6878; font-size: 10px; } .team-foundation__module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.team-foundation__module { min-height: 218px; padding: 19px; border: 1px solid var(--lighthouse-line); border-radius: 15px; background: linear-gradient(150deg, rgba(19,27,37,.95), rgba(12,18,26,.95)); }.team-foundation__module-icon { display: grid; width: 36px; height: 36px; place-items: center; margin-bottom: 18px; border: 1px solid rgba(104,205,219,.16); border-radius: 10px; color: #78d6df; background: rgba(53,164,182,.08); }.team-foundation__badge { display: inline-block; padding: 3px 7px; border-radius: 999px; font-size: 8px; }.team-foundation__badge.is-system { color: #8de0e6; background: rgba(62,180,194,.11); }.team-foundation__badge.is-active { color: #9fb9ff; background: rgba(94,132,220,.12); }.team-foundation__badge.is-muted { color: #7c8796; background: rgba(255,255,255,.05); }.team-foundation__module h3 { margin: 10px 0 8px; font-size: 14px; font-weight: 600; }.team-foundation__module p { margin: 0; color: #738093; font-size: 10px; line-height: 1.65; }.team-foundation__module footer { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; color: #3f4b5a; }.team-foundation__module footer code { font-size: 8px; }.team-foundation__module--add { display: flex; align-items: center; justify-content: center; flex-direction: column; border-style: dashed; text-align: center; background: rgba(255,255,255,.012); }.team-foundation__module--add > span { color: #4c596a; font-size: 26px; }.team-foundation__module--add p { max-width: 180px; } .team-foundation__access-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; padding-top: 48px; }.team-foundation__fifth-domain, .team-foundation__boundaries { min-height: 190px; padding: 28px; border: 1px solid var(--lighthouse-line); border-radius: 17px; background: #0d131b; }.team-foundation__fifth-domain { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px; }.team-foundation__fifth-domain > div span, .team-foundation__boundaries > span { color: #5b6574; font: 8px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }.team-foundation__fifth-domain h2, .team-foundation__boundaries h2 { margin: 9px 0 0; font-size: 17px; font-weight: 520; }.team-foundation__fifth-domain p { grid-column: 1 / -1; max-width: 600px; margin: 0; color: #738093; font-size: 11px; line-height: 1.7; }.team-foundation__fifth-domain button { justify-self: start; padding: 8px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: #5d6775; background: rgba(255,255,255,.03); font-size: 9px; }.team-foundation__boundaries ul { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 20px 0 0; padding: 0; list-style: none; }.team-foundation__boundaries li { color: #7a8697; font-size: 9px; }.team-foundation__boundaries li::before { margin-right: 7px; color: #64cfd9; content: "·"; } @keyframes lighthouse-spin { to { transform: rotate(360deg); } } @media (max-width: 980px) { .team-foundation { grid-template-columns: 220px minmax(0, 1fr); }.team-foundation__hero { grid-template-columns: 1fr; }.team-foundation__orbit { position: absolute; right: -70px; opacity: .55; }.team-foundation__module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.team-foundation__access-row { grid-template-columns: 1fr; } } @media (max-width: 720px) { .team-foundation { display: block; }.team-foundation__sidebar { position: static; height: auto; }.team-foundation__nav { grid-template-columns: 1fr 1fr; }.team-foundation__gate, .team-foundation__sidebar-footer { display: none; }.team-foundation__content { width: min(100% - 28px, 1180px); padding-top: 28px; }.team-foundation__hero { min-height: 330px; padding: 35px 28px; }.team-foundation__topbar { padding: 0 18px; }.team-foundation__module-grid { grid-template-columns: 1fr; } } /* Team shell deliberately stays lightweight: shared theme colors, no animated or blurred skin. */ .team-foundation--lightweight { --lighthouse-line: var(--border-color); color: var(--text-primary); background: var(--bg-primary); } .team-foundation--lightweight .team-foundation__sidebar { padding: 22px 16px 16px; background: var(--bg-secondary); } .team-foundation--lightweight .team-foundation__brand-mark { border: 0; color: var(--accent-blue); background: var(--accent-blue-subtle); box-shadow: none; font-size: 16px; font-weight: 700; } .team-foundation--lightweight .team-foundation__nav button, .team-foundation--lightweight .team-foundation__nav button:hover, .team-foundation--lightweight .team-foundation__nav button.is-active { background: transparent; box-shadow: none; } .team-foundation--lightweight .team-foundation__nav button.is-active { border-color: var(--accent-blue); color: var(--text-primary); background: var(--accent-blue-subtle); } .team-foundation--lightweight .team-foundation__domain-dot { box-shadow: none !important; } .team-foundation--lightweight .team-foundation__gate, .team-foundation--lightweight .team-foundation__topbar, .team-foundation--lightweight .team-foundation__hero, .team-foundation--lightweight .team-foundation__module, .team-foundation--lightweight .team-foundation__fifth-domain, .team-foundation--lightweight .team-foundation__boundaries { background: var(--bg-secondary); box-shadow: none; backdrop-filter: none; } .team-foundation--lightweight .team-foundation__topbar { height: 58px; } .team-foundation--lightweight .team-foundation__content { padding-top: 32px; } .team-foundation--lightweight .team-foundation__hero { min-height: 250px; grid-template-columns: 1fr; padding: 36px 40px; border-radius: 14px; } .team-foundation--lightweight .team-foundation__hero h1 { color: var(--text-primary); font: 600 clamp(34px, 5vw, 56px)/1.1 system-ui, sans-serif; } .team-foundation--lightweight .team-foundation__hero h2 { color: var(--text-primary); } .team-foundation--lightweight .team-foundation__hero-copy > p:nth-of-type(2), .team-foundation--lightweight .team-foundation__module p, .team-foundation--lightweight .team-foundation__fifth-domain p { color: var(--text-secondary); } .team-foundation--lightweight .team-foundation__hero-actions > span { color: var(--text-secondary); font: 11px/1.6 system-ui, sans-serif; } .team-foundation--lightweight .team-foundation__module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .team-foundation--lightweight .team-foundation__module { min-height: 190px; } .team-foundation--lightweight .team-foundation__module button { margin-top: 20px; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 7px; color: var(--text-primary); background: var(--bg-primary); cursor: pointer; } .team-foundation--lightweight .team-foundation__module button:not(:disabled) { border-color: var(--accent-blue); color: var(--accent-blue); } .team-foundation--lightweight .team-foundation__module button:disabled { color: var(--text-tertiary); cursor: default; } .team-foundation__loading { display: grid; min-height: 100vh; place-items: center; color: var(--text-secondary); background: var(--bg-primary); } @media (max-width: 980px) { .team-foundation--lightweight .team-foundation__module-grid { grid-template-columns: 1fr; } } .hololake-bar__brand { min-width: max-content; white-space: nowrap; } .hololake-bar__context { white-space: nowrap; } .hololake-home { position: relative; z-index: 2; display: flex; width: 100%; min-width: 0; overflow: hidden; color: var(--text-primary); background: var(--surface-app); transition: color .28s ease, background-color .28s ease; } .channel-workspace { position: relative; min-width: 0; flex: 1; overflow: auto; padding: clamp(28px, 5vw, 64px); background: var(--surface-app); } .living-system-status { position: absolute; z-index: 24; top: 14px; right: 18px; display: inline-grid; grid-template-columns: 8px auto; column-gap: 8px; align-items: center; min-height: 34px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--surface-app) 72%, transparent); box-shadow: 0 12px 34px rgb(0 0 0 / 14%); color: var(--text-secondary); font-size: 11px; line-height: 1.1; letter-spacing: .04em; backdrop-filter: blur(16px); pointer-events: none; } .living-system-status > i { grid-row: 1 / span 2; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-blue); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-blue) 76%, transparent); } .living-system-status > span { font-weight: 650; } .living-system-status > small { color: var(--text-tertiary); font-size: 9px; } .hololake-home[data-living-kernel="planning"] .living-system-status > i { animation: living-system-breathe 900ms ease-in-out infinite alternate; } .hololake-home[data-living-kernel="server"] .living-system-status { border-color: color-mix(in srgb, var(--accent-green) 38%, transparent); } .hololake-home[data-living-kernel="server"] .living-system-status > i { background: var(--accent-green); box-shadow: 0 0 14px color-mix(in srgb, var(--accent-green) 82%, transparent); } @keyframes living-system-breathe { from { opacity: .46; transform: scale(.78); } to { opacity: 1; transform: scale(1.18); } } .channel-rail { display: flex; width: 258px; flex: 0 0 258px; flex-direction: column; gap: 24px; overflow-y: auto; padding: 26px 16px; border-right: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-sidebar) 94%, var(--accent-blue)); transition: width .25s ease, background-color .28s ease; } .channel-rail__heading { display: grid; gap: 5px; padding: 4px 10px 14px; border-bottom: 1px solid var(--border-default); } .channel-rail__heading span { color: var(--accent-blue); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; } .channel-rail__heading strong { font-size: 20px; }.channel-rail__heading small { color: var(--text-muted); font-size: 13px; line-height: 1.55; } .channel-rail nav { display: grid; gap: 4px; } .channel-rail nav button { justify-content: flex-start; width: 100%; height: 44px; padding-inline: 12px; color: var(--text-secondary); font-size: 14px; transition: color .18s ease, background-color .18s ease, transform .18s ease; } .channel-rail nav button:hover { transform: translateX(3px); } .channel-rail nav button[data-active="true"] { background: var(--state-selected); color: var(--text-primary); } .channel-rail[data-locked="true"] nav button, .channel-rail[data-locked="true"] .channel-rail__modules { opacity: .3; filter: saturate(.2); } .channel-rail[data-locked="true"] nav button { cursor: not-allowed; transform: none; } .hololake-home[data-world-open="false"] .channel-rail { border-right-color: rgba(122, 151, 185, .14); background: #07111f; color: #d9e5f2; } .hololake-home[data-world-open="false"] .channel-rail__heading { border-bottom-color: rgba(122, 151, 185, .14); } .hololake-home[data-world-open="false"] .channel-rail__heading small { color: #6f8196; } .hololake-home[data-world-open="false"] .channel-rail__modules { border-color: rgba(122, 151, 185, .14); background: #0a1728; } .hololake-home[data-world-open="false"] .channel-workspace { padding: 0; } .guanghu-login { --guanghu-login-space: none; position: relative; display: grid; min-height: 100%; grid-template-rows: auto 1fr auto; overflow: hidden; color: #dcecff; background: linear-gradient(90deg, rgba(4, 10, 28, .94), rgba(4, 10, 28, .58) 45%, rgba(4, 10, 28, .9)), var(--guanghu-login-space) center / cover; isolation: isolate; } .guanghu-login::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 26% 48%, rgba(44, 152, 215, .18), transparent 28%), radial-gradient(circle at 72% 38%, rgba(116, 83, 196, .16), transparent 34%); content: ''; } .guanghu-login__stars { position: absolute; z-index: -1; inset: 0; opacity: .42; background-image: var(--guanghu-login-space); background-position: center; background-size: cover; mix-blend-mode: screen; animation: guanghu-stars-breathe 8s ease-in-out infinite alternate; } .guanghu-login__header, .guanghu-login__footer { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 22px 34px; border-color: rgba(132, 178, 222, .16); background: rgba(3, 9, 24, .58); backdrop-filter: blur(18px); } .guanghu-login__header { border-bottom: 1px solid rgba(132, 178, 222, .16); } .guanghu-login__header > div { display: flex; align-items: center; gap: 11px; } .guanghu-login__header > div strong { font: 500 15px/1 "Songti SC", Georgia, serif; letter-spacing: .08em; } .guanghu-login__header > span { color: #7593b3; font-size: 11px; letter-spacing: .08em; } .guanghu-login__mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(96, 208, 239, .52); border-radius: 50%; color: #b9f3ff; background: rgba(24, 119, 154, .2); box-shadow: 0 0 24px rgba(62, 192, 229, .24); font: 20px/1 "Songti SC", serif; } .guanghu-login__system { display: grid; width: min(1180px, calc(100% - 72px)); grid-template-columns: minmax(360px, 1fr) minmax(390px, .82fr); align-items: center; gap: clamp(42px, 8vw, 118px); margin: auto; padding: 50px 0; } .guanghu-login__orbit { position: relative; display: grid; width: min(46vw, 510px); aspect-ratio: 1; place-items: center; justify-self: center; } .guanghu-login__orbit img { width: 58%; height: 58%; object-fit: contain; filter: drop-shadow(0 0 34px rgba(69, 177, 235, .42)); animation: guanghu-core-breathe 6s ease-in-out infinite alternate; } .guanghu-login__copy { position: relative; z-index: 2; } .guanghu-login__copy > p:first-child { margin: 0 0 18px; color: #79cfee; font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .22em; } .guanghu-login__copy h1 { max-width: 600px; margin: 0; color: #f4f8ff; font: 500 clamp(42px, 5.5vw, 78px)/1.06 "Songti SC", "STSong", Georgia, serif; letter-spacing: .04em; text-shadow: 0 0 38px rgba(81, 177, 232, .2); } .guanghu-login__copy > p:nth-of-type(2) { max-width: 520px; margin: 24px 0 0; color: #879fb9; font-size: 14px; line-height: 1.85; } .guanghu-login__action { min-width: 278px; height: 50px; justify-content: center; gap: 13px; margin-top: 34px; border: 1px solid rgba(126, 220, 246, .42); color: #061321; background: linear-gradient(105deg, #80ddf3, #a6c6ff); box-shadow: 0 16px 42px rgba(53, 162, 216, .2); font-size: 13px; } .guanghu-login__handoff, .guanghu-login__error { display: grid; max-width: 560px; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 30px; padding: 16px; border: 1px solid rgba(112, 206, 224, .24); border-radius: 12px; background: rgba(8, 24, 45, .72); } .guanghu-login__handoff > svg { color: #7ee0bd; font-size: 25px; } .guanghu-login__handoff > div { display: grid; gap: 4px; } .guanghu-login__handoff strong { font-size: 13px; } .guanghu-login__handoff span, .guanghu-login__handoff code { color: #7890aa; font-size: 11px; } .guanghu-login__handoff button, .guanghu-login__error button { color: #a9dff0; border-color: rgba(118, 207, 235, .25); } .guanghu-login__error { grid-template-columns: 1fr auto; border-color: rgba(236, 112, 132, .3); } .guanghu-login__error strong, .guanghu-login__error span { grid-column: 1; } .guanghu-login__error span { color: #df95a3; font-size: 11px; overflow-wrap: anywhere; } .guanghu-login__error button { grid-column: 2; grid-row: 1 / 3; } .guanghu-login__privacy { display: flex; align-items: center; gap: 8px; max-width: 520px; margin-top: 22px; color: #607891; font-size: 11px; line-height: 1.6; } .guanghu-login__privacy svg { flex: 0 0 auto; color: #73aec2; font-size: 17px; } .guanghu-login__footer { border-top: 1px solid rgba(132, 178, 222, .16); color: #617b96; font-size: 10px; } .guanghu-login__footer > span { display: flex; align-items: center; gap: 8px; } .guanghu-login__footer i { width: 7px; height: 7px; border-radius: 50%; background: #64d6a4; box-shadow: 0 0 10px rgba(100, 214, 164, .7); } .guanghu-login__footer code { color: #57708a; letter-spacing: .08em; } @keyframes guanghu-core-breathe { from { opacity: .84; transform: scale(.985); } to { opacity: 1; transform: scale(1.025); } } @keyframes guanghu-stars-breathe { from { opacity: .28; } to { opacity: .46; } } @media (max-width: 820px) { .guanghu-login__system { width: min(100% - 36px, 620px); grid-template-columns: 1fr; gap: 12px; padding: 24px 0 42px; } .guanghu-login__orbit { width: min(72vw, 340px); } .guanghu-login__copy { text-align: center; } .guanghu-login__copy > p:nth-of-type(2), .guanghu-login__privacy { margin-inline: auto; } .guanghu-login__handoff, .guanghu-login__error { text-align: left; } } @media (prefers-reduced-motion: reduce) { .guanghu-login__stars, .guanghu-login__orbit img { animation: none; } } .channel-rail nav i { width: 8px; height: 8px; border-radius: 999px; background: var(--tag-color); box-shadow: 0 0 10px color-mix(in srgb, var(--tag-color) 55%, transparent); } .channel-rail nav i[data-color="cyan"] { --tag-color: #4fd1c5; }.channel-rail nav i[data-color="blue"] { --tag-color: #60a5fa; }.channel-rail nav i[data-color="violet"] { --tag-color: #a78bfa; }.channel-rail nav i[data-color="amber"] { --tag-color: #fbbf24; }.channel-rail nav i[data-color="rose"] { --tag-color: #fb7185; }.channel-rail nav i[data-color="pink"] { --tag-color: #f472b6; }.channel-rail nav i[data-color="green"] { --tag-color: #4ade80; } .channel-rail__modules { display: grid; gap: 8px; margin-top: auto; padding: 14px 10px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); } .channel-rail__modules span { color: var(--text-muted); font-size: 11px; letter-spacing: .12em; }.channel-rail__modules b { font-size: 14px; font-weight: 550; line-height: 1.55; } .channel-mobile-nav { display: none; } .world-session-bar { display: flex; align-items: center; justify-content: space-between; width: min(1080px, 100%); margin: 0 auto 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border-default); } .world-session-bar__actions { display: flex; align-items: center; gap: 8px; } .world-session-bar__ai { border: 1px solid color-mix(in srgb, var(--world-accent-2) 42%, transparent); background: color-mix(in srgb, var(--world-accent-2) 9%, transparent); } .app:has(.hololake-home) [data-ai-workspace-mode="side"] { border-left-color: color-mix(in srgb, var(--world-accent-2) 35%, var(--sidebar-border)); background: radial-gradient(circle at 80% 8%, color-mix(in srgb, var(--world-accent-2) 12%, transparent), transparent 34%), color-mix(in srgb, var(--sidebar) 94%, transparent); box-shadow: -20px 0 56px color-mix(in srgb, var(--world-bg) 68%, transparent); backdrop-filter: blur(18px); } .world-presence { display: flex; align-items: center; gap: 10px; } .world-presence > i { width: 8px; height: 8px; border-radius: 50%; background: #77d6ad; box-shadow: 0 0 14px color-mix(in srgb, #77d6ad 66%, transparent); } .world-presence > span { display: grid; gap: 2px; } .world-presence strong { font-size: 13px; font-weight: 650; } .world-presence small { color: var(--text-muted); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; } .world-presence--large { min-width: 230px; padding: 14px 18px; border-left: 1px solid color-mix(in srgb, #77d6ad 40%, var(--border-default)); } .world-overview { width: min(980px, 100%); margin: 0 auto; padding: 12px 0 48px; animation: channel-stage-in .24s ease-out; } .world-overview__intro { max-width: 620px; margin: 10px auto 46px; text-align: center; } .world-overview__intro > span { color: #8faed0; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; } .hololake-home .world-overview__intro h1 { margin: 14px 0 0; font-family: ui-serif, 'Songti SC', 'STSong', serif; font-size: clamp(38px, 5vw, 60px); font-weight: 500; letter-spacing: .03em; } .world-overview__intro p { margin: 15px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.8; } .world-overview__map { width: min(780px, 100%); margin: 0 auto; } .world-lighthouse { position: relative; display: flex; align-items: center; gap: 18px; min-height: 96px; padding: 10px 8px 24px; } .world-lighthouse::after { position: absolute; bottom: 0; left: 35px; width: 1px; height: 24px; background: linear-gradient(#9ab7d7, var(--border-default)); content: ''; } .world-lighthouse__signal { position: relative; display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; } .world-lighthouse__signal span { z-index: 1; color: #fff1cc; font-size: 27px; text-shadow: 0 0 16px rgba(255, 239, 195, .5); } .world-lighthouse__signal i { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, #ffe9b0 32%, var(--border-default)); border-radius: 50%; } .world-lighthouse > div:last-child { display: grid; gap: 3px; }.world-lighthouse > div:last-child > span { color: var(--text-muted); font-size: 11px; }.world-lighthouse strong { font-size: 18px; font-weight: 620; }.world-lighthouse small { color: #81bda5; font-size: 11px; } .enterprise-domain-list { position: relative; display: grid; margin-left: 35px; border-left: 1px solid var(--border-default); } .enterprise-domain-list > div { position: relative; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; min-height: 70px; gap: 14px; padding: 10px 8px 10px 26px; border-bottom: 1px solid var(--border-default); } .enterprise-domain-list > div::before { position: absolute; top: 50%; left: -1px; width: 18px; height: 1px; background: var(--border-strong); content: ''; } .enterprise-domain-list i { color: var(--text-muted); font: normal 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.enterprise-domain-list span { display: grid; gap: 4px; }.enterprise-domain-list strong { font-size: 15px; font-weight: 600; }.enterprise-domain-list small { color: var(--text-muted); font-size: 11px; }.enterprise-domain-list b { color: var(--text-muted); font-size: 10px; font-weight: 500; } .world-route-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 16px 35px; color: var(--text-muted); font-size: 10px; letter-spacing: .12em; }.world-route-divider::before, .world-route-divider::after { height: 1px; flex: 1; background: var(--border-default); content: ''; } .fifth-domain-entry { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; width: calc(100% - 35px); gap: 16px; margin-left: 35px; padding: 19px 20px; border: 1px solid color-mix(in srgb, #81b7eb 46%, var(--border-default)); border-radius: 12px; background: linear-gradient(115deg, color-mix(in srgb, var(--surface-card) 94%, #4e8bc4), var(--surface-card)); color: var(--text-primary); text-align: left; cursor: pointer; box-shadow: 0 16px 42px color-mix(in srgb, #000 13%, transparent); transition: border-color .18s ease, transform .18s ease, background-color .18s ease; } .fifth-domain-entry:hover { border-color: #89bee9; transform: translateY(-2px); }.fifth-domain-entry > i { color: #91bde6; font: normal 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.fifth-domain-entry > span { display: grid; gap: 4px; }.fifth-domain-entry strong { font-size: 18px; font-weight: 640; }.fifth-domain-entry small { color: var(--text-secondary); font-size: 11px; }.fifth-domain-entry > b { color: #9ac9f2; font-size: 12px; font-weight: 600; }.fifth-domain-entry em { margin-left: 8px; font-style: normal; } /* Guanghu world is a live topology projection. The SVG positions remain stable while node state and future registry nodes can update independently. */ .hololake-home[data-route="world"][data-world-open="true"] .channel-workspace { overflow: hidden; padding: 0; background: #081226; } .hololake-home[data-route="world"] .world-session-bar { display: none; } .hololake-home[data-route="world"] .channel-rail { border-right-color: rgba(132, 158, 214, .16); color: #e7edff; background: linear-gradient(180deg, #101a37, #0a142c); } .hololake-home[data-route="world"] .channel-rail__heading { border-bottom-color: rgba(132, 158, 214, .15); } .hololake-home[data-route="world"] .channel-rail__heading small { color: #7787a6; } .hololake-home[data-route="world"] .channel-rail nav button { color: #8796b5; } .hololake-home[data-route="world"] .channel-rail nav button:hover { color: #e8eeff; background: rgba(112, 132, 206, .08); } .hololake-home[data-route="world"] .channel-rail nav button[data-active="true"] { color: #eef2ff; background: linear-gradient(90deg, rgba(83, 106, 193, .26), rgba(83, 106, 193, .08)); } .hololake-home[data-route="world"] .channel-rail__modules { border-color: rgba(132, 158, 214, .15); color: #aab7d0; background: rgba(10, 20, 43, .56); } .world-map-shell { --world-map-line: rgba(132, 158, 214, .24); --world-map-surface: rgba(19, 31, 62, .92); display: grid; height: 100%; min-height: 580px; grid-template-columns: minmax(0, 1fr) 286px; grid-template-rows: minmax(0, 1fr) 52px; overflow: hidden; color: #e9efff; background: #081226; } .world-map-canvas { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid rgba(130, 154, 206, .16); isolation: isolate; } .world-map-canvas { scrollbar-color: rgba(113, 134, 192, .55) #081226; scrollbar-width: thin; } .world-map-canvas::-webkit-scrollbar { height: 6px; }.world-map-canvas::-webkit-scrollbar-track { background: #081226; }.world-map-canvas::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(113, 134, 192, .55); } .world-map-canvas::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 42% 52%, rgba(75, 90, 187, .13), transparent 34%), radial-gradient(circle at 72% 40%, rgba(45, 133, 173, .07), transparent 32%), linear-gradient(145deg, #09142a, #071022 72%); content: ''; } .world-map-canvas__grid { position: absolute; z-index: -1; inset: 0; opacity: .26; background-image: linear-gradient(rgba(113, 139, 194, .19) 1px, transparent 1px), linear-gradient(90deg, rgba(113, 139, 194, .19) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent); pointer-events: none; } .world-map-heading { position: absolute; z-index: 3; top: 19px; right: 24px; left: 24px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .world-map-heading > div:first-child { display: grid; gap: 4px; }.hololake-home .world-map-heading h1 { margin: 0; font: 650 14px/1.25 system-ui, -apple-system, "PingFang SC", sans-serif; letter-spacing: .04em; }.world-map-heading span { color: #7989a9; font-size: 10px; } .world-map-heading__presence { display: flex; align-items: center; gap: 7px; }.world-map-heading__presence i { width: 6px; height: 6px; border-radius: 50%; background: #75e4b0; box-shadow: 0 0 10px #75e4b0; } .world-graph { width: 100%; height: 100%; min-height: 520px; overflow: visible; } .world-graph__viewport { transition: transform .28s ease; } .world-graph-edge { fill: none; stroke: var(--world-map-line); stroke-width: 1.35; vector-effect: non-scaling-stroke; } .world-graph-edge[data-status="pending"] { stroke-dasharray: 4 6; opacity: .7; } .world-graph-edge[data-status="restricted"] { stroke: rgba(242, 115, 142, .45); stroke-dasharray: 3 7; } .world-graph-edge[data-status="available"] { stroke: rgba(128, 160, 232, .55); } .world-graph-edge[data-status="online"] { stroke: url("#world-map-live-gradient"); stroke-width: 2; stroke-dasharray: 8 8; filter: url("#world-map-glow"); animation: world-route-flow 2.8s linear infinite; } .world-graph-node { cursor: pointer; outline: none; opacity: 0; animation: world-node-arrive .42s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: calc(var(--node-index, 0) * 45ms); } .world-graph-node:focus-visible .world-graph-node__surface { stroke: #b5c8ff; stroke-width: 2; } .world-graph-node__surface { fill: var(--world-map-surface); stroke: rgba(132, 158, 214, .35); stroke-width: 1; transition: fill .2s ease, stroke .2s ease, filter .2s ease, transform .2s ease; } .world-graph-node:not(.world-graph-node--root):hover .world-graph-node__surface, .world-graph-node[data-selected="true"] .world-graph-node__surface { fill: rgba(29, 44, 84, .98); stroke: rgba(145, 167, 255, .85); filter: drop-shadow(0 0 11px rgba(103, 119, 255, .28)); } .world-graph-node[data-kind="library"] .world-graph-node__surface { fill: rgba(48, 39, 45, .94); stroke: rgba(232, 174, 86, .55); } .world-graph-node[data-kind="library"][data-selected="true"] .world-graph-node__surface { stroke: #eab76a; filter: drop-shadow(0 0 11px rgba(234, 183, 106, .24)); } .world-graph-node[data-status="restricted"] .world-graph-node__surface { stroke: rgba(241, 111, 141, .52); } .world-graph-node__presence { fill: #8393bd; stroke: #101b38; stroke-width: 1.5; } .world-graph-node[data-status="online"] .world-graph-node__presence { fill: #78e5dc; filter: drop-shadow(0 0 5px #78e5dc); animation: world-presence-pulse 2.6s ease-in-out infinite; } .world-graph-node[data-status="restricted"] .world-graph-node__presence { fill: #f06e8d; filter: drop-shadow(0 0 4px rgba(240, 110, 141, .7)); } .world-graph-node[data-kind="library"] .world-graph-node__presence { fill: #e9b364; filter: drop-shadow(0 0 4px rgba(233, 179, 100, .65)); } .world-graph-node__symbol { fill: #7384ad; font: 8px/1 system-ui, sans-serif; } .world-graph-node__label { fill: #e8eeff; font: 600 12px/1 system-ui, -apple-system, "PingFang SC", sans-serif; letter-spacing: .01em; } .world-graph-node__status { fill: #7383a4; font: 8px/1 system-ui, -apple-system, "PingFang SC", sans-serif; } .world-graph-node[data-status="online"] .world-graph-node__status { fill: #72d7cd; } .world-graph-node[data-kind="library"] .world-graph-node__status { fill: #c69355; } .world-graph-node__orbit { fill: none; stroke: rgba(122, 147, 211, .45); } .world-graph-node__orbit--outer { stroke-dasharray: 2 5; animation: world-orbit-spin 28s linear infinite; } .world-graph-node__orbit--inner { stroke: rgba(127, 150, 222, .35); } .world-graph-node--root .world-graph-node__surface { fill: radial-gradient(circle, #243368, #111c3e); fill: rgba(31, 47, 94, .96); stroke: rgba(145, 166, 238, .72); filter: drop-shadow(0 0 22px rgba(91, 107, 211, .25)); } .world-graph-node__root-label { fill: #f0f3ff; font: 650 18px/1 system-ui, -apple-system, "PingFang SC", sans-serif; letter-spacing: .04em; } .world-map-zoom { position: absolute; z-index: 4; bottom: 22px; left: 20px; display: grid; overflow: hidden; border: 1px solid rgba(134, 159, 211, .25); border-radius: 9px; background: rgba(10, 20, 43, .82); backdrop-filter: blur(12px); } .world-map-zoom button, .world-map-zoom span { display: grid; width: 36px; height: 34px; place-items: center; border: 0; border-bottom: 1px solid rgba(134, 159, 211, .16); color: #b9c6e3; background: transparent; font: 12px/1 system-ui, sans-serif; } .world-map-zoom button { cursor: pointer; }.world-map-zoom button:hover:not(:disabled) { color: #fff; background: rgba(114, 138, 211, .12); }.world-map-zoom button:disabled { opacity: .32; cursor: default; }.world-map-zoom span { color: #7182a5; font-size: 8px; } .world-map-legend { position: absolute; z-index: 4; right: 20px; bottom: 22px; display: grid; min-width: 126px; gap: 8px; padding: 13px 14px; border: 1px solid rgba(134, 159, 211, .24); border-radius: 10px; background: rgba(10, 20, 43, .78); backdrop-filter: blur(12px); } .world-map-legend strong { margin-bottom: 2px; color: #aebbd8; font-size: 9px; font-weight: 600; }.world-map-legend span { display: flex; align-items: center; gap: 8px; color: #7283a5; font-size: 8px; }.world-map-legend i { width: 7px; height: 7px; border-radius: 50%; background: #8393bd; }.world-map-legend span[data-status="online"] i { background: #78e5dc; box-shadow: 0 0 7px #78e5dc; }.world-map-legend span[data-status="available"] i { background: #8ba2e1; }.world-map-legend span[data-status="restricted"] i { background: #f06e8d; } .world-node-inspector { display: flex; min-width: 0; flex-direction: column; gap: 20px; overflow-y: auto; padding: 25px 20px 18px; background: linear-gradient(180deg, rgba(15, 27, 56, .98), rgba(9, 18, 39, .98)); } .world-node-inspector > header { display: grid; grid-template-columns: 46px 1fr; align-items: start; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid rgba(132, 158, 214, .17); } .world-node-inspector__symbol { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(135, 155, 232, .52); border-radius: 50%; color: #b7c4ff; background: rgba(95, 86, 193, .12); box-shadow: inset 0 0 14px rgba(121, 103, 241, .12); font-size: 11px; } .world-node-inspector__symbol[data-kind="library"] { border-color: rgba(232, 174, 86, .55); color: #eac078; background: rgba(181, 121, 50, .1); } .world-node-inspector h2 { margin: 2px 0 5px; font-size: 19px; font-weight: 650; }.world-node-inspector header p { margin: 0; color: #7e8dad; font-size: 10px; line-height: 1.6; } .world-node-inspector__state { display: flex; align-items: center; gap: 8px; color: #8393b2; font-size: 10px; }.world-node-inspector__state i { width: 7px; height: 7px; border-radius: 50%; background: #8393bd; }.world-node-inspector__state[data-status="online"] { color: #76ddd3; }.world-node-inspector__state[data-status="online"] i { background: #78e5dc; box-shadow: 0 0 8px #78e5dc; }.world-node-inspector__state[data-status="restricted"] { color: #ef829b; }.world-node-inspector__state[data-status="restricted"] i { background: #f06e8d; } .world-node-inspector dl { display: grid; gap: 0; margin: 0; }.world-node-inspector dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(132, 158, 214, .12); font-size: 9px; }.world-node-inspector dt { color: #637392; }.world-node-inspector dd { min-width: 0; margin: 0; overflow: hidden; color: #a9b6d1; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .world-node-inspector__actions { display: grid; gap: 8px; }.world-node-inspector__actions button { width: 100%; min-height: 40px; justify-content: space-between; border-color: rgba(129, 150, 229, .4); border-radius: 7px; font-size: 10px; }.world-node-inspector__actions button:first-child:not(:disabled) { color: #fff; background: linear-gradient(90deg, #587de0, #695fd8); box-shadow: 0 8px 22px rgba(73, 77, 177, .22); } .world-node-inspector > footer { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(132, 158, 214, .14); color: #61708f; font-size: 8px; }.world-node-inspector > footer span { display: flex; align-items: center; gap: 7px; }.world-node-inspector > footer i { width: 5px; height: 5px; border-radius: 50%; background: #74d5a8; box-shadow: 0 0 7px #74d5a8; } .world-map-status { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(22px, 5vw, 72px); padding: 0 24px; border-top: 1px solid rgba(132, 158, 214, .18); color: #657594; background: rgba(8, 17, 37, .98); font-size: 9px; } .world-map-status span { display: flex; align-items: center; gap: 7px; }.world-map-status span:first-child i { width: 6px; height: 6px; border-radius: 50%; background: #78e5dc; box-shadow: 0 0 8px #78e5dc; }.world-map-status b { color: #a3b1cd; font-weight: 600; } @keyframes world-route-flow { to { stroke-dashoffset: -32; } } @keyframes world-node-arrive { from { opacity: 0; } to { opacity: 1; } } @keyframes world-presence-pulse { 0%, 100% { opacity: .72; } 50% { opacity: 1; } } @keyframes world-orbit-spin { to { transform: rotate(360deg); } } .world-gate { position: absolute; inset: 0; display: grid; min-height: 560px; place-content: center; justify-items: center; overflow: hidden; padding: 48px; text-align: center; isolation: isolate; } .world-gate__atmosphere { position: absolute; z-index: -2; inset: -2%; background: #06101d url('./assets/guanghu-world-entry.jpg') center / cover no-repeat; transform: scale(1.02); animation: world-atmosphere-drift 26s ease-in-out infinite alternate; will-change: transform; } .world-gate::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(2, 9, 18, .1), rgba(2, 8, 17, .2) 52%, rgba(2, 8, 17, .5)); content: ''; pointer-events: none; } .world-gate__sigil { position: relative; display: grid; width: 92px; height: 92px; place-items: center; margin-bottom: 22px; } .world-gate__sigil span { color: #fff6df; font-size: 46px; line-height: 1; text-shadow: 0 0 22px rgba(255, 239, 195, .45); animation: world-sigil-breathe 4.8s ease-in-out infinite; } .world-gate__sigil i { position: absolute; inset: 4px; border: 1px solid rgba(255, 239, 195, .24); border-radius: 50%; } .world-gate__copy { display: grid; justify-items: center; } .world-gate__copy > span { color: #90a7c2; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; } .hololake-home .world-gate__copy h1 { margin: 15px 0 0; color: #edf4ff; font-family: ui-serif, 'Songti SC', 'STSong', serif; font-size: clamp(32px, 3.4vw, 46px); font-weight: 500; line-height: 1.15; letter-spacing: .02em; } .world-gate__copy p { max-width: 520px; margin: 14px 0 0; color: #9cadc1; font-size: 14px; line-height: 1.8; } .world-gate__enter { min-width: 236px; height: 48px; gap: 11px; margin-top: 30px; border: 1px solid rgba(178, 215, 255, .6); border-radius: 9px; background: linear-gradient(180deg, rgba(119, 174, 229, .86), rgba(67, 119, 177, .9)); color: #fff; box-shadow: 0 12px 34px rgba(13, 56, 101, .35), inset 0 1px rgba(255,255,255,.24); font-size: 15px; } .world-gate__enter:hover { background: linear-gradient(180deg, rgba(137, 190, 239, .94), rgba(76, 132, 194, .96)); transform: translateY(-1px); } .world-gate__progress { display: flex; align-items: center; gap: 10px; margin-top: 30px; color: #b8c8d9; font-size: 13px; } .world-gate__progress i { width: 14px; height: 14px; border: 1.5px solid rgba(184, 200, 217, .28); border-top-color: #cbe7ff; border-radius: 50%; animation: spin .8s linear infinite; } .world-gate__error { display: grid; max-width: 560px; gap: 6px; margin-top: 18px; padding: 12px 16px; border: 1px solid rgba(248, 113, 113, .28); border-radius: 8px; background: rgba(47, 14, 22, .58); color: #fca5a5; font-size: 12px; text-align: left; } .world-gate__error code { overflow-wrap: anywhere; color: #c7b7bd; font-size: 10px; } .world-gate__path { display: flex; align-items: center; gap: 8px; margin-top: 44px; color: #8294a9; font-size: 11px; } .world-gate__path span { margin-right: 3px; color: #64778e; }.world-gate__path b { color: #a9b7c7; font-weight: 550; }.world-gate__path code { color: #a4bdd7; font-size: 10px; } .node-page__heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 34px; } .node-page__heading .channel-stage__lead { margin-bottom: 0; } .node-page__content { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr); gap: 28px; align-items: start; } .node-page__primary { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--border-strong); } .node-page__primary > span { color: var(--text-muted); font-size: 11px; }.node-page__primary > strong { margin-top: 16px; font: 500 28px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }.node-page__primary > p { margin: 0 0 18px; color: var(--text-secondary); } .node-page__primary dl { display: grid; gap: 0; margin: 0 0 18px; }.node-page__primary dl div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border-default); font-size: 12px; }.node-page__primary dt { color: var(--text-muted); }.node-page__primary dd { margin: 0; } .node-page__content > .guanghu-router-console { margin: 0; padding: 24px 0 0; border-top: 1px solid var(--border-strong); } .hololake-home__hero { position: relative; max-width: 740px; padding: 24px 0 56px; overflow: hidden; } .hololake-home__halo { position: absolute; right: -80px; top: -140px; width: 300px; aspect-ratio: 1; border: 1px solid var(--border-default); border-radius: 50%; opacity: .45; } .hololake-home__eyebrow, .hololake-home__section-head span { color: var(--accent-blue); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .hololake-home h1 { position: relative; margin: 18px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(52px, 7vw, 92px); font-weight: 500; line-height: .95; letter-spacing: -.06em; } .hololake-home h1 em { color: #9cc7ff; font-style: italic; font-weight: 400; } .hololake-home__lead { margin: 20px 0 0; font-size: 18px; letter-spacing: .16em; } .hololake-home__copy { max-width: 560px; margin: 16px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.8; } .hololake-home__actions { display: flex; align-items: center; gap: 18px; margin-top: 30px; } .hololake-home__primary { padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--accent-blue); color: var(--text-inverse); font-weight: 650; cursor: pointer; } .hololake-home__primary span, .hololake-module button span { margin-left: 12px; } .hololake-home__status { color: var(--text-secondary); font-size: 12px; }.hololake-home__status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent-green); } .hololake-home__signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .hololake-home__module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .hololake-home__signal-grid article, .hololake-module { border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-card); } .hololake-home__signal-grid article { padding: 18px; }.hololake-home__signal-grid span, .hololake-home__signal-grid small { display: block; color: var(--text-secondary); font-size: 11px; }.hololake-home__signal-grid strong { display: block; margin: 10px 0 6px; font-size: 15px; } .hololake-home__modules { margin-top: 44px; }.hololake-home__section-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 14px; }.hololake-home__section-head p { margin: 0; color: var(--text-secondary); font-size: 13px; } .hololake-module { min-height: 185px; padding: 20px; display: flex; flex-direction: column; }.hololake-module__number { color: var(--accent-blue); font-family: monospace; font-size: 12px; }.hololake-module h2 { margin: auto 0 8px; font-size: 20px; font-weight: 600; }.hololake-module p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }.hololake-module button { margin-top: 19px; padding: 0; border: 0; color: var(--accent-blue); background: transparent; text-align: left; font: inherit; cursor: pointer; }.hololake-module__soon { margin-top: 19px; color: var(--text-muted); font-size: 12px; } .channel-breadcrumb { display: flex; align-items: center; min-height: 34px; margin-bottom: 34px; color: var(--text-muted); } .channel-breadcrumb button { padding-inline: 8px; color: var(--text-secondary); } .channel-breadcrumb span { color: var(--border-strong); } .channel-stage { width: min(1080px, 100%); margin: 0 auto; animation: channel-stage-in .24s ease-out; } .channel-stage--root { position: relative; display: flex; min-height: min(680px, calc(100vh - 180px)); flex-direction: column; justify-content: center; isolation: isolate; } .channel-stage__aurora { position: absolute; z-index: -1; top: 50%; left: 36%; width: min(720px, 72vw); height: min(720px, 72vw); border-radius: 50%; background: radial-gradient(circle at 36% 42%, color-mix(in srgb, var(--accent-blue) 26%, transparent), transparent 34%), radial-gradient(circle at 68% 58%, color-mix(in srgb, #a78bfa 18%, transparent), transparent 42%); filter: blur(14px); opacity: .72; transform: translate(-50%, -50%); animation: channel-aurora-breathe 8s ease-in-out infinite alternate; pointer-events: none; } .channel-root-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); align-items: center; gap: clamp(34px, 6vw, 84px); } .channel-root-hero { min-width: 0; } .channel-root-actions { display: flex; flex-wrap: wrap; gap: 10px; } .channel-root-map { overflow: hidden; border: 1px solid color-mix(in srgb, var(--border-strong) 72%, var(--accent-blue)); border-radius: 22px; background: linear-gradient(155deg, color-mix(in srgb, var(--surface-card) 92%, var(--accent-blue)), color-mix(in srgb, var(--surface-panel) 96%, transparent)); box-shadow: 0 32px 90px color-mix(in srgb, #000 22%, transparent), inset 0 1px color-mix(in srgb, #fff 9%, transparent); backdrop-filter: blur(24px); transition: border-color .28s ease, background-color .28s ease, box-shadow .28s ease, transform .28s ease; } .channel-root-map:hover { transform: translateY(-4px); box-shadow: 0 38px 105px color-mix(in srgb, #000 26%, transparent), inset 0 1px color-mix(in srgb, #fff 11%, transparent); } .channel-root-map header { display: grid; gap: 7px; padding: 24px 24px 19px; border-bottom: 1px solid var(--border-default); } .channel-root-map header span { color: var(--accent-blue); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; } .channel-root-map header b { font-size: 24px; letter-spacing: -.02em; } .channel-root-map header small { color: var(--text-muted); font-size: 13px; line-height: 1.55; } .channel-root-map__route { position: relative; display: grid; gap: 3px; padding: 14px; } .channel-root-map__route::before { position: absolute; top: 38px; bottom: 38px; left: 36px; width: 1px; background: linear-gradient(var(--accent-blue), #a78bfa, #fb7185); opacity: .45; content: ''; } .channel-root-map__route button { position: relative; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 16px 13px; border: 0; border-radius: 12px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; transition: background-color .18s ease, transform .18s ease; } .channel-root-map__route button:hover { background: var(--state-hover); transform: translateX(5px); } .channel-root-map__route button > i { z-index: 1; width: 9px; height: 9px; border: 2px solid var(--surface-card); border-radius: 50%; background: var(--map-dot); box-shadow: 0 0 13px var(--map-dot); } .channel-root-map__route i[data-color="blue"] { --map-dot: #60a5fa; }.channel-root-map__route i[data-color="violet"] { --map-dot: #a78bfa; }.channel-root-map__route i[data-color="rose"] { --map-dot: #fb7185; } .channel-root-map__route button span { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; } .channel-root-map__route button span small { color: var(--text-muted); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .channel-root-map__route button b { color: var(--text-muted); font-size: 12px; font-weight: 500; } .channel-root-map footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px solid var(--border-default); color: var(--text-muted); font-size: 10px; } .channel-root-map footer span { display: flex; align-items: center; gap: 7px; }.channel-root-map footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 9px var(--accent-green); }.channel-root-map footer code { color: var(--accent-blue); font-size: 9px; } .channel-stage__eyebrow, .channel-card__eyebrow { color: var(--accent-blue); font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; } .channel-stage h1 { max-width: 820px; margin: 12px 0 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(44px, 6vw, 78px); font-weight: 500; line-height: 1; letter-spacing: -.055em; } .channel-stage__lead { max-width: 720px; margin: 24px 0 36px; color: var(--text-secondary); font-size: 17px; line-height: 1.8; } .channel-stage--root .hololake-home__primary { margin-top: 8px; } .channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .channel-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .channel-card { display: flex; min-height: 240px; flex-direction: column; padding: 26px; border: 1px solid var(--border-default); border-radius: 16px; background: linear-gradient(145deg, var(--surface-card), color-mix(in srgb, var(--surface-card) 92%, var(--accent-blue))); box-shadow: 0 8px 28px color-mix(in srgb, #000 7%, transparent); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .channel-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-blue) 55%, var(--border-default)); box-shadow: 0 18px 42px color-mix(in srgb, #000 14%, transparent); } .channel-card h2 { margin: auto 0 10px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; } .channel-card p { min-height: 46px; margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.75; } .channel-card button { align-self: flex-start; margin-top: 20px; padding: 0; color: var(--accent-blue); } .channel-card__status { margin-top: 20px; color: var(--text-muted); font-size: 12px; } .channel-stage__tools { display: flex; gap: 10px; margin-top: 18px; } .server-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .server-card { padding: 20px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card); } .server-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.server-card__head code { color: var(--accent-blue); font-size: 11px; }.server-card__head span { padding: 3px 7px; border-radius: 999px; background: var(--surface-panel); color: var(--text-muted); font-size: 10px; }.server-card__head span[data-tone="online"] { background: color-mix(in srgb, var(--accent-green) 18%, transparent); color: var(--accent-green); } .server-card h2 { margin: 28px 0 6px; font-size: 18px; }.server-card > p { margin: 0 0 22px; color: var(--text-secondary); font-size: 12px; }.server-card dl { display: grid; gap: 8px; margin: 0 0 20px; }.server-card dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }.server-card dt { color: var(--text-muted); }.server-card dd { margin: 0; color: var(--text-secondary); }.server-card button { width: 100%; font-size: 11px; } .guanghu-router-console { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-default); }.guanghu-router-console > p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.6; }.guanghu-router-console__status { display: flex; align-items: center; gap: 8px; font-size: 12px; }.guanghu-router-console__status > span { width: 8px; height: 8px; padding: 0; border-radius: 999px; background: var(--text-muted); }.guanghu-router-console__status > span[data-state="online"] { background: var(--accent-green); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-green) 55%, transparent); }.guanghu-router-console__status > span[data-state="connecting"] { background: var(--accent-blue); }.guanghu-router-console__status > span[data-state="error"] { background: var(--accent-red); }.guanghu-router-console__error { display: grid; gap: 6px; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent-red) 35%, var(--border-default)); border-radius: 8px; color: var(--accent-red); font-size: 11px; }.guanghu-router-console__error code { overflow-wrap: anywhere; color: var(--text-secondary); }.guanghu-router-console__receipt { padding: 10px; border-radius: 8px; background: var(--surface-panel); }.guanghu-router-console__receipt dd { max-width: 65%; overflow-wrap: anywhere; text-align: right; }.guanghu-router-console__broadcast { display: grid; gap: 10px; padding-top: 4px; }.guanghu-router-console__broadcast > header { display: flex; align-items: center; justify-content: space-between; }.guanghu-router-console__broadcast > header span { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: var(--surface-panel); text-align: center; font-size: 10px; }.guanghu-router-console__broadcast > p { margin: 0; color: var(--text-muted); font-size: 11px; }.guanghu-router-console__broadcast article { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-panel); }.guanghu-router-console__broadcast article > div { display: flex; justify-content: space-between; gap: 8px; }.guanghu-router-console__broadcast article > p { margin: 0; color: var(--text-secondary); font-size: 11px; } .guanghu-router-console__repositories { display: grid; gap: 10px; padding-top: 4px; }.guanghu-router-console__repositories > header { display: grid; gap: 3px; }.guanghu-router-console__repositories > header span { color: var(--text-muted); font-size: 10px; }.guanghu-router-console__repositories article { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-panel); }.guanghu-router-console__repositories article > code { overflow-wrap: anywhere; color: var(--text-muted); font-size: 9px; }.guanghu-router-console__repositories article > p { margin: 0; overflow-wrap: anywhere; color: var(--text-secondary); font-size: 10px; }.guanghu-router-console__repositories article > div { display: flex; gap: 8px; flex-wrap: wrap; } .persona-route-list { display: grid; gap: 12px; max-width: 820px; margin: 0; padding: 0; list-style: none; } .persona-route-list li { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 18px; padding: 20px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--surface-card); } .persona-route-list code { color: var(--accent-blue); font-size: 11px; } .persona-route-list strong { font-size: 15px; } .persona-route-list span { color: var(--text-muted); } @keyframes channel-stage-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes channel-aurora-breathe { from { opacity: .56; transform: translate(-52%, -50%) scale(.96); } to { opacity: .82; transform: translate(-48%, -50%) scale(1.06); } } @keyframes world-atmosphere-drift { from { transform: scale(1.02) translate3d(-.35%, 0, 0); } to { transform: scale(1.045) translate3d(.35%, -.25%, 0); } } @keyframes world-sigil-breathe { 0%, 100% { opacity: .78; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .channel-stage, .channel-stage__aurora, .channel-card, .channel-root-map, .channel-root-map__route button, .channel-rail nav button, .world-overview, .fifth-domain-entry, .world-graph-edge, .world-graph-node, .world-graph-node__presence, .world-graph-node__orbit, .world-gate__atmosphere, .world-gate__sigil span, .world-gate__progress i { animation: none; transition: none; } } .guanghu-architecture { max-width: min(760px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); overflow: auto; background: var(--surface-card); color: var(--text-primary); } .guanghu-architecture__routes { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; } .guanghu-architecture__routes li { display: grid; grid-template-columns: minmax(128px, auto) 1fr; gap: 16px; padding: 14px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-app); } .guanghu-architecture__routes code { align-self: start; color: var(--accent-blue); font-size: 11px; } .guanghu-architecture__routes strong { font-size: 14px; }.guanghu-architecture__routes p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.65; } .guanghu-architecture__route { overflow-x: auto; margin: 2px 0 0; padding: 12px; border-radius: 6px; color: var(--text-secondary); background: var(--surface-app); font: 11px/1.6 monospace; white-space: nowrap; } @media (max-width: 1000px) { .server-grid { grid-template-columns: 1fr; }.node-page__content { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .world-map-shell { grid-template-columns: minmax(0, 1fr) 244px; } .world-node-inspector { padding-inline: 16px; } .world-node-inspector > header { grid-template-columns: 38px 1fr; gap: 10px; } .world-node-inspector__symbol { width: 36px; height: 36px; } } @media (max-width: 1050px) { .channel-root-layout { grid-template-columns: 1fr; }.channel-root-map { width: min(580px, 100%); }.channel-stage--root { padding-block: 30px; } } @media (max-width: 900px) { .channel-grid--three { grid-template-columns: 1fr; }.channel-card { min-height: 190px; }.channel-rail { width: 190px; flex-basis: 190px; } } @media (max-width: 780px) { .hololake-bar { height: calc(52px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-inline: 16px 12px; } .hololake-bar__brand { font-size: 15px; }.hololake-bar__context { display: none; }.hololake-theme-nav { min-width: 0; width: 138px; } .app { min-height: 0; } .hololake-home__signal-grid, .hololake-home__module-grid, .channel-grid { grid-template-columns: 1fr; } .hololake-home { padding-bottom: calc(70px + env(safe-area-inset-bottom)); } .channel-workspace { padding: 20px 18px 32px; }.channel-rail { display: none; }.channel-breadcrumb { margin-bottom: 18px; overflow-x: auto; }.channel-stage h1 { font-size: clamp(38px, 12vw, 52px); }.channel-stage__lead { margin: 16px 0 24px; }.channel-stage--root { min-height: calc(100dvh - 190px); }.channel-root-map__route button { grid-template-columns: 16px 1fr; }.channel-root-map__route button > b { display: none; }.channel-card { min-height: 180px; padding: 20px; }.channel-grid--three { grid-template-columns: 1fr; }.server-grid { grid-template-columns: 1fr; }.world-gate { padding: 28px 20px; }.world-gate__path { flex-wrap: wrap; justify-content: center; }.node-page__heading { display: grid; }.world-session-bar { margin-bottom: 18px; }.world-overview__intro { margin-bottom: 28px; }.enterprise-domain-list { margin-left: 16px; }.fifth-domain-entry { width: calc(100% - 16px); margin-left: 16px; grid-template-columns: 34px 1fr; }.fifth-domain-entry > b { grid-column: 2; }.world-route-divider { margin-left: 16px; } .channel-mobile-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-sidebar) 92%, transparent); backdrop-filter: blur(18px); } .channel-mobile-nav button { display: grid; height: 48px; min-width: 0; place-items: center; gap: 0; padding: 2px; color: var(--text-muted); }.channel-mobile-nav button[data-active="true"] { color: var(--accent-blue); }.channel-mobile-nav span { font-size: 18px; line-height: 1; }.channel-mobile-nav small { font-size: 9px; } .channel-dock { width: 48px; flex-basis: 48px; padding-inline: 4px; }.channel-dock button { width: 40px; } } @media (max-width: 780px) { .hololake-home[data-route="world"] { padding-bottom: 0; } .hololake-home[data-route="world"] .channel-mobile-nav { display: none; } .world-map-shell { min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(430px, 1fr) auto 44px; overflow-y: auto; } .world-map-canvas { min-height: 430px; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(132, 158, 214, .16); } .world-map-canvas__grid, .world-map-heading, .world-map-zoom { position: sticky; left: 0; } .world-map-canvas__grid { position: absolute; } .world-graph { min-width: 720px; min-height: 430px; } .world-map-heading { right: 14px; left: 14px; } .world-map-heading > div:first-child span, .world-map-legend { display: none; } .world-node-inspector { max-height: 310px; padding: 18px; } .world-node-inspector dl { grid-template-columns: 1fr; } .world-node-inspector > footer { display: none; } .world-map-status { position: sticky; bottom: 0; gap: 22px; overflow-x: auto; padding-inline: 16px; white-space: nowrap; } .world-map-zoom { bottom: 14px; left: 12px; grid-template-columns: repeat(4, 32px); } .world-map-zoom button, .world-map-zoom span { width: 32px; height: 32px; border-right: 1px solid rgba(134, 159, 211, .16); border-bottom: 0; } } @media (max-width: 700px) { body.mac-chrome .hololake-bar { padding-left: 84px; }.hololake-bar__line { display: none; } } .app { display: flex; flex: 1; min-height: 0; overflow: hidden; } .app__sidebar { flex: 0 0 auto; min-width: 220px; display: flex; flex-direction: column; background: var(--surface-sidebar); } .app__sidebar > * { flex: 1; } .app:has(.app__note-list) .app__sidebar > * { border-right-color: transparent; } .app__note-list { flex: 0 0 auto; min-width: 220px; display: flex; flex-direction: column; position: relative; z-index: 20; background: var(--surface-sidebar); } .app__note-list > * { flex: 1; border-left: 1px solid var(--sidebar-border); } .app__editor { flex: 1; min-width: 480px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; container-name: editor; background: var(--surface-editor); } .app__editor > * { flex: 1; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes tab-status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .tab-status-pulse { animation: tab-status-pulse 1.2s ease-in-out infinite; } /* AI highlight animation — applied by useAiActivity when MCP calls ui_highlight */ @keyframes ai-highlight-glow { 0% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-blue) 80%, transparent); } 50% { box-shadow: inset 0 0 8px 2px color-mix(in srgb, var(--accent-blue) 40%, transparent); } 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-blue) 0%, transparent); } } .ai-highlight { animation: ai-highlight-glow 0.8s ease-out; } /* Guanghu world design system v2 The shell, topology canvas, inspector and theme picker share the active Guanghu semantic palette instead of forcing a separate midnight skin. */ .hololake-home { --world-bg: var(--surface-app); --world-sidebar: var(--surface-sidebar); --world-panel: var(--surface-panel); --world-surface: var(--surface-card); --world-surface-strong: color-mix(in srgb, var(--surface-card) 86%, var(--accent-blue)); --world-text: var(--text-primary); --world-muted: var(--text-secondary); --world-faint: var(--text-muted); --world-border: color-mix(in srgb, var(--border-default) 76%, var(--accent-blue)); --world-border-strong: color-mix(in srgb, var(--border-strong) 58%, var(--accent-blue)); --world-accent: var(--accent-blue); --world-accent-2: color-mix(in srgb, var(--accent-blue) 56%, #9d7cff); --world-live: var(--accent-green); --world-warm: #d89b43; --world-danger: #e86f86; --world-grid: color-mix(in srgb, var(--accent-blue) 12%, transparent); color: var(--world-text); background: var(--world-bg); } .app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) .hololake-bar { border-bottom-color: var(--world-border); color: var(--world-text); background: var(--world-panel); } .app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) .hololake-bar__context { color: var(--world-muted); } .app-shell:has(.hololake-home[data-route="world"][data-world-open="true"]) [data-testid="status-bar"] { border-top-color: var(--world-border) !important; color: var(--world-muted) !important; background: var(--world-panel) !important; } /* Compact theme gallery: six coherent worlds, no scrolling white sheet. */ .hololake-theme-nav { min-width: 158px; grid-template-columns: 8px minmax(0, 1fr) 14px; gap: 9px; padding: 6px 9px; border-color: var(--border-default); border-radius: 9px; background: color-mix(in srgb, var(--surface-card) 82%, transparent); } .hololake-theme-nav small { font-size: 10px; letter-spacing: .04em; } .hololake-theme-nav strong { font-size: 13px; } .hololake-theme-menu { width: 354px; max-height: none; padding: 12px; border-color: var(--world-border-strong); border-radius: 13px; color: var(--text-primary); background: color-mix(in srgb, var(--surface-panel) 94%, transparent); box-shadow: 0 20px 58px color-mix(in srgb, #000 26%, transparent); backdrop-filter: blur(20px); } .hololake-theme-menu > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 3px 4px 12px; border-bottom: 0; } .hololake-theme-menu > header strong { font-size: 16px; } .hololake-theme-menu > header small { font-size: 11px; } .hololake-theme-menu [role="group"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 0; } .hololake-theme-menu__item { display: grid; min-height: 88px; grid-template-columns: 1fr; align-content: end; gap: 9px; overflow: hidden; padding: 7px; border-color: var(--border-default); border-radius: 9px; background: color-mix(in srgb, var(--surface-card) 86%, transparent); } .hololake-theme-menu__item > .hololake-theme-menu__preview { display: block; width: 100%; height: 42px; border: 1px solid color-mix(in srgb, #fff 13%, transparent); border-radius: 6px; background: linear-gradient(var(--preview-grid) 1px, transparent 1px), linear-gradient(90deg, var(--preview-grid) 1px, transparent 1px), radial-gradient(circle at 72% 28%, var(--preview-glow), transparent 42%), var(--preview-bg); background-size: 16px 16px, 16px 16px, auto, auto; box-shadow: none; } .hololake-theme-menu__item > span:not([data-slot]) { display: block; } .hololake-theme-menu__item strong { display: block; overflow: hidden; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; } .hololake-theme-menu__item:focus, .hololake-theme-menu__item[data-state="checked"] { border-color: var(--accent-blue); background: var(--state-selected); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-blue) 35%, transparent); } .hololake-theme-menu__item [data-slot="dropdown-menu-item-indicator"] { top: 10px; right: 10px; left: auto; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: white; background: var(--accent-blue); } .hololake-theme-menu__preview[data-tone="sky"] { --preview-bg: #edf7fc; --preview-grid: rgba(44,111,166,.13); --preview-glow: rgba(71,164,218,.28); } .hololake-theme-menu__preview[data-tone="cyan"] { --preview-bg: #17232b; --preview-grid: rgba(114,183,214,.12); --preview-glow: rgba(72,197,208,.28); } .hololake-theme-menu__preview[data-tone="aurora"] { --preview-bg: #07181f; --preview-grid: rgba(78,226,208,.12); --preview-glow: rgba(34,211,238,.34); } .hololake-theme-menu__preview[data-tone="indigo"] { --preview-bg: #0d1024; --preview-grid: rgba(145,164,255,.13); --preview-glow: rgba(145,116,255,.34); } .hololake-theme-menu__preview[data-tone="gold"] { --preview-bg: #fff8e9; --preview-grid: rgba(166,106,22,.13); --preview-glow: rgba(237,180,72,.3); } .hololake-theme-menu__preview[data-tone="green"] { --preview-bg: #f2f7ef; --preview-grid: rgba(79,123,72,.13); --preview-glow: rgba(91,159,82,.28); } /* World entrance: a theme-aware operating-system gate, not a fixed poster. */ .hololake-home[data-world-open="false"] .channel-rail { border-right-color: var(--world-border); color: var(--world-text); background: var(--world-sidebar); } .hololake-home[data-world-open="false"] .channel-rail__heading { border-bottom-color: var(--world-border); } .hololake-home[data-world-open="false"] .channel-rail__heading small { color: var(--world-faint); } .hololake-home[data-world-open="false"] .channel-rail__modules { border-color: var(--world-border); color: var(--world-text); background: var(--world-surface); } .world-gate { color: var(--world-text); background: var(--world-bg); } .world-gate__atmosphere { inset: 0; background: radial-gradient(circle at 54% 47%, color-mix(in srgb, var(--world-accent) 20%, transparent), transparent 28%), radial-gradient(circle at 72% 61%, color-mix(in srgb, var(--world-accent-2) 10%, transparent), transparent 34%), linear-gradient(var(--world-grid) 1px, transparent 1px), linear-gradient(90deg, var(--world-grid) 1px, transparent 1px), var(--world-bg); background-size: auto, auto, 52px 52px, 52px 52px, auto; transform: none; animation: none; } .world-gate::before { position: absolute; z-index: -1; width: min(740px, 72vw); height: 1px; background: linear-gradient(90deg, transparent, var(--world-border-strong), transparent); box-shadow: -180px -100px 0 -0.25px var(--world-border), 190px 104px 0 -0.25px var(--world-border); content: ''; transform: rotate(-13deg); } .world-gate::after { background: radial-gradient(circle at center, transparent 0 34%, color-mix(in srgb, var(--world-bg) 84%, transparent) 70%); } .world-gate__sigil { width: 74px; height: 74px; margin-bottom: 18px; } .world-gate__sigil span { color: var(--world-accent); font-size: 34px; text-shadow: 0 0 24px color-mix(in srgb, var(--world-accent) 45%, transparent); } .world-gate__sigil i { border-color: color-mix(in srgb, var(--world-accent) 34%, transparent); } .world-gate__copy > span { display: none; } .hololake-home .world-gate__copy h1 { margin: 0; color: var(--world-text); font-family: system-ui, -apple-system, "PingFang SC", sans-serif; font-size: clamp(34px, 3.2vw, 48px); font-weight: 680; letter-spacing: -.035em; } .world-gate__copy p { max-width: 560px; color: var(--world-muted); font-size: 16px; line-height: 1.7; } .world-gate__enter { min-width: 214px; height: 48px; border-color: color-mix(in srgb, var(--world-accent) 60%, var(--world-border)); border-radius: 9px; color: var(--text-inverse); background: var(--world-accent); box-shadow: 0 12px 34px color-mix(in srgb, var(--world-accent) 22%, transparent); font-size: 15px; } .world-gate__enter:hover { background: var(--accent-blue-hover); } .world-gate__path { margin-top: 30px; color: var(--world-faint); font-size: 13px; } .world-gate__path span { color: var(--world-faint); } .world-gate__path b { color: var(--world-muted); } /* Closed world: keep the local HoloLake navigation available while the receipt-gated Fifth Domain remains closed. */ .hololake-home[data-world-open="false"] .channel-workspace { overflow: hidden; padding: 0; background: var(--world-bg); } .world-gate { position: absolute; inset: 0; display: block; min-height: 560px; overflow: hidden; padding: 0; color: var(--world-text); text-align: left; background: radial-gradient(circle at 50% 49%, color-mix(in srgb, var(--world-accent) 12%, transparent), transparent 31%), var(--world-bg); isolation: isolate; } .world-gate::before, .world-gate::after { pointer-events: none; } .world-gate::before { position: absolute; z-index: 1; inset: 0; width: auto; height: auto; background: radial-gradient(circle at 50% 49%, transparent 0 14%, color-mix(in srgb, var(--world-bg) 8%, transparent) 32%, color-mix(in srgb, var(--world-bg) 62%, transparent) 78%), linear-gradient(180deg, color-mix(in srgb, var(--world-bg) 14%, transparent), color-mix(in srgb, var(--world-bg) 36%, transparent)); box-shadow: none; content: ''; transform: none; } .world-gate::after { position: absolute; z-index: 2; inset: 0; background: repeating-radial-gradient(circle at 50% 49%, transparent 0 108px, color-mix(in srgb, var(--world-accent) 8%, transparent) 109px, transparent 110px 164px); content: ''; opacity: .58; } .world-gate__space { position: absolute; z-index: 0; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: .56; filter: saturate(.76) hue-rotate(var(--world-hue-rotate, 0deg)); animation: world-gate-space-drift 34s ease-in-out infinite alternate; } .world-gate__stars { position: absolute; z-index: 3; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--world-accent) 68%, white) 0 1px, transparent 1.7px), radial-gradient(circle, color-mix(in srgb, var(--world-accent-2) 56%, white) 0 1px, transparent 1.5px); background-position: 0 0, 37px 53px; background-size: 137px 121px, 181px 163px; opacity: .22; mask-image: radial-gradient(circle at 50% 49%, black, transparent 86%); animation: world-gate-stars 8s ease-in-out infinite alternate; } .world-gate__routes { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .world-gate__routes path { fill: none; stroke: color-mix(in srgb, var(--world-accent) 32%, transparent); stroke-width: 1.35; stroke-dasharray: 3 11; vector-effect: non-scaling-stroke; } .world-gate__routes .world-gate__route-pulse { stroke: color-mix(in srgb, var(--world-accent-2) 76%, white); stroke-width: 1.8; stroke-dasharray: 1 150; stroke-linecap: round; filter: drop-shadow(0 0 7px var(--world-accent-2)); animation: world-gate-route-pulse 5.5s linear infinite; } .world-gate__constellation { position: absolute; z-index: 6; display: grid; justify-items: center; color: var(--world-muted); pointer-events: none; transform: translate(-50%, -50%); } .world-gate__constellation img { width: clamp(100px, 10vw, 154px); height: auto; opacity: .23; filter: grayscale(.18) saturate(.62) hue-rotate(var(--world-hue-rotate, 0deg)); animation: world-gate-dormant-breathe 7s ease-in-out infinite; } .world-gate__constellation span { margin-top: -14px; color: color-mix(in srgb, var(--world-text) 64%, transparent); font-size: 14px; font-weight: 620; letter-spacing: .04em; } .world-gate__constellation small { margin-top: 5px; color: var(--world-faint); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; } .world-gate__constellation--lighthouse { top: 29%; left: 15%; } .world-gate__constellation--zero { top: 72%; left: 19%; } .world-gate__constellation--zero img { width: clamp(88px, 8vw, 126px); animation-delay: -2.4s; } .world-gate__constellation--fifth { top: 45%; left: 85%; } .world-gate__constellation--fifth img { width: clamp(190px, 20vw, 310px); opacity: .27; animation-delay: -4.1s; } .world-gate__constellation--fifth span { margin-top: -34px; } .world-gate__core { position: absolute; z-index: 8; top: 49%; left: 50%; display: grid; width: min(440px, 56vw); min-height: 390px; place-items: center; align-content: center; transform: translate(-50%, -50%); } .world-gate__core > img { position: absolute; z-index: -1; width: min(390px, 48vw); height: auto; opacity: .58; filter: saturate(.9) hue-rotate(var(--world-hue-rotate, 0deg)) drop-shadow(0 0 28px color-mix(in srgb, var(--world-accent) 30%, transparent)); animation: world-gate-core-breathe 6s ease-in-out infinite; } .world-gate__copy { z-index: 1; display: grid; justify-items: center; text-align: center; } .world-gate__copy > span { display: block; color: color-mix(in srgb, var(--world-accent) 72%, white); font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-shadow: 0 0 14px color-mix(in srgb, var(--world-accent) 28%, transparent); } .hololake-home .world-gate__copy h1 { margin: 13px 0 0; color: var(--world-text); font-family: system-ui, -apple-system, "PingFang SC", sans-serif; font-size: clamp(34px, 3.5vw, 52px); font-weight: 650; line-height: 1.08; letter-spacing: .1em; text-indent: .1em; text-shadow: 0 2px 28px color-mix(in srgb, var(--world-bg) 80%, transparent); } .world-gate__copy p { margin: 13px 0 0; color: var(--world-muted); font-size: 13px; line-height: 1.6; letter-spacing: .08em; } .world-gate__enter { z-index: 1; min-width: 196px; height: 42px; gap: 10px; margin-top: 31px; border: 1px solid color-mix(in srgb, var(--world-accent) 52%, transparent); border-radius: 999px; color: var(--world-text); background: color-mix(in srgb, var(--world-surface) 70%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--world-accent) 12%, transparent), inset 0 1px color-mix(in srgb, white 12%, transparent); backdrop-filter: blur(12px); font-size: 13px; letter-spacing: .04em; } .world-gate__enter:hover { border-color: color-mix(in srgb, var(--world-accent) 78%, white); color: white; background: color-mix(in srgb, var(--world-accent) 30%, var(--world-surface)); box-shadow: 0 0 34px color-mix(in srgb, var(--world-accent) 24%, transparent); transform: translateY(-1px); } .world-gate__progress { z-index: 1; margin-top: 31px; color: var(--world-muted); font-size: 12px; } .world-gate__progress i { border-color: color-mix(in srgb, var(--world-accent) 20%, transparent); border-top-color: var(--world-accent); } .world-gate__error { position: absolute; z-index: 10; bottom: 82px; left: 24px; max-width: min(360px, calc(100vw - 48px)); margin: 0; border-color: color-mix(in srgb, #fb7185 30%, var(--world-border)); border-radius: 12px; color: #fda4af; background: color-mix(in srgb, var(--world-surface) 84%, transparent); box-shadow: 0 14px 40px rgba(0, 0, 0, .18); backdrop-filter: blur(14px); } .world-gate__path { position: absolute; z-index: 9; right: 50%; bottom: 25px; display: flex; align-items: center; gap: 22px; width: max-content; margin: 0; color: var(--world-faint); font-size: 10px; letter-spacing: .05em; transform: translateX(50%); } .world-gate__path span { display: inline-flex; align-items: center; gap: 7px; color: var(--world-muted); } .world-gate__path span i { width: 6px; height: 6px; border: 1px solid var(--world-faint); border-radius: 50%; box-shadow: 0 0 8px color-mix(in srgb, var(--world-accent) 26%, transparent); } .world-gate__path span:nth-child(2) i { border-color: var(--world-accent); background: color-mix(in srgb, var(--world-accent) 70%, transparent); } .world-gate__path b { color: var(--world-faint); font-weight: 500; } @keyframes world-gate-space-drift { from { transform: scale(1.01) translate3d(-.5%, -.3%, 0); } to { transform: scale(1.045) translate3d(.6%, .35%, 0); } } @keyframes world-gate-stars { from { opacity: .14; transform: translateY(0); } to { opacity: .29; transform: translateY(-3px); } } @keyframes world-gate-dormant-breathe { 0%, 100% { opacity: .19; transform: scale(.985); } 50% { opacity: .3; transform: scale(1.02); } } @keyframes world-gate-core-breathe { 0%, 100% { opacity: .5; transform: scale(.98); } 50% { opacity: .68; transform: scale(1.025); } } @keyframes world-gate-route-pulse { to { stroke-dashoffset: -302; } } /* Theme-responsive topology. */ .hololake-home[data-route="world"][data-world-open="true"] .channel-workspace { background: var(--world-bg); } .hololake-home[data-route="world"] .channel-rail { border-right-color: var(--world-border); color: var(--world-text); background: var(--world-sidebar); } .hololake-home[data-route="world"] .channel-rail__heading { border-bottom-color: var(--world-border); } .hololake-home[data-route="world"] .channel-rail__heading small { color: var(--world-faint); } .hololake-home[data-route="world"] .channel-rail nav button { color: var(--world-muted); } .hololake-home[data-route="world"] .channel-rail nav button:hover { color: var(--world-text); background: var(--state-hover); } .hololake-home[data-route="world"] .channel-rail nav button[data-active="true"] { color: var(--world-text); background: var(--state-selected); } .hololake-home[data-route="world"] .channel-rail__modules { border-color: var(--world-border); color: var(--world-muted); background: var(--world-surface); } .world-map-shell { --world-map-line: var(--world-border-strong); --world-map-surface: var(--world-surface); grid-template-columns: minmax(0, 1fr) 318px; grid-template-rows: minmax(0, 1fr) 48px; color: var(--world-text); background: var(--world-bg); } .world-map-canvas { border-right-color: var(--world-border); scrollbar-color: var(--world-border-strong) var(--world-bg); } .world-map-canvas::-webkit-scrollbar-track { background: var(--world-bg); } .world-map-canvas::-webkit-scrollbar-thumb { background: var(--world-border-strong); } .world-map-canvas::before { background: radial-gradient(circle at 43% 55%, color-mix(in srgb, var(--world-accent) 12%, transparent), transparent 34%), radial-gradient(circle at 78% 38%, color-mix(in srgb, var(--world-accent-2) 7%, transparent), transparent 32%), var(--world-bg); } .world-map-canvas__grid { opacity: .72; background-image: linear-gradient(var(--world-grid) 1px, transparent 1px), linear-gradient(90deg, var(--world-grid) 1px, transparent 1px); } .world-map-heading { top: 24px; right: 30px; left: 30px; } .hololake-home .world-map-heading h1 { color: var(--world-text); font-size: 22px; font-weight: 680; letter-spacing: -.02em; } .world-map-heading span { color: var(--world-muted); font-size: 13px; } .world-map-heading__presence i { background: var(--world-live); box-shadow: 0 0 10px var(--world-live); } .world-graph-node__surface { fill: var(--world-map-surface); stroke: var(--world-border-strong); } .world-graph-node:not(.world-graph-node--root):hover .world-graph-node__surface, .world-graph-node[data-selected="true"] .world-graph-node__surface { fill: var(--world-surface-strong); stroke: var(--world-accent); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--world-accent) 28%, transparent)); } .world-graph-node[data-kind="library"] .world-graph-node__surface { fill: color-mix(in srgb, var(--world-surface) 88%, var(--world-warm)); stroke: color-mix(in srgb, var(--world-warm) 60%, var(--world-border)); } .world-graph-node[data-status="restricted"] .world-graph-node__surface { stroke: var(--world-danger); } .world-graph-node__presence { fill: var(--world-faint); stroke: var(--world-surface); } .world-graph-node[data-status="online"] .world-graph-node__presence { fill: var(--world-live); filter: drop-shadow(0 0 5px var(--world-live)); } .world-graph-node[data-status="restricted"] .world-graph-node__presence { fill: var(--world-danger); } .world-graph-node__symbol { fill: var(--world-faint); font-size: 10px; } .world-graph-node__label { fill: var(--world-text); font-size: 15px; font-weight: 650; } .world-graph-node__status { fill: var(--world-faint); font-size: 11px; } .world-graph-node[data-status="online"] .world-graph-node__status { fill: var(--world-live); } .world-graph-node__orbit { stroke: var(--world-border-strong); } .world-graph-node__orbit--inner { stroke: var(--world-border); } .world-graph-node--root .world-graph-node__surface { fill: var(--world-surface-strong); stroke: var(--world-accent); filter: drop-shadow(0 0 20px color-mix(in srgb, var(--world-accent) 22%, transparent)); } .world-graph-node__root-label { fill: var(--world-text); font-size: 20px; } .world-map-zoom, .world-map-legend { border-color: var(--world-border); color: var(--world-text); background: color-mix(in srgb, var(--world-panel) 88%, transparent); } .world-map-zoom button, .world-map-zoom span { border-bottom-color: var(--world-border); color: var(--world-muted); } .world-map-zoom button:hover:not(:disabled) { color: var(--world-text); background: var(--state-hover); } .world-map-legend { gap: 10px; padding: 15px 16px; } .world-map-legend strong { color: var(--world-text); font-size: 12px; } .world-map-legend span { color: var(--world-muted); font-size: 11px; } .world-node-inspector { gap: 22px; padding: 28px 24px 20px; color: var(--world-text); background: var(--world-panel); } .world-node-inspector > header { border-bottom-color: var(--world-border); } .world-node-inspector__symbol { border-color: var(--world-border-strong); color: var(--world-accent); background: color-mix(in srgb, var(--world-accent) 10%, transparent); } .world-node-inspector h2 { font-size: 22px; } .world-node-inspector header p { color: var(--world-muted); font-size: 13px; line-height: 1.65; } .world-node-inspector__state { color: var(--world-muted); font-size: 13px; } .world-node-inspector__state[data-status="online"] { color: var(--world-live); } .world-node-inspector__state[data-status="online"] i { background: var(--world-live); box-shadow: 0 0 8px var(--world-live); } .world-node-inspector dl div { grid-template-columns: 84px minmax(0, 1fr); padding: 12px 0; border-bottom-color: var(--world-border); font-size: 12px; } .world-node-inspector dt { color: var(--world-faint); } .world-node-inspector dd { color: var(--world-muted); } .world-node-inspector__actions button { min-height: 44px; border-color: var(--world-border-strong); font-size: 13px; } .world-node-inspector__actions button:first-child:not(:disabled) { background: var(--world-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--world-accent) 22%, transparent); } .world-node-inspector > footer { border-top-color: var(--world-border); color: var(--world-faint); font-size: 11px; } .world-map-status { border-top-color: var(--world-border); color: var(--world-muted); background: var(--world-panel); font-size: 11px; } .world-map-status b { color: var(--world-text); } /* Fifth Domain is rendered as real connected systems, not placeholder cards. */ .channel-workspace:has(.fifth-systems) { overflow: hidden; padding: 0; background: var(--world-bg); } .channel-workspace:has(.fifth-systems) .world-session-bar, .channel-workspace:has(.fifth-systems) .channel-breadcrumb { display: none; } .fifth-systems { display: grid; height: 100%; min-height: 620px; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--world-text); background: var(--world-bg); } .fifth-systems__heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 24px 30px 20px; border-bottom: 1px solid var(--world-border); } .fifth-systems__heading h1 { margin: 0; font-family: system-ui, -apple-system, "PingFang SC", sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -.035em; } .fifth-systems__heading p { max-width: 740px; margin: 7px 0 0; color: var(--world-muted); font-size: 15px; line-height: 1.65; } .fifth-systems__presence, .system-path small, .system-node small, .fifth-system-inspector header span { display: flex; align-items: center; gap: 8px; color: var(--world-live); font-size: 13px; } .fifth-systems__presence i, .system-path small i, .system-node small i, .fifth-system-inspector header span i { width: 7px; height: 7px; border-radius: 50%; background: var(--world-live); box-shadow: 0 0 9px var(--world-live); } .fifth-systems__layout { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) 318px; } .fifth-systems__canvas { position: relative; min-width: 0; overflow: auto; border-right: 1px solid var(--world-border); isolation: isolate; } .fifth-systems__grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(var(--world-grid) 1px, transparent 1px), linear-gradient(90deg, var(--world-grid) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 92%); } .fifth-system-columns { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 22px; padding: 58px 26px 36px; } .system-path { align-self: start; padding: 22px; border: 1px solid var(--world-border); border-radius: 14px; background: color-mix(in srgb, var(--world-surface) 78%, transparent); transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } .system-path[data-selected="true"] { border-color: color-mix(in srgb, var(--world-live) 70%, var(--world-border)); background: color-mix(in srgb, var(--world-surface) 88%, var(--world-live)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--world-live) 12%, transparent), 0 18px 50px color-mix(in srgb, #000 10%, transparent); } .system-path > header button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; color: var(--world-text); background: transparent; text-align: left; cursor: pointer; } .system-path__mark { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border: 1px solid var(--world-border-strong); border-radius: 50%; color: var(--world-accent); background: color-mix(in srgb, var(--world-accent) 10%, transparent); font-size: 16px; } .system-path header button > span:last-child { display: grid; gap: 5px; } .system-path header strong { font-size: 18px; } .system-path__route { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 0; margin-top: 28px; } .system-path--pufferfish .system-path__route { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); } .system-path__route--single { grid-template-columns: 1fr; } .system-path__route > b { height: 2px; background: linear-gradient(90deg, var(--world-accent), var(--world-live)); box-shadow: 0 0 8px color-mix(in srgb, var(--world-live) 38%, transparent); } .system-node, .system-path__persona { display: grid; gap: 7px; min-width: 0; padding: 16px; border: 1px solid var(--world-border); border-radius: 10px; background: var(--world-panel); } .system-node > span, .system-path__persona > span { color: var(--world-faint); font-size: 12px; } .system-node strong, .system-path__persona strong { font-size: 14px; } .system-node code { overflow: hidden; color: var(--world-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .system-path__persona { width: 48%; margin: 22px auto 0; border-style: dashed; } .system-path__persona::before { width: 1px; height: 22px; margin: -39px auto 8px; background: var(--world-live); content: ''; } .fifth-system-inspector { display: flex; min-width: 0; flex-direction: column; gap: 22px; padding: 28px 24px 20px; background: var(--world-panel); } .fifth-system-inspector header { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--world-border); } .fifth-system-inspector h2 { margin: 0; font-size: 22px; } .fifth-system-inspector dl { display: grid; margin: 0; } .fifth-system-inspector dl div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--world-border); font-size: 12px; } .fifth-system-inspector dt { color: var(--world-faint); } .fifth-system-inspector dd { min-width: 0; margin: 0; overflow: hidden; color: var(--world-muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; } .fifth-system-inspector > button { min-height: 44px; margin-top: 4px; border-color: var(--world-accent); color: var(--text-inverse); background: var(--world-accent); } .fifth-system-inspector__expanded { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px; border: 1px solid var(--world-border); border-radius: 8px; color: var(--world-live); background: color-mix(in srgb, var(--world-live) 8%, transparent); font-size: 13px; } .fifth-system-inspector__expanded i { width: 7px; height: 7px; border-radius: 50%; background: var(--world-live); box-shadow: 0 0 8px var(--world-live); } .fifth-system-inspector__overview { display: grid; gap: 12px; } .fifth-system-inspector__overview > span { color: var(--world-accent); font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; } .fifth-system-inspector__overview h2 { margin: 0; font: 500 20px/1.25 "Songti SC", "STSong", serif; } .fifth-system-inspector__overview p { margin: 0; color: var(--world-muted); font-size: 12px; line-height: 1.7; } .fifth-system-inspector footer { margin-top: auto; color: var(--world-faint); font-size: 11px; line-height: 1.6; } .pufferfish-boundaries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--world-border); background: var(--world-border); } .pufferfish-boundaries section { padding: 18px 24px; background: var(--world-panel); } .pufferfish-boundaries h2 { margin: 0 0 7px; font-size: 14px; } .pufferfish-boundaries p { margin: 0; color: var(--world-muted); font-size: 12px; line-height: 1.65; } .world-map-canvas__space { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; opacity: .56; object-fit: cover; filter: saturate(.82) hue-rotate(var(--world-art-hue, 0deg)); pointer-events: none; } .world-map-canvas__grid { opacity: .09; } .world-graph-node__galaxy { opacity: .82; transform-box: fill-box; transform-origin: center; filter: saturate(.88) brightness(.9); transition: opacity .24s ease, transform .3s ease, filter .24s ease; } .world-graph-node:hover .world-graph-node__galaxy, .world-graph-node[data-selected="true"] .world-graph-node__galaxy { opacity: 1; transform: scale(1.08); filter: saturate(1.08) brightness(1.12) drop-shadow(0 0 12px var(--world-accent)); } .world-graph-node__galaxy--root { opacity: 1; filter: saturate(1.04) brightness(1.18) drop-shadow(0 0 18px color-mix(in srgb, var(--world-accent) 55%, transparent)); animation: world-galaxy-breathe 5.4s ease-in-out infinite; } .world-graph-node__galaxy--private { opacity: .94; filter: saturate(.9) hue-rotate(14deg) drop-shadow(0 0 18px color-mix(in srgb, var(--world-accent-2) 48%, transparent)); } .world-graph-node__orbit--node { opacity: .66; stroke-dasharray: 2 7; transform-box: fill-box; transform-origin: center; animation: world-orbit-spin 34s linear infinite; } .world-graph-node__symbol { font-size: 8px; letter-spacing: .2em; } .world-graph-node__label { font-size: 13px; paint-order: stroke; stroke: color-mix(in srgb, var(--world-bg) 92%, transparent); stroke-width: 4px; } .world-graph-node__status { font-size: 10px; paint-order: stroke; stroke: color-mix(in srgb, var(--world-bg) 90%, transparent); stroke-width: 3px; } .world-graph-node__root-label { font-size: 22px; paint-order: stroke; stroke: color-mix(in srgb, var(--world-bg) 92%, transparent); stroke-width: 5px; } .world-graph-node__root-status { fill: var(--world-live); font-size: 11px; paint-order: stroke; stroke: color-mix(in srgb, var(--world-bg) 92%, transparent); stroke-width: 4px; } .world-graph-node:focus-visible .world-graph-node__orbit { stroke: var(--world-accent); stroke-width: 2px; } @keyframes world-galaxy-breathe { 0%, 100% { transform: scale(.98); opacity: .92; } 50% { transform: scale(1.04); opacity: 1; } } @media (max-width: 1050px) { .world-map-shell, .fifth-systems__layout { grid-template-columns: minmax(0, 1fr) 274px; } .world-node-inspector, .fifth-system-inspector { padding-inline: 18px; } .fifth-system-columns { grid-template-columns: 1fr; padding: 30px 22px; } } @media (max-width: 760px) { .app:has(.hololake-home) [data-ai-workspace-mode="side"] { position: absolute; inset: 0; width: 100% !important; min-width: 0 !important; border-left: 0; } .hololake-theme-menu { width: min(354px, calc(100vw - 20px)); } .world-map-shell { grid-template-columns: 1fr; grid-template-rows: minmax(440px, 1fr) auto 48px; } .world-node-inspector { min-height: 280px; } .fifth-systems { height: auto; min-height: 100%; } .fifth-systems__heading { align-items: start; flex-direction: column; padding: 22px 20px; } .fifth-systems__layout { grid-template-columns: 1fr; } .fifth-systems__canvas { min-height: 520px; border-right: 0; } .fifth-system-inspector { min-height: 360px; border-top: 1px solid var(--world-border); } .pufferfish-boundaries { grid-template-columns: 1fr; } .world-gate__constellation--lighthouse { top: 24%; left: 14%; } .world-gate__constellation--zero { top: 73%; left: 15%; } .world-gate__constellation--fifth { top: 37%; left: 89%; } .world-gate__constellation span, .world-gate__constellation small { display: none; } .world-gate__core { width: min(420px, 86vw); } .world-gate__core > img { width: min(360px, 78vw); } .world-gate__path { gap: 12px; } .world-gate__path b { display: none; } } @media (prefers-reduced-motion: reduce) { .world-gate__space, .world-gate__stars, .world-gate__constellation img, .world-gate__core > img, .world-gate__routes .world-gate__route-pulse { animation: none; } } /* Keep the application chrome inside the same visual world as the galaxy. */ .app-shell:has(.hololake-home) { --sidebar: #050b1a; --muted-foreground: #68809a; --border: rgba(132, 178, 222, .16); } .app-shell:has(.hololake-home) .hololake-bar { border-bottom-color: rgba(132, 178, 222, .16) !important; color: #dcecff !important; background: radial-gradient(circle at 50% 140%, rgba(86, 161, 213, .08), transparent 46%), #050b1a !important; box-shadow: 0 10px 36px rgba(0, 0, 0, .18); backdrop-filter: blur(18px); } .app-shell:has(.hololake-home) .hololake-bar__context { color: #6e86a2 !important; } .app-shell:has(.hololake-home) .hololake-bar__line { background: rgba(132, 178, 222, .18); } .app-shell:has(.hololake-home) .hololake-theme-nav { border-color: rgba(132, 178, 222, .18); color: #90a9c5; background: rgba(11, 24, 47, .78); box-shadow: inset 0 1px rgba(255, 255, 255, .04); } .app-shell:has(.hololake-home) .hololake-theme-nav strong { color: #dcecff; } .app-shell:has(.hololake-home) .hololake-theme-nav small, .app-shell:has(.hololake-home) .hololake-theme-nav > b { color: #6e86a2; } body:has(.hololake-home) [data-testid="status-bar"] { border-top-color: rgba(132, 178, 222, .16) !important; color: #68809a !important; background: linear-gradient(90deg, rgba(86, 161, 213, .04), transparent 38%, rgba(86, 161, 213, .04)), #050b1a !important; background-color: #050b1a !important; background-image: linear-gradient(90deg, rgba(86, 161, 213, .04), transparent 38%, rgba(86, 161, 213, .04)) !important; box-shadow: 0 -10px 34px rgba(0, 0, 0, .14); backdrop-filter: blur(18px); } .app-shell:has(.hololake-home[data-world-open="false"]) .hololake-bar { border-bottom-color: rgba(132, 178, 222, .16) !important; color: #dcecff !important; background: #050b1a !important; } .app-shell:has(.hololake-home[data-world-open="false"]) .hololake-bar__context { color: #6e86a2 !important; } .app-shell:has(.hololake-home[data-world-open="false"]) .hololake-theme-nav { border-color: rgba(132, 178, 222, .18); color: #90a9c5; background: rgba(11, 24, 47, .78); } body:has(.hololake-home[data-world-open="false"]) [data-testid="status-bar"] { border-top-color: rgba(132, 178, 222, .16) !important; color: #68809a !important; background: #050b1a !important; } /* Low-load galaxy motion contract: imagery is static, interaction owns most movement, and only one slow core pulse remains while the world is idle. */ .world-gate__space, .world-gate__stars, .world-gate__constellation img, .world-graph-node__orbit--node, .world-graph-node__galaxy--root, .world-graph-edge[data-status="online"], .world-graph-node[data-status="online"] .world-graph-node__presence { animation: none; } .world-graph-edge[data-status="online"] { filter: none; } .world-gate__core > img { animation-duration: 12s; } .world-gate__routes .world-gate__route-pulse { animation: none; } .world-gate[data-state="connecting"] .world-gate__routes .world-gate__route-pulse { animation: world-gate-route-pulse 5.5s linear infinite; }