/* Core Defense Command — standalone offline CSS. Firewall Cyan = human action; Magenta = AI threat; Gold = compute. */
:root { --ink:#eaf6ff; --paper:#071124; --paper-2:#0a1730; --cyan:#59e9ff; --magenta:#ff5ab9; --gold:#ffc857; --violet:#a984ff; --green:#74f3ba; --line:rgba(141,211,244,.18); --muted:#9aadca; --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; --display:"Arial Narrow","Noto Sans TC",Arial,sans-serif; --body:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--paper); } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); overflow-x:hidden; } a { color:inherit; text-decoration:none; } img { max-width:100%; }
.site-shell { position:relative; overflow:hidden; background:linear-gradient(180deg,#071124 0%,#071124 16%,#08142c 52%,#050b17 100%); } .site-shell::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.32; background-image:linear-gradient(rgba(89,233,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(89,233,255,.022) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000 0%,transparent 92%); }
.site-header { position:absolute; inset:0 0 auto; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:24px clamp(22px,5vw,76px); } .brand { display:inline-flex; align-items:center; gap:12px; } .brand-mark { width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(89,233,255,.52)); } .brand-name { display:grid; gap:1px; } .brand-name strong { font-family:var(--display); font-size:1.18rem; letter-spacing:-.055em; } .brand-name small { color:#95aaca; font:500 .6rem/1 var(--mono); letter-spacing:.12em; } .header-status { display:inline-flex; align-items:center; gap:9px; color:#b4eaff; font:500 .66rem var(--mono); letter-spacing:.08em; } .status-light { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.hero { position:relative; min-height:860px; display:grid; align-items:end; padding:136px clamp(22px,9vw,146px) 94px; isolation:isolate; } .hero-art { position:absolute; inset:0; z-index:-3; background:url("assets/sentient-war-hero-fortress.png") center/cover no-repeat; } .hero::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(4,11,25,.99) 0%,rgba(4,11,25,.93) 29%,rgba(4,11,25,.54) 54%,rgba(4,11,25,.05) 83%),linear-gradient(0deg,#071124 0%,transparent 34%); } .hero::after { content:""; position:absolute; z-index:-1; top:116px; bottom:80px; left:max(22px,6vw); width:2px; background:linear-gradient(180deg,transparent,var(--cyan) 13%,var(--cyan) 70%,transparent); box-shadow:0 0 18px rgba(89,233,255,.7); }
.hero-copy { width:min(650px,100%); animation:enter .8s var(--ease) both; } .eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 20px; color:var(--cyan); font:600 .72rem var(--mono); letter-spacing:.16em; text-transform:uppercase; } .eyebrow::before { content:""; width:38px; height:1px; background:currentColor; } .hero h1 { max-width:600px; margin:0; font-family:var(--display); font-size:clamp(4rem,8vw,8.9rem); font-weight:800; line-height:.83; letter-spacing:-.085em; } .hero h1 span { color:var(--magenta); text-shadow:0 0 36px rgba(255,90,185,.35); } .title-en { margin:22px 0 0; color:#dbeeff; font:600 clamp(.76rem,1.4vw,1.05rem) var(--mono); letter-spacing:.18em; } .hero-deck { max-width:480px; margin:26px 0 0; color:#bbcee8; font-size:clamp(1rem,1.45vw,1.17rem); line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 22px; border:1px solid transparent; font:600 .76rem var(--mono); letter-spacing:.08em; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease); } .button:hover { transform:translateY(-3px); } .button:active { transform:scale(.97); } .button-primary { color:#00131a; background:var(--cyan); box-shadow:6px 6px 0 rgba(0,0,0,.22),0 0 25px rgba(89,233,255,.25); } .button-secondary { color:#ccecff; border-color:rgba(121,223,255,.42); background:rgba(7,20,43,.66); } .arrow { margin-left:16px; font-size:1.1rem; } .platform-strip { display:flex; gap:24px; flex-wrap:wrap; margin-top:54px; color:#8599ba; font:500 .63rem var(--mono); letter-spacing:.08em; } .platform-strip span { display:inline-flex; align-items:center; gap:8px; } .platform-strip span::before { content:"◆"; color:var(--cyan); font-size:.58rem; } .hero-index { position:absolute; right:clamp(22px,5vw,78px); bottom:88px; display:grid; gap:10px; justify-items:end; color:#a9bdd9; font:500 .63rem var(--mono); letter-spacing:.12em; text-align:right; } .hero-index b { color:var(--cyan); font:600 2.7rem/.8 var(--display); }
.signal-rail { position:absolute; top:785px; left:max(24px,6vw); width:calc(100% - max(48px,12vw)); height:1px; z-index:2; background:linear-gradient(90deg,var(--cyan),rgba(89,233,255,.08) 64%,var(--magenta)); } .signal-rail::before,.signal-rail::after { content:""; position:absolute; top:-4px; width:9px; height:9px; transform:rotate(45deg); } .signal-rail::before { left:22%; background:var(--gold); box-shadow:0 0 16px var(--gold); } .signal-rail::after { right:4%; background:var(--magenta); box-shadow:0 0 16px var(--magenta); }
.global-rail { position:absolute; z-index:3; top:785px; bottom:168px; left:max(24px,6vw); width:1px; pointer-events:none; background:linear-gradient(to bottom,var(--cyan),rgba(89,233,255,.38) 50%,rgba(255,90,185,.58) 82%,var(--cyan)); box-shadow:0 0 14px rgba(89,233,255,.2); } .rail-node { position:absolute; left:-9px; display:grid; place-items:center; width:19px; height:19px; color:#041220; background:var(--cyan); border:2px solid #baf8ff; border-radius:50%; box-shadow:0 0 0 5px rgba(89,233,255,.08),0 0 16px rgba(89,233,255,.42); font:700 .48rem var(--mono); } .node-one { top:2%; }.node-two { top:27%; }.node-three { top:53%; background:var(--violet); border-color:#d0c2ff; }.node-four { top:76%; background:var(--magenta); border-color:#ffc1e3; }.node-five { bottom:1%; background:var(--gold); border-color:#ffe7ab; }
.chapter { position:relative; padding:144px clamp(22px,8vw,126px); } .chapter-marker { color:var(--cyan); font:600 .68rem var(--mono); letter-spacing:.16em; } .chapter-heading { max-width:720px; margin:16px 0 0; font-family:var(--display); font-size:clamp(2.45rem,4vw,5.1rem); line-height:.96; letter-spacing:-.065em; } .chapter-intro { max-width:600px; margin:26px 0 0; color:var(--muted); font-size:1.04rem; line-height:1.82; }
.briefing { display:grid; grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr); gap:clamp(48px,8vw,148px); align-items:center; padding-top:172px; } .briefing-copy { padding-left:clamp(0px,4vw,74px); } .incident-list { display:grid; margin-top:48px; border-top:1px solid var(--line); } .incident { display:grid; grid-template-columns:86px 1fr; gap:20px; padding:21px 0; border-bottom:1px solid var(--line); } .incident-time { color:var(--cyan); font:600 .72rem var(--mono); }.incident:first-child .incident-time { color:var(--gold); }.incident:nth-child(3) .incident-time { color:var(--violet); }.incident p { margin:0; color:#c3d5ec; font-size:.94rem; line-height:1.65; }.incident b { color:var(--ink); }.screen-frame { position:relative; padding:15px; clip-path:polygon(0 0,94% 0,100% 7%,100% 100%,6% 100%,0 93%); background:linear-gradient(135deg,rgba(89,233,255,.75),rgba(169,132,255,.22) 46%,rgba(255,90,185,.72)); box-shadow:0 25px 70px rgba(0,0,0,.35); }.screen-frame::before { content:"LIVE SIMULATION // SECTOR 05"; position:absolute; top:25px; left:30px; z-index:2; color:var(--cyan); font:600 .6rem var(--mono); letter-spacing:.12em; }.screen-frame img { display:block; width:100%; }.frame-footer { display:flex; justify-content:space-between; padding:12px 8px 0; color:#a5b7d5; font:500 .58rem var(--mono); letter-spacing:.08em; }
.deck-section { padding-top:110px; }.deck-topline { display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px; padding-bottom:36px; border-bottom:1px solid var(--line); }.deck-art { position:relative; min-height:340px; margin:52px 0 0 max(0px,6vw); background:linear-gradient(90deg,rgba(7,17,36,.96),rgba(7,17,36,.18)),url("assets/sentient-war-defense-deck.png") center/cover; border-left:2px solid var(--cyan); overflow:hidden; }.deck-art::after { content:""; position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(transparent,#08142c); }
.weapon-list { position:relative; z-index:1; display:grid; grid-template-columns:.82fr 1.15fr 1.15fr .88fr; grid-template-rows:154px 154px 132px; gap:1px; margin:-92px clamp(0px,4vw,64px) 0 0; background:var(--line); border:1px solid var(--line); }.weapon { position:relative; min-height:0; padding:24px; overflow:hidden; background:rgba(9,23,50,.95); transition:background .2s var(--ease),transform .2s var(--ease); }.weapon:hover { z-index:1; background:#12295a; transform:translateY(-7px); box-shadow:0 16px 28px rgba(0,0,0,.24); }.weapon-id { display:flex; justify-content:space-between; color:var(--cyan); font:600 .65rem var(--mono); letter-spacing:.09em; }.weapon h3 { margin:28px 0 8px; font:600 1.2rem var(--display); letter-spacing:-.04em; }.weapon p { margin:0; color:#9fb1cd; font-size:.84rem; line-height:1.65; }.weapon-state { position:absolute; right:18px; bottom:14px; color:var(--cyan); font:600 .56rem var(--mono); letter-spacing:.09em; }.weapon:nth-child(1){grid-area:1/1/3/2;border-left:2px solid var(--gold);background:linear-gradient(155deg,rgba(65,54,22,.98),rgba(13,28,51,.97));}.weapon:nth-child(1) .weapon-id,.weapon:nth-child(1) .weapon-state{color:var(--gold);}.weapon:nth-child(2){grid-area:1/2/2/4;background:linear-gradient(120deg,rgba(10,51,83,.99),rgba(9,23,50,.96));}.weapon:nth-child(3){grid-area:1/4/2/5;color:var(--violet);}.weapon:nth-child(4){grid-area:2/2/3/3;}.weapon:nth-child(5){grid-area:2/3/3/5;}.weapon:nth-child(6){grid-area:3/1/4/5;padding-right:180px;border-left:2px solid #ff7b52;background:linear-gradient(90deg,rgba(74,28,36,.98),rgba(28,16,39,.98));}.weapon:nth-child(6) .weapon-id,.weapon:nth-child(6) .weapon-state{color:#ff8d69;}.weapon:nth-child(6) h3{color:#ffd2c4;}.weapon:nth-child(6)::after{content:"⚠";position:absolute;right:48px;top:16px;color:#ff7b52;font:700 4.3rem/.8 var(--display);text-shadow:0 0 24px rgba(255,123,82,.38);}
.threat-section { display:grid; grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr); min-height:680px; background:#071022; }.threat-image { min-height:500px; background:url("assets/sentient-war-ai-breach.png") center/cover; }.threat-copy { position:relative; display:flex; flex-direction:column; justify-content:center; padding:clamp(58px,8vw,140px); overflow:hidden; }.threat-copy::after { content:"AI"; position:absolute; right:-16px; bottom:-77px; color:rgba(255,90,185,.045); font:700 23rem/.75 var(--display); letter-spacing:-.16em; }.threat-copy .chapter-marker{color:var(--magenta);}.threat-copy .chapter-intro{position:relative;z-index:1;}.threat-metrics{display:flex;gap:clamp(22px,4vw,58px);margin-top:46px;}.metric{display:grid;gap:6px;}.metric b{color:var(--magenta);font:600 clamp(2.4rem,4vw,4.1rem)/.9 var(--display);letter-spacing:-.08em;}.metric span{color:#879bbd;font:500 .61rem var(--mono);letter-spacing:.08em;}
.trailer-section{padding-top:156px;}.trailer-layout{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(260px,.58fr);align-items:end;gap:44px;}.trailer-copy{padding-left:clamp(0px,8vw,128px);}.trailer-note{margin:0 0 9px;color:var(--cyan);font:500 .7rem var(--mono);letter-spacing:.1em;text-align:right;}.trailer-wrap{position:relative;margin:52px 0 0;padding:1px;background:linear-gradient(110deg,rgba(89,233,255,.8),rgba(169,132,255,.1) 50%,rgba(255,90,185,.8));}.trailer-wrap::before{content:"";position:absolute;top:-6px;left:7%;width:28%;height:5px;background:var(--cyan);box-shadow:0 0 18px rgba(89,233,255,.7);}.trailer-wrap img{display:block;width:100%;}.trailer-wrap figcaption{padding:12px 18px;color:#9bb3d2;font:500 .65rem var(--mono);letter-spacing:.07em;}
.download-section{padding-bottom:122px;}.download-panel{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:end;padding:clamp(35px,6vw,88px);background:linear-gradient(110deg,rgba(13,38,70,.96),rgba(7,17,39,.96));border:1px solid rgba(89,233,255,.36);overflow:hidden;}.download-panel::before{content:"";position:absolute;width:620px;aspect-ratio:1;right:-280px;bottom:-320px;border:1px solid rgba(89,233,255,.16);border-radius:50%;box-shadow:0 0 0 54px rgba(89,233,255,.035),0 0 0 108px rgba(89,233,255,.024);}.download-panel h2{position:relative;max-width:650px;margin:16px 0 0;font:700 clamp(2.3rem,4.4vw,5.2rem)/.9 var(--display);letter-spacing:-.07em;}.download-panel h2 span{color:var(--cyan);}.platform-data{position:relative;display:grid;gap:10px;padding:18px 0;border-top:1px solid rgba(167,215,244,.23);border-bottom:1px solid rgba(167,215,244,.23);color:#9fb5d0;font:500 .7rem var(--mono);letter-spacing:.04em;}.platform-data b{color:#effbff;font-family:var(--display);font-size:1.1rem;}
.site-footer{display:flex;justify-content:space-between;gap:28px;padding:28px clamp(22px,5vw,76px);border-top:1px solid rgba(151,207,243,.14);color:#7387a8;font:500 .62rem var(--mono);letter-spacing:.05em;}.footer-brand{display:inline-flex;align-items:center;gap:9px;}.footer-brand img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(89,233,255,.35));}.footer-rule{color:var(--cyan);}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:no-preference){.status-light{animation:pulse 2s ease-in-out infinite}}@keyframes pulse{50%{box-shadow:0 0 24px var(--cyan);opacity:.65}}
@media(max-width:900px){.site-header{padding:18px 20px}.header-status,.hero-index{display:none}.hero{min-height:770px;padding:126px 30px 82px}.hero::after{left:14px}.hero-art{background-position:59% center}.hero::before{background:linear-gradient(90deg,rgba(4,11,25,.94),rgba(4,11,25,.67) 62%,rgba(4,11,25,.2)),linear-gradient(0deg,#071124 0%,transparent 36%)}.signal-rail{top:720px;left:30px;width:calc(100% - 60px)}.global-rail{left:14px;top:720px;bottom:132px}.chapter{padding:94px 30px}.briefing,.threat-section,.trailer-layout,.download-panel{grid-template-columns:1fr}.briefing{padding-top:115px}.briefing-copy,.trailer-copy{padding-left:0}.deck-art{margin-left:0}.weapon-list{margin:-44px 0 0;grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.weapon,.weapon:nth-child(n){grid-area:auto;min-height:164px;padding-right:24px}.weapon:nth-child(6){min-height:150px}.threat-image{min-height:390px}.threat-copy{padding:72px 30px}.trailer-section{padding-top:100px}.trailer-note{text-align:left}.site-footer{flex-direction:column;padding:26px 30px}}
@media(max-width:560px){.hero{min-height:710px;padding:115px 26px 64px}.hero h1{font-size:clamp(3.65rem,20vw,5rem)}.platform-strip{gap:14px;margin-top:36px}.hero-actions .button{width:100%}.weapon-list{grid-template-columns:1fr}.global-rail{display:none}.incident{grid-template-columns:68px 1fr;gap:13px}.deck-art{min-height:230px}.threat-metrics{gap:22px}}