:root {
  --base: #f6f8fc;
  --surface: #ffffff;
  --ink: #101d36;
  --blue: #175cff;
  --cyan: #00c8df;
  --mist: #edf4ff;
  --line: #dce5f2;
  --muted: #64748b;
  --soft-ink: #34435c;
  --display: "Manrope", "Noto Sans SC", sans-serif;
  --body: "DM Sans", "Noto Sans SC", sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--base); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; } button { font: inherit; } button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.reading-progress { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 3px; }.reading-progress span { display: block; width: 0; height: 100%; background: var(--cyan); transition: width .08s linear; }
.site-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px max(5vw, calc((100vw - 1440px) / 2)); border-bottom: 1px solid rgba(16,29,54,.1); background: rgba(246,248,252,.78); backdrop-filter: blur(15px); }
.wordmark { display: inline-flex; width: fit-content; align-items: baseline; gap: 4px; color: var(--ink); font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.075em; }.wordmark-star { color: var(--blue); font-size: 15px; }.wordmark small { color: var(--muted); font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.site-header nav { display: flex; gap: clamp(18px,2.5vw,40px); font-size: 11px; font-weight: 600; color: var(--soft-ink); }.site-header nav a { transition: color .2s; }.site-header nav a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; justify-content: end; gap: 18px; }.language-toggle { display: flex; overflow: hidden; padding: 2px; border: 1px solid var(--line); border-radius: 99px; background: white; color: var(--muted); cursor: pointer; font-family: var(--mono); font-size: 9px; }.language-toggle span { padding: 5px 7px; border-radius: 99px; }.language-toggle .active { background: var(--ink); color: white; }.header-link { color: var(--blue); font-size: 11px; font-weight: 700; }
.hero { display: grid; min-height: 760px; grid-template-columns: minmax(0, 1fr) minmax(430px,.9fr); padding-top: 81px; background: var(--base); }.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 110px clamp(32px,7vw,120px) 80px max(5vw, calc((100vw - 1440px) / 2)); }.eyebrow { margin: 0; color: var(--blue); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }h1,h2,h3,p { margin-top: 0; }h1,h2,h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.06em; }h1 { max-width: 710px; margin: 25px 0 0; font-size: clamp(48px,5.1vw,82px); line-height: 1.03; }h1 em, h2 em { color: var(--blue); font-style: normal; }.hero-intro { max-width: 500px; margin: 28px 0 0; color: var(--soft-ink); font-size: 16px; line-height: 1.8; }.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 33px; }.button { display: inline-flex; align-items: center; gap: 28px; padding: 8px 9px 8px 18px; border-radius: 6px; font-size: 12px; font-weight: 700; transition: transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s ease; }.button b { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 4px; font-size: 17px; }.button:hover { transform: translateY(-2px); box-shadow: 0 12px 20px rgba(23,92,255,.2); }.button-plum { background: var(--blue); color: white; }.button-plum b { background: rgba(255,255,255,.16); }.quiet-link { display: inline-flex; align-items: center; gap: 9px; color: var(--soft-ink); font-size: 12px; font-weight: 700; }.line-arrow { color: var(--blue); font-size: 15px; transition: transform .2s ease; }.quiet-link:hover .line-arrow { transform: translateY(3px); }
.hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 610px; padding: 7vw; overflow: hidden; background: radial-gradient(circle at 72% 28%, #21d5f0 0, rgba(33,213,240,0) 27%), linear-gradient(135deg,#103792 0%,#175cff 48%,#1544b1 100%); }.hero-art::before { position: absolute; width: 620px; height: 620px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; content: ""; }.signal-canvas { position: relative; z-index: 1; width: min(100%, 520px); padding: 24px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: rgba(7,31,93,.33); box-shadow: 0 24px 70px rgba(6,28,80,.27); color: white; backdrop-filter: blur(18px); }.signal-topline { display: flex; justify-content: space-between; color: rgba(255,255,255,.68); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }.signal-live { display: flex; align-items: center; gap: 6px; color: #d1f8ff; }.signal-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }.signal-core { position: relative; min-height: 230px; margin-top: 27px; padding: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(5,23,75,.37); }.signal-core-title { position: relative; z-index: 2; display: grid; gap: 8px; max-width: 230px; }.signal-core-title span, .signal-cards span { color: rgba(255,255,255,.62); font-family: var(--mono); font-size: 9px; letter-spacing: .11em; }.signal-core-title strong { font-family: var(--display); font-size: 24px; letter-spacing: -.045em; line-height: 1.2; }.signal-plot { position: absolute; inset: 0; opacity: .85; }.plot-line { position: absolute; height: 1px; transform-origin: 0 0; background: linear-gradient(90deg,rgba(255,255,255,0),#7bebf9,rgba(255,255,255,0)); }.line-a { top: 67%; left: 12%; width: 68%; transform: rotate(-28deg); }.line-b { top: 48%; left: 37%; width: 44%; transform: rotate(42deg); }.line-c { top: 72%; left: 48%; width: 44%; transform: rotate(-61deg); }.plot-node { position: absolute; width: 9px; height: 9px; border: 2px solid #d9fbff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 18px #30e8ff; }.node-a { top: 62%; left: 13%; }.node-b { top: 37%; left: 63%; }.node-c { top: 69%; left: 67%; }.node-d { top: 22%; left: 87%; }.signal-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }.signal-cards > div { display: grid; gap: 8px; min-height: 90px; padding: 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; background: rgba(255,255,255,.07); }.signal-cards b { font-size: 11px; line-height: 1.45; }.hero-footnote { position: absolute; z-index: 3; bottom: 38px; left: max(5vw, calc((100vw - 1440px) / 2)); display: flex; max-width: 550px; gap: 10px; color: var(--muted); font-size: 11px; line-height: 1.6; }.hero-footnote p { margin: 0; }.asterisk { color: var(--blue); font-size: 15px; }
.marquee { overflow: hidden; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; white-space: nowrap; }.marquee-track { display: inline-flex; min-width: max-content; align-items: center; gap: 22px; color: #5d6b80; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; animation: scroll 28s linear infinite; }.marquee i { color: var(--cyan); font-size: 12px; font-style: normal; }@keyframes scroll { to { transform: translateX(-35%); } }
.section-pad { padding: 120px max(5vw, calc((100vw - 1440px) / 2)); }.section-kicker, .contact-line { display: flex; gap: 14px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }.section-kicker > span:first-child, .contact-line > span:first-child { color: var(--blue); }.where { background: var(--base); }.where-layout, .guide-heading, .bench-layout, .notes-head, .contact-layout { display: grid; grid-template-columns: 1.1fr .63fr; gap: 12vw; align-items: end; margin-top: 43px; }.where h2, .guide-heading h2, .workbench h2, .contact-panel h2 { margin: 0; font-size: clamp(38px,4vw,65px); line-height: 1.08; }.where-layout > p, .bench-layout > p, .guide-heading p, .notes-head > p, .contact-layout p { max-width: 410px; margin: 0; color: var(--soft-ink); font-size: 15px; line-height: 1.8; }
.postcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 70px; }.postcard { position: relative; min-height: 280px; padding: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: white; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.postcard:nth-child(2) { background: #edf4ff; }.postcard:nth-child(3) { background: #e7fbff; }.postcard:hover { transform: translateY(-6px); border-color: rgba(23,92,255,.35); box-shadow: 0 18px 45px rgba(34,75,139,.1); }.postcard-number { color: var(--blue); font-family: var(--mono); font-size: 11px; }.postcard h3 { max-width: 300px; margin: 45px 0 0; font-size: 28px; line-height: 1.15; }.postcard p { max-width: 280px; margin: 15px 0 0; color: var(--soft-ink); font-size: 13px; line-height: 1.72; }.postcard-symbol { position: absolute; right: 23px; bottom: 18px; color: var(--blue); opacity: .22; font-family: var(--mono); font-size: 52px; font-weight: 500; }
.field-guide { position: relative; overflow: hidden; background: #101d36; color: white; }.guide-backdrop { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(79,213,231,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(79,213,231,.16) 1px,transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg,black,transparent 80%); }.field-guide > *:not(.guide-backdrop) { position: relative; }.section-kicker.light { color: #b8c4d6; }.guide-heading h2 em { color: var(--cyan); }.guide-heading p { color: #bac7d8; }.guide-list { margin-top: 70px; border-top: 1px solid rgba(255,255,255,.2); }.guide-row { display: grid; grid-template-columns: 150px 1.1fr .8fr 30px; gap: 26px; align-items: center; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,.2); }.guide-row .number { color: var(--cyan); font-family: var(--mono); font-size: 10px; }.guide-row h3 { margin: 0; font-size: 23px; }.guide-row p { margin: 0; color: #b6c3d5; font-size: 13px; line-height: 1.65; }.guide-row .glyph { justify-self: end; color: var(--cyan); font-family: var(--mono); font-size: 17px; }
.workbench { background: white; }.paper-stack { display: grid; grid-template-columns: 1.3fr .85fr .85fr; gap: 14px; margin-top: 70px; align-items: start; }.paper { min-height: 280px; padding: 28px; border: 1px solid var(--line); border-radius: 7px; background: #f9fbff; }.paper:nth-child(2) { margin-top: 32px; background: var(--mist); }.paper:nth-child(3) { margin-top: 8px; background: #effcfe; }.paper-label { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }.paper h3 { margin: 37px 0 0; font-size: 25px; line-height: 1.12; }.paper p { margin: 14px 0 0; color: var(--soft-ink); font-size: 12px; line-height: 1.68; }.paper .scribble { margin-top: 28px; color: var(--blue); font-family: var(--display); font-size: 16px; font-weight: 700; }
.notes { position: relative; overflow: hidden; background: var(--base); }.texture { position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(circle at 20% 30%,var(--cyan),transparent 28%),radial-gradient(circle at 79% 67%,var(--blue),transparent 23%); }.notes > *:not(.texture) { position: relative; }.notes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 67px; }.note { position: relative; min-height: 290px; padding: 27px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.86); }.note-label { color: var(--blue); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }.note h3 { margin: 46px 0 0; font-size: 25px; line-height: 1.1; }.note p { margin: 17px 0 0; color: var(--soft-ink); font-size: 12px; line-height: 1.72; }.note .note-foot { position: absolute; right: 26px; bottom: 23px; color: var(--cyan); font-family: var(--mono); font-size: 10px; }
.manifesto { padding: 115px max(5vw, calc((100vw - 1440px) / 2)); background: var(--blue); color: white; text-align: center; }.manifesto-star { margin-bottom: 24px; color: var(--cyan); font-size: 32px; }.manifesto .eyebrow { color: #cce4ff; }.manifesto h2 { max-width: 960px; margin: 28px auto 0; font-size: clamp(36px,4.6vw,66px); line-height: 1.1; }.manifesto h2 em { color: var(--cyan); }
.contact-panel { margin: 20px; padding: 72px clamp(27px,7vw,112px); border-radius: 8px; background: #e7f6ff; color: var(--ink); }.contact-layout { margin-top: 50px; }.contact-layout h2 em { color: var(--blue); }.contact-email { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 29px; padding: 14px 0; border-bottom: 1px solid var(--ink); color: var(--ink); font-size: 13px; font-weight: 700; }.contact-email b { color: var(--blue); font-size: 20px; transition: transform .2s ease; }.contact-email:hover b { transform: translate(3px,-3px); }
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; padding: 38px max(5vw, calc((100vw - 1440px) / 2)); color: var(--muted); font-size: 10px; }footer > p { margin: 0; text-align: right; }.footer-brand { display: flex; gap: 9px; color: var(--ink); }.footer-brand > span { color: var(--blue); font-size: 14px; }.footer-brand b { display: block; font-family: var(--display); font-size: 16px; letter-spacing: -.055em; }.footer-brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; letter-spacing: .07em; }.footer-links { display: flex; gap: 20px; }.footer-links a:hover { color: var(--blue); }
/* Legal pages */
.legal-header { display: flex; align-items: center; justify-content: space-between; padding: 25px max(5vw, calc((100vw - 1200px) / 2)); border-bottom: 1px solid var(--line); background: var(--base); }.legal-brand { color: var(--ink); font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.07em; }.legal-brand span { margin-right: 4px; color: var(--blue); font-size: 14px; }.legal-header > div { display: flex; align-items: center; gap: 18px; }.legal-header .language-toggle { background: white; }.legal-header .language-toggle .active { background: var(--ink); color: white; }.back-home { padding-bottom: 2px; border-bottom: 1px solid var(--blue); color: var(--blue); font-size: 11px; font-weight: 700; }.legal-hero { padding: 92px max(5vw, calc((100vw - 1200px) / 2)); background: var(--ink); color: white; }.legal-hero h1 { max-width: 780px; margin: 24px 0 0; color: white; font-size: clamp(48px,6vw,82px); }.legal-hero > p:last-child { max-width: 600px; margin: 27px 0 0; color: #c1cce0; font-size: 16px; line-height: 1.8; }.legal-body { display: grid; grid-template-columns: .35fr 1fr; gap: 8vw; max-width: 1200px; margin: 0 auto; padding: 92px 5vw; }.legal-body aside { color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }.legal-body aside i { display: block; margin-top: 20px; color: var(--cyan); font-size: 24px; font-style: normal; }.legal-card { display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid var(--line); }.legal-card:last-of-type { border-bottom: 1px solid var(--line); }.legal-card > span { color: var(--blue); font-family: var(--mono); font-size: 10px; }.legal-card h2 { margin: 0; font-size: 26px; line-height: 1.15; }.legal-card p { max-width: 670px; margin: 16px 0 0; color: var(--soft-ink); font-size: 14px; line-height: 1.85; }.legal-contact { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 44px; padding: 23px 24px; border-radius: 5px; background: var(--mist); color: var(--ink); font-size: 12px; }.legal-contact b { color: var(--blue); font-size: 12px; }.legal-footer { display: flex; align-items: center; justify-content: space-between; margin: 0 max(5vw, calc((100vw - 1200px) / 2)); padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.legal-footer div { display: flex; gap: 18px; }.legal-footer a:hover { color: var(--blue); }
@media (prefers-reduced-motion:no-preference) { .hero-copy > * { animation: rise .7s both cubic-bezier(.23,1,.32,1); }.hero-copy .eyebrow { animation-delay:.05s; }.hero-copy h1 { animation-delay:.13s; }.hero-copy .hero-intro { animation-delay:.21s; }.hero-copy .hero-actions { animation-delay:.29s; }.signal-canvas { animation: in .8s .15s both cubic-bezier(.23,1,.32,1); } }@keyframes rise { from { opacity:0; transform:translateY(17px); } to { opacity:1; transform:translateY(0); } }@keyframes in { from { opacity:0; transform:translateY(15px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; }.site-header nav { display:none; }.hero { grid-template-columns:1fr; min-height: auto; }.hero-copy { min-height:630px; padding:140px 7vw 105px; }.hero-art { min-height:530px; padding:70px 9vw; }.hero-footnote { position:relative; left:auto; bottom:auto; grid-column:1; padding:0 7vw 45px; background:var(--base); }.section-pad { padding:90px 7vw; }.where-layout,.guide-heading,.bench-layout,.notes-head,.contact-layout { grid-template-columns:1fr; gap:25px; }.postcards,.notes-grid { grid-template-columns:1fr; gap:14px; }.guide-row { grid-template-columns:130px 1fr 26px; gap:15px; }.guide-row p { grid-column:2 / 4; }.paper-stack { grid-template-columns:1fr; }.paper:nth-child(2),.paper:nth-child(3) { margin-top:0; }.contact-panel { margin:12px; padding:55px 7vw; } footer { grid-template-columns:1fr; align-items:start; padding:34px 7vw; } footer > p { text-align:left; }.footer-links { order:3; } }
@media (max-width:540px) { .site-header { padding:20px 22px; }.wordmark { font-size:18px; }.wordmark small,.header-link { display:none; }.header-actions { gap:0; }.hero-copy { min-height:600px; padding:118px 22px 80px; }.hero-intro { font-size:14px; }.hero-art { min-height:450px; padding:35px 22px; }.signal-canvas { padding:16px; }.signal-core { min-height:220px; padding:18px; }.signal-core-title strong { font-size:20px; }.signal-cards > div { min-height:82px; padding:10px; }.signal-cards b { font-size:10px; }.hero-footnote { padding:0 22px 35px; }.hero-actions { gap:17px; }.button { padding:8px 8px 8px 14px; font-size:11px; }.section-pad { padding:76px 22px; }.postcards { margin-top:45px; }.guide-list { margin-top:46px; }.guide-row { grid-template-columns:1fr 20px; gap:10px; padding:22px 0; }.guide-row .number { grid-column:1; }.guide-row h3 { grid-column:1; font-size:21px; }.guide-row p { grid-column:1; }.guide-row .glyph { grid-column:2; grid-row:1 / 3; }.paper-stack,.notes-grid { margin-top:45px; }.manifesto { padding:80px 22px; }.manifesto h2 { font-size:34px; }.contact-panel { padding:47px 22px; }.contact-email { font-size:10px; }.legal-header { padding:20px 22px; }.legal-header > div { gap:12px; }.back-home { font-size:0; }.back-home:first-letter { font-size:17px; }.legal-hero { padding:74px 22px; }.legal-body { grid-template-columns:1fr; gap:30px; padding:70px 22px; }.legal-card { grid-template-columns:34px 1fr; gap:12px; }.legal-card h2 { font-size:23px; }.legal-contact { display:block; }.legal-contact b { display:block; margin-top:12px; font-size:10px; }.legal-footer { flex-direction:column; align-items:start; gap:13px; margin:0 22px; } }