/* Hallmark · macrostructure: Split Studio · genre: modern-minimal · theme: studied-DNA (https://bops.bot/) · nav: edge-aligned · footer: Statement
 * Audience: media teams and creators. Purpose: explain a real software project in private testing.
 * User-requested parallax and scroll reveals override the default motion restraint.
 * Pre-emit critique: philosophy 4 · hierarchy 5 · execution 4 · specificity 5 · restraint 4 · variety 4. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; overflow-x: clip; }
body { margin: 0; font-family: var(--font-body); color: var(--color-ink); background: var(--color-paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--color-lime); color: var(--color-ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
button, a, summary { -webkit-tap-highlight-color: var(--color-clear); }
button, .button, .text-link, .nav a, .footer-bottom a { white-space: nowrap; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 6px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; min-width: 0; overflow-wrap: anywhere; }
h2 { font-size: var(--text-heading); font-weight: 800; letter-spacing: -.065em; line-height: .99; }
p { font-size: var(--text-body); line-height: 1.65; }
svg { display: block; width: 1.5rem; height: 1.5rem; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-defs { position: absolute; width: 0; height: 0; }
.container { width: min(100% - 2.5rem, 1256px); margin-inline: auto; }
.mono { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .045em; font-weight: 500; }
.skip-link { position: fixed; top: 1rem; left: 1rem; padding: 1rem; background: var(--color-lime); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; z-index: var(--z-sticky); }
.skip-link:focus { clip-path: none; width: auto; height: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 54px; padding: 1rem 1.625rem; background: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); font-weight: 600; font-size: .9375rem; line-height: 1.2; transition: transform var(--dur-short) var(--ease-out); }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(0) scale(.98); }
.button-small { min-height: 44px; padding: .8rem 1.2rem; font-size: .875rem; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 550; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }
.site-header { position: relative; z-index: var(--z-raised); }
.nav { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { display: flex; align-items: center; gap: .45rem; font-size: 1.625rem; letter-spacing: -.065em; font-weight: 800; white-space: nowrap; min-height: 44px; }
.brand-mark { background: var(--color-lime); width: 34px; height: 34px; display: grid; place-items: center; border-radius: .65rem; margin-right: .2rem; }
.brand-mark svg { width: 26px; height: 26px; }
.wordmark-dot { margin-left: -.4rem; }
.nav nav { display: flex; gap: 2rem; align-items: center; }
.nav-about { display: none; font-size: .9375rem; padding-block: .8rem; }
.nav-about:hover { text-decoration: underline; text-underline-offset: .3em; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 2rem; padding-bottom: 3rem; }
.hero-label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: -.02em; line-height: 1.5; margin-bottom: 1.75rem; color: var(--color-muted); }
.hero-label span { color: var(--color-ink); background: var(--color-lime); display: inline-block; padding: .3rem .45rem; border-radius: .25rem; }
.hero-copy { container-type: inline-size; }
h1 { font-size: clamp(3rem, 17cqw, 6.5rem); font-weight: 850; line-height: .98; letter-spacing: -.065em; }
.highlight { position: relative; isolation: isolate; white-space: nowrap; }
.highlight::after { content: ''; position: absolute; z-index: -1; background: var(--color-lime); height: .14em; left: .045em; right: -.04em; bottom: .045em; transform: rotate(-2.5deg); }
.period { color: inherit; }
.hero-description { margin-top: 2rem; max-width: 30rem; font-size: var(--text-lede); line-height: 1.55; color: var(--color-muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.125rem 1.5rem; margin-top: 1.75rem; }
.status { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--color-muted); }
.status-dot { display: inline-block; width: .5rem; height: .5rem; background: var(--color-focus); border-radius: 50%; flex-shrink: 0; }
.hero-scene { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 1 / 1.02; margin-top: 2.5rem; }
.scene-disc { position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%; background: var(--color-lime); top: 2%; left: 7%; }
.scene-orbit { position: absolute; width: 98%; aspect-ratio: 1; border: 1px solid var(--color-rule); border-radius: 50%; top: -2%; left: 3%; }
.scene-caption { position: absolute; left: 14%; top: 12%; font-size: clamp(.6rem, 2.05cqw, .8rem); }
.float-layer { position: absolute; }
.source-layer { top: 20%; right: -1%; width: 62%; z-index: 3; }
.source-card { display: flex; align-items: center; gap: 3cqw; background: var(--color-paper); border-radius: 2.5cqw; padding: 3cqw; box-shadow: 0 16px 40px -16px var(--color-shadow); transform: rotate(5deg); }
.file-icon { width: 8cqw; height: 8cqw; background: var(--color-paper-soft); border-radius: 2cqw; display: grid; place-items: center; }
.file-icon .icon { width: 4cqw; height: 4cqw; }
.source-card strong { display: block; font-size: 2.6cqw; font-weight: 650; }
.source-card div > span { display: block; color: var(--color-muted); font-size: 2.1cqw; margin-top: .5cqw; }
.tiny-check { width: 4cqw; height: 4cqw; display: grid; place-items: center; background: var(--color-lime); border-radius: 50%; margin-left: auto; }
.tiny-check .icon { width: 3cqw; height: 3cqw; }
.hero-connections { position: absolute; width: 100%; height: 100%; stroke: var(--color-ink); stroke-width: 1.3; stroke-dasharray: 4 5; opacity: .5; }
.hero-connections circle { stroke-dasharray: none; fill: var(--color-ink); }
.board-layer { width: 81%; left: 0; top: 37%; z-index: 2; }
.mini-board { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 3cqw; transform: rotate(-4deg); box-shadow: 0 28px 60px -22px var(--color-shadow); overflow: hidden; }
.mini-board-head { padding: 3cqw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-rule); gap: 1cqw; }
.mini-board-head > span:first-child { display: flex; align-items: center; gap: 1.5cqw; font-weight: 650; font-size: 2.65cqw; }
.mini-board-head .icon { width: 3cqw; height: 3cqw; }
.mini-board-head .mono { font-size: 1.65cqw; color: var(--color-muted); }
.board-topline { display: flex; justify-content: space-between; padding: 3.2cqw 3cqw 1.5cqw; font-size: 2.3cqw; font-weight: 600; }
.context-count { color: var(--color-muted); font-size: 1.9cqw; font-weight: 400; }
.source-row { display: flex; align-items: center; margin-inline: 3cqw; padding-block: 2.5cqw; gap: 2.2cqw; border-bottom: 1px solid var(--color-rule); }
.source-symbol { width: 6cqw; height: 6cqw; display: grid; place-items: center; background: var(--color-paper-soft); border-radius: 1.6cqw; }
.source-symbol .icon { width: 3cqw; height: 3cqw; }
.source-row strong { display: block; font-size: 2.5cqw; font-weight: 550; }
.source-row small { display: block; font-size: 2.1cqw; color: var(--color-muted); margin-top: .4cqw; }
.source-type { margin-left: auto; font-size: 1.7cqw; color: var(--color-muted); }
.board-bottom { display: flex; align-items: center; gap: 1.6cqw; background: var(--color-paper-soft); padding: 2.6cqw 3cqw; font-size: 2.3cqw; }
.mini-mark { background: var(--color-lime); color: var(--color-ink); border-radius: .4rem; width: 28px; height: 28px; display: inline-grid; place-items: center; flex-shrink: 0; }
.mini-mark svg { width: 22px; height: 22px; }
.board-bottom .mini-mark { width: 4.5cqw; height: 4.5cqw; border-radius: 1cqw; }
.board-bottom .mini-mark svg { width: 3.5cqw; height: 3.5cqw; }
.answer-layer { width: 48%; right: -2%; top: 66%; z-index: 3; }
.answer-card { background: var(--color-ink); color: var(--color-paper); border-radius: 2.6cqw; padding: 3.5cqw; transform: rotate(5deg); box-shadow: 0 18px 50px -15px var(--color-shadow); }
.answer-label { display: flex; align-items: center; gap: 1cqw; font: 500 1.75cqw var(--font-mono); color: var(--color-lime); }
.answer-label .icon { width: 2.8cqw; height: 2.8cqw; }
.answer-card strong { display: block; font-size: 3.7cqw; letter-spacing: -.04em; line-height: 1.2; margin-top: 2.5cqw; font-weight: 600; }
.answer-footer { margin-top: 2.5cqw; }
.line-sample { width: 90%; height: .8cqw; background: var(--color-dark-line); display: block; margin-bottom: 1cqw; border-radius: 2px; }
.line-sample.short { width: 60%; }
.answer-sources { display: block; font-size: 1.9cqw; color: var(--color-dark-muted); margin-top: 2cqw; }
.scene-note { position: absolute; bottom: -1.5rem; left: 5%; font-size: .75rem; color: var(--color-muted); }
.context-strip { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.strip-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; font-size: .875rem; }
.strip-inner > span { color: var(--color-muted); }
.strip-inner > div { display: flex; gap: 1rem; font-weight: 550; }
.strip-inner b { color: var(--color-rule); font-weight: 400; }
.strip-end { display: none; }
.workspace-section { background: var(--color-paper-soft); padding-block: var(--space-section); }
.workspace-grid { display: grid; gap: 3rem; }
.workspace-copy > p { max-width: 27rem; margin-top: 1.5rem; font-size: var(--text-lede); color: var(--color-muted); }
.tool-options { display: flex; flex-direction: column; margin-top: 2rem; }
.tool-option { text-align: left; background: var(--color-clear); border: 0; border-bottom: 1px solid var(--color-rule); width: 100%; padding: 1.25rem 0; display: flex; gap: 1rem; align-items: center; white-space: normal; }
.tool-option strong { display: block; font-size: 1.0625rem; letter-spacing: -.02em; font-weight: 650; }
.tool-option small { display: block; color: var(--color-muted); font-size: .875rem; line-height: 1.45; margin-top: .25rem; }
.tool-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--color-paper); flex-shrink: 0; }
.tool-icon .icon { width: 21px; height: 21px; }
.tool-option.is-active .tool-icon { background: var(--color-lime); }
.tool-option:hover .tool-icon { background: var(--color-lime-soft); }
.option-indicator { font-size: 1.25rem; margin-left: auto; flex-shrink: 0; transition: transform var(--dur-short) var(--ease-out); }
.tool-option.is-active .option-indicator { transform: rotate(45deg); }
.workspace-demo { width: 100%; min-width: 0; border: 1px solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper); align-self: center; overflow: hidden; }
.demo-toolbar { padding: 1.25rem; border-bottom: 1px solid var(--color-rule); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.demo-breadcrumb { display: flex; align-items: center; gap: .65rem; font-size: .875rem; font-weight: 550; }
.demo-breadcrumb .icon { width: 18px; height: 18px; }
.demo-label { display: none; color: var(--color-muted); font-size: .625rem; }
.demo-panels { container-type: inline-size; }
.demo-panel { position: relative; height: 490px; overflow: clip; background-image: radial-gradient(var(--color-rule) .85px, var(--color-clear) .85px); background-size: 16px 16px; }
.demo-panel[hidden] { display: none; }
.canvas-label { position: absolute; top: 1.75rem; left: 1.5rem; color: var(--color-muted); font-size: .6875rem; }
.canvas-card { position: absolute; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-md); box-shadow: 0 14px 28px -18px var(--color-shadow); }
.note-card { left: 6%; top: 80px; width: 63%; padding: 1.25rem; transform: rotate(-5deg); z-index: 2; }
.canvas-card-header { display: flex; gap: .6rem; align-items: center; font-size: .8125rem; color: var(--color-muted); padding-bottom: 1rem; }
.canvas-card-header .icon { width: 16px; height: 16px; }
.note-card h3 { font-size: 1.375rem; font-weight: 650; letter-spacing: -.045em; line-height: 1.2; }
.note-card p { font-size: .8125rem; color: var(--color-muted); margin-block: .75rem 1rem; }
.tag { display: inline-flex; padding: .4rem .6rem; background: var(--color-paper-soft); border-radius: .4rem; font-size: .6875rem; color: var(--color-muted); }
.reference-card { width: 53%; right: 5%; top: 230px; transform: rotate(6deg); z-index: 3; overflow: hidden; }
.video-tile { height: 112px; background: var(--color-lime); position: relative; display: grid; place-items: center; }
.video-tile > svg { background: var(--color-ink); color: var(--color-lime); stroke: currentColor; fill: currentColor; width: 40px; height: 40px; border-radius: 50%; padding: 10px; z-index: 2; }
.video-lines { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.video-lines i { display: block; width: 2px; height: 20%; background: var(--color-ink); opacity: .3; }
.video-lines i:nth-child(2n) { height: 38%; }.video-lines i:nth-child(3n) { height: 60%; }.video-lines i:nth-child(5n) { height: 78%; }
.reference-copy { padding: 1rem; }
.reference-copy strong { display: block; font-size: .875rem; font-weight: 550; }
.reference-copy span { display: block; font-size: .75rem; color: var(--color-muted); margin-top: .25rem; }
.canvas-link { position: absolute; left: 5%; bottom: 35px; display: flex; align-items: center; gap: .65rem; padding: 1rem; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); font-size: .8125rem; transform: rotate(-3deg); }
.canvas-link .icon { width: 16px; height: 16px; }.canvas-link .tag { display: none; }
.demo-footnote { display: flex; align-items: center; gap: .6rem; padding: 1rem; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: .75rem; line-height: 1.5; }
.connected-sources { position: absolute; top: 85px; left: 6%; right: 6%; display: flex; justify-content: space-between; gap: .5rem; }
.connected-sources span { display: flex; gap: .35rem; align-items: center; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: .5rem; padding: .65rem; font-size: .75rem; }
.connected-sources .icon { width: 14px; height: 14px; }
.connection-tree { position: absolute; top: 127px; left: 19%; right: 19%; height: 48px; border: 1px solid var(--color-focus); border-top: 0; border-radius: 0 0 1rem 1rem; }
.connection-tree::after { content: ''; position: absolute; width: 1px; height: 34px; background: var(--color-focus); left: 50%; top: 48px; }
.context-answer { position: absolute; top: 210px; left: 7%; width: 86%; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 1rem; padding: 1.2rem; }
.context-answer > div { display: flex; align-items: center; gap: .65rem; font-size: .875rem; }
.context-answer p { font-size: .8125rem; line-height: 1.55; color: var(--color-muted); margin-block: .75rem; }
.context-answer .sample-question { font-weight: 550; color: var(--color-ink); }
.saved-note { position: absolute; top: 86px; left: 7%; width: 86%; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 1rem; padding: 1.4rem; transform: rotate(-3deg); }
.saved-note-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 2rem; }
.saved-note-top > span:first-child { display: flex; gap: .4rem; align-items: center; font-size: .75rem; }
.saved-note-top .icon { width: 16px; height: 16px; color: var(--color-focus); }
.saved-note-top .mono { font-size: .625rem; color: var(--color-muted); }
.saved-note h3 { font-size: 1.7rem; letter-spacing: -.04em; line-height: 1.1; }
.saved-note p { margin-top: 1rem; font-size: .875rem; color: var(--color-muted); }
.note-divider { height: 1px; background: var(--color-rule); margin-block: 1.4rem; }
.saved-thread { position: absolute; bottom: 18px; width: 100%; display: flex; justify-content: center; align-items: center; gap: .5rem; font-size: .75rem; color: var(--color-muted); }.saved-thread .icon { width: 18px; height: 18px; }
.context-section { background: var(--color-dark); color: var(--color-paper); padding-block: 3rem 5rem; }
.context-layout { display: grid; gap: 2rem; }
.context-copy h2 span { color: var(--color-lime); }
.context-copy p { color: var(--color-dark-muted); max-width: 28rem; margin-top: 1.5rem; font-size: var(--text-lede); }
.context-copy .text-link { margin-top: 1.5rem; color: var(--color-lime); }
.context-visual { position: relative; width: 100%; aspect-ratio: 1.17; }
.network-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--color-dark-line); stroke-width: 1; }
.network-lines path { stroke: var(--color-dark-muted); stroke-dasharray: 5 7; }
.network-hub { position: absolute; top: 36%; left: 36%; width: 25%; aspect-ratio: 1; background: var(--color-lime); color: var(--color-ink); border-radius: 28%; display: grid; place-items: center; transform: rotate(-9deg); }
.network-hub svg { width: 65%; height: 65%; }
.network-item { position: absolute; display: flex; align-items: center; gap: .6rem; background: var(--color-dark-raised); border: 1px solid var(--color-dark-line); border-radius: .7rem; padding: .8rem; font-size: .75rem; }
.network-item .icon { width: 18px; height: 18px; color: var(--color-lime); }
.network-one { left: 5%; top: 14%; }.network-two { right: 0; top: 18%; }.network-three { left: 0; top: 65%; }.network-four { right: 0; top: 73%; }
.network-caption { position: absolute; bottom: 0; width: 100%; text-align: center; font-size: .625rem; color: var(--color-dark-muted); }
.process-section { padding-block: var(--space-section); }
.process-heading { display: grid; gap: 1.5rem; }
.process-heading h2 { font-size: clamp(2.7rem, 5vw, 4.6rem); }
.process-heading > p { color: var(--color-muted); max-width: 24rem; font-size: var(--text-lede); }
.process-track { display: grid; gap: 2.5rem; margin-top: 3rem; }
.process-step { position: relative; border-top: 1px solid var(--color-rule); padding-top: 1.5rem; }
.step-number { display: block; font-family: var(--font-mono); color: var(--color-muted); font-size: .75rem; margin-bottom: 1.5rem; }
.process-step h3 { font-size: 1.5rem; letter-spacing: -.045em; font-weight: 650; }
.process-step p { margin-top: .75rem; color: var(--color-muted); max-width: 22rem; }
.studio-section { padding-block: var(--space-section); background: var(--color-paper-soft); }
.studio-grid { display: grid; gap: 3rem; }
.studio-status { background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: 2rem; }
.status-heading { display: flex; align-items: center; gap: .75rem; }.status-heading .mono { color: var(--color-muted); font-size: .6875rem; }
.version { font-size: clamp(7rem, 14vw, 11rem); font-weight: 800; letter-spacing: -.09em; line-height: 1; margin-top: 2rem; }.version span { color: var(--color-focus); }
.version-description { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; margin-top: 1rem; }
.version-divider { height: 1px; background: var(--color-rule); margin-block: 2rem 1rem; }
.studio-status dl { margin: 0; }.studio-status dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .65rem; font-size: .8125rem; }.studio-status dt { color: var(--color-muted); }.studio-status dd { margin: 0; text-align: right; }
.studio-copy h2 { font-size: clamp(2.8rem, 5vw, 4.8rem); }
.studio-copy p { color: var(--color-muted); max-width: 31rem; margin-top: 1.5rem; font-size: 1.0625rem; }
.studio-signature { display: block; font-size: .875rem; font-weight: 550; margin-top: 2rem; }
.questions { padding-block: var(--space-section); display: grid; gap: 2rem; }
.questions h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
details { border-bottom: 1px solid var(--color-rule); }details:first-child { border-top: 1px solid var(--color-rule); }
summary { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 550; }
summary::-webkit-details-marker { display: none; }summary > span { font-size: 1.4rem; line-height: 1; transition: transform var(--dur-short) var(--ease-out); }details[open] summary > span { transform: rotate(45deg); }details p { color: var(--color-muted); padding-bottom: 1.5rem; max-width: 38rem; }
.footer { background: var(--color-lime); padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: 5.5rem; }
.footer-main { display: flex; align-items: flex-start; flex-direction: column; gap: 2rem; padding-bottom: 4rem; }
.footer h2 { font-size: clamp(4rem, 9vw, 8rem); letter-spacing: -.07em; }.footer-main p { margin-top: 1.5rem; max-width: 22rem; }.footer-flow { display: inline-block; }
.footer-action { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }.footer-action .mono { font-size: .6875rem; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-ink); padding-top: 1.5rem; font-size: .8125rem; }.footer-bottom .wordmark { font-size: 1.35rem; }.footer-bottom .wordmark svg { width: 27px; height: 27px; }.footer-bottom > a:last-child { min-height: 44px; display: inline-flex; align-items: center; }
.motion-toggle { position: fixed; bottom: 1rem; right: 1rem; z-index: var(--z-sticky); display: flex; align-items: center; gap: .55rem; min-width: 44px; min-height: 44px; justify-content: center; padding: .6rem .8rem; border: 1px solid var(--color-rule); background: var(--color-paper); border-radius: var(--radius-pill); box-shadow: 0 4px 16px -8px var(--color-shadow); font-size: .6875rem; }
.motion-toggle:disabled { cursor: not-allowed; color: var(--color-muted); background: var(--color-paper-soft); }
.tool-option:active .tool-icon, .motion-toggle:active:not(:disabled) { transform: scale(.97); }
.motion-icon { display: flex; align-items: center; gap: 2px; height: 13px; }.motion-icon i { display: block; width: 2px; height: 6px; background: var(--color-ink); }.motion-icon i:nth-child(2) { height: 12px; }.motion-icon i:nth-child(3) { height: 9px; }.motion-label { display: none; }
.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js:not(.reduce-motion) .hero-copy { animation: hero-in 900ms var(--ease-out) both; }.js:not(.reduce-motion) .hero-scene { animation: hero-in 1100ms 120ms var(--ease-out) both; }
.js .demo-panel:not([hidden]) { animation: panel-in 300ms var(--ease-out) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panel-in { from { opacity: .1; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.reduce-motion { scroll-behavior: auto; }.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition-duration: 0s !important; }.reduce-motion .reveal { opacity: 1; transform: none; }.reduce-motion [data-parallax] { transform: none !important; }
@media (min-width: 40rem) {
  .container { width: min(100% - 5rem, 1256px); }
  .nav-about { display: block; }
  .hero-scene { max-width: 650px; margin-inline: auto; }
  .hero-actions { gap: 1.25rem; }
  .demo-panel { height: 520px; }
  .demo-label { display: block; }
  .note-card { width: 54%; padding: 1.6rem; left: 7%; top: 95px; }.note-card h3 { font-size: 1.6rem; }.note-card p { font-size: .9375rem; }
  .reference-card { width: 44%; top: 240px; }.video-tile { height: 125px; }.canvas-link .tag { display: inline-flex; }
  .connected-sources span { font-size: .9375rem; padding: .8rem 1rem; }.connected-sources .icon { width: 18px; height: 18px; }.connection-tree { top: 133px; }
  .context-answer { padding: 1.75rem; }.context-answer p { font-size: .9375rem; }.context-answer > div { font-size: 1rem; }
  .saved-note { padding: 2rem; }.saved-note h3 { font-size: 2rem; }.saved-note p { font-size: 1rem; }.saved-thread { bottom: 40px; font-size: .875rem; }
  .network-item { font-size: .9375rem; padding: 1.125rem; }.network-item .icon { width: 22px; height: 22px; }.network-caption { font-size: .75rem; }
  .process-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 4rem; }.process-step h3 { font-size: 1.35rem; }.process-step p { font-size: .9375rem; }
  .studio-status { padding: 2.5rem; }
  .footer-main { flex-direction: row; align-items: center; justify-content: space-between; }.footer-action { align-items: flex-end; }.footer-main p { max-width: none; }
  .motion-label { display: inline; }
}
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 1rem; padding-block: 3rem 5rem; min-height: 720px; }
  .hero-copy { padding-bottom: 1rem; }.hero-label { margin-bottom: 2rem; }.hero-description { margin-top: 2rem; max-width: 27rem; }.hero-actions { margin-top: 2rem; }.hero-scene { margin-top: 0; width: calc(100% + 1.5rem); margin-left: -.5rem; }
  .strip-inner { padding-block: 1.65rem; }.strip-end { display: inline; }
  .workspace-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 5rem; }.workspace-demo { position: sticky; top: 2rem; }.demo-panel { height: 540px; }
  .context-section { padding-block: 5rem; }.context-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 5rem; align-items: center; }.context-copy h2 { font-size: clamp(3.2rem, 5.3vw, 5rem); }.context-copy p { font-size: 1.125rem; }
  .process-heading { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 6rem; }.process-track { gap: 4rem; }.process-step h3 { font-size: 1.55rem; }.process-step p { font-size: 1rem; }
  .studio-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 7rem; align-items: center; }.studio-status { transform: rotate(-2deg); }.studio-status.is-visible { transform: rotate(-2deg); }
  .questions { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 6rem; }
}
@media (min-width: 90rem) { .hero { padding-block: 4rem 6rem; }.hero-scene { width: calc(100% + 3rem); margin-left: -1rem; }.hero-description { max-width: 29rem; } }
@media (max-width: 359px) { .nav .button-small { font-size: .75rem; padding-inline: .9rem; }.wordmark { font-size: 1.4rem; }.brand-mark { width: 28px; height: 28px; }.hero-label { font-size: .65rem; }h1 { font-size: 3rem; }.tool-option { gap: .65rem; }.tool-option strong { font-size: .9375rem; }.tool-option small { font-size: .8125rem; }.connected-sources span { padding: .5rem; font-size: .6875rem; }.studio-status { padding: 1.4rem; }.demo-panel { height: 470px; }.note-card { padding: 1rem; }.note-card h3 { font-size: 1.2rem; }.note-card p { font-size: .75rem; }.saved-note { padding: 1rem; }.saved-thread { font-size: .6875rem; }.context-answer { top: 196px; }.saved-note h3 { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition-duration: 0s !important; }.js .reveal { opacity: 1; transform: none; }[data-parallax] { transform: none !important; } }

.contact-email { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; text-underline-offset: .25em; }
.contact-email:hover { text-decoration: underline; }