/* Navigation and the Graphite product playground. */
html{scroll-padding-top:calc(var(--header-height,92px) + 16px)}
[hidden]{display:none!important}
.menu-toggle{display:none;align-items:center;gap:14px}
.menu-icon{width:18px;display:grid;gap:5px}
.menu-icon i{display:block;height:1px;background:currentColor;transition:transform .2s}
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child{transform:translateY(-3px) rotate(-45deg)}
.header-inner nav{gap:24px}
.header-inner nav>a{transition:color .2s,border-color .2s}
.hero{position:relative;isolation:isolate}
.hero>a,.hero>div:not(.hero-aura),.hero>h1{position:relative}
.hero-aura{position:absolute;z-index:-1;pointer-events:none;inset:0 -30px 80px;background:radial-gradient(ellipse at var(--aura-x,50%) var(--aura-y,36%),#d5c8ae0d,transparent 60%);transition:opacity .5s}
.hero-word{position:relative;display:inline-block}
.hero-spark{position:absolute;top:-.15em;right:-.17em;width:.33em;height:.33em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;animation:spark-float 5s ease-in-out infinite;pointer-events:none}
.hero-underline{position:absolute;left:0;bottom:-.045em;width:100%;height:.14em;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;opacity:.7;pointer-events:none}
.hero-underline path{stroke-dasharray:350;stroke-dashoffset:0;animation:sketch-in 1.5s .15s ease both}
.playground-section{padding-top:0;padding-bottom:100px}
.playground-topline{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:22px}
.playground-topline .eyebrow{color:var(--accent)}
.playground-edition{font-size:11px;color:var(--muted);letter-spacing:.06em}
.playground{display:grid;grid-template-columns:1fr 1.05fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--paper)}
.playground-copy{padding:48px 42px;align-self:center;min-width:0}
.playground-copy h2{font-family:GraphiteSerif,Georgia,serif;font-size:clamp(38px,4.2vw,54px);line-height:1.08;letter-spacing:-.035em}
.playground-copy h2 em{color:var(--accent)}
.playground-intro{font-size:16px;line-height:1.65;color:var(--muted);margin-top:24px;max-width:370px}
.lens-controls{display:flex;gap:8px;margin-top:14px;max-width:400px}
.lens-controls button{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;min-width:0;min-height:48px;padding:11px 12px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:14px;transition:background .2s,color .2s,border-color .2s}
.lens-controls button span{font-size:10px;opacity:.65}
.lens-controls button:hover{border-color:var(--accent)}
.lens-controls button[aria-pressed="true"]{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.lens-story{margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:10px;min-height:174px;max-width:400px;background:var(--graphite-surface,var(--paper))}
.lens-kicker{font-size:11px;color:var(--accent);letter-spacing:.09em;text-transform:uppercase}
.lens-story h3{font-size:22px;line-height:1.3;letter-spacing:-.015em;margin-top:8px}
.lens-story p{font-size:15px;line-height:1.65;color:var(--muted);margin-top:10px;max-width:380px}
.playground-caption{font-size:11px;line-height:1.5;color:var(--muted);margin-top:23px}
.lens-stage{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:27px 24px 22px;background:#1c1e20;color:#ece9e1;border-left:1px solid var(--line);position:relative;overflow:hidden}
.lens-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#d5c8ae25 .7px,transparent .7px);background-size:24px 24px;opacity:.26}
.stage-topline,.stage-bottomline{position:relative;display:flex;align-items:center;gap:9px;color:#b3b2ac;font-size:11px;line-height:1.5}
.stage-topline{padding-bottom:9px}
.stage-topline>span:last-child{margin-left:auto;color:#d5c8ae;font-variant-numeric:tabular-nums;white-space:nowrap}
.stage-dot{width:5px;height:5px;border-radius:50%;background:#d5c8ae;flex-shrink:0}
.orbit-scene{position:relative;margin-inline:-8px;perspective:800px}
.orbit-art{display:block;width:100%;height:auto;overflow:visible;color:#d5c8ae;animation:orbit-float 7s ease-in-out infinite;transform-origin:center}
.orbit-field{stroke:#77756e;stroke-width:.7;opacity:.5;transform-origin:270px 240px;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.orbit-field>circle:first-child{opacity:.5}
.orbit-track{stroke:#d5c8ae;stroke-width:1;stroke-dasharray:2 20;animation:orbit-travel 18s linear infinite}
.orbit-connections{stroke:#d5c8ae;stroke-width:1;stroke-dasharray:4 6;opacity:.38;transition:opacity .25s}
.is-changing .orbit-connections{opacity:.12}
.core-halo{stroke:#d5c8ae;stroke-width:.6;opacity:.4;animation:halo-breathe 4s ease-in-out infinite;transform-origin:270px 240px}
.core-name{font-family:GraphiteSerif,Georgia,serif;font-size:32px;fill:#ece9e1;letter-spacing:-.5px}
.lens-symbol{color:#d5c8ae;opacity:0;transition:opacity .35s}
[data-lens="people"] .lens-symbol-people,[data-lens="product"] .lens-symbol-product,[data-lens="team"] .lens-symbol-team{opacity:1}
.satellite{transition:transform .8s cubic-bezier(.22,1,.36,1)}
.satellite>circle{fill:#d5c8ae;stroke:#1c1e20;stroke-width:4}
.satellite>rect{fill:#26282a;stroke:#555650;stroke-width:.7}
.satellite>text{fill:#d5c8ae;font-family:Nimbus,Arial,sans-serif;font-size:12px;letter-spacing:.6px}
.orbit-legend{display:none}
.orbit-legend span{padding:6px 11px;border:1px solid #555650;background:#26282a;border-radius:20px;color:#d5c8ae;font-size:11px;line-height:1.4}
[data-theme="editorial"] .playground-topline .eyebrow,[data-theme="editorial"] .playground-copy h2 em,[data-theme="editorial"] .lens-kicker{color:#526c31}
[data-theme="editorial"] .lens-controls button[aria-pressed="true"]{color:var(--ink)}
.orbit-specks{opacity:.65}
.orbit-glow{transition:opacity .8s}
[data-lens="product"] .orbit-field{transform:rotate(22deg)}
[data-lens="team"] .orbit-field{transform:rotate(-24deg)}
[data-lens="product"] .orbit-glow{opacity:.7}
[data-lens="team"] .orbit-glow{opacity:1}
.stage-bottomline{justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:12px}
.stage-bottomline button{font-size:11px;min-height:40px;background:none;border:1px solid #77756e;color:#ece9e1;border-radius:20px;padding:7px 13px;white-space:nowrap}
.stage-bottomline button:hover{border-color:#d5c8ae;color:#d5c8ae}
.lens-stage button:focus-visible{outline-color:#d5c8ae}
.reveal-pending{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal-pending.is-revealed{opacity:1;transform:none}
[data-motion="paused"] *,[data-motion="paused"] *:before,[data-motion="paused"] *:after{animation-play-state:paused!important}
@keyframes sketch-in{from{stroke-dashoffset:350}to{stroke-dashoffset:0}}
@keyframes spark-float{0%,100%{transform:rotate(-8deg) scale(.95)}50%{transform:rotate(7deg) scale(1.08)}}
@keyframes orbit-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes orbit-travel{to{stroke-dashoffset:-440}}
@keyframes halo-breathe{0%,100%{opacity:.28;transform:scale(.98)}50%{opacity:.65;transform:scale(1.025)}}
@media(max-width:1050px){.playground-copy{padding:36px 28px}.playground-copy h2{font-size:43px}.lens-controls button{font-size:13px;gap:8px}.lens-stage{padding-inline:18px}.stage-topline,.stage-bottomline{font-size:10px}}
@media(max-width:900px){.playground{grid-template-columns:1fr}.playground-copy{padding:38px}.playground-copy h2{font-size:48px}.playground-intro,.lens-story p{max-width:550px}.lens-controls{max-width:400px}.lens-story{min-height:174px}.lens-stage{border-left:0;border-top:1px solid var(--line);padding:25px 32px}.orbit-scene{width:min(100%,520px);margin-inline:auto}.stage-bottomline{font-size:11px}}
@media(max-width:760px){.js .menu-toggle:not([hidden]){display:inline-flex}.js .header-inner{position:relative}.js .header-inner nav{position:absolute;top:100%;left:-20px;right:-20px;width:auto;max-height:calc(100svh - 76px);overflow-y:auto;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 16px 24px #00000020}.js .header-inner nav.is-open{padding:12px 20px 20px}.js .header-inner nav>a{padding-inline:12px}.playground-section{padding-top:0;padding-bottom:64px}.playground-topline{align-items:flex-start;margin-bottom:18px;gap:14px}.playground-topline .eyebrow{font-size:10px}.playground-edition{font-size:9px;white-space:nowrap}.playground{border-radius:18px}.playground-copy{padding:28px}.playground-copy h2{font-size:42px}.playground-intro{font-size:15px;margin-top:20px}.lens-controls{margin-top:14px}.lens-story{margin-top:20px;padding:18px;min-height:190px}.lens-story h3{font-size:21px}.lens-stage{padding:22px 18px}.stage-topline{font-size:10px}.stage-bottomline{gap:8px;font-size:10px}.stage-bottomline button{font-size:10px}.hero-spark{stroke-width:2}.hero-underline{height:.13em}}
@media(max-width:440px){.playground-copy{padding:26px 22px}.playground-copy h2{font-size:clamp(32px,8.5vw,38px)}.lens-controls button span{display:none}.lens-controls button{justify-content:center;padding-inline:8px}.playground-edition{display:none}.lens-story{min-height:214px;padding:16px}.lens-story p{font-size:14px}.playground-caption{font-size:10px}.stage-bottomline{justify-content:center}.stage-bottomline .lens-hint{width:100%;text-align:center}.stage-topline{font-size:9px}.stage-topline>span:last-child{font-size:10px}}
@media(max-width:760px){.satellite>rect,.satellite>text{display:none}.orbit-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;position:relative;margin-top:-22px;margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.reveal-pending{opacity:1;transform:none}.hero-aura{display:none}}
@media print{.hero-aura,.hero-spark,.hero-underline,.lens-controls,.stage-bottomline,.playground-edition{display:none!important}.playground-section{padding:30px 0}.playground{display:block;border-color:#ddd}.playground-copy{padding:20px}.playground-copy h2{font-size:32px}.lens-stage{display:none}.reveal-pending{opacity:1;transform:none}.lens-story{min-height:0}}

@media(max-width:360px){.lens-story{min-height:232px}}