.visual-system-page{overflow-wrap:break-word}.visual-system-page main{padding-top:0}.vg-eyebrow{margin:0;color:var(--red-bright);font:600 .7rem/1.6 var(--font-mono);letter-spacing:.12em}.vg-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:98px 78px}.vg-hero h1{margin:24px 0;font-size:clamp(3.3rem,6.7vw,6rem);font-weight:540;line-height:.98;letter-spacing:-.065em}.vg-hero h1 span{color:var(--text-soft)}.vg-intro{max-width:31rem;margin:0;color:var(--text-soft);font-size:1.1rem;line-height:1.75}.vg-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px}.vg-text-link{color:var(--text);font-size:.88rem;line-height:1.7;text-decoration:underline;text-underline-offset:5px}.vg-caption{color:var(--text-soft);font:.68rem/1.7 var(--font-mono);margin:22px 0 0}.vg-hero-art{min-width:0;margin:0;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.vg-art-label{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:20px 24px;color:var(--text-soft);font:.6rem/1.7 var(--font-mono);letter-spacing:.08em}.vg-art-label span:first-child{color:var(--red-bright)}.vg-hero-art img{display:block;width:100%;height:auto}.vg-hero-art figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:21px 24px;color:var(--text-soft);font:.68rem/1.7 var(--font-mono)}.vg-hero-art figcaption .v-icon{width:23px;height:23px;color:var(--red-bright)}.vg-section-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--line)}.vg-section-nav a{padding:20px 12px;color:var(--text-soft);font:.7rem/1.6 var(--font-mono);text-align:center}.vg-section-nav a+a{border-left:1px solid var(--line)}.vg-section-nav a:hover{color:var(--text);background:var(--surface)}.vg-section{padding-block:80px;scroll-margin-top:110px}.vg-section+.vg-section{border-top:1px solid var(--line)}.vg-section-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.76fr);gap:48px;align-items:end;margin-bottom:40px}.vg-section h2,.vg-closing h2{margin:16px 0 0;color:var(--text);font:540 clamp(2rem,3.8vw,3.7rem)/1.08 var(--font-sans);letter-spacing:-.055em}.vg-section-heading>p{margin:0;max-width:31rem;color:var(--text-soft);font-size:1rem;line-height:1.8}.vg-pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.vg-pattern-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.vg-pattern-image{display:block;background:var(--bg-deep);overflow:hidden}.vg-pattern-image img{width:100%;height:auto;display:block;transition:transform .3s ease}.vg-pattern-image:hover img{transform:scale(1.035)}.vg-pattern-copy{padding:24px}.vg-pattern-number{margin:0 0 12px;color:var(--red-bright);font:.62rem/1.6 var(--font-mono);letter-spacing:.1em}.vg-pattern-copy h3{margin:0 0 12px;color:var(--text);font-size:1.18rem;font-weight:560;letter-spacing:-.02em}.vg-pattern-copy>p:not(.vg-pattern-number){min-height:3.4em;margin:0;color:var(--text-soft);font-size:.87rem;line-height:1.75}.vg-asset-link{display:flex;justify-content:space-between;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);color:var(--text);font:.66rem/1.7 var(--font-mono)}.vg-asset-link span{color:var(--red-bright)}.vg-library-note{margin:24px 0 0;color:var(--text-soft);font:.72rem/1.8 var(--font-mono)}.vg-library-note a{color:var(--text);text-decoration:underline;text-underline-offset:4px}.vg-symbol-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:22px}.vg-mark-specimen{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--radius)}.vg-mark-specimen>svg{width:128px;height:128px;color:var(--text)}.vg-mark-word{color:var(--text);margin-top:12px;font:600 2.25rem/1.2 var(--font-sans);letter-spacing:-.05em}.vg-mark-specimen>p{margin:28px 0 0;color:var(--text);font:.7rem/1.8 var(--font-mono);text-align:center}.vg-mark-specimen>p span{color:var(--text-soft)}.vg-icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.vg-icon-grid>div{min-height:126px;padding:24px 14px;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.vg-icon-grid>div:nth-child(3n){border-right:0}.vg-icon-grid>div:nth-last-child(-n+3){border-bottom:0}.vg-icon-grid .v-icon{width:32px;height:32px;color:var(--text)}.vg-icon-grid span{color:var(--text-soft);font:.64rem/1.7 var(--font-mono);text-align:center}.vg-foundation-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.vg-type-specimen,.vg-color-specimen{padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.vg-type-large{display:block;margin:28px 0 20px;color:var(--text);font:540 7.5rem/.9 var(--font-sans);letter-spacing:-.065em}.vg-type-specimen h3{margin:0;color:var(--text);font:540 2.1rem/1.12 var(--font-sans);letter-spacing:-.04em}.vg-type-specimen>p:not(.vg-eyebrow){max-width:25rem;color:var(--text-soft);font-size:.9rem;line-height:1.75;margin:18px 0 0}.vg-mono-specimen{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:10px}.vg-mono-specimen span{color:var(--text-soft);font:.6rem/1.6 var(--font-mono);letter-spacing:.08em}.vg-mono-specimen code{color:var(--text);font:.73rem/1.8 var(--font-mono)}.vg-colors{margin:25px 0 0}.vg-colors>div{min-height:48px;padding:11px 0;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.vg-colors>div:last-child{border-bottom:0}.vg-colors dt{display:flex;align-items:center;gap:12px;color:var(--text);font-size:.84rem}.vg-colors dd{margin:0;align-self:center;color:var(--text-soft);font:.7rem/1.6 var(--font-mono)}.vg-swatch{display:inline-block;width:20px;height:20px;flex:none;border:1px solid var(--line-control);border-radius:4px}.vg-swatch-graphite{background:var(--bg)}.vg-swatch-surface{background:var(--surface-2)}.vg-swatch-white{background:var(--text)}.vg-swatch-muted{background:var(--text-soft)}.vg-swatch-red{background:var(--red)}.vg-swatch-accent{background:var(--red-bright)}.vg-swatch-green{background:var(--green)}.vg-swatch-amber{background:var(--amber)}.vg-spacing-specimen{margin-top:22px;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.vg-spacing-specimen h3{margin:10px 0 0;color:var(--text);font-size:1rem;font-weight:550}.vg-spacing-scale{display:flex;gap:16px;align-items:end}.vg-spacing-scale>div{display:grid;justify-items:center;gap:12px}.vg-spacing-scale i{display:block;width:8px;height:var(--vg-space);background:var(--red-bright)}.vg-spacing-scale span,.vg-radius-sample span{color:var(--text-soft);font:.65rem/1.6 var(--font-mono)}.vg-radius-sample{display:flex;align-items:center;gap:15px}.vg-radius-sample i{display:block;width:58px;height:58px;border:1px solid var(--line-control);border-radius:var(--radius);background:var(--surface-2)}.vg-components-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}.vg-review-specimen{padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.vg-sample-header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}.vg-state{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 9px;color:var(--text-soft);border:1px solid var(--line-control);border-radius:5px;font:.62rem/1.5 var(--font-mono)}.vg-state-pass{color:var(--green);border-color:var(--green)}.vg-state-review{color:var(--amber);border-color:var(--amber)}.vg-review-title{margin-top:34px;display:flex;gap:16px;align-items:start}.vg-review-title>.v-icon{width:30px;height:30px;flex:none;color:var(--red-bright)}.vg-review-title h3{margin:0;color:var(--text);font-size:1.25rem;font-weight:550;letter-spacing:-.025em}.vg-review-title p{margin:8px 0 0;color:var(--text-soft);font:.66rem/1.7 var(--font-mono)}.vg-code-block{display:grid;gap:14px;padding:22px;margin-top:30px;border:1px solid var(--line);border-radius:8px;background:var(--bg-deep)}.vg-code-block span{color:var(--text-soft);font:.68rem/1.6 var(--font-mono)}.vg-code-block code{color:var(--text);font:.83rem/1.8 var(--font-mono);overflow-wrap:anywhere}.vg-review-description{color:var(--text-soft);font-size:.9rem;line-height:1.8;margin:24px 0}.vg-evidence-rows{margin:0 0 30px}.vg-evidence-rows>div{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:55px;padding:12px 0;border-bottom:1px solid var(--line)}.vg-evidence-rows dt{color:var(--text-soft);font-size:.83rem}.vg-evidence-rows dd{margin:0;color:var(--text-soft);font:.66rem/1.7 var(--font-mono)}.vg-evidence-rows dd.vg-state-pass{color:var(--green)}.vg-evidence-rows dd.vg-state-review{color:var(--amber)}.vg-component-stack{display:grid;grid-template-columns:1fr;gap:22px}.vg-state-specimen,.vg-action-specimen{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:30px 32px}.vg-state-specimen h3{color:var(--text);margin:14px 0 22px;font-size:1.12rem;letter-spacing:-.02em;font-weight:550}.vg-state-row{display:grid;grid-template-columns:74px minmax(0,1fr);gap:16px;align-items:center}.vg-state-row+.vg-state-row{margin-top:12px}.vg-state-row p{color:var(--text-soft);margin:0;font-size:.8rem;line-height:1.7}.vg-action-specimen{position:relative;overflow:hidden;background-image:linear-gradient(90deg,var(--surface) 45%,transparent),url(/assets/visual-system/patterns/approval-path.svg);background-position:center,right center;background-size:auto,auto 100%}.vg-action-specimen>*{position:relative}.vg-action-icon{position:absolute;right:28px;top:26px}.vg-action-icon .v-icon{color:var(--red-bright);width:30px;height:30px}.vg-action-specimen h3{margin:16px 0 10px;color:var(--text);font-size:1.55rem;line-height:1.2;letter-spacing:-.035em;font-weight:550}.vg-action-specimen>p:not(.vg-eyebrow){max-width:21rem;color:var(--text-soft);font-size:.82rem;line-height:1.75;margin:14px 0 16px}.vg-motion-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(32px,7vw,100px);align-items:center}.vg-motion-copy>p:not(.vg-eyebrow){max-width:29rem;margin:26px 0 0;color:var(--text-soft);font-size:1rem;line-height:1.8}.vg-motion-copy>p.vg-motion-note{font-size:.82rem;margin:18px 0 25px}.vg-planet{width:100%}.vg-planet .planet-description{color:var(--text-soft);line-height:1.75}.vg-closing{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:36px;padding-block:64px 80px;border-top:1px solid var(--line)}.visual-system-page :is(.vg-text-link,.vg-asset-link,.vg-pattern-image,.vg-section-nav a):focus-visible{outline:2px solid var(--red-bright);outline-offset:5px}@media(max-width:1100px){.vg-pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vg-hero{gap:32px}.vg-hero h1{font-size:clamp(3rem,6.2vw,5rem)}.vg-section-heading{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:32px}}@media(max-width:760px){.vg-hero{grid-template-columns:1fr;padding-block:58px 44px;gap:36px}.vg-hero h1{font-size:clamp(3.1rem,11vw,5.4rem)}.vg-hero-art{width:100%}.vg-hero-art figcaption{padding:16px 20px}.vg-section{padding-block:48px}.vg-section-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.vg-section-nav a{padding:16px 8px;font-size:.6rem}.vg-section-nav a:nth-child(4){border-left:0}.vg-section-nav a:nth-child(n+4){border-top:1px solid var(--line)}.vg-section-heading{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.vg-section h2,.vg-closing h2{font-size:clamp(2.1rem,7.5vw,3rem)}.vg-section-heading>p{font-size:.93rem}.vg-symbol-layout,.vg-foundation-grid,.vg-components-grid,.vg-motion-section{grid-template-columns:1fr}.vg-mark-specimen{padding-block:32px}.vg-mark-specimen>svg{width:96px;height:96px}.vg-mark-word{font-size:1.85rem}.vg-spacing-specimen{padding:26px;gap:30px}.vg-motion-section{gap:36px}.vg-closing{padding-block:44px 56px}.vg-pattern-copy{padding:22px}.vg-pattern-copy>p:not(.vg-pattern-number){min-height:5.2em}}@media(max-width:520px){.vg-pattern-grid{grid-template-columns:1fr}.vg-pattern-copy>p:not(.vg-pattern-number){min-height:auto}.vg-hero-actions{align-items:start;flex-direction:column;gap:18px}.vg-hero-actions .button,.vg-review-specimen .button{max-width:100%;white-space:normal;text-align:center}.vg-type-specimen,.vg-color-specimen,.vg-review-specimen,.vg-state-specimen,.vg-action-specimen{padding:26px}.vg-type-large{font-size:6.5rem}.vg-colors dt{font-size:.76rem;gap:9px}.vg-colors dd{font-size:.63rem}.vg-icon-grid>div{padding:20px 8px;min-height:112px}.vg-icon-grid span{font-size:.58rem}.vg-spacing-scale{gap:16px}.vg-state-row{grid-template-columns:68px minmax(0,1fr);gap:12px}.vg-code-block{padding:18px}.vg-code-block code{font-size:.73rem}}@media(prefers-reduced-motion:reduce){.vg-pattern-image img{transition:none}.vg-pattern-image:hover img{transform:none}}.vg-spacing-scale .vg-space-4{--vg-space: 4px}.vg-spacing-scale .vg-space-8{--vg-space: 8px}.vg-spacing-scale .vg-space-12{--vg-space: 12px}.vg-spacing-scale .vg-space-16{--vg-space: 16px}.vg-spacing-scale .vg-space-24{--vg-space: 24px}.vg-spacing-scale .vg-space-32{--vg-space: 32px}.vg-spacing-scale .vg-space-48{--vg-space: 48px}.vg-spacing-scale .vg-space-64{--vg-space: 64px}