index.css

html{
    height: 100%;
    width: 100%;
    /* 整页都是 position: fixed 的单屏版式，本就不该出现任何滚动条。
       而滚动条一旦出现/消失，视口宽度就会变，页面上所有 vw 单位
       （#so_fram 的 36vw、--r 的 4vw、各种 clamp(...vw...) 字号）会整体重算 ——
       表现就是「拖动框选到页面边缘时，宽度突然跳一下」。
       放在 html 上而不是 body：根元素的 overflow 会传播给视口，
       且根元素自身的 used value 会回到 visible，所以不会裁掉任何内容。 */
    overflow: hidden;
}
body {
      background-color: white;
      background-image: url("https://i.imgtg.com/2023/03/09/YQdA1.png");
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      box-sizing: border-box;
      font-family: 楷体 !important;
      /* 这页没有需要选中的正文（只有图标和一个搜索框），
         直接禁掉选中 —— 拖动框选会触发浏览器自动滚动与选中高亮，
         正是上一条要防的那个「视口宽度被搅动」的触发动作。
         搜索框要保留可选中、可编辑，见 #kw 的 user-select: text。 */
      -webkit-user-select: none;
      user-select: none;
}
.wv-a-alarm[data-v-09fa1830] {
    font-size: 0.9em !important;
}
.wv-lt-refresh a[data-v-4b9dcab4]  {
    color: rgb(218 227 80) !important;
}
/*a标签悬浮后操作*/
a {
    color: black;
    font-size: 20px;
    font-family: 楷体;
}

a:link {
    color: black;
    text-decoration: none;
}
a:hover {
    color: #78ff62;
    text-decoration: none;
}
input {
    font-family: 楷体;
    font-size: 18px;
}
/*天气详情不显示*/
/*div[data-v-db6ccf64] {*/
/*  visibility: hidden;*/
/*}*/
/*显示天气详情，修改尺寸以及背景为空*/

#weather-view-he[data-v-db6ccf64] {
    height: 334px !important;
    background-image: none !important;
    box-shadow: rgb(0 0 0 / 38%) 5px 6px 14px !important;
}
[data-v-db6ccf64] {
    left: -20px !important;
}
/*当屏幕足够小的时候，天气详情不显示*/
/*div[data-v-db6ccf64] {*/
/*  visibility: hidden;*/
/*}*/


/*右上角：foryouos 品牌标（瓶子），透明底。
  不再复用 .image_logo —— 那套会给它 65px 见方 + 13px 透明边框 + 15px 外边距，
  和“小一点、贴角”的诉求正相反；这里独立控制尺寸与边距。
  按高度定尺寸（瓶子是细长的，30:52），width:auto 让它等比缩放。 */
.right_logo2{
    position: fixed;
    top: clamp(12px, 1.1vw, 22px);
    right: clamp(14px, 1.2vw, 24px);
    height: clamp(34px, 2.2vw, 46px);
    width: auto;
    display: block;
    opacity: .88;
    transition: transform .2s ease, opacity .2s ease;
}
.right_logo2:hover{
    opacity: 1;
    transform: scale(1.1);
}
.right_logo3{
    position: fixed;
    top: 61%;
    right: -1%;
    width: 20%;
}
.frame{
  font-size:80%;
}

#logo {
    height: 120px;
    position: absolute;
    left: 40%;
    top: 190px;
    align-content: center;

}


/*图片和中间*/
.image_logo{
    width: 65px;
    height: 65px;
    float: left;
    margin: 15px;
    border: 13px solid rgba(0,0,0,0);
    border-radius: 20px;
    display: block;
}

#top_colum,#movie {
    display: inline-block;
    color: black;
    position: fixed;
    /* 内容列统一左对齐到视口 10%，与搜索区同一条竖线；
       右侧插画人物约占据视口 50% 之后，此处不再侵入 */
    left: 10%;
    top: 46%;
    z-index: 200;
    height: 60px;
    font: 17px/26px Arial,sans-serif;
    min-width: 800px;
    max-height: 1080px;

}
#movie{
    top: 65%;
}
/* ======================== 站点标识 ======================== */
/* 放大镜 + 「foryouos 搜索」。**纯静态标识，不可点击**（是 span 不是 a），
   所以没有 text-decoration / hover / 手型指针。
   绝对定位浮在搜索区上方 —— 不占文档流，搜索框的位置和整页版式完全不受影响；
   left:0 与 .so-engines 共用同一条左对齐线。 */
