/* Raku++ Specification — base theme. Light by default; the System/Light/Dark switcher sets html[data-theme-active="dark"] (resolved before first paint by an inline script, so there is no flash). The runnable editors are injected by raku.js inside their own Shadow DOM, so this stylesheet only styles the page *around* them. */ :root { --bg: #ffffff; --fg: #1c1e24; --muted: #5c6270; --border: #e4e6ec; --sidebar: #f7f8fa; --accent: #c8402b; /* Raku camelia red */ --accent-fg: #ffffff; --code-bg: #f2f3f6; --out-bg: #f6f7f9; --out-fg: #24262c; --note-bg: #fdf6ec; --note-bd: #e7c98a; --card-bg: #ffffff; --sidebar-w: 17rem; --maxw: 50rem; } html[data-theme-active="dark"] { --bg: #16171b; --fg: #dfe1e6; --muted: #9aa0ad; --border: #2c2e36; --sidebar: #1b1c21; --accent: #ff6a4d; --code-bg: #24262d; --out-bg: #1e2026; --out-fg: #cfd2d8; --note-bg: #241f17; --note-bd: #5a4a2a; --card-bg: #1c1d22; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; } code, pre, .mono { font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- sidebar ---------------------------------------------------------- */ .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); height: 100vh; position: sticky; top: 0; overflow: hidden; /* the head is pinned; only .sidebar-nav scrolls */ background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; } /* Pinned head — brand + search stay visible however far the nav scrolls. */ .sidebar-head { flex: 0 0 auto; padding: 1.4rem 1rem .5rem; background: var(--sidebar); border-bottom: 1px solid var(--border); } /* The scrolling part. */ .sidebar-nav { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1rem 3rem; } .brand { display: block; font-weight: 700; font-size: 1.15rem; color: var(--fg); margin-bottom: 1rem; letter-spacing: -0.01em; } /* ---- search ----------------------------------------------------------- */ .site-search { position: relative; margin-bottom: 0; } .site-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: .88rem; padding: .5rem .7rem .5rem 2.1rem; border: 1px solid var(--border); border-radius: 9px; background-color: var(--bg); color: var(--fg); /* magnifier icon on the left */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: .62rem center; background-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease; } .site-search input::placeholder { color: var(--muted); } .site-search input:hover { border-color: var(--muted); } .site-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 64, 43, .14); } /* replace the browser's default X with nothing — Esc / the icon do the job */ .site-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* the "/" keyboard-shortcut hint, tucked at the right; hidden once you engage */ .ss-hint { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); pointer-events: none; font: 600 .7rem/1 "SF Mono", ui-monospace, Menlo, monospace; color: var(--muted); background: var(--code-bg); border: 1px solid var(--border); border-radius: 5px; padding: .16rem .38rem .2rem; } .site-search input:focus ~ .ss-hint, .site-search input:not(:placeholder-shown) ~ .ss-hint { opacity: 0; } .ss-results { position: fixed; z-index: 40; max-height: min(70vh, 30rem); overflow-y: auto; padding: 5px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .28); } .ss-msg { padding: 10px 12px; font-size: .85rem; color: var(--muted); } .ss-hit { display: block; padding: 8px 10px; border-radius: 7px; text-decoration: none; color: var(--fg); } .ss-hit:hover, .ss-hit.sel { background: var(--code-bg); text-decoration: none; } .ss-t { display: block; font-size: .92rem; font-weight: 600; color: var(--accent); } .ss-c { display: block; margin: 1px 0 2px; font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .ss-s { display: block; font-size: .82rem; line-height: 1.4; color: var(--muted); } .ss-results mark { background: #fff3b0; color: #1c1e24; padding: 0 1px; border-radius: 2px; } html[data-theme-active="dark"] .ss-results mark { background: #5a4a00; color: #ffe9a8; } .brand span { /* inline-block makes the badge an atomic box, so the link's hover underline can't draw across it — the "spec" badge stays clean while it's still a link. */ display: inline-block; margin-left: .4em; /* the gap lives here, not in an underlined space */ color: var(--accent-fg); background: var(--accent); border-radius: 5px; padding: 0 .4em; font-size: .8rem; vertical-align: 2px; } .nav-cat { margin-bottom: .15rem; } .nav-cat-title { display: flex; align-items: center; gap: .45rem; width: 100%; background: none; border: 0; cursor: pointer; font: inherit; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: .4rem .35rem; border-radius: 6px; text-align: left; transition: background .12s ease, color .12s ease; } .nav-cat-title:hover { background: var(--code-bg); color: var(--fg); } .nav-cat-chev { flex: 0 0 auto; width: .38rem; height: .38rem; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); /* ▸ when collapsed */ transition: transform .2s ease; opacity: .65; } .nav-cat.open > .nav-cat-title .nav-cat-chev { transform: rotate(45deg); } /* ▾ when open */ /* Collapse/expand the section body with a smooth grid-rows animation that works regardless of how many pages the section holds. */ .nav-cat-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; } .nav-cat.open > .nav-cat-body { grid-template-rows: 1fr; } /* Keep the clipped element padding-free so a collapsed section is truly flush; inter-section spacing comes from .nav-cat's margin and the links' own padding. */ .nav-cat-body > ul { overflow: hidden; min-height: 0; } .nav-cat ul { list-style: none; margin: 0; padding: 0; } .nav-cat.open { margin-bottom: .3rem; } .nav-cat li a { display: block; padding: .28rem .55rem; border-radius: 6px; color: var(--fg); font-size: .92rem; } .nav-cat li a:hover { background: var(--code-bg); text-decoration: none; } .nav-cat li a.active { background: var(--accent); color: var(--accent-fg); font-weight: 600; } /* ---- main ------------------------------------------------------------- */ main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } .content { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 2.4rem 1.6rem 4rem; flex: 1 0 auto; } .page-head { margin-bottom: 1.4rem; } .crumb { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .35rem; } .page-head h1 { margin: 0; font-size: 2rem; letter-spacing: -0.02em; display: inline; } .summary { color: var(--muted); font-size: 1.08rem; margin: .6rem 0 0; } h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.01em; } h2 { margin: 2.4rem 0 .8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); font-size: 1.4rem; } h3 { margin: 1.8rem 0 .6rem; font-size: 1.15rem; } .anchor { color: var(--muted); opacity: 0; margin-left: .3em; font-weight: 400; transition: opacity .12s; } h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: .5; } p code, li code, td code { background: var(--code-bg); padding: .1em .4em; border-radius: 4px; font-size: .88em; } /* status badge */ .status { display: inline-block; vertical-align: middle; margin-left: .6rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .18em .55em; border-radius: 999px; border: 1px solid transparent; } .st-full { background: #e6f4ea; color: #1a7f37; border-color: #afdcbb; } .st-part { background: #fdf3d6; color: #9a6700; border-color: #e7cf8a; } .st-div { background: #fbe6e0; color: #b3401f; border-color: #f0b6a4; } .st-ni { background: #eceef1; color: #626a76; border-color: #d3d7de; } html[data-theme-active="dark"] .st-full { background: #123020; color: #57d383; border-color: #1f6b3f; } html[data-theme-active="dark"] .st-part { background: #322913; color: #e7bd55; border-color: #6b551f; } html[data-theme-active="dark"] .st-div { background: #3a1e17; color: #ff8f70; border-color: #7a3826; } html[data-theme-active="dark"] .st-ni { background: #24262d; color: #9aa0ad; border-color: #3a3d46; } .st-native { background: #eae7fb; color: #5b3fb0; border-color: #c8bef0; } html[data-theme-active="dark"] .st-native { background: #211c39; color: #b7a6f0; border-color: #43376f; } /* Static example for native-only features (no Run button — the browser can't run it). */ .native-ex { position: relative; margin: 1rem 0 .3rem; } .native-tag { position: absolute; top: .5rem; right: .6rem; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5b3fb0; background: #eae7fb; border: 1px solid #c8bef0; border-radius: 999px; padding: .12em .5em; } html[data-theme-active="dark"] .native-tag { color: #b7a6f0; background: #211c39; border-color: #43376f; } pre.native-code { margin: 0; background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: .8rem .9rem 1rem; overflow-x: auto; font-size: .9rem; line-height: 1.5; } pre.native-code code { background: none; padding: 0; } /* Per-page "where it runs" indicator: three execution targets. */ .modes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 1.4rem; } .mode { display: inline-flex; align-items: center; gap: .35em; font-size: .74rem; font-weight: 600; padding: .2em .6em; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--code-bg); } .mode .mk { font-weight: 700; } .mode.ok .mk { color: #1a7f37; } .mode.no { color: #b3401f; } .mode.no .mk { color: #b3401f; } html[data-theme-active="dark"] .mode.ok .mk { color: #57d383; } html[data-theme-active="dark"] .mode.no, html[data-theme-active="dark"] .mode.no .mk { color: #ff8f70; } /* Execution-modes table on the conformance page. */ .conf-modes-intro { color: var(--muted); font-size: .92rem; margin: .2rem 0 .8rem; } .conf-modes-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 1.6rem; } .conf-modes-tbl th, .conf-modes-tbl td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--border); } .conf-modes-tbl th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .conf-modes-tbl td.y { color: #1a7f37; font-weight: 700; } .conf-modes-tbl td.n { color: #b3401f; font-weight: 700; } html[data-theme-active="dark"] .conf-modes-tbl td.y { color: #57d383; } html[data-theme-active="dark"] .conf-modes-tbl td.n { color: #ff8f70; } /* runnable editors are shadow-DOM; just give them breathing room */ pre[data-raku] { display: block; margin: 1rem 0 .3rem; } /* expected output shown beneath an example */ .expected { margin: 0 0 1.4rem; } .expected-label { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .1rem 0 .25rem .1rem; } pre.output, pre.syntax { background: var(--out-bg); color: var(--out-fg); border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; overflow-x: auto; font-size: .86rem; margin: 0 0 1.2rem; } pre.output code, pre.syntax code { background: none; padding: 0; } pre.syntax { border-style: dashed; color: var(--muted); } blockquote.note { background: var(--note-bg); border: 1px solid var(--note-bd); border-left: 3px solid var(--accent); border-radius: 6px; margin: 1.2rem 0; padding: .7rem 1rem; color: var(--fg); } .table-wrap { overflow-x: auto; margin: 1.2rem 0; } table { border-collapse: collapse; width: 100%; font-size: .92rem; } th, td { text-align: left; padding: .45rem .7rem; border: 1px solid var(--border); } th { background: var(--code-bg); font-weight: 600; } /* ---- home ------------------------------------------------------------- */ .hero { margin-bottom: 1.4rem; } .hero h1 { font-size: 2.5rem; margin: 0 0 .4rem; } .tagline { font-size: 1.2rem; color: var(--muted); margin: 0 0 .5rem; max-width: 42rem; } .hero-stats { color: var(--muted); font-size: .9rem; margin: 0; } /* The home dashboard gets a wider canvas than the reading pages. */ body.home .content { max-width: 66rem; } /* status legend under the hero */ .legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; padding: 0 0 1.2rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); font-size: .8rem; color: var(--muted); } .leg { display: inline-flex; align-items: center; } /* status dots (compact form of the status badge) */ .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .5rem; flex: 0 0 auto; background: var(--muted); } .dot.st-full { background: #2da44e; } .dot.st-part { background: #d4a72c; } .dot.st-div { background: #e5534b; } .dot.st-ni { background: #9aa0ad; } /* ---- "Where Raku++ excels" index -------------------------------------- */ .excels { margin-top: 1.6rem; } .excel-item { padding-top: 1.4rem; margin-top: 1.4rem; border-top: 1px solid var(--border); } .excel-item:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .excel-item > h2 { margin: .1rem 0 .6rem; } .excel-item > h2 a { text-decoration: none; } .excel-item > h2 a:hover { text-decoration: underline; } /* Roast citation: a quoted test snippet — set off from runnable editors by a left rule, so it reads as evidence rather than something to run. */ .excel-item pre:not([data-raku]):not(.output):not(.syntax) { background: var(--code-bg); border-left: 3px solid var(--accent, #b23); border-radius: 0 6px 6px 0; padding: .6rem .85rem; overflow-x: auto; font-size: .84rem; margin: 0 0 1.1rem; } /* ---- Roast conformance page ------------------------------------------- */ .conf-head h1 { margin: 0 0 .3rem; } .conf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1.4rem 0 .5rem; } .conf-stat { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--code-bg); } .conf-stat-n { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; } .conf-stat-l { font-size: .8rem; color: var(--muted); } /* Headline: the honest all-declared pass rate, big. */ .conf-hero { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 1.6rem 0 1rem; } .conf-big { font-size: 4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #2da44e; } .conf-big-sub { display: flex; flex-direction: column; font-size: 1.05rem; font-weight: 600; } .conf-big-sub small { font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: .2rem; } /* Three-denominator table. */ .conf-denom-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .5rem 0 1.5rem; } .conf-denom-tbl th, .conf-denom-tbl td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); vertical-align: top; } .conf-denom-tbl th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; } .conf-denom-tbl td { font-variant-numeric: tabular-nums; } .conf-denom-pct { font-weight: 700; } .conf-denom-note { color: var(--muted); font-variant-numeric: normal; } @media (max-width: 640px) { .conf-denom-note { display: none; } } .conf-source { font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; } .conf-note { font-size: .88rem; line-height: 1.5; color: var(--fg); background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: .7rem .9rem; margin: .6rem 0 0; } .conf-note strong { font-weight: 600; } .conf-areas-title { font-size: 1.1rem; margin: 1.5rem 0 .3rem; } .conf-areas-title span { color: var(--muted); font-weight: 400; font-size: .9rem; } .conf-controls { position: sticky; top: 0; background: var(--bg); padding: 1rem 0 .6rem; z-index: 5; border-bottom: 1px solid var(--border); margin-bottom: .6rem; } #conf-search { width: 100%; padding: .55rem .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--code-bg); color: var(--fg); font: inherit; } #conf-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .conf-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } .conf-chip { border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; cursor: pointer; } .conf-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .conf-group { border-bottom: 1px solid var(--border); } .conf-group > summary { display: flex; align-items: center; gap: .6rem; padding: .7rem .3rem; cursor: pointer; list-style: none; } .conf-group > summary::-webkit-details-marker { display: none; } .conf-group > summary::before { content: ""; width: .4rem; height: .4rem; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform .18s ease; opacity: .6; flex: 0 0 auto; margin-right: .2rem; } .conf-group[open] > summary::before { transform: rotate(45deg); } .conf-group > summary:hover { background: var(--code-bg); } .conf-syn { font-weight: 600; } .conf-syn-code { font-size: .72rem; font-weight: 700; color: var(--accent-fg); background: var(--accent); border-radius: 4px; padding: 0 .35em; margin-right: .1em; } .conf-syn-sub { color: var(--muted); font-weight: 400; font-size: .82rem; } .conf-syn-meta { display: flex; align-items: center; gap: .5rem; margin-left: auto; color: var(--muted); font-size: .82rem; white-space: nowrap; } .conf-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; } .conf-bar i { display: block; height: 100%; background: #2da44e; } .conf-list { list-style: none; margin: 0; padding: 0 0 .5rem 1rem; } .conf-list li a { display: flex; align-items: center; gap: .1rem; padding: .25rem .4rem; border-radius: 6px; color: var(--fg); font-size: .9rem; } .conf-list li a:hover { background: var(--code-bg); text-decoration: none; } .conf-name { font-family: var(--mono, ui-monospace, monospace); } .conf-count { margin-left: auto; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } .conf-empty { color: var(--muted); padding: 1rem .3rem; } /* compact multi-column overview — the whole spec at a glance */ .overview { column-width: 15rem; column-gap: 1.8rem; } .ov-cat { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 1.5rem; } .ov-cat h2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .5rem; padding: 0 0 .4rem; border-bottom: 1px solid var(--border); } .ov-count { font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--code-bg); border-radius: 999px; padding: .05em .5em; letter-spacing: 0; } .ov-list { list-style: none; margin: 0; padding: 0; } .ov-list a { display: flex; align-items: center; padding: .26rem .4rem; border-radius: 6px; color: var(--fg); font-size: .95rem; } .ov-list a:hover { background: var(--code-bg); text-decoration: none; } /* ---- footer ----------------------------------------------------------- */ footer { flex-shrink: 0; border-top: 1px solid var(--border); padding: 1.4rem 1.6rem; color: var(--muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; max-width: var(--maxw); margin: 0 auto; width: 100%; } /* ---- theme switcher --------------------------------------------------- */ .theme-switch { position: fixed; top: .8rem; right: 1rem; z-index: 30; display: inline-flex; } .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; font-size: 1rem; line-height: 1; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--sidebar); color: var(--muted); } .theme-btn:hover { color: var(--fg); } .theme-menu { position: absolute; top: calc(100% + 6px); right: 0; margin: 0; padding: 4px; list-style: none; min-width: 9rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .28); } .theme-menu li { margin: 0; } .theme-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .35rem .55rem; font-size: .85rem; text-align: left; cursor: pointer; border: 0; border-radius: 7px; background: transparent; color: var(--fg); } .theme-menu button .ti { width: 1.1em; text-align: center; } .theme-menu button:hover { background: var(--code-bg); } .theme-menu button[aria-checked="true"] { color: var(--accent); font-weight: 600; } .theme-menu button[aria-checked="true"]::after { content: '✓'; margin-left: auto; } /* ---- responsive ------------------------------------------------------- */ .nav-toggle { display: none; position: fixed; top: .8rem; left: .8rem; z-index: 20; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 8px; width: 2.4rem; height: 2.4rem; font-size: 1.2rem; cursor: pointer; } @media (max-width: 820px) { body { display: block; } .nav-toggle { display: block; } .sidebar { position: fixed; z-index: 15; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.2); } body.nav-open .sidebar { transform: translateX(0); } .content { padding-top: 3.6rem; } } /* ------------------------------------------------------------------------- */ /* Tour-specific additions (everything above is shared with spec.raku.online) */ /* ------------------------------------------------------------------------- */ /* Chapters in the sidebar are always expanded — a plain label, not a button. */ .nav-cat-name { display: block; padding: .45rem .9rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .nav-cat .nav-cat-body { display: block; } /* Progress ticks: a hollow dot that becomes an accent check once visited. */ .tick { display: inline-block; width: .85rem; color: transparent; font-size: .7rem; } a.done .tick { color: var(--accent); } a.done .tick::before { content: "✓"; } .lnum { color: var(--muted); font-size: .82em; } /* Prev / next footer on every lesson. */ .lesson-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--border); } .lnav { display: flex; flex-direction: column; gap: .15rem; min-width: 8rem; } a.lnav { text-decoration: none; } a.lnav.next { text-align: right; } .lnav-dir { font-size: .78rem; color: var(--muted); } a.lnav:hover .lnav-dir { color: var(--accent); } .lnav-title { font-weight: 600; } .lnav-pos { color: var(--muted); font-size: .82rem; white-space: nowrap; } /* Exercise card. */ .exercise { margin: 1.2rem 0; padding: .8rem .9rem .5rem; border: 1px solid var(--note-bd); border-radius: 8px; background: var(--note-bg); } .exercise-label { display: inline-block; margin-bottom: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } /* Collapsed solution. */ details.solution { margin: .8rem 0 1.2rem; } details.solution > summary { cursor: pointer; color: var(--muted); font-size: .88rem; user-select: none; } details.solution > summary:hover { color: var(--accent); } details.solution[open] > summary { margin-bottom: .6rem; } /* Home: start / continue buttons + ticked overview lists. */ .btn-start, .btn-continue { display: inline-block; margin-right: .8rem; padding: .55rem 1.1rem; border-radius: 8px; font-weight: 600; text-decoration: none; } .btn-continue[hidden] { display: none; } .btn-start { background: var(--accent); color: var(--accent-fg); } .btn-start:hover { text-decoration: none; filter: brightness(1.08); } .btn-continue { border: 1px solid var(--border); color: var(--fg); } .btn-continue:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); } .btn-reset { border: none; background: none; padding: .55rem 0; font: inherit; font-size: .85rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .btn-reset:hover, .btn-reset.armed { color: var(--accent); } .btn-reset[hidden] { display: none; } .ov-list a { display: flex; align-items: baseline; gap: .3rem; }