:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 5rem; }
body { background: #0A1B22; }
::selection { background: #FF6F61; color: #0A1B22; }
/* ---- reef texture: faint contour lines in the deep ---- */
.reef-bg {
background-image:
radial-gradient(1200px 600px at 85% -10%, rgba(255,111,97,0.07), transparent 60%),
radial-gradient(900px 500px at -10% 30%, rgba(126,216,198,0.05), transparent 60%);
}
/* ---- eyebrow styled as YAML frontmatter ---- */
.frontmatter {
font-family: "Spline Sans Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.02em;
color: #7E9AA0;
}
.frontmatter .key { color: #7ED8C6; }
.frontmatter .val { color: #FF8A7A; }
/* ---- editor panes ---- */
.pane {
border: 1px solid rgba(126,216,198,0.14);
box-shadow: 0 24px 60px -24px rgba(0,0,0,0.6);
}
.pane-source { background: #0F2530; }
.pane-render { background: #F6F1E7; color: #2A2620; }
.src-line { display: block; white-space: pre; }
.tk-punc { color: #5E7C84; }
.tk-head { color: #FF8A7A; }
.tk-key { color: #7ED8C6; }
.tk-str { color: #E8C87E; }
.tk-text { color: #C7D6D8; }
.tk-fence { color: #9AB4B9; }
/* rendered pane typography */
.rdoc h1 { font-family: Fraunces, serif; font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: #1E1B15; }
.rdoc h2 { font-family: Fraunces, serif; font-weight: 500; font-size: 1.05rem; margin-top: 1rem; color: #1E1B15; }
.rdoc p { font-size: 0.83rem; line-height: 1.6; margin-top: 0.45rem; color: #4A443A; }
.rdoc .tag {
display: inline-block; font-family: "Spline Sans Mono", monospace; font-size: 0.65rem;
background: rgba(255,111,97,0.14); color: #C24B3F; border-radius: 9999px;
padding: 0.1rem 0.55rem; margin-right: 0.3rem;
}
.rdoc pre {
background: #0F2530; color: #C7D6D8; border-radius: 0.5rem;
font-family: "Spline Sans Mono", monospace; font-size: 0.72rem;
padding: 0.7rem 0.9rem; margin-top: 0.7rem; overflow-x: auto;
}
/* ---- diff section ---- */
.diff {
font-family: "Spline Sans Mono", monospace;
font-size: 0.82rem;
line-height: 1.9;
}
.diff .ln { display: flex; gap: 0.9rem; padding: 0 1.1rem; white-space: pre-wrap; }
.diff .ln .sign { width: 1ch; flex: none; user-select: none; }
.diff .minus { background: rgba(255,111,97,0.08); color: #F0A29A; }
.diff .minus .sign { color: #FF6F61; }
.diff .plus { background: rgba(126,216,198,0.08); color: #A9E4D8; }
.diff .plus .sign { color: #7ED8C6; }
.diff .ctx { color: #5E7C84; }
.diff .hunk { color: #7E9AA0; background: rgba(126,216,198,0.05); padding: 0.15rem 1.1rem; }
/* ---- terminal ---- */
.term {
background: #071319;
border: 1px solid rgba(126,216,198,0.16);
box-shadow: 0 24px 60px -30px rgba(0,0,0,0.7);
}
.term .prompt { color: #7ED8C6; }
.term .cmd { color: #E9F2F1; }
.term .out { color: #6E8B92; }
/* ---- buttons ---- */
.btn-coral {
background: #FF6F61; color: #0A1B22; font-weight: 600;
transition: transform 150ms ease, background 150ms ease;
}
.btn-coral:hover { background: #FF8A7A; transform: translateY(-1px); }
.btn-ghost {
border: 1px solid rgba(126,216,198,0.3); color: #CFDCDD;
transition: border-color 150ms ease, background 150ms ease;
}
.btn-ghost:hover { border-color: #7ED8C6; background: rgba(126,216,198,0.06); }
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid #7ED8C6; outline-offset: 3px; border-radius: 4px;
}
/* ---- cards ---- */
.card {
background: #0F2530;
border: 1px solid rgba(126,216,198,0.1);
transition: border-color 180ms ease, transform 180ms ease;
}
.card:hover { border-color: rgba(255,111,97,0.45); transform: translateY(-3px); }
/* ---- source chips ---- */
.source-chip {
background: #0F2530;
border: 1px solid rgba(126,216,198,0.18);
transition: border-color 180ms ease, transform 180ms ease;
}
.source-chip:hover { border-color: rgba(255,111,97,0.4); transform: translateY(-2px); }
/* ---- provider badge ---- */
.prov {
font-family: "Spline Sans Mono", monospace; font-size: 0.6rem;
border-radius: 9999px; padding: 0.08rem 0.5rem;
border: 1px solid rgba(126,216,198,0.3); color: #7ED8C6;
white-space: nowrap;
}
/* ---- use-case tabs ---- */
.uc-tab {
border: 1px solid rgba(126,216,198,0.25); color: #CFDCDD; background: transparent;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.uc-tab:hover { border-color: #7ED8C6; }
.uc-tab[aria-selected="true"] { background: #FF6F61; border-color: #FF6F61; color: #0A1B22; font-weight: 600; }
/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
.btn-coral:hover, .card:hover, .source-chip:hover { transform: none; }
}
/* mobile pane tabs */
@media (max-width: 767px) {
.pane-source, .pane-render { display: none; }
.pane-source.active, .pane-render.active { display: block; }
}
/* ---- legal documents ---- */
.legal h2 {
font-family: Fraunces, Georgia, serif;
font-weight: 500;
color: #fff;
font-size: 1.35rem;
line-height: 1.25;
margin-top: 2.5rem;
}
.legal h3 {
font-family: Fraunces, Georgia, serif;
font-weight: 500;
color: #fff;
font-size: 1.05rem;
margin-top: 1.5rem;
}
.legal p,
.legal li {
color: #CFDCDD;
line-height: 1.7;
margin-top: 0.8rem;
}
.legal ul {
margin-top: 0.35rem;
padding-left: 1.2rem;
list-style: disc;
}
.legal li { margin-top: 0.45rem; }
.legal a {
color: #7ED8C6;
text-decoration: underline;
text-underline-offset: 3px;
}
.legal a:hover { color: #FF8A7A; }
.legal strong { color: #fff; font-weight: 600; }
.legal code {
font-family: "Spline Sans Mono", ui-monospace, monospace;
font-size: 0.85em;
color: #7ED8C6;
}