#site-logo {
    position: absolute;
    left: 0;
    bottom: calc(100% + 14px);
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
#site-logo img {
    display: block;
    width: clamp(30px, 2.2vw, 40px);
    height: auto;
}
#site-logo .sl-text {
    display: flex;
    align-items: baseline;    /* 文字基线对齐；「搜索」没有底衬了，用 baseline 最自然 */
    gap: 7px;
    font-family: 楷体, KaiTi, serif;
    line-height: 1;
}
#site-logo .sl-name {
    font-size: clamp(17px, 1.25vw, 22px);
    font-weight: 700;
    letter-spacing: .02em;
    color: #2f7a45;
}
/* 「搜索」二字**不带底衬**（曾按需求加过白底，用户反馈那块白在背景上很突兀，改回透明）。
   去掉白底后文字恢复成浅一档的绿 —— 它是 "foryouos" 的副标题，视觉上就该轻一级。 */
#site-logo .sl-sub {
    font-size: clamp(13px, .95vw, 16px);
    color: #6fbf8a;
}

/* ======================== 搜索区 ======================== */
/* 定位策略：左边界与下方图标列对齐（视口 10%），宽度取 40vw，
   于是右边界恒定落在视口 50% —— 实测背景插画人物的最左沿约在 52%，
   因此搜索框在任何视口宽度下都不会压到插画（这是「突出」的前提）。 */
#so_fram {
    position: fixed;
    left: 10%;
    top: 24%;
    width: 36vw;
    max-width: 820px;     /* 超宽屏封顶，避免输入框被拉得过长 */
    z-index: 300;
}

/* ---- 搜索引擎切换标签 ---- */
.so-engines {
    display: flex;
    flex-wrap: wrap;
    /* 与输入框、下方图标列保持同一条左对齐竖线 */
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.so-chip {
    padding: 5px 15px;
    font-family: 楷体, KaiTi, serif;
    font-size: 15px;
    line-height: 21px;
    color: #3f6b4d;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #b1ddbc;
    border-radius: 999px;
    cursor: pointer;
    outline: none;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.so-chip:hover {
    color: #2f7a45;
    background: #eaf7ee;
    transform: translateY(-1px);
}
.so-chip:focus-visible {
    box-shadow: 0 0 0 3px rgba(120, 255, 98, .55);
}
.so-chip.is-active {
    color: #fff;
    font-weight: bold;
    background: #6fbf8a;
    border-color: #6fbf8a;
    box-shadow: 0 4px 10px rgb(0 0 0 / 18%);
}

/* ---- 输入框 + 搜索按钮 ---- */
#frame_so {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}
.so-input-wrap {
    position: relative;      /* 引擎 LOGO / 清空按钮 / 联想下拉的定位基准 */
    /* 自动撑满剩余宽度：搜索框宽度 = 容器宽 - 间距 - 按钮宽 */
    flex: 1 1 320px;
    min-width: 0;
}
/* 输入框左侧的当前引擎 LOGO（SVG 由 search.js 注入） */
.so-logo {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;              /* 显式抬到输入框之上（#kw 是普通流内元素，本就画在它下面） */
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    pointer-events: none;
}
.so-logo svg {
    display: block;
    width: 100%;
    height: 100%;
}
@keyframes fy-logo-in {
    from { opacity: 0; transform: translateY(-50%) scale(.72); }
    to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
.so-logo.is-swap {
    animation: fy-logo-in .22s ease;
}
.so-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;              /* 与 .so-logo 同理，显式压在输入框之上 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 21px;
    line-height: 1;
    color: #8aa79a;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    transition: color .15s, background .15s;
}
.so-clear[hidden] {
    display: none;
}
.so-clear:hover {
    color: #2f7a45;
    background: #eaf7ee;
}

/* 输入框阴影：大范围柔和投影，让搜索框从背景里「浮」起来 */
input[type="text"] {
  box-shadow: 0 13px 28px rgb(0 0 0 / 22%);
}
#kw {
    width: 100%;
    box-sizing: border-box;
    height: 62px;
    padding: 0 46px 0 54px;      /* 左侧留出 28px LOGO + 间隙 */
    -webkit-user-select: text;   /* body 全局禁了选中，输入框要单独放开 */
    user-select: text;
    font-family: 楷体, KaiTi, serif;
    font-size: 18px;
    color: #1f2d24;
    /* 半透明白底：既与青绿背景拉开对比，又不会像纯白那样硬切背景插画。
       （曾一度改成透明，后按需求恢复 —— 透明后输入框只剩一圈边框，
       在插画上"不像一个能输入的控件"，还是需要这层底来立住。）
       ⚠ 这里只放 background，不要再加 backdrop-filter / filter ——
       二者都会把 #kw 变成「按 z-index:0 参与绘制的定位元素」，
       而 #kw 在 DOM 里排在 .so-logo 之后，于是整个输入框会画在 LOGO 上面，
       表现就是「只看得到一片模糊的品牌色、看不到 LOGO 本身」。
       搜索区落在视口左半边，本就不压背景插画，无需毛玻璃虚化。 */
    background: rgba(255, 255, 255, .78);
    border: 3px solid #b1ddbc;
    border-radius: 14px;
    outline: 0;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
#kw:hover {
    border-color: #8fd0a6;
    background: rgba(255, 255, 255, .86);
}
#kw:focus {
    border-color: #6fbf8a;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 13px 28px rgb(0 0 0 / 22%), 0 0 0 5px rgb(111 191 138 / 30%);
}
#kw::placeholder {
    color: #64856f;              /* 与 .78 的白底配套；改动白底时要一并复核这一档 */
    font-size: 17px;
}

