:root {
    --bg: #f9f9fc;
    --fg: #1c2023;
    --pri: #6e533a;
    --on-pri: #ffffff;
    --pri-cnt: #fed9b8;
    --fg-var: #535557;
    --box: #e2e6eb;
}
[data-theme="dark"] {
    --bg: #0c0e10;
    --fg: #e2e6eb;
    --pri: #ffeada;
    --on-pri: #6e533a;
    --pri-cnt: #fed9b8;
    --fg-var: #a8abb0;
    --box: #22262a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Manrope', system-ui, sans-serif;
    background: var(--bg); color: var(--fg);
    height: 100vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    transition: background .3s, color .3s; overflow: hidden;
}
a, button { text-decoration: none; border: none; background: none; cursor: pointer; color: inherit; font-family: inherit; }

.icon {
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}
.icon-sun      { mask-image: url(assets/sun.svg);      -webkit-mask-image: url(assets/sun.svg); }
.icon-moon     { mask-image: url(assets/moon.svg);     -webkit-mask-image: url(assets/moon.svg); }
.icon-download { mask-image: url(assets/download.svg); -webkit-mask-image: url(assets/download.svg); }
.icon-github   { mask-image: url(assets/github.svg);   -webkit-mask-image: url(assets/github.svg); }
.icon-linkedin { mask-image: url(assets/linkedin.svg); -webkit-mask-image: url(assets/linkedin.svg); }
.icon-forgejo  { mask-image: url(assets/forgejo.svg);  -webkit-mask-image: url(assets/forgejo.svg); }
.icon-email    { mask-image: url(assets/email.svg);    -webkit-mask-image: url(assets/email.svg); }
.icon-key      { mask-image: url(assets/key.svg);      -webkit-mask-image: url(assets/key.svg); }

nav { position: fixed; top: 0; right: 0; padding: 2rem; z-index: 50; }
#theme-toggle { color: var(--pri); transition: opacity .2s; }
#theme-toggle:hover { opacity: .7; }
[data-theme="light"] .icon-moon,
[data-theme="dark"]  .icon-sun  { display: none; }

main { text-align: center; padding: 0 1.5rem; max-width: 42rem; }
h1 { font-size: 3.5rem; font-weight: 800; letter-spacing: -.025em; line-height: 1; margin-bottom: .5rem; }
.sub { font-size: .75rem; font-weight: 500; color: var(--fg-var); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3rem; }

.btn { display: inline-flex; align-items: center; gap: .75rem; padding: 1rem 2rem; background: var(--pri); color: var(--on-pri); border-radius: .5rem; font-weight: 700; transition: transform .1s, opacity .2s; margin-bottom: 3rem; }
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.98); }

footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
.soc { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.box { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: .5rem; background: var(--box); color: var(--pri); transition: background .2s; }
.soc:hover .box { background: var(--pri-cnt); }
.lbl { font-size: 9px; font-weight: 700; letter-spacing: .15em; color: var(--fg-var); text-transform: uppercase; }