:root{
  --bg:#0b0704;
  --ink:#fffaf4;
  --muted:#d7c5b6;
  --muted2:#bfa994;
  --accent:#ff9b00;
  --accent2:#ffc04e;
  --accent-rgb:255,155,0;
  --accent-deep-rgb:136,67,8;
  --accent-hot-rgb:231,78,0;
  --panel:rgba(37,19,9,.76);
  --panel2:rgba(52,27,11,.72);
  --stage-base:#0c0805;
  --surface:rgba(17,10,6,.58);
  --surface-strong:rgba(31,17,8,.78);
  --card-a:rgba(70,36,15,.52);
  --card-b:rgba(28,15,8,.64);
  --shadow:rgba(0,0,0,.70);
}
html[data-palette="cherry"]{
  --accent:#ff4d6d;
  --accent2:#ff9aae;
  --accent-rgb:255,77,109;
  --accent-deep-rgb:125,24,48;
  --accent-hot-rgb:198,31,70;
}
html[data-palette="forest"]{
  --accent:#55c57a;
  --accent2:#a3e7b8;
  --accent-rgb:85,197,122;
  --accent-deep-rgb:29,91,51;
  --accent-hot-rgb:30,128,68;
}
html[data-mode="light"]{
  --bg:#fbf8f2;
  --ink:#241b16;
  --muted:#5e5148;
  --muted2:#77685e;
  --panel:rgba(255,255,255,.78);
  --panel2:rgba(255,255,255,.66);
  --stage-base:#f8f4ed;
  --surface:rgba(255,255,255,.72);
  --surface-strong:rgba(255,255,255,.90);
  --card-a:rgba(255,255,255,.84);
  --card-b:rgba(247,241,232,.86);
  --shadow:rgba(67,42,20,.18);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--stage-base);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,a{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
#stage{position:relative;width:100vw;height:100vh;overflow:hidden;background:
  radial-gradient(560px 530px at -2% 49%,rgba(var(--accent-hot-rgb),.70),rgba(var(--accent-deep-rgb),.28) 42%,transparent 70%),
  radial-gradient(570px 520px at 102% 27%,rgba(var(--accent-rgb),.72),rgba(var(--accent-deep-rgb),.28) 43%,transparent 70%),
  radial-gradient(620px 230px at 50% 106%,rgba(var(--accent-hot-rgb),.52),rgba(var(--accent-deep-rgb),.15) 52%,transparent 76%),
  radial-gradient(900px 600px at 50% 42%,rgba(var(--accent-deep-rgb),.18),transparent 72%),
  var(--stage-base);
  box-shadow:0 0 120px var(--shadow) inset;
}
html[data-mode="light"] #stage{background:
  radial-gradient(620px 560px at -3% 50%,rgba(var(--accent-rgb),.18),transparent 66%),
  radial-gradient(620px 540px at 103% 25%,rgba(var(--accent-rgb),.22),transparent 66%),
  radial-gradient(720px 260px at 50% 107%,rgba(var(--accent-rgb),.13),transparent 72%),
  #f8f4ed;
  box-shadow:0 0 100px rgba(81,55,34,.10) inset;
}
#uiShell{position:absolute;left:50%;top:50%;width:1680px;height:920px;overflow:hidden;transform-origin:center center;color:var(--ink)}
.background-glow{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 14%,transparent 80%,rgba(0,0,0,.18));}
html[data-mode="light"] .background-glow{background:linear-gradient(180deg,rgba(255,255,255,.30),transparent 16%,transparent 84%,rgba(70,45,25,.04))}
.topbar{position:absolute;left:0;right:0;top:0;height:118px;z-index:20}
.main-nav{position:absolute;left:50%;top:31px;transform:translateX(-50%);height:62px;border:1px solid rgba(var(--accent-rgb),.52);border-radius:31px;padding:6px;display:flex;align-items:center;background:var(--surface);box-shadow:0 10px 36px rgba(0,0,0,.18)}
.nav-button{height:48px;padding:0 28px;border:0;border-radius:24px;background:transparent;color:var(--ink);font-weight:620;font-size:20px;cursor:pointer;transition:.18s ease}
.nav-button:hover{background:rgba(var(--accent-rgb),.09)}
.nav-button.active{background:linear-gradient(180deg,rgba(var(--accent-rgb),.46),rgba(var(--accent-deep-rgb),.45));color:var(--ink);box-shadow:0 0 20px rgba(var(--accent-rgb),.24) inset,0 0 24px rgba(var(--accent-rgb),.16)}
html[data-mode="dark"] .nav-button.active{color:#fff3cf}
.icon-circle{width:54px;height:54px;border:1.5px solid rgba(var(--accent-rgb),.56);border-radius:50%;display:grid;place-items:center;background:var(--surface-strong);box-shadow:0 0 22px rgba(var(--accent-rgb),.06) inset;cursor:pointer}
.icon-circle svg{width:26px;height:26px;fill:var(--ink)}
.top-actions{position:absolute;right:54px;top:33px;display:flex;gap:10px;align-items:center}
.action-button{padding:0}
.theme-panel{position:absolute;right:54px;top:98px;width:330px;border:1px solid rgba(var(--accent-rgb),.48);border-radius:20px;padding:16px;background:color-mix(in srgb,var(--surface-strong) 94%,transparent);box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 28px rgba(var(--accent-rgb),.08);backdrop-filter:blur(16px);z-index:40}
.theme-panel[hidden]{display:none}
.theme-panel-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.theme-panel-row+.theme-panel-row{margin-top:14px;padding-top:14px;border-top:1px solid rgba(var(--accent-rgb),.18)}
.theme-label{font-size:14px;color:var(--muted2);font-weight:650;letter-spacing:.02em}
.palette-options{display:flex;gap:6px}
.palette-choice,.mode-choice{border:1px solid transparent;background:transparent;border-radius:14px;color:var(--muted);cursor:pointer;padding:7px 9px;font-size:12px;display:flex;align-items:center;gap:6px}
.palette-choice.active,.mode-choice.active{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.10);color:var(--ink)}
.swatch{width:13px;height:13px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
.amber-swatch{background:#ff9b00}.cherry-swatch{background:#ff4d6d}.forest-swatch{background:#55c57a}
.mode-options{display:flex;gap:6px}
#pages{position:absolute;left:0;right:0;top:118px;bottom:65px;z-index:5}
.page{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease}
.page.active{opacity:1;visibility:visible;pointer-events:auto}
.footer{position:absolute;left:50px;right:50px;bottom:0;height:64px;border-top:1px solid rgba(var(--accent-rgb),.28);display:flex;align-items:center;justify-content:center;gap:18px;z-index:30;color:var(--muted2);background:linear-gradient(180deg,transparent,rgba(8,5,3,.12))}
html[data-mode="light"] .footer{background:linear-gradient(180deg,transparent,rgba(255,255,255,.45))}
.footer button{border:0;background:transparent;color:var(--muted2);font-size:18px;cursor:pointer;padding:5px 0}
.footer button:hover{color:var(--ink)}
.footer i{width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px rgba(var(--accent-rgb),.4)}
/* home */
.home-content{text-align:center;padding-top:78px}
.home-content h1{margin:0;font-size:76px;line-height:1.05;letter-spacing:-2.4px;font-weight:560;color:#fffaf4;text-shadow:0 2px 18px rgba(0,0,0,.26)}
.discipline-line{margin-top:20px;display:flex;justify-content:center;align-items:center;gap:16px;color:#dcc8b6;font-size:30px;font-weight:480}
.discipline-line i{width:8px;height:8px;background:#ef8d00;border-radius:50%;box-shadow:0 0 12px rgba(255,145,0,.35)}
.home-subtitle{margin:14px 0 28px;color:#bca58f;font-size:23px}
.hero-orb{position:relative;width:395px;height:395px;border-radius:50%;border:0;background:transparent;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 0 34px rgba(255,149,0,.22)}
.hero-orb:hover{transform:scale(1.015);box-shadow:0 0 46px rgba(255,149,0,.34)}
.earth-orb{
  background-image:url("assets/home-earth-orb.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size:115%;
}.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}
.start-row{margin-top:18px;font-size:20px;color:#c7ad95}
.start-row button{margin-left:12px;padding:10px 22px;border-radius:22px;border:1.5px solid rgba(255,157,0,.72);background:rgba(70,36,11,.48);color:#ffd16d;font-size:18px;cursor:pointer}

/* projects — fixed page, horizontally sliding card pages, no scrollbar */
.project-slider-shell{position:absolute;left:34px;right:34px;top:18px;bottom:12px}
.project-slider{position:absolute;left:24px;right:24px;top:0;bottom:28px;overflow:hidden;outline:none;touch-action:pan-y;cursor:grab}
.project-slider.dragging{cursor:grabbing}
.project-track{height:100%;display:flex;transition:transform .46s cubic-bezier(.22,.72,.18,1);will-change:transform}
.project-slide{min-width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:18px;padding:1px}
.project-card{position:relative;border:1.5px solid rgba(255,149,0,.78);border-radius:18px;background:linear-gradient(135deg,rgba(70,36,15,.52),rgba(28,15,8,.64));box-shadow:0 0 22px rgba(255,135,0,.06) inset;overflow:hidden;display:grid;grid-template-columns:165px 1fr;align-items:center;padding:22px 22px 20px 18px;min-width:0}
.project-logo{width:138px;height:138px;object-fit:contain;justify-self:center;align-self:center}
.project-logo.transparent-logo{filter:drop-shadow(0 8px 14px rgba(0,0,0,.30))}
.project-logo.screenshot-logo{border-radius:18px;object-fit:cover;mix-blend-mode:normal}
.project-logo.generated-logo{border-radius:26px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.project-logo.docker-logo{width:152px;height:138px}
.card-copy{align-self:center;padding-right:4px;min-width:0}
.card-copy h2{margin:0 0 12px;font-size:22px;line-height:1.22;font-weight:680;color:#fffaf5;padding-right:92px}
.card-copy p{margin:0;color:#d7c6b7;font-size:16px;line-height:1.38}
.private-note{margin-top:7px!important;color:#f0c78f!important;font-size:13px!important;line-height:1.3!important}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.tags span{border:1px solid rgba(255,171,58,.52);border-radius:17px;padding:6px 12px;color:#ead9cb;font-size:13px;line-height:1;background:rgba(14,9,6,.36)}
.card-actions{position:absolute;right:16px;top:16px;display:flex;gap:8px}
.small-icon{width:43px;height:43px;border-radius:50%;border:1px solid rgba(255,153,0,.48);background:rgba(19,11,7,.72);display:grid;place-items:center;position:relative}
a.small-icon:hover{border-color:#ffb13b;background:rgba(65,34,11,.78)}
.github-link:before{content:"";width:22px;height:22px;background:#fffaf4;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .8a11.4 11.4 0 0 0-3.6 22.2c.6.1.8-.3.8-.6v-2.2c-3.4.7-4.1-1.4-4.1-1.4-.5-1.4-1.3-1.7-1.3-1.7-1.1-.8.1-.8.1-.8 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.6-1.4-5.6-6.1 0-1.3.5-2.4 1.2-3.3-.1-.3-.5-1.6.1-3.3 0 0 1-.3 3.4 1.3a11.7 11.7 0 0 1 6.2 0c2.4-1.6 3.4-1.3 3.4-1.3.6 1.7.2 3 .1 3.3.8.9 1.2 2 1.2 3.3 0 4.7-2.9 5.8-5.6 6.1.4.4.8 1.1.8 2.1v3.1c0 .3.2.7.8.6A11.4 11.4 0 0 0 12 .8Z'/%3E%3C/svg%3E") center/contain no-repeat}
.external-link:before{content:"↗";font-size:26px;line-height:1;color:#fff8f1;transform:translateY(-1px)}
.website-link:before{content:"";width:23px;height:23px;border:2px solid #fff8f1;border-radius:50%}
.website-link:after{content:"";position:absolute;width:12px;height:2px;background:#fff8f1;box-shadow:0 -6px 0 rgba(255,248,241,.92),0 6px 0 rgba(255,248,241,.92)}
.private-repo-icon{opacity:.88;cursor:default}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:86px;border:1px solid rgba(255,153,0,.42);border-radius:24px;background:rgba(19,11,7,.68);color:#ffd06a;font-size:52px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:3;transition:.18s ease;padding:0 0 6px}
.slide-arrow:hover{background:rgba(80,40,9,.72);border-color:#ffad2d;box-shadow:0 0 22px rgba(255,145,0,.16)}
.slide-arrow:disabled{opacity:.22;cursor:default;box-shadow:none}
.slide-prev{left:-8px}.slide-next{right:-8px}
.slide-indicator{position:absolute;left:50%;bottom:1px;transform:translateX(-50%);height:18px;display:flex;gap:10px;align-items:center}
.slide-indicator span{display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,210,148,.28);transition:.2s ease}
.slide-indicator span.active{width:24px;border-radius:5px;background:#ff9b00;box-shadow:0 0 12px rgba(255,150,0,.48)}

/* research */
.research-intro{text-align:center;padding-top:10px;color:#ddcabb;font-size:23px;line-height:1.36}
.research-grid{position:absolute;left:82px;right:82px;top:84px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:186px 207px 207px;gap:18px}
.research-card{position:relative;border:1.5px solid rgba(255,151,0,.72);border-radius:18px;background:linear-gradient(130deg,rgba(69,35,14,.54),rgba(34,18,9,.62));box-shadow:0 0 28px rgba(255,142,0,.04) inset;padding:20px 162px 18px 116px;overflow:hidden}
.research-card.research-wide{grid-column:1 / 3;padding-right:196px;padding-left:166px}
.paper-icon{position:absolute;left:22px;top:27px;width:70px;height:70px;border-radius:50%;border:1.5px solid rgba(255,154,0,.72);display:grid;place-items:center;color:#ffd25c;font-size:36px;background:rgba(82,42,13,.36);box-shadow:0 0 18px rgba(255,142,0,.14)}
.research-wide .paper-icon{left:34px;top:34px;width:78px;height:78px}
.paper-copy{min-width:0}
.paper-kind{display:inline-flex;border:1px solid rgba(255,154,0,.70);border-radius:16px;padding:5px 12px;color:#ffd469;font-size:13px;line-height:1;background:rgba(117,59,7,.22);margin-bottom:8px}
.paper-copy h2{margin:0;color:#fffaf5;font-size:18px;line-height:1.27;font-weight:650}
.research-wide .paper-copy h2{font-size:21px}
.paper-copy p{margin:8px 0 0;color:#c9b6a7;font-size:14px;line-height:1.34}
.research-wide .paper-copy p{font-size:15px}
.paper-actions{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;gap:8px;align-items:center}
.paper-actions.stacked-actions{flex-direction:column}
.paper-link{height:48px;min-width:110px;padding:0 18px;border:1.5px solid rgba(255,158,0,.78);border-radius:24px;display:flex;align-items:center;justify-content:center;gap:9px;background:rgba(64,33,10,.34);font-size:16px;color:#fff8ef}
.paper-link:hover{background:rgba(119,63,10,.35);box-shadow:0 0 18px rgba(255,142,0,.12)}
.paper-link span{color:#ffd45d}
.presentation-link{min-width:146px}

/* about — content starts immediately; no repeated page title */
.about-content{text-align:center;padding-top:88px}
.about-intro,.about-content>p{margin:0 auto;color:#ddcabc;font-size:25px;line-height:1.48;font-weight:430}
.about-divider{width:1315px;height:1px;background:rgba(255,152,0,.28);margin:38px auto 26px}
.about-content h2{margin:0 0 14px;color:#ffc34d;font-size:35px;font-weight:630;text-shadow:0 0 14px rgba(255,143,0,.16)}

/* modal */
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.64);z-index:80;display:grid;place-items:center;backdrop-filter:blur(9px)}
.modal-backdrop[hidden]{display:none}
.modal{position:relative;width:760px;padding:44px 48px;border-radius:24px;border:1px solid rgba(255,153,0,.65);background:linear-gradient(145deg,rgba(53,28,13,.98),rgba(19,11,7,.98));box-shadow:0 22px 80px rgba(0,0,0,.5),0 0 40px rgba(255,137,0,.1)}
.modal h2{margin:0 0 18px;font-size:34px;color:#fffaf4}
.modal p{margin:0;font-size:19px;line-height:1.6;color:#d9c7b8}
.modal-close{position:absolute;right:18px;top:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,153,0,.45);background:rgba(0,0,0,.25);font-size:27px;line-height:1;cursor:pointer}
.project-slide:nth-child(2){grid-template-columns:repeat(6,1fr)}
.project-slide:nth-child(2) .project-card{grid-column:span 2}
.project-slide:nth-child(2) .project-card:nth-child(4){grid-column:2 / span 2}
.project-slide:nth-child(2) .project-card:nth-child(5){grid-column:4 / span 2}

/* Theme-aware overrides */
.home-content h1{color:var(--ink)}
.discipline-line{color:var(--muted)}
.discipline-line i{background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.35)}
.home-subtitle{color:var(--muted2)}
.hero-orb{box-shadow:0 0 34px rgba(var(--accent-rgb),.24),0 0 0 2px rgba(var(--accent-rgb),.26)}
.hero-orb:hover{box-shadow:0 0 48px rgba(var(--accent-rgb),.38),0 0 0 2px rgba(var(--accent-rgb),.38)}
.start-row{color:var(--muted2)}
.start-row button{border-color:rgba(var(--accent-rgb),.72);background:rgba(var(--accent-deep-rgb),.34);color:var(--accent2)}

.project-card{border-color:rgba(var(--accent-rgb),.78);background:linear-gradient(135deg,var(--card-a),var(--card-b));box-shadow:0 0 22px rgba(var(--accent-rgb),.06) inset}
.card-copy h2{color:var(--ink)}
.card-copy p{color:var(--muted)}
.private-note{color:color-mix(in srgb,var(--accent2) 70%,var(--ink))!important}
.tags span{border-color:rgba(var(--accent-rgb),.52);color:var(--muted);background:rgba(var(--accent-deep-rgb),.10)}
.small-icon{border-color:rgba(var(--accent-rgb),.48);background:var(--surface-strong)}
a.small-icon:hover{border-color:var(--accent2);background:rgba(var(--accent-rgb),.10)}
.github-link:before{background:var(--ink)}
.external-link:before{color:var(--ink)}
.website-link:before{border-color:var(--ink)}
.website-link:after{background:var(--ink);box-shadow:0 -6px 0 color-mix(in srgb,var(--ink) 92%,transparent),0 6px 0 color-mix(in srgb,var(--ink) 92%,transparent)}
.slide-arrow{border-color:rgba(var(--accent-rgb),.42);background:var(--surface-strong);color:var(--accent2)}
.slide-arrow:hover{background:rgba(var(--accent-rgb),.12);border-color:var(--accent2);box-shadow:0 0 22px rgba(var(--accent-rgb),.16)}
.slide-indicator span{background:rgba(var(--accent-rgb),.24)}
.slide-indicator span.active{background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.48)}

.research-intro{color:var(--muted)}
.research-card{border-color:rgba(var(--accent-rgb),.72);background:linear-gradient(130deg,var(--card-a),var(--card-b));box-shadow:0 0 28px rgba(var(--accent-rgb),.04) inset}
.paper-icon{border-color:rgba(var(--accent-rgb),.72);color:var(--accent2);background:rgba(var(--accent-deep-rgb),.18);box-shadow:0 0 18px rgba(var(--accent-rgb),.14)}
.paper-kind{border-color:rgba(var(--accent-rgb),.70);color:var(--accent2);background:rgba(var(--accent-deep-rgb),.14)}
.paper-copy h2{color:var(--ink)}
.paper-copy p{color:var(--muted)}
.paper-link{border-color:rgba(var(--accent-rgb),.78);background:rgba(var(--accent-deep-rgb),.12);color:var(--ink)}
.paper-link:hover{background:rgba(var(--accent-rgb),.12);box-shadow:0 0 18px rgba(var(--accent-rgb),.12)}
.paper-link span{color:var(--accent2)}

.about-intro,.about-content>p{color:var(--muted)}
.about-divider{background:rgba(var(--accent-rgb),.28)}
.about-content h2{color:var(--accent2);text-shadow:0 0 14px rgba(var(--accent-rgb),.16)}

.modal-backdrop{background:rgba(0,0,0,.58)}
html[data-mode="light"] .modal-backdrop{background:rgba(40,30,20,.26)}
.modal{border-color:rgba(var(--accent-rgb),.65);background:linear-gradient(145deg,var(--surface-strong),var(--card-b));box-shadow:0 22px 80px rgba(0,0,0,.28),0 0 40px rgba(var(--accent-rgb),.10)}
.modal h2{color:var(--ink)}
.modal p{color:var(--muted)}
.modal-close{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.07);color:var(--ink)}
.modal-actions{display:flex;gap:12px;margin-top:24px}
.modal-actions[hidden]{display:none}
.contact-link{min-width:120px;height:44px;padding:0 18px;border:1px solid rgba(var(--accent-rgb),.55);border-radius:22px;display:flex;align-items:center;justify-content:center;background:rgba(var(--accent-rgb),.08);color:var(--ink);font-weight:620}
.contact-link:hover{background:rgba(var(--accent-rgb),.16);border-color:var(--accent2)}
.linkedin-contact{background:rgba(var(--accent-rgb),.14)}

/* Light mode refinements */
html[data-mode="light"] .main-nav,
html[data-mode="light"] .icon-circle,
html[data-mode="light"] .theme-panel,
html[data-mode="light"] .project-card,
html[data-mode="light"] .research-card,
html[data-mode="light"] .modal{box-shadow:0 10px 30px rgba(75,50,30,.08),0 0 20px rgba(var(--accent-rgb),.04) inset}
html[data-mode="light"] .nav-button.active{background:linear-gradient(180deg,rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.10));color:var(--ink)}
html[data-mode="light"] .project-card,
html[data-mode="light"] .research-card{backdrop-filter:blur(10px)}
html[data-mode="light"] .small-icon{background:rgba(255,255,255,.80)}
html[data-mode="light"] .slide-arrow{background:rgba(255,255,255,.86)}
html[data-mode="light"] .paper-link{background:rgba(255,255,255,.58)}
html[data-mode="light"] .earth-orb{filter:saturate(.96) brightness(1.02)}

/* =========================================================
   MOBILE / IPHONE LAYOUT
   Desktop rules above remain unchanged.
   ========================================================= */
@media (max-width: 980px){
  html,body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }

  #stage{
    width:100vw;
    height:100vh;
    height:100dvh;
    overflow:hidden;
  }

  #uiShell{
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    transform:none!important;
    transform-origin:top left!important;
    overflow:hidden;
  }

  .topbar{
    height:116px;
    padding-top:env(safe-area-inset-top,0px);
  }

  .main-nav{
    left:16px;
    right:16px;
    top:10px;
    transform:none;
    width:auto;
    height:50px;
    padding:4px;
    border-radius:26px;
    justify-content:space-between;
  }

  .nav-button{
    flex:1 1 0;
    min-width:0;
    height:40px;
    padding:0 8px;
    border-radius:20px;
    font-size:14px;
    font-weight:650;
  }

  .top-actions{
    left:50%;
    right:auto;
    top:68px;
    transform:translateX(-50%);
    gap:10px;
  }

  .icon-circle{
    width:40px;
    height:40px;
    border-width:1px;
  }

  .icon-circle svg{
    width:18px;
    height:18px;
  }

  .theme-panel{
    position:absolute;
    left:12px;
    right:12px;
    top:112px;
    width:auto;
    max-width:360px;
    margin-left:auto;
    padding:14px;
    border-radius:18px;
  }

  .theme-panel-row{gap:10px}
  .palette-options,.mode-options{gap:4px}
  .palette-choice,.mode-choice{padding:7px 8px;font-size:11px}

  #pages{
    left:0;
    right:0;
    top:116px;
    bottom:58px;
  }

  .page{
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
  }

  .page::-webkit-scrollbar,
  .project-slider::-webkit-scrollbar,
  .project-card::-webkit-scrollbar{display:none}

  .footer{
    left:12px;
    right:12px;
    bottom:env(safe-area-inset-bottom,0px);
    height:56px;
    gap:6px;
    padding:0 2px;
    white-space:nowrap;
  }

  .footer button{font-size:10.5px;padding:5px 1px}
  .footer i{width:3px;height:3px;flex:0 0 auto}

  /* Mobile home */
  #home{overflow:hidden}
  .home-content{
    min-height:100%;
    padding:20px 18px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
  }

  .home-content h1{
    margin-top:10px;
    font-size:clamp(34px,11vw,50px);
    line-height:1.05;
    letter-spacing:-1.3px;
    max-width:92vw;
    text-wrap:balance;
  }

  .discipline-line{
    max-width:94vw;
    margin:14px auto 0;
    gap:7px 9px;
    flex-wrap:wrap;
    font-size:15px;
    line-height:1.28;
  }

  .discipline-line i{width:5px;height:5px}

  .home-subtitle{
    max-width:90vw;
    margin:12px auto 18px;
    font-size:15px;
    line-height:1.45;
  }

  .hero-orb{
    width:min(82vw,320px);
    height:min(82vw,320px);
    margin-top:12px;
    flex:0 0 auto;
  }

  .earth-orb{background-size:118%}
  .start-row{display:none}

  /* Mobile projects: compact vertical cards */
  #projects{padding-bottom:10px}
  .project-slider-shell{
    position:static;
    padding:14px 14px 18px;
  }

  .project-slider{
    position:static;
    inset:auto;
    overflow:visible;
    height:auto;
    touch-action:auto;
    cursor:default;
  }

  .project-slider.dragging{cursor:default}

  .project-track{
    width:auto;
    height:auto;
    display:block;
    padding:0;
    transform:none!important;
    transition:none!important;
    will-change:auto;
  }

  .project-slide,
  .project-slide:nth-child(2){
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    height:auto;
  }

  .project-slide + .project-slide{margin-top:14px}

  .project-card,
  .project-slide:nth-child(2) .project-card,
  .project-slide:nth-child(2) .project-card:nth-child(4),
  .project-slide:nth-child(2) .project-card:nth-child(5){
    width:100%;
    height:auto;
    min-width:0;
    display:grid;
    grid-template-columns:86px 1fr;
    align-items:start;
    padding:18px 16px 16px 14px;
    border-radius:20px;
    overflow:visible;
    scroll-snap-align:none;
  }

  .project-logo,
  .project-logo.docker-logo{
    width:72px;
    height:72px;
    align-self:flex-start;
    justify-self:center;
    margin:2px 0 0;
  }

  .project-logo.generated-logo{border-radius:18px}
  .project-logo.screenshot-logo{border-radius:14px}

  .card-copy{
    width:100%;
    padding:0;
    align-self:auto;
    text-align:left;
  }

  .card-copy h2{
    margin:0 0 8px;
    padding-right:82px;
    font-size:18px;
    line-height:1.17;
  }

  .card-copy p{
    font-size:13px;
    line-height:1.42;
  }

  .private-note{margin-top:7px!important;font-size:11.5px!important}
  .tags{gap:6px;margin-top:10px}
  .tags span{padding:5px 8px;font-size:10px}

  .card-actions{right:12px;top:10px;gap:6px}
  .small-icon{width:36px;height:36px}
  .github-link:before{width:18px;height:18px}
  .external-link:before{font-size:21px}
  .website-link:before{width:18px;height:18px}
  .slide-arrow,.slide-indicator{display:none!important}

  /* Mobile research */
  #research{padding:0 0 20px}

  .research-intro{
    padding:18px 18px 14px;
    font-size:16px;
    line-height:1.5;
  }

  .research-grid{
    position:static;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0 14px 90px;
  }

  .research-card,
  .research-card.research-wide{
    position:relative;
    grid-column:auto;
    min-height:0;
    padding:16px 14px 16px 68px;
    border-radius:18px;
    overflow:visible;
  }

  .paper-icon,
  .research-wide .paper-icon{left:14px;top:16px;width:40px;height:40px;font-size:22px}
  .paper-kind{padding:4px 9px;font-size:10px;margin-bottom:7px}

  .paper-copy h2,
  .research-wide .paper-copy h2{
    font-size:14px;
    line-height:1.28;
  }

  .paper-copy p,
  .research-wide .paper-copy p{
    margin-top:7px;
    font-size:12.5px;
    line-height:1.42;
  }

  .paper-actions,
  .paper-actions.stacked-actions{
    position:static;
    transform:none;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:7px;
    margin-top:12px;
  }

  .paper-link,.presentation-link{min-width:0;height:38px;padding:0 13px;border-radius:19px;font-size:12px}

  /* Mobile about */
  .about-content{padding:28px 18px 90px}
  .about-content h2{margin-bottom:10px;font-size:27px}
  .about-intro,.about-content>p{max-width:100%;font-size:15px;line-height:1.52}
  .about-divider{width:100%;margin:24px auto 20px}

  /* Mobile modal */
  .modal-backdrop{position:fixed;inset:0;padding:16px}
  .modal{width:min(100%,520px);max-height:78dvh;overflow-y:auto;padding:30px 20px 24px;border-radius:20px}
  .modal h2{margin-bottom:12px;font-size:26px}
  .modal p{font-size:15px;line-height:1.55}
  .modal-close{right:12px;top:10px;width:36px;height:36px;font-size:23px}
  .modal-actions{gap:8px;margin-top:18px}
  .contact-link{min-width:0;flex:1;height:40px;padding:0 12px;font-size:13px}
}

/* Short phones such as iPhone SE */
@media (max-width: 980px) and (max-height: 650px){
  .topbar{height:104px}
  .top-actions{top:59px}
  #pages{top:104px;bottom:48px}
  .footer{height:48px}
  .home-content{padding-top:10px}
  .home-content h1{font-size:31px}
  .discipline-line{margin-top:9px;font-size:12px}
  .home-subtitle{margin:8px auto 10px;font-size:12px}
  .hero-orb{width:200px;height:200px}
}

/* iPhone landscape: keep controls on one compact row */
@media (max-width: 980px) and (orientation: landscape){
  .topbar{height:66px}
  .main-nav{left:12px;right:220px;top:9px;height:46px}
  .top-actions{left:auto;right:12px;top:13px;transform:none}
  .icon-circle{width:34px;height:34px}
  .icon-circle svg{width:16px;height:16px}
  .theme-panel{left:auto;right:12px;top:58px;width:330px}
  #pages{top:66px;bottom:46px}
  .footer{height:46px}
  .home-content{padding-top:10px}
  .home-content h1{font-size:34px}
  .discipline-line{margin-top:8px;font-size:12px}
  .home-subtitle{margin:8px auto 10px;font-size:12px}
  .hero-orb{width:min(38vh,205px);height:min(38vh,205px)}
}