#so_submit,
.so-submit {
    flex: 0 0 108px;
    box-sizing: border-box;   /* 与输入框等高，避免按钮高出 4px */
    height: 62px;
    font-family: 楷体, KaiTi, serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
    background: #6fbf8a;
    border: 3px solid #6fbf8a;
    border-radius: 14px;
    outline: none;
    cursor: pointer;
    /* 与输入框同一套投影，视觉上并成一个整体 */
    box-shadow: 0 13px 28px rgb(0 0 0 / 22%);
    transition: background .18s, border-color .18s, transform .18s;
}
#so_submit:hover,
.so-submit:hover {
    background: #5cae78;
    border-color: #5cae78;
}
#so_submit:active,
.so-submit:active {
    transform: translateY(2px);
    box-shadow: 0 8px 18px rgb(0 0 0 / 22%);
}

/* ---- 搜索联想下拉 ---- */
.so-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 400;
    overflow: hidden;
    text-align: left;
    background: rgb(255 255 255 / 98%);
    border: 1px solid #b1ddbc;
    border-radius: 14px;
    box-shadow: 0 18px 36px rgb(0 0 0 / 22%);
}
.so-suggest[hidden] {
    display: none;
}
.so-suggest-item {
    padding: 11px 18px;
    font-family: 楷体, KaiTi, serif;
    font-size: 16px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.so-suggest-item + .so-suggest-item {
    border-top: 1px solid rgb(177 221 188 / 35%);
}
.so-suggest-item em {
    font-style: normal;
    font-weight: bold;
    color: #2f7a45;
}
.so-suggest-item:hover,
.so-suggest-item.is-active {
    background: #eef8f1;
}

/* 空关键词提交时的轻微抖动提示 */
@keyframes fy-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}
.so-input-wrap.is-shake {
    animation: fy-shake .3s ease;
}

/*鼠标浮动显示二级菜单  以网站为例*/
/*鼠标浮动logo后放大*/
.image_logo {
  width: 60px; /* logo 初始宽度 */
  height: 60px; /* logo 初始高度 */
  transition: transform 0.2s ease-in-out, filter 0.2s ease; /* 放大与投影一起过渡 */
}

