.fnd-nm,
.fnd-nm-floor {
--nm-accent: #2f6f8f;
--nm-accent-ink: #ffffff;
--nm-surface: rgb(127 127 127 / 0.08);
--nm-surface-strong: rgb(127 127 127 / 0.18);
--nm-line: rgb(127 127 127 / 0.5);
--nm-lamp: #f2b705;
--nm-alarm: #b3261e;
--nm-alarm-ink: #ffffff;
--nm-radius: 12px;
--nm-small: max(16px, 0.9em);
--nm-paper: #f8f3e6;
--nm-ink: #26384a;
--nm-ink-soft: #55687a;
--nm-brick: #b85c40;
--nm-concrete: #dcd8cf;
--nm-soil: rgb(140 105 70 / 0.5);
--nm-roof: #eadcc1;
--nm-copper: #c46a2b;
--nm-cable: #3a3f42;
--nm-bark: #6b5440;
--nm-leaf: #dbe8c8;
--nm-leaf-dark: #c8d9ae;
--nm-leaf-line: #6f8f5a;
}
.fnd-nm [hidden],
.fnd-nm-floor [hidden] {
display: none !important;
}
.fnd-nm__lead {
font-size: 1.1em;
}
.fnd-nm__outro {
margin-top: 3rem;
font-size: 1.1em;
}
.fnd-nm-floor {
margin: 3.5rem 0 0;
padding-top: 1.25rem;
border-top: 2px solid var(--nm-line);
scroll-margin-top: 5rem;
}
.fnd-nm[data-nm-live] .fnd-nm-floor:not(.is-current) {
display: none;
}
.fnd-nm[data-nm-live] .fnd-nm-floor.is-current {
margin-top: 2rem;
}
.fnd-nm[data-nm-live]:not([data-nm-at="ai"]) .fnd-nm-end {
display: none;
}
.fnd-nm-floor__title:focus {
outline: none;
}
.fnd-nm-floor__title:focus-visible {
outline: 3px solid var(--nm-accent);
outline-offset: 4px;
}
.fnd-nm-floor__level {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
margin: 0;
font-size: var(--nm-small);
}
.fnd-nm-floor__name {
font-weight: 700;
}
.fnd-nm-floor__term {
font-weight: 600;
}
.fnd-nm-floor__term::before {
content: "· " / "";
}
.fnd-nm-floor__built::before {
content: "· " / "";
}
.fnd-nm-floor__title {
margin: 0.25rem 0 0.75rem;
}
.fnd-nm-more {
margin: 1.25rem 0 0;
padding: 0.25rem 1rem;
border: 1px solid var(--nm-line);
border-radius: 8px;
}
.fnd-nm-more__summary {
display: flex;
align-items: center;
min-height: 44px;
font-weight: 600;
cursor: pointer;
}
.fnd-nm-more__summary:focus-visible {
outline: 3px solid var(--nm-accent);
outline-offset: 2px;
}
.fnd-nm-more__body {
padding: 0 0 0.75rem;
}
.fnd-nm-more__body > :first-child {
margin-top: 0.25rem;
}
.fnd-nm-more__year {
font-style: italic;
}
.fnd-nm-more__title {
margin: 1.25rem 0 0.5rem;
font-size: 1.1em;
}
.fnd-nm-terms {
margin: 0;
}
.fnd-nm-terms__item {
padding: 0.4rem 0;
border-top: 1px solid var(--nm-line);
}
.fnd-nm-terms__item dt {
font-weight: 700;
}
.fnd-nm-terms__item dd {
margin: 0.1rem 0 0;
}
.fnd-nm-more__sources-label {
margin: 1.25rem 0 0.25rem;
font-size: var(--nm-small);
}
.fnd-nm-more__sources {
margin: 0;
padding-left: 1.25rem;
font-size: var(--nm-small);
}
.fnd-nm-more__sources li {
margin: 0.25rem 0;
overflow-wrap: anywhere;
}
.fnd-nm-floor__nav,
.fnd-nm-floor__house {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 1.25rem 0 0;
}
.fnd-nm-floor__nav a,
.fnd-nm-floor__house a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.fnd-nm-floor__up::after,
.fnd-nm-toy__up::after {
content: "\00a0↑" / "";
}
.fnd-nm-plan {
margin: 2.5rem 0;
scroll-margin-top: 5rem;
container-type: inline-size;
}
.fnd-nm-plan__title {
margin-bottom: 0.25rem;
}
.fnd-nm-plan__building {
--nm-yard-left: 0.75rem;
--nm-yard-right: 0.75rem;
--nm-wall: 12px;
max-width: calc(34rem + var(--nm-yard-left) + var(--nm-yard-right));
margin: 1.5rem auto 0;
padding: 1.25rem var(--nm-yard-right) 1.25rem var(--nm-yard-left);
overflow: hidden;
border-radius: var(--nm-radius);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M16 .5H.5V16' fill='none' stroke='%23ece2cd'/%3E%3C/svg%3E") 0 0 / 16px 16px,
var(--nm-paper);
color: var(--nm-ink);
}
.fnd-nm-plan__house {
margin: 0;
padding: 0 var(--nm-wall);
list-style: none;
border-inline: 1.5px solid var(--nm-ink);
background:
repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.3) 0 1px, transparent 1px 4.25px) left top / var(--nm-wall) 100% no-repeat,
repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.3) 0 1px, transparent 1px 4.25px) right top / var(--nm-wall) 100% no-repeat,
linear-gradient(var(--nm-brick), var(--nm-brick)) left top / var(--nm-wall) 100% no-repeat,
linear-gradient(var(--nm-brick), var(--nm-brick)) right top / var(--nm-wall) 100% no-repeat;
}
.fnd-nm-plan__roof {
position: relative;
height: clamp(5.5rem, 17cqi, 7rem);
margin: 0 -0.6rem;
}
.fnd-nm-plan__eaves {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
fill: var(--nm-roof);
stroke: var(--nm-ink);
stroke-width: 2;
stroke-linejoin: round;
}
.fnd-nm-plan__fan {
position: absolute;
left: 50%;
bottom: 0.55rem;
width: 2.1rem;
height: 2.1rem;
overflow: visible;
transform: translateX(-50%);
}
.fnd-nm-plan__fan-frame {
fill: var(--nm-paper);
stroke: var(--nm-ink);
stroke-width: 1.8;
}
.fnd-nm-plan__fan-ring {
fill: none;
stroke: var(--nm-ink);
stroke-width: 0.8;
}
.fnd-nm-plan__fan-blade {
fill: color-mix(in srgb, var(--nm-ink) 16%, transparent);
stroke: var(--nm-ink);
stroke-width: 0.9;
}
.fnd-nm-plan__fan-hub {
fill: var(--nm-ink);
}
.fnd-nm-plan__floor {
position: relative;
margin: 0;
}
.fnd-nm-plan__link {
--nm-at: 0px;
--nm-room: transparent;
--nm-wash: transparent;
--nm-contact: var(--nm-paper);
--nm-glow: transparent;
display: grid;
grid-template-columns: 1.5rem minmax(0, 6.5rem) minmax(0, 1fr) auto;
gap: 0.25rem 0.65rem;
align-items: baseline;
min-height: 44px;
padding: 0.65rem calc(var(--nm-at) + 1rem) 0.65rem calc(var(--nm-at) + 1.5rem);
border: 0 solid var(--nm-ink);
border-width: 4px 1.5px 0;
background:
radial-gradient(circle at calc(var(--nm-at) + 9.3px) 1.4rem, var(--nm-contact) 0 2.9px, var(--nm-copper) 3.1px 4.5px, transparent 4.7px),
linear-gradient(var(--nm-copper), var(--nm-copper)) calc(var(--nm-at) + 8px) 0 / 2.6px 100% no-repeat,
radial-gradient(circle at calc(var(--nm-at) + 9.3px) 1.4rem, var(--nm-glow) 0 7px, transparent 9px),
linear-gradient(var(--nm-wash), var(--nm-wash)),
var(--nm-room);
color: inherit;
text-decoration: none;
}
.fnd-nm-plan__link:has(.fnd-nm-plan__check:not([hidden])) {
--nm-contact: var(--nm-lamp);
--nm-glow: color-mix(in srgb, var(--nm-lamp) 38%, transparent);
}
.fnd-nm-plan__link:hover .fnd-nm-plan__name,
.fnd-nm-plan__link:focus-visible .fnd-nm-plan__name {
text-decoration: underline;
}
.fnd-nm-plan__link:focus-visible {
outline: 3px solid var(--nm-accent);
outline-offset: 2px;
}
.fnd-nm-plan__level {
color: var(--nm-ink-soft);
font-size: var(--nm-small);
font-weight: 700;
letter-spacing: 0.02em;
}
.fnd-nm-plan__name {
display: flex;
flex-direction: column;
min-width: 0;
overflow-wrap: anywhere;
}
.fnd-nm-plan__term {
color: var(--nm-ink-soft);
font-size: var(--nm-small);
font-style: italic;
}
.fnd-nm-plan__year {
justify-self: end;
font-size: var(--nm-small);
font-variant-numeric: tabular-nums;
text-align: right;
}
.fnd-nm-plan__icon {
align-self: start;
width: 1.5rem;
height: 1.5rem;
color: var(--nm-ink);
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.fnd-nm-plan__icon-fill {
fill: currentColor;
stroke: none;
}
.fnd-nm-plan__floor--bits {
isolation: isolate;
margin-inline: calc(-1 * (var(--nm-wall) + 1.5px));
}
.fnd-nm-plan__house .fnd-nm-plan__floor--bits .fnd-nm-plan__link {
--nm-at: calc(var(--nm-wall) + 1.5px);
--nm-room: var(--nm-paper);
border-bottom-width: 1.5px;
background:
radial-gradient(circle at calc(var(--nm-at) + 9.3px) 1.4rem, var(--nm-contact) 0 2.9px, var(--nm-copper) 3.1px 4.5px, transparent 4.7px),
linear-gradient(var(--nm-cable), var(--nm-cable)) left calc(var(--nm-at) + 4.3px) bottom 12px / 10px 17px no-repeat,
linear-gradient(var(--nm-cable), var(--nm-cable)) left 0 bottom 18px / calc(var(--nm-at) + 5px) 5px no-repeat,
linear-gradient(var(--nm-copper), var(--nm-copper)) calc(var(--nm-at) + 8px) 0 / 2.6px calc(100% - 29px) no-repeat,
radial-gradient(circle at calc(var(--nm-at) + 9.3px) 1.4rem, var(--nm-glow) 0 7px, transparent 9px),
linear-gradient(var(--nm-ink), var(--nm-ink)) var(--nm-wall) 0 / 1.5px 100% no-repeat,
linear-gradient(var(--nm-ink), var(--nm-ink)) right var(--nm-wall) top 0 / 1.5px 100% no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='14' height='14' fill='%23dcd8cf'/%3E%3Cg fill='%237d786e'%3E%3Ccircle cx='3' cy='4' r='.9'/%3E%3Ccircle cx='10.5' cy='11' r='.8'/%3E%3C/g%3E%3Cpath d='M8.5 2.4l2 3.3h-4zM3 9.4l1.7 2.7h-3.4z' fill='none' stroke='%237d786e' stroke-width='.7'/%3E%3C/svg%3E") left top / var(--nm-wall) var(--nm-wall) repeat-y,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='14' height='14' fill='%23dcd8cf'/%3E%3Cg fill='%237d786e'%3E%3Ccircle cx='3' cy='4' r='.9'/%3E%3Ccircle cx='10.5' cy='11' r='.8'/%3E%3C/g%3E%3Cpath d='M8.5 2.4l2 3.3h-4zM3 9.4l1.7 2.7h-3.4z' fill='none' stroke='%237d786e' stroke-width='.7'/%3E%3C/svg%3E") right top / var(--nm-wall) var(--nm-wall) repeat-y,
linear-gradient(var(--nm-wash), var(--nm-wash)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M16 .5H.5V16' fill='none' stroke='%23ece2cd'/%3E%3C/svg%3E") 0 0 / 16px 16px,
var(--nm-room);
}
.fnd-nm-plan__floor--bits::before {
content: "";
position: absolute;
z-index: -1;
inset: -12px calc(-1 * var(--nm-yard-right)) -1.25rem calc(-1 * var(--nm-yard-left));
background:
linear-gradient(var(--nm-cable), var(--nm-cable)) left 0 bottom calc(1.25rem + 19.5px) / var(--nm-yard-left) 5px no-repeat,
linear-gradient(var(--nm-ink), var(--nm-ink)) left calc(var(--nm-yard-left) - 10px) bottom calc(1.25rem - 12px) / 1.5px 12px no-repeat,
linear-gradient(var(--nm-ink), var(--nm-ink)) right calc(var(--nm-yard-right) - 10px) bottom calc(1.25rem - 12px) / 1.5px 12px no-repeat,
linear-gradient(var(--nm-ink), var(--nm-ink)) left calc(var(--nm-yard-left) - 10px) bottom calc(1.25rem - 12px) / calc(100% - var(--nm-yard-left) - var(--nm-yard-right) + 20px) 1.5px no-repeat,
linear-gradient(var(--nm-ink), var(--nm-ink)) left calc(var(--nm-yard-left) - 10px) bottom calc(1.25rem - 1.5px) / calc(100% - var(--nm-yard-left) - var(--nm-yard-right) + 20px) 1.5px no-repeat,
linear-gradient(var(--nm-concrete), var(--nm-concrete)) left calc(var(--nm-yard-left) - 10px) bottom calc(1.25rem - 12px) / calc(100% - var(--nm-yard-left) - var(--nm-yard-right) + 20px) 12px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Cpath d='M4 12q-.5-3.5-2-6M5 12V5M6 12q.6-3 2-5M15 12q-.4-2.4-1.4-4M16 12V7M17 12q.5-2.4 1.5-3.5M23 12q-.6-3.6-2.2-6M24 12V4.5M25.2 12q.6-3.2 2.2-5.2' fill='none' stroke='%236f9a55' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 28px 12px repeat-x,
linear-gradient(var(--nm-ink), var(--nm-ink)) 0 10.5px / 100% 3px no-repeat,
repeating-linear-gradient(45deg, var(--nm-soil) 0 1px, transparent 1px 7px) 0 12px / 100% calc(100% - 12px) no-repeat;
mask:
linear-gradient(#000, #000) 0 12px / 100% calc(100% - 12px) no-repeat,
linear-gradient(to right, #000 var(--nm-yard-left), transparent var(--nm-yard-left) calc(100% - var(--nm-yard-right)), #000 calc(100% - var(--nm-yard-right))) 0 0 / 100% 12px no-repeat;
}
.fnd-nm-plan__tree {
display: none;
}
@container (min-width: 36rem) {
.fnd-nm-plan__building {
--nm-yard-right: 5.75rem;
}
.fnd-nm-plan__floor {
--nm-out: calc(var(--nm-wall) + 1.5px);
}
.fnd-nm-plan__floor--bits {
--nm-out: 0px;
}
.fnd-nm-plan__floor::after {
content: "";
position: absolute;
top: -3px;
bottom: 0;
left: calc(100% + var(--nm-out) + 4px);
width: calc(1.4rem + 7px);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M1.5 7.5L7.5 1.5' stroke='%2326384a' stroke-width='1.5'/%3E%3C/svg%3E") right 2px top 0.5px / 9px 9px no-repeat,
linear-gradient(var(--nm-ink-soft), var(--nm-ink-soft)) left 0 top 4.5px / 100% 1px no-repeat,
linear-gradient(var(--nm-ink-soft), var(--nm-ink-soft)) right 6.5px top 0 / 1px 100% no-repeat;
pointer-events: none;
}
.fnd-nm-plan__floor--bits::after {
bottom: -3px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M1.5 7.5L7.5 1.5' stroke='%2326384a' stroke-width='1.5'/%3E%3C/svg%3E") right 2px top 0.5px / 9px 9px no-repeat,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M1.5 7.5L7.5 1.5' stroke='%2326384a' stroke-width='1.5'/%3E%3C/svg%3E") right 2px bottom 0.5px / 9px 9px no-repeat,
linear-gradient(var(--nm-ink-soft), var(--nm-ink-soft)) left 0 top 4.5px / 100% 1px no-repeat,
linear-gradient(var(--nm-ink-soft), var(--nm-ink-soft)) left 0 bottom 4.5px / 100% 1px no-repeat,
linear-gradient(var(--nm-ink-soft), var(--nm-ink-soft)) right 6.5px top 0 / 1px 100% no-repeat;
}
.fnd-nm-plan__link {
grid-template-columns: 1.5rem minmax(0, 6.5rem) minmax(0, 1fr);
}
.fnd-nm-plan__year {
position: absolute;
top: 50%;
left: calc(100% + var(--nm-out) + 4px + 2rem);
translate: 0 -50%;
}
}
@container (min-width: 44rem) {
.fnd-nm-plan__building {
--nm-yard-right: 12.75rem;
}
.fnd-nm-plan__tree {
display: block;
position: absolute;
left: calc(100% + 5.4rem);
bottom: calc(100% - 2px);
width: 7rem;
height: auto;
cursor: help;
}
}
.fnd-nm-plan__tree .fnd-nm-tree__trunk,
.fnd-nm-plan__tree .fnd-nm-tree__level {
stroke: var(--nm-bark);
}
.fnd-nm-plan__tree .fnd-nm-tree__trunk {
stroke-width: 22;
}
.fnd-nm-plan__tree .fnd-nm-tree__level--1 {
stroke-width: 15;
}
.fnd-nm-plan__tree .fnd-nm-tree__level--2 {
stroke-width: 10;
}
.fnd-nm-plan__tree .fnd-nm-tree__level--3 {
stroke-width: 6;
}
.fnd-nm-plan__tree .fnd-nm-tree__level--4 {
stroke-width: 4;
}
.fnd-nm-plan__tree .fnd-nm-tree__level--5 {
stroke-width: 3;
}
.fnd-nm-tree__outline {
fill: var(--nm-leaf-line);
stroke: var(--nm-leaf-line);
stroke-width: 6;
stroke-linejoin: round;
}
.fnd-nm-tree__crown {
fill: var(--nm-leaf);
}
.fnd-nm-tree__crown .is-dark {
fill: var(--nm-leaf-dark);
}
.fnd-nm-plan__floor.is-current .fnd-nm-plan__link {
--nm-wash: color-mix(in srgb, var(--nm-accent) 11%, transparent);
}
.fnd-nm-plan__here {
grid-column: -2 / -1;
grid-row: 2;
justify-self: end;
padding: 0.1rem 0.65rem;
border-radius: 999px;
background: var(--nm-accent);
color: var(--nm-accent-ink);
font-size: var(--nm-small);
font-weight: 700;
white-space: nowrap;
}
.fnd-nm-plan__check {
color: var(--nm-accent);
font-weight: 800;
}
.fnd-nm-plan__resume {
max-width: 34rem;
margin: 0.75rem auto 0;
font-weight: 600;
}
.fnd-nm-plan__memory {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.25rem 0.75rem;
max-width: 34rem;
margin: 0.75rem auto 0;
font-size: var(--nm-small);
}
.fnd-nm-button--quiet {
min-height: 44px;
padding: 0.25rem 0.9rem;
border-width: 1px;
font-size: var(--nm-small);
}
.fnd-nm-sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.fnd-nm-plan__notest {
max-width: 34rem;
margin: 1rem auto 0;
font-size: var(--nm-small);
text-align: center;
}
@media (max-width: 30rem) {
.fnd-nm-plan__building {
--nm-wall: 8px;
}
.fnd-nm-plan__link {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.fnd-nm-plan__name {
grid-column: 1 / -1;
grid-row: 2;
}
.fnd-nm-plan__here {
grid-column: 1 / -1;
grid-row: 3;
justify-self: start;
}
}
.fnd-nm-toy {
margin: 1.25rem 0;
padding: 1rem 1.25rem;
border: 1px solid var(--nm-line);
border-radius: var(--nm-radius);
background: var(--nm-surface);
}
.fnd-nm-toy > :first-child {
margin-top: 0;
}
.fnd-nm-toy > :last-child {
margin-bottom: 0;
}
.fnd-nm-toy:not([data-nm-live]) .fnd-nm-live-only {
display: none !important;
}
.fnd-nm-toy[data-nm-live] .fnd-nm-static-only {
display: none !important;
}
.fnd-nm-toy__task {
font-weight: 600;
}
.fnd-nm-toy__note {
font-size: var(--nm-small);
}
.fnd-nm-toy__status {
min-height: 1.5em;
font-weight: 600;
}
.fnd-nm-toy__actions {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem 1rem;
margin: 1rem 0;
}
.fnd-nm-toy [hidden] {
display: none !important;
}
.fnd-nm-toy__pager {
display: inline-flex;
flex-wrap: nowrap;
gap: 0.75rem 1rem;
}
.fnd-nm-toy a.fnd-nm-button,
.fnd-nm-toy a.fnd-nm-button:hover {
text-decoration: none;
}
.fnd-nm-toy a.fnd-nm-button--primary {
color: var(--nm-accent-ink);
}
.fnd-nm-button--hint {
gap: 0.45rem;
}
.fnd-nm-button__icon {
display: inline-grid;
place-items: center;
width: 1.35em;
height: 1.35em;
border: 2px solid currentColor;
border-radius: 50%;
font-weight: 800;
line-height: 1;
}
@container (max-width: 24rem) {
.fnd-nm-button.fnd-nm-button--hint {
padding-inline: 0.5rem;
}
.fnd-nm-button--hint .fnd-nm-button__label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
}
.fnd-nm-toy {
container-type: inline-size;
}
.fnd-nm-toy__step {
margin: 0 0 0.5rem;
font-size: var(--nm-small);
font-weight: 600;
}
.fnd-nm-toy__task .fnd-nm-toy__step {
display: inline-block;
margin: 0 0.5rem 0.25rem 0;
padding: 0 0.6rem;
border: 1px solid var(--nm-line);
border-radius: 999px;
}
.fnd-nm-hint {
padding: 0.5rem 0.75rem;
border-left: 5px solid var(--nm-lamp);
background: var(--nm-surface-strong);
}
.fnd-nm-switch.is-hint,
.fnd-nm-bits__cell.is-hint .fnd-nm-switch {
outline: 3px dashed var(--nm-accent);
outline-offset: 3px;
}
.fnd-nm-stage + .fnd-nm-stage {
margin-top: 1.5rem;
}
.fnd-nm-toy:not([data-nm-live]) .fnd-nm-stage + .fnd-nm-stage {
padding-top: 1.25rem;
border-top: 1px solid var(--nm-line);
}
.fnd-nm-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0.45rem 1.1rem;
border: 2px solid var(--nm-accent);
border-radius: 999px;
background: transparent;
color: inherit;
font: inherit;
line-height: 1.2;
cursor: pointer;
}
.fnd-nm-button--primary,
.fnd-nm-button[aria-pressed="true"] {
background: var(--nm-accent);
color: var(--nm-accent-ink);
}
.fnd-nm-button:disabled {
cursor: default;
opacity: 0.6;
}
.fnd-nm-button:focus-visible,
.fnd-nm-switch:focus-visible,
.fnd-nm-input:focus-visible,
.fnd-nm-ai__pick:focus-visible {
outline: 3px solid var(--nm-accent);
outline-offset: 2px;
}
.fnd-nm-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-width: 0;
flex: 1 1 16rem;
}
.fnd-nm-field__label {
font-weight: 600;
}
.fnd-nm-input {
box-sizing: border-box;
width: 100%;
max-width: 30rem;
min-height: 44px;
padding: 0.4rem 0.7rem;
border: 2px solid var(--nm-line);
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
}
.fnd-nm-switch {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-width: 44px;
min-height: 44px;
padding: 0.4rem 0.6rem;
border: 2px solid var(--nm-line);
border-radius: 10px;
background: transparent;
color: inherit;
font: inherit;
line-height: 1.2;
text-align: left;
cursor: pointer;
}
.fnd-nm-switch:disabled {
cursor: default;
}
.fnd-nm-switch[aria-pressed="true"] {
border-color: var(--nm-accent);
}
.fnd-nm-switch__knob {
position: relative;
flex: none;
width: 2.6rem;
height: 1.45rem;
border: 2px solid var(--nm-line);
border-radius: 999px;
background: var(--nm-surface);
}
.fnd-nm-switch__knob::after {
content: "";
position: absolute;
top: 50%;
left: 0.15rem;
width: 0.95rem;
height: 0.95rem;
border-radius: 50%;
background: currentColor;
transform: translateY(-50%);
transition: left 0.15s ease;
}
.fnd-nm-switch[aria-pressed="true"] .fnd-nm-switch__knob {
border-color: var(--nm-accent);
background: var(--nm-accent);
}
.fnd-nm-switch[aria-pressed="true"] .fnd-nm-switch__knob::after {
left: calc(100% - 1.1rem);
background: var(--nm-accent-ink);
}
.fnd-nm-switch__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.fnd-nm-switch__label {
font-weight: 600;
overflow-wrap: anywhere;
}
.fnd-nm-switch__state {
font-size: var(--nm-small);
}
.fnd-nm-lamp {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
min-height: 44px;
}
.fnd-nm-lamp__bulb {
flex: none;
width: 1.6rem;
height: 1.6rem;
border: 2px solid var(--nm-line);
border-radius: 50%;
background: transparent;
}
.fnd-nm-lamp[data-nm-lit="true"] .fnd-nm-lamp__bulb {
border-color: #8a6a00;
background: var(--nm-lamp);
box-shadow: 0 0 0 4px rgb(242 183 5 / 0.35);
}
.fnd-nm-lamp__label {
font-size: var(--nm-small);
}
.fnd-nm-bits__row {
display: grid;
grid-template-columns: repeat(8, auto);
justify-content: center;
gap: 0.75rem 0.5rem;
margin: 1.25rem 0 0.75rem;
}
@container (max-width: 36rem) {
.fnd-nm-bits__row {
grid-template-columns: repeat(4, auto);
}
}
.fnd-nm-bits__cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.fnd-nm-bits__weight,
.fnd-nm-bits__digit {
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.fnd-nm-bits__cell .fnd-nm-switch {
justify-content: center;
padding: 0.4rem;
}
.fnd-nm-bits__sum {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 0.25rem 0.75rem;
margin: 0.5rem 0 1rem;
font-size: 1.25em;
}
.fnd-nm-bits__sum-label {
font-size: var(--nm-small);
}
.fnd-nm-bits__equation {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.fnd-nm-bits__bulb {
width: 1.5rem;
height: auto;
overflow: visible;
}
.fnd-nm-bits__glass {
fill: transparent;
stroke: currentColor;
stroke-width: 1.5;
transition: fill 0.15s ease-out;
}
.fnd-nm-bits__filament {
fill: none;
stroke: currentColor;
stroke-width: 1.1;
stroke-linejoin: round;
}
.fnd-nm-bits__base {
fill: var(--nm-surface-strong);
stroke: currentColor;
stroke-width: 1.3;
}
.fnd-nm-bits__cell:has([aria-pressed="true"]) .fnd-nm-bits__glass {
fill: var(--nm-lamp);
}
.fnd-nm-bits__cell:has([aria-pressed="true"]) .fnd-nm-bits__bulb {
filter: drop-shadow(0 0 4px var(--nm-lamp));
}
.fnd-nm-bits__chars {
margin: 1rem 0 0;
padding-top: 0.75rem;
border-top: 1px solid var(--nm-line);
font-size: var(--nm-small);
}
@media (max-width: 22rem) {
.fnd-nm-bits__row {
gap: 0.5rem 0.3rem;
}
.fnd-nm-bits__cell .fnd-nm-switch__knob {
width: 2.2rem;
}
}
.fnd-nm-tree {
margin: 1rem 0 0;
padding-top: 0.25rem;
border-top: 1px solid var(--nm-line);
}
.fnd-nm-tree__summary {
display: flex;
align-items: center;
min-height: 44px;
font-weight: 600;
cursor: pointer;
}
.fnd-nm-tree__summary:focus-visible {
outline: 3px solid var(--nm-accent);
outline-offset: 2px;
}
.fnd-nm-tree__svg {
display: block;
width: 100%;
max-width: 24rem;
height: auto;
margin: 0.5rem auto 0.25rem;
}
.fnd-nm-tree__trunk,
.fnd-nm-tree__level {
fill: none;
stroke: currentColor;
stroke-linecap: round;
}
.fnd-nm-tree__trunk {
stroke-width: 7;
}
.fnd-nm-tree__level--1 {
stroke-width: 5.5;
}
.fnd-nm-tree__level--2 {
stroke-width: 4.2;
}
.fnd-nm-tree__level--3 {
stroke-width: 3;
}
.fnd-nm-tree__level--4 {
stroke-width: 2.1;
}
.fnd-nm-tree__level--5 {
stroke-width: 1.5;
}
.fnd-nm-tree__leaves {
fill: none;
stroke: var(--nm-accent);
stroke-width: 5.5;
stroke-linecap: round;
}
.fnd-nm-tree__steps {
margin: 0.5rem 0 0;
padding: 0;
list-style: none;
font-variant-numeric: tabular-nums;
}
.fnd-nm-tree[open] .fnd-nm-tree__level,
.fnd-nm-tree[open] .fnd-nm-tree__leaves,
.fnd-nm-tree[open] .fnd-nm-tree__step {
animation: fnd-nm-appear 0.45s ease-out both;
}
.fnd-nm-tree[open] .fnd-nm-tree__level--2,
.fnd-nm-tree[open] .fnd-nm-tree__step:nth-child(2) {
animation-delay: 0.5s;
}
.fnd-nm-tree[open] .fnd-nm-tree__level--3,
.fnd-nm-tree[open] .fnd-nm-tree__step:nth-child(3) {
animation-delay: 1s;
}
.fnd-nm-tree[open] .fnd-nm-tree__level--4,
.fnd-nm-tree[open] .fnd-nm-tree__step:nth-child(4) {
animation-delay: 1.5s;
}
.fnd-nm-tree[open] .fnd-nm-tree__level--5,
.fnd-nm-tree[open] .fnd-nm-tree__leaves,
.fnd-nm-tree[open] .fnd-nm-tree__step:nth-child(5) {
animation-delay: 2s;
}
.fnd-nm-tree[open] .fnd-nm-tree__step:nth-child(6) {
animation-delay: 2.6s;
}
.fnd-nm-tree[open] .fnd-nm-tree__step:nth-child(7) {
animation-delay: 3.2s;
}
.fnd-nm-tree[open] .fnd-nm-tree__step:nth-child(8) {
animation-delay: 3.8s;
}
@keyframes fnd-nm-appear {
from {
opacity: 0;
}
}
.fnd-nm-gate__title {
margin: 0 0 0.35rem;
}
.fnd-nm-circuit {
display: grid;
grid-template-columns: minmax(0, 25rem) minmax(0, max-content);
justify-content: start;
align-items: center;
gap: 0.75rem 1.5rem;
margin: 1rem 0;
}
.fnd-nm-circuit__controls {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
min-width: 0;
}
.fnd-nm-circuit .fnd-nm-lamp__bulb {
display: none;
}
.fnd-nm-circuit .fnd-nm-lamp {
min-height: 0;
}
@container (max-width: 38rem) {
.fnd-nm-circuit {
grid-template-columns: minmax(0, 1fr);
}
.fnd-nm-circuit__controls {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.fnd-nm-circuit > .fnd-nm-sch {
justify-self: center;
width: 100%;
max-width: 28rem;
}
.fnd-nm-circuit__controls .fnd-nm-lamp {
flex-basis: 100%;
}
}
.fnd-nm-op {
padding: 0.4rem 0.75rem;
border: 2px solid var(--nm-accent);
border-radius: 8px;
font-weight: 800;
letter-spacing: 0.03em;
text-align: center;
overflow-wrap: anywhere;
}
.fnd-nm-sch {
margin: 0;
min-width: 0;
}
.fnd-nm-sch__svg {
display: block;
width: 100%;
height: auto;
}
.fnd-nm-sch__caption {
margin: 0.25rem 0 0;
text-align: center;
}
.fnd-nm-sch__caption .fnd-nm-op {
display: inline-block;
padding: 0.1rem 0.55rem;
}
.fnd-nm-sch__wire,
.fnd-nm-sch__filament,
.fnd-nm-sch__thread,
.fnd-nm-sch__pole,
.fnd-nm-sch__rays {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.fnd-nm-sch__wire {
stroke-width: 3;
opacity: 0.65;
}
.fnd-nm-sch__filament {
stroke-width: 1.6;
}
.fnd-nm-sch__thread {
stroke-width: 1.5;
}
.fnd-nm-sch__pole {
stroke-width: 2.5;
}
.fnd-nm-sch__battery,
.fnd-nm-sch__base {
fill: var(--nm-surface-strong);
stroke: currentColor;
stroke-width: 2;
}
.fnd-nm-sch__pivot,
.fnd-nm-sch__node {
fill: currentColor;
}
.fnd-nm-sch__contact {
fill: none;
stroke: currentColor;
stroke-width: 2.5;
}
.fnd-nm-sch__glass {
fill: transparent;
stroke: currentColor;
stroke-width: 2;
transition: fill 0.2s ease-out;
}
.fnd-nm-sch[data-nm-lit="true"] .fnd-nm-sch__glass {
fill: var(--nm-lamp);
}
.fnd-nm-sch__rays {
stroke: var(--nm-lamp);
stroke-width: 3.5;
visibility: hidden;
}
.fnd-nm-sch[data-nm-lit="true"] .fnd-nm-sch__rays {
visibility: visible;
}
.fnd-nm-sch__lever {
fill: none;
stroke: currentColor;
stroke-width: 6;
stroke-linecap: round;
transform-box: fill-box;
transform-origin: 0 50%;
transform: rotate(-32deg);
transition: transform 0.18s ease-out;
}
.fnd-nm-sch[data-nm-a="1"] .fnd-nm-sch__lever--a,
.fnd-nm-sch[data-nm-b="1"] .fnd-nm-sch__lever--b {
transform: none;
}
.fnd-nm-sch--xor .fnd-nm-sch__lever {
transform: rotate(-20.56deg);
}
.fnd-nm-sch--xor .fnd-nm-sch__lever--b {
transform-origin: 100% 50%;
}
.fnd-nm-sch--xor[data-nm-a="1"] .fnd-nm-sch__lever--a,
.fnd-nm-sch--xor[data-nm-b="1"] .fnd-nm-sch__lever--b {
transform: rotate(20.56deg);
}
.fnd-nm-sch__route {
fill: none;
stroke: var(--nm-accent);
stroke-opacity: 0.55;
stroke-width: 4.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 0 13;
visibility: hidden;
}
.fnd-nm-sch--and[data-nm-a="1"][data-nm-b="1"] .fnd-nm-sch__route--ab,
.fnd-nm-sch--or[data-nm-a="1"] .fnd-nm-sch__route--a,
.fnd-nm-sch--or[data-nm-b="1"] .fnd-nm-sch__route--b,
.fnd-nm-sch--xor[data-nm-a="0"][data-nm-b="1"] .fnd-nm-sch__route--top,
.fnd-nm-sch--xor[data-nm-a="1"][data-nm-b="0"] .fnd-nm-sch__route--bottom {
visibility: visible;
}
.fnd-nm-sch.is-flowing .fnd-nm-sch__route {
animation: fnd-nm-flow 0.45s linear 10;
}
@keyframes fnd-nm-flow {
to {
stroke-dashoffset: -13;
}
}
.fnd-nm-sch__spark path {
fill: var(--nm-lamp);
stroke: #8a6a00;
stroke-width: 1;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.fnd-nm-sch__spark.is-on path {
animation: fnd-nm-spark 0.4s ease-out 1;
}
@keyframes fnd-nm-spark {
0% {
opacity: 1;
transform: scale(0.3);
}
35% {
opacity: 1;
transform: scale(1.25);
}
100% {
opacity: 0;
transform: scale(0.9);
}
}
.fnd-nm-sch__hit {
fill: transparent;
stroke: none;
}
.fnd-nm-toy[data-nm-live] .fnd-nm-sch__hit {
cursor: pointer;
}
.fnd-nm-toy:not([data-nm-live]) .fnd-nm-sch__hit {
pointer-events: none;
}
.fnd-nm-toy[data-nm-live] :is(.fnd-nm-circuit, .fnd-nm-adder):has([data-nm-in="a"]:hover, [data-nm-in="a"]:focus-visible, [data-nm-lever="a"]:hover) .fnd-nm-sch__lever--a,
.fnd-nm-toy[data-nm-live] :is(.fnd-nm-circuit, .fnd-nm-adder):has([data-nm-in="b"]:hover, [data-nm-in="b"]:focus-visible, [data-nm-lever="b"]:hover) .fnd-nm-sch__lever--b {
stroke: var(--nm-accent);
}
.fnd-nm-toy[data-nm-live] :is(.fnd-nm-circuit, .fnd-nm-adder):has([data-nm-lever="a"]:hover) [data-nm-in="a"],
.fnd-nm-toy[data-nm-live] :is(.fnd-nm-circuit, .fnd-nm-adder):has([data-nm-lever="b"]:hover) [data-nm-in="b"] {
border-color: var(--nm-accent);
}
:is(.fnd-nm-circuit, .fnd-nm-adder):has([data-nm-in="a"].is-hint) [data-nm-lever="a"],
:is(.fnd-nm-circuit, .fnd-nm-adder):has([data-nm-in="b"].is-hint) [data-nm-lever="b"] {
stroke: var(--nm-accent);
stroke-width: 2.5;
stroke-dasharray: 6 5;
}
.fnd-nm-adder__inputs {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
margin: 1rem 0;
}
.fnd-nm-adder__parts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 1.25rem;
max-width: 36rem;
margin: 0 0 1rem;
}
.fnd-nm-adder .fnd-nm-sch__caption {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
margin-top: 0.4rem;
}
.fnd-nm-adder__term {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.4rem;
}
.fnd-nm-adder__term .fnd-nm-op {
padding: 0.15rem 0.6rem;
}
.fnd-nm-adder__result {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.fnd-nm-adder .fnd-nm-lamp__bulb {
display: none;
}
.fnd-nm-adder .fnd-nm-lamp {
min-height: 0;
}
@container (max-width: 28rem) {
.fnd-nm-adder__parts {
grid-template-columns: minmax(0, 1fr);
max-width: 19rem;
margin-inline: auto;
}
}
.fnd-nm-adder__bit {
min-width: 1.8em;
padding: 0.1rem 0.4rem;
border: 2px solid var(--nm-line);
border-radius: 6px;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
}
.fnd-nm-adder__arrow {
font-weight: 700;
}
.fnd-nm-adder__line {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
font-size: 1.15em;
}
.fnd-nm-cpu__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
@media (min-width: 46rem) {
.fnd-nm-cpu__grid {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
align-items: start;
}
}
.fnd-nm-cpu__program {
margin: 0;
}
.fnd-nm-cpu__caption {
font-weight: 700;
}
.fnd-nm-cpu__lines {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 0.45rem 0.75rem;
margin: 0.5rem 0 0;
padding: 0;
list-style: none;
}
.fnd-nm-cpu__line,
.fnd-nm-cpu__heads {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
row-gap: 0.25rem;
align-items: baseline;
padding: 0.4rem 0.6rem;
border-left: 4px solid transparent;
}
.fnd-nm-cpu__heads {
padding-block: 0 0.1rem;
font-size: var(--nm-small);
font-weight: 600;
}
.fnd-nm-cpu__head--op,
.fnd-nm-cpu__op {
grid-column: 2;
}
.fnd-nm-cpu__head--mem,
.fnd-nm-cpu__bytes {
grid-column: 3;
}
.fnd-nm-cpu__head,
.fnd-nm-cpu__op,
.fnd-nm-compiler__out code[title] {
text-decoration: underline dotted;
text-underline-offset: 0.2em;
}
.fnd-nm-cpu__head,
.fnd-nm-cpu__op,
.fnd-nm-cpu__bytes,
.fnd-nm-compiler__out code[title] {
cursor: help;
}
.fnd-nm-cpu__op,
.fnd-nm-cpu__bytes {
font-size: var(--nm-small);
white-space: nowrap;
}
.fnd-nm-cpu__line,
.fnd-nm-compiler__slip {
border: 1px solid color-mix(in srgb, var(--nm-ink) 16%, transparent);
border-left-width: 4px;
border-radius: 3px;
background: var(--nm-paper);
color: var(--nm-ink);
box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 3px 8px rgb(0 0 0 / 0.06);
transform: rotate(-0.4deg);
}
.fnd-nm-cpu__line:nth-child(odd),
.fnd-nm-compiler__slip:nth-child(odd) {
transform: rotate(0.35deg);
}
.fnd-nm-cpu__line.is-current {
border-left-color: var(--nm-accent);
box-shadow: 0 2px 4px rgb(0 0 0 / 0.14), 0 8px 18px rgb(0 0 0 / 0.12);
transform: translateY(-2px);
}
.fnd-nm-cpu__line.is-done {
opacity: 0.8;
}
.fnd-nm-cpu__line.is-done .fnd-nm-cpu__say::before {
content: "✓ " / "";
}
.fnd-nm-cpu__bytes {
display: inline-flex;
gap: 0.25rem;
}
.fnd-nm-cpu__byte {
padding: 0 0.3rem;
border: 1px solid var(--nm-line);
border-radius: 4px;
background: var(--nm-surface);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.fnd-nm-cpu__say {
min-width: 0;
}
@container (max-width: 30rem) {
.fnd-nm-cpu__lines {
grid-template-columns: auto auto minmax(0, 1fr);
}
.fnd-nm-cpu__say {
grid-column: 1 / -1;
}
.fnd-nm-cpu__head--op,
.fnd-nm-cpu__op {
grid-column: 1;
}
.fnd-nm-cpu__head--mem,
.fnd-nm-cpu__bytes {
grid-column: 2;
}
}
.fnd-nm-cpu__regs {
display: grid;
gap: 0.5rem;
margin: 0;
}
.fnd-nm-cpu__reg {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0.75rem;
border: 2px solid var(--nm-line);
border-radius: 8px;
}
.fnd-nm-cpu__reg dt {
font-weight: 600;
}
.fnd-nm-cpu__reg dd {
margin: 0;
font-size: 1.2em;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.fnd-nm-os__asks {
margin: 0;
padding: 0;
list-style: none;
}
.fnd-nm-ask {
margin: 0 0 1rem;
padding: 0 0 1rem;
border-bottom: 1px solid var(--nm-line);
}
.fnd-nm-ask__question {
font-weight: 600;
}
.fnd-nm-ask__choices {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
}
.fnd-nm-os .fnd-nm-toy__status:empty {
min-height: 0;
margin: 0;
}
.fnd-nm-os__rack-title {
margin-bottom: 0.25rem;
font-weight: 700;
}
.fnd-nm-os__keys {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
column-gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.fnd-nm-os__keys li {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: baseline;
padding: 0.35rem 0;
}
.fnd-nm-os__key {
font-weight: 600;
}
.fnd-nm-os__key::before {
content: "🔑 " / "";
}
.fnd-nm-os__keys li.is-out .fnd-nm-os__holder {
font-weight: 700;
}
.fnd-nm-compiler__source code,
.fnd-nm-compiler__out code,
.fnd-nm-cpu__op,
.fnd-nm-web__source code {
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: inherit;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-weight: 700;
}
.fnd-nm-compiler__source {
margin: 0;
overflow: hidden;
border: 1px solid var(--nm-line);
border-radius: 8px;
background: #ffffff;
color: var(--nm-ink);
}
.fnd-nm-compiler__caption {
padding: 0.3rem 0.85rem;
border-bottom: 1px solid var(--nm-line);
background: color-mix(in srgb, var(--nm-ink) 7%, #ffffff);
font-size: var(--nm-small);
font-weight: 700;
}
.fnd-nm-compiler__code {
margin: 0;
padding: 0.75rem 0.85rem;
font-size: 1.2em;
}
.fnd-nm-compiler__steppers {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.5rem;
margin: 0;
padding: 0.6rem 0.85rem 0.75rem;
border-top: 1px dashed var(--nm-line);
}
.fnd-nm-stepper {
display: flex;
align-items: center;
gap: 0.5rem;
}
.fnd-nm-stepper__label {
font-weight: 600;
}
.fnd-nm-stepper__button {
padding: 0.2rem 0.6rem;
font-size: 1.2em;
}
.fnd-nm-stepper__value {
min-width: 2ch;
text-align: center;
font-size: 1.2em;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.fnd-nm-compiler__into {
margin: 0.85rem 0 0.6rem;
font-weight: 600;
}
.fnd-nm-compiler__arrow {
margin-right: 0.2rem;
color: var(--nm-accent);
font-size: 1.3em;
line-height: 1;
}
.fnd-nm-compiler__out {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 0.5rem 1rem;
max-width: 34rem;
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
.fnd-nm-compiler__slip {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
row-gap: 0.15rem;
align-items: baseline;
padding: 0.45rem 0.75rem;
}
.fnd-nm-compiler__out code {
white-space: nowrap;
}
.fnd-nm-compiler__say {
min-width: 0;
color: var(--nm-ink-soft);
font-size: var(--nm-small);
}
@container (max-width: 26rem) {
.fnd-nm-compiler__out {
grid-template-columns: minmax(0, 1fr);
}
}
.fnd-nm-compiler__n {
padding: 0 0.15em;
border-radius: 0.2em;
background: var(--nm-mark);
color: var(--nm-ink);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.fnd-nm-compiler__n--a {
--nm-mark: color-mix(in srgb, var(--nm-accent) 22%, transparent);
}
.fnd-nm-compiler__n--b {
--nm-mark: color-mix(in srgb, var(--nm-copper) 28%, transparent);
}
.fnd-nm-compiler__result {
font-size: 1.15em;
font-weight: 700;
}
.fnd-nm-net__letter {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.75rem 1rem;
}
.fnd-nm-net__body {
flex-basis: 100%;
margin: 0;
font-style: italic;
}
.fnd-nm-net__map {
position: relative;
margin: 1.25rem 0 0.5rem;
}
.fnd-nm-net__lines {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: none;
stroke: var(--nm-line);
stroke-width: 2;
stroke-dasharray: 5 4;
}
.fnd-nm-net__lines--tall {
display: none;
}
.fnd-nm-net__route {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto;
gap: 0.75rem 2.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.fnd-nm-net__stop {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
min-width: 0;
padding: 0.45rem 0.5rem;
border: 2px solid var(--nm-line);
border-radius: 8px;
background: Canvas;
font-size: var(--nm-small);
text-align: center;
hyphens: auto;
overflow-wrap: break-word;
transition: border-color 0.2s ease;
}
.fnd-nm-net__stop:has([data-nm-packet]) {
border-color: var(--nm-accent);
}
.fnd-nm-net__stop--mine {
grid-column: 1;
grid-row: 1 / span 2;
align-self: center;
}
.fnd-nm-net__stop--a {
grid-column: 2;
grid-row: 1;
}
.fnd-nm-net__stop--b {
grid-column: 2;
grid-row: 2;
}
.fnd-nm-net__stop--inbox {
grid-column: 3;
grid-row: 1 / span 2;
align-self: center;
}
.fnd-nm-net__tray {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem;
min-height: 1.9rem;
}
.fnd-nm-net__packet {
display: inline-grid;
place-items: center;
min-width: 1.9rem;
height: 1.9rem;
padding: 0 0.2rem;
border: 2px solid var(--nm-accent);
border-radius: 4px;
background: color-mix(in srgb, var(--nm-accent) 12%, Canvas);
font-weight: 700;
font-variant-numeric: tabular-nums;
animation: fnd-nm-hop 0.25s ease-out;
}
@keyframes fnd-nm-hop {
from {
opacity: 0.3;
transform: scale(0.6);
}
}
@container (max-width: 30rem) {
.fnd-nm-net__lines--wide {
display: none;
}
.fnd-nm-net__lines--tall {
display: block;
}
.fnd-nm-net__route {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto auto auto;
gap: 1.75rem 1.5rem;
}
.fnd-nm-net__stop--mine,
.fnd-nm-net__stop--inbox {
grid-column: 1 / -1;
justify-self: center;
min-width: 55%;
}
.fnd-nm-net__stop--mine {
grid-row: 1;
}
.fnd-nm-net__stop--a {
grid-column: 1;
grid-row: 2;
}
.fnd-nm-net__stop--b {
grid-column: 2;
grid-row: 2;
}
.fnd-nm-net__stop--inbox {
grid-row: 3;
}
}
.fnd-nm-net__inbox {
padding: 0.75rem 1rem;
border: 2px solid var(--nm-line);
border-radius: 8px;
}
.fnd-nm-net__inbox p {
margin: 0.25rem 0;
}
.fnd-nm-net__inbox-title {
font-weight: 700;
}
.fnd-nm-net__from strong {
overflow-wrap: anywhere;
}
.fnd-nm-web__browser {
margin: 0;
border: 2px solid var(--nm-line);
border-radius: 10px;
overflow: hidden;
}
.fnd-nm-web__badge {
padding: 0.35rem 0.75rem;
background: var(--nm-surface-strong);
font-size: var(--nm-small);
font-weight: 600;
}
.fnd-nm-web__bar {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0.45rem 0.75rem;
border-bottom: 2px solid var(--nm-line);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: var(--nm-small);
overflow-wrap: anywhere;
}
.fnd-nm-web__lock::before {
content: "🔒" / "";
}
.fnd-nm-web__page {
padding: 1rem;
}
.fnd-nm-web__alarm {
padding: 1rem 1.25rem;
border-radius: 8px;
background: var(--nm-alarm);
color: var(--nm-alarm-ink);
text-align: center;
}
.fnd-nm-web__alarm p {
margin: 0.25rem 0;
overflow-wrap: anywhere;
}
.fnd-nm-web__alarm-head {
font-size: 1.5em;
font-weight: 800;
letter-spacing: 0.05em;
}
.fnd-nm-web__alarm-text {
font-size: 1.15em;
font-weight: 700;
}
.fnd-nm-web__source {
margin: 0;
padding: 1rem;
background: var(--nm-surface-strong);
font-size: var(--nm-small);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.fnd-nm-ai .fnd-nm-toy__note {
margin-top: 1.25rem;
}
.fnd-nm-ai__sentence {
min-height: 2.5em;
margin: 0 0 0.75rem;
padding: 0.5rem 1rem;
border: 1px solid var(--nm-line);
border-radius: 1.4rem;
background: Canvas;
font-size: 1.35em;
font-weight: 600;
}
.fnd-nm-ai__keyboard {
margin: 0 0 1rem;
padding: 0.5rem 0.5rem 0.4rem;
border-radius: 14px;
background: color-mix(in srgb, currentColor 10%, transparent);
}
.fnd-nm-ai__keys {
display: block;
width: 100%;
max-width: 24rem;
height: auto;
margin: 0.5rem auto 0;
fill: Canvas;
opacity: 0.85;
mask-image: linear-gradient(#000 45%, transparent);
pointer-events: none;
}
.fnd-nm-ai__cursor::after {
content: "▍";
margin-left: 0.1em;
color: var(--nm-accent);
}
.fnd-nm-ai__label {
margin: 0 0 0.25rem 0.25rem;
font-size: var(--nm-small);
font-weight: 700;
}
.fnd-nm-ai__choices {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.fnd-nm-ai__choice {
flex: 1 1 0;
min-width: 0;
}
.fnd-nm-ai__choice + .fnd-nm-ai__choice {
border-left: 1px solid var(--nm-line);
}
.fnd-nm-ai__choice:not(:has(button)),
.fnd-nm-ai__pick {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.1rem;
padding: 0.45rem 0.4rem 0.65rem;
text-align: center;
}
.fnd-nm-ai__pick {
position: relative;
width: 100%;
height: 100%;
min-height: 44px;
border: 0;
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
overflow: hidden;
}
.fnd-nm-ai__pick:hover {
background: color-mix(in srgb, currentColor 8%, transparent);
}
.fnd-nm-ai__bar {
position: absolute;
bottom: 0.2rem;
left: 50%;
width: var(--nm-p, 0%);
height: 4px;
border-radius: 2px;
background: var(--nm-accent);
opacity: 0.6;
transform: translateX(-50%);
}
.fnd-nm-ai__word,
.fnd-nm-ai__percent {
position: relative;
}
.fnd-nm-ai__word {
font-weight: 600;
overflow-wrap: anywhere;
}
.fnd-nm-ai__percent {
font-size: var(--nm-small);
font-variant-numeric: tabular-nums;
}
.fnd-nm-ai__other {
flex-basis: 100%;
padding: 0.35rem 0.5rem 0;
font-size: var(--nm-small);
text-align: center;
}
.fnd-nm-take {
margin: 1.5rem 0 0;
padding: 1rem 1.25rem;
border-left: 6px solid var(--nm-accent);
background: var(--nm-surface);
}
.fnd-nm-take__title {
margin: 0 0 0.4rem;
}
.fnd-nm-take__text {
margin: 0;
}
.fnd-nm-take__links {
margin: 0.75rem 0 0;
padding-left: 1.25rem;
}
.fnd-nm-take__links li {
margin: 0;
padding: 0.3rem 0;
}
@media (prefers-reduced-motion: reduce) {
.fnd-nm *,
.fnd-nm *::after,
.fnd-nm-floor *,
.fnd-nm-floor *::after {
transition: none !important;
animation: none !important;
}
}
@media print {
.fnd-nm-live-only,
.fnd-nm-floor__nav,
.fnd-nm-plan__here {
display: none !important;
}
.fnd-nm[data-nm-live] .fnd-nm-floor,
.fnd-nm[data-nm-live] .fnd-nm-end,
.fnd-nm-toy [data-nm-stage][hidden] {
display: block !important;
}
.fnd-nm-tree * {
animation: none !important;
}
.fnd-nm-plan__building {
padding: 0;
overflow: visible;
border-radius: 0;
background: none;
}
.fnd-nm-plan__house {
padding-inline: 0;
border-inline-width: 0;
background: none;
}
.fnd-nm-plan__floor--bits {
margin-inline: 0;
}
.fnd-nm-plan__link,
.fnd-nm-plan__house .fnd-nm-plan__floor--bits .fnd-nm-plan__link {
--nm-at: 0px;
border-inline-width: 0;
background: none;
}
.fnd-nm-plan__roof,
.fnd-nm-plan__floor--bits::before,
.fnd-nm-plan__floor::after,
.fnd-nm-plan__tree {
display: none;
}
.fnd-nm-plan__link {
grid-template-columns: 1.5rem minmax(0, 6.5rem) minmax(0, 1fr) auto;
}
.fnd-nm-plan__year {
position: static;
translate: none;
}
}