/* nila-slides.css — slides ported from nila2.html, scoped under `.slide.nila`.
Generated; navigation/chrome rules from the source deck were dropped. */
/* Guards against bare-element rules bleeding in from styles.css (the GLITCH deck). */
.slide.nila .eyebrow { margin: 0; }
.slide.nila h1, .slide.nila h2, .slide.nila h3, .slide.nila h4,
.slide.nila p, .slide.nila ul, .slide.nila ol { margin: 0; }
.slide.nila h2 { max-width: 18ch; text-wrap: initial; }
.slide.nila {
--ink: #f4fbff;
--muted: #a9c2d2;
--space: #061322;
--space-2: #0a2032;
--panel: rgba(9, 31, 48, 0.82);
--panel-2: rgba(13, 42, 63, 0.92);
--line: rgba(168, 226, 255, 0.22);
--cyan: #58e6ff;
--blue: #4b8cff;
--green: #59f18b;
--red: #ff5c70;
--amber: #ffd166;
--violet: #b58cff;
--shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
--radius: 24px;
--slide-pad: clamp(24px, 4.5vw, 72px);
--title: clamp(38px, 5.7vw, 88px);
--h2: clamp(28px, 4vw, 58px);
--body: clamp(18px, 2.1vw, 32px);
}
.slide.nila, .slide.nila *, .slide.nila *::before, .slide.nila *::after {
box-sizing: border-box;
}
.slide.nila button,
.slide.nila input {
font: inherit;
}
.slide.nila button {
color: inherit;
}
.slide.nila .sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
#svg-sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.slide.nila .deck {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.slide.nila {
display: grid;
grid-template-rows: auto 1fr auto;
gap: clamp(12px, 2vh, 24px);
padding-block-start: calc(4.6rem + clamp(0.75rem, 2vh, 1.5rem));
padding-block-end: calc(4.7rem + clamp(0.65rem, 1.5vh, 1.25rem));
padding-inline: var(--slide-pad);
overflow: hidden;
}
.slide.nila::before {
content: "";
position: absolute;
inset: -10%;
pointer-events: none;
background: radial-gradient(
circle at var(--glow-x, 75%) var(--glow-y, 30%),
var(--glow, rgba(88, 230, 255, 0.12)),
transparent 36%
);
z-index: -1;
}
.slide.nila.active {
opacity: 1;
transform: none;
pointer-events: auto;
}
.slide.nila.past {
transform: translate3d(-5%, 0, 0) scale(0.985);
}
.slide.nila .slide-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
min-height: 50px;
position: relative;
z-index: 10;
isolation: isolate;
}
.slide.nila .eyebrow {
display: flex;
align-items: center;
gap: 10px;
color: var(--cyan);
font-size: clamp(12px, 1.25vw, 19px);
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.slide.nila .eyebrow::before {
content: "";
width: 28px;
height: 3px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 16px currentColor;
}
.slide.nila .mission-time {
color: var(--muted);
font-size: clamp(12px, 1.1vw, 17px);
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.slide.nila h1,
.slide.nila h2,
.slide.nila h3,
.slide.nila p {
margin: 0;
}
.slide.nila h1 {
font-size: var(--title);
line-height: 0.94;
letter-spacing: -0.055em;
max-width: 14ch;
}
.slide.nila h2 {
font-size: var(--h2);
line-height: 1;
letter-spacing: -0.04em;
max-width: 18ch;
}
.slide.nila h3 {
font-size: clamp(20px, 2.3vw, 36px);
line-height: 1.05;
}
.slide.nila .lede {
font-size: var(--body);
line-height: 1.35;
color: var(--muted);
max-width: 46ch;
}
.slide.nila .micro {
font-size: clamp(12px, 1.05vw, 17px);
line-height: 1.35;
color: var(--muted);
}
.slide.nila .center {
text-align: center;
margin-inline: auto;
}
.slide.nila .slide-body {
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.slide.nila .slide-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
min-height: 34px;
color: var(--muted);
font-size: clamp(11px, 1vw, 15px);
}
.slide.nila .slide-source-link {
color: var(--cyan);
text-underline-offset: 0.18em;
}
.slide.nila .prompt {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 15px;
border: 1px solid rgba(88, 230, 255, 0.28);
border-radius: 999px;
background: rgba(7, 25, 39, 0.62);
color: #dffaff;
font-weight: 700;
}
.slide.nila .prompt::before {
content: "?";
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--cyan);
color: #042131;
font-weight: 900;
}
.slide.nila .fiction {
opacity: 0.7;
}
.slide.nila .hero-grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
align-items: center;
gap: clamp(26px, 5vw, 90px);
}
.slide.nila .hero-copy {
display: flex;
flex-direction: column;
gap: clamp(18px, 3vh, 32px);
}
.slide.nila .hero-art {
width: 100%;
height: min(68vh, 680px);
filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.42));
}
.slide.nila .title-lockup strong {
display: block;
color: var(--cyan);
text-shadow: 0 0 34px rgba(88, 230, 255, 0.4);
}
.slide.nila .tagline {
font-size: clamp(18px, 2vw, 30px);
font-weight: 650;
color: #d8edf6;
max-width: 34ch;
}
.slide.nila .mission-stamp {
display: inline-flex;
align-items: center;
gap: 12px;
width: max-content;
padding: 11px 16px;
border: 1px solid rgba(89, 241, 139, 0.4);
border-radius: 14px;
background: rgba(89, 241, 139, 0.08);
color: var(--green);
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
transform: rotate(-1deg);
}
.slide.nila .mission-stamp::before {
content: "●";
font-size: 0.7em;
filter: drop-shadow(0 0 8px var(--green));
}
.slide.nila .transmission-stage {
width: min(1050px, 92vw);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(24px, 4vh, 54px);
}
.slide.nila .signal-label {
font-size: clamp(13px, 1.4vw, 22px);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.slide.nila .pulse-row {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 2.8vw, 42px);
min-height: 130px;
}
.slide.nila .pulse {
width: clamp(62px, 8vw, 118px);
aspect-ratio: 1;
border-radius: 50%;
position: relative;
box-shadow:
inset 0 0 20px rgba(255, 255, 255, 0.25),
0 0 28px currentColor,
0 0 75px color-mix(in srgb, currentColor 65%, transparent);
animation: pulseIn 0.65s both;
animation-delay: calc(var(--i) * 0.24s);
}
.slide.nila .pulse::after {
content: "";
position: absolute;
inset: 18%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.28);
filter: blur(4px);
}
.slide.nila .pulse.green {
background: var(--green);
color: var(--green);
}
.slide.nila .pulse.red {
background: var(--red);
color: var(--red);
}
.slide.nila .pulse.small {
width: clamp(38px, 4.3vw, 68px);
}
@keyframes pulseIn {
from {
opacity: 0;
transform: scale(0.2);
}
70% {
transform: scale(1.14);
}
to {
opacity: 1;
transform: scale(1);
}
}
.slide.nila .binary-caption {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: clamp(32px, 4vw, 68px);
font-weight: 900;
letter-spacing: 0.26em;
color: #ddf8ff;
text-shadow: 0 0 28px rgba(88, 230, 255, 0.26);
}
.slide.nila .mystery-question {
font-size: clamp(32px, 4.5vw, 72px);
font-weight: 850;
text-align: center;
letter-spacing: -0.04em;
}
.slide.nila .scene {
width: 100%;
height: 100%;
max-height: 720px;
}
.slide.nila .scene text {
font-family: Inter, ui-sans-serif, sans-serif;
}
.slide.nila .orbit {
fill: none;
stroke: rgba(88, 230, 255, 0.35);
stroke-width: 2;
stroke-dasharray: 8 10;
}
.slide.nila .beam {
stroke: var(--cyan);
stroke-width: 5;
stroke-linecap: round;
filter: url(#glow-filter);
stroke-dasharray: 16 14;
animation: dash 1.8s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: -60;
}
}
.slide.nila .float {
animation: float 4s ease-in-out infinite;
}
.slide.nila .float2 {
animation: float 5.4s ease-in-out infinite reverse;
}
@keyframes float {
50% {
transform: translateY(-10px);
}
}
.slide.nila .metric-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 28px);
width: min(1100px, 95vw);
}
.slide.nila .metric {
min-height: 210px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(
145deg,
rgba(10, 35, 53, 0.92),
rgba(7, 22, 37, 0.78)
);
padding: clamp(20px, 2.4vw, 36px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
box-shadow: var(--shadow);
}
.slide.nila .metric svg {
width: clamp(80px, 8vw, 130px);
height: clamp(80px, 8vw, 130px);
}
.slide.nila .metric strong {
font-size: clamp(35px, 5vw, 76px);
line-height: 0.9;
color: var(--cyan);
}
.slide.nila .metric span {
font-size: clamp(15px, 1.5vw, 23px);
color: var(--muted);
font-weight: 700;
}
.slide.nila .danger-card {
border-color: rgba(255, 92, 112, 0.45);
box-shadow: 0 20px 70px rgba(255, 92, 112, 0.08);
}
.slide.nila .danger-card strong {
color: var(--red);
}
.slide.nila .battery {
width: 100%;
height: 24px;
border: 2px solid rgba(255, 255, 255, 0.55);
border-radius: 8px;
padding: 3px;
position: relative;
margin-top: 8px;
}
.slide.nila .battery::after {
content: "";
position: absolute;
right: -8px;
top: 6px;
width: 6px;
height: 9px;
border-radius: 0 3px 3px 0;
background: rgba(255, 255, 255, 0.55);
}
.slide.nila .battery-fill {
height: 100%;
width: 100%;
border-radius: 4px;
background: linear-gradient(90deg, var(--green), var(--cyan));
transition: width 0.4s ease;
}
.slide.nila .split {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(22px, 4vw, 70px);
align-items: center;
}
.slide.nila .big-light {
width: min(38vw, 420px);
aspect-ratio: 1;
border-radius: 50%;
margin: auto;
background: var(--green);
box-shadow:
inset 0 0 45px rgba(255, 255, 255, 0.3),
0 0 50px var(--green),
0 0 140px rgba(89, 241, 139, 0.34);
cursor: pointer;
transition: 0.25s;
}
.slide.nila .big-light.red {
background: var(--red);
box-shadow:
inset 0 0 45px rgba(255, 255, 255, 0.3),
0 0 50px var(--red),
0 0 140px rgba(255, 92, 112, 0.32);
}
.slide.nila .big-light:active {
transform: scale(0.96);
}
.slide.nila .answer-stack {
display: flex;
flex-direction: column;
gap: clamp(18px, 3vh, 34px);
}
.slide.nila .answer-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: clamp(18px, 2vw, 28px);
border: 1px solid var(--line);
border-radius: 20px;
background: var(--panel);
font-size: clamp(23px, 2.8vw, 44px);
font-weight: 850;
}
.slide.nila .answer-pill .dot {
width: 34px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 18px var(--green);
}
.slide.nila .answer-pill.no .dot {
background: var(--red);
box-shadow: 0 0 18px var(--red);
}
.slide.nila .card-game-layout {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: clamp(22px, 4vw, 60px);
align-items: center;
}
.slide.nila .human-cards {
display: flex;
justify-content: center;
gap: clamp(8px, 1.2vw, 18px);
perspective: 1200px;
}
.slide.nila .human-card {
width: clamp(78px, 9vw, 145px);
aspect-ratio: 0.68;
border-radius: 18px;
border: 4px solid rgba(255, 255, 255, 0.18);
display: grid;
place-items: center;
position: relative;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
transform: rotate(var(--r));
background: linear-gradient(150deg, #fe7181, #bb3047);
font-size: clamp(36px, 5vw, 78px);
font-weight: 950;
cursor: pointer;
user-select: none;
transition: 0.25s;
}
.slide.nila .human-card:nth-child(even) {
background: linear-gradient(150deg, #69f49a, #1fa65b);
}
.slide.nila .human-card::before {
content: attr(data-place);
position: absolute;
top: 8px;
left: 10px;
font-size: clamp(11px, 1vw, 16px);
font-weight: 900;
color: rgba(255, 255, 255, 0.75);
}
.slide.nila .human-card:hover {
transform: rotate(var(--r)) translateY(-10px);
}
.slide.nila .human-card.flipped {
background: linear-gradient(150deg, #69f49a, #1fa65b);
}
.slide.nila .human-card.flipped:nth-child(even) {
background: linear-gradient(150deg, #fe7181, #bb3047);
}
.slide.nila .game-rules {
display: flex;
flex-direction: column;
gap: 18px;
}
.slide.nila .game-rules .rule {
display: grid;
grid-template-columns: 54px 1fr;
gap: 15px;
align-items: center;
font-size: clamp(19px, 2vw, 31px);
font-weight: 720;
color: #dff5ff;
}
.slide.nila .rule-num {
width: 50px;
height: 50px;
border-radius: 15px;
display: grid;
place-items: center;
background: rgba(88, 230, 255, 0.14);
border: 1px solid rgba(88, 230, 255, 0.32);
color: var(--cyan);
font-weight: 950;
}
.slide.nila .message-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(8px, 1vw, 15px);
}
.slide.nila .message-card {
position: relative;
min-height: clamp(92px, 11vh, 135px);
padding: clamp(10px, 1.3vw, 17px);
border-radius: 17px;
background: linear-gradient(
145deg,
rgba(13, 42, 63, 0.94),
rgba(7, 24, 39, 0.94)
);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 7px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
transition: 0.2s;
}
.slide.nila .message-card::after {
content: "";
position: absolute;
right: -20px;
bottom: -28px;
width: 82px;
height: 82px;
border-radius: 50%;
background: var(--card-color, rgba(88, 230, 255, 0.13));
filter: blur(2px);
}
.slide.nila .message-card:hover {
transform: translateY(-4px);
border-color: rgba(88, 230, 255, 0.5);
}
.slide.nila .message-icon {
font-size: clamp(22px, 2.5vw, 38px);
z-index: 1;
}
.slide.nila .message-label {
font-size: clamp(10px, 1vw, 15px);
line-height: 1.1;
font-weight: 760;
color: #e9f8ff;
z-index: 1;
}
.slide.nila .message-code {
font:
800 clamp(11px, 1.1vw, 16px)/1 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
color: var(--cyan);
letter-spacing: 0.13em;
z-index: 1;
}
.slide.nila .message-card.hot {
border-color: rgba(255, 209, 102, 0.58);
box-shadow: 0 0 34px rgba(255, 209, 102, 0.08);
}
.slide.nila .interactive-panel {
width: min(1180px, 96vw);
display: grid;
grid-template-columns: minmax(300px, 0.72fr) minmax(440px, 1.28fr);
gap: clamp(18px, 3vw, 44px);
align-items: stretch;
}
.slide.nila .drawn-message,
.slide.nila .console {
border: 1px solid var(--line);
background: linear-gradient(
145deg,
rgba(12, 39, 59, 0.94),
rgba(7, 22, 36, 0.9)
);
border-radius: var(--radius);
padding: clamp(20px, 2.4vw, 36px);
box-shadow: var(--shadow);
}
.slide.nila .drawn-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
text-align: center;
min-height: 360px;
}
.slide.nila .drawn-icon {
font-size: clamp(74px, 10vw, 150px);
filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32));
}
.slide.nila .drawn-message h3 {
max-width: 12ch;
}
.slide.nila .console {
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
}
.slide.nila .bit-buttons {
display: flex;
justify-content: center;
gap: clamp(9px, 1.6vw, 22px);
}
.slide.nila .bit-button {
width: clamp(58px, 7vw, 104px);
aspect-ratio: 1;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.16);
background: var(--red);
box-shadow:
inset 0 0 18px rgba(255, 255, 255, 0.22),
0 0 22px rgba(255, 92, 112, 0.38);
cursor: pointer;
font-size: clamp(22px, 2.6vw, 40px);
font-weight: 950;
color: #fff;
transition: 0.18s;
}
.slide.nila .bit-button.one {
background: var(--green);
box-shadow:
inset 0 0 18px rgba(255, 255, 255, 0.22),
0 0 22px rgba(89, 241, 139, 0.42);
color: #042b19;
}
.slide.nila .bit-button:hover {
transform: translateY(-4px);
}
.slide.nila .bit-button.corrupted {
outline: 4px solid var(--amber);
outline-offset: 4px;
animation: shake 0.35s;
}
@keyframes shake {
25% {
transform: translateX(-6px);
}
50% {
transform: translateX(6px);
}
75% {
transform: translateX(-3px);
}
}
.slide.nila .button-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.slide.nila .action {
border: 1px solid rgba(88, 230, 255, 0.3);
background: rgba(88, 230, 255, 0.1);
padding: 12px 17px;
border-radius: 12px;
cursor: pointer;
font-weight: 850;
transition: 0.18s;
}
.slide.nila .action:hover {
background: rgba(88, 230, 255, 0.18);
transform: translateY(-2px);
}
.slide.nila .action.primary {
background: var(--cyan);
color: #052333;
border-color: transparent;
}
.slide.nila .action.warn {
background: rgba(255, 92, 112, 0.12);
border-color: rgba(255, 92, 112, 0.36);
}
.slide.nila .action.ghost {
background: transparent;
}
.slide.nila .status-box {
min-height: 64px;
border-radius: 14px;
display: grid;
place-items: center;
text-align: center;
padding: 12px;
background: rgba(4, 17, 28, 0.5);
color: var(--muted);
font-size: clamp(15px, 1.5vw, 23px);
font-weight: 760;
}
.slide.nila .status-box.good {
color: var(--green);
border: 1px solid rgba(89, 241, 139, 0.28);
}
.slide.nila .status-box.bad {
color: var(--red);
border: 1px solid rgba(255, 92, 112, 0.28);
}
.slide.nila .status-box.amber {
color: var(--amber);
border: 1px solid rgba(255, 209, 102, 0.28);
}
.slide.nila .power-tree {
width: min(1180px, 96vw);
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(28px, 5vw, 80px);
align-items: center;
}
.slide.nila .doubling-visual {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
align-items: end;
min-height: 430px;
}
.slide.nila .doubling-column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 8px;
height: 100%;
}
.slide.nila .doubling-column .stack {
display: flex;
flex-direction: column-reverse;
gap: 4px;
width: 100%;
height: var(--h);
justify-content: flex-start;
}
.slide.nila .stack span {
display: block;
min-height: 5px;
flex: 1;
border-radius: 4px;
background: linear-gradient(90deg, var(--blue), var(--cyan));
opacity: 0.88;
box-shadow: 0 0 9px rgba(88, 230, 255, 0.15);
}
.slide.nila .doubling-column strong {
font-size: clamp(28px, 3vw, 48px);
color: #fff;
}
.slide.nila .doubling-column small {
color: var(--muted);
font-weight: 800;
}
.slide.nila .capacity-lab {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
padding: clamp(22px, 3vw, 42px);
display: flex;
flex-direction: column;
gap: 24px;
box-shadow: var(--shadow);
}
.slide.nila .capacity-result {
font-size: clamp(38px, 5.6vw, 86px);
font-weight: 950;
color: var(--cyan);
line-height: 0.9;
}
.slide.nila .capacity-result span {
font-size: 0.35em;
color: var(--muted);
font-weight: 750;
letter-spacing: 0.02em;
}
.slide.nila input[type="range"] {
width: 100%;
accent-color: var(--cyan);
}
.slide.nila .range-labels {
display: flex;
justify-content: space-between;
color: var(--muted);
font-size: 14px;
}
.slide.nila .capacity-verdict {
font-size: clamp(20px, 2.3vw, 36px);
font-weight: 850;
}
.slide.nila .alarm-layout {
width: 100%;
display: grid;
grid-template-columns: 1fr 0.92fr;
gap: clamp(24px, 5vw, 80px);
align-items: center;
}
.slide.nila .alarm-panel {
border: 1px solid rgba(255, 92, 112, 0.45);
border-radius: var(--radius);
padding: clamp(28px, 4vw, 60px);
background: radial-gradient(
circle at 50% 0,
rgba(255, 92, 112, 0.16),
rgba(45, 10, 21, 0.66)
);
box-shadow: 0 0 80px rgba(255, 92, 112, 0.12);
text-align: center;
animation: alarmGlow 1.25s ease-in-out infinite alternate;
}
@keyframes alarmGlow {
to {
box-shadow: 0 0 120px rgba(255, 92, 112, 0.24);
}
}
.slide.nila .alarm-icon {
font-size: clamp(90px, 13vw, 190px);
line-height: 1;
filter: drop-shadow(0 0 22px rgba(255, 92, 112, 0.45));
}
.slide.nila .alarm-panel h2 {
max-width: none;
color: var(--red);
font-size: clamp(38px, 5vw, 78px);
}
.slide.nila .code-lookup {
display: flex;
flex-direction: column;
gap: 14px;
}
.slide.nila .lookup-card {
display: grid;
grid-template-columns: 140px 1fr;
align-items: center;
gap: 18px;
padding: 20px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--panel);
font-size: clamp(18px, 2vw, 31px);
font-weight: 780;
}
.slide.nila .lookup-card code {
font-size: clamp(26px, 3vw, 48px);
color: var(--cyan);
letter-spacing: 0.13em;
}
.slide.nila .lookup-card.danger {
border-color: rgba(255, 92, 112, 0.42);
}
.slide.nila .flip-scene {
width: min(1200px, 96vw);
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: clamp(18px, 3vw, 38px);
align-items: center;
}
.slide.nila .signal-card {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(26px, 3vw, 44px);
background: var(--panel);
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
text-align: center;
box-shadow: var(--shadow);
}
.slide.nila .signal-card strong {
font-size: clamp(24px, 3vw, 44px);
}
.slide.nila .radiation-bolt {
font-size: clamp(80px, 10vw, 150px);
animation: zap 1.3s ease-in-out infinite;
filter: drop-shadow(0 0 22px rgba(255, 209, 102, 0.55));
}
@keyframes zap {
50% {
transform: scale(1.12) rotate(4deg);
}
}
.slide.nila .ambiguity {
color: var(--amber);
font-size: clamp(26px, 3.4vw, 52px);
font-weight: 900;
text-align: center;
}
.slide.nila .idea-arena {
width: min(1150px, 96vw);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 28px);
}
.slide.nila .idea-card {
min-height: 370px;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(22px, 2.5vw, 36px);
background: linear-gradient(
145deg,
rgba(13, 42, 63, 0.94),
rgba(7, 23, 37, 0.9)
);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
gap: 16px;
box-shadow: var(--shadow);
}
.slide.nila .idea-art {
font-size: clamp(80px, 10vw, 145px);
}
.slide.nila .idea-card h3 {
max-width: 12ch;
}
.slide.nila .cost-tag {
width: 100%;
padding: 12px 14px;
border-radius: 13px;
background: rgba(0, 0, 0, 0.23);
color: var(--muted);
font-weight: 820;
}
.slide.nila .cost-tag strong {
color: var(--amber);
}
.slide.nila .repeat-lab {
width: min(1120px, 95vw);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 60px);
align-items: center;
}
.slide.nila .repeat-visual {
display: flex;
flex-direction: column;
gap: 16px;
}
.slide.nila .repeat-row {
display: flex;
gap: 12px;
align-items: center;
padding: 15px 18px;
border-radius: 16px;
background: var(--panel);
border: 1px solid var(--line);
}
.slide.nila .repeat-row label {
width: 150px;
color: var(--muted);
font-weight: 800;
}
.slide.nila .mini-bit {
width: 36px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--red);
box-shadow: 0 0 12px rgba(255, 92, 112, 0.35);
}
.slide.nila .mini-bit.one {
background: var(--green);
box-shadow: 0 0 12px rgba(89, 241, 139, 0.35);
}
.slide.nila .mini-bit.wrong {
outline: 3px solid var(--amber);
outline-offset: 3px;
}
.slide.nila .battery-panel {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(25px, 3vw, 42px);
background: var(--panel);
display: flex;
flex-direction: column;
gap: 22px;
}
.slide.nila .repetition-step {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition:
opacity 720ms ease,
transform 720ms cubic-bezier(.2, .8, .2, 1),
visibility 0s linear 0s;
will-change: opacity, transform;
}
.slide.nila .repetition-step.step-hidden {
opacity: 0;
transform: translateY(18px);
visibility: hidden;
transition:
opacity 520ms ease,
transform 520ms ease,
visibility 0s linear 520ms;
}
@media (prefers-reduced-motion: reduce) {
.slide.nila .repetition-step,
.slide.nila .repetition-step.step-hidden {
transform: none;
transition-duration: 0.01ms;
}
}
.slide.nila .flash-count {
font-size: clamp(48px, 7vw, 100px);
font-weight: 950;
color: var(--red);
line-height: 0.9;
}
.slide.nila .parity-layout {
width: min(1170px, 96vw);
display: grid;
grid-template-columns: 1fr 0.8fr;
gap: clamp(28px, 5vw, 70px);
align-items: center;
}
.slide.nila .watchdog {
position: relative;
width: min(34vw, 410px);
aspect-ratio: 1;
margin: auto;
}
.slide.nila .watchdog svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 26px 38px rgba(0, 0, 0, 0.32));
}
.slide.nila .parity-console {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
padding: clamp(26px, 3vw, 44px);
display: flex;
flex-direction: column;
gap: 24px;
box-shadow: var(--shadow);
}
.slide.nila .parity-count {
font-size: clamp(25px, 3vw, 46px);
font-weight: 900;
}
.slide.nila .parity-verdict {
font-size: clamp(22px, 2.4vw, 38px);
font-weight: 900;
color: var(--green);
}
.slide.nila .parity-verdict.bad {
color: var(--red);
}
.slide.nila .distance-stage {
width: min(1160px, 96vw);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 70px);
align-items: center;
}
.slide.nila .islands {
height: min(60vh, 570px);
position: relative;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
radial-gradient(
circle at 30% 50%,
rgba(88, 230, 255, 0.08),
transparent 31%
),
radial-gradient(
circle at 74% 48%,
rgba(181, 140, 255, 0.08),
transparent 31%
),
rgba(5, 18, 30, 0.55);
overflow: hidden;
}
.slide.nila .island {
position: absolute;
width: 40%;
aspect-ratio: 1;
border-radius: 50%;
border: 2px dashed currentColor;
display: grid;
place-items: center;
color: var(--cyan);
background: rgba(88, 230, 255, 0.04);
}
.slide.nila .island.a {
left: 7%;
top: 19%;
}
.slide.nila .island.b {
right: 7%;
top: 19%;
color: var(--violet);
}
.slide.nila .code-center {
width: 36%;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
background: currentColor;
box-shadow: 0 0 38px currentColor;
}
.slide.nila .code-center code {
color: #071321;
font-weight: 950;
font-size: clamp(18px, 2.3vw, 35px);
}
.slide.nila .error-dot {
position: absolute;
width: 18px;
aspect-ratio: 1;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 15px currentColor;
}
.slide.nila .distance-console {
display: flex;
flex-direction: column;
gap: 22px;
}
.slide.nila .distance-code-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border-radius: 17px;
background: var(--panel);
border: 1px solid var(--line);
}
.slide.nila .distance-code-row code {
font-size: clamp(28px, 3vw, 48px);
letter-spacing: 0.12em;
color: var(--cyan);
}
.slide.nila .distance-number {
font-size: clamp(74px, 10vw, 150px);
font-weight: 950;
color: var(--amber);
line-height: 0.8;
}
.slide.nila .capacity-attempt-stage {
width: min(1200px, 96vw);
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
gap: clamp(24px, 3.5vw, 52px);
align-items: center;
}
.slide.nila .attempt-board {
height: min(57vh, 510px);
display: grid;
grid-template-rows: auto 1fr auto;
gap: 12px;
padding: 17px;
border: 1px solid rgba(88, 230, 255, 0.3);
border-radius: calc(var(--radius) + 3px);
background:
linear-gradient(rgba(88, 230, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(88, 230, 255, 0.035) 1px, transparent 1px),
radial-gradient(circle at 50% 45%, rgba(88, 230, 255, 0.09), transparent 70%),
rgba(4, 15, 27, 0.86);
background-size: 26px 26px, 26px 26px, auto, auto;
box-shadow: var(--shadow), inset 0 0 45px rgba(88, 230, 255, 0.035);
overflow: hidden;
}
.slide.nila .attempt-board-head,
.slide.nila .attempt-legend {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.slide.nila .attempt-board-head {
padding-bottom: 10px;
border-bottom: 1px solid rgba(88, 230, 255, 0.15);
color: var(--muted);
font: 850 clamp(11px, 1vw, 14px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.slide.nila .attempt-board-head strong {
color: var(--cyan);
font-size: 1.15em;
}
.slide.nila .attempt-groups {
min-height: 0;
display: grid;
grid-template-columns: repeat(var(--attempt-cols, 3), minmax(0, 1fr));
gap: 10px;
}
.slide.nila .attempt-group {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto 1fr;
gap: 5px;
padding: 8px 9px;
border: 1px solid hsl(var(--group-hue) 78% 68% / 0.42);
border-radius: 15px;
background: linear-gradient(145deg, hsl(var(--group-hue) 76% 58% / 0.12), rgba(5, 18, 30, 0.5));
box-shadow: inset 0 0 18px hsl(var(--group-hue) 76% 58% / 0.05);
}
.slide.nila .attempt-group > strong {
color: hsl(var(--group-hue) 88% 80%);
font: 850 clamp(8px, 0.75vw, 11px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.slide.nila .attempt-dots {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: clamp(5px, 0.55vw, 8px);
}
.slide.nila .attempt-dots i {
width: clamp(12px, 1.15vw, 17px);
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 50%;
font-style: normal;
}
.slide.nila .attempt-dots .attempt-original {
background: var(--amber);
box-shadow: 0 0 12px rgba(255, 209, 102, 0.42);
}
.slide.nila .attempt-dots .attempt-neighbour {
background: hsl(var(--group-hue) 82% 68%);
box-shadow: 0 0 9px hsl(var(--group-hue) 80% 60% / 0.38);
}
.slide.nila .attempt-group.attempt-failed {
--group-hue: 353;
border-style: dashed;
border-color: rgba(255, 92, 112, 0.75);
background: rgba(255, 92, 112, 0.07);
}
.slide.nila .attempt-dots .attempt-spare {
border: 2px solid var(--cyan);
background: rgba(88, 230, 255, 0.1);
}
.slide.nila .attempt-dots .attempt-missing {
color: var(--red);
border: 1px dashed rgba(255, 92, 112, 0.68);
background: rgba(255, 92, 112, 0.06);
font: 900 10px/1 ui-monospace, monospace;
}
.slide.nila .attempt-failed small {
align-self: end;
grid-column: 1 / -1;
color: #ffc0c8;
font-size: clamp(8px, 0.7vw, 10px);
text-align: center;
}
.slide.nila .attempt-legend {
justify-content: flex-start;
padding-top: 9px;
border-top: 1px solid rgba(88, 230, 255, 0.15);
color: var(--muted);
font: 750 clamp(8px, 0.72vw, 11px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .attempt-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.slide.nila .attempt-legend i {
width: 8px;
aspect-ratio: 1;
border-radius: 50%;
}
.slide.nila .attempt-original-key { background: var(--amber); }
.slide.nila .attempt-neighbour-key { background: var(--cyan); }
.slide.nila .attempt-missing-key { border: 1px dashed var(--red); }
.slide.nila .attempt-reasoning {
display: flex;
flex-direction: column;
gap: clamp(14px, 2vh, 22px);
}
.slide.nila .attempt-kicker {
color: var(--amber);
font: 850 clamp(11px, 1vw, 14px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.slide.nila .attempt-reasoning h2 {
max-width: 620px;
font-size: clamp(32px, 3.7vw, 58px);
}
.slide.nila .attempt-math {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: stretch;
gap: 7px;
}
.slide.nila .attempt-math span {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 10px 7px;
border: 1px solid var(--line);
border-radius: 13px;
color: var(--muted);
background: var(--panel);
font-size: clamp(9px, 0.82vw, 12px);
text-align: center;
}
.slide.nila .attempt-math strong {
color: var(--cyan);
font-size: clamp(23px, 2.6vw, 38px);
}
.slide.nila .attempt-math b {
align-self: center;
color: var(--muted);
font-size: 22px;
}
.slide.nila .attempt-verdict {
display: grid;
gap: 6px;
padding: 17px 19px;
border: 1px solid rgba(255, 92, 112, 0.52);
border-radius: 17px;
background: linear-gradient(135deg, rgba(255, 92, 112, 0.13), rgba(255, 92, 112, 0.035));
}
.slide.nila .attempt-verdict span {
color: var(--muted);
font: 800 clamp(12px, 1.1vw, 16px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .attempt-verdict strong {
color: var(--red);
font-size: clamp(22px, 2.25vw, 34px);
}
.slide.nila .attempt-verdict small {
color: #ffd5da;
font-size: clamp(12px, 1.05vw, 15px);
}
.slide.nila.active .attempt-group {
animation: slideContentFadeIn 760ms calc(330ms + var(--attempt-index) * 55ms) cubic-bezier(.2, .75, .2, 1) both;
}
.slide.nila .packing-stage {
width: min(1160px, 96vw);
display: grid;
grid-template-columns: 1.08fr 0.92fr;
gap: clamp(22px, 4vw, 60px);
align-items: center;
}
.slide.nila .packing-box {
height: min(62vh, 590px);
border: 1px solid rgba(88, 230, 255, 0.28);
border-radius: calc(var(--radius) + 4px);
background:
linear-gradient(rgba(88, 230, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(88, 230, 255, 0.035) 1px, transparent 1px),
radial-gradient(circle at 50% 45%, rgba(88, 230, 255, 0.1), transparent 66%),
rgba(4, 15, 27, 0.86);
background-size: 28px 28px, 28px 28px, auto, auto;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
padding: 15px 17px 13px;
box-shadow: var(--shadow), inset 0 0 45px rgba(88, 230, 255, 0.035);
overflow: hidden;
}
.slide.nila .packing-box-head,
.slide.nila .packing-legend {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.slide.nila .packing-box-head {
padding-bottom: 9px;
border-bottom: 1px solid rgba(88, 230, 255, 0.14);
color: var(--muted);
font: 850 clamp(11px, 1vw, 14px)/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.slide.nila .packing-box-head strong {
color: var(--cyan);
font-size: 1.2em;
letter-spacing: 0;
}
.slide.nila .packing-grid {
min-height: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(4, minmax(0, 1fr));
gap: 7px;
}
.slide.nila .message-bubble {
min-width: 0;
min-height: 0;
aspect-ratio: 1;
place-self: center;
height: 100%;
border-radius: 50%;
border: 1px solid rgba(88, 230, 255, 0.44);
background:
radial-gradient(circle at center, rgba(255, 209, 102, 0.1) 0 15%, transparent 16%),
radial-gradient(circle, rgba(88, 230, 255, 0.1), rgba(88, 230, 255, 0.025) 66%, transparent 68%);
box-shadow: inset 0 0 18px rgba(88, 230, 255, 0.08);
position: relative;
}
.slide.nila .message-bubble:nth-child(4n + 2),
.slide.nila .message-bubble:nth-child(4n + 3) {
border-color: rgba(181, 140, 255, 0.46);
background:
radial-gradient(circle at center, rgba(255, 209, 102, 0.1) 0 15%, transparent 16%),
radial-gradient(circle, rgba(181, 140, 255, 0.1), rgba(181, 140, 255, 0.025) 66%, transparent 68%);
}
.slide.nila .bubble-words,
.slide.nila .bubble-words i {
position: absolute;
}
.slide.nila .bubble-words {
inset: 0;
}
.slide.nila .bubble-words i {
display: grid;
place-items: center;
border-radius: 50%;
transform: translate(-50%, -50%);
font-style: normal;
}
.slide.nila .bubble-words .original-word {
left: 50%;
top: 50%;
width: clamp(17px, 1.55vw, 23px);
aspect-ratio: 1;
z-index: 2;
color: #1c1605;
background: var(--amber);
box-shadow: 0 0 15px rgba(255, 209, 102, 0.48);
font: 950 clamp(7px, 0.58vw, 9px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .bubble-words .neighbour-word {
width: clamp(5px, 0.55vw, 8px);
aspect-ratio: 1;
background: var(--cyan);
box-shadow: 0 0 7px rgba(88, 230, 255, 0.52);
}
.slide.nila .bubble-words .neighbour-word:nth-of-type(2) { left: 50%; top: 17%; }
.slide.nila .bubble-words .neighbour-word:nth-of-type(3) { left: 25%; top: 31%; }
.slide.nila .bubble-words .neighbour-word:nth-of-type(4) { left: 75%; top: 31%; }
.slide.nila .bubble-words .neighbour-word:nth-of-type(5) { left: 17%; top: 58%; }
.slide.nila .bubble-words .neighbour-word:nth-of-type(6) { left: 83%; top: 58%; }
.slide.nila .bubble-words .neighbour-word:nth-of-type(7) { left: 34%; top: 80%; }
.slide.nila .bubble-words .neighbour-word:nth-of-type(8) { left: 66%; top: 80%; }
.slide.nila .packing-legend {
padding-top: 8px;
border-top: 1px solid rgba(88, 230, 255, 0.14);
color: var(--muted);
font: 750 clamp(9px, 0.8vw, 12px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .packing-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.slide.nila .packing-legend i {
width: 9px;
aspect-ratio: 1;
border-radius: 50%;
}
.slide.nila .packing-legend .legend-original {
background: var(--amber);
box-shadow: 0 0 8px rgba(255, 209, 102, 0.42);
}
.slide.nila .packing-legend .legend-neighbour {
background: var(--cyan);
box-shadow: 0 0 8px rgba(88, 230, 255, 0.42);
}
.slide.nila .packing-legend strong {
margin-left: auto;
color: var(--green);
white-space: nowrap;
}
.slide.nila.active .message-bubble {
animation: slideContentFadeIn 720ms calc(300ms + var(--bubble-index) * 34ms) cubic-bezier(.2, .75, .2, 1) both;
}
.slide.nila .bound-panel {
display: flex;
flex-direction: column;
gap: 20px;
}
.slide.nila .bound-equation {
padding: 22px;
border-radius: 18px;
background: var(--panel);
border: 1px solid var(--line);
font:
850 clamp(26px, 3.1vw, 50px)/1.25 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
color: #e9faff;
}
.slide.nila .bound-equation em {
font-style: normal;
color: var(--cyan);
}
.slide.nila .research-door {
padding: 16px 20px;
border-radius: 17px;
background: rgba(181, 140, 255, 0.12);
border: 1px solid rgba(181, 140, 255, 0.38);
color: #e9dcff;
font-weight: 850;
font-size: clamp(17px, 1.7vw, 26px);
}
.slide.nila .inspector-stage {
width: min(1200px, 96vw);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 3vw, 50px);
align-items: center;
}
.slide.nila .position-map-panel {
display: flex;
flex-direction: column;
gap: 14px;
}
.slide.nila .placement-side {
min-height: 370px;
position: relative;
}
.slide.nila .placement-side > .placement-details {
position: absolute;
inset: 0;
}
.slide.nila .placement-discovery {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
padding: clamp(22px, 2.7vw, 38px);
border: 1px solid rgba(88, 230, 255, 0.25);
border-radius: var(--radius);
background:
radial-gradient(circle at 82% 15%, rgba(181, 140, 255, 0.13), transparent 36%),
var(--panel);
box-shadow: var(--shadow);
}
.slide.nila .placement-discovery > span {
color: var(--cyan);
font: 850 clamp(10px, 0.9vw, 13px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.slide.nila .placement-discovery h2 {
max-width: 15ch;
font-size: clamp(27px, 3vw, 44px);
}
.slide.nila .placement-discovery p {
color: var(--muted);
font-size: clamp(14px, 1.35vw, 19px);
line-height: 1.4;
}
.slide.nila .placement-discovery p strong {
color: var(--amber);
}
.slide.nila .signature-equation {
color: var(--amber);
font: 950 clamp(42px, 5vw, 72px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .signature-equation sup {
font-size: 0.52em;
}
.slide.nila .signature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.slide.nila .signature-grid i {
padding: 9px 7px;
border: 1px solid rgba(88, 230, 255, 0.28);
border-radius: 10px;
color: var(--cyan);
background: rgba(88, 230, 255, 0.06);
font: 850 clamp(13px, 1.25vw, 18px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
font-style: normal;
text-align: center;
}
.slide.nila .signature-grid i.quiet {
color: var(--muted);
border-style: dashed;
background: rgba(255, 255, 255, 0.025);
}
.slide.nila .signature-grid.numbered i {
display: flex;
flex-direction: column;
gap: 5px;
}
.slide.nila .signature-grid.numbered code {
color: inherit;
font: inherit;
}
.slide.nila .signature-grid.numbered small {
color: var(--muted);
font: 700 clamp(8px, 0.7vw, 10px)/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .signature-anchors {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.slide.nila .signature-anchors b {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 13px 8px;
border: 1px solid rgba(255, 209, 102, 0.32);
border-radius: 13px;
background: rgba(255, 209, 102, 0.07);
text-align: center;
}
.slide.nila .placement-ledger {
display: grid;
gap: 9px;
}
.slide.nila .placement-ledger p {
display: grid;
grid-template-columns: 70px repeat(3, 1fr);
align-items: center;
gap: 7px;
padding: 11px 12px;
border: 1px solid rgba(88, 230, 255, 0.2);
border-radius: 12px;
background: rgba(88, 230, 255, 0.045);
}
.slide.nila .placement-ledger p:last-child {
grid-template-columns: 70px 1fr;
}
.slide.nila .placement-ledger code {
color: var(--cyan);
font: 850 clamp(11px, 1vw, 14px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .placement-ledger small {
grid-column: 2;
color: var(--muted);
font-size: clamp(10px, 0.85vw, 12px);
}
.slide.nila .signature-anchors code {
color: var(--amber);
font-size: clamp(20px, 2vw, 30px);
}
.slide.nila .signature-anchors small {
color: var(--muted);
font-size: clamp(8px, 0.72vw, 10px);
}
.slide.nila .position-map {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
padding: 22px;
border-radius: var(--radius);
background: var(--panel);
border: 1px solid var(--line);
}
.slide.nila .position-cell {
aspect-ratio: 0.72;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.slide.nila .position-cell.check {
background: rgba(181, 140, 255, 0.12);
border-color: rgba(181, 140, 255, 0.35);
}
.slide.nila .position-cell.data {
background: rgba(88, 230, 255, 0.09);
border-color: rgba(88, 230, 255, 0.28);
}
.slide.nila .position-cell strong {
font-size: clamp(20px, 2.3vw, 36px);
}
.slide.nila .position-cell small {
font-size: clamp(9px, 0.9vw, 13px);
letter-spacing: 0.08em;
color: var(--muted);
font-weight: 900;
}
.slide.nila .position-slot {
color: var(--muted);
font: 750 clamp(8px, 0.72vw, 10px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
white-space: nowrap;
}
.slide.nila .position-cell::after {
content: attr(data-watch);
position: absolute;
bottom: 3px;
font-size: 9px;
color: rgba(255, 255, 255, 0.55);
}
.slide.nila .position-order-caption {
min-height: 66px;
display: flex;
align-items: center;
padding: 14px 17px;
border: 1px solid rgba(88, 230, 255, 0.24);
border-radius: 15px;
color: #dffaff;
background: rgba(7, 25, 39, 0.66);
font-size: clamp(13px, 1.2vw, 17px);
line-height: 1.35;
}
.slide.nila .position-order-caption strong {
margin-inline: 0.35em;
color: var(--amber);
}
.slide.nila .inspectors {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.slide.nila .placement-details {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity 760ms ease,
transform 760ms cubic-bezier(.2, .8, .2, 1),
visibility 0s linear 0s;
}
.slide.nila .placement-details.step-hidden {
opacity: 0;
visibility: hidden;
transform: translateY(18px);
transition:
opacity 520ms ease,
transform 520ms ease,
visibility 0s linear 520ms;
}
.slide.nila .inspector {
min-height: 165px;
border-radius: 19px;
padding: 18px;
background: linear-gradient(
145deg,
rgba(21, 49, 70, 0.94),
rgba(8, 24, 39, 0.94)
);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.slide.nila .inspector-avatar {
font-size: clamp(45px, 5vw, 70px);
}
.slide.nila .inspector strong {
font-size: clamp(23px, 2.5vw, 38px);
color: var(--violet);
}
.slide.nila .inspector small {
color: var(--muted);
font-size: clamp(10px, 1vw, 14px);
}
.slide.nila .inspector.complain {
border-color: rgba(255, 92, 112, 0.55);
box-shadow: 0 0 30px rgba(255, 92, 112, 0.12);
animation: shake 0.4s;
}
.slide.nila .inspector.complain strong {
color: var(--red);
}
.slide.nila .inspector.ok strong {
color: var(--green);
}
.slide.nila .encode-table {
width: min(1180px, 96vw);
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.slide.nila .nine-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: clamp(7px, 1vw, 14px);
width: 100%;
}
.slide.nila .slot {
aspect-ratio: 0.8;
border-radius: 15px;
border: 2px solid rgba(255, 255, 255, 0.12);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: rgba(255, 255, 255, 0.05);
position: relative;
cursor: default;
}
.slide.nila .slot.check {
border-color: rgba(181, 140, 255, 0.48);
background: rgba(181, 140, 255, 0.12);
}
.slide.nila .slot.data {
border-color: rgba(88, 230, 255, 0.42);
background: rgba(88, 230, 255, 0.09);
}
.slide.nila .slot .value {
font-size: clamp(32px, 4vw, 64px);
font-weight: 950;
}
.slide.nila .slot .pos {
font-size: clamp(9px, 0.95vw, 14px);
color: var(--muted);
font-weight: 850;
}
.slide.nila .slot .role {
position: absolute;
top: 6px;
font-size: clamp(8px, 0.8vw, 12px);
letter-spacing: 0.1em;
color: var(--muted);
}
.slide.nila .slot.unknown .value {
color: var(--violet);
}
.slide.nila .slot.wrong {
outline: 4px solid var(--amber);
outline-offset: 4px;
animation: shake 0.35s;
}
.slide.nila .equation-strip {
font:
850 clamp(22px, 2.7vw, 42px)/1.2 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
padding: 17px 22px;
border-radius: 16px;
background: rgba(4, 17, 28, 0.56);
border: 1px solid var(--line);
color: #e8f9ff;
text-align: center;
}
.slide.nila .equation-strip .accent {
color: var(--cyan);
}
.slide.nila .syndrome {
font-size: clamp(70px, 10vw, 150px);
font-weight: 950;
color: var(--amber);
line-height: 0.78;
text-shadow: 0 0 44px rgba(255, 209, 102, 0.22);
}
.slide.nila .syndrome-demo {
width: min(1050px, 96vw);
height: 100%;
min-height: 0;
justify-content: center;
gap: clamp(6px, 1vh, 10px);
transform: none;
}
.slide.nila .syndrome-demo .nine-row {
width: min(900px, 100%);
}
.slide.nila .syndrome-demo .slot {
aspect-ratio: 1.25;
}
.slide.nila .syndrome-demo .slot .value {
font-size: clamp(25px, 3vw, 44px);
}
.slide.nila .syndrome-demo #nila-syndromeInspectors {
grid-template-columns: repeat(3, 1fr);
width: min(920px, 100%) !important;
gap: 10px;
}
.slide.nila .syndrome-demo #nila-syndromeInspectors .inspector {
min-height: 100px;
padding: 8px 10px;
gap: 4px;
}
.slide.nila .syndrome-demo #nila-syndromeInspectors .inspector-avatar {
font-size: clamp(28px, 3vw, 42px);
}
.slide.nila .syndrome-demo #nila-syndromeInspectors .inspector strong {
font-size: clamp(17px, 1.7vw, 24px);
}
.slide.nila .syndrome-demo .syndrome {
font-size: clamp(42px, 5vw, 70px);
}
.slide.nila .reveal-stage {
width: 100%;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(30px, 5vw, 80px);
align-items: center;
}
.slide.nila .life-sample {
width: min(35vw, 430px);
aspect-ratio: 1;
margin: auto;
border-radius: 50%;
background:
radial-gradient(circle at 45% 42%, #c4ffbd 0 3%, transparent 4%),
radial-gradient(circle at 65% 55%, #80eec4 0 5%, transparent 6%),
radial-gradient(circle at 35% 67%, #8ac7ff 0 4%, transparent 5%),
radial-gradient(circle, #2d796d 0 14%, #153b53 45%, #091a2a 73%);
border: 12px solid rgba(205, 239, 255, 0.12);
box-shadow:
inset 0 0 55px rgba(88, 230, 255, 0.25),
0 0 90px rgba(89, 241, 139, 0.15);
position: relative;
overflow: hidden;
}
.slide.nila .microbe {
position: absolute;
width: 18%;
aspect-ratio: 1;
border-radius: 45% 55% 60% 40%;
background: linear-gradient(145deg, #74f0a7, #39a57b);
box-shadow: 0 0 26px rgba(89, 241, 139, 0.38);
animation: swim 5s ease-in-out infinite;
}
.slide.nila .microbe::before,
.slide.nila .microbe::after {
content: "";
position: absolute;
width: 80%;
height: 3px;
background: rgba(89, 241, 139, 0.65);
transform-origin: left center;
left: 70%;
top: 50%;
}
.slide.nila .microbe::before {
transform: rotate(25deg);
}
.slide.nila .microbe::after {
transform: rotate(-28deg);
}
.slide.nila .microbe.a {
left: 18%;
top: 30%;
}
.slide.nila .microbe.b {
right: 18%;
bottom: 22%;
animation-delay: -2s;
transform: scale(0.72);
}
@keyframes swim {
50% {
transform: translate(24px, -16px) rotate(15deg);
}
}
.slide.nila .reveal-copy {
display: flex;
flex-direction: column;
gap: 24px;
}
.slide.nila .reveal-code {
font:
900 clamp(40px, 5vw, 78px)/1 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
letter-spacing: 0.18em;
color: var(--cyan);
}
.slide.nila .reveal-title {
font-size: clamp(44px, 6vw, 92px);
line-height: 0.9;
letter-spacing: -0.05em;
color: var(--green);
max-width: 11ch;
}
.slide.nila .secded-stage {
width: min(1180px, 96vw);
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 4vw, 60px);
align-items: center;
}
.slide.nila .error-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.slide.nila .error-card {
min-height: 190px;
border-radius: 20px;
padding: 20px;
border: 1px solid var(--line);
background: var(--panel);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 11px;
}
.slide.nila .error-card .big {
font-size: clamp(55px, 7vw, 100px);
line-height: 1;
}
.slide.nila .error-card strong {
font-size: clamp(20px, 2vw, 30px);
}
.slide.nila .extra-parity {
border: 1px solid rgba(255, 209, 102, 0.42);
border-radius: var(--radius);
padding: clamp(28px, 3vw, 44px);
background: radial-gradient(
circle at 50% 0,
rgba(255, 209, 102, 0.14),
rgba(30, 24, 11, 0.45)
);
text-align: center;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}
.slide.nila .shield {
font-size: clamp(100px, 14vw, 190px);
filter: drop-shadow(0 0 30px rgba(255, 209, 102, 0.28));
}
.slide.nila .research-grid {
width: min(1200px, 97vw);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.7vw, 22px);
}
.slide.nila .research-card {
min-height: clamp(190px, 24vh, 260px);
border-radius: 20px;
padding: clamp(18px, 2vw, 28px);
background: linear-gradient(
145deg,
rgba(14, 43, 65, 0.95),
rgba(7, 22, 36, 0.92)
);
border: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 12px;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.slide.nila .research-card::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
right: -42px;
bottom: -52px;
background: var(--rglow, rgba(88, 230, 255, 0.16));
}
.slide.nila .research-card .r-icon {
font-size: clamp(38px, 4vw, 58px);
}
.slide.nila .research-card h3 {
font-size: clamp(20px, 2.2vw, 32px);
}
.slide.nila .research-card p {
font-size: clamp(13px, 1.25vw, 18px);
line-height: 1.25;
color: var(--muted);
}
.slide.nila .difficulty {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 900;
color: var(--cyan);
}
.slide.nila .world-grid {
width: min(1170px, 96vw);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(12px, 2vw, 26px);
}
.slide.nila .world-card {
min-height: 410px;
border-radius: var(--radius);
padding: clamp(19px, 2vw, 30px);
border: 1px solid var(--line);
background: linear-gradient(
160deg,
rgba(14, 43, 65, 0.96),
rgba(6, 20, 33, 0.92)
);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
gap: 16px;
box-shadow: var(--shadow);
}
.slide.nila .world-card svg {
width: 100%;
height: 220px;
}
.slide.nila .world-card h3 {
font-size: clamp(21px, 2.1vw, 32px);
}
.slide.nila .world-card p {
font-size: clamp(12px, 1.2vw, 18px);
color: var(--muted);
line-height: 1.25;
}
.slide.nila .hamming-text-game {
width: min(1220px, 96vw);
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: auto minmax(150px, 1fr) auto;
gap: clamp(9px, 1.3vh, 15px);
}
.slide.nila .hamming-game-title {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.slide.nila .hamming-game-title > div > span {
color: var(--cyan);
font: 850 clamp(9px, 0.8vw, 12px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.12em;
}
.slide.nila .hamming-game-title h2 {
max-width: none;
margin-top: 6px;
font-size: clamp(25px, 3vw, 44px);
}
.slide.nila .hamming-game-title h2 em {
color: var(--amber);
font-style: normal;
}
.slide.nila .hamming-noise-control {
flex: 0 0 auto;
display: grid;
grid-template-columns: auto minmax(90px, 12vw) auto;
align-items: center;
gap: 9px;
padding: 8px 12px;
border: 1px solid rgba(255, 92, 112, 0.5);
border-radius: 999px;
color: var(--red);
background: rgba(255, 92, 112, 0.09);
font: 850 clamp(10px, 0.9vw, 13px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .hamming-noise-control input {
width: 100%;
accent-color: var(--red);
cursor: pointer;
}
.slide.nila .hamming-noise-control input:disabled {
cursor: wait;
opacity: 0.5;
}
.slide.nila .hamming-noise-control output {
min-width: 3ch;
color: #ffd9de;
text-align: right;
}
.slide.nila .hamming-text-compare {
min-height: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
overflow: hidden;
}
.slide.nila .hamming-text-pane {
min-width: 0;
min-height: 0;
display: grid;
grid-template-rows: auto 1fr;
gap: 7px;
overflow: hidden;
}
.slide.nila .hamming-text-pane > span {
color: var(--muted);
font: 800 clamp(9px, 0.78vw, 11px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.slide.nila .hamming-text-pane textarea,
.slide.nila .hamming-text-pane pre,
.slide.nila .hamming-text-pane iframe {
width: 100%;
min-height: 0;
max-height: 100%;
height: 100%;
margin: 0;
border: 1px solid var(--line);
border-radius: 14px;
background: rgba(4, 15, 27, 0.86);
}
.slide.nila .hamming-text-pane textarea,
.slide.nila .hamming-text-pane pre {
padding: 13px 15px;
overflow: auto;
color: #dffaff;
font: 650 clamp(10px, 0.82vw, 12px)/1.48 ui-monospace, SFMono-Regular, Menlo, monospace;
white-space: pre-wrap;
resize: none;
}
.slide.nila .hamming-text-pane iframe {
background: #fff;
}
.slide.nila .hamming-game-console {
display: grid;
grid-template-columns: minmax(460px, 1.2fr) minmax(350px, 0.8fr);
grid-template-areas:
"actions metrics"
"progress metrics"
"status sample";
gap: 7px 14px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--panel);
}
.slide.nila .hamming-actions {
grid-area: actions;
display: flex;
gap: 7px;
}
.slide.nila .hamming-actions .action {
min-width: 0;
flex: 1;
padding: 8px 10px;
font-size: clamp(9px, 0.78vw, 12px);
white-space: nowrap;
}
.slide.nila .hamming-actions button:disabled {
opacity: 0.38;
cursor: not-allowed;
}
.slide.nila .hamming-progress {
grid-area: progress;
height: 4px;
overflow: hidden;
border-radius: 99px;
background: rgba(255, 255, 255, 0.08);
}
.slide.nila .hamming-progress i {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--cyan), var(--green));
box-shadow: 0 0 12px rgba(88, 230, 255, 0.42);
transition: width 180ms ease;
}
.slide.nila .hamming-status {
grid-area: status;
min-height: 1.25em;
color: #dffaff;
font-size: clamp(10px, 0.85vw, 12px);
}
.slide.nila .hamming-metrics {
grid-area: metrics;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.slide.nila .hamming-metrics span {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 7px 9px;
border: 1px solid rgba(88, 230, 255, 0.15);
border-radius: 10px;
color: var(--muted);
background: rgba(88, 230, 255, 0.035);
font: 750 clamp(8px, 0.68vw, 10px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
}
.slide.nila .hamming-metrics strong {
overflow: hidden;
color: var(--green);
font-size: clamp(11px, 0.95vw, 14px);
text-overflow: ellipsis;
white-space: nowrap;
}
.slide.nila .hamming-bit-sample {
grid-area: sample;
max-height: 41px;
display: grid;
grid-template-columns: 7ch auto 7ch auto 7ch;
align-content: start;
justify-content: end;
gap: 2px 6px;
overflow: hidden;
color: var(--muted);
font: 750 clamp(8px, 0.67vw, 10px)/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .hamming-bit-sample span,
.slide.nila .hamming-bit-sample em {
font-style: normal;
text-align: center;
}
.slide.nila .hamming-bit-sample b {
color: rgba(255, 255, 255, 0.28);
}
.slide.nila .hamming-bit-sample .damaged-bits { color: var(--red); }
.slide.nila .hamming-bit-sample .fixed-bits { color: var(--green); }
.slide.nila .hamming-text-game.is-busy .hamming-progress i {
background: linear-gradient(90deg, var(--violet), var(--cyan), var(--violet));
background-size: 200% 100%;
animation: hammingProgressPulse 1.2s linear infinite;
}
.slide.nila .closing-thanks {
margin-bottom: 8px;
color: var(--green);
font-size: clamp(32px, 4.8vw, 72px);
font-weight: 950;
letter-spacing: -0.04em;
text-align: center;
}
.slide.nila[data-title="Thank you"] .closing-inner {
gap: clamp(7px, 1.2vh, 13px);
}
.slide.nila[data-title="Thank you"] .closing-art {
width: min(47vw, 620px);
height: min(27vh, 245px);
}
.slide.nila[data-title="Thank you"] .closing-thanks {
margin: 0;
font-size: clamp(30px, 3.8vw, 56px);
}
.slide.nila[data-title="Thank you"] .closing-quote {
max-width: 24ch;
font-size: clamp(24px, 3.25vw, 48px);
line-height: 1.02;
}
.slide.nila .beyond-stage,
.slide.nila .golay-stage,
.slide.nila .voyager-stage {
width: min(1180px, 96vw);
display: grid;
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
gap: clamp(28px, 4vw, 60px);
}
.slide.nila .beyond-copy,
.slide.nila .voyager-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.slide.nila .beyond-copy h2,
.slide.nila .voyager-copy h2 {
max-width: 13ch;
}
.slide.nila .beyond-copy .lede em {
color: var(--amber);
font-style: normal;
font-weight: 900;
}
.slide.nila .beyond-kicker {
color: var(--cyan);
font: 850 clamp(10px, 0.9vw, 13px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.slide.nila .parameter-banner {
display: flex;
align-items: center;
gap: 16px;
padding: 13px 17px;
border: 1px solid rgba(181, 140, 255, 0.38);
border-radius: 15px;
background: rgba(181, 140, 255, 0.09);
}
.slide.nila .parameter-banner strong {
color: var(--violet);
font: 950 clamp(24px, 3vw, 42px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .parameter-banner span {
color: var(--muted);
font-size: clamp(11px, 1vw, 14px);
}
.slide.nila .repeat-family-demo {
display: grid;
gap: 12px;
}
.slide.nila .repeat-family-demo > div {
min-height: 94px;
display: grid;
grid-template-columns: 52px 46px 36px minmax(170px, 1fr);
grid-template-areas: "label bit arrow code" ". note note note";
align-items: center;
gap: 4px 10px;
padding: 13px 18px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--panel);
}
.slide.nila .repeat-family-demo span { grid-area: label; color: var(--muted); }
.slide.nila .repeat-family-demo b { grid-area: bit; color: var(--amber); font-size: 34px; }
.slide.nila .repeat-family-demo i { grid-area: arrow; color: var(--muted); font-style: normal; }
.slide.nila .repeat-family-demo code { grid-area: code; color: var(--green); font: 900 clamp(27px, 3.2vw, 48px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em; }
.slide.nila .repeat-family-demo small { grid-area: note; color: var(--muted); }
.slide.nila .golay-stage {
grid-template-columns: 1fr 1fr;
}
.slide.nila .golay-identity,
.slide.nila .perfect-proof {
min-height: 390px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
padding: clamp(24px, 3vw, 42px);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
}
.slide.nila .golay-identity > span,
.slide.nila .perfect-proof > span {
color: var(--cyan);
font: 850 clamp(10px, 0.9vw, 13px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.1em;
}
.slide.nila .golay-parameters {
color: var(--amber);
font: 950 clamp(46px, 6.3vw, 88px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: -0.08em;
}
.slide.nila .parameter-legend {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.slide.nila .parameter-legend b {
display: flex;
flex-direction: column;
gap: 3px;
color: var(--muted);
font-size: clamp(9px, 0.85vw, 12px);
}
.slide.nila .parameter-legend strong {
color: var(--ink);
font-size: clamp(24px, 2.7vw, 38px);
}
.slide.nila .golay-promise {
color: var(--muted);
font-size: clamp(16px, 1.5vw, 22px);
}
.slide.nila .golay-promise strong { color: var(--green); }
.slide.nila .perfect-proof {
background: radial-gradient(circle at 75% 15%, rgba(255, 209, 102, 0.12), transparent 40%), var(--panel);
}
.slide.nila .perfect-sum,
.slide.nila .perfect-equals {
color: var(--ink);
font: 850 clamp(22px, 2.4vw, 34px)/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .perfect-sum strong,
.slide.nila .perfect-equals { color: var(--amber); }
.slide.nila .perfect-times { color: var(--muted); font-size: clamp(16px, 1.5vw, 21px); }
.slide.nila .perfect-proof p { color: var(--green); font-size: clamp(15px, 1.35vw, 19px); font-weight: 800; }
.slide.nila .voyager-stage {
grid-template-columns: 1.12fr 0.88fr;
}
.slide.nila .voyager-art {
min-height: 390px;
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: radial-gradient(circle at 82% 42%, rgba(75, 140, 255, 0.2), transparent 25%), rgba(5, 18, 31, 0.65);
}
.slide.nila .voyager-probe { position: absolute; left: 9%; top: 20%; font-size: clamp(70px, 8vw, 120px); transform: rotate(-12deg); }
.slide.nila .voyager-earth { position: absolute; right: 8%; top: 30%; font-size: clamp(72px, 8vw, 120px); }
.slide.nila .voyager-beam { position: absolute; left: 30%; right: 27%; top: 42%; display: flex; justify-content: space-around; transform: rotate(4deg); }
.slide.nila .voyager-beam i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
.slide.nila .voyager-photo { position: absolute; left: 34%; bottom: 12%; padding: 11px 15px; border: 1px solid rgba(255,209,102,.35); border-radius: 12px; color: var(--amber); background: rgba(255,209,102,.08); font: 800 clamp(9px,.8vw,12px)/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.slide.nila .voyager-photo strong { color: var(--ink); }
.slide.nila .golay-upgrade {
display: flex;
align-items: center;
gap: 10px;
font: 850 clamp(15px, 1.5vw, 21px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .golay-upgrade span { color: var(--muted); }
.slide.nila .golay-upgrade i { color: var(--cyan); font-style: normal; }
.slide.nila .golay-upgrade strong { color: var(--amber); }
.slide.nila .beyond-list {
display: grid;
gap: 10px;
padding-left: 22px;
color: var(--muted);
font-size: clamp(15px, 1.35vw, 19px);
line-height: 1.35;
}
.slide.nila .rs-shape-stage,
.slide.nila .rs-repair-stage {
width: min(1190px, 96vw);
}
.slide.nila .rs-shape-stage {
display: grid;
grid-template-columns: 0.82fr 1.18fr;
gap: clamp(22px, 3vw, 42px);
align-items: stretch;
}
.slide.nila .rs-message-card,
.slide.nila .rs-sample-card,
.slide.nila .rs-word-block,
.slide.nila .rs-decoder {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
}
.slide.nila .rs-message-card,
.slide.nila .rs-sample-card {
min-height: 390px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 17px;
padding: clamp(24px, 3vw, 40px);
}
.slide.nila .rs-message-symbols {
display: flex;
gap: 10px;
}
.slide.nila .rs-message-symbols b {
width: clamp(55px, 5.4vw, 72px);
aspect-ratio: 1;
display: grid;
place-items: center;
border: 1px solid rgba(255, 209, 102, 0.4);
border-radius: 15px;
color: var(--amber);
background: rgba(255, 209, 102, 0.09);
font: 950 clamp(29px, 3.2vw, 44px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .rs-turn-arrow {
color: var(--muted);
font-size: clamp(12px, 1vw, 15px);
}
.slide.nila .rs-polynomial {
color: var(--violet);
font: 900 clamp(24px, 2.8vw, 40px)/1.15 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: -0.04em;
}
.slide.nila .rs-message-card > small,
.slide.nila .rs-word-block small {
color: var(--muted);
}
.slide.nila .rs-sample-card {
background: radial-gradient(circle at 75% 20%, rgba(111, 255, 233, 0.1), transparent 42%), var(--panel);
}
.slide.nila .rs-sample-strip {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 7px;
}
.slide.nila .rs-sample-strip > div {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 11px 5px 13px;
border: 1px solid rgba(111, 255, 233, 0.24);
border-radius: 12px;
background: rgba(111, 255, 233, 0.06);
}
.slide.nila .rs-sample-strip small { color: var(--muted); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.slide.nila .rs-sample-strip strong { color: var(--cyan); font: 950 clamp(21px, 2.3vw, 32px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.slide.nila .rs-codeword-label {
display: flex;
flex-direction: column;
gap: 6px;
}
.slide.nila .rs-codeword-label span { color: var(--green); font: 850 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.slide.nila .rs-codeword-label code { color: var(--ink); font: 850 clamp(18px, 2vw, 28px)/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.slide.nila .rs-sample-card p { color: var(--muted); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.4; }
.slide.nila .rs-sample-card p strong { color: var(--green); }
.slide.nila .rs-repair-stage {
display: flex;
flex-direction: column;
gap: clamp(18px, 2.5vh, 28px);
}
.slide.nila .rs-repair-flow {
display: grid;
grid-template-columns: 1fr 0.78fr 1fr;
gap: 16px;
align-items: stretch;
}
.slide.nila .rs-word-block,
.slide.nila .rs-decoder {
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
padding: 22px;
}
.slide.nila .rs-word-block > span,
.slide.nila .rs-decoder > span {
color: var(--cyan);
font: 850 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: .13em;
}
.slide.nila .rs-word-block > div {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.slide.nila .rs-word-block b {
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 9px;
color: var(--ink);
background: rgba(255,255,255,.07);
font: 900 clamp(16px, 1.65vw, 24px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slide.nila .rs-word-block b.bad {
color: var(--space);
background: var(--red);
box-shadow: 0 0 20px rgba(255, 92, 112, .25);
}
.slide.nila .rs-word-block b.fixed {
color: var(--space);
background: var(--green);
box-shadow: 0 0 20px rgba(89, 241, 139, .2);
}
.slide.nila .rs-word-block small strong { color: var(--green); }
.slide.nila .rs-decoder {
align-items: center;
border-color: rgba(181, 140, 255, .36);
background: rgba(181, 140, 255, .08);
text-align: center;
}
.slide.nila .rs-decoder > span { color: var(--violet); }
.slide.nila .rs-decoder strong { color: var(--ink); font-size: clamp(14px, 1.25vw, 18px); line-height: 1.35; }
.slide.nila .rs-decoder i { color: var(--amber); font-size: 30px; font-style: normal; }
.slide.nila .rs-uses {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.slide.nila .rs-uses > div {
min-height: 110px;
display: grid;
grid-template-columns: 48px 1fr;
grid-template-areas: "icon title" "icon note";
align-content: center;
gap: 4px 12px;
padding: 16px 20px;
border: 1px solid var(--line);
border-radius: 15px;
background: var(--panel);
}
.slide.nila .rs-uses span { grid-area: icon; font-size: 35px; }
.slide.nila .rs-uses strong { grid-area: title; color: var(--ink); font-size: 17px; }
.slide.nila .rs-uses small { grid-area: note; color: var(--muted); }
.slide.nila .source-pair { white-space: nowrap; }
.slide.nila.active .rs-message-symbols > b,
.slide.nila.active .rs-sample-strip > div,
.slide.nila.active .rs-repair-flow > *,
.slide.nila.active .rs-uses > div {
animation: slideContentFadeIn 1050ms cubic-bezier(.2, .75, .2, 1) both;
}
.slide.nila.active .rs-message-symbols > :nth-child(2),
.slide.nila.active .rs-sample-strip > :nth-child(2),
.slide.nila.active .rs-repair-flow > :nth-child(2),
.slide.nila.active .rs-uses > :nth-child(2) { animation-delay: 430ms; }
.slide.nila.active .rs-message-symbols > :nth-child(3),
.slide.nila.active .rs-sample-strip > :nth-child(3),
.slide.nila.active .rs-repair-flow > :nth-child(3),
.slide.nila.active .rs-uses > :nth-child(3) { animation-delay: 600ms; }
.slide.nila.active .rs-sample-strip > :nth-child(4) { animation-delay: 690ms; }
.slide.nila.active .rs-sample-strip > :nth-child(5) { animation-delay: 780ms; }
.slide.nila.active .rs-sample-strip > :nth-child(6) { animation-delay: 870ms; }
.slide.nila.active .rs-sample-strip > :nth-child(7) { animation-delay: 960ms; }
.slide.nila .code-ladder-stage {
width: min(1210px, 97vw);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vh, 34px);
}
.slide.nila .code-ladder {
width: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
align-items: center;
gap: 8px;
}
.slide.nila .code-ladder > div {
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 10px;
border: 1px solid var(--line);
border-radius: 17px;
background: var(--panel);
text-align: center;
}
.slide.nila .code-ladder > div span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--space); background: var(--cyan); font-weight: 950; }
.slide.nila .code-ladder > div strong { color: var(--ink); font-size: clamp(14px, 1.35vw, 19px); }
.slide.nila .code-ladder > div small { color: var(--muted); font-size: clamp(10px, 0.85vw, 12px); }
.slide.nila .code-ladder > i { color: var(--amber); font-size: 25px; font-style: normal; }
.slide.nila .next-mission-question {
margin-top: 0;
text-align: center;
}
.slide.nila .next-mission-question span { color: var(--cyan); font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.slide.nila .next-mission-question h2 { max-width: 28ch; margin: 10px auto 0; font-size: clamp(27px, 3.1vw, 46px); }
@keyframes hammingProgressPulse {
to { background-position: -200% 0; }
}
.slide.nila .final-console {
width: min(1100px, 95vw);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(22px, 3vh, 40px);
}
.slide.nila .final-received {
font:
950 clamp(40px, 6vw, 96px)/1 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
letter-spacing: 0.13em;
color: #effcff;
text-shadow: 0 0 30px rgba(88, 230, 255, 0.2);
}
.slide.nila .inspector-lights {
display: flex;
gap: clamp(12px, 2vw, 26px);
}
.slide.nila .inspector-light {
width: clamp(80px, 10vw, 140px);
aspect-ratio: 1;
border-radius: 24px;
border: 1px solid var(--line);
background: var(--panel);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: 0.2s;
}
.slide.nila .inspector-light strong {
font-size: clamp(28px, 3.4vw, 50px);
color: var(--violet);
}
.slide.nila .inspector-light span {
font-size: clamp(11px, 1.1vw, 16px);
color: var(--muted);
font-weight: 900;
}
.slide.nila .inspector-light.fail {
background: rgba(255, 92, 112, 0.12);
border-color: rgba(255, 92, 112, 0.55);
}
.slide.nila .inspector-light.fail strong {
color: var(--red);
}
.slide.nila .final-answer {
min-height: 82px;
font-size: clamp(28px, 3.5vw, 54px);
font-weight: 950;
color: var(--green);
text-align: center;
}
.slide.nila .closing {
width: 100%;
height: 100%;
display: grid;
place-items: center;
text-align: center;
}
.slide.nila .closing-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(22px, 4vh, 44px);
}
.slide.nila .closing-art {
width: min(54vw, 720px);
height: min(38vh, 390px);
}
.slide.nila .closing-quote {
font-size: clamp(34px, 5vw, 76px);
line-height: 0.98;
letter-spacing: -0.045em;
max-width: 18ch;
font-weight: 900;
}
.slide.nila .closing-quote strong {
color: var(--cyan);
}
.slide.nila aside.notes {
display: none;
}
.slide.nila .notes-panel {
position: fixed;
z-index: 50;
right: 0;
top: 0;
bottom: 0;
width: min(520px, 42vw);
background: #07131f;
border-left: 1px solid rgba(88, 230, 255, 0.25);
box-shadow: -20px 0 60px rgba(0, 0, 0, 0.38);
transform: translateX(102%);
transition: 0.28s ease;
padding: 30px 28px 90px;
overflow: auto;
color: #eaf8ff;
}
.slide.nila .notes-panel h2 {
font-size: 24px;
margin: 0 0 8px;
max-width: none;
}
.slide.nila .notes-meta {
display: flex;
gap: 9px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.slide.nila .note-chip {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 6px 9px;
border-radius: 999px;
background: rgba(88, 230, 255, 0.1);
border: 1px solid rgba(88, 230, 255, 0.2);
color: var(--cyan);
font-weight: 850;
}
.slide.nila .notes-content {
font-size: 16px;
line-height: 1.55;
color: #c8dce8;
}
.slide.nila .notes-content h4 {
margin: 20px 0 6px;
color: #fff;
font-size: 16px;
}
.slide.nila .notes-content p {
margin: 0 0 12px;
}
.slide.nila .notes-content ul,
.slide.nila .notes-content ol {
padding-left: 21px;
margin: 8px 0 15px;
}
.slide.nila .notes-content li {
margin: 5px 0;
}
.slide.nila .notes-content strong {
color: #fff;
}
.slide.nila .notes-shortcuts {
position: absolute;
bottom: 22px;
left: 28px;
right: 28px;
color: #7e9aaa;
font-size: 12px;
padding-top: 13px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.slide.nila .hud {
position: fixed;
z-index: 60;
left: 0;
right: 0;
bottom: 0;
height: 62px;
padding: 0 18px 12px;
display: flex;
align-items: flex-end;
justify-content: space-between;
pointer-events: none;
background: linear-gradient(transparent, rgba(2, 10, 18, 0.72));
}
.slide.nila .hud-left,
.slide.nila .hud-right {
display: flex;
align-items: center;
gap: 8px;
pointer-events: auto;
}
.slide.nila .hud button {
width: 42px;
height: 42px;
border-radius: 13px;
border: 1px solid rgba(205, 240, 255, 0.22);
background: rgba(6, 25, 39, 0.88);
display: grid;
place-items: center;
cursor: pointer;
color: #eaffff;
font-weight: 900;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
transition: 0.18s;
}
.slide.nila .hud button:hover {
border-color: rgba(88, 230, 255, 0.58);
background: rgba(12, 45, 67, 0.95);
transform: translateY(-2px);
}
.slide.nila .hud button:disabled {
opacity: 0.35;
cursor: default;
transform: none;
}
.slide.nila .slide-counter {
min-width: 70px;
padding: 10px 13px;
border-radius: 12px;
border: 1px solid rgba(205, 240, 255, 0.18);
background: rgba(6, 25, 39, 0.84);
font:
800 13px/1 ui-monospace,
SFMono-Regular,
Menlo,
monospace;
color: #dffaff;
text-align: center;
}
.slide.nila .progress {
position: fixed;
z-index: 61;
left: 0;
bottom: 0;
height: 4px;
width: 0;
background: linear-gradient(
90deg,
var(--blue),
var(--cyan),
var(--green)
);
box-shadow: 0 0 14px rgba(88, 230, 255, 0.45);
transition: width 0.28s ease;
}
.toast {
position: fixed;
z-index: 90;
top: 18px;
left: 50%;
transform: translate(-50%, -16px);
padding: 12px 17px;
border-radius: 12px;
background: rgba(5, 20, 32, 0.96);
border: 1px solid rgba(88, 230, 255, 0.3);
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transition: 0.22s;
color: #e9fbff;
font-weight: 780;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
@media (max-height: 940px) and (min-width: 901px) {
.slide.nila {
--slide-pad: clamp(34px, 4vw, 62px);
}
.slide.nila {
gap: 10px;
}
.slide.nila .slide-head {
min-height: 42px;
}
.slide.nila .slide-foot {
min-height: 30px;
}
.slide.nila .message-grid {
gap: 8px 12px;
}
.slide.nila .message-card {
min-height: 78px;
padding: 8px 13px;
gap: 3px;
}
.slide.nila .message-icon {
font-size: 26px;
}
.slide.nila .message-label {
font-size: 12px;
}
.slide.nila .message-code {
font-size: 12px;
}
.slide.nila .parity-layout {
gap: 28px;
}
.slide.nila .watchdog {
width: min(29vw, 330px);
}
.slide.nila .parity-console {
padding: 20px 26px;
gap: 14px;
}
.slide.nila .parity-console h2 {
font-size: clamp(27px, 3vw, 40px);
}
.slide.nila .packing-stage {
gap: 28px;
}
.slide.nila .packing-box {
height: min(55vh, 455px);
gap: 7px;
padding: 13px;
}
.slide.nila .packing-stage > .scene {
height: min(54vh, 470px);
}
.slide.nila .bound-panel {
gap: 11px;
}
.slide.nila .bound-equation {
padding: 13px 16px;
font-size: clamp(21px, 2.5vw, 36px);
}
.slide.nila .research-door {
padding: 11px 14px;
font-size: clamp(15px, 1.55vw, 21px);
}
.slide.nila .error-cards {
gap: 10px;
}
.slide.nila .error-card {
min-height: 132px;
padding: 12px;
gap: 6px;
}
.slide.nila .error-card .big {
font-size: clamp(45px, 5vw, 68px);
}
.slide.nila .error-card strong {
font-size: clamp(18px, 1.8vw, 25px);
}
.slide.nila .extra-parity {
padding: 18px 23px;
gap: 9px;
}
.slide.nila .extra-parity .shield {
font-size: clamp(78px, 9vw, 112px);
}
.slide.nila .extra-parity h2 {
font-size: clamp(28px, 3vw, 40px);
}
.slide.nila .extra-parity .lede {
font-size: clamp(16px, 1.7vw, 22px);
}
.slide.nila .research-grid {
gap: 10px 14px;
}
.slide.nila .research-card {
min-height: 150px;
padding: 13px 17px;
gap: 5px;
}
.slide.nila .research-card .r-icon {
font-size: clamp(30px, 3.2vw, 42px);
}
.slide.nila .research-card h3 {
font-size: clamp(18px, 1.85vw, 25px);
}
.slide.nila .research-card p {
font-size: clamp(11px, 1.05vw, 14px);
}
.slide.nila .difficulty {
font-size: 9px;
}
}
@media (max-width: 900px) {
.slide.nila {
--slide-pad: 24px;
overflow-y: auto;
}
.slide.nila .hero-grid,
.slide.nila .card-game-layout,
.slide.nila .interactive-panel,
.slide.nila .power-tree,
.slide.nila .alarm-layout,
.slide.nila .repeat-lab,
.slide.nila .parity-layout,
.slide.nila .distance-stage,
.slide.nila .capacity-attempt-stage,
.slide.nila .packing-stage,
.slide.nila .inspector-stage,
.slide.nila .beyond-stage,
.slide.nila .golay-stage,
.slide.nila .voyager-stage,
.slide.nila .rs-shape-stage,
.slide.nila .hamming-text-compare,
.slide.nila .hamming-game-console,
.slide.nila .reveal-stage,
.slide.nila .secded-stage {
grid-template-columns: 1fr;
}
.slide.nila .code-ladder {
grid-template-columns: 1fr;
}
.slide.nila .code-ladder > i {
transform: rotate(90deg);
}
.slide.nila .rs-repair-flow,
.slide.nila .rs-uses {
grid-template-columns: 1fr;
}
.slide.nila .capacity-attempt-stage {
gap: 18px;
}
.slide.nila .attempt-board {
height: min(52vh, 430px);
}
.slide.nila .hamming-game-console {
grid-template-areas:
"actions"
"progress"
"status"
"metrics"
"sample";
}
.slide.nila .hamming-bit-sample {
justify-content: start;
}
.slide.nila .hero-copy {
z-index: 2;
}
.slide.nila .hero-art {
position: absolute;
right: -10%;
bottom: -10%;
width: 70%;
height: 65%;
opacity: 0.62;
}
.slide.nila .metric-row {
grid-template-columns: 1fr 1fr;
}
.slide.nila .metric-row .metric:last-child {
grid-column: 1/-1;
}
.slide.nila .split {
gap: 18px;
}
.slide.nila .big-light {
width: min(44vw, 330px);
}
.slide.nila .message-grid {
grid-template-columns: repeat(4, 1fr);
}
.slide.nila .interactive-panel {
max-height: 72vh;
overflow: auto;
}
.slide.nila .drawn-message {
min-height: 220px;
}
.slide.nila .world-grid {
grid-template-columns: 1fr 1fr;
}
.slide.nila .research-grid {
grid-template-columns: 1fr 1fr;
}
.slide.nila .notes-panel {
width: 78vw;
}
}
@media (max-width: 620px) {
.slide.nila {
padding: 20px 18px 70px;
}
.slide.nila .slide-head {
min-height: 34px;
}
.slide.nila .mission-time {
display: none;
}
.slide.nila .metric-row {
grid-template-columns: 1fr;
}
.slide.nila .metric-row .metric:last-child {
grid-column: auto;
}
.slide.nila .metric {
min-height: 140px;
}
.slide.nila .message-grid {
grid-template-columns: repeat(3, 1fr);
}
.slide.nila .idea-arena {
grid-template-columns: 1fr;
}
.slide.nila .idea-card {
min-height: 180px;
display: grid;
grid-template-columns: 90px 1fr;
}
.slide.nila .idea-art {
font-size: 70px;
}
.slide.nila .world-grid,
.slide.nila .research-grid {
grid-template-columns: 1fr 1fr;
}
.slide.nila .world-card {
min-height: 280px;
}
.slide.nila .world-card svg {
height: 130px;
}
.slide.nila .inspector-lights {
gap: 6px;
}
.slide.nila .inspector-light {
border-radius: 14px;
}
.slide.nila .notes-panel {
width: 100vw;
}
}
@media (prefers-reduced-motion: reduce) {
.slide.nila, .slide.nila *, .slide.nila *::before, .slide.nila *::after,
.slide.nila *::before,
.slide.nila *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
@media print {
.slide.nila .hud,
.slide.nila .progress,
.toast,
.slide.nila .notes-panel {
display: none !important;
}
.slide.nila .deck {
display: block;
}
.slide.nila {
overflow: hidden;
}
.slide.nila aside.notes {
display: block;
position: absolute;
left: 40px;
right: 40px;
bottom: 16px;
font-size: 10px;
color: #bacbd6;
max-height: 100px;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 6px;
}
}