/* 图标行随视口连续缩放（只作用于 #top_colum / #movie，不波及页脚与右上角标）。
   背景插画人物的最左沿约在视口 52%，视口越窄它越向左侵占，
   图标同步缩小才能保证整列内容始终落在左侧空白区、不与插画争视觉。
   ≥1875px 时即等于原来的 60px / 13px / 15px，宽屏观感不变。 */
#top_colum .image_logo,
#movie .image_logo {
  width: clamp(44px, 3.2vw, 60px);
  height: clamp(44px, 3.2vw, 60px);
  border-width: clamp(9px, 0.7vw, 13px);
  margin: clamp(8px, 0.8vw, 15px);
}


/* 悬停反馈：放大 + 双层青光（激活态）。
   ⚠️ 用 filter: drop-shadow 而不是 box-shadow —— box-shadow 跟随元素盒子，
   会给透明底的 LOGO 套上一个圆角矩形的色块/晕，看着就像多了一层背景；
   drop-shadow 是贴着 LOGO 的实际形状算的，透明处不投影。 */
.image_logo:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 5px var(--hud-soft)) drop-shadow(0 0 18px var(--hud-glow));
}
/* ============ 网站开发工具 ============
   已并入上面那套「图标环」：主图标 = Cloudflare（点击进 dash.cloudflare.com），
   四个入口各占一个方向（0/90/180/270）绕主图标四周弹出，样式全部复用 .icon-wrapper / .sub-icon。
   原先这里那一整套 #wed1 / #wed2 玻璃卡片样式（默认 ul、display 切换、transition: all 10s、
   以及靠兄弟选择器撑 hover 的写发）整块删除 —— 换成环形后不再需要，也就顺带没有了闪断。 */

/* ============ 图标环：主图标 + 悬浮后绕主图标环形展开的子项 ============
   页面上有两组（学习组=中国大学MOOC，视频组=爱奇艺），结构完全一致。
   原实现的问题（一次修掉）：
   1. 子项容器只有 30×30，里面的图却带着 .image_logo 类，会继承
      clamp(44px, 3.2vw, 60px) 的尺寸 —— 图比容器大一倍，直接溢出糊成一团，
      这是「太丑」最主要的原因。现在子项不复用 .image_logo，尺寸自己控制。
   2. 原来四个位置是手调的像素偏移（top:-67px / left:15% / right:0 …），
      只对得上 60px 那一档，换个视口就散架。现在用 --a（角度）+ --r（半径）
      描述位置，任意数量、任意角度都能均分，加站点只需改一条 HTML。
   3. 原来四个子图标统一 translateY(-10px)「一起往上跳」，并不是环形展开。
      现在按角度做真正的位移，配弹簧缓动 + 缩放淡入。
   4. 原来子项落在主图标盒子之外、又没有任何过渡带，鼠标一往子项移动就掉
      hover、菜单瞬间收起。现在子项自带一条十字形透明「连接桥」补住空隙。
   5. --r 用 clamp() 跟随视口连续缩放，与其它图标的缩放节奏一致。

   环形角度约定（三个子项互成 120°，绕主图标一圈）：
     -90° 正上；150° 左下；30° 右下。
   为什么不用「正下」：正下方 19% 视口高度处就是 #movie 那一行，
   而 #movie 与 #top_colum 同级（z-index 都是 200）、DOM 更靠后，会盖住子项。
   「正上」则不会撞到搜索框：子项上沿在 46%H−42px，搜索框下沿在 24%H+96px，
   只要视口高 ≥ 628px 就始终有间隙。

   注：位置计算用了 CSS 三角函数 cos()/sin()（Chrome 111+ / Safari 15.4+ /
   Firefox 108+ 支持），不支持时子项会退化为居中显示。 */
