:root { font-family: "DM Sans", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.wrap { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.review-bar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 10px 28px; font-size: 10px; position: relative; z-index: 3; }
.review-bar a { text-underline-offset: 4px; }
.review-bar a:hover { text-decoration: underline; }
.review-bar > span { opacity: .66; }
.concept-skip { position: fixed; top: -70px; left: 20px; padding: 12px 20px; color: #172733; background: #f4e9d4; z-index: 10; opacity: 0; pointer-events: none; }
.concept-skip:focus { top: 12px; opacity: 1; pointer-events: auto; }
.concept-header { display: flex; justify-content: space-between; align-items: center; padding: 29px 0; gap: 24px; position: relative; z-index: 1; }
.personal-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.5px; }
.personal-brand > span[lang] { font-weight: 400; font-size: 12px; opacity: .6; }
.concept-header nav { display: flex; gap: 28px; align-items: center; font-size: 12px; }
.concept-header nav a { padding: 8px 0; }
.concept-header nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.small-label { display: flex; align-items: center; gap: 9px; font-size: 10px; letter-spacing: .6px; }
.live-dot { display: inline-block; width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex-shrink: 0; }
.concept-footer { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 34px; gap: 25px; font-size: 10px; }
.concept-footer > div { display: flex; gap: 25px; }
.concept-footer a { padding: 7px 0; }
.concept-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 01 — a quiet observatory */
.concept--observatory { color: #e6edee; background: #101f2a; line-height: 1.6; }
.concept--observatory ::selection { background: #efd0a2; color: #101f2a; }
.concept--observatory .review-bar { color: #9eb0bc; background: #0c1821; border-bottom: 1px solid #263744; }
.observatory-sky { position: absolute; inset: 38px 0 auto; height: 930px; pointer-events: none; opacity: .45; background-image: radial-gradient(circle at 18% 32%, #a3bac6 0 .7px, transparent 1px), radial-gradient(circle at 57% 25%, #a3bac6 0 .7px, transparent 1px), radial-gradient(circle at 84% 70%, #a3bac6 0 .7px, transparent 1px), radial-gradient(circle at 44% 87%, #a3bac6 0 .7px, transparent 1px); background-size: 270px 310px, 430px 270px, 370px 380px, 530px 510px; }
.concept--observatory main, .concept--observatory footer { position: relative; }
.little-sun { color: #efbd83; font-size: 30px; font-weight: 400; line-height: 1; }
.concept--observatory .concept-header nav { color: #b2c2cb; }
.observatory-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; padding: 63px 0 72px; }
.observatory-copy .small-label { color: #9db7bc; }
.observatory-copy h1 { font-size: clamp(54px, 5.3vw, 77px); font-weight: 500; line-height: 1.08; letter-spacing: -3px; margin-top: 25px; }
.observatory-copy h1 > span { color: #eabb89; }
.observatory-copy > p:not(.small-label) { font-size: 14px; line-height: 1.85; color: #aec1cb; margin-top: 25px; }
.plain-link { display: inline-flex; gap: 29px; align-items: center; padding: 10px 0; margin-top: 26px; color: #eabb89; font-size: 12px; }
.plain-link:hover span { transform: translateY(3px); }
.plain-link span { transition: transform .2s; font-size: 19px; }
.orbital-window { min-width: 0; }
.orbital-scene { width: 100%; }
.orbit { transform-origin: 270px 270px; }
.orbit-one { animation: orbit-turn 32s linear infinite; }
.orbit-two { animation: orbit-turn 57s linear infinite reverse; }
.orbit-three { animation: orbit-turn 81s linear infinite; }
.orbits-paused .orbit { animation-play-state: paused; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
.orbital-window figcaption { display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #92aab8; font-size: 10px; padding: 0 27px; }
.motion-toggle { min-height: 44px; background: none; border: 0; color: #b8c8cf; padding: 7px 0 7px 10px; font-size: 10px; }
.motion-toggle span { margin-left: 8px; }
.section-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 0; border-top: 1px solid #344552; }
.section-line h2 { font-size: 16px; font-weight: 500; letter-spacing: -.3px; }
.section-line > span { font-size: 10px; color: #89a2b2; }
.observatory-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.space-project { display: block; padding: 6px 0 32px; position: relative; }
.space-project + .space-project { padding-left: 28px; border-left: 1px solid #2b3d4b; }
.project-symbol { display: block; font-size: 34px; font-weight: 400; color: #95c7c0; line-height: 1.4; margin-bottom: 16px; }
.project-symbol.lavender { color: #b6a9d8; }
.project-symbol.peach { color: #e4b891; }
.space-project small { color: #91a9b6; font-size: 10px; }
.space-project h3 { font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: -.4px; margin-top: 9px; }
.space-project h3 > span { display: inline-block; font-size: 14px; color: #97afbc; transition: transform .2s; }
.space-project:hover h3 > span { transform: translate(3px, -3px); }
.space-project p { font-size: 11px; color: #a6bac6; margin-top: 13px; }
.observatory-about { display: grid; grid-template-columns: 1fr 1.1fr; gap: 90px; border-block: 1px solid #344552; margin-top: 36px; padding: 41px 0; }
.observatory-about .small-label { color: #92abb9; }
.observatory-about h2 { font-size: 24px; font-weight: 400; letter-spacing: -.6px; line-height: 1.4; margin-top: 11px; }
.observatory-about > div > p:not(.small-label) { font-size: 13px; line-height: 1.9; color: #b1c3cd; }
.observatory-about .muted { margin-top: 10px; color: #91a9b7 !important; }
.concept--observatory .concept-footer { color: #8fa7b6; }

/* 02 — a little cosmic notebook */
.concept--notebook { color: #334c43; background: #faf8ef; line-height: 1.6; }
.concept--notebook ::selection { background: #eed18a; color: #263d33; }
.concept--notebook .review-bar { background: #efede2; color: #6d796c; }
.concept--notebook .concept-header { padding: 24px 0; }
.notebook-avatar { width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: #e6dac2; }
.notebook-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 27%; }
.concept--notebook .personal-brand { font-size: 15px; }
.concept--notebook .concept-header nav { color: #597164; }
.notebook-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 73px; padding: 64px 0 58px; }
.hand-note { display: inline-block; font-size: 13px; color: #798767; transform: rotate(-4deg); font-style: italic; letter-spacing: .4px; }
.notebook-copy h1 { font-size: clamp(48px, 4.6vw, 66px); letter-spacing: -3px; font-weight: 600; line-height: 1.16; margin-top: 17px; position: relative; }
.greeting-star { display: inline-block; color: #d29a3c; font-size: 53px; font-weight: 400; transform: rotate(12deg); margin-left: 10px; vertical-align: 5px; }
.notebook-copy > p { font-size: 17px; line-height: 1.85; color: #607166; margin-top: 23px; }
.current-note { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #6c7e60; margin-top: 22px; }
.notebook-link { display: inline-flex; align-items: center; gap: 17px; font-size: 12px; font-weight: 500; border-bottom: 1px solid #718568; padding: 11px 0 7px; margin-top: 18px; }
.notebook-link:hover { color: #a46736; border-color: #a46736; }
.notebook-link span { font-size: 23px; }
.three-suns-card { border: 1px solid #d7ddcb; background-color: #f2f3e6; background-image: linear-gradient(#dce2d54d 1px, transparent 1px), linear-gradient(90deg, #dce2d54d 1px, transparent 1px); background-size: 21px 21px; box-shadow: 7px 8px 0 #e9e8db; transform: rotate(2deg); border-radius: 3px; position: relative; }
.three-suns-card::before { content: ""; position: absolute; top: -12px; left: 41%; width: 78px; height: 25px; transform: rotate(-5deg); background: #ebd997bf; }
.paper-top { padding: 19px 20px 0; display: flex; justify-content: space-between; align-items: center; font: 8px monospace; letter-spacing: 1.2px; color: #7e8974; }
.three-suns-scene { width: 100%; overflow: visible; }
.three-suns-card figcaption { padding: 1px 16px 13px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; color: #6a7963; }
.remix-button { border: 1px solid #becbb4; background: #f9faf2; color: #50694f; border-radius: 20px; min-height: 40px; padding: 8px 10px; font-size: 9px; display: inline-flex; align-items: center; gap: 8px; }
.remix-button:hover { background: #e2ebd5; }
.toy-sun, .scribble-orbit { transition: transform 700ms cubic-bezier(.22,.7,.25,1); transform-box: fill-box; transform-origin: center; }
.scribble-orbit { transform-box: view-box; transform-origin: 230px 172px; }
.notebook-section-title { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 0 25px; }
.notebook-section-title h2 { font-size: 27px; letter-spacing: -.9px; font-weight: 500; }
.notebook-section-title h2 > span { color: #c78b45; }
.note-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.project-note { position: relative; display: flex; flex-direction: column; border: 1px solid #d6dfcf; padding: 23px 25px 18px; border-radius: 5px; transition: transform .2s; }
.project-note:hover { transform: translateY(-5px) rotate(-1deg); }
.note-green { background: #e8eee1; }
.note-purple { background: #efedf5; border-color: #dfdce9; transform: rotate(1deg); }
.note-peach { background: #f6e9db; border-color: #ead9c6; }
.note-number { font: 9px/1.6 monospace; letter-spacing: 1px; color: #65725f; }
.note-doodle { display: block; font-size: 37px; color: #798b61; line-height: 1; margin: 27px 0 18px; }
.note-purple .note-doodle { color: #9c8bba; }
.note-peach .note-doodle { color: #bc8a59; }
.project-note h3 { font-size: 23px; line-height: 1.35; font-weight: 500; letter-spacing: -.6px; }
.project-note p { color: #596b5e; font-size: 13px; line-height: 1.85; margin: 14px 0 23px; }
.note-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; border-top: 1px solid #98a59040; margin-top: auto; padding-top: 13px; }
.note-bottom > span { font-size: 18px; }
.about-spark { color: #cf9b50; font-size: 39px; }
.concept--notebook .concept-footer { color: #64735d; font-size: 12px; }
.concept--notebook .concept-footer > div { flex-wrap: wrap; gap: 10px 22px; }
.notebook-kicker { display: block; color: #64725d; font: 10px/1.8 monospace; letter-spacing: .9px; }
.notebook-now { display: grid; grid-template-columns: 100px 1.3fr 1fr; align-items: start; gap: 30px; border-block: 1px dashed #c9ceba; padding: 23px 0; }
.notebook-now > div { display: flex; flex-direction: column; gap: 4px; }
.notebook-now strong { font-size: 14px; font-weight: 500; }
.notebook-now > div > span { color: #61735e; font-size: 12px; line-height: 1.8; }
.notebook-now a { text-decoration: underline; text-decoration-color: #bcc5b2; text-underline-offset: 3px; }
.notebook-section { margin-top: 52px; }
.notebook-section-title .notebook-kicker { margin-bottom: 11px; }
.notebook-section-intro { max-width: 720px; color: #5f705f; font-size: 14px; line-height: 1.9; margin: -7px 0 28px; }
.notebook-inline-link { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; font-size: 12px; font-weight: 500; text-decoration: underline; text-decoration-color: #bcc5b2; text-underline-offset: 5px; }
.notebook-inline-link:hover { color: #946137; text-decoration-color: currentColor; }
.notebook-inline-link > span { font-size: 18px; }
.notebook-build-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 31px; }
.notebook-build-feature { border: 1px solid #e0d4bc; border-radius: 5px; padding: 27px 32px 22px; background: #f3ecd9; }
.build-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.build-doodle { font-size: 33px; line-height: 1; color: #ad8550; transform: rotate(-12deg); }
.notebook-build-grid h3 { font-size: 27px; line-height: 1.35; font-weight: 500; letter-spacing: -.7px; }
.notebook-build-grid p { font-size: 14px; line-height: 1.9; color: #596b5e; margin-top: 16px; }
.notebook-details { border-block: 1px dashed #c9c9b0; margin: 21px 0 9px; }
.notebook-details summary, .paper-details summary { cursor: pointer; font-size: 12px; padding: 13px 0; min-height: 44px; }
.notebook-details summary:hover, .paper-details summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.notebook-details > div { padding: 0 0 18px; }
.notebook-details p { margin-top: 0; font-size: 13px; }
.notebook-sensing { padding: 27px 12px 20px; }
.notebook-sensing h3 { margin-top: 20px; }
.notebook-sensing .notebook-inline-link { margin-top: 14px; }
.notebook-award { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 12px; line-height: 1.8; color: #796344; }
.notebook-award > span:first-child { color: #b28b48; font-size: 31px; }
.notebook-award strong { color: #66735d; font-weight: 400; }
.notebook-paper-list { border-top: 1px solid #cdd3bf; }
.notebook-paper { display: grid; grid-template-columns: 153px 1fr; gap: 32px; padding: 24px 0 15px; border-bottom: 1px solid #dce0d0; scroll-margin-top: 28px; }
.paper-date { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; font: 11px/1.7 monospace; color: #66765b; }
.paper-date > span:first-child { font-size: 15px; color: #3e5747; }
.notebook-paper h3 { font-size: 17px; line-height: 1.55; font-weight: 500; letter-spacing: -.2px; }
.notebook-paper h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.notebook-paper h3 a > span { display: inline-block; color: #788a61; font-size: 14px; }
.paper-takeaway { font-size: 13px; color: #60715f; line-height: 1.85; margin-top: 8px; }
.paper-details { color: #60715f; margin-top: 3px; }
.paper-details summary { font-size: 11px; padding: 11px 0; }
.paper-details p { font-size: 12px; line-height: 1.9; margin-bottom: 7px; }
.paper-details strong { font-weight: 500; color: #334c43; }
.notebook-bio { display: grid; grid-template-columns: 225px 1fr; gap: 69px; align-items: center; padding: 26px 0 13px; }
.notebook-portrait { padding: 12px 12px 15px; border: 1px solid #dfe0d3; border-radius: 2px; box-shadow: 4px 5px 0 #eceadd; background: #fffdf6; transform: rotate(-3deg); }
.notebook-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 20%; border-radius: 2px; }
.notebook-portrait figcaption { font-size: 13px; padding: 14px 4px 0; }
.notebook-portrait figcaption > span:last-child { display: block; font-size: 10px; color: #6f7a63; padding-top: 3px; }
.notebook-bio-copy h2 { font-size: 29px; letter-spacing: -.8px; font-weight: 500; margin-top: 10px; }
.notebook-bio-copy p { font-size: 14px; color: #5f705f; line-height: 1.9; margin-top: 15px; }
.notebook-bio-copy a { text-decoration: underline; text-decoration-color: #bdc6b0; text-underline-offset: 3px; }
.notebook-off-duty { display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 20px; margin-top: 53px; padding: 26px 0; border-block: 1px dashed #c9ceba; }
.notebook-off-duty p { color: #5f705f; font-size: 15px; line-height: 1.9; margin: 0; }

/* 03 — a signal from Earth */
.concept--signal { background: #181d19; color: #d7dfc7; line-height: 1.6; }
.concept--signal ::selection { background: #d0e69e; color: #202720; }
.concept--signal .review-bar { color: #9da993; background: #111712; border-bottom: 1px solid #353f30; font-family: monospace; }
.concept--signal .personal-brand { font-family: monospace; font-size: 13px; letter-spacing: 1px; font-weight: 400; }
.signal-logo { color: #d8eca9; font-size: 21px; margin-right: 3px; letter-spacing: -2px; }
.concept--signal .concept-header nav { font-family: monospace; font-size: 11px; color: #a6b299; }
.signal-hero { display: grid; grid-template-columns: 1.14fr 1fr; gap: 85px; align-items: center; padding: 66px 0 76px; }
.signal-intro .small-label { color: #a5b593; font: 9px/1.8 monospace; letter-spacing: 1px; }
.signal-intro h1 { font-size: clamp(55px, 5.4vw, 77px); line-height: 1.04; font-weight: 500; letter-spacing: -3px; margin-top: 26px; }
.signal-intro h1 > span:not(.text-cursor) { color: #c9e69a; }
.text-cursor { color: #dae7be; font-weight: 300; }
.signal-intro > p:not(.small-label) { font-size: 14px; color: #a5b199; line-height: 1.9; margin-top: 27px; }
.signal-text-link { display: inline-block; color: #c5daa7; font: 11px/1.8 monospace; padding: 10px 0; margin-top: 23px; }
.signal-text-link:hover { color: #f0f8db; text-decoration: underline; text-underline-offset: 5px; }
.signal-text-link > span { margin-left: 14px; }
.radio-panel { border: 1px solid #535d45; padding: 17px; background: #252d23; border-radius: 8px; box-shadow: 8px 8px 0 #111710; transform: rotate(1deg); position: relative; }
.radio-panel::before, .radio-panel::after { content: "+"; position: absolute; bottom: 7px; color: #6a755e; font: 11px monospace; }
.radio-panel::before { left: 7px; }
.radio-panel::after { right: 7px; }
.radio-header { display: flex; align-items: center; justify-content: space-between; padding: 3px 2px 16px; gap: 18px; font: 8px monospace; letter-spacing: 1.3px; color: #9eac8d; }
.receiver-light { width: 5px; height: 5px; background: #d5e4a9; border-radius: 50%; box-shadow: 0 0 8px #d5e4a95e; }
.radio-screen { background: #171f16; border: 1px solid #3d4c31; border-radius: 4px; padding: 15px 14px 22px; box-shadow: inset 0 0 18px #111a0d; }
.radio-coordinates { display: flex; justify-content: space-between; gap: 10px; color: #8d9f77; font: 7px monospace; letter-spacing: 1px; }
.signal-wave { width: 100%; margin: 18px 0 16px; }
.transmission-text { font: 11px/1.8 monospace; text-align: center; color: #cdddab; min-height: 40px; display: flex; justify-content: center; align-items: center; }
.radio-controls { padding: 20px 3px 0; }
.radio-controls label { font: 10px monospace; display: flex; justify-content: space-between; color: #bdc9ad; }
.radio-controls output { color: #d3e7ad; }
.radio-controls input { width: 100%; height: 36px; display: block; margin: 7px 0 0; accent-color: #c8dfa0; cursor: ew-resize; }
.radio-range-labels { display: flex; justify-content: space-between; font: 7px monospace; letter-spacing: 1px; color: #8f9c80; }
.radio-hint { font: 8px/1.6 monospace; color: #9aa78a; margin: 18px 0 2px; text-align: center; }
.signal-section-head { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding-bottom: 23px; }
.signal-section-head h2 { font-size: 19px; font-weight: 400; letter-spacing: -.4px; }
.signal-section-head > span { font: 8px monospace; letter-spacing: 1px; color: #909d7f; }
.signal-record { display: grid; grid-template-columns: 49px 1fr 82px 28px; align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid #3b4731; }
.signal-record:hover { background: #222b1e; }
.record-id { font: 10px monospace; color: #929f7f; }
.signal-record h3 { font-size: 17px; letter-spacing: -.3px; font-weight: 400; }
.signal-record p { margin-top: 5px; font-size: 11px; color: #9ba989; }
.record-kind { font: 8px monospace; letter-spacing: 1px; color: #9caa8b; }
.record-arrow { color: #c5dba0; font-size: 23px; }
.signal-about { display: grid; grid-template-columns: .75fr 1.25fr auto; gap: 35px; align-items: center; border-block: 1px solid #3b4731; padding: 36px 0; margin-top: 36px; }
.signal-about-label { display: flex; gap: 13px; align-items: center; }
.signal-about-label > span { font-size: 24px; color: #c4d79d; }
.signal-about h2 { font-size: 15px; font-weight: 400; }
.signal-about p { font-size: 12px; line-height: 1.9; color: #a3b090; }
.signal-about .signal-text-link { margin-top: 0; white-space: nowrap; }
.concept--signal .concept-footer { color: #929f81; font-family: monospace; font-size: 9px; }

/* A neutral comparison page */
.concept-gallery { background: #f6f6f3; color: #243337; }
.gallery-wrap { width: min(1260px, calc(100% - 80px)); margin-inline: auto; }
.gallery-brand { padding: 33px 0 27px; border-bottom: 1px solid #daddd7; font-size: 15px; font-weight: 600; }
.gallery-brand span { font-size: 12px; color: #78817d; font-weight: 400; margin-left: 11px; }
.gallery-intro { padding: 52px 0 40px; }
.gallery-eyebrow { font: 10px/1.5 monospace; color: #69766d; letter-spacing: 1.5px; }
.gallery-intro h1 { font-size: clamp(33px, 3.8vw, 51px); line-height: 1.12; letter-spacing: -2px; font-weight: 500; margin-top: 17px; }
.gallery-intro p { color: #6b7770; font-size: 14px; line-height: 1.85; margin-top: 20px; }
.concept-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.concept-choice { background: #fff; border: 1px solid #dce1d9; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; }
.concept-thumbnail { display: block; aspect-ratio: 1.44; overflow: hidden; border-bottom: 1px solid #dce1d9; }
.concept-thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s; }
.concept-thumbnail:hover img { transform: scale(1.025); }
.thumbnail-night { background: #101f2a; }
.thumbnail-paper { background: #faf8ef; }
.thumbnail-signal { background: #181d19; }
.choice-body { padding: 23px; display: flex; flex-direction: column; flex: 1; }
.choice-number { color: #77827b; font: 9px/1.5 monospace; letter-spacing: .5px; }
.choice-body h2 { font-size: 23px; font-weight: 500; letter-spacing: -.7px; margin-top: 12px; }
.choice-body p { color: #69786f; font-size: 12px; line-height: 1.8; margin-top: 12px; }
.choice-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; margin-bottom: 20px; }
.choice-tags span { background: #f1f3ed; color: #677662; font-size: 9px; padding: 6px 8px; border-radius: 4px; }
.choice-link { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 16px; border-top: 1px solid #e3e7df; font-size: 12px; font-weight: 500; }
.choice-link span { font-size: 21px; }
.choice-link:hover { color: #3b755c; }
.gallery-note { font-size: 12px; color: #7d877f; padding: 26px 0 42px; line-height: 1.8; }

@media (min-width: 1550px) { .observatory-hero { padding-top: 83px; padding-bottom: 91px; } }
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .notebook-hero, .signal-hero { gap: 40px; }
  .notebook-copy h1 { font-size: 52px; }
  .greeting-star { font-size: 37px; }
  .space-project h3 { font-size: 16px; }
  .observatory-projects { gap: 22px; }
  .space-project + .space-project { padding-left: 20px; }
  .observatory-about { gap: 55px; }
  .gallery-wrap { width: calc(100% - 56px); }
  .concept-choices { gap: 16px; }
  .choice-body { padding: 19px; }
  .choice-body h2 { font-size: 20px; }
}
@media (max-width: 800px) {
  .concept-header { padding: 23px 0; }
  .concept-header nav { gap: 18px; font-size: 10px; }
  .observatory-hero { padding: 48px 0; gap: 12px; }
  .observatory-copy h1 { font-size: 57px; letter-spacing: -2px; }
  .observatory-copy > p:not(.small-label) { font-size: 12px; }
  .observatory-copy .small-label { font-size: 8px; }
  .plain-link { font-size: 10px; gap: 18px; }
  .orbital-window figcaption { padding: 0 10px; font-size: 8px; }
  .motion-toggle { font-size: 8px; }
  .space-project h3 br { display: none; }
  .space-project p { font-size: 10px; }
  .notebook-hero { gap: 28px; padding: 47px 0; }
  .notebook-copy h1 { font-size: 47px; }
  .greeting-star { display: none; }
  .notebook-copy > p { font-size: 14px; }
  .three-suns-card figcaption { flex-direction: column; align-items: start; padding-inline: 17px; }
  .remix-button { margin-top: 4px; }
  .project-note { padding: 18px; }
  .project-note h3 { font-size: 20px; }
  .note-projects { gap: 15px; }
  .notebook-now { grid-template-columns: 1.3fr 1fr; gap: 16px 28px; }
  .notebook-now > .notebook-kicker { grid-column: 1 / -1; }
  .notebook-section-title { align-items: start; }
  .notebook-section-title > a { max-width: 175px; }
  .notebook-build-grid { gap: 23px; }
  .notebook-build-feature { padding: 24px; }
  .notebook-build-grid h3 { font-size: 24px; }
  .notebook-sensing { padding: 24px 0; }
  .notebook-paper { grid-template-columns: 115px 1fr; gap: 23px; }
  .notebook-bio { grid-template-columns: 170px 1fr; gap: 39px; align-items: start; }
  .notebook-off-duty { grid-template-columns: 30px 1fr; gap: 19px; }
  .signal-hero { gap: 31px; padding: 47px 0 57px; }
  .signal-intro h1 { font-size: 59px; letter-spacing: -2px; }
  .signal-intro .small-label { font-size: 8px; }
  .signal-intro > p:not(.small-label) { font-size: 12px; }
  .radio-header { font-size: 6px; letter-spacing: .8px; }
  .radio-panel { padding: 13px; }
  .radio-screen { padding: 10px 8px 15px; }
  .radio-coordinates { font-size: 5px; }
  .transmission-text { font-size: 9px; }
  .signal-about { grid-template-columns: 1fr 1.5fr; gap: 25px; }
  .signal-about .signal-text-link { grid-column: 2; }
  .concept-choices { grid-template-columns: 1fr; gap: 25px; }
  .concept-choice { flex-direction: row; }
  .concept-thumbnail { width: 48%; aspect-ratio: auto; flex-shrink: 0; border-bottom: 0; border-right: 1px solid #dce1d9; }
  .concept-thumbnail img { object-fit: cover; object-position: center top; }
  .choice-body { padding: 22px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  .review-bar { padding: 9px 20px; font-size: 9px; }
  .concept-header { gap: 14px; padding: 23px 0 13px; }
  .personal-brand { font-size: 14px; gap: 7px; }
  .personal-brand > span[lang] { display: none; }
  .little-sun { font-size: 24px; }
  .concept-header nav { gap: 14px; font-size: 10px; }
  .concept-header nav a { min-height: 40px; display: flex; align-items: center; }
  .concept--observatory .concept-header nav a:nth-child(2) { display: none; }
  .observatory-hero { grid-template-columns: 1fr; padding: 40px 0 30px; gap: 18px; }
  .observatory-copy h1 { font-size: 65px; line-height: 1.05; letter-spacing: -2.5px; margin-top: 22px; }
  .observatory-copy .small-label { font-size: 9px; }
  .observatory-copy > p:not(.small-label) { font-size: 14px; line-height: 1.85; margin-top: 23px; }
  .desktop-break { display: none; }
  .plain-link { margin-top: 15px; font-size: 12px; }
  .orbital-window { width: min(100%, 340px); justify-self: center; }
  .orbital-window figcaption { font-size: 9px; padding: 0 10px; }
  .motion-toggle { font-size: 9px; }
  .observatory-sky { height: 1400px; }
  .section-line { flex-wrap: wrap; gap: 8px; padding-block: 22px; }
  .section-line h2 { font-size: 17px; }
  .section-line > span { font-size: 9px; }
  .observatory-projects { grid-template-columns: 1fr; gap: 0; }
  .space-project { display: grid; grid-template-columns: 37px 1fr; gap: 0 18px; padding: 19px 0; }
  .space-project + .space-project { border-left: 0; border-top: 1px solid #2b3d4b; padding-left: 0; }
  .space-project .project-symbol { grid-row: 1 / 4; margin-top: 3px; font-size: 30px; }
  .space-project small { font-size: 9px; }
  .space-project h3 { font-size: 17px; margin-top: 5px; }
  .space-project p { font-size: 11px; margin-top: 7px; }
  .observatory-about { grid-template-columns: 1fr; gap: 21px; margin-top: 26px; padding: 30px 0; }
  .observatory-about h2 { font-size: 25px; }
  .concept-footer { flex-direction: column; align-items: start; gap: 15px; padding: 25px 0; }
  .concept-footer > div { gap: 26px; }
  .concept--notebook .concept-header { flex-wrap: wrap; gap: 13px; padding: 21px 0 0; }
  .concept--notebook .personal-brand { font-size: 14px; }
  .notebook-avatar { width: 29px; height: 29px; }
  .concept--notebook .concept-header nav { justify-content: space-between; gap: 12px; font-size: 12px; width: 100%; border-bottom: 1px dashed #d3d7c6; }
  .notebook-hero { grid-template-columns: 1fr; gap: 37px; padding: 39px 0 38px; }
  .notebook-copy h1 { font-size: 53px; line-height: 1.13; letter-spacing: -2.8px; margin-top: 20px; }
  .greeting-star { display: inline-block; font-size: 34px; margin-left: 8px; vertical-align: 5px; }
  .notebook-copy > p { font-size: 16px; margin-top: 20px; }
  .current-note { font-size: 10px; }
  .notebook-link { font-size: 12px; margin-top: 13px; }
  .three-suns-card { width: calc(100% - 12px); max-width: 400px; justify-self: center; }
  .three-suns-card figcaption { flex-direction: row; align-items: center; padding: 0 13px 12px; font-size: 8px; }
  .remix-button { font-size: 9px; min-height: 44px; }
  .notebook-section-title { align-items: start; flex-direction: column; gap: 12px; padding: 10px 0 26px; }
  .notebook-section-title h2 { font-size: 28px; letter-spacing: -1px; }
  .notebook-section-title .hand-note { font-size: 12px; align-self: end; }
  .notebook-section-title > a { max-width: none; }
  .notebook-section { margin-top: 42px; }
  .notebook-section-intro { font-size: 14px; margin-top: -5px; }
  .notebook-now { grid-template-columns: 1fr; gap: 17px; }
  .note-projects { grid-template-columns: 1fr; gap: 20px; }
  .project-note { padding: 22px; }
  .project-note h3 { font-size: 25px; }
  .note-doodle { position: absolute; right: 22px; top: 34px; font-size: 35px; }
  .project-note h3 { margin-top: 22px; padding-right: 29px; }
  .project-note p { font-size: 14px; }
  .note-bottom { font-size: 11px; }
  .notebook-build-grid { grid-template-columns: 1fr; gap: 14px; }
  .notebook-build-feature { padding: 24px 22px 19px; }
  .notebook-sensing { padding: 24px 5px; }
  .notebook-paper { grid-template-columns: 1fr; gap: 10px; padding-top: 22px; }
  .paper-date { flex-direction: row; align-items: center; gap: 14px; }
  .paper-date > span:first-child { font-size: 12px; }
  .notebook-paper h3 { font-size: 18px; }
  .paper-takeaway { font-size: 14px; }
  .notebook-bio { grid-template-columns: 1fr; gap: 34px; padding-top: 10px; }
  .notebook-portrait { width: 200px; margin-left: 7px; }
  .notebook-bio-copy h2 { font-size: 28px; }
  .notebook-off-duty { grid-template-columns: 30px 1fr; gap: 13px; margin-top: 35px; padding: 22px 0; }
  .about-spark { font-size: 30px; }
  .concept--signal .concept-header nav { font-size: 10px; gap: 14px; }
  .concept--signal .personal-brand { font-size: 11px; letter-spacing: .5px; }
  .signal-logo { font-size: 19px; }
  .signal-hero { grid-template-columns: 1fr; gap: 37px; padding: 40px 0; }
  .signal-intro h1 { font-size: 67px; letter-spacing: -2.7px; line-height: 1.03; }
  .signal-intro .small-label { font-size: 8px; }
  .signal-intro > p:not(.small-label) { font-size: 14px; }
  .signal-text-link { font-size: 11px; margin-top: 18px; }
  .radio-panel { width: calc(100% - 9px); justify-self: center; padding: 15px; }
  .radio-header { font-size: 7px; }
  .radio-screen { padding: 13px 10px 17px; }
  .radio-coordinates { font-size: 6px; }
  .transmission-text { font-size: 10px; }
  .radio-hint { font-size: 8px; }
  .signal-section-head { gap: 15px; }
  .signal-section-head h2 { font-size: 17px; max-width: 200px; }
  .signal-section-head > span { font-size: 7px; white-space: nowrap; }
  .signal-record { grid-template-columns: 31px 1fr 18px; gap: 11px; padding: 22px 0; }
  .signal-record h3 { font-size: 16px; }
  .signal-record p { font-size: 11px; }
  .record-kind { display: none; }
  .record-arrow { font-size: 19px; }
  .record-id { font-size: 9px; }
  .signal-about { grid-template-columns: 1fr; gap: 19px; margin-top: 25px; padding: 26px 0; }
  .signal-about p { font-size: 13px; }
  .signal-about .signal-text-link { grid-column: 1; justify-self: start; }
  .gallery-wrap { width: calc(100% - 36px); }
  .gallery-brand { padding: 23px 0; font-size: 14px; }
  .gallery-brand span { display: block; margin: 7px 0 0; font-size: 11px; }
  .gallery-intro { padding: 36px 0 31px; }
  .gallery-intro h1 { font-size: 35px; letter-spacing: -1.4px; }
  .gallery-intro p { font-size: 13px; }
  .gallery-intro p br { display: none; }
  .gallery-eyebrow { font-size: 9px; }
  .concept-choice { display: flex; flex-direction: column; }
  .concept-thumbnail { width: 100%; aspect-ratio: 1.44; border-bottom: 1px solid #dce1d9; border-right: 0; }
  .choice-body { padding: 23px; }
  .choice-body h2 { font-size: 25px; }
  .choice-body p { font-size: 13px; }
}
@media (max-width: 360px) {
  .concept-header nav { gap: 11px; }
  .concept--signal .concept-header nav { gap: 10px; font-size: 9px; }
  .signal-intro h1 { font-size: 59px; }
  .notebook-copy h1 { font-size: 46px; }
  .greeting-star { font-size: 30px; margin-left: 5px; }
  .observatory-copy h1 { font-size: 58px; }
  .orbital-window figcaption { padding: 0; font-size: 8px; }
  .three-suns-card figcaption { flex-direction: column; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}