:root {
--fnd-brand:        #f07a2e;
--fnd-brand-dark:   #b4541a;
--fnd-brand-soft:   #fdecdf;
--fnd-ink:          #1f2a44;
--fnd-ink-dark:     #161e30;
--fnd-earth:        #3b4a6b;
--fnd-earth-soft:   #e8ecf4;
--accent:          var(--fnd-brand);
--accent-dark:     var(--fnd-brand-dark);
--accent-soft:     var(--fnd-brand-soft);
--fnd-bg:           #f7f8fa;
--fnd-bg-muted:     #eceff3;
--fnd-surface:      #ffffff;
--fnd-fg:           #1b1e26;
--fnd-fg-soft:      #444a55;
--fnd-fg-muted:     #6b7280;
--fnd-border:       #d5dae1;
--fnd-radius:       4px;
--fnd-radius-lg:    8px;
--fnd-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--fnd-font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
--fnd-font-mono:    ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
--fnd-container:    1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
overflow-x: clip;
}
body {
margin: 0;
padding-inline: 3px;
overflow-x: clip;
font-family: var(--fnd-font-sans);
font-size: 17px;
line-height: 1.5;
color: var(--fnd-fg);
background: var(--fnd-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--fnd-font-serif);
color: var(--fnd-fg);
line-height: 1.2;
letter-spacing: -.005em;
}
p { margin: 0 0 1em; }
a {
color: var(--fnd-brand-dark);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--fnd-brand); }
a[target="_blank"]:not(.no-extlink):not(:has(img))::after {
content: "\00A0\2197";
font-size: .85em;
color: var(--fnd-fg-muted);
text-decoration: none;
position: relative;
top: -.05em;
}
a[target="_blank"]:not(.no-extlink):not(:has(img)):hover::after {
color: var(--accent);
}
img { max-width: 100%; height: auto; display: block; }
mark.search-mark {
background: #fff3a8;
color: inherit;
padding: 0 .1em;
border-radius: 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
picture { display: block; max-width: 100%; }
blockquote {
margin: 1.5em 0;
padding: .8em 1.2em;
border-left: 3px solid var(--fnd-brand);
background: var(--fnd-brand-soft);
color: var(--fnd-fg-soft);
font-style: italic;
}
code, pre, kbd, samp {
font-family: var(--fnd-font-mono);
font-size: .92em;
}
pre {
background: var(--fnd-bg-muted);
border: 1px solid var(--fnd-border);
border-radius: var(--fnd-radius);
padding: .9em 1.1em;
overflow-x: auto;
}
hr {
border: 0;
border-top: 1px solid var(--fnd-border);
margin: 2em 0;
}
.container {
max-width: var(--fnd-container);
margin: 0 auto;
padding: 0 1.25rem;
}
:focus-visible {
outline: 2px solid var(--fnd-brand);
outline-offset: 2px;
border-radius: 2px;
}
[tabindex="-1"]:focus { outline: none; }
.code-collapse { position: relative; }
.code-collapse__toggle {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.code-collapse__body {
position: relative;
overflow: hidden;
max-height: calc(var(--collapsed-lines, 10) * 1.5em + 2em);
transition: max-height .25s ease;
}
.code-collapse__body > pre { margin: 0; }
.code-collapse__fade {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3em;
background: linear-gradient(to bottom, rgba(236, 239, 243, 0), var(--fnd-bg-muted));
pointer-events: none;
}
.code-collapse__btn {
display: inline-block;
margin: .5rem 0 0;
font-size: .85rem;
font-weight: 600;
color: var(--fnd-brand-dark);
cursor: pointer;
user-select: none;
}
.code-collapse__btn:hover { text-decoration: underline; }
.code-collapse__count { font-weight: 400; color: var(--fnd-fg-muted); }
.code-collapse__less { display: none; }
.code-collapse__toggle:checked ~ .code-collapse__body {
max-height: 200em;
}
.code-collapse__toggle:checked ~ .code-collapse__body .code-collapse__fade {
display: none;
}
.code-collapse__toggle:checked ~ .code-collapse__btn .code-collapse__more { display: none; }
.code-collapse__toggle:checked ~ .code-collapse__btn .code-collapse__less { display: inline; }
@media print {
.site-header,
.site-footer,
.back-to-top,
.fnd-ad-slot,
.article-toolbar,
.article-toolbar__note { display: none !important; }
.code-collapse__body { max-height: none !important; }
.code-collapse__fade,
.code-collapse__btn { display: none !important; }
.scad-viewer { display: none !important; }
a { color: inherit; text-decoration: none; }
pre, figure, img, .code-collapse { break-inside: avoid; }
body { background: #fff; }
}
.code-collapse__toggle:focus-visible ~ .code-collapse__btn {
outline: 2px solid var(--fnd-brand);
outline-offset: 2px;
border-radius: 2px;
}
.fnd-gallery__btn {
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
.fnd-gallery__btn img {
width: 100%;
height: auto;
max-height: 320px;
object-fit: contain;
border-radius: var(--fnd-radius);
transition: transform .15s ease-out;
background: var(--fnd-bg-muted);
}
.fnd-gallery__btn:hover img { transform: scale(1.02); }
.fnd-gallery__item { margin: 0; min-width: 0; }
.fnd-gallery__item figcaption {
margin-top: .3rem;
font-size: .78rem;
color: var(--fnd-fg-muted);
font-family: var(--fnd-font-mono);
line-height: 1.4;
width: max-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.fnd-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background: rgba(15, 18, 14, .92);
}
.fnd-lightbox[hidden] { display: none; }
.fnd-lightbox__figure {
margin: 0;
max-width: 95vw;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
gap: .6rem;
}
.fnd-lightbox__row {
position: relative;
width: min(95vw, 1100px);
display: flex;
align-items: center;
justify-content: center;
}
.fnd-lightbox__stage {
position: relative;
display: flex;
min-width: 0;
}
.fnd-lightbox__img {
display: block;
max-width: calc(min(95vw, 1100px) - 7rem);
max-height: 78vh;
object-fit: contain;
border-radius: var(--fnd-radius);
}
.fnd-lightbox__cap {
color: #e8e2d2;
font-family: var(--fnd-font-mono);
font-size: .85rem;
text-align: center;
}
.fnd-lightbox__close {
position: absolute;
bottom: calc(100% + .45rem);
right: 0;
z-index: 2;
width: 2.4rem;
height: 2.4rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
line-height: 1;
color: #fff;
background: rgba(15, 18, 14, .55);
border: 0;
border-radius: 50%;
cursor: pointer;
}
.fnd-lightbox__close:hover { background: rgba(15, 18, 14, .8); }
.fnd-lightbox__locate {
position: absolute;
bottom: calc(100% + .45rem);
left: 0;
z-index: 2;
width: 2.4rem;
height: 2.4rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(15, 18, 14, .55);
border: 0;
border-radius: 50%;
cursor: pointer;
}
.fnd-lightbox__locate[hidden] { display: none; }
.fnd-lightbox__locate:hover { background: rgba(15, 18, 14, .8); }
.fnd-lightbox__counter {
padding: .15rem .65rem;
font-size: .78rem;
font-variant-numeric: tabular-nums;
color: #e8e2d2;
background: rgba(255, 255, 255, .12);
border-radius: 999px;
white-space: nowrap;
}
.fnd-lightbox__counter[hidden] { display: none; }
.fnd-lightbox__mapbar {
display: flex;
align-items: center;
justify-content: center;
gap: .7rem;
}
.fnd-lightbox__mapbar[hidden] { display: none; }
.fnd-lightbox__route { line-height: 0; }
.fnd-lightbox__route-svg {
display: block;
width: 150px;
height: 64px;
padding: 3px 6px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 8px;
}
.fnd-lightbox__route-line {
fill: none;
stroke: rgba(230, 239, 232, .5);
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
.fnd-lightbox__dot {
fill: #cdd9cd;
stroke: rgba(0, 0, 0, .35);
stroke-width: .5;
cursor: pointer;
transition: fill .15s ease;
}
.fnd-lightbox__dot:hover { fill: #ffffff; }
.fnd-lightbox__dot.is-current {
fill: #f0b54a;
stroke: rgba(0, 0, 0, .25);
transform-box: fill-box;
transform-origin: center;
animation: fnd-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes fnd-dot-pulse {
0%, 100% { transform: scale(1); }
50%      { transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
.fnd-lightbox__dot.is-current { animation: none; }
}
.fnd-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
line-height: 1;
color: #fff;
background: rgba(15, 18, 14, .55);
border: 0;
border-radius: 50%;
cursor: pointer;
}
.fnd-lightbox__nav--prev { left: 0; }
.fnd-lightbox__nav--next { right: 0; }
.fnd-lightbox__nav:hover { background: rgba(15, 18, 14, .8); }
.fnd-lightbox__nav[disabled] {
opacity: .25;
cursor: default;
}
.fnd-lightbox__nav[hidden] { display: none; }
@media (max-width: 480px) {
.fnd-lightbox__nav {
width: 2.4rem;
height: 2.4rem;
font-size: 1.6rem;
}
.fnd-lightbox__nav--prev { left: .4rem; }
.fnd-lightbox__nav--next { right: .4rem; }
}
.cookie-consent {
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--fnd-fg);
color: #f4f1e8;
z-index: 80;
box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
}
.cookie-consent__inner {
display: flex;
gap: 1.5rem;
align-items: center;
padding: 1rem 0;
flex-wrap: wrap;
}
.cookie-consent__copy { flex: 1; min-width: 280px; }
.cookie-consent__heading {
font-family: var(--fnd-font-serif);
font-size: 1.1rem;
margin: 0 0 .3rem;
color: #fff;
}
.cookie-consent__body { margin: 0; font-size: .9rem; line-height: 1.45; }
.cookie-consent__body a { color: #d0e7d6; }
.cookie-consent__body a:hover { color: #fff; }
.cookie-consent__actions {
display: flex;
gap: .6rem;
flex-shrink: 0;
}
.cookie-consent__btn {
font: inherit;
padding: .55rem 1.1rem;
border-radius: var(--fnd-radius);
cursor: pointer;
border: 1px solid transparent;
}
.cookie-consent__btn--accept {
background: var(--fnd-brand);
color: #fff;
}
.cookie-consent__btn--accept:hover { background: var(--fnd-brand-dark); }
.cookie-consent__btn--reject {
background: transparent;
color: #f4f1e8;
border-color: rgba(255, 255, 255, .4);
}
.cookie-consent__btn--reject:hover { border-color: #fff; }
.tour-map {
margin: 1.5rem 0;
position: relative;
isolation: isolate;
}
.tour-map__canvas {
width: 100%;
height: 360px;
border-radius: var(--fnd-radius-lg);
overflow: clip;
contain: paint;
background: var(--fnd-bg-muted);
border: 1px solid var(--fnd-border);
position: relative;
}
.tour-map__canvas--small { height: 240px; }
.tour-map__canvas--auto {
background:
linear-gradient(135deg, var(--fnd-bg-muted) 0%, #ece6d8 50%, var(--fnd-bg-muted) 100%);
background-size: 200% 200%;
animation: tour-map-pulse 2.4s ease-in-out infinite;
}
.tour-map__canvas--auto[data-map-ready="1"] {
animation: none;
background: var(--fnd-bg-muted);
}
@keyframes tour-map-pulse {
0%, 100% { background-position: 0%   50%; }
50%      { background-position: 100% 50%; }
}
.leaflet-bar a.tour-map__reset,
.leaflet-bar a.tour-map__fullscreen {
width: 30px;
height: 30px;
font-size: 18px;
line-height: 30px;
text-align: center;
color: var(--fnd-fg-soft);
}
.leaflet-bar a.tour-map__reset:hover,
.leaflet-bar a.tour-map__fullscreen:hover {
color: var(--fnd-fg);
}
.leaflet-bar a.tour-map__reset {
display: flex;
align-items: center;
justify-content: center;
}
.tour-map__reset svg { display: block; }
.tour-map__canvas--fullscreen {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
max-height: none !important;
z-index: 9999 !important;
border-radius: 0 !important;
border: none !important;
}
.tour-map--fullscreen {
z-index: 9999;
}
body.fnd-fullscreen-active { overflow: hidden; }
html:has(body.fnd-fullscreen-active) { overflow: hidden; }
.fnd-leg {
margin: .8rem 0 1.8rem;
padding: .8rem 1rem 1rem;
background: var(--fnd-bg-muted);
border-left: 3px solid var(--fnd-brand);
border-radius: var(--fnd-radius);
scroll-margin-top: 160px;
}
.fnd-leg__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem 1.4rem;
}
.fnd-leg__stats {
display: flex;
flex-wrap: wrap;
gap: .3rem 1rem;
font-family: var(--fnd-font-mono);
font-size: .95rem;
color: var(--fnd-fg);
flex: 1 1 auto;
}
.fnd-leg__stat { white-space: nowrap; }
.fnd-leg__map { margin: .9rem 0 0; }
.fnd-leg__lead {
margin: 0 -1rem 1rem;
}
.fnd-leg__lead .fnd-gallery__btn { cursor: zoom-in; }
.fnd-leg__lead img {
width: 100%;
height: auto;
max-height: 480px;
object-fit: contain;
border-radius: 0;
display: block;
background: var(--fnd-bg-muted);
}
.fnd-leg__lead figcaption {
padding: .4rem 1rem 0;
font-family: var(--fnd-font-mono);
font-size: .82rem;
color: var(--fnd-fg-muted);
line-height: 1.4;
width: max-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.fnd-leg__gallery {
margin-top: .9rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: .5rem;
}
.fnd-leg__gallery .fnd-gallery__item { margin: 0; }
@media (max-width: 640px) {
.fnd-leg__gallery { grid-template-columns: minmax(0, 1fr); }
}
.fnd-leg__download {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .35rem .75rem;
background: var(--fnd-surface);
border: 1px solid var(--fnd-border);
border-radius: var(--fnd-radius);
color: var(--fnd-brand-dark);
text-decoration: none;
font-size: .9rem;
transition: background .12s ease-out;
}
.fnd-leg__download:hover {
background: var(--fnd-brand-soft);
color: var(--fnd-brand-dark);
}
.fnd-leg__download-icon { font-size: 1.1rem; line-height: 1; }
.tour-overview__download,
.tour-map__download { margin: .9rem 0 0; }
.tour-map__photo-marker { background: none; border: 0; }
.tour-map__photo-marker img {
display: block;
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
cursor: pointer;
transition: transform .12s ease-out;
}
.tour-map__photo-marker:hover img,
.tour-map__photo-marker--active img {
transform: scale(1.3);
border-color: var(--fnd-brand);
}
.tour-photo-preview {
position: fixed;
z-index: 10001;
pointer-events: none;
opacity: 0;
transform: scale(.96);
transform-origin: bottom center;
transition: opacity .18s ease, transform .18s ease;
background: var(--fnd-surface);
border: 1px solid var(--fnd-border);
border-radius: var(--fnd-radius);
box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
overflow: hidden;
width: max-content;
max-width: 190px;
}
.tour-photo-preview.is-visible {
opacity: 1;
transform: scale(1);
}
.tour-photo-preview img {
display: block;
max-width: 190px;
max-height: 150px;
width: auto;
height: auto;
}
.tour-photo-preview__cap {
padding: .3rem .5rem .4rem;
font-size: .72rem;
line-height: 1.3;
color: var(--fnd-fg-soft);
}
@media (prefers-reduced-motion: reduce) {
.tour-photo-preview { transition: opacity .15s ease; transform: none; }
.tour-photo-preview.is-visible { transform: none; }
}
@keyframes tour-map-marker-bounce {
0%, 100% { transform: translateY(0); }
25%      { transform: translateY(-15px) scale(1.06); }
45%      { transform: translateY(0); }
65%      { transform: translateY(-8px); }
80%      { transform: translateY(0); }
}
.tour-map__photo-marker--bounce img {
animation: tour-map-marker-bounce .75s ease;
}
.fnd-gallery__btn.is-located {
outline: 3px solid var(--fnd-brand);
outline-offset: 2px;
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
.tour-map__photo-marker--bounce img { animation: none; }
}
.tour-overview__legs {
list-style: none;
margin: .6rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .2rem .8rem;
font-size: .78rem;
color: var(--fnd-fg-soft);
}
@media (max-width: 800px) {
.tour-overview__legs {
grid-template-columns: 1fr;
}
}
.tour-overview__leg {
display: flex;
align-items: baseline;
gap: .4rem;
margin: 0;
line-height: 1.4;
}
.tour-overview__leg-swatch {
display: inline-block;
width: .9rem;
height: .9rem;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, .15);
flex: 0 0 auto;
}
.tour-overview__leg-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted transparent;
transition: border-color .15s ease, color .15s ease;
}
.tour-overview__leg-link:hover,
.tour-overview__leg-link:focus-visible {
color: var(--fnd-fg);
border-bottom-color: currentColor;
outline: none;
}
.form-field {
display:        flex;
flex-direction: column;
gap:            0.3rem;
margin-bottom:  0;
}
.form-field > span {
font-size:   0.85rem;
color:       var(--fnd-fg-soft);
font-weight: 600;
}
.form-field.is-required > span::after {
content:     '*';
color:       var(--fnd-earth);
margin-left: 0.2em;
}
.form-field input,
.form-field textarea {
font:          inherit;
padding:       0.55rem 0.7rem;
border:        1px solid var(--fnd-border);
border-radius: var(--fnd-radius);
background:    #fff;
color:         var(--fnd-fg);
transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus,
.form-field textarea:focus {
outline:      none;
border-color: var(--fnd-brand);
box-shadow:   0 0 0 3px rgba(31, 64, 41, .12);
}
.form-field textarea {
resize:     vertical;
min-height: 8rem;
line-height:1.5;
}
.form-field .invalid    { border-color: #b53e3e; }
.form-field__error      { color: #b53e3e; font-size: 0.8rem; }
.btn-primary,
.btn-secondary {
padding:       0.55rem 1.2rem;
border:        1px solid var(--fnd-brand);
border-radius: var(--fnd-radius);
font:          inherit;
cursor:        pointer;
transition:    background 0.15s ease, color 0.15s ease;
}
.btn-primary           { background: var(--fnd-brand); color: #fff; }
.btn-primary:hover:not([disabled]) { background: var(--fnd-brand-dark, #163223); }
.btn-secondary         { background: transparent; color: var(--fnd-fg-soft); border-color: var(--fnd-border); }
.btn-secondary:hover:not([disabled]) { background: var(--fnd-bg-muted); }
.btn-primary[disabled],
.btn-secondary[disabled] { opacity: 0.5; cursor: not-allowed; }
a.btn-primary, a.btn-secondary { text-decoration: none; }
a.btn-primary:hover:not([disabled]) { color: #fff; }
:root {
--contact-form-grid-columns: 1fr;
--contact-form-radius:       var(--fnd-radius);
--contact-form-sent-bg:      #ecf5ee;
--contact-form-sent-border:  #2d5a3d;
--contact-form-sent-color:   #2d5a3d;
--contact-form-error-bg:     #f6ebeb;
--contact-form-error-color:  #b53e3e;
--contact-form-footnote-color: var(--fnd-fg-muted);
}
.js .reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.js .reveal,
.js .reveal.is-visible {
opacity: 1;
transform: none;
transition: none;
}
}
.preview-banner {
display:         flex;
flex-wrap:       wrap;
justify-content: center;
align-items:     center;
gap:             0.5rem 1.25rem;
padding:         0.4rem 1rem;
background:      #fef3c7;
color:           #7c2d12;
border-bottom:   1px solid #fbbf24;
font-size:       0.85rem;
text-align:      center;
}
.preview-banner a {
color:           inherit;
text-decoration: underline;
font-weight:     600;
}
.preview-banner a:hover,
.preview-banner a:focus-visible {
text-decoration: none;
}
#blazor-error-ui {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fffbe6;
border-top: 1px solid #d4ba3e;
color: #6f5a14;
padding: .8rem 1rem;
box-shadow: 0 -2px 6px rgba(0,0,0,.08);
display: none;
z-index: 1000;
}
#blazor-error-ui[style*="display: block"] { display: block; }
#blazor-error-ui .reload { color: var(--fnd-brand-dark); margin-left: 1rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }
.fnd-product-card {
margin: 1.2rem 0;
padding: .7rem 1rem .85rem;
background: var(--fnd-bg-muted);
border: 1px solid var(--fnd-border);
border-left: 3px solid var(--fnd-brand);
border-radius: var(--fnd-radius);
scroll-margin-top: 80px;
}
.fnd-product-card__title {
font-family: var(--fnd-font-serif);
font-size: 1rem;
font-weight: 700;
margin: 0 0 .25rem;
color: var(--fnd-brand-dark);
}
.fnd-product-card__body p { margin: 0 0 .4rem; line-height: 1.5; font-size: .95rem; }
.fnd-product-card__body p:last-child { margin-bottom: 0; }
.fnd-product-card a[data-affiliate] {
color: var(--fnd-brand-dark);
font-weight: 500;
text-decoration: underline;
text-decoration-color: rgba(180, 84, 26, .45);
text-underline-offset: 2px;
}
.fnd-product-card a[data-affiliate]:hover { text-decoration-color: var(--fnd-brand); }
.fnd-product-card__support-hint {
margin: .6rem 0 0;
font-size: .85rem;
color: var(--fnd-fg-muted);
}
.scad-figure {
margin: 1.8rem 0;
}
.scad-viewer {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
min-height: 240px;
background:
radial-gradient(circle at 50% 38%, #ffffff 0%, var(--fnd-bg-muted) 78%);
border: 1px solid var(--fnd-border);
border-radius: var(--fnd-radius-lg);
overflow: hidden;
cursor: grab;
touch-action: pan-y;
}
.scad-viewer:active { cursor: grabbing; }
.scad-viewer canvas { display: block; }
.scad-viewer__hint {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: var(--fnd-font-sans);
font-size: .82rem;
color: var(--fnd-fg-muted);
background: rgba(255, 255, 255, .7);
padding: .3rem .7rem;
border-radius: 999px;
pointer-events: none;
white-space: nowrap;
transition: opacity .4s ease, bottom .4s ease;
}
.scad-viewer--ready .scad-viewer__hint {
top: auto;
bottom: .55rem;
transform: translateX(-50%);
font-size: .74rem;
opacity: .72;
box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.scad-viewer--error { cursor: default; }
.scad-viewer--error .scad-viewer__hint { display: none; }
.scad-viewer--error::after {
content: "⚠";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: var(--fnd-fg-muted);
}
.scad-figure figcaption {
margin-top: .55rem;
font-size: .86rem;
color: var(--fnd-fg-muted);
text-align: center;
}
.lesson-solution {
margin: 1.4rem 0;
border: 1px solid var(--fnd-border);
border-radius: var(--fnd-radius);
background: var(--fnd-surface);
}
.lesson-solution > summary {
cursor: pointer;
padding: .7rem 1rem;
font-family: var(--fnd-font-sans);
font-weight: 600;
color: var(--fnd-brand-dark);
list-style: none;
}
.lesson-solution > summary::-webkit-details-marker { display: none; }
.lesson-solution > summary::before {
content: "▸";
display: inline-block;
margin-right: .5rem;
transition: transform .15s ease;
color: var(--fnd-brand);
}
.lesson-solution[open] > summary::before { transform: rotate(90deg); }
.lesson-solution[open] > summary { border-bottom: 1px solid var(--fnd-border); }
.lesson-solution > *:not(summary) {
margin-left: 1rem;
margin-right: 1rem;
}
.lesson-solution > pre:last-child { margin-bottom: 1rem; }
.ost-comment { color: #6b7280; font-style: italic; }
.ost-keyword { color: #1f6feb; font-weight: 600; }
.ost-builtin { color: var(--fnd-brand-dark); }
.ost-var     { color: #0e7490; }
.ost-number  { color: #0550ae; }
.ost-string  { color: #0a7d3c; }
.ost-has-doc {
text-decoration: underline dotted;
text-underline-offset: 3px;
cursor: help;
}
.ost-tip {
position: fixed;
z-index: 1000;
max-width: 300px;
margin: 0;
padding: .55rem .7rem;
background: var(--fnd-ink);
color: #fff;
border-radius: var(--fnd-radius);
box-shadow: 0 6px 22px rgba(31, 42, 68, .28);
font-size: .82rem;
line-height: 1.45;
pointer-events: none;
}
.ost-tip[hidden] { display: none; }
.ost-tip__sig {
display: block;
margin-bottom: .25rem;
font-family: var(--fnd-font-mono);
font-weight: 700;
font-size: .8rem;
color: var(--fnd-brand);
}
.ost-tip__desc { display: block; color: #eef1f6; }
@media (prefers-reduced-motion: no-preference) {
.ost-tip { animation: ost-tip-in .12s ease-out; }
}
@keyframes ost-tip-in {
from { opacity: 0; transform: translateY(2px); }
to   { opacity: 1; transform: none; }
}
.course-cta {
margin: 2rem 0;
padding: 1.2rem 1.4rem;
background: var(--fnd-brand-soft);
border: 1px solid #f3cfae;
border-left: 4px solid var(--fnd-brand);
border-radius: var(--fnd-radius-lg);
}
.course-cta__heading {
display: block;
font-family: var(--fnd-font-serif);
font-size: 1.15rem;
color: var(--fnd-fg);
margin-bottom: .4rem;
}
.course-cta__body { color: var(--fnd-fg-soft); }
.course-cta__body :last-child { margin-bottom: 0; }
.course-cta__btn {
display: inline-block;
margin-top: .9rem;
padding: .55rem 1.1rem;
background: var(--fnd-brand);
color: #fff;
font-weight: 600;
border-radius: var(--fnd-radius);
text-decoration: none;
}
.course-cta__btn:hover { background: var(--fnd-brand-dark); color: #fff; }
.course-index__intro {
font-size: 1.08rem;
color: var(--fnd-fg-soft);
max-width: 46rem;
}
.course-index__list {
list-style: none;
margin: 1.6rem 0;
padding: 0;
display: grid;
gap: .7rem;
}
.course-index__link {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.2rem;
background: var(--fnd-surface);
border: 1px solid var(--fnd-border);
border-radius: var(--fnd-radius-lg);
text-decoration: none;
color: inherit;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.course-index__link:hover {
border-color: var(--fnd-brand);
box-shadow: 0 3px 12px rgba(31, 42, 68, .08);
transform: translateY(-1px);
}
.course-index__num {
flex: 0 0 auto;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--fnd-ink);
color: #fff;
font-family: var(--fnd-font-sans);
font-weight: 700;
font-size: .95rem;
}
.course-index__item--locked .course-index__num { background: var(--fnd-earth); }
.course-index__main { min-width: 0; }
.course-index__title {
display: block;
font-family: var(--fnd-font-serif);
font-size: 1.15rem;
color: var(--fnd-fg);
margin-bottom: .15rem;
}
.course-index__badge {
display: inline-block;
margin-left: .5rem;
font-family: var(--fnd-font-sans);
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
vertical-align: middle;
}
.course-index__badge--free {
color: var(--fnd-brand-dark);
background: var(--fnd-brand-soft);
padding: .1rem .45rem;
border-radius: 999px;
}
.course-index__badge--lock { font-size: .85rem; }
.course-index__teaser {
display: block;
color: var(--fnd-fg-muted);
font-size: .95rem;
}
.course-index__note {
margin-top: 1.8rem;
padding-top: 1.2rem;
border-top: 1px solid var(--fnd-border);
color: var(--fnd-fg-muted);
font-size: .92rem;
}
.course-crumbs {
font-family: var(--fnd-font-sans);
font-size: .88rem;
color: var(--fnd-fg-muted);
margin-bottom: .8rem;
}
.course-crumbs__sep { margin: 0 .4rem; }
.course-lesson__title { margin-top: 0; }
.course-lesson__lead {
font-size: 1.12rem;
color: var(--fnd-fg-soft);
margin-bottom: 1.6rem;
}
.course-lesson__body { max-width: 46rem; }
.course-lock {
max-width: 38rem;
margin: 1.5rem 0;
padding: 1.8rem;
text-align: center;
background: var(--fnd-bg-muted);
border: 1px dashed var(--fnd-border);
border-radius: var(--fnd-radius-lg);
}
.course-lock__icon { font-size: 2rem; margin: 0 0 .3rem; }
.course-lock__text { font-size: 1.05rem; color: var(--fnd-fg); }
.course-lock__free { font-size: .88rem; color: var(--fnd-fg-muted); margin-top: .8rem; }
.course-pager {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 2.5rem;
padding-top: 1.4rem;
border-top: 1px solid var(--fnd-border);
}
.course-pager a {
display: inline-flex;
flex-direction: column;
max-width: 48%;
text-decoration: none;
color: inherit;
}
.course-pager__next { text-align: right; margin-left: auto; align-items: flex-end; }
.course-pager__dir {
font-family: var(--fnd-font-sans);
font-size: .8rem;
color: var(--fnd-fg-muted);
text-transform: uppercase;
letter-spacing: .04em;
}
.course-pager__title { color: var(--fnd-brand-dark); font-weight: 600; }
.course-pager a:hover .course-pager__title { color: var(--fnd-brand); }
.updates { max-width: 44rem; margin-inline: auto; }
.updates__intro { color: var(--fnd-fg-soft); margin: 0 0 .4rem; }
.updates__freshness { color: var(--fnd-fg-muted); font-size: .85rem; margin: 0 0 2rem; }
.updates__list { list-style: none; margin: 0; padding: 0; }
.updates__item { display: flex; gap: 1.1rem; align-items: baseline; margin: 0 0 1.5rem; }
.updates__date {
flex: none;
width: 6.2rem;
color: var(--fnd-fg-muted);
font-size: .85rem;
font-variant-numeric: tabular-nums;
}
.updates__text { margin: 0; }
.updates__text p { margin: 0; line-height: 1.7; }
@media (max-width: 560px) {
.updates__item { flex-direction: column; gap: .2rem; margin-bottom: 1.7rem; }
.updates__date { width: auto; }
}