@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/exo2-cyrillic-600.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/exo2-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2113,U+2212,U+FEFF,U+FFFD}
*{box-sizing:border-box}
:root{color-scheme:dark;--paper:#edf3ff;--mint:#a4caff;--gutter:clamp(24px,6vw,112px)}
html{background:#080e1b;color:var(--paper);font-family:Arial,Helvetica,sans-serif}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:#080e1b}
a{color:inherit;text-decoration:none}
.atmosphere{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 82% 36%,#123b7870,transparent 48%),radial-gradient(ellipse at 48% 82%,#172e6330,transparent 35%);z-index:0}
.ambient-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
header,footer{position:relative;z-index:2;display:flex;align-items:center;padding-inline:var(--gutter)}
header{min-height:78px}
header::after{content:"";position:absolute;bottom:0;left:var(--gutter);right:var(--gutter);height:1px;background:linear-gradient(90deg,#b6cdf322,transparent 45%,#b6cdf318)}
.home{display:inline-flex;padding-block:9px}
.mark{display:flex;align-items:center;gap:10px;font-size:23px;letter-spacing:-1.2px;font-weight:700}
.mark i{display:block;width:5px;height:5px;border-radius:50%;background:#89caff;box-shadow:0 0 14px #89caff66}
main{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column}
.hero{position:relative;isolation:isolate;flex:1;min-height:440px;display:flex;align-items:center;padding:35px max(8.5vw,24px) 40px;overflow:hidden}
.intro{position:relative;z-index:1;max-width:100%}
h1{margin:0 0 0 -10px;width:clamp(360px,43vw,690px);max-width:100%;font-weight:600;line-height:1}
.name-metal{display:block;width:100%;height:auto;overflow:visible}
.name-type{font-family:"Exo 2",Arial,sans-serif;font-weight:600;font-size:160px;letter-spacing:-1.2px}
.given-size{font-size:144px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.direction{font-size:clamp(19px,1.45vw,24px);line-height:1.6;color:#b2c3dd;margin:16px 0 0;letter-spacing:-.015em}
.signal-art{position:absolute;z-index:0;width:min(65vw,960px);aspect-ratio:1000/850;right:-1vw;top:50%;transform:translateY(-50%);pointer-events:none}
.signal-canvas,.signal-fallback{position:absolute;width:100%;height:100%;inset:0}
.has-signals .signal-fallback{visibility:hidden}
.principles{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 var(--gutter);border:1px solid #8eafe428;border-radius:12px;overflow:hidden;background:#0b152ab3}
.principle{position:relative;min-width:0;padding:23px clamp(20px,2.1vw,38px) 21px;background:radial-gradient(ellipse at 50% 0,#8cbaff08,transparent 75%)}
.principle+.principle{border-left:1px solid #8eafe428}
.principle-number{position:absolute;top:16px;left:18px;color:#8099bc7d;font:10px monospace;letter-spacing:.12em}
.principle-diagram{display:block;width:100%;height:110px;max-width:360px;margin:0 auto;object-fit:contain}
.principle-copy{min-height:58px;display:flex;flex-direction:column;justify-content:center;margin-top:15px}
.principle h2{font-family:"Exo 2",Arial,sans-serif;font-size:clamp(18px,1.5vw,23px);font-weight:600;line-height:1.4;letter-spacing:-.02em;margin:0;color:#dce8ff}
.principle h2 span{color:#b4caeb}
.principle p{font-size:12px;line-height:1.6;letter-spacing:.005em;color:#91aacf;margin:5px 0 0}
footer{min-height:48px;justify-content:flex-end}
.coordinate{display:flex;gap:12px;align-items:center;font:9px monospace;letter-spacing:.13em;color:#7c94b6}
.coordinate i{height:1px;width:33px;background:#607da866}
:focus-visible{outline:1px solid #b8dcff;outline-offset:6px;border-radius:2px}
::selection{background:#a7ccff;color:#080e1b}
@media(min-width:1800px){.hero{padding-left:calc((100vw - 1500px)/2)}.signal-art{right:calc((100vw - 1800px)/2)}}
@media(max-width:1100px) and (min-width:701px){h1{width:51vw}.signal-art{width:82vw;right:-22vw;opacity:.85}.hero{min-height:420px}}
@media(max-width:900px){
 .principles{grid-template-columns:1fr}
 .principle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:center;padding:18px 26px}
 .principle+.principle{border-left:0;border-top:1px solid #8eafe428}
 .principle-diagram{height:auto}
 .principle-copy{margin:0}
 .principle h2{font-size:20px}
}
@media(max-width:700px){
 header{min-height:68px}.mark{font-size:21px}
 .hero{display:block;flex:none;padding:28px 24px 290px;min-height:0}
 .intro{width:100%}h1{width:min(100%,480px);max-width:none;margin-left:-5px}
 .direction{font-size:18px;line-height:1.55;margin:18px 0 0}
 .signal-art{width:125vw;max-width:650px;right:-8vw;top:auto;bottom:-50px;transform:none;opacity:1}
 footer{min-height:42px}
}
@media(max-width:540px){
 .principle{display:block;padding:18px 22px 20px}
 .principle-diagram{max-width:340px;height:auto}
 .principle-copy{margin-top:8px;min-height:50px}
 .principle h2{font-size:19px}
 .principle p{font-size:12px}
 .principle-number{top:15px;left:16px;font-size:9px}
}
@media(max-width:360px){
 .hero{padding-top:25px;padding-bottom:255px}
 .direction{font-size:17px}
 .signal-art{bottom:-35px}
 .principle{padding-inline:18px}
 .principle h2{font-size:17px}
 .principle p{font-size:11px}
}
@media(max-height:820px) and (min-width:901px){
 header{min-height:68px}
 .hero{min-height:400px;padding-top:24px;padding-bottom:24px}
 h1{width:clamp(360px,43vw,610px)}
 footer{min-height:42px}
}