*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:radial-gradient(ellipse at 85% 2%,#7037a427,transparent 35%),radial-gradient(ellipse at 10% 30%,#1f9f9a14,transparent 40%),var(--af-night);font:16px/1.7 var(--af-font-body);overflow-x:hidden}a{color:var(--af-mint);text-underline-offset:4px}button{cursor:pointer}.skip{position:absolute;top:-100px;left:20px;z-index:10;background:var(--af-ink);padding:12px}.skip:focus{top:8px}.brand-top{max-width:1240px;margin:auto;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--af-edge)}.brand-wordmark{display:flex;align-items:center;gap:12px;font:400 23px/1 'Bungee Shade',var(--af-font-display);text-decoration:none;color:var(--af-gold)}.brand-wordmark span span{color:var(--af-cream)}.brand-top nav{display:flex;gap:25px;font-size:13px;flex-wrap:wrap}.brand-top nav a{color:var(--af-muted);text-decoration:none}main{max-width:1180px;margin:auto;padding:0 30px}.brand-hero{position:relative;isolation:isolate;padding:88px 0 65px;overflow:hidden;min-height:510px}.kicker{font:600 11px/1.6 var(--af-font-mono);letter-spacing:.16em;color:var(--af-mint);margin:0 0 18px}h1{font:400 clamp(40px,7vw,88px)/1.08 var(--af-font-display);letter-spacing:-.02em;margin:0 0 25px;color:var(--af-cream);text-wrap:balance}h1>span{color:var(--af-gold);text-shadow:0 3px #a86c343b}.hero-copy{font-size:20px;max-width:520px;color:var(--af-muted);line-height:1.6}.brand-principles{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.brand-principles span{padding:7px 12px;border:1px solid var(--af-edge);border-radius:6px;background:#b59aff0a;color:var(--af-muted);font:600 10px/1.5 var(--af-font-mono);letter-spacing:.1em}.hero-orbit{position:absolute;z-index:-1;width:370px;height:370px;right:8px;top:70px;border:1px solid #b59aff46;border-radius:50%;box-shadow:inset 0 0 65px #b59aff0d,0 0 70px #b59aff0b;background:radial-gradient(ellipse at 30% 20%,#fff3,transparent 40%),linear-gradient(145deg,#ad85ff1f,#7cf8d208)}.hero-orbit::before,.hero-orbit::after{content:'';position:absolute;inset:25px;border:1px dashed #ffbf5345;border-radius:50%;transform:rotate(-25deg)}.hero-orbit::after{inset:60px;border:2px solid #b59aff5a;border-right-color:var(--af-mint);transform:rotate(35deg)}.hero-orbit>b{position:absolute;inset:0;display:grid;place-items:center;font:normal 140px/1 monospace;color:var(--af-gold);text-shadow:0 0 55px #ffbf534d}.hero-orbit>span{position:absolute;left:65px;right:65px;bottom:42px;text-align:center;color:var(--af-muted);font:500 9px/1.5 var(--af-font-mono);letter-spacing:.12em}.section-nav{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid var(--af-edge)}.section-nav a{border:1px solid var(--af-edge);border-radius:8px;padding:9px 13px;background:#b59aff08;text-decoration:none;color:var(--af-muted);font-size:12px;min-height:44px;display:flex;align-items:center}.guide-section{padding:65px 0;border-bottom:1px solid #b59aff28}.section-head h2{font:400 clamp(23px,3vw,35px)/1.25 var(--af-font-display);margin:0 0 24px;text-wrap:balance}.guide-section>p{max-width:850px;color:var(--af-muted)}.identity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}.spec-card{min-width:0;border:1px solid var(--af-edge);border-radius:20px;background:linear-gradient(135deg,#b59aff0c,transparent 60%),var(--af-glass);box-shadow:var(--af-shadow);padding:26px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.spec-label{font:600 9px/1.6 var(--af-font-mono);letter-spacing:.1em;color:var(--af-mint);display:block;margin-bottom:22px}.spec-card p{font-size:14px;color:var(--af-muted);line-height:1.7}.spec-card .type-display{font:400 23px/1.25 var(--af-font-display);color:var(--af-gold);margin-bottom:20px}.spec-card .type-body{font:800 23px/1.3 var(--af-font-body);color:var(--af-cream)}.spec-card .type-mono{font:500 19px/1.4 var(--af-font-mono);color:#dac3ff}.guide-note{padding:18px 20px;border-left:2px solid var(--af-gold);background:#b59aff09;border-radius:0 10px 10px 0;font-size:13px;margin-top:25px}.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.swatches article{padding:10px 10px 14px;border:1px solid var(--af-edge);border-radius:14px;background:var(--af-glass-deep);min-width:0}.swatches i{display:block;height:88px;background:var(--swatch);border-radius:8px;border:1px solid #ffffff1f}.swatches h3{font-size:13px;margin:12px 0 3px}.swatches code{font:500 10px/1.4 var(--af-font-mono);color:var(--af-muted)}.swatches p{font-size:11px;color:var(--af-muted);margin:4px 0}.material-stage{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;position:relative;isolation:isolate;padding:45px 30px;background:#0c0922;border:1px solid #b59aff25;border-radius:22px;overflow:hidden}.material-lights{position:absolute;z-index:-1;width:380px;height:380px;left:-30px;top:-150px;border:50px solid #8063c44d;border-radius:50%;box-shadow:0 0 70px #7cf8d21a;transform:rotate(30deg)}.material-lights::after{content:'';position:absolute;width:280px;height:280px;border:15px solid #7cf8d24f;border-radius:50%;top:130px;left:180px;filter:blur(3px)}.glass-spec{background:linear-gradient(140deg,#ffffff09,transparent 50%),rgba(36,25,78,.84);box-shadow:var(--af-shadow),0 0 40px #9e6cff18;border-color:#c3a6ff7a}.glass-spec h3{font:400 26px/1.3 var(--af-font-display);margin:0 0 15px}.demo-stats{display:flex;gap:10px}.demo-stats span{flex:1;padding:12px;background:#0d092bcc;border:1px solid #b59aff3d;border-radius:8px;color:var(--af-muted);font:500 9px/1.5 var(--af-font-mono)}.demo-stats b{display:block;font-size:17px;color:var(--af-gold);margin-top:6px}.material-notes{list-style:none;padding:0;margin:0;display:grid;gap:23px;color:var(--af-muted);font-size:14px}.material-notes b{display:block;color:var(--af-cream);font:600 12px/1.7 var(--af-font-mono);margin-bottom:4px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.spec-card label{display:block;font-weight:600;font-size:14px;margin:16px 0 8px}.spec-card :is(input,select){width:100%}.spec-card .help{font-size:12px;margin:8px 0;color:var(--af-muted)}.spec-card .error-copy{color:var(--af-coral)}.demo-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.btn{padding:12px 20px;font-size:14px}.spec-card .demo-status{font:500 12px/1.7 var(--af-font-mono);min-height:46px;color:var(--af-mint);margin-top:25px}.rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:30px}.rules-grid h3{font-size:17px;margin:0 0 9px}.rules-grid p{font-size:14px;line-height:1.75;color:var(--af-muted);margin:0}.implementation pre{background:var(--af-glass-deep);border:1px solid var(--af-edge);border-radius:14px;padding:24px;white-space:pre-wrap;overflow-wrap:anywhere;font:500 13px/1.9 var(--af-font-mono);color:#d9c6ff}footer{padding:30px 0 50px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--af-muted);flex-wrap:wrap}footer a{color:var(--af-mint)}
@media(max-width:850px){.hero-orbit{right:-150px;opacity:.4}.identity-grid{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.material-stage{grid-template-columns:1fr;gap:30px}.control-grid{grid-template-columns:1fr}.rules-grid{grid-template-columns:1fr}.brand-top{align-items:start}.brand-top nav{gap:12px}.brand-hero{min-height:0}}
@media(max-width:520px){main{padding:0 18px}.brand-top{padding:18px;flex-wrap:wrap;gap:16px}.brand-wordmark{font-size:20px}.brand-top nav{font-size:12px}.brand-hero{padding:48px 0 40px}h1{font-size:clamp(31px,9vw,44px)}.hero-copy{font-size:17px}.hero-orbit{right:-190px;top:40px}.section-nav{gap:7px}.section-nav a{font-size:11px;padding:8px 10px}.guide-section{padding:42px 0}.spec-card{padding:20px}.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.material-stage{padding:20px 14px}.demo-stats b{font-size:15px}.implementation pre{font-size:11px;padding:16px}.section-head h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media(prefers-reduced-transparency:reduce){.spec-card,.glass-spec{background:#241a49;backdrop-filter:none;-webkit-backdrop-filter:none}}

.brand-top nav a{display:inline-flex;align-items:center;min-height:44px}