.boraq {
  --boraq-ink: #15161a;
  --boraq-gold: #e7a251;
  --boraq-cream: #fbf6ee;
  --boraq-line: #e8ddd0;
  --boraq-muted: #5e5550;
}
.boraq [hidden] { display: none !important; }
.boraq :is(a, button, summary):focus-visible { outline: 3px solid #ad641d; outline-offset: 4px; }
.boraq > .bar { position: sticky; z-index: 20; top: 0; color: var(--boraq-ink); background: #fff; border-color: var(--boraq-line); }
.boraq > .bar nav { min-height: 66px; padding-block: 8px; gap: 8px 18px; }
.boraq > .bar .brand { color: var(--boraq-ink); }
.boraq > .bar .borax-logo { width: 125px; }
.boraq .navlinks { gap: 6px 16px; }
.boraq .navlinks > a { padding-block: 7px; }
.boraq .navlinks > .button { border-radius: 99px; padding-inline: 15px; }
.boraq .site-menu { position: relative; }
.boraq .site-menu summary { display: flex; align-items: center; gap: 7px; width: max-content; padding: 7px 0; list-style: none; cursor: pointer; font-weight: 650; }
.boraq .site-menu summary::-webkit-details-marker { display: none; }
.boraq .site-menu summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.boraq .site-menu[open] summary::after { transform: translateY(2px) rotate(225deg); }
.boraq .site-menu-panel { position: absolute; z-index: 2; top: calc(100% + 5px); left: 0; width: min(300px, 80vw); max-height: 65vh; overflow: auto; padding: 7px; background: #fff; border: 1px solid var(--boraq-line); border-radius: 13px; box-shadow: 0 18px 45px #15161a35; }
.boraq .site-menu-panel a { display: block; color: var(--boraq-ink); text-decoration: none; padding: 9px 11px; border-radius: 7px; font-weight: 700; line-height: 1.3; }
.boraq .site-menu-panel a:hover, .boraq .site-menu-panel a:focus-visible { background: var(--boraq-cream); }
.boraq .site-menu-panel small { display: block; color: var(--boraq-muted); font-weight: 400; margin-top: 3px; }
.boraq .site-shade { position: fixed; inset: 0; z-index: 19; background: #15161a68; }
.boraq .site-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 90% 35%,#714922 0%,transparent 45%),linear-gradient(135deg,#242024,#15161a 66%); }
.boraq .site-hero .split { gap: clamp(16px, 4vw, 54px); }
.boraq .site-hero h1 { color: #fff; font-size: clamp(2.55rem, 6vw, 5.2rem); max-width: 14ch; }
.boraq .site-hero p, .boraq .site-hero .lead { color: #ece1d7; }
.boraq .site-hero .eyebrow { color: #ffc98f; }
.boraq .site-hero .button.primary, .boraq .site-footer .button.primary { color: #15161a; background: var(--boraq-gold); border-color: transparent; }
.boraq .site-hero .button.primary:hover { box-shadow: 0 0 0 2px #ffc98f; }
.boraq .hero-diagram { position: relative; min-width: 0; padding: 16px 0 67px; }
.boraq .hero-diagram::before { content: ""; position: absolute; inset: 1% -12% 2% 3%; background: repeating-linear-gradient(132deg, transparent 0 18px, #ffcf8e16 19px 20px); mask-image: radial-gradient(ellipse, #000, transparent 73%); pointer-events: none; }
.boraq .diagram-board { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 9px; margin-left: 8%; border: 1px solid #dfb89045; background: #15161a80; border-radius: 14px; transform: rotate(-2deg); }
.boraq .diagram-lane { display: block; min-width: 0; min-height: 206px; padding: 10px 7px; background: #ffffff0e; border-radius: 8px; color: #f7e5d3; font-size: .72rem; overflow-wrap: anywhere; }
.boraq .diagram-lane span { display: block; margin-top: 9px; border: 1px solid #ffffff20; border-radius: 5px; padding: 5px; background: #ffffff0b; }
.boraq .diagram-card { position: absolute; display: block; padding: 12px 14px; border: 1px solid #ffd2a476; border-radius: 12px; background: #251c18db; backdrop-filter: blur(14px); box-shadow: 0 17px 38px #09070799,inset 0 1px #ffffff25; color: #fff; text-decoration: none; line-height: 1.33; }
.boraq .diagram-card:is(:hover,:focus-visible) { background: #4c3322; }
.boraq .diagram-card strong { display: block; margin-top: 4px; font-size: clamp(.95rem,2vw,1.2rem); }
.boraq .diagram-card small { color: #f2ccaa; }
.boraq .diagram-card:first-of-type { left: 0; top: 31%; width: 52%; }
.boraq .diagram-card:last-of-type { right: 0; bottom: 4px; width: 56%; }
.boraq .diagram-connector { position: absolute; left: 42%; top: 43%; width: 30%; height: 26%; border: solid var(--boraq-gold); border-width: 2px 2px 0 0; border-radius: 0 28px 0 0; }
.boraq .showcase { padding-block: clamp(38px,7vw,78px); background: #231d1b; color: #fff; }
.boraq .showcase h2, .boraq .showcase h3 { color: #fff; }
.boraq .showcase p { color: #ecdccc; margin-block: 12px; }
.boraq .workflow-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px 0; }
.boraq .workflow-controls button { font: inherit; font-size: .85rem; font-weight: 650; border: 1px solid #9d7960; border-radius: 99px; background: transparent; color: #fff; padding: 7px 12px; cursor: pointer; }
.boraq .workflow-controls [aria-pressed=true] { background: var(--boraq-gold); color: var(--boraq-ink); border-color: transparent; }
.boraq .workflow-preview-panel { border: 1px solid #97785e; border-radius: 14px; padding: 15px; background: #362a24; box-shadow: 0 15px 34px #100b09a1; }
.boraq .workflow-preview-panel header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; border-bottom: 1px solid #967c68; padding: 0 0 10px; font-weight: 700; }
.boraq .workflow-preview-panel small { color: #efc8a4; }
.boraq .workflow-preview-panel dl { margin: 0; }
.boraq .workflow-preview-panel dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; padding: 10px 0; border-bottom: 1px solid #967c684d; }
.boraq .workflow-preview-panel dl div:last-child { border-bottom: 0; }
.boraq .workflow-preview-panel dd { margin: 0; color: #ffd5ac; font-weight: 650; }
.boraq .template-library { background: linear-gradient(145deg,#f2d9bc,#fbf6ee 70%); }
.boraq .template-library .card { padding: 0; overflow: hidden; }
.boraq .template-library .card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--boraq-line); }
.boraq .template-library .card div { padding: 16px; }
.boraq .template-library .card a { color: #6b3a14; font-weight: 700; }
.boraq .site-footer { background: #f8f5f0; color: var(--boraq-ink); border-top: 1px solid var(--boraq-line); }
.boraq .site-footer .footer-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; gap: 20px; padding-block: 35px; }
.boraq .site-footer h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 12px; }
.boraq .site-footer a { display: block; width: fit-content; color: #48403b; margin-bottom: 6px; font-size: .9rem; }
.boraq .site-footer .footer-base { border-top: 1px solid var(--boraq-line); padding-block: 12px; font-size: .84rem; color: var(--boraq-muted); }
.boraq #main :is(section,[id]) { scroll-margin-top: 130px; }
.boraq.ops-public:has(#welcome:not([hidden])) #welcome { display: block; margin: 0 0 26px; overflow: hidden; border-radius: 20px; }
.boraq.ops-public #welcome .ops-hero-inner { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items: center; gap: 20px; padding: clamp(18px,5vw,55px); }
.boraq.ops-public #welcome .intro { padding: 0; background: none; }
.boraq.ops-public #welcome .intro h1 { color: #fff; max-width: 17ch; }
.boraq.ops-public #welcome .intro h1 em { color: #ffc98f; }
.boraq.ops-public #welcome .intro-link { color: #fff; }
.boraq.ops-public #welcome .auth { margin: 0 clamp(18px,5vw,55px) 24px; max-width: 520px; }
.boraq.ops-public #sample .workflow-preview { border-color: #b99779; }
body.ops-public:not(:has(#welcome:not([hidden]))) .public-only { display: none !important; }
body.ops-public:not(:has(#welcome:not([hidden]))) > .bar { position: initial; }
@media (max-width: 740px) {
  .boraq .hero-diagram { padding-bottom: 45px; }
  .boraq .diagram-lane { min-height: 150px; }
  .boraq .site-menu-panel { left: min(0px,calc(280px - 100vw)); }
  .boraq .site-footer .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .boraq.ops-public #welcome .ops-hero-inner { grid-template-columns: 1fr; }
}
@media (min-width: 741px) { .boraq > .bar .site-menu:last-of-type .site-menu-panel { left: auto; right: 0; } }
.boraq.ops-public #welcome .intro-actions > .button { color: #15161a; background: var(--boraq-gold); border-color: transparent; }
.boraq.ops-public #welcome .auth { background: #fff; color: #15161a; }
.boraq.ops-public #welcome .auth p { color: #5e5550; }
.boraq.ops-public #welcome .auth .button.primary { background: var(--boraq-gold); color: #15161a; }
.boraq .site-hero a:not(.button) { text-underline-offset: 4px; }
.boraq .site-footer .footer-grid a { overflow-wrap: anywhere; }
@media (max-width: 740px) {
  .boraq > .bar nav { align-items: center; }
  .boraq .site-menu { position: static; }
  .boraq .site-menu-panel { left: 12px; right: 12px; width: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .boraq .site-menu[open] .site-menu-panel { animation: boraq-menu-in 150ms ease-out; }
  @keyframes boraq-menu-in { from { opacity: .3; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
}