/* ===== 悬浮「激活态」的 HUD 配色 =====
   常态保持页面原有的柔和绿白（#6fbf8a / #2f7a45 / #b1ddbc），
   只有鼠标悬浮时才点亮成青绿 HUD —— 叙事先行：悬浮 = 能量注入。
   青绿与背景插画的暖黄是冷暖对撞，这正是科幻观感的主要来源；
   若把常态也改成青色，整页会变成廉价霓虹板，反而失去对比。 */
:root {
    --hud: #00e5b0;                        /* HUD 主色：青绿荧光 */
    --hud-soft: rgb(0 229 176 / 45%);      /* 近处锐利的辉光 */
    --hud-glow: rgb(0 229 176 / 26%);      /* 远处弥散的辉光 */
    --hud-faint: rgb(0 229 176 / 18%);     /* 仪表环、刻度 */
    --hud-text: #073b30;                   /* HUD 文字（深墨绿，压在透明底上） */
}
.icon-wrapper {
    float: left;              /* 与行内其它 .image_logo 排在同一行 */
    position: relative;       /* 子项的定位基准 */
    /* 主图标中心 → 子项中心的半径。
       实测主图标「可见内容」只有 60×60（外面那圈 13px 是透明边框），
       子项近端只要离中心 30+18 = 48px 以上就不会压到图形本身。
       收紧到 56~66px（原来 64~76）：子项更贴近主图标，一圈看下来更紧凑、不像「散落的方块」；
       对角线方向的横向外扩只有 0.707R，收紧后也不会压到同行相邻图标。 */
    --r: clamp(56px, 4vw, 66px);
}
/* 「轨道」内圈：一圈极淡虚线，子项落在它上面，充当仪表盘的量度参考。
   目的是把「几个方块散在四周」变成「一条轨道上的站点」—— 环有形状了，眼睛才有落点。
   半径取 --r 减 14px：这样轨道落在子项方块内部（子项中心在 --r、半宽 18px），
   加上子项 z-index 更高，轨道只在子项之间的空隙露出来；
   直径也小于同行图标间距（116px），不会画到相邻图标上。
   pointer-events:none 必须留着 —— 否则这个圆盘会盖住主图标的点击区。 */
.icon-wrapper::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc((var(--r) - 14px) * 2);
    height: calc((var(--r) - 14px) * 2);
    transform: translate(-50%, -50%);
    border: 1px dashed var(--hud-faint);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 4;               /* 压在子项（z-index 5）之下 */
    transition: opacity .22s ease;
}
/* 「轨道」外圈：一段高亮弧线在持续旋转 —— 雷达扫描的语汇。
   只用 border-*-color 点亮两个边，就得到约 90° 的弧；比满圈描边克制得多。
   半径取 --r 减 9px（比内圈再大一点），两条环同心错开才有层次；
   半径同样受 116px 的同行间距约束，不能再大。 */
.icon-wrapper::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc((var(--r) - 9px) * 2);
    height: calc((var(--r) - 9px) * 2);
    transform: translate(-50%, -50%);
    border: 1.5px solid transparent;
    border-top-color: var(--hud);
    border-right-color: var(--hud-soft);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity .22s ease;
}
.icon-wrapper:hover::after,
.icon-wrapper.is-open::after,
.icon-wrapper:hover::before,
.icon-wrapper.is-open::before {
    opacity: 1;
}
.icon-wrapper:hover::before,
.icon-wrapper.is-open::before {
    animation: hud-spin 3.2s linear infinite;
}
@keyframes hud-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.main-icon {
    display: block;
    position: relative;       /* 扫描线的定位基准 */
    overflow: hidden;         /* 把扫描线裁在主图标盒内，不越过相邻图标 */
}
/* 一次性「扫描」：鼠标移进来时，一条青光横线自上而下扫过主图标，扫完即停。
   做成一次性而不是循环 —— 循环的扫描线会一直抢注意力，反而是噪音。
   .main-icon 的盒子就是 .image_logo 的边框盒（含那圈 13px 透明边框），
   所以配合 overflow:hidden，这条线不会溢出到相邻图标上。 */
