@font-face {
    font-family: 'OtsutomeFont';
    src: url('/fount/OtsutomeFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* (｀・ω・´) 全局样式重置；清除默认边距、统一盒模型、继承字体 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
}

/* (￣▽￣)ノ 根元素默认字体；优先自定义字体，兜底无衬线字体 */
:root {
    font-family: 'OtsutomeFont', sans-serif;
}

/* (๑•̀ㅂ•́)و✧ 页面整体布局；全屏弹性布局，卡片水平垂直居中 */
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #003c75;
    perspective: 1200px;
}

/* (✧∇✧) 卡片主体样式；定义尺寸、外观、3D效果与过渡动画 */
.card {
    width: 700px;
    background: #afd0f2;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), 0 16px 48px rgba(0, 0, 0, 0.22), 0 24px 72px rgba(0, 0, 0, 0.20);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.25s ease-out, box-shadow 0.3s ease;
    will-change: transform;
}

/* (｡•̀ᴗ-)✧ 顶部标签栏；弹性布局，设置背景与顶部圆角 */
.tab-bar {
    display: flex;
    background: #0054a4;
    padding: 8px;
    border-radius: 20px 20px 0 0;
}

/* (◍•ᴗ•◍) 标签按钮基础样式；均分宽度、无背景、交互过渡 */
.tab-btn {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.2s;
}

    /* (✯ᴗ✯) 标签选中状态；高亮背景，突出显示当前页 */
    .tab-btn.active {
        background: #4682B4;
        color: #fff;
    }

/* (๑˃̵ᴗ˂̵)و 内容容器区域；设置内边距、最小高度、相对定位 */
.content-area {
    padding: 40px;
    min-height: 420px;
    position: relative;
}

/* (≧∀≦) 头像默认样式；居中显示，大尺寸，平滑过渡动画 */
#avatar {
    width: 300px;
    height: 300px;
    border-radius: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 2;
    object-fit: cover;
}

/* (´• ω •`)ﾉ 链接页头像样式；缩小尺寸，固定在左侧位置 */
.links-mode #avatar {
    width: 150px;
    height: 150px;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
}

/* (⌒▽⌒)☆ 课程页头像样式；缩小尺寸，固定在右下角位置 */
.course-mode #avatar {
    width: 150px;
    height: 150px;
    right: 40px;
    bottom: 40px;
    left: auto;
    top: auto;
    transform: none;
}

/* (￣ε￣) 内容面板默认；透明隐藏，绝对定位，淡入淡出过渡 */
.tab-content {
    opacity: 0;
    position: absolute;
    transition: opacity 0.4s ease;
}

    /* (｡•̀ᴗ-)✧ 内容面板激活；显示内容，提高层级避免遮挡 */
    .tab-content.active {
        opacity: 1;
        z-index: 1;
    }

/* (๑˃̵ᴗ˂̵) 首页内容布局；水平居中，固定顶部显示 */
#home {
    text-align: center;
    width: 100%;
    top: 320px;
    position: absolute;
}

/* (≧∀≦)ゞ 链接页内容布局；右侧定位，垂直居中 */
#links {
    left: 260px;
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    position: absolute;
}

/* (✧ω✧) 链接项样式；卡片化按钮，基础样式与交互过渡 */
.link-item {
    display: block;
    padding: 12px 20px;
    background: #f5f7fa;
    border-radius: 8px;
    margin: 10px 0;
    text-decoration: none;
    color: #333;
    transition: 0.2s;
}

    /* (´▽`ʃ♡ƪ) 链接悬停效果；背景变色，提升交互体验 */
    .link-item:hover {
        background: #4682B4;
        color: #fff;
    }

/* (◠‿◠)✧ 课程页内容布局；全屏居中，文字居中对齐 */
#course {
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    position: absolute;
}

/* (´･_･`) 禁用链接样式；删除线，灰色，禁止点击状态 */
.link-item.disabled {
    text-decoration: line-through;
    color: #999;
    cursor: not-allowed;
}