1/* ============================================================2 lofi landing page — ported from the standalone lofi-site.3 Everything is scoped under .landing so the forest/lime4 risograph theme stays page-local and never fights Infima5 on docs pages. Brand tokens: docs/assets/brand/README.md6 ============================================================ */7.landing {8 --forest: #18231f; /* deep forest — page ink bed */9 --forest-2: #22332c; /* secondary — surfaces, grid */10 --lime: #d5f26a; /* acid lime — "lo", primary ink */11 --cream: #f3faf6; /* soft cream — "fi", body ink */12 --mint: #99e5bd; /* muted mint — sync, secondary */13 --jade: #39725c; /* jade — rules, dim ink */1415 --ink-dim: #8fae9f;16 --grid: 56px;1718 --f-display: "Comfortaa", ui-rounded, "Segoe UI", system-ui, sans-serif;19 /* Fraunces retired with the old hero-title; system serifs cover the var. */20 --f-serif: "Iowan Old Style", Georgia, serif;21 --f-body: "Karla", system-ui, -apple-system, sans-serif;22 --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;2324 --measure: 62ch;25 --radius: 14px;2627 position: relative;28 background-color: var(--forest);29 color: var(--cream);30 font-family: var(--f-body);31 font-size: 17px;32 line-height: 1.65;33 -webkit-font-smoothing: antialiased;34 overflow-x: hidden;35}3637.landing *,38.landing *::before,39.landing *::after {40 box-sizing: border-box;41}4243/* --- the drafting grid, straight off the banner ------------- */44.landing::before {45 content: "";46 position: absolute;47 inset: 0;48 z-index: 0;49 pointer-events: none;50 background-image:51 linear-gradient(to right, var(--forest-2) 1px, transparent 1px),52 linear-gradient(to bottom, var(--forest-2) 1px, transparent 1px);53 background-size: var(--grid) var(--grid);54 opacity: 0.55;55 mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent56 78%);57}58/* --- risograph grain --------------------------------------- */59.landing::after {60 content: "";61 position: absolute;62 inset: 0;63 z-index: 1;64 pointer-events: none;65 opacity: 0.16;66 mix-blend-mode: overlay;67 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");68}6970.landing .wrap {71 position: relative;72 z-index: 2;73 width: min(1120px, 92vw);74 margin-inline: auto;75}7677/* grid children default to min-width:auto, which lets nowrap code blocks78 push a whole column past the viewport. Let them shrink. */79.landing .hero > *,80.landing .anat > *,81.landing .two-up > *,82.landing .rig > *,83.landing .life > * {84 min-width: 0;85}8687/* ============================================================88 Type89 ============================================================ */90.landing h1,91.landing h2,92.landing h3 {93 font-family: var(--f-display);94 /* Comfortaa's heaviest weight */95 font-weight: 700;96 line-height: 1.06;97 letter-spacing: -0.02em;98 margin: 0;99 color: var(--cream);100}101.landing h2 {102 font-size: clamp(1.9rem, 4vw, 2.9rem);103}104.landing h3 {105 font-size: 1.06rem;106 font-weight: 700;107 letter-spacing: -0.01em;108 line-height: 1.35;109}110.landing p {111 margin: 0 0 1rem;112 max-width: var(--measure);113}114.landing a {115 color: var(--lime);116 text-underline-offset: 3px;117 text-decoration-thickness: 1px;118}119120.landing .eyebrow {121 font-family: var(--f-mono);122 font-size: 0.72rem;123 font-weight: 500;124 letter-spacing: 0.19em;125 text-transform: uppercase;126 color: var(--mint);127 margin: 0 0 0.9rem;128 display: flex;129 align-items: center;130 gap: 0.7rem;131 flex-wrap: wrap;132}133.landing .eyebrow::before {134 content: "";135 width: 26px;136 height: 1px;137 background: var(--jade);138 flex: none;139}140.landing .lede {141 font-size: 1.12rem;142 color: #cfe3d8;143}144.landing .dim {145 color: var(--ink-dim);146}147.landing .band-lede {148 margin-top: 1rem;149}150.landing .intro-note {151 font-size: 0.94rem;152 margin-bottom: 1.6rem;153}154/* Inline code sits on a subtle chip so its bounds are legible — a period155 beside bare mono text is easy to lose. */156.landing .inline-mono {157 font-family: var(--f-mono);158 font-size: 0.85em;159 color: var(--lime);160 background: rgba(34, 51, 44, 0.9);161 border: 0;162 border-radius: 5px;163 padding: 0.1em 0.38em;164}165.landing .life-cmd {166 margin-top: 0.8rem;167 font-size: 0.8rem;168}169.landing .life-cmd .inline-mono {170 font-size: 0.78rem;171 color: var(--mint);172}173174.landing :where(a, button, input, summary):focus-visible {175 outline: 2px solid var(--lime);176 outline-offset: 3px;177 border-radius: 4px;178}179180.landing .pill {181 font-family: var(--f-mono);182 font-size: 0.7rem;183 letter-spacing: 0.06em;184 text-transform: none;185 color: var(--mint);186 border: 1px solid var(--jade);187 padding: 0.28rem 0.6rem;188 border-radius: 999px;189 white-space: nowrap;190}191192/* ============================================================193 Bands194 ============================================================ */195.landing .band {196 padding-block: clamp(4rem, 9vw, 7rem);197 position: relative;198 z-index: 2;199}200.landing .band--rule {201 border-top: 1px solid var(--forest-2);202}203.landing .band-head {204 margin-bottom: 2.6rem;205}206.landing .band-head--tight {207 margin-bottom: 1.8rem;208}209210/* ============================================================211 Mark-led hero, shared by / and /node: the product logotype212 leads, with the version pill and CTAs alongside — no big213 headline + subheadline pair.214 ============================================================ */215/* The mark is branding: always Nunito black, on both pages, regardless of216 the page's display face. */217.landing .nmark {218 font-family: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;219 font-weight: 900;220 font-size: clamp(3rem, 8vw, 5.2rem);221 line-height: 1;222 margin: 0;223 letter-spacing: -0.015em;224}225.landing .nmark .lo {226 color: var(--lime);227}228.landing .nmark .fi {229 color: var(--cream);230}231.landing .nmark .dash {232 color: var(--jade);233 margin: 0 0.06em;234}235.landing .nmark .node {236 color: var(--mint);237}238239.landing .hero-top {240 display: flex;241 align-items: baseline;242 justify-content: space-between;243 gap: 1.4rem 2.4rem;244 flex-wrap: wrap;245 padding: 3.4rem 0 0;246 margin-bottom: 2rem;247}248.landing .hero-side {249 display: grid;250 justify-items: end;251 gap: 0.8rem;252}253.landing .hero-side .cta-row {254 margin: 0;255}256.landing .hero-claim {257 font-family: var(--f-display);258 font-weight: 700;259 font-size: clamp(1.5rem, 2.8vw, 2.2rem);260 line-height: 1.28;261 letter-spacing: -0.01em;262 color: var(--cream);263 margin: 0 0 1.7rem;264}265.landing .hero-main {266 display: grid;267 grid-template-columns: 1.05fr 0.95fr;268 gap: 3rem;269 align-items: center;270 padding-bottom: 1rem;271}272/* Grid items default to min-width auto, so the nowrap install command273 would set the column's minimum and push the whole copy column past274 narrow viewports; let the columns shrink and the command scroll. */275.landing .hero-main > * {276 min-width: 0;277}278@media (max-width: 860px) {279 .landing .hero-top {280 padding-top: 2.2rem;281 }282 .landing .hero-side {283 justify-items: start;284 }285 .landing .hero-main {286 grid-template-columns: 1fr;287 gap: 1.6rem;288 }289 .landing .hero-main .hero-art {290 max-width: 420px;291 }292}293294/* ============================================================295 Hero296 ============================================================ */297.landing .hero {298 /* Infima also defines a `.hero` component; neutralize its background,299 color, and padding before applying the landing layout. */300 background: none;301 color: inherit;302 display: grid;303 grid-template-columns: 1.15fr 0.85fr;304 gap: 3rem;305 align-items: center;306 padding: 0;307 padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);308}309/* the one serif moment on the page: a garden-press masthead,310 set apart from the rounded-sans section heads below it */311.landing .hero-title {312 font-family: var(--f-serif);313 font-weight: 620;314 font-size: clamp(2.7rem, 6.6vw, 4.7rem);315 line-height: 1.04;316 letter-spacing: -0.015em;317 margin-bottom: 1.4rem;318 position: relative;319}320/* restrained print registration: the mint plate sits a hair off the lime plate.321 One deliberate misregistration on the page — nowhere else. */322.landing .hero-title span {323 position: relative;324 display: inline;325 font-style: italic;326 color: var(--lime);327}328.landing .hero-title span::before {329 content: attr(data-ink);330 position: absolute;331 left: -0.045em;332 top: 0.055em;333 color: var(--mint);334 opacity: 0.45;335 z-index: -1;336 pointer-events: none;337 -webkit-user-select: none;338 user-select: none;339}340.landing .hero-sub {341 max-width: 52ch;342}343344.landing .hero-art {345 position: relative;346}347/* the art ships with a transparent background (keyed out of the source348 export), so the page and its grid show through — no edge mask needed */349.landing .hero-art img {350 width: 100%;351 height: auto;352 display: block;353}354355/* The /node landing's hero art is a quick-start terminal in the tree style. */356.landing .hero-term {357 font-size: 0.82rem;358 line-height: 1.75;359 align-self: center;360 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);361}362@media (max-width: 860px) {363 .landing .hero-term {364 margin-top: 1.6rem;365 }366}367368.landing .cta-row {369 display: flex;370 flex-wrap: wrap;371 gap: 0.7rem;372 align-items: center;373 margin-top: 1.8rem;374}375.landing .btn {376 font-family: var(--f-mono);377 font-size: 0.85rem;378 font-weight: 500;379 text-decoration: none;380 padding: 0.62rem 1.05rem;381 border-radius: 10px;382 border: 1px solid var(--jade);383 color: var(--cream);384 transition: border-color 0.18s, color 0.18s, background-color 0.18s;385}386.landing .btn:hover {387 border-color: var(--mint);388 color: var(--mint);389 text-decoration: none;390}391.landing .btn--primary {392 background: var(--lime);393 color: var(--forest);394 border-color: var(--lime);395 font-weight: 600;396}397.landing .btn--primary:hover {398 background: #e2f88c;399 border-color: #e2f88c;400 color: var(--forest);401}402403/* --- install command ---------------------------------------- */404.landing .cmd {405 display: flex;406 align-items: stretch;407 gap: 0;408 margin-top: 2rem;409 border: 1px solid var(--jade);410 border-radius: var(--radius);411 background: rgba(34, 51, 44, 0.6);412 max-width: var(--measure);413 overflow: hidden;414}415.landing .cmd code {416 font-family: var(--f-mono);417 font-size: 0.86rem;418 color: var(--cream);419 padding: 0.85rem 1rem;420 overflow-x: auto;421 white-space: nowrap;422 flex: 1;423 min-width: 0;424 background: none;425 border: 0;426}427.landing .cmd code b {428 color: var(--mint);429 font-weight: 400;430 -webkit-user-select: none;431 user-select: none;432}433.landing .cmd button {434 font-family: var(--f-mono);435 font-size: 0.74rem;436 letter-spacing: 0.08em;437 text-transform: uppercase;438 background: transparent;439 border: 0;440 border-left: 1px solid var(--jade);441 color: var(--mint);442 padding-inline: 1rem;443 cursor: pointer;444 flex: none;445}446.landing .cmd button:hover {447 background: var(--forest-2);448 color: var(--lime);449}450.landing .cmd-note {451 font-family: var(--f-mono);452 font-size: 0.76rem;453 color: var(--ink-dim);454 margin-top: 0.7rem;455}456457@media (max-width: 860px) {458 .landing .hero {459 grid-template-columns: 1fr;460 gap: 1rem;461 }462 .landing .hero-art {463 order: -1;464 width: min(340px, 68vw);465 margin-inline: auto;466 }467}468469/* ============================================================470 Lifecycle — a real sequence, so it gets the wire treatment471 ============================================================ */472.landing .life {473 display: grid;474 grid-template-columns: repeat(3, 1fr);475 gap: 0;476}477.landing .life-step {478 padding-right: 2rem;479 position: relative;480}481.landing .life-step + .life-step {482 padding-left: 2rem;483}484.landing .life-step + .life-step::before {485 content: "";486 position: absolute;487 left: 0;488 top: 0.35rem;489 bottom: 0.35rem;490 width: 1px;491 background-image: linear-gradient(to bottom, var(--jade) 3px, transparent492 3px);493 background-size: 1px 8px;494}495.landing .life-step h3 {496 margin-bottom: 0.5rem;497}498.landing .life-step p {499 font-size: 0.94rem;500 color: var(--ink-dim);501 margin: 0;502}503.landing .life-tag {504 font-family: var(--f-mono);505 font-size: 0.7rem;506 letter-spacing: 0.14em;507 text-transform: uppercase;508 color: var(--lime);509 display: block;510 margin-bottom: 0.6rem;511}512.landing .life-step:nth-child(3) .life-tag {513 color: var(--mint);514}515@media (max-width: 760px) {516 .landing .life {517 grid-template-columns: 1fr;518 gap: 1.6rem;519 }520 .landing .life-step {521 padding: 0;522 }523 .landing .life-step + .life-step {524 padding: 1.6rem 0 0;525 }526 .landing .life-step + .life-step::before {527 left: 0;528 right: 0;529 top: 0;530 bottom: auto;531 width: auto;532 height: 1px;533 background-image: linear-gradient(to right, var(--jade) 3px, transparent534 3px);535 background-size: 8px 1px;536 }537}538539/* ============================================================540 Demo — the signature541 ============================================================ */542.landing .demo-shell {543 border: 1px solid var(--forest-2);544 border-radius: 22px;545 background: rgba(24, 35, 31, 0.72);546 padding: clamp(1.2rem, 3vw, 2.2rem);547}548.landing .demo-bar {549 display: flex;550 align-items: center;551 gap: 1rem;552 flex-wrap: wrap;553 padding-bottom: 1.4rem;554 margin-bottom: 1.8rem;555 border-bottom: 1px solid var(--forest-2);556}557.landing .demo-status {558 font-family: var(--f-mono);559 font-size: 0.78rem;560 color: var(--mint);561 display: flex;562 align-items: center;563 gap: 0.55rem;564 margin-right: auto;565 margin-bottom: 0;566}567.landing .led {568 width: 8px;569 height: 8px;570 border-radius: 50%;571 background: var(--mint);572 flex: none;573 box-shadow: 0 0 0 4px rgba(153, 229, 189, 0.14);574}575.landing .is-offline .led {576 background: var(--jade);577 box-shadow: none;578}579.landing .is-offline .demo-status {580 color: var(--ink-dim);581}582583.landing .switch {584 position: relative;585 display: inline-flex;586 align-items: center;587 gap: 0.6rem;588 cursor: pointer;589 font-family: var(--f-mono);590 font-size: 0.78rem;591 color: var(--cream);592 -webkit-user-select: none;593 user-select: none;594}595.landing .switch input {596 position: absolute;597 opacity: 0;598 width: 1px;599 height: 1px;600}601.landing .switch-track {602 width: 44px;603 height: 24px;604 border-radius: 999px;605 background: var(--forest-2);606 border: 1px solid var(--jade);607 position: relative;608 transition: background 0.2s, border-color 0.2s;609 flex: none;610}611.landing .switch-thumb {612 position: absolute;613 top: 2px;614 left: 2px;615 width: 18px;616 height: 18px;617 border-radius: 50%;618 background: var(--mint);619 transition: transform 0.2s ease, background 0.2s;620}621.landing .switch input:checked + .switch-track {622 background: rgba(153, 229, 189, 0.16);623 border-color: var(--mint);624}625.landing .switch input:not(:checked) + .switch-track .switch-thumb {626 transform: translateX(20px);627 background: var(--jade);628}629.landing .switch input:focus-visible + .switch-track {630 outline: 2px solid var(--lime);631 outline-offset: 3px;632}633634.landing .rig {635 display: grid;636 grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.66fr);637 align-items: center;638 gap: 0;639}640641/* --- device frames, drawn like the hero art ------------------ */642.landing .dev {643 border: 2px solid var(--lime);644 border-radius: 26px;645 padding: 0.9rem 0.8rem 1rem;646 background: rgba(18, 30, 27, 0.9);647 position: relative;648}649.landing .dev--b {650 border-color: var(--mint);651}652.landing .dev::before {653 content: "";654 position: absolute;655 top: 0.55rem;656 left: 50%;657 transform: translateX(-50%);658 width: 34px;659 height: 3px;660 border-radius: 2px;661 background: currentColor;662 opacity: 0.5;663}664.landing .dev--a {665 color: var(--lime);666}667.landing .dev--b {668 color: var(--mint);669}670.landing .dev-name {671 font-family: var(--f-mono);672 font-size: 0.68rem;673 letter-spacing: 0.14em;674 text-transform: uppercase;675 color: currentColor;676 margin: 0.7rem 0 0.9rem;677 text-align: center;678}679.landing .dev-body {680 background: transparent;681}682683.landing .add {684 display: flex;685 gap: 0.4rem;686 margin-bottom: 0.8rem;687}688.landing .add input {689 flex: 1;690 min-width: 0;691 font-family: var(--f-body);692 font-size: 0.86rem;693 background: var(--forest-2);694 border: 1px solid transparent;695 border-radius: 8px;696 color: var(--cream);697 padding: 0.5rem 0.6rem;698}699.landing .add input::placeholder {700 color: var(--ink-dim);701}702.landing .add input:focus {703 outline: none;704 border-color: currentColor;705}706.landing .add button {707 font-family: var(--f-mono);708 font-size: 0.8rem;709 flex: none;710 cursor: pointer;711 background: transparent;712 color: currentColor;713 border: 1px solid currentColor;714 border-radius: 8px;715 width: 34px;716}717.landing .add button:hover {718 background: currentColor;719}720.landing .add button:hover span {721 color: var(--forest);722}723724.landing .tasks {725 list-style: none;726 margin: 0;727 padding: 0;728 min-height: 132px;729}730.landing .tasks li {731 display: flex;732 align-items: center;733 gap: 0.55rem;734 font-size: 0.86rem;735 padding: 0.4rem 0.5rem;736 border-radius: 8px;737 border: 1px solid var(--forest-2);738 margin-bottom: 0.35rem;739 background: rgba(34, 51, 44, 0.45);740 animation: lofi-pop 0.28s ease-out;741}742@keyframes lofi-pop {743 from {744 opacity: 0;745 transform: translateY(-4px);746 }747 to {748 opacity: 1;749 transform: none;750 }751}752.landing .tasks li.is-done .task-text {753 text-decoration: line-through;754 color: var(--ink-dim);755}756.landing .task-text {757 flex: 1;758 min-width: 0;759 overflow: hidden;760 text-overflow: ellipsis;761 white-space: nowrap;762}763.landing .tick {764 width: 15px;765 height: 15px;766 border-radius: 4px;767 flex: none;768 cursor: pointer;769 border: 1px solid var(--jade);770 background: transparent;771 padding: 0;772 display: grid;773 place-items: center;774}775.landing .tick[aria-pressed="true"] {776 background: var(--lime);777 border-color: var(--lime);778}779.landing .tick svg {780 width: 9px;781 height: 9px;782 opacity: 0;783}784.landing .tick[aria-pressed="true"] svg {785 opacity: 1;786}787.landing .pending-dot {788 width: 5px;789 height: 5px;790 border-radius: 50%;791 background: var(--lime);792 flex: none;793 opacity: 0;794 transition: opacity 0.2s;795}796.landing li.is-pending .pending-dot {797 opacity: 1;798}799.landing .tasks-empty {800 font-family: var(--f-mono);801 font-size: 0.74rem;802 color: var(--ink-dim);803 text-align: center;804 padding-top: 2.6rem;805 border: 0;806 background: none;807 display: block;808}809810/* --- the wire ------------------------------------------------ */811.landing .wire {812 position: relative;813 width: 110px;814 height: 2px;815 align-self: center;816}817.landing .wire-line {818 position: absolute;819 inset: 0;820 background-image: linear-gradient(to right, var(--mint) 3px, transparent 3px);821 background-size: 9px 2px;822 background-repeat: repeat-x;823 transition: opacity 0.3s;824}825.landing .is-offline .wire-line,826.landing .demo-shell.is-offline .wire-line {827 opacity: 0.28;828}829.landing .wire-flow {830 position: absolute;831 top: -3px;832 left: 0;833 width: 8px;834 height: 8px;835 border-radius: 50%;836 background: var(--lime);837 opacity: 0;838}839.landing .wire.is-flowing .wire-flow {840 animation: lofi-flow-x 0.55s linear;841}842@keyframes lofi-flow-x {843 0% {844 opacity: 1;845 transform: translateX(0);846 }847 99% {848 opacity: 1;849 transform: translateX(102px);850 }851 100% {852 opacity: 0;853 transform: translateX(102px);854 }855}856.landing .wire-badge {857 position: absolute;858 left: 50%;859 top: 14px;860 transform: translateX(-50%);861 font-family: var(--f-mono);862 font-size: 0.66rem;863 white-space: nowrap;864 color: var(--forest);865 background: var(--lime);866 padding: 0.15rem 0.45rem;867 border-radius: 999px;868 opacity: 0;869 transition: opacity 0.25s;870}871.landing .wire-badge.is-on {872 opacity: 1;873}874875@media (max-width: 760px) {876 .landing .rig {877 grid-template-columns: 1fr;878 justify-items: stretch;879 gap: 0;880 }881 .landing .wire {882 width: 2px;883 height: 56px;884 justify-self: center;885 margin-block: 0.2rem;886 }887 .landing .wire-line {888 background-image: linear-gradient(to bottom, var(--mint) 3px, transparent889 3px);890 background-size: 2px 9px;891 background-repeat: repeat-y;892 }893 .landing .wire-flow {894 top: 0;895 left: -3px;896 }897 .landing .wire.is-flowing .wire-flow {898 animation: lofi-flow-y 0.55s linear;899 }900 @keyframes lofi-flow-y {901 0% {902 opacity: 1;903 transform: translateY(0);904 }905 99% {906 opacity: 1;907 transform: translateY(48px);908 }909 100% {910 opacity: 0;911 transform: translateY(48px);912 }913 }914 .landing .wire-badge {915 left: 14px;916 top: 50%;917 transform: translateY(-50%);918 }919}920@media (prefers-reduced-motion: reduce) {921 .landing .wire.is-flowing .wire-flow {922 animation: none;923 }924}925926.landing .demo-foot {927 font-family: var(--f-mono);928 font-size: 0.75rem;929 color: var(--ink-dim);930 margin-top: 1.6rem;931 margin-bottom: 0;932 padding-top: 1.2rem;933 border-top: 1px solid var(--forest-2);934 max-width: none;935}936.landing .demo-foot code {937 color: var(--mint);938 background: none;939 border: 0;940 font-family: var(--f-mono);941}942943/* ============================================================944 Feature grid945 ============================================================ */946.landing .grid-3 {947 display: grid;948 grid-template-columns: repeat(3, 1fr);949 gap: 1px;950 background: var(--forest-2);951 border: 1px solid var(--forest-2);952 border-radius: var(--radius);953 overflow: hidden;954}955.landing .cell {956 background: var(--forest);957 padding: 1.7rem 1.5rem;958}959.landing .cell h3 {960 margin-bottom: 0.5rem;961 color: var(--cream);962}963.landing .cell p {964 font-size: 0.92rem;965 color: var(--ink-dim);966 margin: 0;967}968.landing .cell-leaf {969 width: 16px;970 height: 16px;971 color: var(--lime);972 display: block;973 margin-bottom: 1rem;974}975@media (max-width: 860px) {976 .landing .grid-3 {977 grid-template-columns: 1fr;978 }979}980981/* ============================================================982 Anatomy — ownership is carried by ink colour, like the wordmark983 ============================================================ */984.landing .anat {985 display: grid;986 grid-template-columns: 1fr 1fr;987 gap: 3rem;988 align-items: start;989}990.landing .tree {991 font-family: var(--f-mono);992 font-size: 0.8rem;993 line-height: 1.85;994 background: rgba(34, 51, 44, 0.5);995 border: 1px solid var(--forest-2);996 border-radius: var(--radius);997 padding: 1.4rem;998 margin: 0;999 overflow-x: auto;1000 color: var(--jade);1001}1002.landing .tree code {1003 background: none;1004 border: 0;1005 padding: 0;1006 color: inherit;1007 font-family: inherit;1008 font-size: inherit;1009}1010.landing .tree .yours {1011 color: var(--cream);1012}1013.landing .tree .yours b {1014 color: var(--lime);1015 font-weight: 500;1016}1017.landing .tree .theirs {1018 color: var(--mint);1019 opacity: 0.75;1020}1021.landing .tree .note {1022 color: var(--ink-dim);1023}1024.landing .legend {1025 display: flex;1026 flex-direction: column;1027 gap: 0.8rem;1028 margin: 1.4rem 0 0;1029 padding: 0;1030 list-style: none;1031}1032.landing .legend li {1033 display: flex;1034 align-items: flex-start;1035 gap: 0.7rem;1036 font-size: 0.9rem;1037 color: var(--ink-dim);1038}1039.landing .legend b {1040 color: var(--cream);1041}1042.landing .swatch {1043 width: 11px;1044 height: 11px;1045 border-radius: 3px;1046 flex: none;1047 margin-top: 0.42rem;1048}1049.landing .swatch--yours {1050 background: var(--cream);1051}1052.landing .swatch--theirs {1053 background: var(--mint);1054}1055.landing .swatch--gen {1056 background: var(--ink-dim);1057}1058.landing .anat-more {1059 margin-top: 1.4rem;1060 font-size: 0.9rem;1061}1062@media (max-width: 860px) {1063 .landing .anat {1064 grid-template-columns: 1fr;1065 gap: 2rem;1066 }1067}10681069/* ============================================================1070 Tables1071 ============================================================ */1072.landing .two-up {1073 display: grid;1074 grid-template-columns: 1fr 1fr;1075 gap: 3.5rem;1076 align-items: start;1077}1078@media (max-width: 860px) {1079 .landing .two-up {1080 grid-template-columns: 1fr;1081 gap: 3rem;1082 }1083}10841085.landing .tbl {1086 width: 100%;1087 border-collapse: collapse;1088 font-size: 0.88rem;1089 display: table;1090 margin: 0;1091}1092/* Single-title tables use a real <caption>, styled as the section label —1093 the underline runs edge to edge and assistive tech gets true semantics. */1094.landing .tbl caption {1095 caption-side: top;1096 font-family: var(--f-mono);1097 font-weight: 500;1098 font-size: 0.82rem;1099 letter-spacing: 0.16em;1100 text-transform: uppercase;1101 color: var(--mint);1102 text-align: left;1103 padding: 0.5rem 1rem;1104 border-bottom: 1px solid var(--jade);1105}11061107/* Multi-column header cells keep the same label voice. */1108.landing .tbl th {1109 font-family: var(--f-mono);1110 font-weight: 500;1111 font-size: 0.82rem;1112 letter-spacing: 0.16em;1113 text-transform: uppercase;1114 color: var(--mint);1115 text-align: left;1116 white-space: nowrap;1117 vertical-align: middle;1118 padding: 0.5rem 1rem 0.5rem 0;1119 border-bottom: 1px solid var(--jade);1120 border-left: 0;1121 border-right: 0;1122 border-top: 0;1123 background: none;1124}1125/* Symmetric inset: the first column carries the same leading space the last1126 column's trailing padding provides. */1127.landing .tbl th:first-child,1128.landing .tbl td:first-child {1129 padding-left: 1rem;1130}1131.landing .tbl tr {1132 background: none;1133 border-top: 0;1134}1135.landing .tbl td {1136 padding: 0.7rem 1rem 0.7rem 0;1137 border-bottom: 1px solid var(--forest-2);1138 border-left: 0;1139 border-right: 0;1140 border-top: 0;1141 vertical-align: top;1142 color: var(--ink-dim);1143}1144.landing .tbl td:first-child {1145 color: var(--cream);1146 white-space: nowrap;1147}1148.landing .tbl code {1149 font-family: var(--f-mono);1150 font-size: 0.83rem;1151 color: var(--lime);1152 background: none;1153 border: 0;1154 padding: 0;1155}1156.landing .tbl .pin {1157 font-family: var(--f-mono);1158 color: var(--mint);1159 white-space: nowrap;1160}1161/* tables can't shrink below min-content; let the nowrap cells wrap on narrow screens */1162@media (max-width: 860px) {1163 .landing .tbl th,1164 .landing .tbl td:first-child,1165 .landing .tbl .pin {1166 white-space: normal;1167 }1168}11691170/* --- constraints -------------------------------------------- */1171.landing .limits {1172 list-style: none;1173 margin: 0;1174 padding: 0;1175}1176.landing .limits li {1177 padding: 0.85rem 0 0.85rem 1.6rem;1178 border-bottom: 1px solid var(--forest-2);1179 font-size: 0.93rem;1180 color: var(--ink-dim);1181 position: relative;1182 max-width: var(--measure);1183}1184.landing .limits li::before {1185 content: "";1186 position: absolute;1187 left: 0;1188 top: 1.4rem;1189 width: 8px;1190 height: 1px;1191 background: var(--lime);1192}1193.landing .limits b {1194 color: var(--cream);1195 font-weight: 700;1196}11971198/* ============================================================1199 Entrances. One shared rise: heroes stagger in on load, and1200 where scroll-driven animations exist, section furniture rises1201 as it enters the viewport. Reduced motion gets none of it.1202 ============================================================ */1203@media (prefers-reduced-motion: no-preference) {1204 @keyframes lofi-rise {1205 from {1206 opacity: 0;1207 transform: translateY(14px);1208 }1209 }1210 .landing .hero-top,1211 .landing .node-hero-top {1212 animation: lofi-rise 0.5s 0.05s ease-out backwards;1213 }1214 .landing .hero-main > div:first-child,1215 .landing .node-hero .np {1216 animation: lofi-rise 0.55s 0.18s ease-out backwards;1217 }1218 .landing .hero-main .hero-art {1219 animation: lofi-rise 0.6s 0.32s ease-out backwards;1220 }1221 @supports (animation-timeline: view()) {1222 .landing .band-head,1223 .landing .grid-3 .cell,1224 .landing .life-step,1225 .landing .anat > *,1226 .landing .two-up > *,1227 .landing .ta,1228 .landing .sm,1229 .landing .demo-shell {1230 animation: lofi-rise 0.55s ease-out both;1231 animation-timeline: view();1232 animation-range: entry 5% entry 45%;1233 }1234 }1235}12361237/* ============================================================1238 Selection. Controls and decorative scenes are not copy; the1239 create command, console output, and prose remain selectable.1240 ============================================================ */1241.landing .np-scene,1242.landing .sm-shelf,1243.landing .ta-wire,1244.landing .np-actions,1245.landing .sm-actions,1246.landing .cta-row,1247.landing .btn,1248.landing .np-btn,1249.landing .ta-field,1250.landing .ta-scope,1251.landing .cmd button,1252.landing .switch {1253 -webkit-user-select: none;1254 user-select: none;1255}