:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: #050608; }
body { margin: 0; background: #050608; color: #e9f8fa; font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif; }
.hero { position: relative; min-height: 720px; height: min(100vh, 900px); overflow: hidden; background: radial-gradient(circle at 50% 47%, #0b1820 0, #050608 56%); }
.masthead { position: absolute; top: clamp(30px, 5vw, 72px); left: clamp(24px, 7vw, 120px); z-index: 1; pointer-events: none; }
.eyebrow, .section-kicker { margin: 0 0 11px; color: #99eaf2; font: 600 11px/1.2 "Avenir Next", sans-serif; letter-spacing: .22em; }
h1 { margin: 0; font-size: clamp(23px, 2.25vw, 39px); font-weight: 500; letter-spacing: .08em; }
#canvas { display: block; width: 100%; height: 100%; }
.pattern-label { position: absolute; right: 0; bottom: clamp(38px, 7vh, 76px); left: 0; color: #d8f9fc; text-align: center; pointer-events: none; }
.pattern-label p { margin: 0; }
#pattern-name { font-size: 16px; letter-spacing: .18em; }
#pattern-name-en { margin-top: 7px; color: #7cb9bf; font: 11px/1.3 "Avenir Next", sans-serif; letter-spacing: .12em; }
.about { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr); gap: clamp(38px, 9vw, 160px); max-width: 1240px; margin: 0 auto; padding: clamp(72px, 11vw, 150px) clamp(24px, 7vw, 120px); }
h2 { max-width: 410px; margin: 0; font-size: clamp(27px, 3vw, 47px); font-weight: 500; line-height: 1.32; letter-spacing: .04em; }
.about-copy { max-width: 580px; color: #afc0c3; font-size: 15px; line-height: 2; }
.about-copy p { margin: 0 0 21px; }
.about-copy p:nth-child(2) { color: #e9f8fa; letter-spacing: .05em; }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 26px clamp(24px, 7vw, 120px) 34px; border-top: 1px solid rgba(128, 226, 238, .17); color: #71888d; font-size: 12px; }
footer a { color: #a9eaf2; text-decoration: none; }
footer a:hover { text-decoration: underline; }
@media (max-width: 720px) { .hero { min-height: 520px; height: 76vh; } .about { grid-template-columns: 1fr; gap: 34px; padding-top: 78px; padding-bottom: 78px; } footer { flex-direction: column; gap: 9px; } }