:root { color-scheme: light; --ink: #172338; --muted: #57657a; --blue: #0066ed; --line: #e6ebf2; --ease-out: cubic-bezier(.23,1,.32,1); font: 100%/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: var(--ink); background: #fff; }
* { box-sizing: border-box; }
body { position:relative; margin: 0; min-height:100vh; display:flow-root; color:var(--ink); background:#fff; isolation:isolate; }
button,a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
button:focus-visible,a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.navigation { display:flex; align-items:center; justify-content:space-between; max-width: 1440px; margin: 24px auto 0; padding: 15px 28px; border:1px solid #edf0f5; border-radius:12px; background:rgba(247,249,252,.8); }
.name { font-size:1.25rem; font-weight:650; letter-spacing:-.04em; }
.name-dot { color:var(--blue); }
.domain { font-size:.875rem; color:var(--muted); }
.hero { padding: 64px 24px 0; text-align:center; }
h1 { margin:0 auto; max-width:1200px; font-size:clamp(2.1rem,4.3vw,4.25rem); line-height:1.06; font-weight:600; letter-spacing:-.045em; text-wrap:balance; }
.intro { margin:24px auto 26px; font-size:clamp(1rem,1.5vw,1.25rem); color:var(--muted); text-wrap:balance; }
.contact { display:inline-flex; gap:20px; align-items:center; padding:13px 27px; border-radius:999px; background:var(--blue); color:white; text-decoration:none; font-weight:550; transition:transform 140ms var(--ease-out),background-color 140ms ease; }
.contact:active { transform:scale(.97); }
.office { position:relative; max-width:1320px; margin:28px auto 0; isolation:isolate; }
.office-art { display:block; width:100%; height:auto; image-rendering:pixelated; }
.office-art-night { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; filter:url('#night-office') brightness(.65) saturate(.65); opacity:.001; pointer-events:none; }
.office-art,.office-art-night { transition:opacity 250ms var(--ease-out); will-change:opacity; }
.night .office-art { opacity:0; }
.night .office-art-night { opacity:1; }
.screen { position:absolute; left:33.52%; top:34.5%; width:13.52%; height:15%; border:0; padding:0; background:#15273f; border-radius:0; }
.screen-display { position:absolute; inset:0; overflow:hidden; background:#d5e8fa; opacity:1; transition:opacity 160ms var(--ease-out); }
.screen[aria-pressed="false"] .screen-display { opacity:0; }
.screen::after,.dog::after { content:""; position:absolute; inset:-10px; }
.screen-bar { position:absolute; top:0; left:0; width:100%; height:12%; background:#a4c2e0; }
.screen-bar::after { content:""; position:absolute; width:3%; height:30%; top:35%; left:5%; background:#4a77ac; box-shadow:7px 0 #4a77ac,14px 0 #4a77ac; }
.screen-sidebar { position:absolute; left:0; top:12%; bottom:0; width:25%; background:#648bb6; }
.screen-sidebar::after { content:""; position:absolute; top:12%; left:18%; width:63%; height:5%; background:#c5ddf5; box-shadow:0 8px #c5ddf5,0 16px #c5ddf5,0 24px #c5ddf5; }
.screen-window { position:absolute; top:25%; left:35%; right:10%; bottom:20%; background:#f5faff; padding:8%; display:flex; flex-direction:column; gap:14%; }
.screen-window span { background:#b5cfe9; height:12%; width:85%; }
.screen-window span:first-child { background:#507ead; width:55%; }
.screen-window span:last-child { width:65%; }
.screen-cursor { position:absolute; width:2%; height:8%; background:#3269b0; left:42%; bottom:12%; }
.steam { position:absolute; left:49.55%; top:38.5%; width:2.65%; height:12%; pointer-events:none; overflow:visible; }
.steam path { fill:none; stroke:#7893ae; stroke-width:2; stroke-linecap:round; opacity:0; animation:steam-rise 3.6s ease-in-out infinite; }
.steam path:nth-child(2) { animation-delay:-1.2s; }
.steam path:nth-child(3) { animation-delay:-2.4s; }
.dog { position:absolute; left:66%; bottom:10%; width:11%; aspect-ratio:1; border:0; padding:0; background:none; }
.dog-sprite { position:relative; display:block; width:100%; height:100%; background:url('assets/dog-poses.png') no-repeat; background-size:300% 200%; image-rendering:pixelated; transform-origin:50% 90%; }
.dog[data-state="looking"] .dog-sprite { background-position:0 0; animation:dog-look 1.6s steps(1,end) infinite; }
.dog[data-state="sitting"] .dog-sprite { background-position:50% 0; }
.dog[data-state="sleeping"] .dog-sprite { background-position:100% 0; animation:dog-breathe 3.4s ease-in-out infinite; }
/* The second sprite row's paws are 55px higher in its 512px cell. */
.dog[data-state="petted"] .dog-sprite { top:10.7421875%; background-position:50% 100%; transform-origin:50% 84%; animation:dog-happy .45s ease-in-out infinite alternate; }
.pet-heart { position:absolute; top:8%; left:52%; width:16%; height:auto; fill:#deebff; stroke:var(--blue); stroke-width:1.5; opacity:0; pointer-events:none; }
.dog[data-state="petted"] .pet-heart { opacity:1; animation:pet-heart 1.6s var(--ease-out) infinite; }
.dog[data-keyboard="true"] .pet-heart,.dog[data-keyboard="true"] .dog-sprite { animation:none; }
.scene-controls { max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; padding:0 20px 20px; color:var(--muted); font-size:.8125rem; }
.scene-controls p { margin:0; }
.motion-toggle { flex-shrink:0; display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:white; color:var(--muted); padding:9px 12px; border-radius:7px; font-size:.75rem; }
.office[data-paused="true"] .dog-sprite,.office[data-paused="true"] .pet-heart,.office[data-paused="true"] .steam path { animation-play-state:paused; }
.office[data-reduced="true"] .dog-sprite,.office[data-reduced="true"] .pet-heart,.office[data-reduced="true"] .steam path { animation:none; }
.office[data-reduced="true"] .steam path { opacity:.25; }
footer { max-width:1384px; margin:32px auto 0; padding:22px 0 26px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:16px; font-size:.75rem; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes steam-rise { 0% { opacity:0; transform:translate(0,10%); } 30% { opacity:.4; } 65% { opacity:.3; } 100% { opacity:0; transform:translate(3%,-30%); } }
@keyframes dog-look { 0%,100% { background-position:0 0; transform:translateY(0); } 50% { background-position:0 100%; transform:translateY(10.3515625%); } }
@keyframes dog-breathe { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(1.025); } }
@keyframes dog-happy { from { transform:rotate(-2deg); } to { transform:rotate(2deg); } }
@keyframes pet-heart { from { opacity:0; transform:translateY(0) scale(.9); } 25% { opacity:1; } to { opacity:0; transform:translateY(-70%) scale(1); } }
@media (hover:hover) and (pointer:fine) { .contact:hover { background:#005bd5; } .motion-toggle:hover { background:#f6f8fc; } .dog:hover { cursor:grab; } }
@media (max-width:1488px) { .navigation { margin-left:24px; margin-right:24px; } footer { margin-left:48px; margin-right:48px; } }
@media (max-width:700px) { .navigation { margin:16px 16px 0; padding:12px 16px; } .name { font-size:1.0625rem; } .domain { font-size:.75rem; } .hero { padding:48px 16px 0; } h1 { font-size:clamp(2rem,6.7vw,2.9rem); line-height:1.1; } .desktop-break { display:none; } .intro { max-width:30rem; margin-top:20px; } .office { margin-top:38px; } .screen { min-height:0; } .dog { width:14%; left:65%; } .scene-controls { padding:16px 0 0; align-items:flex-start; font-size:.75rem; } .scene-controls p { max-width:180px; } .motion-toggle { font-size:.6875rem; } footer { margin:36px 16px 0; padding:20px 0; } footer span:last-child { max-width:150px; text-align:right; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .steam path { opacity:.25; } .contact:active { transform:none; } }
@media (prefers-reduced-transparency:reduce) { .navigation { background:#f7f9fc; backdrop-filter:none; } }
@media (prefers-contrast:more) { .navigation,.motion-toggle { border-color:var(--ink); } .intro,.scene-controls,footer { color:var(--ink); } }

body { transition:color 250ms var(--ease-out); }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:#111a29; pointer-events:none; opacity:0; transition:opacity 250ms var(--ease-out); }
body.night::before { opacity:1; }
.window { position:absolute; left:61.35%; top:16.4%; width:13.3%; height:36.3%; padding:0; border:0; background:transparent; overflow:hidden; }
.blinds { position:absolute; inset:0; background:repeating-linear-gradient(to bottom,#35465b 0,#35465b 8%,#26354a 8%,#26354a 9%); transform:translateY(-100%); transition:transform 250ms var(--ease-out); will-change:transform; }
.blind-handle { position:absolute; bottom:2%; left:48%; width:4%; height:1.5%; background:#52759d; }
.window[aria-pressed="true"] .blinds { transform:translateY(0); }
.lamp { position:absolute; left:50.7%; top:38%; width:7%; height:19%; border:0; padding:0; background:transparent; }
.lamp::after { content:""; position:absolute; inset:-8px; }
.lamp-glow { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 250ms var(--ease-out); mix-blend-mode:screen; }
.office[data-blinds="closed"][data-lamp="true"] .lamp-glow { opacity:1; }
body.night { --ink:#eff5ff; --muted:#b0bed1; --line:#2b3a50; }
.night .navigation { background:rgba(29,42,60,.92); border-color:#2b3a50; }
.night .dog-sprite { filter:brightness(.8); }
.night .motion-toggle { color:var(--muted); background:#1d2a3c; border-color:#2b3a50; }
.night .screen { box-shadow:0 0 24px rgba(122,176,233,.1); }
.night .screen[aria-pressed="false"] { box-shadow:none; }
.instant-theme,.instant-theme::before,.instant-theme .office-art,.instant-theme .office-art-night,.instant-theme .blinds,.instant-theme .lamp-glow { transition:none; }
@media (prefers-reduced-transparency:reduce) { .night .navigation { background:#1d2a3c; } }

.plant { position:absolute; padding:0; border:0; background:transparent; }
.plant-left { left:2.5%; top:32%; width:9%; height:48%; }
.plant-shelf { left:88.8%; top:14%; width:8%; height:50%; }
.plant-foliage { position:absolute; inset:0; opacity:0; pointer-events:none; background-image:url('assets/office.png'); background-repeat:no-repeat; image-rendering:pixelated; transform-origin:50% 65%; }
.plant-left .plant-foliage { background-size:1111.111111% 208.333333%; background-position:2.747253% 61.538462%; clip-path:inset(0 0 30% 0); }
.plant-shelf .plant-foliage { background-size:1250% 200%; background-position:96.521739% 28%; clip-path:polygon(0 0,100% 0,100% 100%,35% 100%,35% 35%,0 35%); }
.night .plant-foliage { filter:url('#night-office') brightness(.65) saturate(.65); }
.watering-rig { position:absolute; width:125%; aspect-ratio:120/96; opacity:0; transition:opacity 160ms var(--ease-out); pointer-events:none; }
.plant-left .watering-rig { left:-48%; top:-40%; }
.plant-shelf .watering-rig { left:10%; top:-28%; transform:scaleX(-1); }
.watering-can { display:block; width:100%; height:auto; transform-origin:90% 44%; transform:rotate(-8deg); transition:transform 200ms var(--ease-out); }
.water-drops { position:absolute; top:43%; left:86%; width:12%; height:70%; opacity:0; pointer-events:none; }
.water-drops span { position:absolute; top:0; width:10%; height:9%; border-radius:50%; background:#8bbce9; }
.water-drops span:nth-child(2) { left:36%; animation-delay:-.3s; }
.water-drops span:nth-child(3) { left:72%; animation-delay:-.6s; }
.plant[data-watering="true"] .watering-rig { opacity:1; }
.plant[data-watering="true"] .watering-can { transform:rotate(16deg); }
.plant[data-watering="true"] .water-drops { opacity:1; }
.plant[data-watering="true"] .water-drops span { animation:water-drop .9s linear infinite; }
.plant[data-watering="true"] .plant-foliage { opacity:1; animation:leaf-sway .6s ease-in-out infinite alternate; }
.plant[data-still="true"] .watering-can,.plant[data-still="true"] .plant-foliage,.plant[data-still="true"] .water-drops span { animation:none; transition:none; transform:none; }
.office[data-paused="true"] .plant-foliage,.office[data-paused="true"] .water-drops span { animation-play-state:paused; }
@keyframes water-drop { from { opacity:0; transform:translateY(0); } 25% { opacity:1; } to { opacity:0; transform:translateY(1200%); } }
@keyframes leaf-sway { from { transform:rotate(-1deg); } to { transform:rotate(1deg); } }
.note-stack { position:absolute; left:49.7%; top:20.5%; width:6%; height:14.5%; padding:0; border:0; background:transparent; }
.note-wall { position:absolute; inset:0; z-index:20; pointer-events:none; overflow:hidden; }
.sticky-position { position:absolute; inset:0; pointer-events:none; }
.sticky-note { position:absolute; left:0; top:0; aspect-ratio:41/47; padding:0; border:0; background-image:url('assets/office.png'); background-size:4587.804878% 1778.723404%; background-position:53.043478% 21.673004%; image-rendering:pixelated; box-shadow:1px 2px 1px rgba(23,35,56,.15); pointer-events:auto; touch-action:none; cursor:grab; transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out); }
.sticky-note::after { content:""; position:absolute; inset:-10px; }
.sticky-note[data-dragging="true"] { cursor:grabbing; opacity:.9; box-shadow:1px 4px 2px rgba(23,35,56,.2); }
.night .sticky-note { filter:url('#night-office') brightness(.65) saturate(.65); }
.sticky-note[data-leaving="true"] { opacity:0; transform:translateY(-4px) scale(.95); pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .sticky-note[data-leaving="true"] { transform:none; } }
.note-stack:hover { cursor:grab; }