/* Graphite product theme. Layout and responsive primitives live in styles.css. */
:root {
  color-scheme: dark;
  --paper: #101112;
  --ink: #ededee;
  --muted: #a1a3a6;
  --line: #2c2e31;
  --accent: #eba86c;
  --dark: #181a1c;
  --mint: #eba86c;
  --white: #f4f4f4;
}
body { background: #101112; }
::selection { background: #d9a374; color: #111; }
.header { background: #101112f2; border-color: #26282b; }
.nav-bar { min-height: 82px; }
.brand { color: #f0f0f1; }
.navigation { color: #babcbf; }
.navigation > a:hover { color: #fff; }
.navigation .nav-cta { background: #282a2c; color: #eeeff0; border-color: #44464a; }
.navigation .nav-cta:hover { background: #383a3d; }
.navigation > a:not(.nav-cta):after { background: #eba86c; }
.hero { position: relative; padding-top: 62px; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0 -56px 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, #7a4b2217, transparent 60%); }
.hero-top { justify-content: space-between; }
.hero-badge { background: #1c1b19; border: 1px solid #40362c; border-radius: 30px; padding: 7px 13px; font-size: 9px; letter-spacing: .13em; color: #d7b18f; }
.hero-grid { display: block; text-align: left; padding: 38px 0 42px; }
.hero-copy { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 60px; align-content: center; align-items: center; }
.hero-copy h1 { grid-column: 1; grid-row: 1 / 4; }
.hero-description, .hero-actions, .hero-release { grid-column: 2; }
.hero h1 { font-size: clamp(58px, 6.6vw, 92px); font-weight: 500; letter-spacing: -.065em; line-height: 1.03; }
.hero h1 > span { color: #eba86c; }
.hero-description { margin-top: 23px; font-size: 15px; line-height: 1.85; color: #aaadb1; letter-spacing: -.01em; }
.hero-description strong { color: #e4e5e6; font-weight: 600; }
.hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-top: 28px; }
.primary-action, .secondary-action { display: inline-flex; gap: 21px; align-items: center; justify-content: center; padding: 12px 19px; border-radius: 4px; font-size: 11px; font-weight: 700; border: 1px solid #37393c; transition: background .2s, border-color .2s; }
.primary-action { color: #21170e; background: #eba86c; border-color: #eba86c; }
.primary-action:hover { background: #f5bd8c; border-color: #f5bd8c; }
.secondary-action { color: #d1d2d4; background: #1a1c1e; }
.secondary-action:hover { background: #2a2c2e; border-color: #5b5e61; }
.primary-action .icon, .secondary-action .icon { width: 16px; height: 16px; }
.hero-release { display: flex; align-items: center; gap: 7px; color: #999da1; font-size: 9px; margin-top: 20px; }
.hero-release .status-dot { width: 4px; height: 4px; background: #83898f; }
.hero-bottom { color: #aaaeb4; padding-block: 22px; border-color: #282b2e; gap: 18px; flex-wrap: wrap; }
.hero-bottom .micro { font-size: 9px; }
.hero-coordinate { color: #8e9298; }
.workspace-shell { background: #1d1f21; border-color: #424448; border-radius: 9px; box-shadow: 0 0 0 6px #191b1c, 0 25px 75px -20px #000a; }
.workspace-toolbar { color: #979ba0; background: #1e2022; }
.workspace-toolbar > span:first-child { color: #c6c9cd; }
.workspace-toolbar .status-dot { background: #e7a46c; }
.preview-tabs { background: #1e2022; }
.preview-tabs button { color: #b6b9bd; border-color: #404347; }
.preview-tabs button[aria-selected=true] { background: #343638; color: #f2f2f2; border-color: #6e6359; box-shadow: inset 0 -2px #dca16c; }
.preview-tabs button:hover { border-color: #9c826a; }
.preview-tab-note { color: #999da2; }
.workspace-caption { color: #a2a6ac; background: #1d1f21; }
.expand-hint { color: #ebecee; background: #262a2eed; border-color: #69625b; box-shadow: 0 5px 20px #0008; }
.spec-strip { margin-top: 7px; padding-block: 29px; color: #b2b5b9; }
.spec-strip i { color: #b68b67; }
.section-intro > .eyebrow, .faq-intro > .eyebrow, .details-header > .eyebrow { color: #c89870; }
.muted-heading { color: #868b91; }
.section-heading-row > p { color: #a1a5aa; }
.workflow-item h3 { color: #e3e5e7; }
.feature-top .micro { color: #92979e; }
.feature-tags li { border-color: #36393d; background: #181a1c; color: #b1b5ba; }
.feature-icon { stroke: #dca16c; }
.native-section { background: #181a1c; color: #e9eaec; border-block: 1px solid #303236; }
.native-copy .eyebrow { color: #d7a173; }
.native-copy h2 > span { color: #949ba3; }
.native-copy > p:not(.eyebrow) { color: #a8adb3; }
.native-specs { color: #c4c8ce; }
.native-specs .icon { stroke: #dca16c; }
.native-layout { grid-template-columns: .85fr 1.2fr; gap: 65px; }
.tooling-preview { min-width: 0; border: 1px solid #44474b; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 45px #0004; }
.tooling-preview > p { background: #1d1f21; color: #b2b6bc; font-size: 9px; padding: 12px 15px; }
.native-drawing { background-color: #141618; background-image: linear-gradient(#32353a45 1px,transparent 1px),linear-gradient(90deg,#32353a45 1px,transparent 1px); border-color: #3b3e43; }
.native-drawing > img { filter: saturate(.4); }
.drawing-label, .drawing-footer { color: #a5aab0; }
.drawing-footer { border-color: #363a3f; }
.deployment-card { border-color: #373b40; background: #1a1d20; }
.server-card { background: #1a1c1e; }
.deployment-header .micro { color: #a6abb1; }
.small-label { color: #a6adb5; border-color: #40454b; }
.art-node, .server-card .art-node { background: #252a2f; color: #c7ccd2; border-color: #5a646e; }
.large-node, .server-card .large-node { background: #3d2f24; color: #f0bf96; border-color: #a07350; }
.connection-line { background: #646c76; }
.connection-line.dashed { border-color: #646c76; }
.connection-line:after { background: #e7a56e; }
.local-boundary { border-color: #464c54; }
.deployment-card > p { color: #a6acb3; }
.deployment-foot { border-color: #373d44; color: #b3b9bf; }
.deployment-foot .status-dot { background: #cb976c; }
.section-note { color: #939aa2; }
.details-grid p { color: #a0a6ae; }
.detail-number { color: #cd9a72; }
.download-section { position: relative; background: #1b1b1c; border-color: #383534; }
.download-layout .eyebrow { color: #d6aa85; }
.download-layout p { color: #b1ada9; }
.release-note { color: #a29b95; }
.download-button { background: #242324; border-color: #494443; color: #e2deda; }
.download-button small { color: #aaa29c; }
.coming-soon { color: #d5af8f; border-color: #6c5341; background: #312820; }
.download-options #download-note { color: #a49b94; }
.faq-list summary { color: #d0d4d8; }
.faq-list summary > .icon { color: #b7a28f; }
.faq-list details > p { color: #a1a7ad; }
.footer { background: #0d0e0f; }
.footer-top > p { color: #969ca2; }
.footer-top .text-link { color: #b4b7ba; }
.footer-bottom { color: #989ea5; }
.image-dialog { background: #17191b; color: #efefef; border-color: #555b62; }
.image-dialog::backdrop { background: #08090bf0; }
.dialog-toolbar { background: #17191b; }
.dialog-toolbar p { color: #c2c7ce; }
.dialog-close { color: #ddd; border-color: #59626c; }
.skip-link { background: #eba86c; color: #17120d; }
@media (max-width: 1100px) {
  .hero::before { inset-inline: -32px; }
  .hero { padding-top: 52px; }
  .hero h1 { font-size: 6.8vw; }
  .hero-copy { column-gap: 30px; }
  .hero-actions { gap: 8px; }
  .primary-action, .secondary-action { gap: 10px; font-size: 10px; padding: 11px 12px; }
}
@media (max-width: 800px) {
  .nav-bar { min-height: 74px; }
  .menu-toggle { border-color: #41454b; }
  .menu-toggle > span { background: #d9dde1; }
  .navigation { background: #16181a; border-color: #363a3f; box-shadow: 0 12px 20px #0007; }
  .hero::before { inset-inline: -32px; }
  .hero { padding-top: 42px; }
  .hero h1 { font-size: 10vw; }
  .hero-grid { padding-bottom: 32px; }
  .hero-copy { padding-top: 0; display: block; }
  .native-layout { grid-template-columns: 1fr; gap: 40px; }
  .tooling-preview { width: 100%; }
  .hero-description { font-size: 13px; }
  .workspace-shell { box-shadow: 0 0 0 4px #191b1c, 0 20px 45px #0006; }
}
@media (max-width: 520px) {
  .hero::before { inset-inline: -18px; }
  .hero { padding-top: 38px; }
  .hero h1 { font-size: 15vw; line-height: .99; }
  .hero h1 > span { display: block; margin-top: 3px; }
  .hero-description { margin-top: 22px; font-size: 12px; line-height: 1.9; max-width: 310px; }
  .hero-actions { gap: 8px; margin-top: 23px; width: 100%; }
  .primary-action, .secondary-action { padding: 11px 12px; font-size: 9px; gap: 10px; }
  .hero-release { font-size: 8px; }
  .hero-bottom .micro { font-size: 8px; }
  .hero-bottom .hero-coordinate { display: block; font-size: 7px; letter-spacing: 0; }
  .hero .eyebrow { font-size: 8px; }
  .hero-grid { padding-top: 26px; padding-bottom: 30px; }
  .hero-copy { padding-top: 0; }
  .hero-description { max-width: 340px; }
  .hero-bottom { justify-content: flex-start; gap: 13px 21px; padding: 17px 0; }
  .hero-top .hero-coordinate { display: none; }
}