@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { --bg:#f3f1ea; --surface:#ebe9e1; --ink:#11161a; --muted:#747a7c; --line:rgba(17,22,26,.17); --cyan:#087d76; --coral:#e45d49; --lime:#a3da58; --ease:cubic-bezier(.2,.8,.2,1); }
body.night { --bg:#0c1114; --surface:#131b1e; --ink:#edf0e9; --muted:#8c9797; --line:rgba(237,240,233,.17); --cyan:#8ee7db; --coral:#ff8069; --lime:#b8e574; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink); font-family:Manrope,Arial,sans-serif; transition:background .6s,color .6s; cursor:none; } a,button { color:inherit; } button { font:inherit; } .site { position:relative; z-index:1; max-width:1440px; margin:auto; padding:0 5vw; opacity:0; transition:opacity .8s .1s; } .site.is-ready { opacity:1; }
.ambient { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.45; }.ambient i { position:absolute; width:35vw; height:35vw; border:1px solid var(--cyan); border-radius:50%; transform:translate(-50%,-50%); left:var(--mx,50%); top:var(--my,50%); transition:opacity .4s; }.ambient i:nth-child(2) { width:52vw;height:52vw;border-color:var(--coral);opacity:.32; }.ambient i:nth-child(3) { width:70vw;height:70vw;opacity:.15; }.grain { position:fixed; inset:0; pointer-events:none; z-index:4; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cursor-dot { position:fixed; z-index:20; width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink);pointer-events:none;mix-blend-mode:difference; }.cursor-label { position:fixed; z-index:20; padding:6px 8px; color:var(--bg); background:var(--ink); font:500 9px DM Mono,monospace; letter-spacing:1px; pointer-events:none; opacity:0; transform:translate3d(-100px,-100px,0); transition:opacity .2s; }.cursor-active .cursor-label { opacity:1; }
.boot { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; justify-content:space-between; padding:32px 5vw 36px; background:var(--bg); transition:opacity .7s,visibility .7s; }.boot.done { opacity:0;visibility:hidden;pointer-events:none; }.boot-top,.boot-progress { display:flex; justify-content:space-between; color:var(--muted); font:500 10px DM Mono,monospace;letter-spacing:1px; }.boot strong { max-width:900px; font-size:clamp(50px,11vw,160px); line-height:.86;letter-spacing:-7px; }.boot strong:before { content:'WELCOME / '; color:var(--coral); font:500 11px DM Mono,monospace;letter-spacing:1px;display:block;margin-bottom:25px; }.boot-progress { height:2px;background:var(--line); }.boot-progress i { width:0;background:var(--cyan);animation:bootLoad .52s ease-out forwards; }
.nav-bar { height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line); }.brand { font-size:29px;font-weight:800;text-decoration:none; }.brand span { color:var(--coral); }.nav-bar nav { display:flex;gap:32px; }.nav-bar nav a { text-decoration:none;font:500 11px DM Mono,monospace; }.nav-bar nav a:hover { color:var(--cyan); }.nav-actions { display:flex;align-items:center;gap:22px; }.time-state { color:var(--cyan);font:500 10px DM Mono,monospace;letter-spacing:1px; }.time-state i,.availability i { display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--cyan); }.mode-button { display:flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--line);background:transparent;cursor:none; }.mode-button span { color:var(--coral);font-size:17px;line-height:10px; }.mode-button b { font:500 10px DM Mono,monospace; }
.hero { min-height:calc(100vh - 104px);display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:60px;position:relative;padding:9vh 0 14vh; }.hero-copy { max-width:720px; }.microline { display:flex;justify-content:space-between;max-width:430px;margin-bottom:65px;color:var(--muted);font:500 10px DM Mono,monospace;letter-spacing:1px; }.hero-index { color:var(--coral);font:500 11px DM Mono,monospace;letter-spacing:1px; }.hero-index em { font-style:normal;color:var(--muted); }.hero h1 { margin:18px 0 30px;font-size:clamp(55px,8.8vw,130px);line-height:.88;letter-spacing:-6px; }.hero h1 span { display:block; }.hero h1 strong { display:inline-block;color:var(--cyan);font-weight:800;min-width:1ch; }.typing-caret { display:inline-block;width:10px;height:clamp(48px,7vw,94px);margin-left:10px;background:var(--coral);vertical-align:-4px;animation:blink 1s steps(2) infinite; }.hero-intro { max-width:500px;margin:0 0 40px;color:var(--muted);font-size:15px;line-height:1.9; }.hero-actions { display:flex;align-items:center;gap:28px; }.primary-action { display:inline-flex;align-items:center;gap:16px;text-decoration:none;font:500 11px DM Mono,monospace; }.primary-action b { display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--ink);border-radius:50%;font-size:20px;font-weight:400;transition:transform .3s var(--ease),background .3s; }.primary-action:hover b { color:var(--bg);background:var(--ink);transform:rotate(-45deg); }.availability { color:var(--muted);font:500 10px DM Mono,monospace;letter-spacing:.7px; }.availability i { background:var(--coral); }.hero-portrait { position:relative;justify-self:end;width:min(37vw,510px);aspect-ratio:1;--px:50%;--py:50%; }.portrait-card { position:absolute;inset:17%;overflow:hidden;border-radius:50%;border:2px solid var(--cyan);background:var(--surface);box-shadow:0 0 0 14px color-mix(in srgb,var(--cyan) 10%,transparent),0 35px 80px rgba(17,22,26,.18);transform:translate(calc((50% - var(--px)) * .06),calc((50% - var(--py)) * .06));transition:transform .2s var(--ease); }.portrait-card img { width:100%;height:100%;display:block;object-fit:cover;filter:saturate(1.12) contrast(1.04); }.portrait-card:after { content:'';position:absolute;inset:12px;border:1px solid var(--coral);border-radius:50%;opacity:.75; }.portrait-number { position:absolute;top:18%;left:18%;z-index:1;color:var(--bg);font:500 10px DM Mono,monospace; }.portrait-corner { position:absolute;right:15%;bottom:17%;z-index:1;color:var(--bg);font:500 10px DM Mono,monospace; }.portrait-orbit { position:absolute;inset:3%;border:1px solid color-mix(in srgb,var(--cyan) 54%,transparent);border-radius:50%;transform:rotate(35deg) scaleY(.43);animation:orbit 15s linear infinite; }.orbit-b { inset:-7%;border-color:color-mix(in srgb,var(--coral) 52%,transparent);transform:rotate(-50deg) scaleY(.55);animation-direction:reverse;animation-duration:21s; }.portrait-caption { position:absolute;right:0;bottom:8%;display:flex;flex-direction:column;gap:7px;color:var(--cyan);font:500 10px DM Mono,monospace;letter-spacing:1px;text-align:right; }.portrait-caption b { color:var(--muted);font-weight:400; }.hero-foot { position:absolute;bottom:5%;left:0;right:0;display:flex;align-items:center;gap:14px;color:var(--muted);font:500 10px DM Mono,monospace;letter-spacing:1px; }.hero-foot i { display:block;width:70px;height:1px;background:var(--line); }.hero-foot span:last-child { margin-left:auto;color:var(--cyan); }
.panel { padding:130px 0;border-top:1px solid var(--line);opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s; }.panel.is-ready { opacity:1;transform:none; }.panel-title { display:grid;grid-template-columns:52px 1fr auto;align-items:baseline;gap:16px;margin-bottom:64px; }.panel-title>span { color:var(--coral);font:500 12px DM Mono,monospace; }.panel-title h2 { margin:0;font-size:clamp(38px,6vw,78px);line-height:.9;letter-spacing:-4px; }.panel-title small { color:var(--muted);font:500 10px DM Mono,monospace;letter-spacing:1px; }.about-layout { display:grid;grid-template-columns:.85fr 1.15fr;gap:9vw; }.quote-block { padding:26px 0;border-top:1px solid var(--ink); }.quote-block>span { color:var(--coral);font:500 10px DM Mono,monospace; }.quote-block p { margin:38px 0 45px;font-size:clamp(32px,4vw,62px);line-height:1.08;letter-spacing:-3px; }.quote-block b { color:var(--cyan);font:500 10px DM Mono,monospace;letter-spacing:1px; }.fact-board { display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line); }.fact { min-height:110px;display:grid;grid-template-columns:35px 1fr;grid-template-rows:1fr 1fr;align-items:center;border-bottom:1px solid var(--line); }.fact span { grid-row:1/3;color:var(--coral);font:500 11px DM Mono,monospace; }.fact small { color:var(--muted);font:11px DM Mono,monospace; }.fact b { font-size:17px; }
.skill-cloud { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }.skill-tile { min-height:220px;position:relative;padding:22px;border:1px solid var(--line);background:var(--surface);transition:transform .4s var(--ease),border-color .3s,background .4s; }.skill-tile:hover,.skill-tile.touched { transform:translateY(-9px) rotate(-1deg);border-color:var(--cyan);background:var(--bg); }.skill-tile span { color:var(--coral);font:500 10px DM Mono,monospace; }.skill-tile h3 { margin:52px 0 13px;font-size:23px; }.skill-tile p { margin:0;max-width:190px;color:var(--muted);font:12px/1.7 DM Mono,monospace; }.skill-tile i { position:absolute;right:20px;bottom:20px;color:var(--cyan);font-size:20px;font-style:normal;transition:transform .3s; }.skill-tile:hover i { transform:translate(4px,-4px); }
.work-grid { display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:12px; }.work-card { --accent:var(--cyan);position:relative;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:25px;color:var(--ink);text-decoration:none;background:var(--surface);border:1px solid var(--accent);transition:transform .45s var(--ease),color .4s,background .4s; }.work-card:before { content:'';position:absolute;width:68%;aspect-ratio:1;right:-23%;bottom:-35%;border:1px solid var(--accent);border-radius:50%;opacity:.5;transition:transform .6s var(--ease); }.work-card:hover,.work-card.touched { color:var(--bg);background:var(--accent);transform:translateY(-10px); }.work-card:hover:before,.work-card.touched:before { transform:scale(1.45); }.work-card.coral { --accent:var(--coral); }.work-card.lime { --accent:var(--lime); }.work-top,.work-body,.work-link { position:relative;z-index:1; }.work-top { display:flex;justify-content:space-between;font:500 10px DM Mono,monospace; }.work-top b { font-weight:400; }.work-body small { font:500 10px DM Mono,monospace;letter-spacing:1px; }.work-body h3 { margin:14px 0 18px;max-width:300px;font-size:clamp(27px,3.2vw,47px);line-height:.95;letter-spacing:-2px; }.work-body p { max-width:270px;color:var(--muted);font-size:12px;line-height:1.7; }.work-card:hover .work-body p,.work-card.touched .work-body p { color:currentColor;opacity:.75; }.work-link { font:500 11px DM Mono,monospace; }.work-link b { font-size:17px; }.work-ring { position:absolute;inset:auto -18% -30% auto;width:75%;aspect-ratio:1;border:1px solid var(--accent);border-radius:50%;opacity:.35; }
.journey-list { border-top:1px solid var(--line); }.journey-item { display:grid;grid-template-columns:190px 60px 1fr;gap:25px;padding:35px 0;border-bottom:1px solid var(--line); }.journey-period { color:var(--coral);font:500 11px DM Mono,monospace; }.journey-index { color:var(--muted);font:500 11px DM Mono,monospace; }.journey-item h3 { margin:0 0 12px;font-size:23px; }.journey-item p { max-width:650px;margin:0;color:var(--muted);line-height:1.8; }
.site-footer { padding:140px 0 35px; }.footer-label { color:var(--coral);font:500 10px DM Mono,monospace;letter-spacing:1px; }.site-footer h2 { max-width:900px;margin:35px 0 130px;font-size:clamp(50px,9vw,125px);line-height:.86;letter-spacing:-7px; }.site-footer h2 em { color:var(--coral);font-style:normal; }.footer-bottom { display:grid;grid-template-columns:1fr 1fr 1fr;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font:500 10px DM Mono,monospace; }.footer-bottom a { text-decoration:none;text-align:center; }.footer-bottom a:last-child { text-align:right; }.mobile-dock { display:none; }
@keyframes bootLoad { to{width:100%} } @keyframes blink { 50%{opacity:0} } @keyframes orbit { to{transform:rotate(395deg) scaleY(.43)} }
@media (max-width:760px) { body { cursor:auto; }.cursor-dot,.cursor-label { display:none; }.site { padding:0 24px; }.nav-bar { height:76px; }.nav-bar nav,.time-state { display:none; }.nav-actions { gap:0; }.mode-button { cursor:pointer; }.hero { display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:auto;padding:66px 0 70px; }.microline { margin-bottom:48px; }.hero h1 { font-size:clamp(53px,15vw,80px);letter-spacing:-4px; }.typing-caret { height:56px;width:7px;margin-left:6px; }.hero-intro { font-size:14px;margin-bottom:29px; }.hero-actions { align-items:flex-start;flex-direction:column;gap:22px; }.hero-portrait { align-self:center;width:88vw;max-width:390px;margin-top:72px; }.portrait-caption { right:0;bottom:3%; }.hero-foot { position:relative;bottom:auto;margin-top:48px;flex-wrap:wrap; }.hero-foot i { width:35px; }.hero-foot span:last-child { margin-left:0;width:100%; }.panel { padding:72px 0; }.panel-title { grid-template-columns:35px 1fr;gap:10px;margin-bottom:40px; }.panel-title small { grid-column:2; }.about-layout { display:flex;flex-direction:column;gap:40px; }.quote-block p { margin:28px 0 35px;font-size:39px; }.fact { min-height:78px; }.fact b { font-size:15px; }.skill-cloud { grid-template-columns:1fr 1fr;gap:8px; }.skill-tile { min-height:190px;padding:17px; }.skill-tile h3 { margin-top:38px;font-size:18px; }.skill-tile p { font-size:10px; }.work-grid { display:flex;overflow-x:auto;gap:10px;margin-right:-24px;padding-right:24px;scroll-snap-type:x mandatory;scrollbar-width:none; }.work-grid::-webkit-scrollbar { display:none; }.work-card { flex:0 0 86vw;min-height:340px;scroll-snap-align:start; }.journey-item { grid-template-columns:1fr 35px;gap:12px;padding:27px 0; }.journey-period { grid-column:1/2; }.journey-index { grid-column:2;grid-row:1; }.journey-item>div { grid-column:1/3; }.journey-item h3 { font-size:20px; }.site-footer { padding:90px 0 95px; }.site-footer h2 { margin:28px 0 75px;font-size:58px;letter-spacing:-4px; }.footer-bottom { grid-template-columns:1fr;gap:17px; }.footer-bottom a,.footer-bottom a:last-child { text-align:left; }.mobile-dock { position:fixed;z-index:10;bottom:12px;left:12px;right:12px;display:grid;grid-template-columns:repeat(5,1fr);padding:7px;background:color-mix(in srgb,var(--bg) 86%,transparent);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.1); }.mobile-dock a,.mobile-dock button { display:flex;justify-content:center;align-items:center;min-height:34px;border:0;background:none;text-decoration:none;font:500 10px DM Mono,monospace; }.mobile-dock button { color:var(--coral);font-size:18px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important; } }