:root { --ink:#f2f7f5; --muted:#8da2ad; --line:rgba(184,226,239,.14); --lime:#cfff5b; --cyan:#78e8ff; --mono:"IBM Plex Mono",monospace; --display:"Manrope","Noto Sans SC",sans-serif; --body:"Noto Sans SC",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#02070c; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 80% 8%,rgba(43,118,145,.16),transparent 28rem),#02070c; font-family:var(--body); }
body.about-checking main,body.about-checking .about-header,body.about-checking .about-footer { opacity:0; }
a,button { font:inherit; }
.about-progress { position:fixed; z-index:3000; left:0; top:0; width:100%; height:2px; background:rgba(255,255,255,.04); }.about-progress i { display:block; width:var(--progress,0%); height:100%; background:linear-gradient(90deg,var(--cyan),var(--lime)); box-shadow:0 0 18px var(--cyan); }
.about-atmosphere { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }.about-atmosphere::after { position:absolute; inset:0; content:""; opacity:.22; background-image:radial-gradient(circle,rgba(255,255,255,.62) 0 .6px,transparent .8px); background-size:77px 77px; mask-image:linear-gradient(to bottom,#000,transparent 90%); }.about-atmosphere i { position:absolute; width:48vw; aspect-ratio:1; border:1px solid rgba(120,232,255,.08); border-radius:50%; }.about-atmosphere i:first-child { right:-18vw; top:12vh; }.about-atmosphere i:nth-child(2) { width:22vw; left:-8vw; top:46vh; }.about-atmosphere i:nth-child(3) { width:70vw; left:22vw; top:155vh; }
.about-header { position:fixed; z-index:2000; left:50%; top:14px; display:grid; width:min(1240px,calc(100% - 28px)); min-height:64px; grid-template-columns:auto 1fr auto; align-items:center; border:1px solid var(--line); border-radius:24px; padding:8px 12px 8px 17px; background:rgba(3,12,19,.68); box-shadow:0 18px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(24px) saturate(140%); transform:translateX(-50%); }
.about-brand { display:flex; align-items:center; gap:10px; color:white; text-decoration:none; }.about-brand > span { display:flex; gap:4px; padding:9px 10px; border:1px solid rgba(202,238,250,.3); border-radius:14px; background:rgba(0,6,10,.62); }.about-brand i { width:6px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 9px var(--cyan); }.about-brand b { font:700 .78rem/1 var(--mono); letter-spacing:.14em; }.about-brand small { color:#78909e; font:500 .48rem/1 var(--mono); letter-spacing:.11em; }
.about-header nav { display:flex; justify-content:center; gap:34px; }.about-header nav a,.about-header-actions a,.about-header-actions button { color:#9ab0bc; font-size:.72rem; text-decoration:none; }.about-header nav a:hover,.about-header-actions a:hover { color:white; }.about-header-actions { display:flex; align-items:center; gap:8px; }.about-header-actions a,.about-header-actions button { min-height:39px; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:0 14px; background:rgba(255,255,255,.025); cursor:pointer; }
.about-hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; padding:150px max(34px,6vw) max(72px,9vh); }.about-hero > img { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; transform:scale(1.03); }.about-hero-shade { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(1,5,9,.94) 0,rgba(1,6,11,.61) 48%,rgba(1,6,11,.12)),linear-gradient(0deg,#02070c 0,transparent 27%); }.about-hero-shade::after { position:absolute; inset:0; content:""; background:radial-gradient(circle at 69% 42%,rgba(120,232,255,.13),transparent 17rem); }
.about-hero-copy { width:min(1050px,92vw); }.about-code,.about-kicker { margin:0 0 22px; color:var(--cyan); font:600 .66rem/1.5 var(--mono); letter-spacing:.16em; }.about-hero h1 { margin:0; max-width:1020px; font:700 clamp(3.4rem,7.4vw,7.9rem)/.92 var(--display); letter-spacing:-.075em; text-wrap:balance; }.about-hero h1 span,.about-hero h1 em { display:block; font-style:normal; }.about-hero h1 em { color:transparent; -webkit-text-stroke:1px rgba(234,248,251,.58); }.about-hero-copy > p:last-child { max-width:720px; margin:34px 0 0; color:#b7c8d0; font-size:clamp(.96rem,1.25vw,1.1rem); line-height:1.9; }.about-hero-index { position:absolute; right:max(28px,4vw); bottom:8vh; display:grid; justify-items:end; gap:8px; color:#77909e; font:500 .54rem/1 var(--mono); letter-spacing:.15em; }.about-hero-index b { color:white; font-size:1.6rem; }.about-hero-index i { width:90px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan)); }
.about-section { width:min(1240px,calc(100% - 40px)); margin:auto; padding-block:clamp(110px,14vw,190px); }.about-section-mark { display:flex; align-items:center; gap:12px; margin-bottom:44px; font-family:var(--mono); }.about-section-mark span { color:var(--lime); font-size:1.2rem; }.about-section-mark small { color:#5e7785; font-size:.56rem; letter-spacing:.15em; }
.about-position { display:grid; grid-template-columns:150px minmax(0,1.35fr) minmax(280px,.65fr); gap:40px 70px; align-items:start; }.about-position .about-section-mark { grid-row:span 2; }.about-position h2,.about-method h2,.about-evidence h2,.about-delivery h2 { margin:0; font:650 clamp(2.5rem,5.25vw,5.2rem)/1.02 var(--display); letter-spacing:-.06em; text-wrap:balance; }.about-position-note { align-self:end; padding-top:28px; border-top:1px solid var(--line); }.about-position-note p { margin:0; color:var(--muted); line-height:1.9; }.about-position-note span { display:block; margin-top:30px; color:var(--cyan); font:500 .56rem/1 var(--mono); letter-spacing:.14em; }
.about-fields { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr); gap:clamp(42px,7vw,100px); align-items:center; }.about-field-visual { position:sticky; top:110px; height:min(72vh,760px); overflow:hidden; border-radius:48% 30% 42% 26% / 34% 46% 28% 43%; isolation:isolate; background:#06131b; }.about-field-visual img { width:100%; height:100%; object-fit:cover; transition:opacity .25s,transform .9s cubic-bezier(.2,.8,.2,1); }.about-field-visual.is-changing img { opacity:.2; transform:scale(1.05); }.about-field-visual::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 45%,rgba(1,7,11,.86)); }.about-field-scan { position:absolute; z-index:2; width:70%; aspect-ratio:1; right:-20%; top:12%; border:1px solid rgba(120,232,255,.23); border-radius:50%; box-shadow:0 0 0 42px rgba(120,232,255,.035),0 0 0 88px rgba(120,232,255,.02); animation:field-scan 10s linear infinite; }.about-field-scan::after { position:absolute; left:3%; top:48%; width:8px; height:8px; content:""; border-radius:50%; background:var(--lime); box-shadow:0 0 20px var(--lime); }.about-field-caption { position:absolute; z-index:3; left:32px; right:32px; bottom:30px; display:flex; align-items:end; justify-content:space-between; gap:20px; }.about-field-caption span { color:var(--cyan); font:500 .56rem/1 var(--mono); letter-spacing:.13em; }.about-field-caption strong { font-size:1.2rem; }.about-field-list { border-top:1px solid var(--line); }.about-field-list button { display:grid; width:100%; grid-template-columns:42px 1fr; gap:5px 15px; padding:23px 0; border:0; border-bottom:1px solid var(--line); color:var(--ink); text-align:left; background:transparent; cursor:pointer; transition:padding .25s,color .2s; }.about-field-list button:hover,.about-field-list button.is-active { padding-left:12px; color:var(--lime); }.about-field-list span { grid-row:span 2; color:#55717f; font:500 .6rem/1.5 var(--mono); }.about-field-list b { font-size:1.05rem; }.about-field-list small { color:#788e9a; line-height:1.55; }
.about-method { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:clamp(50px,9vw,140px); }.about-method-intro { position:sticky; top:130px; align-self:start; }.about-method-flow { border-top:1px solid var(--line); }.about-method-flow article { display:grid; min-height:250px; grid-template-columns:140px 1fr; align-content:center; gap:28px; border-bottom:1px solid var(--line); }.about-method-flow article > span { color:var(--cyan); font:500 .55rem/1.5 var(--mono); letter-spacing:.12em; }.about-method-flow h3 { margin:0 0 14px; font:600 clamp(1.5rem,2.4vw,2.25rem)/1.1 var(--display); letter-spacing:-.04em; }.about-method-flow p { max-width:650px; margin:0; color:var(--muted); line-height:1.9; }
.about-evidence { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(50px,9vw,140px); }.about-ledger { counter-reset:ledger; border-top:1px solid var(--line); }.about-ledger article { position:relative; padding:32px 0 32px 55px; border-bottom:1px solid var(--line); }.about-ledger article::before { position:absolute; left:0; top:34px; counter-increment:ledger; content:"0" counter(ledger); color:#506b79; font:500 .62rem/1 var(--mono); }.about-ledger span { display:block; color:var(--lime); font:500 .54rem/1 var(--mono); letter-spacing:.14em; }.about-ledger strong { display:block; margin:12px 0; font-size:1.18rem; }.about-ledger p { margin:0; color:var(--muted); line-height:1.8; }
.about-delivery { border-top:1px solid var(--line); }.about-delivery-line { display:flex; align-items:center; gap:16px; overflow:hidden; white-space:nowrap; color:#77909e; font:500 .56rem/1 var(--mono); letter-spacing:.08em; }.about-delivery-line i { min-width:34px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }.about-delivery-copy { display:grid; grid-template-columns:1fr 1.5fr; gap:40px 90px; align-items:end; margin-top:80px; }.about-delivery-copy .about-kicker { align-self:start; }.about-delivery-copy p:last-child { grid-column:2; margin:0; max-width:680px; color:var(--muted); line-height:1.9; }.about-delivery > a { display:flex; justify-content:space-between; margin-top:76px; padding:28px 0; border-block:1px solid rgba(207,255,91,.35); color:white; text-decoration:none; }.about-delivery > a span { color:#76909d; font:500 .58rem/1 var(--mono); letter-spacing:.13em; }.about-delivery > a b { font-size:1.1rem; }
.about-footer { display:flex; width:min(1240px,calc(100% - 40px)); min-height:120px; align-items:center; justify-content:space-between; gap:20px; margin:auto; border-top:1px solid var(--line); color:#647d8a; font-size:.68rem; }.about-footer a { color:#a9bdc7; text-decoration:none; }
.about-editor { position:fixed; z-index:5000; left:50%; bottom:22px; display:flex; align-items:center; gap:12px; width:min(720px,calc(100% - 24px)); padding:12px 14px 12px 18px; border:1px solid rgba(120,232,255,.25); border-radius:22px; background:rgba(4,17,25,.9); box-shadow:0 24px 80px rgba(0,0,0,.5); backdrop-filter:blur(24px); transform:translateX(-50%); }.about-editor span { flex:1; color:#839aa6; font-size:.7rem; }.about-editor button { min-height:38px; border:1px solid var(--line); border-radius:999px; padding:0 15px; color:white; background:rgba(255,255,255,.04); cursor:pointer; }.about-editor button:last-child { color:#081009; border-color:var(--lime); background:var(--lime); }.about-editing [data-about-edit] { outline:1px dashed rgba(120,232,255,.42); outline-offset:6px; cursor:text; }.about-editing [data-about-image] { outline:2px solid rgba(207,255,91,.58); outline-offset:-8px; cursor:pointer; }.about-toast { position:fixed; z-index:5100; left:50%; bottom:92px; max-width:calc(100% - 28px); padding:11px 18px; border:1px solid rgba(120,232,255,.24); border-radius:999px; opacity:0; color:white; background:rgba(4,17,25,.92); transform:translate(-50%,12px); transition:.25s; pointer-events:none; }.about-toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes field-scan { to { transform:rotate(360deg); } }
@media (max-width:980px) { .about-header { grid-template-columns:auto 1fr; }.about-header nav { display:none; }.about-header-actions { justify-self:end; }.about-position { grid-template-columns:90px 1fr; }.about-position-note { grid-column:2; }.about-fields,.about-method,.about-evidence { grid-template-columns:1fr; }.about-field-visual,.about-method-intro { position:relative; top:auto; }.about-field-visual { height:64svh; }.about-delivery-copy { grid-template-columns:1fr; }.about-delivery-copy p:last-child { grid-column:auto; } }
@media (max-width:640px) { .about-header { top:8px; width:calc(100% - 16px); min-height:58px; border-radius:19px; }.about-brand small,.about-header-actions button { display:none; }.about-header-actions a { padding-inline:11px; }.about-hero { min-height:930px; padding:130px 18px 70px; }.about-hero h1 { font-size:clamp(3rem,14.5vw,4.35rem); }.about-hero-copy > p:last-child { font-size:.9rem; }.about-hero-index { display:none; }.about-section { width:calc(100% - 28px); padding-block:100px; }.about-position { display:block; }.about-position .about-section-mark,.about-position-note { margin-top:38px; }.about-position h2,.about-method h2,.about-evidence h2,.about-delivery h2 { font-size:clamp(2.15rem,10.5vw,3rem); }.about-field-visual { height:58svh; border-radius:34% 24% 31% 20% / 26% 38% 22% 35%; }.about-field-caption { left:22px; right:22px; }.about-method-flow article { min-height:0; grid-template-columns:1fr; gap:12px; padding:38px 0; }.about-evidence { gap:54px; }.about-delivery-copy { margin-top:54px; }.about-delivery > a { gap:28px; }.about-footer { min-height:150px; flex-direction:column; align-items:flex-start; justify-content:center; }.about-editor { flex-wrap:wrap; }.about-editor span { order:3; flex-basis:100%; }.about-atmosphere i { width:90vw; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.about-field-scan { animation:none; } }