/* Tokens are a local snapshot of growthbricks-app/design/tokens.
   See research/design-alignment.md for provenance and update instructions. */
@import './tokens/fonts.css';
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';
@import './tokens/shape.css';
@import './tokens/effects.css';
@import './tokens/motion.css';
@import './tokens/base.css';

:root{--help-header:64px;--help-toc:192px;font-synthesis:none}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0}button:disabled{cursor:default}
a,button,input{-webkit-tap-highlight-color:transparent}
a{text-underline-offset:3px}
button,a{transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}
.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;top:-100px;left:var(--space-16);z-index:var(--z-toast);padding:var(--space-12) var(--space-20);background:var(--background-inverse);color:var(--text-inverse);border-radius:var(--radius-sm)}
.skip-link:focus{top:var(--space-12)}
.site-header{height:var(--help-header);display:flex;align-items:center;gap:var(--space-32);padding-right:var(--space-32);position:sticky;top:0;background:var(--background-canvas);z-index:var(--z-sticky)}
.brand{display:flex;align-items:center;gap:var(--space-10);align-self:stretch;width:var(--sidebar-width);flex:none;padding:0 var(--space-24);background:var(--background-subtle);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--text-primary)}
.brand:hover{text-decoration:none}
.brand-mark{width:20px;height:20px;flex:none}
.brand-help{margin-left:var(--space-8);color:var(--text-secondary);font-size:var(--font-size-label);font-weight:var(--font-weight-regular)}
.open-app,.sidebar-app{display:flex;align-items:center;gap:var(--space-8);font-size:var(--font-size-body-sm)}
.open-app{margin-left:auto;white-space:nowrap;padding:var(--space-8) var(--space-12);border-radius:var(--radius-sm)}
.open-app:hover{background:var(--background-hover);text-decoration:none}
.search-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);width:360px;max-width:40vw;min-height:var(--control-height-md);padding:var(--space-8) var(--space-12);border-radius:var(--radius-sm);background:var(--background-subtle);color:var(--text-secondary);font-size:var(--font-size-body-sm);text-align:left}
.search-trigger:hover{background:var(--background-active)}
.search-trigger>span{display:flex;align-items:center;gap:var(--space-8)}
kbd{font:inherit;font-size:var(--font-size-caption);white-space:nowrap}
.menu-toggle{display:none;background:var(--background-subtle);padding:var(--space-8) var(--space-12);border-radius:var(--radius-sm)}
.site-layout{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr) var(--help-toc);min-height:calc(100dvh - var(--help-header))}
.site-layout:not(:has(.toc)){grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.sidebar{position:sticky;top:var(--help-header);height:calc(100dvh - var(--help-header));overflow-y:auto;scrollbar-width:thin;padding:var(--space-16) var(--space-12) var(--space-32);background:var(--background-subtle)}
.sidebar a{display:block;padding:var(--space-8) var(--space-12);border-radius:var(--radius-sm);font-size:var(--font-size-body-sm);line-height:var(--line-height-snug);color:var(--text-secondary);text-decoration:none}
.sidebar a:hover{background:var(--background-active);color:var(--text-primary)}
.sidebar a.active{background:var(--background-surface);box-shadow:var(--shadow-raised);font-weight:var(--font-weight-medium);color:var(--text-primary)}
.nav-home{margin-bottom:var(--space-24)}
.nav-group{margin-bottom:var(--space-16)}
.nav-label{margin:0;padding:var(--space-10) var(--space-12);font-size:var(--font-size-label);font-weight:var(--font-weight-medium);color:var(--text-primary)}
.nav-group ul{list-style:none;margin:0;padding:0}
.sidebar .sidebar-app{display:flex;justify-content:space-between;margin-top:var(--space-32)}
main{min-width:0;padding:var(--space-48) var(--space-48) 0}
main:focus{box-shadow:none}
h1,h2,h3{color:var(--text-primary)}
h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-heading);margin:0 0 var(--space-16)}
h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-medium);line-height:var(--line-height-snug)}
h3{font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);line-height:var(--line-height-snug)}
.home{margin:0}
.home h1{font-size:var(--font-size-display);letter-spacing:var(--letter-spacing-display)}
.home-intro{color:var(--text-secondary);margin:0 0 var(--space-24)}
.primary-link{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-16);min-height:var(--control-height-lg);padding:var(--space-10) var(--space-16);border-radius:var(--radius-sm);background:var(--accent-primary);color:var(--accent-on-primary);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-medium)}
.primary-link:hover{color:var(--accent-on-primary);background:var(--accent-primary-hover);text-decoration:none}
.primary-link:active{background:var(--accent-primary-active)}
.start-path{margin-top:var(--space-48);padding:var(--space-24);background:var(--background-subtle);border-radius:var(--radius-lg)}
.section-head{margin-bottom:var(--space-16)}
.section-head h2{margin:0 0 var(--space-4)}
.section-head p{margin:0;color:var(--text-secondary);font-size:var(--font-size-body-sm)}
.setup-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)}
.setup-steps a{display:flex;align-items:start;gap:var(--space-12);padding:var(--space-12) 0;color:var(--text-primary)}
.step-number{font:var(--font-size-label)/var(--line-height-normal) var(--font-mono);padding-top:var(--space-2);color:var(--text-tertiary)}
.setup-steps strong{display:block;font-weight:var(--font-weight-medium)}
.setup-steps small{display:block;font-size:var(--font-size-body-sm);color:var(--text-secondary);margin-top:var(--space-4)}
.task-section{margin-top:var(--space-48)}
.task-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-24)}
.guide-card{display:block;padding:var(--space-16);margin-left:calc(-1 * var(--space-16));border-radius:var(--radius-md);color:var(--text-primary)}
.guide-card:hover{background:var(--background-hover);text-decoration:none}
.guide-card h3{margin:0 0 var(--space-8);display:flex;align-items:center;justify-content:space-between;gap:var(--space-12)}
.guide-card p{font-size:var(--font-size-body-sm);color:var(--text-secondary);margin:0;max-width:40ch}
.help-band{margin-top:var(--space-48);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-32)}
.help-band h2{margin:0 0 var(--space-16)}
.band-links{display:flex;flex-direction:column;align-items:start;gap:var(--space-12)}
.band-links a{display:inline-flex;align-items:center;gap:var(--space-8);font-size:var(--font-size-body-sm)}
article{margin:0}
.breadcrumbs{display:flex;align-items:center;gap:var(--space-8);font-size:var(--font-size-caption);color:var(--text-secondary);margin:0 0 var(--space-32)}
.breadcrumbs .icon{width:14px;height:14px}
.article-header{margin-bottom:var(--space-32)}
.article-description{color:var(--text-secondary);margin:0;font-size:var(--font-size-body)}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--space-16);font-size:var(--font-size-caption);color:var(--text-tertiary);margin-top:var(--space-16)}
.prose{overflow-wrap:break-word}
.prose p{margin:0 0 var(--space-16)}
.screenshot{margin:var(--space-24) 0 var(--space-32);max-width:var(--screenshot-width,100%)}
@media(max-width:700px){.screenshot{max-width:var(--screenshot-mobile-width,100%)}}
.screenshot-link{display:block;padding:var(--space-12);background:var(--background-subtle);border-radius:var(--radius-md);cursor:zoom-in}
.screenshot picture{display:block}
.screenshot img{display:block;width:100%;height:auto;border-radius:var(--radius-sm)}
.screenshot figcaption{margin-top:var(--space-8);font-size:var(--font-size-label);line-height:var(--line-height-normal);color:var(--text-secondary)}
.screenshot-enlarge{margin-left:var(--space-8);white-space:nowrap}
.screenshot-dialog{width:min(1320px,calc(100% - 32px));max-height:92dvh;border:0;border-radius:var(--radius-lg);padding:var(--space-24);color:var(--text-primary);background:var(--background-surface);box-shadow:var(--shadow-dialog)}
.screenshot-dialog::backdrop{background:var(--background-overlay)}
.screenshot-view{overflow:auto;max-height:70dvh;background:var(--background-subtle);border-radius:var(--radius-sm)}
.screenshot-view img{display:block;width:100%;height:auto;min-width:360px}
.screenshot-caption{font-size:var(--font-size-body-sm);margin:var(--space-16) 0 var(--space-8);color:var(--text-secondary)}
.screenshot-original{font-size:var(--font-size-body-sm)}
.close-screenshot{min-height:var(--control-height-md);padding:var(--space-8) var(--space-12);background:var(--background-subtle);border-radius:var(--radius-sm)}
.prose details{margin:var(--space-24) 0;padding:var(--space-16);border-radius:var(--radius-md);background:var(--background-subtle)}
.prose summary{cursor:pointer;font-weight:var(--font-weight-medium);color:var(--text-accent)}
.prose details[open]>summary{margin-bottom:var(--space-16)}
.prose details>:last-child{margin-bottom:0}
.prose h2{margin:var(--space-32) 0 var(--space-16);scroll-margin-top:calc(var(--help-header) + var(--space-24))}
.prose h3{margin:var(--space-24) 0 var(--space-12);scroll-margin-top:calc(var(--help-header) + var(--space-24))}
.prose ul,.prose ol{padding-left:var(--space-24);margin:0 0 var(--space-24)}
.prose li{padding-left:var(--space-4);margin-bottom:var(--space-12)}
.prose li::marker{color:var(--text-secondary)}
.prose strong{font-weight:var(--font-weight-medium)}
.prose a{text-decoration:underline}
.prose .heading-link{display:inline-flex;text-decoration:none;margin-left:var(--space-8);color:var(--text-tertiary);opacity:0}
.heading-link .icon{width:16px;height:16px}
.prose h2:hover .heading-link,.prose h3:hover .heading-link,.prose .heading-link:focus-visible{opacity:1}
.prose code{font:inherit;font-size:var(--font-size-body-sm);overflow-wrap:anywhere;background:var(--background-subtle);padding:var(--space-2) var(--space-4);border-radius:var(--radius-xs)}
.prompt{background:var(--background-subtle);border-radius:var(--radius-md);margin:var(--space-24) 0;padding:var(--space-16)}
.prompt-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);font-size:var(--font-size-label);color:var(--text-secondary)}
.copy-prompt{background:var(--background-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-raised);padding:var(--space-6) var(--space-10);min-height:var(--control-height-md);font-size:var(--font-size-label);color:var(--text-accent)}
.copy-prompt:hover{background:var(--background-selected)}
.prose pre{font-family:var(--font-sans);white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--space-16) 0 0}
.prose pre code{background:none;padding:0;font:inherit}
.table-wrap{overflow-x:auto;margin:var(--space-24) 0}
table{width:100%;border-collapse:separate;border-spacing:0 var(--space-4);font-size:var(--font-size-body-sm);text-align:left;line-height:var(--line-height-normal)}
th,td{padding:var(--space-12);vertical-align:top}
th{background:var(--background-subtle);font-weight:var(--font-weight-medium)}
th:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
th:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
tbody tr:nth-child(even){background:var(--gb-n-25)}
td:first-child{min-width:120px}
blockquote{margin:var(--space-24) 0;padding:var(--space-16) var(--space-20);background:var(--background-selected);border-radius:var(--radius-md)}
blockquote p:last-child{margin-bottom:0}
.next-steps{margin-top:var(--space-48)}
.next-steps>h2{font-size:var(--font-size-h3);margin:0 0 var(--space-12)}
.next-steps ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-8)}
.next-steps a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding:var(--space-16);border-radius:var(--radius-md);background:var(--background-subtle);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-medium)}
.next-steps a:hover{background:var(--background-selected);text-decoration:none}
.toc{align-self:start;position:sticky;top:var(--help-header);padding:var(--space-48) var(--space-24) var(--space-24) 0;font-size:var(--font-size-label)}
.toc>p{font-weight:var(--font-weight-medium);margin:0 0 var(--space-12)}
.toc ul{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:var(--space-6) 0;color:var(--text-secondary)}
.page-footer{margin:var(--space-64) 0 0;padding:var(--space-24) 0;display:flex;flex-wrap:wrap;gap:var(--space-16);font-size:var(--font-size-caption);color:var(--text-tertiary)}
.lesson-video{margin:var(--space-24) 0}.video-label{font-size:var(--font-size-body-sm);color:var(--text-secondary)}
.lesson-video video{display:block;width:100%;aspect-ratio:16/9;background:var(--background-inverse);border-radius:var(--radius-md)}
.lesson-video>a{display:inline-block;margin-top:var(--space-12);font-size:var(--font-size-body-sm)}
.not-found{margin:0;padding:var(--space-48) 0}
.search-dialog{position:fixed;top:10vh;margin:0 auto;width:min(640px,calc(100% - 32px));max-height:80dvh;overflow-y:auto;border:0;border-radius:var(--radius-lg);padding:var(--space-24);background:var(--background-surface);color:var(--text-primary);box-shadow:var(--shadow-dialog)}
.search-dialog::backdrop{background:var(--background-overlay)}
.search-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);margin-bottom:var(--space-16)}
.search-head h2{font-size:var(--font-size-h3);margin:0}
.close-search{border-radius:var(--radius-sm);background:var(--background-subtle);min-height:var(--control-height-md);padding:var(--space-8) var(--space-12);font-size:var(--font-size-caption)}
#search-input{width:100%;min-height:var(--control-height-lg);padding:var(--space-12) var(--space-16);border:0;border-radius:var(--radius-sm);background:var(--background-subtle);font-size:16px}
.search-status,.search-foot{font-size:var(--font-size-caption);color:var(--text-secondary);margin:var(--space-16) 0 var(--space-8)}
.search-results{list-style:none;padding:0;margin:0}
.search-results a{display:block;padding:var(--space-12);border-radius:var(--radius-sm);color:var(--text-primary)}
.search-results a:hover{background:var(--background-hover);text-decoration:none}
.search-results strong{display:block;font-size:var(--font-size-body);font-weight:var(--font-weight-medium);margin-bottom:var(--space-4)}
.search-results a>span{display:block;font-size:var(--font-size-body-sm);color:var(--text-secondary)}
.search-results a .result-section{font-size:var(--font-size-caption);margin-bottom:var(--space-4)}
@media(max-width:1200px){.site-layout{grid-template-columns:var(--sidebar-width) minmax(0,1fr)}.toc{display:none}main{padding:var(--space-40) var(--space-32) 0}.setup-steps{grid-template-columns:1fr;gap:0}.setup-steps small{margin-top:0}}
@media(max-width:940px){.open-app{display:none}.search-trigger{margin-left:auto}.task-links,.help-band{grid-template-columns:1fr}.home h1{font-size:var(--font-size-h1)}.site-header{gap:var(--space-16)}}
@media(max-width:700px){
  .site-header{height:var(--help-header);padding:0 var(--space-16);gap:var(--space-12)}
  .brand{width:auto;min-width:0;padding:0;background:transparent}.brand-help{display:none}
  .search-trigger{width:40px;height:40px;max-width:none;padding:var(--space-10);flex:none}
  .search-trigger .search-label,.search-trigger kbd{display:none}
  .menu-toggle{display:block;min-height:40px;font-size:var(--font-size-label)}
  .site-layout,.site-layout:not(:has(.toc)){display:block}
  .sidebar{display:none}
  .nav-open .sidebar{display:block;position:fixed;inset:var(--help-header) 0 0;z-index:var(--z-dropdown);height:calc(100dvh - var(--help-header));padding:var(--space-24)}
  .nav-open{overflow:hidden}.sidebar a{min-height:var(--control-height-lg)}
  main{padding:var(--space-32) var(--space-24) 0}
  .start-path{margin-top:var(--space-32);padding:var(--space-20)}
  .task-section,.help-band{margin-top:var(--space-32)}
  .guide-card{margin-left:0;padding:var(--space-16) 0}
  .guide-card:hover{background:transparent;text-decoration:underline}
  .article-header{margin-bottom:var(--space-24)}
  .prose .heading-link{opacity:1}
  table{min-width:380px}
  .search-dialog{top:5vh;max-height:90dvh;padding:var(--space-20)}
  .page-footer{margin-top:var(--space-48)}
  html:not(.js) .sidebar{display:block;position:static;height:auto;max-height:280px}
}
@media print{
  .site-header,.sidebar,.toc,.next-steps,.search-dialog,.screenshot-dialog,.page-footer,.copy-prompt,.heading-link,.lesson-video,.screenshot-enlarge{display:none!important}
  .site-layout{display:block!important}main{padding:0}article{max-width:none}.prose{font-size:11pt}h1{font-size:26pt}
  a{text-decoration:none;color:inherit!important}.prompt{break-inside:avoid}.table-wrap{overflow:visible}table{min-width:0}.article-meta{display:none}
}