.main-icon::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hud) 22%, var(--hud) 78%, transparent);
    box-shadow: 0 0 10px var(--hud);
    opacity: 0;
    pointer-events: none;
}
.icon-wrapper:hover .main-icon::after,
.icon-wrapper.is-open .main-icon::after {
    animation: hud-scan .62s cubic-bezier(.3, .7, .4, 1) 1;
}
@keyframes hud-scan {
    0%   { top: 0%;    opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.icon-wrapper .image_logo {
    float: none;              /* 收进 wrapper 内，让 wrapper 尺寸可预测 */
    transition: transform .2s ease-in-out, filter .2s ease;
}
/* 主图标被悬浮（或环保持展开）= 进入「激活态」：
   双层青光（近处锐利 + 远处弥散）代替原来的柔性投影。
   ⚠️ 仍然不用 box-shadow —— 它跟随元素盒子，透明底 LOGO 旁边会成一块圆角矩形色块；
   drop-shadow 按 alpha 贴着图形轮廓算，光才会贴着形状走。 */
.icon-wrapper:hover .main-icon .image_logo,
.icon-wrapper.is-open .main-icon .image_logo {
    filter: drop-shadow(0 0 5px var(--hud-soft)) drop-shadow(0 0 18px var(--hud-glow));
}

/* 子项 = 纯 LOGO：**不要白底、不要圆角、不要描边**
   （原来是「白色 95% 底 + 10px 圆角 + 浅绿描边」的方块，需求是只显示 LOGO 本身） */
.sub-icon {
    /* 收起态：缩回主图标中心；透明 + 不接收事件，避免挡住旁边的图标 */
    --a: -90deg;                                 /* 环上角度（HTML 里按站点设置） */
    --dx: calc(cos(var(--a)) * var(--r));
    --dy: calc(sin(var(--a)) * var(--r));
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: clamp(30px, 2vw, 36px);
    height: clamp(30px, 2vw, 36px);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    /* 收起与展开的 transform 函数列表保持一致（translate/translate/scale），
       否则浏览器会退化成矩阵插值，动效会发飘 */
    transform: translate(-50%, -50%) translate(0, 0) scale(.4);
    /* 缓动从「弹簧回弹」(.34,1.42,.58,1) 换成 expo-out：快速进入、精准停住。
       回弹是活泼/拟物的语汇，和 HUD 要的「锁定」感相反。 */
    transition:
        opacity .14s ease,
        transform .24s cubic-bezier(.16, 1, .3, 1),
        filter .18s ease;
    transition-delay: calc(var(--i, 0) * 45ms);   /* 多个子项时依次弹出 */
}
/* LOGO 图片 / 内联 SVG 一律填满子项的框，等比缩放不拉伸 */
.sub-icon img,
.sub-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 悬浮该子项时在它下面浮出名称：
   方形图标只放 LOGO 不放字，靠这条标签说明是哪个站点（原生 title 提示太慢太朴素） */
.sub-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 7px);
    padding: 3px 10px 3px 9px;
    white-space: nowrap;
    /* 等宽字体（中文回退到雅黑）+ 大字距 —— 终端/HUD 文本的排印特征。
       原来的楷体读起来是「书本感」，与科幻语汇冲突。 */
    font: 12px/1.2 ui-monospace, Consolas, "Cascadia Mono", "Microsoft YaHei", monospace;
    letter-spacing: .09em;
    /* 背景**透明**（原来是 rgb(4 26 22/94%) 的墨底，视觉上就是一块黑）。
       没有底色托着，文字就必须换成深色才读得清，
       再叠三层白色 text-shadow 从紧到松做「白色光晕」，压在插画上也不会糊。 */
    color: var(--hud-text);
    background: transparent;
    text-shadow:
        0 1px 2px rgb(255 255 255 / 95%),
        0 0 6px rgb(255 255 255 / 85%),
        0 0 12px rgb(255 255 255 / 60%);
    /* 没有底色就不需要投影了；只留左侧一条 HUD 青色亮边作为标识 */
    border-left: 2px solid var(--hud);
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-3px);
    transition: opacity .15s ease, transform .2s ease;
}
.sub-icon:hover .sub-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* 透明连接桥（十字形，四向都搭得上）：
   补上主图标与子项之间那道缝 —— 没桥的话鼠标一往子项移就会掉 hover、菜单瞬间收起。
   ⚠ 上一版把纵向桥写成 bottom:100%（朝着远离主图标的方向长），
   正上方那个子项与主图标之间的缝根本没被盖住，所以「移到子项上就消失」。
   现在两根桥都以子项为中心**向两侧外扩**，四个方向一次覆盖：
     ::before 横向 → left/right 各外扩一截，高度等于方块高
     ::after  纵向 → top/bottom 各外扩一截，宽度等于方块宽
   外扩量只比实际缝隙（各视口下 6~10px）大一点点，避免盖住主图标的点击区。
   收起态整体 pointer-events:none，所以这些桥不会干扰别的图标。 */
