/* Figma Make Version 16, adapted to the existing static application. */
@font-face {
    font-family: 'Home Title Calligraphy';
    src: url('fonts/ma-shan-zheng-title.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root { --home-sidebar: 220px; --home-header: 64px; --home-label-size: 22px; }
html, body { min-width: 0; min-height: 0; width: 100%; height: 100%; }
body { display: block; background: #090909; font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
body::before { content: none; }
.site-container.home-shell {
    position: relative; inset: auto; transform: none; width: 100%; height: 100vh; height: 100dvh;
    display: grid; grid-template-columns: minmax(0, 1fr) var(--home-sidebar);
    grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: #090909;
}
.home-header { grid-area: 1 / 1; position: relative; z-index: 2; display: flex; align-items: center; padding: 0 20px; background: rgba(4,4,4,.25); border-bottom: 1px solid rgba(255,255,255,.06); min-width: 0; }
.home-header { gap: clamp(10px, 1.6vw, 24px); min-height: var(--home-header); padding-top: 10px; padding-bottom: 10px; }
.home-header a { display: block; width: clamp(110px, 23.75vw, 285px); max-width: 45%; flex-shrink: 0; }
.home-system-name {
    flex: 1; min-width: 0; text-align: center;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', sans-serif;
    font-size: var(--home-label-size); font-weight: 800;
    color: #f4f7fc; line-height: 1.4; letter-spacing: .04em;
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .7em; white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    position: relative; padding-bottom: 8px;
    background: linear-gradient(105deg, #f3f7ff 0%, #e2ebf8 24%, #e7d7b0 46%, #e3c990 60%, #e1dccc 78%, #d0e0f3 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
}
.home-system-name::after { content: ''; position: absolute; height: 1px; bottom: 0; left: 10%; right: 10%; background: linear-gradient(90deg, transparent 0%, rgba(198,216,238,.5) 22%, #d7bd83 50%, rgba(198,216,238,.5) 78%, transparent 100%); box-shadow: 0 1px 6px rgba(215,189,131,.16); pointer-events: none; }
.home-title-primary { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: .7em; }
.home-title-primary > span { white-space: nowrap; }
.home-title-ai { color: inherit; padding-left: .7em; border-left: 1px solid rgba(224,201,145,.45); }
.home-title-secondary { font-size: 1em; font-weight: 600; letter-spacing: .04em; color: inherit; white-space: nowrap; }
.home-header img { display: block; width: 100%; height: auto; object-fit: contain; object-position: left center; }
.home-system-name { font-size: 26px; }
/* Keep the complete title on one line at every viewport width. */
@media (min-width: 851px) and (max-width: 1350px) {
    .home-system-name { font-size: clamp(13px, calc(2.35vw - 7px), 25px); gap: .45em; }
}
.home-date { grid-area: 1 / 2; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f3f0e8, #cecac0); border-left: 1px solid rgba(255,255,255,.3); border-bottom: 2px solid rgba(164,135,63,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.home-date .date { font-family: 'Arial Black', 'Helvetica Neue', sans-serif; font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; color: #233044; letter-spacing: .06em; text-shadow: 0 1px 0 rgba(255,255,255,.8); }
.home-intro { margin: auto; padding: 0; width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; color: #eef5ff; background: #0a1829; border: 1px solid #527293; border-radius: 14px; box-shadow: 0 24px 90px #0009; }
.home-intro::backdrop { background: rgba(3,8,15,.68); }
.home-intro-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.home-intro-toolbar strong { margin-right: auto; font-size: 16px; }
.home-intro-toolbar button { padding: 8px 12px; background: #173b60; color: #eff6ff; border: 1px solid #537597; border-radius: 6px; cursor: pointer; }
.home-intro-toolbar button:focus-visible { outline: 2px solid #e4c779; outline-offset: 2px; }
.home-intro video { display: block; width: 100%; max-height: calc(100dvh - 130px); background: #000; }
/* Let the real image show through the translucent header, without blur. */
.home-hero { grid-area: 1 / 1 / 3 / 2; position: relative; overflow: hidden; min-width: 0; }
.home-default, .home-layers, .home-shade { position: absolute; inset: 0; pointer-events: none; }
.home-default { background: url('../img/home/dna-parallax-1.png') center center / cover; transition: opacity .6s ease; }
.home-hero.has-preview .home-default { opacity: .15; }
.home-layer { position: absolute; inset: 0; background-size: cover; background-position: center top; opacity: 0; transform: translateY(calc(var(--shift) + 30px)); transition: opacity .6s ease, transform .7s cubic-bezier(.25,.46,.45,.94); -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 25%, #000 55%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 25%, #000 55%); }
.home-layer.is-active { opacity: 1; transform: translateY(var(--shift)); }
.home-shade { background: linear-gradient(to top, rgba(9,9,9,.7), transparent 40%); }
.home-edge { position: absolute; top: 0; right: 0; width: 80px; height: 100%; background: linear-gradient(to right, transparent, #1e1e1e); pointer-events: none; }
.home-sidebar { grid-area: 2 / 2; min-height: 0; background: #1e1e1e; border-left: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; overflow: hidden; }
.home-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; }
.home-nav-item { position: relative; display: flex; align-items: center; gap: 16px; padding: 0 24px; width: 100%; height: 73px; flex-shrink: 0; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; transition: background .25s ease; }
.home-nav-item:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 20px; right: 20px; height: 1px; background: rgba(255,255,255,.08); }
.home-nav-item:last-child { height: 72px; }
.home-nav-item:hover, .home-nav-item.is-active { background: rgba(200,168,64,.1); }
.home-nav-item:focus-visible, .home-header a:focus-visible, .floating-button:focus-visible { outline: 2px solid #c8a840; outline-offset: -3px; }
.home-nav-item img { width: 32px; height: 32px; flex-shrink: 0; }
.home-nav-item span { font-family: inherit; font-size: var(--home-label-size); font-weight: 400; color: #e8e0d0; letter-spacing: .04em; white-space: nowrap; }
.home-support {
    min-height: 174px; padding: 24px 8px 22px; flex-shrink: 0; text-align: center;
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    background: linear-gradient(160deg, #174979 0%, #0f3460 65%, #0b284b 100%);
    border-top: 1px solid rgba(131,196,242,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.home-support p { margin: 0; font-size: 11px; color: #c4d6e9; line-height: 1.8; letter-spacing: 0; overflow-wrap: anywhere; }
.home-support p:first-child { font-size: 13px; font-weight: 600; color: #f3f8ff; letter-spacing: .025em; text-wrap: balance; }
.home-support p:nth-child(2) { font-size: 12px; color: #9dcef5; letter-spacing: .12em; margin-bottom: 7px; }
/* Keep the existing assistant accessible without covering the new navigation. */
.floating-button { left: 18px; right: auto; bottom: 12px; width: 64px; height: 64px; border: 0; background: transparent; }
.chat-dialog { left: 18px; right: auto; bottom: 86px; width: min(450px, calc(100vw - 36px)); height: min(600px, calc(100dvh - 110px)); }
.home-flag-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .85; mix-blend-mode: screen; }
/* Match the floating character to the homepage's dark, warm lighting. */
.home-shell ~ .floating-button .assistant-character {
    filter: sepia(.22) saturate(.68) brightness(.76) contrast(1.12)
        drop-shadow(-2px -1px 2px rgba(152, 35, 23, .28))
        drop-shadow(1px -1px 1px rgba(211, 166, 102, .16))
        drop-shadow(3px 7px 7px rgba(0, 0, 0, .72));
}
.home-shell ~ .floating-button::before {
    content: ''; position: absolute; left: 30%; bottom: 0; width: 40%; height: 5%;
    border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.72), rgba(0,0,0,.3) 45%, transparent 72%);
    filter: blur(3px); pointer-events: none; z-index: -1;
}
.message-content { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (max-width: 850px) {
    .home-header { flex-direction: column; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .home-header a { max-width: 100%; }
    .home-system-name { flex: none; width: 100%; }
    .home-system-name { font-size: clamp(10px, calc(3.1vw - 8px), 18px); gap: .4em; letter-spacing: 0; }
    .home-title-primary { gap: .4em; }
    .home-title-ai { padding-left: .4em; }
    .home-title-secondary { letter-spacing: 0; }
}
@media (max-width: 640px) {
    :root { --home-sidebar: 180px; --home-header: 60px; --home-label-size: 18px; }
    .home-header { padding: 12px; }
    .home-header img { height: auto; max-height: 60px; width: 100%; }
    .home-system-name { font-size: clamp(5px, calc(3.6vw - 8px), 15px); }
    .home-nav-item { gap: 10px; padding: 0 16px; }
    .home-nav-item span { letter-spacing: .02em; }
    .home-support { min-height: 174px; padding: 20px 8px; }
    .home-date .date { font-size: 17px; }
    .chat-dialog { left: 16px; right: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .home-layer, .home-default, .home-nav-item { transition: none; }
    .home-layer, .home-layer.is-active { transform: none; }
    .home-flag-particles { display: none; }
}