/* ========================================================================== rume — premium engineering-dark design system. No build step, no deps except the Geist font CDN (loaded from each HTML ). One stylesheet powers the landing, the download page and the docs SPA. ========================================================================== */ :root { /* --- palette (One Dark roots, elevated) --- */ --bg: #0A0B0E; --surface: #111319; --elevated: #191D25; --raised: #20242C; --border: #20242C; --border-2: #2A2F39; --fg: #E8EAED; --fg-dim: #C3C8D0; --muted: #8A909C; --muted-2: #5B616D; --accent: #5BA7F7; /* electric blue */ --accent-bright: #8FC6FF; --accent-ink: #06080C; /* text on accent fills */ --violet: #7C8CFF; /* mesh / secondary glow */ --cyan: #56D4C4; --green: #98C379; --amber: #E5C07B; --red: #E06C75; --purple: #C678DD; /* tinted alphas reused across surfaces */ --accent-a08: rgba(91,167,247,0.08); --accent-a14: rgba(91,167,247,0.14); --accent-a22: rgba(91,167,247,0.22); --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; --maxw: 1140px; --mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px -24px rgba(0,0,0,0.7); --shadow-float: 0 30px 80px -32px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.04) inset; --nav-h: 64px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } ::selection { background: var(--accent-a22); color: #fff; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--fg); line-height: 1.62; font-feature-settings: "cv01", "ss03"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Atmosphere: ultra-fine grain over the whole page (SVG noise data-URI). */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body > * { position: relative; z-index: 1; } a { color: var(--accent); text-decoration: none; transition: color .15s var(--ease); } a:hover { color: var(--accent-bright); } h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.022em; margin: 0 0 0.5em; color: var(--fg); font-weight: 600; } h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); letter-spacing: -0.035em; } h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -0.028em; } h3 { font-size: 1.1rem; } p { margin: 0 0 1em; color: var(--muted); } section { padding: 96px 0; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .center { text-align: center; } .muted { color: var(--muted); } .mono { font-family: var(--mono); } hr.soft { border: 0; border-top: 1px solid var(--border); margin: 0; } /* shared gradient text for accent headlines */ .grad { background: linear-gradient(110deg, var(--fg) 30%, var(--accent-bright) 70%, var(--violet)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- eyebrow pill --- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-bright); border: 1px solid var(--border-2); border-radius: 999px; padding: 5px 13px; margin-bottom: 22px; background: var(--accent-a08); } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px var(--accent); } .section-head { max-width: 62ch; margin: 0 0 52px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head p { font-size: 1.06rem; } /* ========================================================================== Nav ========================================================================== */ .nav { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; transition: background .25s var(--ease), border-color .25s var(--ease), backdrop-filter .25s var(--ease); } .nav.scrolled { background: rgba(10,11,14,0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--border); } .nav .wrap { display: flex; align-items: center; gap: 18px; height: var(--nav-h); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; } .brand img { width: 28px; height: 28px; border-radius: 8px; } .brand .mark { font-family: var(--mono); font-size: 1.02rem; } .nav .spacer { flex: 1; } .nav .links { display: flex; gap: 6px; align-items: center; } .nav .links a:not(.btn) { color: var(--muted); font-size: 0.92rem; padding: 8px 12px; border-radius: 9px; transition: color .15s var(--ease), background .15s var(--ease); } .nav .links a:not(.btn):hover { color: var(--fg); background: var(--accent-a08); } /* ⌘K search trigger in the nav */ .kbd-trigger { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 0.86rem; font-family: var(--sans); padding: 7px 10px 7px 12px; border-radius: 10px; cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); } .kbd-trigger:hover { border-color: var(--border-2); color: var(--fg-dim); } .kbd-trigger svg { width: 15px; height: 15px; flex: none; opacity: 0.85; } .kbd { font-family: var(--mono); font-size: 0.72rem; line-height: 1; color: var(--muted); border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 6px; background: var(--bg); box-shadow: 0 1px 0 rgba(0,0,0,0.4); } .kbd-trigger .kbd { display: inline-flex; gap: 1px; } @media (max-width: 720px) { .kbd-trigger .label { display: none; } .kbd-trigger { padding: 8px; } .kbd-trigger .kbd { display: none; } } @media (max-width: 680px) { .nav .links a.hide-sm { display: none; } } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: var(--sans); font-size: 0.95rem; font-weight: 550; line-height: 1; padding: 12px 18px; border-radius: 11px; border: 1px solid transparent; transition: transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(180deg, var(--accent-bright), var(--accent)); color: var(--accent-ink); font-weight: 600; box-shadow: 0 0 0 1px rgba(143,198,255,0.2) inset, 0 10px 30px -10px var(--accent-a22); } .btn-primary:hover { color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(143,198,255,0.35) inset, 0 14px 36px -10px rgba(91,167,247,0.4); } .btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--border-2); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-bright); } .btn-tg { background: #229ED9; color: #fff; box-shadow: 0 10px 30px -12px rgba(34,158,217,0.6); } .btn-tg:hover { background: #2aa9e6; color: #fff; } .btn-lg { padding: 14px 24px; font-size: 1rem; border-radius: 12px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; } .center .cta-row, .cta-row.center { justify-content: center; } /* ========================================================================== Hero ========================================================================== */ .hero { padding-top: 84px; padding-bottom: 40px; position: relative; overflow: hidden; } /* gradient mesh: blue + violet glows bleeding from the top */ .hero::before { content: ""; position: absolute; inset: -10% -10% auto -10%; height: 760px; z-index: 0; pointer-events: none; background: radial-gradient(640px 380px at 72% -4%, rgba(91,167,247,0.20), transparent 68%), radial-gradient(560px 420px at 18% 8%, rgba(124,140,255,0.14), transparent 70%), radial-gradient(900px 500px at 50% -20%, rgba(86,212,196,0.06), transparent 75%); filter: saturate(115%); } /* faint grid that fades downward */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(720px 420px at 50% 0%, #000 30%, transparent 78%); mask-image: radial-gradient(720px 420px at 50% 0%, #000 30%, transparent 78%); } .hero .wrap { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; } @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } } .hero h1 { margin-bottom: 0.35em; } .hero p.lede { font-size: 1.2rem; color: var(--fg-dim); max-width: 40ch; line-height: 1.55; } .hero p.lede b { color: var(--fg); font-weight: 600; } .hero .sub { font-size: 0.9rem; color: var(--muted-2); margin-top: 22px; } .hero .sub b { color: var(--green); font-weight: 600; } /* trust strip under the hero */ .trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; align-items: center; } .trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--muted); font-family: var(--mono); } .trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); } /* ========================================================================== Terminal mockup (living hero) ========================================================================== */ .term { background: linear-gradient(180deg, var(--surface), #0E1015); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow-float); overflow: hidden; font-family: var(--mono); position: relative; } .term::before { /* top-edge inner highlight */ content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); } .term .bar { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.018); } .term .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.95; } .term .dot.r { background: #e06c75; } .term .dot.y { background: #e5c07b; } .term .dot.g { background: #98c379; } .term .title { margin-left: 8px; font-size: 0.76rem; color: var(--muted-2); letter-spacing: 0.01em; } .term .body { padding: 20px 20px 24px; font-size: 0.85rem; line-height: 1.85; min-height: 268px; } .term .body .l { white-space: pre-wrap; word-break: break-word; } .term .p { color: var(--green); } .term .c { color: var(--accent); } .term .o { color: var(--fg-dim); } .term .a { color: var(--amber); } .term .m { color: var(--violet); } .term .dim { color: var(--muted-2); } .term .cur { display: inline-block; width: 8px; height: 1.05em; vertical-align: -2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-a22); animation: blink 1.1s steps(2, end) infinite; } @keyframes blink { 50% { opacity: 0; } } /* "pushed to phone" toast that floats over the terminal */ .term .push { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--sans); font-size: 0.8rem; color: var(--fg-dim); background: var(--accent-a08); border: 1px solid var(--accent-a22); border-radius: 10px; padding: 7px 11px; } .term .push .ico { filter: saturate(0) brightness(1.4); } /* ========================================================================== Bento feature grid ========================================================================== */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .bento .card { grid-column: span 2; } .bento .card.wide { grid-column: span 3; } .bento .card.tall { grid-column: span 2; } @media (max-width: 920px) { .bento { grid-template-columns: 1fr 1fr; } .bento .card, .bento .card.wide, .bento .card.tall { grid-column: span 1; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } } .card { background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 40%), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); position: relative; overflow: hidden; } .card::before { /* top hairline highlight */ content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); opacity: 0; transition: opacity .2s var(--ease); } .card:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: var(--shadow-card); } .card:hover::before { opacity: 1; } .card .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-a08); border: 1px solid var(--border-2); margin-bottom: 16px; font-family: var(--mono); color: var(--accent-bright); font-size: 1.15rem; } .card h3 { font-size: 1.08rem; margin-bottom: 0.4em; } .card p { margin: 0; font-size: 0.94rem; color: var(--muted); } .card p b { color: var(--fg-dim); font-weight: 600; } /* ========================================================================== Steps ========================================================================== */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; } @media (max-width: 880px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; position: relative; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--mono); font-weight: 600; font-size: 0.95rem; color: var(--accent-bright); display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: 16px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--accent-a08); } .step h3 { font-size: 1.04rem; } .step p { margin: 0; font-size: 0.93rem; } /* ========================================================================== Command box ========================================================================== */ .cmd { display: flex; align-items: stretch; background: #07080B; border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; font-family: var(--mono); max-width: 680px; box-shadow: var(--shadow-card); } .cmd code { flex: 1; padding: 15px 18px; font-size: 0.92rem; color: var(--fg); overflow-x: auto; white-space: nowrap; } .cmd code::before { content: "$ "; color: var(--green); } .cmd .copy { border: 0; border-left: 1px solid var(--border); background: var(--elevated); color: var(--muted); padding: 0 18px; cursor: pointer; font-family: var(--sans); font-size: 0.84rem; font-weight: 600; transition: color .15s var(--ease), background .15s var(--ease); } .cmd .copy:hover { color: var(--fg); background: var(--raised); } .cmd .copy.ok { color: var(--green); } .center .cmd { margin-left: auto; margin-right: auto; } /* ========================================================================== Callout / connectivity ========================================================================== */ .callout { background: linear-gradient(180deg, var(--surface), #0D0F14); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .callout::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); } .callout .two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } @media (max-width: 760px) { .callout .two { grid-template-columns: 1fr; } } .callout h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; margin-bottom: 0.5em; } .tag { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--accent-bright); background: var(--accent-a08); font-weight: 500; } .tag.alt { color: var(--cyan); border-color: rgba(86,212,196,0.3); background: rgba(86,212,196,0.07); } /* ========================================================================== Download page: detect banner + client cards ========================================================================== */ .detect { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); border: 1px solid var(--border-2); border-radius: 999px; padding: 7px 15px; margin-bottom: 22px; background: var(--surface); } .detect b { color: var(--fg); font-weight: 600; } .detect .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(152,195,121,0.6); animation: pulse 2.2s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(152,195,121,0); } 100% { box-shadow: 0 0 0 0 rgba(152,195,121,0); } } .dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 880px) { .dl-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .dl-grid { grid-template-columns: 1fr; } } .dl-card { position: relative; display: flex; flex-direction: column; gap: 6px; } .dl-card .os { font-size: 1.05rem; font-weight: 600; color: var(--fg); } .dl-card .meta { color: var(--muted-2); font-size: 0.84rem; min-height: 1.1em; font-family: var(--mono); } .dl-card .btn { margin-top: 16px; width: 100%; } .dl-card.recommended { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-card); } .reco-badge { position: absolute; top: -10px; right: 16px; background: linear-gradient(180deg, var(--accent-bright), var(--accent)); color: var(--accent-ink); font-size: 0.68rem; font-weight: 700; letter-spacing: .03em; padding: 3px 10px; border-radius: 999px; } /* ========================================================================== FAQ accordion (shared landing/download/docs) ========================================================================== */ .faq { max-width: 780px; margin: 0 auto; } details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 12px; overflow: hidden; transition: border-color .15s var(--ease); } details[open] { border-color: var(--border-2); } summary { cursor: pointer; padding: 17px 20px; font-weight: 550; color: var(--fg); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; color: var(--muted); font-family: var(--mono); font-size: 1.3rem; line-height: 1; transition: transform .2s var(--ease); } details[open] summary::after { content: "\2212"; } details .inner { padding: 0 20px 18px; color: var(--muted); font-size: 0.93rem; } details .inner p { color: var(--muted); } details .inner code { font-family: var(--mono); background: var(--bg); padding: 1px 6px; border-radius: 5px; color: var(--amber); font-size: 0.88em; } details .inner pre { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: 0.84rem; color: var(--fg-dim); line-height: 1.6; } /* ========================================================================== Footer ========================================================================== */ .foot { border-top: 1px solid var(--border); padding: 40px 0; color: var(--muted-2); font-size: 0.88rem; margin-top: 20px; } .foot .wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .foot .spacer { flex: 1; } .foot a { color: var(--muted); } .foot a:hover { color: var(--fg); } /* ========================================================================== Scroll reveal — PROGRESSIVE ENHANCEMENT. Content is fully visible by default. The hidden-then-reveal state only applies once JS confirms it's running (html.js, set by an inline script). Without JS — or if the reveal engine never runs (html.reveal- fallback safety net) — everything stays visible. Never blank the page. ========================================================================== */ .js .reveal { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); } .js .reveal.in, .reveal-fallback .reveal { opacity: 1; transform: none; filter: none; } .reveal[data-delay="1"] { transition-delay: .07s; } .reveal[data-delay="2"] { transition-delay: .14s; } .reveal[data-delay="3"] { transition-delay: .21s; } .reveal[data-delay="4"] { transition-delay: .28s; } .reveal[data-delay="5"] { transition-delay: .35s; } /* ========================================================================== ⌘K command palette (shared landing + docs) ========================================================================== */ .cmdk-backdrop { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(5,6,9,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; } .cmdk-backdrop.open { display: flex; animation: cmdk-fade .14s var(--ease); } @keyframes cmdk-fade { from { opacity: 0; } to { opacity: 1; } } .cmdk { width: 100%; max-width: 620px; background: var(--elevated); border: 1px solid var(--border-2); border-radius: 16px; box-shadow: var(--shadow-float); overflow: hidden; animation: cmdk-pop .16s var(--ease); } @keyframes cmdk-pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } .cmdk-input-row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .cmdk-input-row svg { width: 18px; height: 18px; color: var(--muted); flex: none; } .cmdk input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fg); font-family: var(--sans); font-size: 1.02rem; } .cmdk input::placeholder { color: var(--muted-2); } .cmdk-esc { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 7px; } .cmdk-list { max-height: 52vh; overflow-y: auto; padding: 8px; } .cmdk-group { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding: 10px 12px 6px; } .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: var(--fg-dim); } .cmdk-item .ci { width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); font-family: var(--mono); font-size: 0.82rem; color: var(--accent-bright); } .cmdk-item .ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .cmdk-item .ct .t { font-size: 0.94rem; color: var(--fg); line-height: 1.3; } .cmdk-item .ct .d { font-size: 0.8rem; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk-item .ck { font-family: var(--mono); font-size: 0.7rem; color: var(--muted-2); } .cmdk-item.active, .cmdk-item:hover { background: var(--accent-a08); } .cmdk-item.active { box-shadow: 0 0 0 1px var(--accent-a22) inset; } .cmdk-empty { padding: 28px 16px; text-align: center; color: var(--muted-2); font-size: 0.9rem; } /* ========================================================================== Docs SPA — three-column shell: sidebar | article | TOC ========================================================================== */ .docs-body { display: block; } .docs-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr) 220px; gap: 0; max-width: 1320px; margin: 0 auto; align-items: start; } @media (max-width: 1100px) { .docs-layout { grid-template-columns: 240px minmax(0, 1fr); } .docs-toc { display: none; } } @media (max-width: 860px) { .docs-layout { grid-template-columns: 1fr; } } /* sidebar */ .docs-sidebar { position: sticky; top: var(--nav-h); align-self: start; height: calc(100vh - var(--nav-h)); overflow-y: auto; padding: 28px 22px 60px; border-right: 1px solid var(--border); } .docs-sidebar .grp { margin-bottom: 22px; } .docs-sidebar .grp-t { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding: 0 10px 8px; } .docs-sidebar a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 0.9rem; color: var(--muted); transition: color .12s var(--ease), background .12s var(--ease); border-left: 2px solid transparent; } .docs-sidebar a:hover { color: var(--fg); background: var(--accent-a08); } .docs-sidebar a.active { color: var(--accent-bright); background: var(--accent-a08); border-left-color: var(--accent); } /* article */ .docs-main { padding: 44px 48px 100px; min-width: 0; } @media (max-width: 860px) { .docs-main { padding: 32px 24px 80px; } } .docs-article { max-width: 760px; } .docs-article h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 0.5em; } .docs-article h2 { font-size: 1.5rem; margin-top: 2em; padding-top: 0.4em; scroll-margin-top: calc(var(--nav-h) + 20px); } .docs-article h3 { font-size: 1.15rem; margin-top: 1.6em; scroll-margin-top: calc(var(--nav-h) + 20px); } .docs-article p { color: var(--muted); font-size: 1rem; } .docs-article a { text-decoration: none; border-bottom: 1px solid var(--accent-a22); } .docs-article a:hover { border-bottom-color: var(--accent); } .docs-article ul, .docs-article ol { color: var(--muted); padding-left: 1.3em; margin: 0 0 1.2em; } .docs-article li { margin-bottom: 0.5em; } .docs-article li::marker { color: var(--muted-2); } .docs-article strong { color: var(--fg-dim); font-weight: 600; } .docs-article hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; } .docs-article .lede { font-size: 1.12rem; color: var(--fg-dim); margin-bottom: 1.4em; } .docs-article img { max-width: 100%; border-radius: 12px; border: 1px solid var(--border); } .docs-article blockquote { margin: 1.4em 0; padding: 4px 18px; border-left: 3px solid var(--accent); background: var(--accent-a08); border-radius: 0 10px 10px 0; color: var(--fg-dim); } .docs-article blockquote p { color: var(--fg-dim); margin: 0.6em 0; } /* anchor link that appears on heading hover */ .docs-article .anchor { opacity: 0; margin-left: 8px; color: var(--accent); font-weight: 400; border: 0; font-size: 0.85em; } .docs-article h2:hover .anchor, .docs-article h3:hover .anchor { opacity: 1; } /* inline code + code blocks */ .docs-article :not(pre) > code { font-family: var(--mono); background: var(--surface); border: 1px solid var(--border); padding: 1.5px 6px; border-radius: 6px; color: var(--amber); font-size: 0.86em; } .code-block { position: relative; margin: 1.4em 0; } .code-block pre { background: #07080B; border: 1px solid var(--border-2); border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 0.85rem; line-height: 1.7; color: var(--fg-dim); margin: 0; } .code-block pre code { font-family: var(--mono); background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .code-block .copy-code { position: absolute; top: 9px; right: 9px; border: 1px solid var(--border-2); background: var(--elevated); color: var(--muted); font-family: var(--sans); font-size: 0.74rem; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; opacity: 0; transition: opacity .15s var(--ease), color .15s var(--ease); } .code-block:hover .copy-code { opacity: 1; } .code-block .copy-code:hover { color: var(--fg); } .code-block .copy-code.ok { color: var(--green); opacity: 1; } /* shell highlighter tokens (hand-rolled, see docs.js) */ .tok-cmt { color: var(--muted-2); font-style: italic; } .tok-str { color: var(--green); } .tok-flag { color: var(--amber); } .tok-kw { color: var(--purple); } .tok-var { color: var(--cyan); } .tok-prompt { color: var(--accent); } /* tables */ .docs-article table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.9rem; } .docs-article th, .docs-article td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .docs-article th { color: var(--fg); font-weight: 600; border-bottom-color: var(--border-2); } .docs-article td { color: var(--muted); } .docs-article td code { white-space: nowrap; } /* callout boxes inside docs (note/warn/tip) */ .note { display: flex; gap: 12px; margin: 1.4em 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-2); background: var(--surface); font-size: 0.92rem; } .note .ni { flex: none; font-size: 1.05rem; line-height: 1.5; } .note p { margin: 0; color: var(--fg-dim); } .note.warn { border-color: rgba(229,192,123,0.32); background: rgba(229,192,123,0.06); } .note.tip { border-color: rgba(86,212,196,0.3); background: rgba(86,212,196,0.06); } /* prev / next */ .docs-pager { display: flex; gap: 14px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); } .docs-pager a { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--surface); transition: border-color .15s var(--ease), background .15s var(--ease); border-bottom: 1px solid var(--border); } .docs-pager a:hover { border-color: var(--border-2); background: var(--elevated); } .docs-pager a.next { text-align: right; } .docs-pager .dir { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: 4px; } .docs-pager .ttl { color: var(--fg); font-weight: 550; } /* right TOC */ .docs-toc { position: sticky; top: var(--nav-h); align-self: start; height: calc(100vh - var(--nav-h)); overflow-y: auto; padding: 44px 20px 60px; } .docs-toc .toc-t { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; } .docs-toc a { display: block; padding: 5px 0 5px 12px; font-size: 0.83rem; color: var(--muted); border-left: 2px solid var(--border); transition: color .12s var(--ease), border-color .12s var(--ease); } .docs-toc a:hover { color: var(--fg-dim); } .docs-toc a.active { color: var(--accent-bright); border-left-color: var(--accent); } .docs-toc a.sub { padding-left: 24px; font-size: 0.8rem; } /* docs mobile drawer */ .docs-mobilebar { display: none; } @media (max-width: 860px) { .docs-mobilebar { display: flex; align-items: center; gap: 12px; position: sticky; top: var(--nav-h); z-index: 40; padding: 12px 24px; background: rgba(10,11,14,0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .docs-menu-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border-2); color: var(--fg-dim); font-size: 0.86rem; font-family: var(--sans); padding: 8px 12px; border-radius: 9px; cursor: pointer; } .docs-crumb { font-size: 0.86rem; color: var(--muted); font-family: var(--mono); } .docs-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 320px; height: 100vh; z-index: 120; background: var(--elevated); border-right: 1px solid var(--border-2); transform: translateX(-100%); transition: transform .25s var(--ease); padding-top: 24px; } .docs-sidebar.open { transform: none; } .docs-scrim { position: fixed; inset: 0; z-index: 110; background: rgba(5,6,9,0.6); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); } .docs-scrim.open { opacity: 1; pointer-events: auto; } } /* ========================================================================== Misc / 404 ========================================================================== */ .bigcode { font-family: var(--mono); font-size: clamp(4rem, 14vw, 8rem); font-weight: 600; letter-spacing: -0.04em; color: var(--fg); margin: 0; } .spinner { width: 22px; height: 22px; border: 2px solid var(--border-2); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .term .cur { animation: none; } }