.sub-icon::before,
.sub-icon::after {
    content: '';
    position: absolute;
    --bridge: clamp(16px, 1.4vw, 24px);
}
.sub-icon::before {
    left: calc(-1 * var(--bridge));
    right: calc(-1 * var(--bridge));
    top: 0;
    bottom: 0;
}
.sub-icon::after {
    top: calc(-1 * var(--bridge));
    bottom: calc(-1 * var(--bridge));
    left: 0;
    right: 0;
}
/* 展开：按 --a 角度环到 --r 半径处。
   两个触发源：:hover（纯 CSS，无 JS 也能用）与 .is-open（index.js 加的，
   鼠标离开后延迟 280ms 才摘掉）—— 这样鼠标在子项之间穿行、或手抖滑出一点，
   都不会立刻收起，点击就稳了。 */
.icon-wrapper:hover .sub-icon,
.icon-wrapper.is-open .sub-icon {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1);
}
/* 子项自身的悬浮态 = 被「锁定」：放大 + 双层青光。
   辉光用 drop-shadow（贴着 LOGO 形状走），不用 box-shadow（那会是个方块晕）；
   transition-delay 归零 —— 不然 hover 反馈会被展开时的错开延迟拖慢 45~135ms。 */
.sub-icon:hover {
    z-index: 6;
    transform: translate(-50%, -50%) translate(var(--dx), calc(var(--dy) - 4px)) scale(1.22);
    filter: drop-shadow(0 0 5px var(--hud-soft)) drop-shadow(0 0 16px var(--hud-glow));
    transition-delay: 0s;
}
/*环形图标结束*/
/*页脚整块（#footer_end / footer）已随「博客 + Github」两个入口一并删除，样式不再保留 */
/*美化ul li标签*/


/*屏幕缩小后的变化*/
@media screen and (max-width: 1060px){
    /* 内容列（搜索区 / 图标行）位置统一由 10% 决定，不再逐档偏移 */
    #he-plugin-standard{
        display:none;
    }
    .right_logo3{
      display: none;
    }
}
@media screen and (max-width: 819px) {
    body {
        background-color:white;
        background-image: url("https://i.imgtg.com/2023/03/09/YQVCD.png");
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        box-sizing: border-box;
    }
    /*窄屏下背景换成整屏照片，搜索区改为水平居中*/
    #so_fram {
        left: 50%;
        transform: translateX(-50%);
        top: 17%;
        width: 92vw;
        max-width: 92vw;
    }
    .so-engines {
        justify-content: center;
    }
    .so-chip {
        padding: 4px 13px;
        font-size: 14px;
    }
    .so-logo {
        left: 12px;
        width: 24px;
        height: 24px;
        border-radius: 7px;
    }
    .so-clear {
        right: 10px;
        width: 24px;
        height: 24px;
        font-size: 19px;
    }
    #kw {
        height: 54px;
        padding: 0 40px 0 44px;
        font-size: 16px;
    }
    #kw::placeholder {
        font-size: 15px;
    }
    .so-submit {
        flex: 0 0 88px;
        height: 54px;
        font-size: 17px;
    }
    #top_colum,#movie {
        top: 50%;
    }
    #movie{
        top: 68%;
    }
}


/*菜单树代码测试*/