Something went wrong. Try again.
Jam Programming Language jamlang.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257/* Inter Font Family */body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;}
/* Code font for the editor */code, pre, .font-mono { font-family: 'Menlo', 'Monaco', 'Courier New', monospace;}
/* Custom selection color */::selection { background: #fbcfe8; /* Pink-200 */ color: #831843; /* Pink-900 */}
/* Smooth scrolling */html { scroll-behavior: smooth;}
/* Glass Navigation */.glass-nav { background: rgba(255, 253, 253, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(253, 224, 233, 0.5);}
/* Gradient Text Utility */.text-gradient { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(to right, #db2777, #e11d48);}
/* Sidebar active state */.nav-link.active { color: #db2777; /* Pink-600 */ background-color: #fdf2f8; /* Pink-50 */ border-right: 3px solid #db2777;}
/* Custom Scrollbar for sidebar */.sidebar-scroll::-webkit-scrollbar { width: 4px;}.sidebar-scroll::-webkit-scrollbar-track { background: transparent;}.sidebar-scroll::-webkit-scrollbar-thumb { background-color: #fbcfe8; border-radius: 20px;}
/* Step Number Styling (Tour) */.step-number { font-family: 'Menlo', monospace; background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
/* Code block styling — Dracula palette (https://draculatheme.com/spec) */pre { color: #f8f8f2; /* Dracula Foreground */}.code-block { background-color: #282a36; /* Dracula Background */ border: 1px solid #44475a; /* Dracula Selection */}
.code-block-header { background-color: #21222c; /* ANSI Black — slightly darker band */ border-bottom: 1px solid #44475a;}
/* Syntax highlighting colors (Dracula spec mappings). Used by hand- rolled spans on the tour page; Prism tokens further below mirror these hues. */.syn-keyword { color: #ff79c6; } /* Pink — keywords, control flow, modifiers */.syn-function { color: #50fa7b; } /* Green — function names */.syn-type { color: #8be9fd; } /* Cyan — types, classes, interfaces */.syn-string { color: #f1fa8c; } /* Yellow — strings, escapes */.syn-number { color: #ffb86c; } /* Orange — numbers, booleans, constants */.syn-comment { color: #6272a4; font-style: italic; } /* Comment — italic per spec */.syn-struct { color: #8be9fd; } /* Cyan — types */
/* ------------------------------------------------------------------ *//* Docs content chrome — applies to markdown-emitted elements inside *//* the docs <main>. The existing HTML reference page uses inline *//* Tailwind utility classes which take precedence, so these rules are *//* a no-op there and only kick in for plain markdown output. *//* ------------------------------------------------------------------ */
/* Headings — typography + anchor offset. */main h1 { font-size: 2.25rem; font-weight: 700; color: rgb(15 23 42); /* slate-900 */ margin-top: 0.5rem; margin-bottom: 1.5rem; scroll-margin-top: 6rem;}main h2 { font-size: 1.5rem; font-weight: 700; color: rgb(15 23 42); /* slate-900 */ margin-top: 3rem; margin-bottom: 1.5rem; scroll-margin-top: 6rem;}main h3 { font-size: 1.125rem; font-weight: 700; color: rgb(30 41 59); /* slate-800 */ margin-top: 2rem; margin-bottom: 1rem; scroll-margin-top: 6rem;}main h4 { scroll-margin-top: 6rem; }
/* Paragraphs, lists, links. */main p { color: rgb(71 85 105); /* slate-600 */ margin-bottom: 1.5rem; line-height: 1.75;}main ul, main ol { color: rgb(71 85 105); margin-bottom: 1.5rem; padding-left: 1.5rem;}main ul { list-style: disc; }main ol { list-style: decimal; }main li { margin-bottom: 0.25rem; }main a { color: rgb(219 39 119); /* pink-600 */ text-decoration: none;}main a:hover { text-decoration: underline; }main hr { border: 0; border-top: 1px solid rgb(241 245 249); /* slate-100 */ margin: 3rem 0;}
/* Tables (markdown-emitted; kramdown produces bare <table>). */main table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid rgb(226 232 240); /* slate-200 */ border-radius: 0.75rem; overflow: hidden; margin-bottom: 2rem; font-size: 0.875rem;}main thead { background: rgb(248 250 252); } /* slate-50 */main th { text-align: left; padding: 0.75rem 1.5rem; font-size: 0.75rem; font-weight: 500; color: rgb(100 116 139); /* slate-500 */ text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgb(226 232 240);}main td { padding: 0.75rem 1.5rem; color: rgb(71 85 105); /* slate-600 */ border-bottom: 1px solid rgb(226 232 240);}main tr:last-child td { border-bottom: 0; }
/* Markdown-emitted bare <pre> code blocks — Dracula dark card, same chrome as the inline .code-block wrapper used elsewhere. */main pre { background-color: #282a36; /* Dracula Background */ border: 1px solid #44475a; /* Dracula Selection */ border-radius: 0.5rem; padding: 1.25rem; overflow-x: auto; margin-bottom: 1.5rem; font-size: 0.875rem; line-height: 1.625; color: #f8f8f2; /* Dracula Foreground */}/* Reset for <pre> nested inside the existing .code-block wrapper, so the wrapper's chrome stays the source of truth there. */main .code-block pre { background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 0;}
/* Markdown-emitted inline <code> — Rouge tags it .highlighter-rouge; style those plus any bare <code> in prose. The existing HTML reference uses inline Tailwind utilities producing the same look. */main :is(p, li, td, th, h1, h2, h3, h4) code.highlighter-rouge,main :is(p, li, td, th, h1, h2, h3, h4) > code { font-size: 0.875rem; background: rgb(241 245 249); /* slate-100 */ padding: 0.125rem 0.25rem; border-radius: 0.25rem; color: rgb(219 39 119); /* pink-600 */ font-family: 'Menlo', 'Monaco', 'Courier New', monospace;}
/* ------------------------------------------------------------------ *//* Prism syntax highlighting for `language-jam` code blocks. *//* Dracula palette per https://draculatheme.com/spec — matches the *//* .syn-* classes used by hand-written code blocks on the tour page, *//* so dark code looks the same whether emitted by Prism or by inline *//* HTML spans. *//* Token names follow Prism's standard conventions; see jam-prism.js. *//* ------------------------------------------------------------------ */
main code[class*="language-"],main pre[class*="language-"] { color: #f8f8f2; /* Dracula Foreground */ font-family: 'Menlo', 'Monaco', 'Courier New', monospace;}
main pre[class*="language-"] { background-color: #282a36; /* Dracula Background */ border: 1px solid #44475a; /* Dracula Selection */ border-radius: 0.5rem; padding: 1.25rem; overflow-x: auto; margin-bottom: 1.5rem; font-size: 0.875rem; line-height: 1.625;}
/* Spec mapping (https://draculatheme.com/spec § 2): keywords/control/modifiers → Pink; functions → Green; types → Cyan; strings + escape sequences → Yellow; numbers/booleans/constants → Orange; comments → Comment (#6272A4, italic). Operators and punctuation fall back to Pink and Foreground respectively. */
main .token.comment { color: #6272a4; font-style: italic; } /* Comment */main .token.string { color: #f1fa8c; } /* Yellow */main .token.string .escape,main .token.string .token.escape { color: #f1fa8c; } /* Yellow — escapes share string color */main .token.number,main .token.boolean { color: #ffb86c; } /* Orange */main .token.keyword { color: #ff79c6; } /* Pink */main .token.builtin { color: #8be9fd; } /* Cyan — types */main .token.function { color: #50fa7b; } /* Green */main .token.intrinsic { color: #ff79c6; } /* Pink — @sizeOf, @alignOf */main .token.operator { color: #ff79c6; } /* Pink */main .token.punctuation { color: #f8f8f2; } /* Foreground */