html:has(body.graphite){scrollbar-gutter:stable}
.graphite{--bg:#09090b;--panel:#151518;--edge:#28282d;--text:#f2f2f4;--muted:#a7a7b0;background:var(--bg)}
.graphite .wrap{width:min(1170px,calc(100% - 48px))}
.graphite .site-nav{position:relative;z-index:1;background:transparent;border:0}
.graphite .nav-inner{height:auto;min-height:88px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px}
.graphite .nav-inner nav{margin:0;display:flex;gap:0;border:1px solid #2b2b30;border-radius:999px;background:#16161ad9;padding:4px}
.graphite .nav-inner nav a{padding:8px 13px;border-radius:999px;color:#b8b8c0}
.graphite .nav-inner nav a:hover,.graphite .nav-inner nav a[aria-current]{background:#28282e;color:#f2f2f4}
.graphite .nav-cta{justify-self:end}
.graphite .brand{display:inline-flex;justify-self:start;gap:0;font-size:1.35rem;letter-spacing:-.06em}
.bot-avatar{border-radius:50%;width:36px;height:36px;object-fit:cover;margin-right:9px;border:1px solid #40404a}
.graphite .button{border-radius:999px;background:var(--red-surface);border:1px solid var(--red-edge);box-shadow:inset 0 1px #ffffff0c;color:var(--text)}
.graphite .button:hover{background:var(--red-hover);border-color:#9f261f}
.graphite .button.secondary,.graphite .nav-cta{background:#19191e;border-color:#34343c;color:#e9e9ed}
.graphite .button.secondary:hover,.graphite .nav-cta:hover{background:#25252c}
.graphite .actions .button{padding:12px 20px}
.graphite .hero-band{background:var(--bg);min-height:540px;display:grid;align-items:center}
.graphite .hero-backdrop{background:transparent}
.graphite .hero-orbits{top:46%;left:78%;width:clamp(340px,55vw,780px)}
.graphite .hero-orbits i{border-color:#a61c1755}
.graphite .hero-orbits i::after{width:5px;height:5px;background:var(--red-ink);box-shadow:0 0 12px 2px #a61417aa}
.graphite .hero{padding:74px 0 88px;gap:36px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.graphite .hero h1{font-size:clamp(3.05rem,5.1vw,5rem);letter-spacing:-.071em;margin-top:0}
.graphite .hero h1 em{color:var(--red-ink)}
.hero-features{justify-self:center;display:grid;gap:24px}
.hero-features a{display:flex;align-items:center;gap:10px;width:max-content;padding:9px 15px 9px 9px;border-radius:999px;text-decoration:none;background:#19191eea;border:1px solid #34343c;color:#e1e1e7;font-size:.85rem;box-shadow:0 8px 26px #0006;animation:feature-float 5s ease-in-out infinite}
.hero-features a:nth-child(2){margin-left:60px;animation-delay:-1.6s}
.hero-features a:nth-child(3){margin-left:17px;animation-delay:-3.1s}
.hero-features a:hover,.hero-features a:focus-visible{border-color:var(--red-edge);animation-play-state:paused}
@keyframes feature-float{50%{transform:translateY(-6px)}}
.sprite{--sprite:url('/sprites/notes.svg');position:relative;display:inline-grid;place-items:center;flex:none;width:30px;height:30px;background:#222228;color:var(--red-ink);border:1px solid #3a3a42;border-radius:9px}
.sprite::before{content:"";width:17px;height:17px;background:currentColor;mask:var(--sprite) center/contain no-repeat}
.sprite.video{--sprite:url('/sprites/video.svg')}.sprite.music{--sprite:url('/sprites/music.svg')}.sprite.shield{--sprite:url('/sprites/shield.svg')}
.sprite.notes{--sprite:url('/sprites/notes.svg')}.sprite.users{--sprite:url('/sprites/users.svg')}.sprite.headphone{--sprite:url('/sprites/headphone.svg')}
.sprite.analytics{--sprite:url('/sprites/analytics.svg')}.sprite.message{--sprite:url('/sprites/message.svg')}.sprite.coin{--sprite:url('/sprites/coin.png')}
.demo-section{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,7vw,92px);align-items:center;padding-block:44px 52px;border-top:1px solid var(--edge)}
.demo-intro p{max-width:33ch}
.graphite .demo-shell,.graphite .spotlight{background:#141417;border-color:#33333b;box-shadow:0 14px 36px #0005}
.graphite .demo-tail,.graphite .channel,.graphite .card-foot{border-color:#34343a}
.graphite .discord-stage,.graphite discord-messages,.graphite discord-message{background:#161619;--discord-background-color:#161619}
.graphite wa-tab-group::part(nav),.graphite .clip-tools{background:#202026}
.graphite .preview-card{background:#242429;border-color:#36363d}
.graphite .dock{background:#2c2c33;border-color:#2c2c33;border-radius:13px}
.graphite .dock a{align-items:center;justify-content:flex-start;gap:8px;background:#151518}
.graphite .dock a:hover{background:#222227}
.graphite .dock a>span:last-child{margin-left:auto}
.graphite .community-band{background:transparent;border-block:0}
.graphite .feature-grid article,.graphite .final-cta{background:#17171b;border-color:#303038}
.graphite .feature-grid h3{display:flex;align-items:center;gap:9px}
.graphite .log-sample{background:#111114;border-color:#303038}
.graphite .security-visual{z-index:0}
.graphite .arcade-art,.graphite .record-art{background:radial-gradient(ellipse at center,#291211,#111114 72%)}
.graphite .directory{padding-top:38px}
.directory-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,360px);gap:18px;align-items:end;border-bottom:1px solid var(--edge);padding-bottom:22px;margin-bottom:22px}
.graphite .directory-title h1{font-size:clamp(1.95rem,3.7vw,2.45rem);letter-spacing:-.046em;margin:0 0 9px}
.graphite .directory-title p{margin:0;font-size:.9rem}
.graphite .searchbar{margin:0}
.graphite .searchbar input{background:#151519;border:1px solid #333339;color:#f2f2f4}
.graphite .searchbar kbd{border-color:#37373f;color:#aeb0ba}
.graphite{--sidebar-width:210px}
.graphite .directory-grid{grid-template-columns:var(--sidebar-width) minmax(0,1fr);gap:28px}
.graphite .segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:3px;border:1px solid #2f2f37;border-radius:11px;background:#151519;margin-bottom:16px}
.graphite .segmented button{display:grid;place-items:center;margin:0;padding:7px 9px;text-align:center}
.graphite .segmented button:focus-visible{outline-offset:-3px}
.graphite .segmented button,.graphite .directory-grid aside button,.graphite .row-actions button{border:1px solid transparent;border-radius:8px;background:transparent;color:#b6b6c0}
.graphite .segmented button:hover,.graphite .directory-grid aside button:hover,.graphite .row-actions button:hover{background:#222228;color:#fff}
.graphite .segmented button[aria-pressed=true],.graphite .directory-grid aside button[aria-pressed=true]{background:var(--red-surface)!important;border-color:var(--red-edge)!important;color:var(--text)}
.graphite .directory-grid aside h2{font-size:.82rem;color:#a7a7b0;font-weight:600}
.graphite :is(#categories button,.dashboard-menu a){display:flex;align-items:center;justify-content:flex-start;gap:7px;padding:5px;font-size:.82rem}
.graphite #categories button>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.graphite .directory-grid aside small{margin-left:auto;padding-right:3px}
.graphite :is(#categories,.dashboard-menu) .sprite{width:25px;height:25px;border-radius:7px}
.graphite :is(#categories,.dashboard-menu) .sprite::before{width:14px;height:14px}
@media(max-width:760px){.graphite{--sidebar-width:150px}}
@media(max-width:540px){
  .graphite #categories{display:flex;gap:5px;overflow:auto;max-width:100%;padding:4px 4px 8px}
  .graphite #categories button{flex:none;width:auto;white-space:nowrap;margin:0}
}
.graphite .result-toolbar h2{font-size:1.18rem;letter-spacing:-.025em;margin:0}
.graphite .command-row::part(base){background:#151519;border:1px solid #28282f;border-radius:12px}
.graphite .command-row::part(header){padding:11px 13px}
.graphite .command-row[open]::part(base),.graphite .command-row:hover::part(base){border-color:#4d2624}
.graphite .command-name{font-size:.85rem;color:#eeeeef}
.graphite .row-label{color:#9d9da8}
.integrations{padding-block:38px 54px}
.integration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.integration-grid a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px;background:#151518;border:1px solid var(--edge);border-radius:12px;text-decoration:none;transition:background-color 160ms ease,border-color 160ms ease}
.integration-grid a:is(:hover,:focus-visible){background:#1a1a1e;border-color:var(--red-edge)}
.integration-grid strong{display:block;font-size:.92rem}
.integration-grid p{margin:2px 0 0;font-size:.84rem}
.integration-grid .sprite:has(img)::before{display:none}
.integration-grid .sprite img{width:17px;height:17px;object-fit:contain}
.integration-arrow{color:var(--red);transition:transform 160ms ease}
.integration-grid a:is(:hover,:focus-visible) .integration-arrow{transform:translateX(3px)}
@media(max-width:540px){.integration-grid{grid-template-columns:1fr}}
.graphite .segmented,.graphite #categories{position:relative;isolation:isolate}
.selection-frame{
  position:absolute;top:0;left:0;z-index:0;pointer-events:none;
  width:var(--selection-width,0px);height:var(--selection-height,0px);
  transform:translate(var(--selection-x,0px),var(--selection-y,0px));
  background:var(--red-surface);border:1px solid var(--red-edge);border-radius:8px;visibility:hidden;
  transition:transform 230ms cubic-bezier(.2,.75,.25,1),width 230ms cubic-bezier(.2,.75,.25,1),height 230ms cubic-bezier(.2,.75,.25,1);
}
.has-selection-frame>.selection-frame{visibility:visible}
.graphite .has-selection-frame>button,.graphite #demo.has-selection-frame>wa-tab{position:relative;z-index:1}
.graphite .has-selection-frame>button[aria-pressed=true]{background:transparent!important;border-color:transparent!important}
.graphite #categories.has-selection-frame>button[aria-pressed=true]{background:transparent!important;border-color:transparent!important}
.graphite #demo.has-selection-frame{--indicator-color:transparent;--track-color:transparent}
.graphite #demo::part(tabs){padding-block:4px}
.graphite #demo .selection-frame{border-radius:9px}
.graphite .has-hover-frame{position:relative;isolation:isolate}
.graphite .hover-frame{
  visibility:visible;opacity:0;background:#ffffff0a;border-color:#ffffff0d;
  transition:transform 180ms ease-out,width 180ms ease-out,height 180ms ease-out,opacity 130ms ease-out;
}
.graphite .hover-frame[data-visible]{opacity:1}
.graphite .has-hover-frame>button,.graphite .has-hover-frame>a{position:relative;z-index:1}
.graphite .nav-inner nav .hover-frame{border-radius:999px}
.graphite .nav-inner nav.has-hover-frame a:hover:not([aria-current]),.graphite #categories.has-hover-frame button:hover:not([aria-pressed=true]){background:transparent}
.graphite #results .hover-frame{z-index:2;border-radius:11px}
.graphite .searchbar input{transition:border-color 150ms ease,box-shadow 150ms ease}
.graphite .searchbar input:focus{border-color:var(--red-edge);box-shadow:0 0 0 3px #d61c2026}
.graphite .command-row{--show-duration:180ms;--hide-duration:140ms;--wa-transition-normal:180ms}
.graphite .command-row::part(base){transition:border-color 150ms ease,background-color 150ms ease}
.graphite .command-row[open]::part(base){background:#18181c}
.graphite .row-actions button{transition:background-color 150ms ease,color 150ms ease}
.graphite .clip-options input{
  appearance:none;height:5px;border-radius:999px;cursor:pointer;
  background:linear-gradient(var(--red),var(--red)) left center / var(--range-fill,0%) 100% no-repeat,#48484e;
  transition:background-size 135ms ease-out;
}
.graphite .clip-options input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--red-ink)}
.graphite .clip-options input::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--red-ink)}
@media(prefers-reduced-motion:reduce){.graphite .command-row{--show-duration:0ms;--hide-duration:0ms;--wa-transition-normal:0ms}}
.feature-grid article:hover .sprite,.feature-grid article:focus-within .sprite{color:#ff6657;transform:translateY(-2px)}
.feature-grid .sprite{transition:transform 160ms ease,color 160ms ease}
@media(max-width:540px){.graphite .nav-cta{display:none}}
@media(max-width:760px){.graphite .hero{grid-template-columns:1fr}.graphite .hero-features{justify-self:start;display:flex;flex-wrap:wrap;gap:8px}.hero-features a:nth-child(n){margin-left:0}.demo-section{grid-template-columns:1fr}.graphite .directory-grid{gap:13px}}
@media(max-width:540px){.graphite .wrap{width:calc(100% - 28px)}.graphite .nav-inner{grid-template-columns:1fr auto;min-height:65px;gap:5px}.graphite .brand{font-size:1.1rem}.bot-avatar{width:29px;height:29px;margin-right:5px}.graphite .nav-inner nav a{padding:6px 7px;font-size:.71rem}.graphite .hero{padding:44px 0 53px}.graphite .hero-band{min-height:0}.hero-features a{font-size:.75rem;padding:4px 8px 4px 4px;gap:4px}.hero-features .sprite{width:23px;height:23px}.hero-features .sprite::before{width:14px;height:14px}.directory-head,.graphite .directory-grid{grid-template-columns:minmax(0,1fr)}.graphite .directory{padding-top:22px}.graphite .segmented{margin-bottom:10px}}