:root { --ink:#f4f5ff; --muted:#9ea1bd; --line:rgba(255,255,255,.12); --violet:#8e7dff; --cyan:#55e7ff; --pink:#ff62c9; }
.project-group { width:100%; cursor:pointer; text-align:left; font:inherit; }
.tool-modal[hidden] { display:none; }
.modal-open { overflow:hidden; }
.tool-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; }
.tool-modal-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(3,5,15,.74); backdrop-filter:blur(8px); cursor:default; }
.tool-modal-panel { position:relative; width:min(840px,100%); max-height:min(720px,calc(100dvh - 48px)); overflow:auto; padding:26px; border:1px solid rgba(169,165,255,.38); border-radius:24px; background:linear-gradient(145deg,rgba(33,33,64,.98),rgba(12,14,29,.98)); box-shadow:0 28px 90px rgba(0,0,0,.52),0 0 60px rgba(105,91,255,.18); animation:tool-modal-in .2s ease-out; }
@keyframes tool-modal-in { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.tool-modal-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:20px; }.tool-modal-heading p { margin:0 0 7px; color:#b6aaff; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; }.tool-modal-heading h2 { margin:0; font-size:clamp(23px,4vw,32px); letter-spacing:-.05em; }
.tool-modal-close { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:10px; color:#f3f3ff; background:rgba(255,255,255,.07); cursor:pointer; font-size:25px; line-height:1; }.tool-modal-close:hover { background:rgba(255,255,255,.15); }
.tool-subgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }.tool-subcard { min-height:196px; display:flex; flex-direction:column; padding:17px; border:1px solid rgba(139,153,255,.27); border-radius:17px; color:inherit; background:rgba(255,255,255,.045); text-decoration:none; transition:transform .2s ease,border-color .2s ease,background .2s ease; }.tool-subcard:hover { transform:translateY(-3px); border-color:#82e8ff; background:rgba(100,207,255,.09); }.tool-subindex { color:#a8abcb; font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; }.tool-subcard h3 { margin:31px 0 7px; font-size:18px; letter-spacing:-.04em; }.tool-subcard p { margin:0; color:#afb1c7; font-size:12px; line-height:1.55; }.tool-subcard b { display:flex; justify-content:space-between; margin-top:auto; padding-top:13px; border-top:1px solid rgba(255,255,255,.12); color:#e9eaff; font-size:12px; }.tool-subcard i { color:var(--cyan); font-size:16px; font-style:normal; }
@media (max-width:560px) { .tool-modal { padding:14px; }.tool-modal-panel { max-height:calc(100dvh - 28px); padding:19px; border-radius:19px; }.tool-modal-heading { margin-bottom:15px; }.tool-subgrid { grid-template-columns:1fr; gap:9px; }.tool-subcard { min-height:136px; padding:15px; }.tool-subcard h3 { margin:18px 0 5px; }.tool-subcard b { padding-top:9px; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; background:#080914; color:var(--ink); font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif; }
body::before { position:fixed; inset:0; z-index:-4; background:radial-gradient(circle at 50% -10%,#25215d 0,transparent 34%),linear-gradient(180deg,#0b0c19 0,#080914 68%); content:""; }
.ambient { position:fixed; z-index:-3; width:42vw; height:42vw; border-radius:50%; filter:blur(20px); opacity:.42; pointer-events:none; }
.ambient-one { top:14vh; left:-16vw; background:#422bd8; }
.ambient-two { right:-16vw; bottom:-3vh; background:#064b68; }
.grid-noise { position:fixed; inset:0; z-index:-2; opacity:.28; pointer-events:none; background-image:linear-gradient(rgba(157,166,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(157,166,255,.07) 1px,transparent 1px); background-size:42px 42px; -webkit-mask-image:linear-gradient(to bottom,black,transparent 75%); mask-image:linear-gradient(to bottom,black,transparent 75%); }
.portal-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:92px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:13px; font-weight:800; letter-spacing:.17em; }.brand i { width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--violet) 60%,var(--pink)); box-shadow:0 0 18px var(--cyan); }
.system-status { display:inline-flex; align-items:center; gap:7px; color:#aeb2ce; font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }.system-status b { width:6px; height:6px; border-radius:50%; background:#61f4b8; box-shadow:0 0 12px #61f4b8; }
.hero { min-height:286px; display:flex; flex-direction:column; justify-content:center; padding:48px 0 34px; }
.eyebrow,.section-kicker { margin:0 0 18px; color:#b6aaff; font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.17em; }
h1 { max-width:850px; margin:0; font-size:clamp(53px,8.7vw,114px); font-weight:760; letter-spacing:-.075em; line-height:.97; }.hero h1 span { color:transparent; background:linear-gradient(101deg,#fafaff 5%,#a99dff 38%,#5de7ff 72%,#ef75da 100%); -webkit-background-clip:text; background-clip:text; }
.hero-copy { max-width:420px; margin:31px 0 28px; color:#b8bad0; font-size:17px; line-height:1.75; }
.scroll-hint { width:max-content; padding-bottom:5px; border-bottom:1px solid #7973cb; color:#e8e7ff; font-size:13px; font-weight:700; text-decoration:none; }.scroll-hint span { margin-left:8px; color:var(--cyan); font-size:17px; }
.projects { padding:20px 0 70px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:19px; }.section-heading h2 { margin:0; font-size:29px; letter-spacing:-.05em; }.section-heading p:last-child { margin:0; color:var(--muted); font-size:13px; text-align:right; }
.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); gap:14px; }
.project-card { --theme-border:rgba(154,143,255,.43); --theme-icon:#e9e6ff; --theme-icon-border:rgba(224,220,255,.25); --theme-glow:rgba(119,101,255,.42); --theme-enter:#55e7ff; position:relative; min-height:254px; display:flex; flex-direction:column; overflow:hidden; padding:19px; border:1px solid var(--theme-border); border-radius:20px; color:inherit; background:linear-gradient(145deg,rgba(29,30,53,.94),rgba(13,14,28,.86)); text-decoration:none; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.project-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--theme-icon) 72%,white); box-shadow:0 18px 38px rgba(0,0,0,.25),0 0 38px color-mix(in srgb,var(--theme-glow) 38%,transparent); }
.project-card::after { position:absolute; right:-24%; bottom:-38%; width:74%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--theme-glow),transparent 67%); content:""; pointer-events:none; }
/* 所有导航卡片都按位置自动循环配色；新增时只需 class="project-card"。 */
.project-card:nth-child(8n + 1) { --theme-border:rgba(154,143,255,.43); --theme-icon:#e9e6ff; --theme-icon-border:rgba(224,220,255,.25); --theme-glow:rgba(167,107,255,.38); --theme-enter:#8e7dff; background:linear-gradient(135deg,rgba(63,51,130,.92),rgba(19,20,44,.94) 61%,rgba(27,18,53,.94)); }
.project-card:nth-child(8n + 2) { --theme-border:rgba(81,235,255,.34); --theme-icon:#9ceffa; --theme-icon-border:rgba(81,235,255,.34); --theme-glow:rgba(63,223,255,.35); --theme-enter:#55e7ff; }
.project-card:nth-child(8n + 3) { --theme-border:rgba(255,116,205,.34); --theme-icon:#ffb4e2; --theme-icon-border:rgba(255,116,205,.34); --theme-glow:rgba(255,98,201,.33); --theme-enter:#ff8bd8; }
.project-card:nth-child(8n + 4) { --theme-border:rgba(255,188,92,.34); --theme-icon:#ffd295; --theme-icon-border:rgba(255,188,92,.34); --theme-glow:rgba(255,188,92,.3); --theme-enter:#ffc36d; }
.project-card:nth-child(8n + 5) { --theme-border:rgba(104,167,255,.36); --theme-icon:#b8d4ff; --theme-icon-border:rgba(104,167,255,.36); --theme-glow:rgba(80,137,255,.34); --theme-enter:#8bb6ff; }
.project-card:nth-child(8n + 6) { --theme-border:rgba(88,230,169,.35); --theme-icon:#a4f6ce; --theme-icon-border:rgba(88,230,169,.35); --theme-glow:rgba(61,214,146,.3); --theme-enter:#74edb0; }
.project-card:nth-child(8n + 7) { --theme-border:rgba(255,112,127,.36); --theme-icon:#ffbec5; --theme-icon-border:rgba(255,112,127,.36); --theme-glow:rgba(255,83,106,.3); --theme-enter:#ff9aa7; }
.project-card:nth-child(8n + 8) { --theme-border:rgba(171,185,210,.3); --theme-icon:#d7e0f0; --theme-icon-border:rgba(171,185,210,.3); --theme-glow:rgba(135,156,195,.26); --theme-enter:#b7c7e6; }
.card-top { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; }.card-index { color:#c3c4d4; font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }.tag { padding:5px 7px; border:1px solid var(--theme-icon-border); border-radius:999px; color:var(--theme-icon); background:color-mix(in srgb,var(--theme-icon) 9%,transparent); font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; }
.card-icon { position:relative; z-index:1; display:grid; place-items:center; width:45px; height:45px; margin-top:27px; border:1px solid var(--theme-icon-border); border-radius:14px; color:var(--theme-icon); background:rgba(255,255,255,.07); box-shadow:inset 0 1px rgba(255,255,255,.14),0 8px 24px rgba(24,16,88,.2); }.card-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.4; }.card-content { position:relative; z-index:1; margin-top:auto; }.card-content h3 { margin:0 0 5px; color:#fafaff; font-size:20px; letter-spacing:-.045em; }.card-content p { min-height:38px; margin:0; color:#afb1c7; font-size:12px; line-height:1.55; }.card-enter { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:11px; border-top:1px solid rgba(255,255,255,.12); color:#ecebff; font-size:12px; font-weight:750; }.card-enter span { color:var(--theme-enter); font-size:17px; transition:transform .2s ease; }.project-card:hover .card-enter span { transform:translate(2px,-2px); }
footer { display:flex; justify-content:flex-end; gap:20px; padding:24px 0 35px; border-top:1px solid var(--line); color:#85889d; font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.11em; }
@media (max-width:560px) { .portal-shell { width:min(100% - 30px,1180px); }.topbar { min-height:70px; }.hero { min-height:220px; padding:38px 0 26px; }.section-heading { align-items:flex-start; flex-direction:column; gap:7px; }.section-heading p:last-child { text-align:left; }.project-grid { grid-template-columns:1fr; }.project-card { min-height:230px; }.card-icon { margin-top:22px; }.projects { padding-bottom:52px; } footer { align-items:flex-start; flex-direction:column; gap:8px; font-size:9px; } }