:root { --ink:#2d3142; --edge:#dce1e7; --accent:#4f5d75; }
html { scroll-behavior:smooth; }
section { scroll-margin-top:100px; }
a { text-underline-offset:3px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #ef8354;outline-offset:4px; }
.skip-link { position:fixed;top:-100px;left:16px;z-index:3000;padding:12px;background:white; }
.skip-link:focus { top:12px; }
.portfolio-nav { position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px max(20px,calc((100vw - 1140px)/2));background:linear-gradient(-45deg,#2d3142,#4f5d75,#8b8e91,#a0522d);background-size:400% 400%;animation:gradient 15s ease infinite;box-shadow:0 2px 8px #0002; }
.portfolio-brand { color:white;font-weight:700;font-size:1.35rem;text-decoration:none;white-space:nowrap; }
.portfolio-brand span { display:none; }
.portfolio-links { display:flex;gap:22px; }
.portfolio-links a { color:white;text-decoration:none;font-size:.9rem; }
.portfolio-links a:hover { color:#ffd0b8; }
.hero-section { margin-top:0;padding:65px 0;text-align:center; }
.hero-section h1 { font-size:clamp(2rem,4.5vw,3.5rem); }
.hero-section p.lead { max-width:850px;margin:20px auto; }
.portfolio-actions { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px; }
#about img { width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:initial;border-radius:50%!important;border:5px solid #4f5d75;box-shadow:none; }
#about .row { align-items:center; }
#about p { line-height:1.75; }
#projects,#timeline,#contact { background:#f0f2f5; }
#browser-agent { background:#fff; }
#projects .dom-presentation-stack { gap:24px; }
.project-card { background:#fff;border:1px solid var(--edge);border-radius:12px;box-shadow:0 5px 16px #2d31420d; }
.project-card:hover { transform:translateY(-3px);box-shadow:0 10px 24px #2d314218; }
.project-card .card-body { padding:22px; }
.project-card .card-text { color:#4f5d75;line-height:1.65; }
.project-card .card-footer { background:#fff;padding:0 22px 22px;text-align:left; }
.project-live-preview { height:255px;position:relative;overflow:hidden;background:#e8edf2;border-bottom:1px solid var(--edge); }
.project-screenshot { display:block;position:relative;height:255px;overflow:hidden;background:#e8edf2; }
.project-screenshot img { display:block;width:100%;height:100%;object-fit:cover;object-position:center; }
.project-screenshot span { position:absolute;bottom:12px;left:12px;right:12px;width:fit-content;padding:6px 10px;border-radius:6px;background:#ffffffed;color:#2d3142;font-size:.75rem;font-weight:700; }
.kepler-workspace { margin-top:28px;border:1px solid var(--edge);border-radius:12px;background:white;scroll-margin-top:110px; }
.kepler-workspace>summary { padding:20px;cursor:pointer;font-weight:700; }
.kepler-workspace-body { padding:0 20px 20px; }
.kepler-sheet-form label { display:block;font-weight:700;margin-bottom:6px; }
.kepler-sheet-form>div { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px; }
.kepler-sheet-form input { flex:1;min-width:180px;border:1px solid #aebaca;border-radius:6px;padding:10px; }
.kepler-split { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.kepler-split>section { min-width:0; }
.kepler-split h3 { font-size:1rem; }
.kepler-split iframe { width:100%;height:620px;border:1px solid var(--edge);border-radius:8px;background:#f5f7fa; }
.kepler-sheet-placeholder { display:grid;place-items:center;min-height:220px;padding:32px;border:1px dashed #aebaca;border-radius:8px;color:#4f5d75;text-align:center; }
.kepler-split [hidden] { display:none; }
@media(max-width:800px){.kepler-split{grid-template-columns:1fr}.kepler-split iframe{height:480px}}
.project-live-preview iframe { display:block;width:300%;height:765px;border:0;transform:scale(.333333);transform-origin:top left;pointer-events:none;background:#fff; }
.project-live-preview>a { position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;text-decoration:none;background:linear-gradient(transparent 75%,#14243355); }
.project-live-preview>a span { background:#ffffffed;color:#2d3142;border:1px solid #dce1e7;border-radius:6px;padding:6px 10px;font-size:.75rem;font-weight:700; }
.preview-help { max-width:700px;margin:-22px auto 28px;text-align:center;color:#4f5d75; }
.timeline-heading { display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px; }
.timeline-heading h2 { font-size:2rem; }
.timeline-heading a { color:#4f5d75; }
.dom-lede { max-width:720px;text-align:center;margin:0 auto 24px;line-height:1.7;color:#4f5d75; }
.browser-agent-card { max-width:960px;margin:auto;background:#f7f9fb;border:1px solid var(--edge);border-radius:16px; }
#dom-face-host { padding:20px; }
.dom-face { max-width:530px;padding:16px 24px;background:radial-gradient(ellipse at top,#354a64,#1c2638);border:1px solid #62748a;border-radius:30px;box-shadow:0 10px 22px #2d314220;color:#e9f3ff; }
.dom-face-toolbar { display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.8rem; }
.dom-face-toolbar button { border:1px solid #b5c8df;border-radius:20px;background:#ffffff12;color:#fff;padding:7px 12px;cursor:pointer; }
.dom-face-stack { gap:0;max-width:380px;margin:12px auto 0; }
.dom-face-panel { border:0;padding:0;background:transparent; }
.dom-face-panel canvas { height:100px!important;max-height:100px; }
.dom-face-mouth { max-width:200px;width:100%;margin:auto; }
.dom-face-mouth canvas { height:75px!important;max-height:75px; }
.dom-face.is-charts { max-width:680px;border-radius:16px; }
.is-charts .dom-face-stack { max-width:none;gap:18px; }
.is-charts .dom-face-mouth { max-width:none; }
.is-charts .dom-face-panel canvas { height:180px!important;max-height:180px; }
#dom-chart-notes { margin-top:18px;font-size:.88rem;line-height:1.6; }
#dom-chart-notes h3 { font-size:1.2rem; }
#dom-chart-notes a { color:#b9dcff; }
#dom-chart-notes table { width:100%;margin:12px 0;border-collapse:collapse; }
#dom-chart-notes th,#dom-chart-notes td { padding:4px 8px;text-align:left;border-bottom:1px solid #ffffff20; }
#dom-chart-notes caption { color:#cfdbeb;caption-side:top; }
.dom-guide { max-width:960px;margin:20px auto 0;display:grid;gap:10px; }
.dom-guide details { border:1px solid var(--edge);border-radius:10px;background:#f7f9fb; }
.dom-guide summary { padding:16px 20px;cursor:pointer;font-weight:700;color:#2d3142; }
.dom-guide details>div { padding:0 20px 20px;color:#4f5d75;line-height:1.7;max-width:820px; }
.dom-guide details>div>:last-child { margin-bottom:0; }
@media(max-width:800px){.portfolio-nav{padding:12px 16px;flex-wrap:wrap;gap:8px}.portfolio-links{gap:16px;flex-wrap:wrap}.hero-section{padding:42px 0}#about{padding:32px 16px}#about img{max-width:340px}#projects .dom-presentation-stack{grid-template-columns:1fr!important}.timeline-heading{display:block}.dom-face{padding:14px}#dom-face-host{padding:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}