/* ============================================================================ #experience — integrated from _test-engineering-flow.html. EVERY rule below is scoped under #experience (generated by _integrate.mjs) so nothing leaks into the rest of the page; standalone body/html rules were rebased onto #experience so the section looks identical to the prototype. :root tokens + the body-appended .ide-run / #nvBuild widgets are kept global. ============================================================================ */ #experience { position: relative; z-index: 0; /* Full-bleed: the site's .section class makes sections display:flex with ~48px padding + max-width, which boxes the experience into ~1700px with whitespace on both sides. The panels are designed full-viewport (the standalone lived on ), so neutralise the .section layout here. */ display: block !important; width: 100%; max-width: none !important; padding: 0 !important; /* The site stamps every .section with transform + will-change, which would make #experience a CONTAINING BLOCK for the act's position:fixed layers (editor, washes, binary, product) and clip them off-screen. Force it off — the section runs its own pinned scroll choreography. */ transform: none !important; will-change: auto !important; } #experience .exp-content { width: 100%; } .ide-run, .ide-run *, #nvBuild, #nvBuild * { margin: 0; padding: 0; box-sizing: border-box; } #experience *, #experience *::before, #experience *::after { margin: 0; padding: 0; box-sizing: border-box; }:root { --paper: 250, 249, 240; --paper-deep: 244, 241, 226; --paper-warm: 247, 240, 224; --ink: 14, 12, 12; --ink-soft: 46, 38, 34; --ink-mute: 118, 102, 90; /* Monochrome: former burgundy accent neutralised to warm grays. */ --burgundy: 120, 112, 104; --burgundy-soft: 150, 142, 134; --rule: 210, 198, 174; --serif: 'Source Serif 4', 'Georgia', serif; --display:'Syne', 'Helvetica Neue', system-ui, sans-serif; --lux: 'Cormorant Garamond', 'Bodoni Moda', 'Georgia', serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; --pad-x: clamp(28px, 4.5vw, 92px); --chrome-h: 64px; --gutter-v: clamp(120px, 18vh, 220px); }#experience, #experience { min-height: 100%; overflow-x: clip; max-width: 100vw; }#experience { background: rgb(var(--paper)); }#experience { margin: 0; cursor: auto; overflow-x: clip; font-family: var(--serif); color: rgb(var(--ink)); background-color: rgb(var(--paper)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1; }#experience .nav, #experience .nav-progress, #experience .scroll-progress, #experience .nav-toggle, #experience .nav-overlay, #experience .grain-overlay, #experience .cursor-dot, #experience .cursor-trail, #experience .cursor-follower, #experience .ink-transition-canvas, #experience .ink-grain-overlay, #experience .section-experience-scroll-story { display: none !important; }#experience ::selection { background: rgba(var(--burgundy), 0.20); color: rgb(var(--ink)); }#experience .exp-chrome { position: fixed; top: 0; left: 0; right: 0; height: var(--chrome-h); z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad-x); color: rgb(var(--ink)); mix-blend-mode: difference; pointer-events: none; }#experience .exp-chrome > * { mix-blend-mode: normal; }#experience .exp-chrome-mark { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; color: rgb(var(--ink)); }#experience .exp-chrome-counter { justify-self: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--ink-soft)); display: inline-flex; align-items: center; gap: 12px; }#experience .exp-chrome-counter b { font-weight: 700; color: rgb(var(--ink)); }#experience .exp-chrome-counter span.sep { color: rgb(var(--ink-mute)); }#experience .exp-chrome-menu { justify-self: end; display: inline-flex; flex-direction: column; gap: 5px; padding: 10px 6px; }#experience .exp-chrome-menu span { display: block; width: 22px; height: 1.5px; background: rgb(var(--ink)); }#experience .exp-vlabel { position: fixed; top: 50%; left: 16px; transform: translateY(-50%) rotate(-90deg); transform-origin: 0 50%; font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgb(180, 174, 162); z-index: 60; white-space: nowrap; pointer-events: none; mix-blend-mode: difference; }#experience .exp-vlabel b { color: rgb(200, 194, 180); font-weight: 500; margin-right: 14px; }#experience .exp-ink-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 50; pointer-events: none; }#experience .exp-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--burgundy)); margin-bottom: 22px; }#experience .exp-eyebrow .dot { display: inline-block; width: 6px; height: 6px; background: rgb(var(--burgundy)); border-radius: 50%; margin: 0 12px 1.5px 4px; vertical-align: middle; }#experience .exp-display { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5.2vw, 78px); line-height: 0.86; letter-spacing: -0.035em; color: rgb(var(--ink)); margin: 0; text-transform: uppercase; }#experience .exp-display .exp-line { display: block; overflow: hidden; padding-top: 0.08em; padding-bottom: 0.04em; margin-top: -0.08em; margin-bottom: -0.04em; }#experience .exp-display .exp-line-inner { display: block; white-space: nowrap; transform: translateY(110%); opacity: 0; will-change: transform, opacity; }#experience .exp-display .exp-line + .exp-line { margin-top: -0.04em; }#experience .exp-body-text { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.25vw, 21px); line-height: 1.46; color: rgb(var(--ink-soft)); max-width: 62ch; }#experience .exp-body-text .exp-line { display: block; overflow: hidden; padding-top: 0.18em; padding-bottom: 0.06em; margin-top: -0.18em; margin-bottom: -0.06em; }#experience .exp-body-text .exp-line-inner { display: block; transform: translateY(110%); opacity: 0; will-change: transform, opacity; }#experience .exp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }#experience .exp-stat { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid rgba(var(--ink), 0.18); padding: 4px 0 4px 18px; overflow: hidden; }#experience .exp-stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5.2vw, 76px); line-height: 0.9; letter-spacing: -0.04em; color: rgb(var(--ink)); transform: translateY(110%); opacity: 0; transition: transform 720ms cubic-bezier(0.2, 0.7, 0.18, 1) 60ms, opacity 720ms cubic-bezier(0.2, 0.7, 0.18, 1) 60ms; will-change: transform, opacity; }#experience .exp-stat-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--ink-mute)); transform: translateY(110%); opacity: 0; transition: transform 720ms cubic-bezier(0.2, 0.7, 0.18, 1) 160ms, opacity 720ms cubic-bezier(0.2, 0.7, 0.18, 1) 160ms; will-change: transform, opacity; }#experience .exp-pin[data-revealed="1"] .exp-stat-num, #experience .exp-pin[data-revealed="1"] .exp-stat-label { transform: translateY(0); opacity: 1; }#experience .exp-pin .exp-display .exp-line-inner, #experience .exp-pin .exp-body-text .exp-line-inner { transition: transform 1000ms cubic-bezier(0.2, 0.7, 0.18, 1), opacity 1000ms cubic-bezier(0.2, 0.7, 0.18, 1); }#experience .exp-pin[data-revealed="1"] .exp-display .exp-line-inner, #experience .exp-pin[data-revealed="1"] .exp-body-text .exp-line-inner { transform: translateY(0); opacity: 1; }#experience .exp-pin .exp-display .exp-line:nth-of-type(1) .exp-line-inner { transition-delay: 60ms; }#experience .exp-pin .exp-display .exp-line:nth-of-type(2) .exp-line-inner { transition-delay: 200ms; }#experience .exp-pin .exp-body-text .exp-line:nth-of-type(1) .exp-line-inner { transition-delay: 360ms; }#experience .exp-pin .exp-body-text .exp-line:nth-of-type(2) .exp-line-inner { transition-delay: 460ms; }#experience .exp-pin .exp-body-text .exp-line:nth-of-type(3) .exp-line-inner { transition-delay: 540ms; }#experience .exp-pin .exp-body-text .exp-line:nth-of-type(4) .exp-line-inner { transition-delay: 620ms; }#experience .exp-open { position: relative; width: 100%; background: rgb(var(--paper)); }#experience .exp-open-track { position: relative; width: 100%; height: 460vh; height: 460dvh; }#experience .exp-open-stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100dvh; display: grid; place-items: center; /* Full-bleed: the atmosphere layer fills the whole viewport width. Symmetric padding so the headline centers on the TRUE viewport center (the fixed chrome overlays it harmlessly). */ padding: clamp(40px, 6vh, 80px) var(--pad-x); overflow: hidden; }#experience .exp-open-atmos { position: absolute; inset: -10%; z-index: 0; pointer-events: none; opacity: 1; transform-origin: center; will-change: transform; overflow: hidden; background: linear-gradient(180deg, rgb(var(--paper)) 0%, rgb(var(--paper-deep)) 100%); }#experience .exp-open-atmos::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.5) 0%, transparent 55%); }#experience .exp-open-wipe { position: absolute; inset: 0; z-index: 6; pointer-events: none; transform: translateY(101%); will-change: transform; background: radial-gradient(80% 60% at 50% 0%, rgba(40, 28, 24, 0.6) 0%, transparent 60%), linear-gradient(180deg, #17130f 0%, #100d0b 100%); }#experience .exp-open-block { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(16px, 2vh, 26px); max-width: min(88%, 1120px); margin: 0 auto; }#experience .exp-open-kick { font-family: var(--mono); font-size: clamp(11px, 0.85vw, 13px); letter-spacing: 0.3em; text-transform: uppercase; color: rgb(var(--burgundy)); }#experience .exp-open-headline { font-family: 'Syne', var(--display); font-style: normal; font-weight: 700; font-size: clamp(38px, 4.4vw, 78px); line-height: 1.08; letter-spacing: -0.018em; color: rgb(var(--ink)); margin: 0; max-width: none; }#experience .exp-open-headline .become { display: inline-block; position: relative; font-family: 'La Belle Aurore', cursive; font-style: normal; font-weight: 400; font-size: 1.18em; letter-spacing: 0; color: rgb(var(--ink)); padding: 0 0.06em; }#experience .exp-open-headline .q { font-family: 'La Belle Aurore', cursive; font-size: 1.18em; color: rgb(var(--ink)); font-weight: 400; }#experience .exp-open-headline em { font-style: italic; font-weight: 500; color: rgb(var(--ink-soft)); }#experience .exp-open-num { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; justify-content: center; font-family: 'Syne', var(--display); font-weight: 800; font-size: min(116vh, 1180px); line-height: 1; letter-spacing: -0.03em; color: rgba(14, 12, 12, 0.07); font-variant-numeric: tabular-nums; opacity: 0; z-index: 1; pointer-events: none; will-change: opacity, transform; }#experience .exp-open-num .oc-reel { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }#experience .exp-open-num .oc-col { display: block; will-change: transform; }#experience .exp-open-num .oc-d { display: block; height: 1em; line-height: 1; text-align: center; }#experience .exp-open-ystamp { position: absolute; left: 0; right: 0; bottom: clamp(36px, 6.5vh, 80px); text-align: center; z-index: 3; opacity: 0; pointer-events: none; will-change: opacity; }#experience .exp-open-ystamp .oy-year { font-family: var(--mono); font-weight: 500; font-size: clamp(11px, 0.85vw, 13px); letter-spacing: 0.28em; line-height: 1; text-transform: uppercase; color: rgb(var(--ink-soft)); font-variant-numeric: tabular-nums; }#experience .exp-open-ystamp .oy-cap { display: none; }#experience .exp-open-headline { perspective: 1000px; }#experience .exp-open-headline .oh-line { display: block; overflow: visible; padding-top: 0.02em; padding-bottom: 0.04em; transform-style: preserve-3d; }#experience .exp-open-headline .oh-inner { display: inline-block; transform-origin: 50% 100%; backface-visibility: hidden; transform: translateY(60%) rotateX(-82deg); opacity: 0; will-change: transform, opacity; }#experience .exp-open-lede { /* absolute ABOVE the headline as an intro kicker, so it doesn't shift the headline's dead-centered (540) position. */ position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: clamp(16px, 2.6vh, 36px); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.45; letter-spacing: 0.005em; color: rgb(var(--ink-soft)); max-width: 38ch; margin-left: auto; margin-right: auto; }#experience .exp-open-lede em { font-style: italic; color: rgb(var(--ink)); font-weight: 500; }#experience .exp-open-lede .ol-line { display: block; overflow: hidden; padding-bottom: 0.05em; }#experience .exp-open-lede .ol-inner { display: inline-block; transform: translateY(110%); opacity: 0; will-change: transform, opacity; }#experience .exp-pin { position: relative; width: 100%; }#experience .exp-pin-track { position: relative; width: 100%; height: 460vh; height: 460dvh; }#experience .exp-pin-stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }#experience .exp-apple-stage { display: block; overflow: hidden; /* Bg is carried by .exp-pin (which extends beyond the sticky stage), so the stage itself stays transparent. This keeps the section colour visible even during the brief un-pin / re-pin moment between chapters. */ background-color: transparent; color: rgb(var(--ch-ink, 14 12 12)); }#experience .exp-pin[data-chapter="software"], #experience .exp-pin[data-chapter="web"] { --ch-bg: 248 245 236; --ch-ink: 14 12 12; --ch-glow: 236 232 222; --ch-shade: 74 66 58; --ch-accent: 116 108 100; --ch-prev: 244 240 230; --ch-next: 16 17 20; }#experience .exp-pin[data-chapter="mobile"] { --ch-bg: 16 17 20; --ch-ink: 223 226 231; --ch-glow: 52 55 62; --ch-shade: 0 0 0; --ch-accent: 172 175 182; --ch-prev: 248 245 236; --ch-next: 12 12 14; }#experience .exp-pin[data-chapter="backend"] { --ch-bg: 12 12 14; --ch-ink: 216 219 224; --ch-glow: 48 50 56; --ch-shade: 0 0 0; --ch-accent: 168 171 178; --ch-prev: 16 17 20; --ch-next: 34 35 39; }#experience .exp-pin[data-chapter="systems"] { --ch-bg: 34 35 39; --ch-ink: 223 226 231; --ch-glow: 62 65 72; --ch-shade: 0 0 0; --ch-accent: 176 179 186; --ch-prev: 12 12 14; --ch-next: 244 241 232; }#experience .exp-pin[data-chapter="product"] { --ch-bg: 244 241 232; --ch-ink: 14 12 12; --ch-glow: 236 232 222; --ch-shade: 74 66 58; --ch-accent: 116 108 100; --ch-prev: 240 238 230; --ch-next: 252 250 243; }#experience .exp-pin[data-chapter="design"] { --ch-bg: 252 250 243; --ch-ink: 14 12 12; --ch-glow: 240 237 228; --ch-shade: 70 62 54; --ch-accent: 120 112 104; --ch-prev: 244 241 232; --ch-next: 26 25 27; }#experience .exp-pin[data-chapter="art"] { --ch-bg: 26 25 27; --ch-ink: 228 224 230; --ch-glow: 58 56 60; --ch-shade: 0 0 0; --ch-accent: 178 175 182; --ch-prev: 252 250 243; --ch-next: 250 249 240; }#experience .exp-pin { background-color: transparent; position: relative; z-index: 1; }#experience .exp-act[data-act="engineering"] { --ch-bg: 244 236 218; --ch-next: 248 242 226; }#experience .exp-act[data-act="experience"] { --ch-bg: 244 236 218; --ch-next: 240 220 188; }#experience .exp-act { background-color: transparent; position: relative; z-index: 1; }#experience .exp-open { --ch-bg: 250 249 240; --ch-next: 244 236 218; background-color: rgb(var(--ch-bg, 250 249 240)); position: relative; z-index: 1; }#experience .exp-close { --ch-bg: 250 249 240; background: transparent; position: relative; z-index: 1; }#experience .exp-apple-stage .exp-apple-text { color: rgb(var(--ch-ink, 14 12 12)); }#experience .exp-apple-stage .exp-apple-eyebrow { color: rgb(var(--ch-accent, 116 108 100)); }#experience .exp-apple-stage .exp-apple-headline { color: rgb(var(--ch-ink, 14 12 12)); }#experience .exp-apple-stage .exp-apple-subhead { color: rgb(var(--ch-ink, 14 12 12) / 0.78); }#experience .exp-apple-stage .exp-apple-link { color: rgb(var(--ch-accent, 116 108 100)); }#experience .exp-pin[data-chapter="mobile"] .exp-anno, #experience .exp-pin[data-chapter="backend"] .exp-anno, #experience .exp-pin[data-chapter="systems"] .exp-anno, #experience .exp-pin[data-chapter="art"] .exp-anno { background: rgba(20, 14, 10, 0.72); color: rgb(var(--ch-ink, 240 230 210)); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); }#experience .exp-pin[data-chapter="mobile"] .exp-anno::before, #experience .exp-pin[data-chapter="backend"] .exp-anno::before, #experience .exp-pin[data-chapter="systems"] .exp-anno::before, #experience .exp-pin[data-chapter="art"] .exp-anno::before { background: rgb(var(--ch-ink, 240 230 210)); }#experience .exp-apple-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(64rem, 84vw); display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.6vh, 22px); text-align: center; will-change: transform; z-index: 2; }#experience .exp-apple-eyebrow { font-family: var(--mono); font-size: clamp(10.5px, 0.85vw, 12px); font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgb(var(--burgundy)); opacity: 0; will-change: opacity; }#experience .exp-apple-headline { font-family: var(--display); font-style: normal; font-weight: 700; font-variation-settings: 'wght' 720; font-size: clamp(42px, 5.8vw, 96px); line-height: 1.0; letter-spacing: -0.035em; color: rgb(var(--ink)); margin: 0; text-wrap: balance; max-width: 15ch; opacity: 0; transform: translateY(24px); will-change: transform, opacity; }#experience .exp-apple-subhead { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.5vw, 22px); line-height: 1.42; color: rgb(var(--ink-soft)); opacity: 0; transform: translateY(22px); margin: 0; max-width: 38rem; will-change: transform, opacity; }#experience .exp-apple-link { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.2vw, 19px); font-weight: 500; color: rgb(var(--burgundy)); text-decoration: none; margin-top: 8px; display: inline-flex; align-items: center; gap: 0.25em; opacity: 0; transform: translateY(18px); transition: transform 240ms ease; will-change: transform, opacity; }#experience .exp-apple-link:hover .exp-apple-link__arrow { transform: translateX(4px); }#experience .exp-apple-link__arrow { display: inline-block; font-size: 1.18em; line-height: 1; margin-left: 0.18em; transition: transform 220ms ease; }#experience .exp-apple-spec { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2vh, 26px); margin-top: clamp(10px, 1.6vh, 20px); opacity: 0; transform: translateY(10px); will-change: transform, opacity; }#experience .exp-apple-spec__stack { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 42rem; }#experience .exp-apple-spec__chip { font-family: var(--mono); font-size: clamp(10px, 0.8vw, 12px); letter-spacing: 0.04em; padding: 6px 13px; border: 1px solid rgb(var(--ch-ink, 14 12 12) / 0.20); border-radius: 999px; color: rgb(var(--ch-ink, 14 12 12) / 0.74); white-space: nowrap; }#experience .exp-apple-spec__stats { display: flex; gap: clamp(30px, 4vw, 60px); }#experience .exp-apple-spec__stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }#experience .exp-apple-spec__stat b { font-family: var(--display); font-weight: 700; font-variation-settings: 'wght' 700; font-size: clamp(26px, 2.6vw, 42px); line-height: 1; letter-spacing: -0.025em; color: rgb(var(--ch-ink, 14 12 12)); }#experience .exp-apple-spec__stat span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--ch-ink, 14 12 12) / 0.5); }#experience .exp-apple-device-wrap { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; perspective: 1600px; opacity: 0; transform: translate(calc(-50% + 1200px), -50%); will-change: transform, opacity; z-index: 3; }#experience .exp-apple-device-wrap::before { content: ""; position: absolute; left: 50%; top: 48%; width: 132%; height: 150%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(var(--ch-glow, 255 240 218) / 0.42) 0%, rgba(var(--ch-glow, 255 240 218) / 0.16) 38%, rgba(var(--ch-glow, 255 240 218) / 0) 70%); z-index: -2; pointer-events: none; }#experience .exp-apple-device-wrap::after { content: ""; position: absolute; left: 50%; bottom: -7%; width: 84%; height: 84px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(20, 12, 6, 0.30) 0%, rgba(20, 12, 6, 0.12) 46%, rgba(20, 12, 6, 0) 72%); filter: blur(7px); z-index: -1; pointer-events: none; }#experience .exp-apple-device-wrap .exp-device-plate { opacity: 1; transform: none; transition: none; animation: none; }#experience .exp-apple-device-wrap .exp-device-shell { animation: none; }#experience .exp-apple-device-wrap .exp-device-glare { display: none; }#experience .exp-apple-device-wrap .exp-device-plate--browser .exp-device-frame { width: min(66vw, 1040px); background: #fdfcf7; border-radius: 14px 14px 12px 12px; box-shadow: 0 60px 130px -32px rgba(40, 25, 15, 0.32), 0 18px 44px -12px rgba(40, 25, 15, 0.14), 0 0 0 0.5px rgba(40, 25, 15, 0.08); }#experience .exp-apple-device-wrap .exp-device-chrome { background: #f5f0e2; border-bottom: 1px solid rgba(40, 25, 15, 0.08); padding: 12px 18px; }#experience .exp-apple-device-wrap .exp-device-url { background: #ffffff; box-shadow: inset 0 0 0 0.5px rgba(40, 25, 15, 0.08); }#experience .exp-apple-device-wrap .exp-device-plate--phone .exp-device-frame { width: min(23vw, 340px); background: #1c1814; border-radius: 44px; padding: 9px; box-shadow: 0 50px 110px -28px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(255, 255, 255, 0.05), 0 0 0 5px rgba(0, 0, 0, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.06); }#experience .exp-apple-device-wrap .exp-device-plate--phone .exp-device-viewport { border-radius: 36px; }#experience .exp-apple-device-wrap .exp-phone-notch { top: 17px; width: 84px; height: 26px; }#experience .exp-apple-device-wrap .exp-phone-home { bottom: 18px; width: 96px; }#experience .exp-apple-device-wrap .exp-device-plate--photo .exp-device-frame { width: min(34vw, 500px); background: #fffdf6; padding: 22px 22px 58px; box-shadow: 0 44px 100px -26px rgba(40, 25, 15, 0.28), 0 0 0 0.5px rgba(40, 25, 15, 0.06); }#experience .exp-pin-frame { position: relative; width: 100%; max-width: 1640px; margin: 0 auto; padding: clamp(20px, 3vh, 48px) var(--pad-x) clamp(40px, 6vh, 80px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 3.4vw, 72px); row-gap: clamp(14px, 2vh, 28px); align-content: stretch; }#experience .exp-pin-eyebrow-row { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--ink-mute)); }#experience .exp-pin-eyebrow-row .exp-pin-tag { color: rgb(var(--burgundy)); display: inline-flex; align-items: center; gap: 10px; }#experience .exp-pin-eyebrow-row .exp-pin-tag .dot { display: inline-block; width: 6px; height: 6px; background: rgb(var(--burgundy)); border-radius: 50%; }#experience .exp-pin-eyebrow-row .exp-pin-page b { color: rgb(var(--ink-soft)); font-weight: 500; }#experience .exp-pin-eyebrow-row .exp-pin-page span.sep { color: rgb(var(--ink-mute)); padding: 0 4px; }#experience .exp-pin-head { grid-column: 1; grid-row: 2; align-self: end; }#experience .exp-pin-text { grid-column: 1; grid-row: 3; align-self: end; display: flex; flex-direction: column; gap: clamp(16px, 1.8vh, 24px); padding-top: clamp(8px, 2vh, 24px); }#experience .exp-pin-aside { position: relative; grid-column: 2; grid-row: 2 / span 2; align-self: stretch; min-height: clamp(300px, 56vh, 600px); display: flex; align-items: center; justify-content: center; perspective: 1600px; }#experience .exp-device-plate { position: relative; margin: 0 auto; transform-origin: 60% 70%; transform-style: preserve-3d; will-change: transform, opacity; opacity: 0; transform: translate3d(120px, 48px, 0) scale(0.92) rotateY(-8deg); transition: opacity 1100ms cubic-bezier(0.2, 0.7, 0.18, 1) 260ms, transform 1400ms cubic-bezier(0.18, 0.7, 0.18, 1) 220ms; }#experience .exp-pin[data-revealed="1"] .exp-device-plate { opacity: var(--plate-fade, 1); transform: translate3d(0, var(--plate-dy, 0px), 0) scale(1) rotateY(0deg); }#experience .exp-device-shell { display: block; position: relative; animation: exp-device-float 8s ease-in-out infinite; will-change: transform; }#experience .exp-device-plate--phone .exp-device-shell { animation-duration: 7s; }#experience .exp-device-plate--photo .exp-device-shell { animation-duration: 9.5s; } @keyframes exp-device-float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -14px, 0) rotate(0.4deg); } }#experience .exp-device-frame { position: relative; overflow: hidden; background: #fcfaf3; isolation: isolate; }#experience .exp-device-plate--browser .exp-device-frame { width: clamp(340px, 36vw, 580px); border-radius: 14px 14px 10px 10px; box-shadow: 0 56px 110px -32px rgba(40, 25, 15, 0.42), 0 16px 40px -10px rgba(40, 25, 15, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 0 0 1px rgba(40, 25, 15, 0.08); }#experience .exp-device-chrome { display: flex; align-items: center; gap: 8px; padding: 11px 16px 10px; background: linear-gradient(to bottom, #f4ecd9, #e9dfc4); border-bottom: 1px solid rgba(40, 25, 15, 0.10); position: relative; z-index: 3; }#experience .exp-device-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.14); flex: 0 0 auto; }#experience .exp-device-dot:nth-child(1) { background: #ccc6ba; }#experience .exp-device-dot:nth-child(2) { background: #bdb7ab; }#experience .exp-device-dot:nth-child(3) { background: #aea89c; }#experience .exp-device-chrome-arrows { display: flex; gap: 4px; margin-left: 10px; color: rgba(40, 25, 15, 0.36); font-size: 14px; line-height: 1; }#experience .exp-device-chrome-arrows span { width: 16px; text-align: center; }#experience .exp-device-url { margin: 0 auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.01em; color: rgba(40, 25, 15, 0.62); background: rgba(255, 255, 255, 0.78); box-shadow: inset 0 0 0 1px rgba(40, 25, 15, 0.08); padding: 4px 14px 4px 10px; border-radius: 7px; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; }#experience .exp-device-url::before { content: ""; display: inline-block; width: 7px; height: 6px; border: 1.3px solid currentColor; border-bottom: none; border-radius: 2px 2px 0 0; margin-right: 1px; opacity: 0.7; }#experience .exp-device-plate--phone .exp-device-frame { width: clamp(186px, 18vw, 256px); background: linear-gradient(155deg, #221a13 0%, #100c08 60%); border-radius: 42px; padding: 11px; box-shadow: 0 54px 110px -28px rgba(40, 25, 15, 0.5), 0 0 0 1.5px rgba(40, 25, 15, 0.32), 0 0 0 6px rgba(20, 14, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); overflow: visible; }#experience .exp-device-plate--phone .exp-device-viewport { border-radius: 32px; }#experience .exp-phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; background: #0c0a07; border-radius: 14px; z-index: 6; }#experience .exp-phone-notch::after { content: ""; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #33353a, #0c0a07 70%); }#experience .exp-phone-home { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 96px; height: 4px; border-radius: 4px; background: rgba(250, 249, 240, 0.55); z-index: 6; }#experience .exp-device-plate--photo .exp-device-frame { width: clamp(260px, 26vw, 380px); background: #fbf2dc; padding: 22px 22px 58px; border-radius: 4px; box-shadow: 0 50px 110px -30px rgba(50, 30, 20, 0.5), 0 0 0 1px rgba(50, 30, 20, 0.1), inset 0 2px 6px rgba(255, 255, 255, 0.6); overflow: visible; transform: rotate(-1.6deg); }#experience .exp-device-plate--photo .exp-device-viewport { aspect-ratio: 4 / 5; background: #efe4cd; border-radius: 2px; position: relative; overflow: hidden; }#experience .exp-device-plate--photo .exp-device-caption { font-family: var(--serif); font-style: italic; font-size: 12px; color: rgb(var(--burgundy)); text-align: center; margin-top: 14px; }#experience .exp-device-viewport { position: relative; overflow: hidden; background: linear-gradient(135deg, #fdf7e6 0%, #f0e7cf 100%); }#experience .exp-device-plate--browser .exp-device-viewport { aspect-ratio: 16 / 10; }#experience .exp-device-plate--phone .exp-device-viewport { aspect-ratio: 9 / 19.5; background: linear-gradient(170deg, #15110d 0%, #242220 100%); }#experience .exp-device-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }#experience .exp-device-stats { margin-top: auto; display: flex; border-top: 1px solid rgb(var(--ch-ink, 14 12 12) / 0.16); }#experience .exp-device-stats__s { flex: 1; padding: clamp(9px, 3.2%, 18px) 5%; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid rgb(var(--ch-ink, 14 12 12) / 0.10); }#experience .exp-device-stats__s:first-child { border-left: none; }#experience .exp-device-stats__s b { font-family: var(--display); font-weight: 700; font-variation-settings: 'wght' 700; font-size: clamp(16px, 2vw, 26px); line-height: 1; letter-spacing: -0.02em; color: rgb(var(--ch-ink, 14 12 12)); }#experience .exp-device-stats__s span { font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--ch-ink, 14 12 12) / 0.5); }#experience .exp-scr-info { --info-ink: 26, 20, 15; position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(165deg, #fdfaf1 0%, #f1ead7 100%); color: rgb(var(--info-ink)); padding: clamp(16px, 5.5%, 36px) clamp(16px, 5.5%, 36px) 0; }#experience .exp-scr-info__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: clamp(10px, 2.6%, 20px); }#experience .exp-scr-info__head b { font-family: var(--display); font-weight: 700; font-variation-settings: 'wght' 700; font-size: clamp(15px, 1.7vw, 23px); letter-spacing: -0.015em; }#experience .exp-scr-info__head span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--info-ink) / 0.45); }#experience .exp-scr-info__rows { display: flex; flex-direction: column; flex: 1; }#experience .exp-scr-info__viewport { position: relative; flex: 1; overflow: hidden; }#experience .exp-scr-info__doc { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; padding-bottom: clamp(22px, 7%, 52px); will-change: transform; }#experience .exp-scr-info__sec { padding-top: clamp(14px, 3%, 26px); }#experience .exp-scr-info__sec:first-child { padding-top: 0; }#experience .exp-scr-info__sec-h { font-family: var(--mono); font-size: clamp(8px, 0.8vw, 10px); letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--info-ink) / 0.4); padding-bottom: clamp(4px, 1%, 8px); }#experience .rich-chips { display: flex; flex-wrap: wrap; gap: 6px; }#experience .rich-chips span { font-family: var(--mono); font-size: clamp(8px, 0.78vw, 10px); letter-spacing: 0.04em; padding: 4px 10px; border: 1px solid rgb(var(--info-ink) / 0.22); border-radius: 999px; color: rgb(var(--info-ink) / 0.72); white-space: nowrap; }#experience .rich-stack { display: flex; flex-direction: column; gap: 6px; padding-top: clamp(12px, 2.4%, 20px); }#experience .rich-layer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(10px, 2%, 15px) clamp(12px, 2.2%, 17px); border: 1px solid rgb(var(--info-ink) / 0.13); border-radius: 7px; background: rgb(var(--info-ink) / 0.035); }#experience .rich-layer b { font-family: var(--mono); font-size: clamp(8.5px, 0.8vw, 10px); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--info-ink) / 0.55); }#experience .rich-layer em { font-family: var(--serif); font-style: normal; font-size: clamp(12px, 1.15vw, 15px); color: rgb(var(--info-ink) / 0.92); text-align: right; }#experience .rich-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.6%, 14px); padding-top: clamp(10px, 2%, 16px); }#experience .rich-card { border: 1px solid rgb(var(--info-ink) / 0.13); border-radius: 8px; padding: clamp(12px, 2.2%, 18px); }#experience .rich-card h5 { font-family: var(--mono); font-size: clamp(8px, 0.78vw, 9.5px); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--info-ink) / 0.45); margin: 0 0 10px; }#experience .rich-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }#experience .rich-card li { font-family: var(--serif); font-size: clamp(12px, 1.1vw, 15px); color: rgb(var(--info-ink) / 0.9); padding-left: 15px; position: relative; }#experience .rich-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border: 1px solid rgb(var(--info-ink) / 0.45); }#experience .rich-code { margin-top: clamp(10px, 2%, 16px); background: #15140f; border-radius: 8px; padding: clamp(14px, 2.6%, 22px); font-family: var(--mono); font-size: clamp(10px, 0.95vw, 13px); line-height: 1.8; color: rgba(214, 210, 198, 0.9); white-space: pre; overflow: hidden; }#experience .rich-code .c { color: rgba(214, 210, 198, 0.4); }#experience .rich-code .k { color: rgba(214, 210, 198, 0.62); }#experience .rich-code .s { color: rgba(214, 210, 198, 0.8); }#experience .rich-prose { display: flex; flex-direction: column; gap: clamp(11px, 1.9%, 17px); padding-top: clamp(14px, 2.6%, 22px); }#experience .rich-prose p { font-family: var(--serif); font-size: clamp(12.5px, 1.2vw, 16px); line-height: 1.66; color: rgb(var(--info-ink) / 0.86); max-width: 70ch; margin: 0; }#experience .rich-prose p.lead { font-family: var(--serif); font-size: clamp(15px, 1.55vw, 21px); line-height: 1.5; color: rgb(var(--info-ink)); font-style: italic; }#experience .rich-prose b { font-weight: 600; color: rgb(var(--info-ink)); }#experience .rich-prose .ph { font-family: var(--mono); font-size: clamp(8px, 0.78vw, 10px); letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--info-ink) / 0.4); padding-top: clamp(8px, 1.6%, 14px); }#experience .rich-list { display: flex; flex-direction: column; gap: clamp(10px, 1.8%, 16px); padding-top: clamp(14px, 2.6%, 22px); }#experience .rich-list .rli { font-family: var(--serif); font-size: clamp(12px, 1.12vw, 15px); line-height: 1.58; color: rgb(var(--info-ink) / 0.82); padding-left: 22px; position: relative; max-width: 72ch; margin: 0; }#experience .rich-list .rli::before { content: "\25CA"; position: absolute; left: 0; top: 0.04em; color: rgb(var(--burgundy)); font-size: 0.82em; }#experience .rich-more { display: flex; flex-direction: column; gap: clamp(10px, 1.8%, 16px); padding-top: clamp(10px, 1.8%, 16px); }#experience .rich-readmore { align-self: flex-start; margin-top: clamp(14px, 2.6%, 22px); font-family: var(--mono); font-size: clamp(9px, 0.85vw, 11px); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--burgundy)); background: none; border: none; border-bottom: 1px solid rgb(var(--burgundy) / 0.5); padding: 0 0 3px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }#experience .rich-readmore:hover { color: rgb(var(--info-ink)); border-color: rgb(var(--info-ink) / 0.6); }#experience .rich-readmore { display: none !important; }#experience .rich-list { border-top: 1px solid rgb(var(--info-ink) / 0.12); margin-top: clamp(16px, 3%, 26px); }#experience .rich-chips { gap: 7px; }#experience .rich-chips span { background: rgb(var(--info-ink) / 0.04); border-color: rgb(var(--info-ink) / 0.16); }#experience .rich-prose p.lead { font-size: clamp(15px, 1.6vw, 22px); line-height: 1.46; }#experience .rich-list .rli { line-height: 1.6; }#experience .rich-list .rli::before { top: 0.08em; }#experience .exp-scr-info__doc > .rich-chips, #experience .exp-scr-info__doc > .rich-prose, #experience .exp-scr-info__doc .rich-list > .rli, #experience .exp-scr-info__doc > .rich-readmore { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(.16,1,.3,1); }#experience .exp-scr-info__doc.content-in > .rich-chips, #experience .exp-scr-info__doc.content-in > .rich-prose, #experience .exp-scr-info__doc.content-in .rich-list > .rli, #experience .exp-scr-info__doc.content-in > .rich-readmore { opacity: 1; transform: none; }#experience .exp-scr-info__doc.content-in > .rich-chips { transition-delay: 0.04s; }#experience .exp-scr-info__doc.content-in > .rich-prose { transition-delay: 0.14s; }#experience .exp-scr-info__doc.content-in .rich-list > .rli:nth-of-type(1) { transition-delay: 0.26s; }#experience .exp-scr-info__doc.content-in .rich-list > .rli:nth-of-type(2) { transition-delay: 0.34s; }#experience .exp-scr-info__doc.content-in .rich-list > .rli:nth-of-type(3) { transition-delay: 0.42s; }#experience .exp-scr-info__doc.content-in > .rich-readmore { transition-delay: 0.54s; }#experience .exp-device-plate.diving .exp-device-chrome, #experience .exp-device-plate.diving .exp-phone-notch, #experience .exp-device-plate.diving .exp-phone-home, #experience .exp-device-plate.diving .exp-device-glare { opacity: 0; transition: opacity 0.45s ease; }#experience .exp-scr-term { background: #0b0d12; color: rgb(196 200 190); }#experience .exp-scr-term .exp-scr-info__head { border-bottom: 1px solid rgb(255 255 255 / 0.07); }#experience .exp-scr-term .exp-scr-info__head b { font-family: var(--mono); font-weight: 500; font-variation-settings: normal; font-size: clamp(11px, 1.2vw, 15px); letter-spacing: 0; color: rgb(135 205 165); }#experience .exp-scr-term .exp-scr-info__head span { color: rgb(255 255 255 / 0.32); }#experience .term-session, #experience .term-list { display: flex; flex-direction: column; gap: clamp(3px, 0.9%, 7px); }#experience .term-session .tl, #experience .term-list .tli, #experience .term-note { font-family: var(--mono); font-size: clamp(10px, 0.98vw, 13.5px); line-height: 1.72; color: rgb(176 182 170); margin: 0; white-space: pre-wrap; }#experience .term-session .tp { color: rgb(125 208 155); }#experience .term-session .tok { color: rgb(125 208 155); }#experience .term-session .tgt { color: rgb(150 188 214); }#experience .term-session .td { color: rgb(208 172 122); }#experience .term-session .tdim { color: rgb(110 114 106); }#experience .term-note { color: rgb(110 114 106); padding-top: clamp(16px, 3.4%, 28px); }#experience .term-list { padding-top: clamp(8px, 1.8%, 14px); }#experience .term-list .tli { color: rgb(200 204 194); padding-left: 18px; position: relative; }#experience .term-list .tli::before { content: "\2192"; position: absolute; left: 0; color: rgb(125 208 155); }#experience .exp-scr-info__doc .term-session > .tl, #experience .exp-scr-info__doc > .term-note, #experience .exp-scr-info__doc .term-list > .tli { opacity: 0; transform: translateY(9px); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.16,1,.3,1); }#experience .exp-scr-info__doc.content-in .term-session > .tl, #experience .exp-scr-info__doc.content-in > .term-note, #experience .exp-scr-info__doc.content-in .term-list > .tli { opacity: 1; transform: none; }#experience .content-in .term-session > .tl:nth-of-type(1) {transition-delay:.01s}#experience .content-in .term-session > .tl:nth-of-type(2) {transition-delay:.03s}#experience .content-in .term-session > .tl:nth-of-type(3) {transition-delay:.05s}#experience .content-in .term-session > .tl:nth-of-type(4) {transition-delay:.07s}#experience .content-in .term-session > .tl:nth-of-type(5) {transition-delay:.09s}#experience .content-in .term-session > .tl:nth-of-type(6) {transition-delay:.11s}#experience .content-in .term-session > .tl:nth-of-type(7) {transition-delay:.13s}#experience .content-in .term-session > .tl:nth-of-type(8) {transition-delay:.15s}#experience .content-in > .term-note {transition-delay:.17s}#experience .content-in .term-list > .tli:nth-of-type(1) {transition-delay:.19s}#experience .content-in .term-list > .tli:nth-of-type(2) {transition-delay:.21s}#experience .content-in .term-list > .tli:nth-of-type(3) {transition-delay:.23s}#experience .content-in .term-list > .tli:nth-of-type(4) {transition-delay:.25s}#experience .content-in .term-list > .tli:nth-of-type(5) {transition-delay:.27s}#experience .content-in .term-list > .tli:nth-of-type(6) {transition-delay:.29s}#experience .content-in .term-list > .tli:nth-of-type(7) {transition-delay:.31s}#experience .exp-essay { position: relative; z-index: 1; background: rgb(248 245 236); color: rgb(14 12 12); padding: clamp(100px, 20vh, 240px) clamp(24px, 5vw, 96px) clamp(120px, 22vh, 260px); overflow: hidden; }#experience .exp-essay-inner { position: relative; z-index: 2; max-width: clamp(680px, 72vw, 920px); margin: 0 auto; }#experience .exp-essay-lead { font-family: var(--serif); font-style: normal; font-weight: 500; font-size: clamp(25px, 2.7vw, 43px); line-height: 1.3; letter-spacing: -0.005em; color: rgb(14 12 12); margin: 0 0 clamp(40px, 4.2vw, 66px); text-wrap: balance; }#experience .exp-essay-lead::first-letter { float: left; font-family: var(--display); font-weight: 800; font-size: 4em; line-height: 0.7; margin: 0.05em 0.14em 0 0; color: rgb(14 12 12); }#experience .exp-essay-inner p:not(.exp-essay-lead) { font-family: var(--serif); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.85; color: rgb(14 12 12 / 0.84); margin: 0 0 clamp(22px, 2vw, 32px); text-wrap: pretty; hyphens: none; }#experience .exp-essay .ew { opacity: 0.16; will-change: opacity; }#experience .exp-essay-inner p:last-child { margin-bottom: 0; }#experience .exp-essay-figure { position: absolute; right: -3vw; bottom: -8vh; z-index: 1; pointer-events: none; font-family: var(--display); font-weight: 800; font-size: 30vw; line-height: 0.8; letter-spacing: -0.05em; color: rgb(14 12 12 / 0.030); } @media (max-width: 900px) {#experience .exp-essay { padding: clamp(80px,14vh,140px) clamp(24px,7vw,40px) clamp(90px,16vh,160px); }#experience .exp-essay-figure { font-size: 52vw; } }#experience .nv-essay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 clamp(24px, 6vw, 120px); }#experience .nv-essay > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.16,1,.3,1), color 0.6s ease; }#experience .nv-essay.is-in > * { opacity: 1; transform: none; }#experience .nv-essay-title { font-family: var(--display); font-weight: 700; font-variation-settings: 'wght' 720; font-size: clamp(54px, 8.2vw, 150px); line-height: 0.9; letter-spacing: -0.04em; color: rgb(232 228 218); }#experience .nv-essay.on-cream .nv-essay-title { color: rgb(14 12 12); }#experience .exp-scr-info__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: clamp(8px, 2.0%, 15px) 0; border-top: 1px solid rgb(var(--info-ink) / 0.10); }#experience .exp-scr-info__row .k { font-family: var(--mono); font-size: clamp(8.5px, 0.85vw, 10.5px); letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--info-ink) / 0.5); white-space: nowrap; }#experience .exp-scr-info__row .v { font-family: var(--serif); font-size: clamp(12px, 1.2vw, 16px); color: rgb(var(--info-ink) / 0.95); text-align: right; }#experience .exp-device-plate--phone .exp-scr-info { padding-top: clamp(46px, 10%, 64px); }#experience .exp-scr-info .exp-device-stats { border-top-color: rgb(var(--info-ink) / 0.18); }#experience .exp-scr-info .exp-device-stats__s { border-left-color: rgb(var(--info-ink) / 0.10); }#experience .exp-scr-info .exp-device-stats__s b { color: rgb(var(--info-ink)); }#experience .exp-scr-info .exp-device-stats__s span { color: rgb(var(--info-ink) / 0.5); }#experience .exp-device-glare { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; border-radius: inherit; }#experience .exp-device-glare::before { content: ""; position: absolute; top: -60%; left: -40%; width: 28%; height: 220%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.18) 45%, rgba(255, 255, 255, 0.24) 52%, transparent); transform: rotate(9deg) translateX(0); animation: exp-glare-sweep 11s ease-in-out infinite; animation-delay: 1.6s; } @keyframes exp-glare-sweep { 0%, 100% { transform: translateX(0) rotate(9deg); opacity: 0; } 6% { opacity: 1; } 34% { opacity: 1; } 44% { transform: translateX(720%) rotate(9deg); opacity: 0; } }#experience .exp-device-plate--phone .exp-device-glare::before { animation-duration: 13s; }#experience .exp-device-plate--photo .exp-device-glare { display: none; }#experience .exp-anno { display: none !important; /* annotation badges removed */ position: absolute; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; padding: 8px 14px; background: rgba(255, 251, 240, 0.94); color: rgb(36, 24, 14); border-radius: 100px; box-shadow: 0 14px 30px -10px rgba(40, 25, 15, 0.28), 0 0 0 1px rgba(40, 25, 15, 0.06); opacity: 0; transform: translate(0, 14px) scale(0.94); white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 8; will-change: transform, opacity; transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.18, 1) calc(var(--anno-i, 0) * 140ms + 760ms), transform 800ms cubic-bezier(0.2, 0.7, 0.18, 1) calc(var(--anno-i, 0) * 140ms + 760ms); }#experience .exp-pin[data-revealed="1"] .exp-anno { opacity: 1; transform: translate(0, 0) scale(1); }#experience .exp-anno__pip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #8e9088; margin-right: 8px; vertical-align: middle; animation: exp-anno-pip 2.2s ease-in-out infinite; } @keyframes exp-anno-pip { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }#experience .exp-anno::before { content: ""; position: absolute; top: 50%; left: -22px; width: 18px; height: 1px; background: currentColor; opacity: 0.35; }#experience .exp-anno[data-anchor="tl"]::before, #experience .exp-anno[data-anchor="br"]::before, #experience .exp-anno[data-anchor="mr"]::before { left: auto; right: -22px; }#experience .exp-anno[data-anchor="tl"] { top: 6%; left: -38%; }#experience .exp-anno[data-anchor="bl"] { bottom: 12%; left: -38%; }#experience .exp-anno[data-anchor="ml"] { top: 50%; left: -42%; transform-origin: 100% 50%; }#experience .exp-anno[data-anchor="tl"] { top: 6%; right: -8%; }#experience .exp-anno[data-anchor="br"] { bottom: 6%; right: -8%; }#experience .exp-anno[data-anchor="mr"] { top: 46%; right: -10%; }#experience .ui-row { display: flex; align-items: center; gap: 8px; }#experience .ui-stack { display: flex; flex-direction: column; }#experience .ui-bar { display: block; background: currentColor; opacity: 0.18; border-radius: 2px; height: 6px; }#experience .ui-bar-sm { height: 4px; }#experience .ui-bar-lg { height: 9px; }#experience .ui-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; border: 1px solid currentColor; }#experience .ui-pip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }#experience .exp-scr-web { background: #fdf7e6; padding: 22px 26px 18px; color: #1a140f; justify-content: space-between; }#experience .exp-scr-web__bar { display: flex; align-items: center; justify-content: space-between; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.01em; }#experience .exp-scr-web__bar nav { display: flex; gap: 16px; font-family: var(--mono); font-weight: 400; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }#experience .exp-scr-web__bar nav span.is-on { color: rgb(var(--burgundy)); opacity: 1; }#experience .exp-scr-web__hero { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.2vw, 44px); line-height: 0.9; letter-spacing: -0.03em; margin: 6px 0 0; text-transform: uppercase; }#experience .exp-scr-web__hero em { font-family: var(--serif); font-style: italic; font-weight: 500; color: rgb(var(--burgundy)); }#experience .exp-scr-web__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }#experience .exp-scr-web__card { background: rgba(40, 25, 15, 0.05); border-radius: 4px; aspect-ratio: 1 / 1.1; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; }#experience .exp-scr-web__card b { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; text-transform: none; }#experience .exp-scr-web__footer { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; border-top: 1px solid rgba(40, 25, 15, 0.16); padding-top: 8px; }#experience .exp-scr-mobile { background: #15110b; color: #f4e9cf; padding: 38px 12px 32px; justify-content: space-between; }#experience .exp-scr-mobile__head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255, 240, 210, 0.08); }#experience .exp-scr-mobile__avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #b5aa9d, #5a534e); }#experience .exp-scr-mobile__head-text { display: flex; flex-direction: column; line-height: 1.05; }#experience .exp-scr-mobile__head-name { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0.01em; }#experience .exp-scr-mobile__head-meta { font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 233, 207, 0.55); margin-top: 2px; }#experience .exp-scr-mobile__head-meta::before { content: ""; display: inline-block; width: 6px; height: 6px; background: #8e9088; border-radius: 50%; margin-right: 4px; vertical-align: middle; box-shadow: 0 0 6px #8e9088; }#experience .exp-scr-mobile__thread { display: flex; flex-direction: column; gap: 7px; padding: 12px 4px; overflow: hidden; }#experience .exp-scr-mobile__bubble { font-family: var(--serif); font-style: italic; font-size: 9.5px; line-height: 1.32; padding: 7px 10px; border-radius: 11px; max-width: 78%; }#experience .exp-scr-mobile__bubble--in { background: rgba(244, 233, 207, 0.08); align-self: flex-start; border-bottom-left-radius: 3px; }#experience .exp-scr-mobile__bubble--out { background: rgb(var(--burgundy)); color: #fbeede; align-self: flex-end; border-bottom-right-radius: 3px; }#experience .exp-scr-mobile__compose { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 100px; background: rgba(244, 233, 207, 0.08); font-family: var(--mono); font-size: 9px; color: rgba(244, 233, 207, 0.55); letter-spacing: 0.06em; }#experience .exp-scr-mobile__compose::after { content: ""; margin-left: auto; width: 14px; height: 14px; border-radius: 50%; background: rgb(var(--burgundy)); }#experience .exp-scr-backend { background: #0e0c08; color: #f1e5cb; font-family: var(--mono); padding: 18px 20px; justify-content: space-between; font-size: 10px; line-height: 1.55; }#experience .exp-scr-backend__head { display: flex; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(241, 229, 203, 0.55); border-bottom: 1px solid rgba(241, 229, 203, 0.12); padding-bottom: 10px; }#experience .exp-scr-backend__head em { color: #aeb2bc; font-style: normal; }#experience .exp-scr-backend__log { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }#experience .exp-scr-backend__log span.lvl { color: #aeb2bc; }#experience .exp-scr-backend__log span.lvl.warn { color: #b0aa9e; }#experience .exp-scr-backend__log span.lvl.err { color: #c6bcb6; }#experience .exp-scr-backend__log span.path { color: #b6b3bd; }#experience .exp-scr-backend__log span.dim { color: rgba(241, 229, 203, 0.4); }#experience .exp-scr-backend__row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: baseline; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }#experience .exp-scr-backend__row b { font-weight: 700; }#experience .exp-scr-backend__foot { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(241, 229, 203, 0.55); border-top: 1px solid rgba(241, 229, 203, 0.12); padding-top: 10px; }#experience .exp-scr-backend__foot em { color: #aeb2bc; font-style: normal; }#experience .exp-scr-systems { background: #fdf7e6; color: #1a140f; padding: 18px 22px 16px; justify-content: space-between; }#experience .exp-scr-systems__head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 15, 0.55); margin-bottom: 8px; }#experience .exp-scr-systems__head b { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.01em; text-transform: none; color: rgb(26, 20, 15); }#experience .exp-scr-systems__pipe { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px; margin-bottom: 12px; }#experience .exp-scr-systems__step { background: rgba(26, 20, 15, 0.05); padding: 6px 8px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; display: flex; flex-direction: column; gap: 4px; }#experience .exp-scr-systems__step::after { content: ""; width: 100%; height: 3px; background: linear-gradient(to right, #8e9088 60%, rgba(26, 20, 15, 0.12) 60%); border-radius: 2px; }#experience .exp-scr-systems__step:nth-child(3)::after { background: linear-gradient(to right, #8e9088 88%, rgba(26, 20, 15, 0.12) 88%); }#experience .exp-scr-systems__step:nth-child(4)::after { background: linear-gradient(to right, #b0aa9e 42%, rgba(26, 20, 15, 0.12) 42%); }#experience .exp-scr-systems__step b { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0; text-transform: none; color: rgb(26, 20, 15); }#experience .exp-scr-systems__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }#experience .exp-scr-systems__pkg { background: rgba(26, 20, 15, 0.04); padding: 8px 9px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }#experience .exp-scr-systems__pkg em { color: #8e9088; font-style: normal; }#experience .exp-scr-systems__foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 15, 0.55); border-top: 1px solid rgba(26, 20, 15, 0.16); padding-top: 8px; margin-top: 8px; }#experience .exp-scr-product { background: #fdf7e6; color: #1a140f; padding: 38px 12px 36px; gap: 8px; }#experience .exp-scr-product__head { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: -0.01em; text-transform: uppercase; padding: 2px 6px 8px; border-bottom: 1px solid rgba(26, 20, 15, 0.12); }#experience .exp-scr-product__head small { display: block; font-family: var(--mono); font-weight: 500; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 15, 0.55); margin-bottom: 2px; }#experience .exp-scr-product__list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; overflow: hidden; }#experience .exp-scr-product__row { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px; background: rgba(26, 20, 15, 0.04); border-radius: 8px; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: 0; }#experience .exp-scr-product__row em { font-family: var(--mono); font-style: normal; font-weight: 500; font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26, 20, 15, 0.55); }#experience .exp-scr-product__row b { font-family: var(--mono); font-weight: 700; font-size: 9px; letter-spacing: 0.14em; color: rgb(var(--burgundy)); }#experience .exp-scr-design { background: #fdf7e6; color: #1a140f; padding: 18px 22px; justify-content: space-between; }#experience .exp-scr-design__head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 15, 0.55); }#experience .exp-scr-design__head b { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.01em; text-transform: none; color: rgb(26, 20, 15); }#experience .exp-scr-design__spread { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin: 12px 0; }#experience .exp-scr-design__col-a { font-family: var(--display); font-weight: 800; font-size: 56px; line-height: 0.88; letter-spacing: -0.04em; text-transform: uppercase; }#experience .exp-scr-design__col-a em { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; color: rgb(var(--burgundy)); font-size: 14px; letter-spacing: -0.01em; text-transform: none; margin-top: 6px; line-height: 1.3; }#experience .exp-scr-design__col-b { display: flex; flex-direction: column; gap: 5px; font-family: var(--serif); font-style: italic; font-size: 9.5px; line-height: 1.45; }#experience .exp-scr-design__col-b span { display: block; }#experience .exp-scr-design__col-b em { font-family: var(--mono); font-style: normal; font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--burgundy)); display: block; margin-top: 2px; }#experience .exp-scr-design__rule { border-top: 1px solid rgba(26, 20, 15, 0.16); padding-top: 8px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 20, 15, 0.55); display: flex; justify-content: space-between; }#experience .exp-scr-art { position: absolute; inset: 0; background: radial-gradient(60% 40% at 70% 26%, rgba(255, 224, 188, 0.85), transparent 70%), radial-gradient(70% 50% at 28% 78%, rgba(88, 31, 46, 0.20), transparent 70%), linear-gradient(168deg, #e8e3d8 0%, #b3a99c 60%, #5d5752 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 18px; }#experience .exp-scr-art__strokes { position: absolute; inset: 14px; opacity: 0.62; }#experience .exp-scr-art__strokes svg { width: 100%; height: 100%; display: block; }#experience .exp-scr-art__strokes svg path { fill: none; stroke: rgba(40, 18, 14, 0.55); stroke-width: 1.2; stroke-linecap: round; }#experience .exp-scr-art__label { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 14px; color: #fbeede; text-shadow: 0 1px 2px rgba(20, 10, 6, 0.5); margin-top: auto; line-height: 1.18; }#experience .exp-scr-art__label small { font-family: var(--mono); font-style: normal; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(251, 238, 222, 0.78); display: block; margin-top: 6px; }#experience .exp-act { position: relative; width: 100%; }#experience .exp-act-track { position: relative; width: 100%; height: 240vh; height: 240dvh; }#experience .exp-act-stage { position: sticky; top: 0; width: 100%; height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--chrome-h) 1fr auto; align-items: center; justify-items: stretch; overflow: hidden; }#experience .exp-act-body { position: relative; display: grid; place-items: center; padding: 0 var(--pad-x); }#experience .exp-act-body { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(28px, 4vh, 56px); padding: 0 var(--pad-x); }#experience .exp-act-prelude { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgb(var(--burgundy)); margin-bottom: clamp(20px, 2.6vh, 36px); opacity: 0; transform: translateY(8px); will-change: opacity, transform; }#experience .exp-act-prelude-line { display: block; width: 48px; height: 1px; background: rgb(var(--burgundy)); opacity: 0.55; transform-origin: 0% 50%; transform: scaleX(0); will-change: transform; }#experience .exp-act-prelude-text { display: inline-block; }#experience .exp-act-watermark { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(96px, 15vw, 220px); line-height: 0.86; letter-spacing: -0.04em; color: rgb(var(--ink)); opacity: 1; white-space: nowrap; will-change: transform, opacity; }#experience .exp-act-watermark .ascend { display: inline-block; will-change: transform; } /* Perpetual horizontal drift after the word has been painted in. */ @keyframes exp-act-watermark-drift { 0%, 100% { transform: translate3d(-12px, 0, 0); } 50% { transform: translate3d( 12px, 0, 0); } }#experience .exp-act[data-revealed="1"] .exp-act-watermark .ascend { animation: exp-act-watermark-drift 24s ease-in-out infinite; }#experience .exp-act-subtitle .aw { display: inline-block; overflow: hidden; padding-bottom: 0.08em; margin-right: 0.22em; vertical-align: bottom; }#experience .exp-act-subtitle .awi { display: inline-block; transform: translateY(110%); opacity: 0; will-change: transform, opacity; }#experience .exp-act-subtitle { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.45vw, 24px); line-height: 1.42; color: rgb(var(--ink-soft)); max-width: 32ch; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity 1400ms cubic-bezier(0.22, 0.7, 0.16, 1) 320ms, transform 1400ms cubic-bezier(0.22, 0.7, 0.16, 1) 320ms; }#experience .exp-act[data-revealed="1"] .exp-act-watermark, #experience .exp-act[data-revealed="1"] .exp-act-subtitle { opacity: 1; transform: translateY(0); }#experience .exp-close { position: relative; min-height: 100dvh; padding: calc(var(--chrome-h) + var(--gutter-v)) var(--pad-x) var(--gutter-v); display: grid; place-items: center; text-align: center; max-width: 1640px; margin: 0 auto; }#experience .exp-close .exp-close-rule { width: 64px; height: 1px; background: rgba(var(--burgundy), 0.55); margin-bottom: 36px; opacity: 0; transform: scaleX(0.2); transform-origin: 0 50%; transition: opacity 700ms ease, transform 1000ms cubic-bezier(0.2,0.7,0.18,1); }#experience .exp-close .exp-close-quote { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 4.4vw, 64px); line-height: 1.18; letter-spacing: -0.015em; color: rgb(var(--ink)); max-width: 18ch; }#experience .exp-close .exp-close-quote .exp-line { display: block; overflow: hidden; padding: 0.06em 0; }#experience .exp-close .exp-close-quote .exp-line-inner { display: block; transform: translateY(110%); opacity: 0; transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.18, 1) calc(var(--i, 0) * 110ms), opacity 1100ms cubic-bezier(0.2, 0.7, 0.18, 1) calc(var(--i, 0) * 110ms); }#experience .exp-close .exp-close-attr { margin-top: 28px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.32em; text-transform: uppercase; color: rgb(var(--burgundy)); opacity: 0; transition: opacity 800ms ease 520ms; }#experience .exp-close .exp-close-meta { margin-top: clamp(48px, 10vh, 120px); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--ink-mute)); opacity: 0; transition: opacity 800ms ease 680ms; }#experience .exp-close[data-revealed="1"] .exp-close-rule { opacity: 1; transform: scaleX(1); }#experience .exp-close[data-revealed="1"] .exp-close-quote .exp-line-inner { opacity: 1; transform: translateY(0); }#experience .exp-close[data-revealed="1"] .exp-close-attr, #experience .exp-close[data-revealed="1"] .exp-close-meta { opacity: 1; }#experience::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.13; background-image: url("data:image/svg+xml;utf8,"); background-size: 260px 260px; mix-blend-mode: multiply; } /* Slow, almost-imperceptible grain drift so the texture feels alive without distracting from the type. */ @keyframes exp-grain-drift { 0%, 100% { background-position: 0 0; } 50% { background-position: -34px 22px; } }#experience::before { animation: exp-grain-drift 18s ease-in-out infinite; }#experience #nvim-act .nv-mobile { display: none; } @media (max-width: 880px) {:root { --pad-x: 20px; --gutter-v: 72px; }#experience .exp-chrome, #experience .exp-vlabel { display: none; }#experience .exp-open-track, #experience .exp-pin-track, #experience .exp-act-track { height: auto !important; min-height: 0 !important; }#experience .exp-open-stage, #experience .exp-pin-stage, #experience .exp-act-stage { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }#experience .exp-open-stage { display: block; padding: 104px var(--pad-x) 64px; }#experience .exp-open-block { max-width: 100%; align-items: flex-start; text-align: left; }#experience .exp-open-headline { font-size: clamp(33px, 8.6vw, 50px); line-height: 1.1; }#experience .exp-open-lede { text-align: left; }#experience .exp-open-num, #experience .exp-open-wipe, #experience .exp-open-atmos { display: none !important; }#experience .exp-open-headline .oh-line, #experience .exp-open-lede .ol-line { overflow: visible; }#experience .exp-apple-stage { display: block !important; overflow: visible !important; padding: 88px var(--pad-x) 80px; }#experience .exp-apple-text { position: static !important; transform: none !important; filter: none !important; width: 100% !important; max-width: 100% !important; opacity: 1 !important; align-items: flex-start; text-align: left; margin: 0 0 28px; gap: 14px; }#experience .exp-apple-headline { font-size: clamp(30px, 8vw, 46px) !important; }#experience .exp-anno { display: none !important; }#experience .exp-apple-device-wrap { position: static !important; width: 100% !important; max-width: 100% !important; perspective: none !important; display: block !important; margin: 0; }#experience .exp-apple-device-wrap::before, #experience .exp-apple-device-wrap::after { display: none !important; }#experience .exp-device-plate, #experience .exp-device-plate .exp-device-frame { transform: none !important; width: 100% !important; max-width: 100% !important; }#experience .exp-device-glare, #experience .exp-device-shell { animation: none !important; }#experience .exp-device-screen { width: 100% !important; height: auto !important; }#experience .exp-scr-info, #experience .exp-scr-term { height: auto !important; }#experience .exp-scr-info__viewport { overflow: visible !important; height: auto !important; flex: none !important; }#experience .exp-scr-info__doc { transform: none !important; }#experience .exp-scr-info__doc > *, #experience .exp-scr-info__doc .rich-list > .rli, #experience .exp-scr-term .tl, #experience .exp-scr-term .tli, #experience .exp-scr-term .term-note { opacity: 1 !important; transform: none !important; }#experience .rich-readmore { display: none !important; }#experience .exp-essay { padding: 72px var(--pad-x) 80px !important; }#experience .exp-essay-inner { max-width: 100% !important; margin: 0 !important; }#experience .exp-essay-figure { display: none !important; }#experience .exp-essay .ew { opacity: 1 !important; }#experience #nvim-act { position: relative !important; min-height: 0 !important; height: auto !important; display: block !important; background: rgb(12 11 10); padding: 96px var(--pad-x) 100px; /* desktop overlaps the act -130vh over the prior section and keeps it opacity:0 until the JS reveals it — neither applies on mobile */ margin-top: 0 !important; opacity: 1 !important; }#experience #nvim-act .ide, #experience #nvim-act .nv-binary, #experience #nvim-act .nv-cream, #experience #nvim-act .nv-product, #experience #nvim-act .wash, #experience #nvim-act .nvim-backdrop, #experience #nvim-act .readout, #experience #nvim-act .phasebar, #experience #nvim-act .track, #experience #nvim-act .stage, #experience #nvim-act .svg-wrap, #experience #nvim-act > .label, #experience #nvim-act svg, #experience #nvim-act canvas, .ide-run, #nvBuild { display: none !important; }#experience #nvim-act .nv-mobile { display: block; text-align: left; }#experience .nv-mobile-code { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: rgb(174 178 188); background: rgb(18 19 23); border: 1px solid rgb(38 40 46); border-radius: 14px; padding: 20px 18px; margin: 0 0 40px; text-align: left; }#experience .nv-mobile-code .nvm-l { white-space: pre-wrap; word-break: break-word; }#experience .nv-mobile-code .nvm-sp { height: 0.85em; }#experience .nv-mobile-code .nvm-cm { color: rgb(96 100 110); font-style: italic; }#experience .nv-mobile-code .nvm-kw { color: rgb(151 157 173); }#experience .nv-mobile-code .nvm-str { color: rgb(150 168 150); }#experience .nv-mobile-code .nvm-fn { color: rgb(170 176 192); }#experience .nv-mobile-code .nvm-em { color: rgb(232 224 207); font-style: italic; }#experience .nv-mobile-title { font-family: 'Syne', var(--display); font-weight: 800; font-size: clamp(40px, 12vw, 68px); line-height: 0.96; letter-spacing: -0.02em; color: rgb(248 245 236); margin: 0; }#experience .exp-close { min-height: auto !important; padding: 96px var(--pad-x) !important; }#experience .exp-act-watermark { font-size: clamp(84px, 24vw, 180px); white-space: normal; line-height: 0.86; }#experience .m-rev { opacity: 0 !important; transform: translateY(32px) !important; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: opacity, transform; }#experience .m-in { opacity: 1 !important; transform: translateY(0) !important; }#experience .exp-apple-headline.m-rev { transition-delay: 0.07s; }#experience .exp-apple-subhead.m-rev { transition-delay: 0.13s; }#experience .exp-apple-link.m-rev, #experience .exp-apple-spec.m-rev { transition-delay: 0.18s; }#experience .exp-apple-device-wrap.m-rev { transition-delay: 0.10s; }#experience .exp-open-lede .ol-inner.m-rev { transition-delay: 0.12s; }#experience #nvim-act .nv-mobile-title.m-rev { transition-delay: 0.10s; } } @media (prefers-reduced-motion: reduce) {#experience * { transition-duration: 0ms !important; animation-duration: 0ms !important; }#experience .exp-display .exp-line-inner, #experience .exp-body-text .exp-line-inner, #experience .exp-stat-num, #experience .exp-stat-label, #experience .exp-open .exp-open-headline .exp-line-inner, #experience .exp-close .exp-close-quote .exp-line-inner { transform: none !important; opacity: 1 !important; }#experience .exp-illo { transform: none !important; opacity: 0.92 !important; } }#experience #nvim-act { position: relative; background: rgb(248 245 236); margin-top: -130vh; margin-top: -130dvh; z-index: 2; opacity: 0; }#experience #nvim-act .label, #experience #nvim-act .readout, #experience #nvim-act .phasebar { display: none !important; }#experience #nvim-act .wash { position: fixed; inset: 0; pointer-events: none; opacity: 0; will-change: opacity; z-index: 1; background: radial-gradient(ellipse 110vw 95vh at 50% 50%, rgb(22,22,26) 0%, rgb(15,15,18) 45%, rgb(9,9,11) 90%, rgb(5,5,7) 100%); }#experience #nvim-act .wash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(172,174,182,0.05) 0%, transparent 50%), linear-gradient(180deg, rgba(0,0,0,0.10) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.22) 100%); mix-blend-mode: screen; }#experience #nvim-act .nvim-backdrop { position: fixed; inset: 0; background: rgb(var(--nv-bg)); opacity: 0; z-index: 3; pointer-events: none; will-change: opacity; }#experience #nvim-act .nvim-intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; z-index: 3; opacity: 1; will-change: opacity; }#experience #nvim-act .nvim-intro-subtitle { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(32px, 4vw, 68px); line-height: 1.16; letter-spacing: -0.01em; color: rgb(238, 232, 220); max-width: 22ch; margin: 0; }#experience #nvim-act .nvim-warm { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: opacity; background: radial-gradient(140% 110% at 50% 45%, transparent 52%, rgba(0, 0, 0, 0.38) 100%); }#experience #nvim-act .track { position: relative; width: 100%; height: 690vh; z-index: 5; }#experience #nvim-act .stage { position: sticky; top: 0; width: 100%; height: 100vh; display: grid; place-items: center; overflow: hidden; }#experience #nvim-act .svg-wrap { width: 92vw; max-width: 1700px; height: 60vh; position: relative; top: -2vh; left: -11px; z-index: 2; }#experience #nvim-act .svg-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }#experience #nvim-act #word { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 280px; letter-spacing: -0.04em; fill: transparent; stroke: transparent; stroke-width: 0; text-rendering: geometricPrecision; paint-order: stroke fill; stroke-linejoin: round; stroke-linecap: round; will-change: stroke-width, fill, clip-path, -webkit-clip-path; }#experience #nvim-act .dot { fill: rgb(190, 186, 178); stroke: none; opacity: 0; }#experience #nvim-act .contour { fill: none; stroke: rgb(190, 186, 178); stroke-width: 1.0px; opacity: 0; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }#experience #nvim-act .cross-line { stroke: rgb(190, 186, 178); stroke-width: 1.4px; }#experience #nvim-act .cross-dot { fill: rgb(190, 186, 178); stroke: none; }#experience #nvim-act .cross-ring { fill: none; stroke: rgb(190, 186, 178); stroke-width: 1.2px; opacity: 0.55; }#experience #nvim-act #trace-line { stroke: rgb(190, 186, 178) !important; }#experience #nvim-act #scanline { fill: rgb(190, 186, 178) !important; }#experience #nvim-act .tk { font-family: var(--mono); font-size: 54px; font-weight: 500; letter-spacing: -0.02em; fill: rgb(var(--burgundy)); opacity: 0; will-change: opacity, fill; }#experience #nvim-act .tk-quote { font-size: 160px; font-weight: 400; letter-spacing: 0; }#experience #nvim-act .nv-binary { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(125% 100% at 50% 38%, #15110c 0%, #0c0b0a 58%, #070605 100%); will-change: opacity; }#experience #nvim-act .nv-binary canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }#experience #nvim-act .nv-binary .fx-far { filter: blur(6px); opacity: 0.7; }#experience #nvim-act .nv-binary .fx-near { filter: drop-shadow(0 0 5px rgba(232,212,170,0.22)); }#experience #nvim-act .nv-binary::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.26; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; }#experience #nvim-act .nv-binary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 44%, transparent 38%, rgba(0,0,0,0.62) 100%); }#experience #nvim-act .nv-cream { position: fixed; inset: 0; z-index: 7; background: rgb(248 245 236); opacity: 0; pointer-events: none; will-change: opacity; }#experience #nvim-act .nv-product { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; opacity: 0; pointer-events: none; will-change: opacity, transform; }#experience #nvim-act .nv-browser { width: min(74vw, 1040px); background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 60px 130px -45px rgba(40,25,15,.55), 0 0 0 1px rgba(40,25,15,.06); }#experience #nvim-act .nv-bchrome { height: 40px; background: #efe7d6; display: flex; align-items: center; gap: 8px; padding: 0 16px; }#experience #nvim-act .nv-bchrome i { width: 12px; height: 12px; border-radius: 50%; }#experience #nvim-act .nv-bchrome i:nth-child(1) { background:#ccc6ba }#experience #nvim-act .nv-bchrome i:nth-child(2) { background:#bdb7ab }#experience #nvim-act .nv-bchrome i:nth-child(3) { background:#aea89c }#experience #nvim-act .nv-burl { margin-left: 10px; flex: 1; max-width: 380px; height: 22px; border-radius: 11px; background:#fff; border:1px solid #e0d6bf; font-size: 12px; color:rgb(var(--ink-mute)); display:flex; align-items:center; padding:0 14px; font-family: var(--mono); }#experience #nvim-act .nv-bpage { background:#faf6ec; padding: 44px 54px 64px; }#experience #nvim-act .nv-bnav { display:flex; align-items:center; }#experience #nvim-act .nv-bnav b { font-family: var(--serif); font-weight:700; color:rgb(var(--ink)); font-size:20px; letter-spacing:.02em; }#experience #nvim-act .nv-bnav s { margin-left:auto; width:26px; height:2px; background:rgb(var(--ink-mute)); box-shadow:0 8px 0 rgb(var(--ink-mute)), 0 16px 0 rgb(var(--ink-mute)); display:block; }#experience #nvim-act .nv-bhero { margin-top: 64px; }#experience #nvim-act .nv-bhero h4 { font-family: var(--serif); font-weight:600; font-size: clamp(36px,5vw,64px); line-height:1.02; color:rgb(var(--ink)); letter-spacing:-.02em; }#experience #nvim-act .nv-bhero h4 em { font-style: italic; color:rgb(var(--ink-soft)); }#experience #nvim-act .nv-bhero p { font-size: 16px; color:rgb(var(--ink-mute)); margin-top: 20px; max-width: 46ch; line-height:1.6; }#experience #nvim-act .nv-bcta { margin-top: 32px; display:inline-block; font-size: 13px; letter-spacing:.04em; color:rgb(var(--paper)); background:rgb(var(--ink)); padding: 13px 24px; border-radius: 9px; }#experience #nvim-act { --nv-bg: 15,16,19; --nv-bg-soft: 20,21,25; --nv-bg-dark: 11,12,15; --nv-fg: 174,178,188; --nv-fg-dim: 120,125,136; --nv-fg-mute: 76,80,90; --nv-line: 38,40,46; --nv-active: 223,227,235; --nv-key: 151,157,173; --nv-str: 124,130,144; --nv-type: 159,165,181; --nv-fn: 167,173,189; --nv-cm: 78,82,92; --nv-num: 148,154,168; --nv-warn: 150,150,156; --nv-err: 168,142,146; --nv-ok: 140,150,150; --nv-git-add: 140,150,150; --nv-git-mod: 150,150,156; --nv-git-del: 168,142,146; }#experience #nvim-act .ide { position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; will-change: opacity; font-family: var(--mono); background: rgb(var(--nv-bg)); color: rgb(var(--nv-fg)); }#experience #nvim-act .ide-titlebar, #experience #nvim-act .ide-gutter, #experience #nvim-act .ide-terminal, #experience #nvim-act .ide-status { transition: transform 0.6s cubic-bezier(.16,1,.3,1), opacity 0.45s ease; }#experience #nvim-act .ide-code { transition: opacity 0.4s ease; }#experience #nvim-act .ide-titlebar { position: absolute; top: 0; left: 0; right: 0; height: 32px; background: rgb(var(--nv-bg-dark)); border-bottom: 1px solid rgb(var(--nv-line)); display: flex; align-items: stretch; font-family: var(--mono); font-size: 13px; color: rgb(var(--nv-fg-mute)); will-change: transform; letter-spacing: 0.02em; }#experience #nvim-act .ide-titlebar .traffic { display: none; }#experience #nvim-act .ide-titlebar .crumb { display: flex; align-items: stretch; height: 100%; }#experience #nvim-act .ide-titlebar .crumb .sep, #experience #nvim-act .ide-titlebar .crumb > span:not(.file) { display: none; }#experience #nvim-act .ide-titlebar .crumb .file { display: flex; align-items: center; padding: 0 14px; background: rgb(var(--nv-bg)); color: rgb(var(--nv-active)); font-weight: 500; border-right: 1px solid rgb(var(--nv-line)); position: relative; box-shadow: inset 0 2px 0 rgb(var(--nv-key)); }#experience #nvim-act .ide-titlebar .crumb .file::before { content: "\f15c"; color: rgb(var(--nv-fn)); margin-right: 8px; font-size: 10px; font-family: "JetBrains Mono", ui-monospace, monospace; }#experience #nvim-act .ide-titlebar .crumb .file::after { content: "\00a0\00a0\25CF"; color: rgb(var(--nv-warn)); margin-left: 6px; font-size: 8px; }#experience #nvim-act .ide-titlebar .branch { margin-left: auto; display: flex; align-items: center; gap: 0; padding: 0; color: rgb(var(--nv-fg-mute)); font-size: 10px; letter-spacing: 0.02em; }#experience #nvim-act .ide-titlebar .branch > span { padding: 0 12px; display: flex; align-items: center; height: 100%; border-left: 1px solid rgb(var(--nv-line)); }#experience #nvim-act .ide-titlebar .branch .b { color: rgb(var(--nv-str)); font-weight: 500; margin-right: 6px; }#experience #nvim-act .ide-titlebar .branch .b::before { content: "\00a0\26A1\FE0E\00a0"; }#experience #nvim-act .ide-titlebar .ok { color: rgb(var(--nv-ok)); font-weight: 500; }#experience #nvim-act .ide-tree { display: none; }#experience #nvim-act .ide-editor { position: absolute; top: 32px; left: 0; right: 0; bottom: 52px; background: rgb(var(--nv-bg)); overflow: hidden; font-family: var(--mono); font-size: 26px; line-height: 1.55; color: rgb(var(--nv-fg)); letter-spacing: -0.005em; will-change: opacity; }#experience #nvim-act .ide-gutter { position: absolute; top: 0; left: 0; bottom: 0; width: 88px; font-family: var(--mono); font-size: 16px; color: rgb(var(--nv-fg-mute)); text-align: right; padding: 18px 10px 0 0; font-variant-numeric: tabular-nums; background: rgb(var(--nv-bg)); }#experience #nvim-act .ide-gutter .row { display: flex; align-items: center; justify-content: flex-end; height: 40.3px; position: relative; padding-left: 24px; }#experience #nvim-act .ide-gutter .row.active { color: rgb(var(--nv-active)); font-weight: 700; background: rgba(167,173,189,0.04); }#experience #nvim-act .ide-gutter .row::before { content: ""; position: absolute; left: 2px; top: 0; bottom: 0; width: 3px; background: transparent; }#experience #nvim-act .ide-gutter .row.git-add::before { background: rgb(var(--nv-git-add)); }#experience #nvim-act .ide-gutter .row.git-mod::before { background: rgb(var(--nv-git-mod)); }#experience #nvim-act .ide-gutter .row.git-del::before { background: rgb(var(--nv-git-del)); }#experience #nvim-act .ide-gutter .tilde { display: none; }#experience #nvim-act .ide-code { position: absolute; top: 0; left: 88px; right: 0; bottom: 0; padding: 18px 28px 18px 22px; font-family: var(--mono); font-size: 26px; line-height: 1.55; white-space: pre; color: rgb(var(--nv-fg)); will-change: opacity; }#experience #nvim-act .ide-line { display: block; opacity: 1; letter-spacing: -0.005em; height: 1.55em; padding-left: 0; position: relative; }#experience #nvim-act .ide-line.active-row { background: rgba(167,173,189,0.05); }#experience #nvim-act .ide-line .ty-ch { opacity: 0; will-change: opacity; }#experience #nvim-act .ide-line .ty-ch.typed { opacity: 1; }#experience #nvim-act .ide-line .ty-ch.cursor { opacity: 1; box-shadow: -2px 0 0 0 rgb(var(--nv-active)); }#experience #nvim-act .ide-line .tw-pre, #experience #nvim-act .ide-line .tw-suf { display: inline; vertical-align: baseline; }#experience #nvim-act .ide-line .kw { color: rgb(var(--nv-key)); font-weight: 500; }#experience #nvim-act .ide-line .op { color: rgb(var(--nv-fg-dim)); }#experience #nvim-act .ide-line .br { color: rgb(var(--nv-warn)); }#experience #nvim-act .ide-line .tp { color: rgb(var(--nv-type)); font-style: italic; font-family: var(--serif); font-size: 30px; }#experience #nvim-act .ide-line .st { color: rgb(var(--nv-str)); }#experience #nvim-act .ide-line .cm { color: rgb(var(--nv-cm)); font-style: italic; }#experience #nvim-act .ide-line .fn { color: rgb(var(--nv-fn)); font-weight: 500; }#experience #nvim-act .ide-line .num { color: rgb(var(--nv-num)); }#experience #nvim-act .ide-line .adr { color: rgb(var(--nv-fg-dim)); }#experience #nvim-act .ide-line .hx { color: rgb(var(--nv-num)); letter-spacing: 0.02em; }#experience #nvim-act .ide-line .bin { color: rgb(var(--nv-str)); opacity: 0.78; letter-spacing: 0.04em; }#experience #nvim-act .ide-scan { position: absolute; left: -4px; right: -4px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--nv-active), 0.95) 22%, rgba(var(--nv-str2), 0.9) 78%, transparent); box-shadow: 0 0 14px 1px rgba(var(--nv-active), 0.5); opacity: 0; pointer-events: none; z-index: 4; will-change: transform, opacity; transition: transform 0.18s linear, opacity 0.3s ease; }#experience #nvim-act .ide-tilde { display: block; color: rgb(var(--nv-fg-mute)); opacity: 0.55; padding-left: 0; height: 1.65em; }#experience #nvim-act .ide-word { display: inline-block; position: relative; color: rgb(232,228,218); font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px; letter-spacing: -0.005em; padding: 0; margin: 0; background: transparent; vertical-align: baseline; }#experience #nvim-act .ide-word .ch { display: inline; background: transparent; transition: background-color 60ms linear; }#experience #nvim-act .ide-word .ch.selected { background: rgba(151,157,173,0.32); }#experience #nvim-act .ide-word .ch.cursor { background: rgb(151,157,173); color: rgb(var(--nv-bg)); }#experience #nvim-act .ide-word.sel-all .ch.selected { background: transparent; }#experience #nvim-act .ide-word.sel-all::before { content: ""; position: absolute; left: -0.03em; right: 0.04em; top: 0.07em; bottom: 0.11em; background: rgba(151,157,173,0.30); transform: skewX(-9deg); border-radius: 4px; pointer-events: none; }#experience #nvim-act .ide-vim-cursor { position: absolute; left: 0; right: 0; background: rgba(151,157,173,0.18); border-left: 2px solid rgb(var(--nv-key)); pointer-events: none; will-change: transform, opacity; opacity: 0; height: 1.65em; }#experience #nvim-act .ide-terminal { position: absolute; left: 0; right: 0; bottom: 26px; height: 26px; background: rgb(var(--nv-bg)); border-top: 1px solid rgb(var(--nv-line)); font-family: var(--mono); font-size: 13px; line-height: 1.6; color: rgb(var(--nv-fg-dim)); overflow: hidden; will-change: transform; padding: 0 14px; display: flex; align-items: center; }#experience #nvim-act .ide-terminal .header { display: none; }#experience #nvim-act .ide-terminal .body { padding: 0; font-family: var(--mono); font-size: 13px; color: rgb(var(--nv-fg)); white-space: pre; display: block; width: 100%; }#experience #nvim-act .ide-terminal .body .ln { display: none; opacity: 0; will-change: opacity; }#experience #nvim-act .ide-terminal .body .ln.active { display: inline; opacity: 1; }#experience #nvim-act .ide-terminal .body .ln .gt { color: rgb(var(--nv-key)); margin-right: 6px; font-weight: 500; }#experience #nvim-act .ide-terminal .body .ln .ok { color: rgb(var(--nv-ok)); font-weight: 500; margin-right: 6px; }#experience #nvim-act .ide-terminal .body .ln .hi { color: rgb(var(--nv-fn)); font-weight: 500; }#experience #nvim-act .ide-status { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: rgb(var(--nv-bg-soft)); display: flex; align-items: stretch; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; will-change: transform; color: rgb(var(--nv-fg)); }#experience #nvim-act .ide-status .seg { display: flex; align-items: stretch; }#experience #nvim-act .ide-status .seg:first-child::before { content: "NORMAL"; background: rgb(var(--nv-key)); color: rgb(var(--nv-bg-dark)); padding: 0 14px; font-weight: 700; letter-spacing: 0.10em; display: flex; align-items: center; }#experience #nvim-act .ide-status .seg > span { padding: 0 11px; display: flex; align-items: center; background: rgb(var(--nv-bg)); color: rgb(var(--nv-fg-dim)); border-right: 1px solid rgb(var(--nv-line)); }#experience #nvim-act .ide-status .seg > span:first-of-type { background: rgba(151,157,173,0.18); color: rgb(var(--nv-active)); }#experience #nvim-act .ide-status .seg .b { color: rgb(var(--nv-active)); font-weight: 600; margin-left: 4px; }#experience #nvim-act .ide-status .seg .div { display: none; }#experience #nvim-act .ide-status .seg .pulse { display: none; }#experience #nvim-act .ide-status .seg:last-child { margin-left: auto; }#experience #nvim-act .ide-status .seg:last-child > span { border-right: none; border-left: 1px solid rgb(var(--nv-line)); }#experience #nvim-act .ide-status .seg:last-child > span:last-of-type { background: rgb(var(--nv-key)); color: rgb(var(--nv-bg-dark)); font-weight: 700; letter-spacing: 0.08em; }#experience #nvim-act #caret { fill: rgb(var(--burgundy)); opacity: 0; will-change: opacity, x; }#experience #nvim-act #caret.blink { animation: nvimCaretBlink 1.06s steps(2, start) infinite; } @keyframes nvimCaretBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }#experience #nvim-act #caret-glow { opacity: 0; will-change: opacity, x; mix-blend-mode: screen; }#experience #nvim-act #word-wrap { transform-box: fill-box; transform-origin: center; }#experience #nvim-act #cross-ring.idle-pulse { animation: nvimRingPulse 2.2s ease-in-out infinite; } @keyframes nvimRingPulse { 0%, 100% { r: 8; opacity: 0.30; } 50% { r: 16; opacity: 0.10; } }#experience body.nvim-bg-control { transition: background-color 60ms linear; }