:root {
    color-scheme: dark;
    --bg:     #181a1b;
    --bg2:    #1b1f22;
    --fg:     #e8e6e3;
    --muted:  #c2a0bd;
    --rule:   #5e3a4d;
    --pink-d: #ff6fae;
    --blue-d: #6fc1f7;
    --card:   rgba(255, 255, 255, 0.045);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body {
    margin: 0;
    min-height: 100%;
    color: var(--fg);
    font-family: "Comic Sans MS", "Segoe UI", "Quicksand", ui-rounded, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}
body {
    background:
        radial-gradient(1300px 950px at 48% -12%, rgba(128, 46, 80, 0.42) 0%, transparent 60%),
        radial-gradient(1000px 800px at 100% 35%, rgba(70, 30, 55, 0.30) 0%, transparent 60%),
        linear-gradient(135deg, #2a1822 0%, #1a1419 55%, #141518 100%);
    background-color: var(--bg);
    background-attachment: fixed;
}

#waifu {
    position: fixed;
    right: 2vw;
    bottom: 0;
    height: 92vh;
    max-width: 46vw;
    object-fit: contain;
    object-position: bottom right;
    opacity: 0.22;
    z-index: 0;
    pointer-events: none;
    filter: saturate(1.05);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%);
            mask-image: linear-gradient(to top, transparent 0%, #000 22%);
}
@media (max-width: 640px) {
    #waifu { height: 70vh; max-width: 90vw; right: 0; opacity: 0.12; }
}

.wrap {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    padding: 8px 20px 90px;
}

.title-bar { text-align: center; padding: 46px 20px 8px; }
h1.site {
    font-size: 30px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.02em;
    display: inline-block;
    color: var(--pink-d);
    text-shadow: 2px 2px 0 #0d0f10, 3px 3px 0 var(--blue-d);
}
h1.site .accent { color: var(--blue-d); }
.tag {
    text-align: center;
    color: var(--muted);
    margin: 6px 0 30px;
    font-size: 14px;
}
.tag .heart { color: var(--pink-d); }

hr {
    border: 0;
    height: 0;
    border-top: 2px dashed var(--rule);
    margin: 22px 0;
}

.profile-card {
    background: var(--card);
    border: 2px solid var(--rule);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 6px 18px rgba(255, 158, 201, 0.18);
    backdrop-filter: blur(2px);
    margin: 20px 0;
    position: relative;
}

.profile-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--pink-d);
    margin: 0 0 8px;
    text-shadow: 1px 1px 0 #0d0f10, 2px 2px 0 var(--blue-d);
}

.profile-greeting {
    font-size: 18px;
    color: var(--blue-d);
    margin: 0 0 16px;
    font-weight: 600;
}

.profile-bio {
    color: var(--fg);
    margin: 0 0 16px;
    line-height: 1.8;
}

.profile-bio .highlight {
    color: var(--pink-d);
    font-weight: 600;
}

.profile-bio .censored {
    color: transparent;
    text-shadow: 0 0 8px var(--pink-d);
    filter: blur(4px);
    user-select: none;
}

.profile-bio pre {
    margin: 4px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 14px !important;
    white-space: pre;
}

.sticker {
    display: inline-block;
    vertical-align: middle;
    height: 1.9em;
    width: auto;
    margin: 0 2px;
}

.skills-section {
    margin: 20px 0;
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.skill-tag {
    background: var(--bg2);
    border: 1px solid var(--rule);
    color: var(--blue-d);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.12s ease;
}

.skill-tag:hover {
    background: var(--pink-d);
    color: #fff;
    border-color: var(--pink-d);
}

.contact-section {
    margin: 24px 0;
    background: var(--card);
    border: 2px solid var(--rule);
    border-radius: 16px;
    padding: 16px 22px;
    box-shadow: 0 6px 18px rgba(154, 212, 255, 0.18);
    position: relative;
}

.contact-title {
    font-size: 14px;
    margin: 0 0 12px;
    letter-spacing: 0.06em;
    color: var(--pink-d);
    font-weight: 700;
}
.contact-title::before { content: "♡ "; }

.contact-text {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
}

.contact-text .sm {
    color: var(--blue-d);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-text .sm:hover {
    color: var(--pink-d);
    text-decoration: underline;
}

.contact-text .sm.copied {
    color: #4ade80;
    animation: pulse 0.3s ease;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.footer {
    margin-top: 36px;
    text-align: center;
    color: var(--pink-d);
    font-style: italic;
    font-size: 18px;
}