/* ============================================================================
 * ocean · 海洋深蓝工具站（观测舱） · skin.css · v1.0.0
 * 第 16 套覆盖式模板：纯 CSS、零结构覆盖、零新增 DOM / 零外部图片 / 零外部字体 / 零 JS。
 * 加载顺序：critical.css → app.css → skin.css（本文件最后加载，同特异性下接管 :root）。
 * 设计北极星：像坐在一扇浸在海水里的玻璃观测舱前做换算 —— 答案被一只发光水母
 *             托起，浮在深蓝水中，读数带珍珠光泽。辨识度来自舷窗、气泡、贝壳、
 *             珊瑚、光束与海藻这些具象物件，不是「又一套蓝色毛玻璃」。
 *
 * 结构：① 浅海日光舱亮色板 + 全部海洋 SVG 装饰（亮 / --seaD-* 暗色原始值）
 *       ② 深海夜潜暗色双路径（只换 --c-* 与 --sea-* 别名）
 *       ③ 深海纵向渐变 / 层叠海浪 / 丁达尔光束 / 珊瑚礁剪影 / 薄水雾
 *       ④ 潜艇舷窗顶栏 / 圆形舷窗兼潜水仪表 / 海藻飘逸栏目线
 *       ⑤ 弧形玻璃观测面板 / 水波纹输入槽 / 水母托举 + 珍珠读数结果屏 / 贝壳按钮
 *       ⑥ 贝壳扇纹分类卡 / 气泡量纲标签 / 玻璃说明卡与页脚
 *       ⑦ 气泡上浮 / 涟漪 / 水流视差 / 珍珠跳字 / 水压按压 / reduced-motion
 *       ⑧ 出厂暗色硬编码二次覆盖  ⑨ 选择器红线与动效口径。
 * 装饰色与图案全部走 --sea-* 变量（沿用 ink / journal / storybook / industrial 的教训）。
 * ========================================================================== */

/* ==================================================== ① 浅海日光舱 · 墨蓝 / 薄荷青 / 珊瑚粉 / 珍珠白 / 细金沙 */
:root{
  --c-bg:#DDF1F3;--c-surface-1:#F2FBFB;--c-surface-2:#E4F5F7;--c-surface-3:#CFEAF0;
  --c-line:#B7DCE4;--c-line-strong:#7FB6C7;
  --c-ink-900:#0E3149;--c-ink-700:#24536C;--c-ink-500:#4A7B91;--c-ink-300:#7EA9BA;--c-ink-invert:#F4FCFE;
  --c-accent:#1668A8;--c-accent-hover:#0E548B;--c-accent-active:#0A4270;
  --c-accent-soft:#D7EEF8;--c-accent-deep:#0C4C7E;--c-on-accent:#F6FDFF;
  --c-success:#157F76;--c-success-soft:#D6F3EC;--c-warning:#A8761E;--c-warning-soft:#F8EED4;
  --c-danger:#C0566C;--c-danger-soft:#FBE1E7;--c-info:#1668A8;--c-info-soft:#DCEFF9;
  --c-focus:#0E7FA0;--c-selection:#A9E3EE;
  /* 水下画框：大圆角、玻璃边、内凹水影 */
  --r-1:8px;--r-2:12px;--r-3:18px;--r-4:24px;
  --sh-1:0 2px 8px rgba(9,58,87,.09),0 10px 26px rgba(9,58,87,.10);
  --sh-2:0 4px 12px rgba(9,58,87,.12),0 22px 48px rgba(9,58,87,.16);
  --dur-fast:160ms;--dur-base:280ms;--dur-slow:620ms;
  --ease-out:cubic-bezier(.18,.72,.24,1);
  --ease-float:cubic-bezier(.36,.06,.32,1);

  /* ---- ①-a 模板自有色彩（亮：浅海日光舱） ---- */
  --sea-serif:"Songti SC","STSong","Noto Serif CJK SC",var(--font-sans);
  --sea-pearl:#F4FDFF;--sea-pearl-dim:#CFEDF6;
  --sea-deep:#0A3B5C;--sea-deeper:#072C48;--sea-mid:#14618C;
  --sea-shallow:#BEE7EF;--sea-foam:#EAF9FA;--sea-mint:#63D3CC;
  --sea-coral:#F49A9E;--sea-coral-deep:#C26073;--sea-sand:#E3C98B;
  --sea-nav-ink:#EAF8FF;--sea-nav-dim:#A9D5E6;
  --sea-topbar:#12527A;--sea-topbar-lo:#0C3E62;--sea-topbar-hi:rgba(255,255,255,.16);
  --sea-glass-hi:rgba(255,255,255,.72);--sea-glass-lo:rgba(214,241,247,.56);
  --sea-glass-edge:rgba(255,255,255,.82);--sea-glass-shine:rgba(255,255,255,.95);
  --sea-glass-depth:rgba(25,110,150,.10);
  --sea-screen-hi:#12577F;--sea-screen-lo:#082F4C;--sea-screen-edge:rgba(150,226,240,.46);
  --sea-screen-grid:repeating-linear-gradient(0deg,rgba(190,238,250,.045) 0 1px,transparent 1px 36px);
  --sea-jelly-glow:rgba(111,231,232,.42);--sea-bubble-hi:rgba(255,255,255,.85);
  --sea-bubble-edge:rgba(255,255,255,.88);--sea-bubble-depth:rgba(29,124,161,.14);
  --sea-shell:#EAF8FA;--sea-shell-2:#E1F3F7;--sea-shell-3:#F4FCFC;
  --sea-shell-4:#D8EDF3;--sea-shell-5:#CFE7F0;
  --sea-fan:rgba(76,162,190,.10);--sea-fan-line:rgba(88,178,203,.30);
  --sea-tip:#E9F7F9;--sea-tip-line:#9CCDD9;--sea-tip-ink:#24536C;
  --sea-hl-bg:#C9EFF1;--sea-row-current:#DDF1F5;--sea-hover-wash:rgba(255,255,255,.55);
  --sea-ripple:rgba(74,196,210,.34);--sea-ripple-2:rgba(74,196,210,.15);
  --sea-focus-in:rgba(35,166,192,.20);--sea-press:rgba(10,59,92,.14);
  --sea-deco-alpha:.78;--sea-beam:rgba(255,255,255,.76);--sea-beam2:rgba(255,255,255,.52);
  --sea-surface-glow:rgba(255,255,255,.72);--sea-mist:rgba(140,198,216,.24);
  --sea-gauge-size:42px;
  --sea-hazard-ink:#0E3149;--sea-shadow:0 2px 8px rgba(9,58,87,.10),0 12px 30px rgba(9,58,87,.14);
  --sea-shadow-hover:0 4px 12px rgba(9,58,87,.14),0 22px 44px rgba(9,58,87,.20);
  --sea-link:#0F6E9B;--sea-link-hover:#C26073;
  --sea-arrow:var(--sea-svg-arrow-l);--sea-select-arrow:var(--sea-svg-select-l);

  /* 水波纹底边：SVG 正弦波，只做 repeat-x 的 8px 窄条，绝不纵向平铺盖住输入文字。
     曾误用 90deg 竖虚线，真实截图里像刻度尺而非水波，故改为具象波浪。 */
  --sea-wave-line:var(--sea-wavelet-img);
  --sea-svg-wavelet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='8'%3E%3Cpath d='M0 5 Q7.5 0 15 5 T30 5 T45 5 T60 5' fill='none' stroke='%235DB4C4' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E");

  /* ---- ①-b 海洋 SVG 装饰（亮）：SVG 内颜色不可读 CSS 变量，故亮暗各存一份 ---- */
  /* 焦散水纹：feTurbulence 噪点 + 稀疏涟漪弧线，叠在渐变上做水波流动肌理 */
  --sea-svg-caustic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .05' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.16'/%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.2' stroke-width='1.1'%3E%3Cpath d='M-20 62 Q35 34 90 62 T200 62 T310 62'/%3E%3Cpath d='M-20 158 Q35 130 90 158 T200 158 T310 158'/%3E%3Cpath d='M-20 244 Q35 216 90 244 T200 244 T310 244'/%3E%3C/g%3E%3C/svg%3E");
  /* 层叠海浪：三道不同相位的正弦波，横向平铺在页面顶部与顶栏下沿 */
  /* 亮色底必须用深青描边，白色波浪在浅青海水里会消失（独立评审指出层叠波纹缺席） */
  --sea-svg-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90'%3E%3Cg fill='none' stroke='%233C90AC' stroke-opacity='.30' stroke-width='2'%3E%3Cpath d='M0 18 Q75 0 150 18 T300 18 T450 18 T600 18'/%3E%3Cpath d='M0 44 Q75 26 150 44 T300 44 T450 44 T600 44' stroke-opacity='.20'/%3E%3Cpath d='M0 70 Q75 52 150 70 T300 70 T450 70 T600 70' stroke-opacity='.13'/%3E%3C/g%3E%3C/svg%3E");
  /* 顶栏下沿的一排潜艇小舷窗 + 铆钉：让「舷窗式导航条」有具象来源 */
  --sea-svg-portholes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14'%3E%3Cg fill='none' stroke='%23BFE9F5' stroke-opacity='.42' stroke-width='1.1'%3E%3Ccircle cx='36' cy='7' r='4.4'/%3E%3Ccircle cx='36' cy='7' r='1.8'/%3E%3C/g%3E%3Cg fill='%23BFE9F5' fill-opacity='.34'%3E%3Ccircle cx='9' cy='7' r='1.3'/%3E%3Ccircle cx='63' cy='7' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  /* 结果屏左下角的圆形潜水深度计：整圈刻度 + 指针 + 水平气泡，与品牌舷窗呼应 */
  --sea-svg-gauge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42'%3E%3Ccircle cx='21' cy='21' r='19' fill='%230A3552' fill-opacity='.8' stroke='%239FE4F2' stroke-opacity='.75' stroke-width='1.6'/%3E%3Ccircle cx='21' cy='21' r='14' fill='none' stroke='%237FD2E8' stroke-opacity='.65' stroke-width='3' stroke-dasharray='1 7'/%3E%3Cpath d='M21 21 L29 13' stroke='%23F4A9A6' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='21' cy='21' r='2.4' fill='%23FFFFFF'/%3E%3Cpath d='M6 21 H10 M32 21 H36 M21 6 V10 M21 32 V36' stroke='%23B9F1F4' stroke-opacity='.6' stroke-width='1'/%3E%3C/svg%3E");
  /* 远处珊瑚礁石剪影：贴视口底部，横向平铺 */
  --sea-svg-coral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='180'%3E%3Cpath d='M0 180 V146 Q48 132 92 148 Q138 118 186 146 Q226 128 268 146 Q320 112 372 146 Q420 130 468 148 Q520 116 570 146 Q622 130 672 148 Q724 110 776 146 Q828 130 878 148 Q930 118 980 146 Q1034 128 1084 148 Q1140 132 1200 146 V180 Z' fill='%231E7FA0' fill-opacity='.18'/%3E%3Cg fill='none' stroke='%231E7FA0' stroke-opacity='.26' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M132 180 V132 M132 150 L112 132 M132 142 L152 124 M112 132 V118 M152 124 V110'/%3E%3Cpath d='M430 180 V126 M430 148 L408 128 M430 140 L452 120 M408 128 V112 M452 120 V104'/%3E%3Cpath d='M818 180 V134 M818 152 L796 132 M818 144 L840 124 M796 132 V116 M840 124 V108'/%3E%3C/g%3E%3Cpath d='M0 180 V168 Q80 158 160 168 T320 168 T480 168 T640 168 T800 168 T960 168 T1120 168 T1200 168 V180 Z' fill='%230E5C7E' fill-opacity='.16'/%3E%3C/svg%3E");
  /* 发光水母：伞盖 + 五条飘带触须 + 柔光，放在结果屏右下托举数字 */
  --sea-svg-jelly:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23B9F6F5' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%238FE0F0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='60' cy='50' rx='58' ry='44' fill='url(%23g)'/%3E%3Cpath d='M18 50 A42 34 0 0 1 102 50 Q96 58 88 51 Q80 59 72 51 Q64 59 56 51 Q48 59 40 51 Q32 58 24 51 Z' fill='%23A6ECF5' fill-opacity='.5' stroke='%23DEF9FF' stroke-opacity='.9' stroke-width='2'/%3E%3Cpath d='M34 53 C30 68 40 77 34 92 M48 55 C44 71 54 81 48 94 M62 55 C58 73 68 81 62 94 M76 53 C72 69 82 79 76 92 M90 51 C88 67 96 75 92 88' fill='none' stroke='%23D6F8FF' stroke-opacity='.78' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='38' r='2.6' fill='%23FFFFFF' fill-opacity='.85'/%3E%3Ccircle cx='70' cy='34' r='1.8' fill='%23FFFFFF' fill-opacity='.7'/%3E%3C/svg%3E");
  /* 上浮气泡串：结果屏与按钮共用 */
  --sea-svg-bubbles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='70'%3E%3Cg fill='none' stroke='%23D9F8FF' stroke-opacity='.8' stroke-width='1.6'%3E%3Ccircle cx='8' cy='60' r='4.4' fill='%23FFFFFF' fill-opacity='.22'/%3E%3Ccircle cx='18' cy='44' r='3.2' fill='%23FFFFFF' fill-opacity='.18'/%3E%3Ccircle cx='7' cy='29' r='2.5' fill='%23FFFFFF' fill-opacity='.16'/%3E%3Ccircle cx='17' cy='15' r='2' fill='%23FFFFFF' fill-opacity='.14'/%3E%3Ccircle cx='9' cy='5' r='1.4' fill='%23FFFFFF' fill-opacity='.12'/%3E%3C/g%3E%3C/svg%3E");
  /* 海藻飘逸分割线：栏目名下方与卡片潮线 */
  --sea-svg-seaweed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 8 C10 0 14 12 24 6 S38 0 48 8 S62 2 72 8 L80 5' fill='none' stroke='%235DB4C4' stroke-opacity='.8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* 圆形舷窗兼潜水仪表：同心环 + 八颗舷窗螺栓 + 十字刻度 + 指针 + 水平气泡 */
  --sea-svg-porthole:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%230C3E62' stroke='%23BFE9F5' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='10.5' fill='%23185B7E' stroke='%238FD8EC' stroke-width='1.1'/%3E%3Cpath d='M6 16 H26 M16 6 V26' stroke='%23BFE9F5' stroke-opacity='.32' stroke-width='.9'/%3E%3Cpath d='M16 16 L21.5 10' stroke='%23F4A9A6' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%23FFFFFF'/%3E%3Ccircle cx='16' cy='10' r='1.6' fill='%23BFF4F2' fill-opacity='.9'/%3E%3Cg fill='%23DFF6FC'%3E%3Ccircle cx='16' cy='2.6' r='1.3'/%3E%3Ccircle cx='25.5' cy='6.5' r='1.3'/%3E%3Ccircle cx='29.4' cy='16' r='1.3'/%3E%3Ccircle cx='25.5' cy='25.5' r='1.3'/%3E%3Ccircle cx='16' cy='29.4' r='1.3'/%3E%3Ccircle cx='6.5' cy='25.5' r='1.3'/%3E%3Ccircle cx='2.6' cy='16' r='1.3'/%3E%3Ccircle cx='6.5' cy='6.5' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  /* 五张贝壳卡的海洋图标：珊瑚 / 扇贝 / 水母 / 海星 / 海马 */
  --sea-svg-icon1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cg fill='none' stroke='%230E5B7E' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M22 36 V18 M22 26 L12 16 M22 22 L31 12 M12 16 V9 M12 16 L6 12 M31 12 V5 M31 12 L37 9'/%3E%3C/g%3E%3Cg fill='%23F49A9E'%3E%3Ccircle cx='6' cy='11' r='2.4'/%3E%3Ccircle cx='12' cy='8' r='2.4'/%3E%3Ccircle cx='31' cy='4' r='2.4'/%3E%3Ccircle cx='38' cy='8' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-icon2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cg fill='none' stroke='%230E5B7E' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M22 34 C6 32 3 18 5 9 C13 10 17 12 22 16 C27 12 31 10 39 9 C41 18 38 32 22 34 Z'/%3E%3Cpath d='M22 34 V16 M22 34 L14 13 M22 34 L30 13 M22 34 L7 11 M22 34 L37 11' stroke-opacity='.55'/%3E%3C/g%3E%3Ccircle cx='22' cy='34' r='2.6' fill='%23F49A9E'/%3E%3C/svg%3E");
  --sea-svg-icon3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M8 22 A14 11 0 0 1 36 22 Q32 27 28 22 Q24 27 20 22 Q16 27 12 22 Z' fill='%2363D3CC' fill-opacity='.4' stroke='%230E5B7E' stroke-width='2'/%3E%3Cg fill='none' stroke='%230E5B7E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M14 24 C12 31 16 33 14 38 M21 25 C19 31 23 34 21 38 M28 24 C26 31 30 33 28 38'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-icon4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M22 3 L27.5 16 L41 17 L30.5 25.5 L34 38 L22 30.5 L10 38 L13.5 25.5 L3 17 L16.5 16 Z' fill='%23F4B5A8' fill-opacity='.7' stroke='%230E5B7E' stroke-width='2' stroke-linejoin='round'/%3E%3Cg fill='%230E5B7E'%3E%3Ccircle cx='22' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='24' r='1.3'/%3E%3Ccircle cx='27' cy='24' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-icon5:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cg fill='none' stroke='%230E5B7E' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 5 C26 4 28 9 24 13 C20 17 25 19 30 19 C35 19 37 24 33 28 C29 32 22 31 19 35'/%3E%3Cpath d='M18 5 C12 6 12 11 16 11 M24 13 L30 11 M19 35 C16 37 13 36 12 34'/%3E%3C/g%3E%3Ccircle cx='25' cy='8' r='1.6' fill='%230E5B7E'/%3E%3C/svg%3E");
  /* 说明箭头 / 下拉箭头 */
  --sea-svg-arrow-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M2 7 H31 M25 2 L33 7 L25 12' fill='none' stroke='%230E6E96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sea-svg-select-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1 L6 6 L11 1' fill='none' stroke='%230E4C72' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ---- ①-c 暗色原始值（② 只做别名指向，不重写规则） ---- */
  --seaD-bg:#061A2B;--seaD-surface-1:#0C2B42;--seaD-surface-2:#10344E;--seaD-surface-3:#164058;
  --seaD-line:#20506B;--seaD-line-strong:#3C7891;
  --seaD-ink-900:#E8F7FC;--seaD-ink-700:#C2E2EE;--seaD-ink-500:#8FB9CB;--seaD-ink-300:#6A97AC;
  --seaD-accent:#5CC4DC;--seaD-accent-hover:#85DCEB;--seaD-accent-active:#A6EAF3;
  --seaD-accent-soft:#144660;--seaD-accent-deep:#9ADEEC;--seaD-on-accent:#06263B;
  --seaD-topbar:#061F33;--seaD-topbar-lo:#041524;--seaD-topbar-hi:rgba(140,224,240,.12);
  --seaD-glass-hi:rgba(28,82,112,.64);--seaD-glass-lo:rgba(9,44,69,.72);
  --seaD-glass-edge:rgba(140,224,240,.30);--seaD-glass-shine:rgba(190,240,250,.28);
  --seaD-glass-depth:rgba(2,16,30,.35);
  --seaD-screen-hi:#0D3C5A;--seaD-screen-lo:#04182A;--seaD-screen-edge:rgba(120,214,232,.38);
  --seaD-screen-grid:repeating-linear-gradient(0deg,rgba(150,225,240,.05) 0 1px,transparent 1px 36px);
  --seaD-jelly-glow:rgba(88,222,220,.34);--seaD-bubble-hi:rgba(210,248,255,.55);
  --seaD-bubble-edge:rgba(140,224,240,.36);--seaD-bubble-depth:rgba(2,18,32,.38);
  --seaD-shell:#0E3550;--seaD-shell-2:#123C58;--seaD-shell-3:#0A2C45;
  --seaD-shell-4:#164460;--seaD-shell-5:#1B4E6B;
  --seaD-fan:rgba(120,214,232,.09);--seaD-fan-line:rgba(120,214,232,.22);
  --seaD-tip:#0C3049;--seaD-tip-line:#2A6280;--seaD-tip-ink:#C2E2EE;
  --seaD-hl-bg:#14536A;--seaD-row-current:#123F5A;--seaD-hover-wash:rgba(120,214,232,.10);
  --seaD-ripple:rgba(96,214,226,.30);--seaD-ripple-2:rgba(96,214,226,.13);
  --seaD-focus-in:rgba(96,214,226,.22);--seaD-press:rgba(220,250,255,.12);
  --seaD-deco-alpha:.72;--seaD-beam:rgba(150,225,240,.10);--seaD-beam2:rgba(110,205,225,.07);
  --seaD-surface-glow:rgba(120,205,230,.14);--seaD-mist:rgba(10,40,60,.28);
  --seaD-shadow:0 2px 8px rgba(0,8,18,.5),0 14px 34px rgba(0,8,18,.52);
  --seaD-shadow-hover:0 4px 12px rgba(0,8,18,.56),0 24px 48px rgba(0,8,18,.6);
  --seaD-link:#7FD2E8;--seaD-link-hover:#F4A9A6;
}

/* ---- ①-d 暗版 SVG：同一套形状，只换描边与填充 ---- */
:root{
  --sea-svg-wavelet-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='8'%3E%3Cpath d='M0 5 Q7.5 0 15 5 T30 5 T45 5 T60 5' fill='none' stroke='%237FD2E8' stroke-opacity='.5' stroke-width='1.6'/%3E%3C/svg%3E");
  --sea-svg-caustic-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .05' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.1'/%3E%3Cg fill='none' stroke='%237FD2E8' stroke-opacity='.11' stroke-width='1.1'%3E%3Cpath d='M-20 62 Q35 34 90 62 T200 62 T310 62'/%3E%3Cpath d='M-20 158 Q35 130 90 158 T200 158 T310 158'/%3E%3Cpath d='M-20 244 Q35 216 90 244 T200 244 T310 244'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-waves-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='90'%3E%3Cg fill='none' stroke='%237FD2E8' stroke-opacity='.18' stroke-width='2'%3E%3Cpath d='M0 18 Q75 0 150 18 T300 18 T450 18 T600 18'/%3E%3Cpath d='M0 44 Q75 26 150 44 T300 44 T450 44 T600 44' stroke-opacity='.12'/%3E%3Cpath d='M0 70 Q75 52 150 70 T300 70 T450 70 T600 70' stroke-opacity='.08'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-coral-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='180'%3E%3Cpath d='M0 180 V146 Q48 132 92 148 Q138 118 186 146 Q226 128 268 146 Q320 112 372 146 Q420 130 468 148 Q520 116 570 146 Q622 130 672 148 Q724 110 776 146 Q828 130 878 148 Q930 118 980 146 Q1034 128 1084 148 Q1140 132 1200 146 V180 Z' fill='%230495B4' fill-opacity='.16'/%3E%3Cg fill='none' stroke='%230495B4' stroke-opacity='.22' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M132 180 V132 M132 150 L112 132 M132 142 L152 124 M112 132 V118 M152 124 V110'/%3E%3Cpath d='M430 180 V126 M430 148 L408 128 M430 140 L452 120 M408 128 V112 M452 120 V104'/%3E%3Cpath d='M818 180 V134 M818 152 L796 132 M818 144 L840 124 M796 132 V116 M840 124 V108'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-jelly-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%2363D3CC' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%234FBCD8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='60' cy='50' rx='58' ry='44' fill='url(%23g)'/%3E%3Cpath d='M18 50 A42 34 0 0 1 102 50 Q96 58 88 51 Q80 59 72 51 Q64 59 56 51 Q48 59 40 51 Q32 58 24 51 Z' fill='%2363D3CC' fill-opacity='.38' stroke='%23C7F6F5' stroke-opacity='.9' stroke-width='2'/%3E%3Cpath d='M34 53 C30 68 40 77 34 92 M48 55 C44 71 54 81 48 94 M62 55 C58 73 68 81 62 94 M76 53 C72 69 82 79 76 92 M90 51 C88 67 96 75 92 88' fill='none' stroke='%23B9F1F4' stroke-opacity='.78' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --sea-svg-seaweed-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='12'%3E%3Cpath d='M0 8 C10 0 14 12 24 6 S38 0 48 8 S62 2 72 8 L80 5' fill='none' stroke='%237FD2E8' stroke-opacity='.72' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --sea-svg-porthole-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23041B2D' stroke='%237FD2E8' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='10.5' fill='%230D3C5A' stroke='%235CC4DC' stroke-width='1.1'/%3E%3Cpath d='M6 16 H26 M16 6 V26' stroke='%23B9F1F4' stroke-opacity='.3' stroke-width='.9'/%3E%3Cpath d='M16 16 L21.5 10' stroke='%23F4A9A6' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%23FFFFFF'/%3E%3Ccircle cx='16' cy='10' r='1.6' fill='%2363D3CC'/%3E%3Cg fill='%23B9F1F4'%3E%3Ccircle cx='16' cy='2.6' r='1.3'/%3E%3Ccircle cx='25.5' cy='6.5' r='1.3'/%3E%3Ccircle cx='29.4' cy='16' r='1.3'/%3E%3Ccircle cx='25.5' cy='25.5' r='1.3'/%3E%3Ccircle cx='16' cy='29.4' r='1.3'/%3E%3Ccircle cx='6.5' cy='25.5' r='1.3'/%3E%3Ccircle cx='2.6' cy='16' r='1.3'/%3E%3Ccircle cx='6.5' cy='6.5' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-icon1d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cg fill='none' stroke='%239FE4F2' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M22 36 V18 M22 26 L12 16 M22 22 L31 12 M12 16 V9 M12 16 L6 12 M31 12 V5 M31 12 L37 9'/%3E%3C/g%3E%3Cg fill='%23F4A9A6'%3E%3Ccircle cx='6' cy='11' r='2.4'/%3E%3Ccircle cx='12' cy='8' r='2.4'/%3E%3Ccircle cx='31' cy='4' r='2.4'/%3E%3Ccircle cx='38' cy='8' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-icon2d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cg fill='none' stroke='%239FE4F2' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M22 34 C6 32 3 18 5 9 C13 10 17 12 22 16 C27 12 31 10 39 9 C41 18 38 32 22 34 Z'/%3E%3Cpath d='M22 34 V16 M22 34 L14 13 M22 34 L30 13 M22 34 L7 11 M22 34 L37 11' stroke-opacity='.55'/%3E%3C/g%3E%3Ccircle cx='22' cy='34' r='2.6' fill='%23F4A9A6'/%3E%3C/svg%3E");
  --sea-svg-icon3d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M8 22 A14 11 0 0 1 36 22 Q32 27 28 22 Q24 27 20 22 Q16 27 12 22 Z' fill='%2363D3CC' fill-opacity='.34' stroke='%239FE4F2' stroke-width='2'/%3E%3Cg fill='none' stroke='%239FE4F2' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M14 24 C12 31 16 33 14 38 M21 25 C19 31 23 34 21 38 M28 24 C26 31 30 33 28 38'/%3E%3C/g%3E%3C/svg%3E");
  --sea-svg-icon4d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M22 3 L27.5 16 L41 17 L30.5 25.5 L34 38 L22 30.5 L10 38 L13.5 25.5 L3 17 L16.5 16 Z' fill='%23F4A9A6' fill-opacity='.55' stroke='%239FE4F2' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sea-svg-icon5d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cg fill='none' stroke='%239FE4F2' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 5 C26 4 28 9 24 13 C20 17 25 19 30 19 C35 19 37 24 33 28 C29 32 22 31 19 35'/%3E%3Cpath d='M18 5 C12 6 12 11 16 11 M24 13 L30 11 M19 35 C16 37 13 36 12 34'/%3E%3C/g%3E%3Ccircle cx='25' cy='8' r='1.6' fill='%239FE4F2'/%3E%3C/svg%3E");
  --sea-svg-arrow-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M2 7 H31 M25 2 L33 7 L25 12' fill='none' stroke='%237FD2E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sea-svg-select-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1 L6 6 L11 1' fill='none' stroke='%23B9F1F4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==================================================== ② 深海夜潜 · 暗色双路径（只换变量） */
:root[data-theme=dark]{
  --c-bg:#061A2B;--c-surface-1:#0C2B42;--c-surface-2:#10344E;--c-surface-3:#164058;
  --c-line:#20506B;--c-line-strong:#3C7891;
  --c-ink-900:#E8F7FC;--c-ink-700:#C2E2EE;--c-ink-500:#8FB9CB;--c-ink-300:#6A97AC;--c-ink-invert:#061A2B;
  --c-accent:#5CC4DC;--c-accent-hover:#85DCEB;--c-accent-active:#A6EAF3;
  --c-accent-soft:#144660;--c-accent-deep:#9ADEEC;--c-on-accent:#06263B;
  --c-success:#6FD6C4;--c-success-soft:#124A48;--c-warning:#E8C986;--c-warning-soft:#423A22;
  --c-danger:#F2A0AE;--c-danger-soft:#4A2838;--c-info:#7FD2E8;--c-info-soft:#123F5A;
  --c-focus:#5CC4DC;--c-selection:#1B5A72;
  --sh-1:0 2px 8px rgba(0,8,18,.5),0 10px 26px rgba(0,8,18,.5);
  --sh-2:0 4px 12px rgba(0,8,18,.56),0 22px 48px rgba(0,8,18,.6);
  --sea-topbar:var(--seaD-topbar);--sea-topbar-lo:var(--seaD-topbar-lo);--sea-topbar-hi:var(--seaD-topbar-hi);
  --sea-glass-hi:var(--seaD-glass-hi);--sea-glass-lo:var(--seaD-glass-lo);
  --sea-glass-edge:var(--seaD-glass-edge);--sea-glass-shine:var(--seaD-glass-shine);--sea-glass-depth:var(--seaD-glass-depth);
  --sea-screen-hi:var(--seaD-screen-hi);--sea-screen-lo:var(--seaD-screen-lo);
  --sea-screen-edge:var(--seaD-screen-edge);--sea-screen-grid:var(--seaD-screen-grid);
  --sea-jelly-glow:var(--seaD-jelly-glow);--sea-bubble-hi:var(--seaD-bubble-hi);
  --sea-bubble-edge:var(--seaD-bubble-edge);--sea-bubble-depth:var(--seaD-bubble-depth);
  --sea-shell:var(--seaD-shell);--sea-shell-2:var(--seaD-shell-2);--sea-shell-3:var(--seaD-shell-3);
  --sea-shell-4:var(--seaD-shell-4);--sea-shell-5:var(--seaD-shell-5);
  --sea-fan:var(--seaD-fan);--sea-fan-line:var(--seaD-fan-line);
  --sea-tip:var(--seaD-tip);--sea-tip-line:var(--seaD-tip-line);--sea-tip-ink:var(--seaD-tip-ink);
  --sea-hl-bg:var(--seaD-hl-bg);--sea-row-current:var(--seaD-row-current);--sea-hover-wash:var(--seaD-hover-wash);
  --sea-ripple:var(--seaD-ripple);--sea-ripple-2:var(--seaD-ripple-2);
  --sea-focus-in:var(--seaD-focus-in);--sea-press:var(--seaD-press);
  --sea-deco-alpha:var(--seaD-deco-alpha);--sea-beam:var(--seaD-beam);--sea-beam2:var(--seaD-beam2);
  --sea-surface-glow:var(--seaD-surface-glow);--sea-mist:var(--seaD-mist);
  --sea-shadow:var(--seaD-shadow);--sea-shadow-hover:var(--seaD-shadow-hover);
  --sea-link:var(--seaD-link);--sea-link-hover:var(--seaD-link-hover);
  --sea-arrow:var(--sea-svg-arrow-d);--sea-select-arrow:var(--sea-svg-select-d);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --c-bg:#061A2B;--c-surface-1:#0C2B42;--c-surface-2:#10344E;--c-surface-3:#164058;
    --c-line:#20506B;--c-line-strong:#3C7891;
    --c-ink-900:#E8F7FC;--c-ink-700:#C2E2EE;--c-ink-500:#8FB9CB;--c-ink-300:#6A97AC;--c-ink-invert:#061A2B;
    --c-accent:#5CC4DC;--c-accent-hover:#85DCEB;--c-accent-active:#A6EAF3;
    --c-accent-soft:#144660;--c-accent-deep:#9ADEEC;--c-on-accent:#06263B;
    --c-success:#6FD6C4;--c-success-soft:#124A48;--c-warning:#E8C986;--c-warning-soft:#423A22;
    --c-danger:#F2A0AE;--c-danger-soft:#4A2838;--c-info:#7FD2E8;--c-info-soft:#123F5A;
    --c-focus:#5CC4DC;--c-selection:#1B5A72;
    --sh-1:0 2px 8px rgba(0,8,18,.5),0 10px 26px rgba(0,8,18,.5);
    --sh-2:0 4px 12px rgba(0,8,18,.56),0 22px 48px rgba(0,8,18,.6);
    --sea-topbar:var(--seaD-topbar);--sea-topbar-lo:var(--seaD-topbar-lo);--sea-topbar-hi:var(--seaD-topbar-hi);
    --sea-glass-hi:var(--seaD-glass-hi);--sea-glass-lo:var(--seaD-glass-lo);
    --sea-glass-edge:var(--seaD-glass-edge);--sea-glass-shine:var(--seaD-glass-shine);--sea-glass-depth:var(--seaD-glass-depth);
    --sea-screen-hi:var(--seaD-screen-hi);--sea-screen-lo:var(--seaD-screen-lo);
    --sea-screen-edge:var(--seaD-screen-edge);--sea-screen-grid:var(--seaD-screen-grid);
    --sea-jelly-glow:var(--seaD-jelly-glow);--sea-bubble-hi:var(--seaD-bubble-hi);
    --sea-bubble-edge:var(--seaD-bubble-edge);--sea-bubble-depth:var(--seaD-bubble-depth);
    --sea-shell:var(--seaD-shell);--sea-shell-2:var(--seaD-shell-2);--sea-shell-3:var(--seaD-shell-3);
    --sea-shell-4:var(--seaD-shell-4);--sea-shell-5:var(--seaD-shell-5);
    --sea-fan:var(--seaD-fan);--sea-fan-line:var(--seaD-fan-line);
    --sea-tip:var(--seaD-tip);--sea-tip-line:var(--seaD-tip-line);--sea-tip-ink:var(--seaD-tip-ink);
    --sea-hl-bg:var(--seaD-hl-bg);--sea-row-current:var(--seaD-row-current);--sea-hover-wash:var(--seaD-hover-wash);
    --sea-ripple:var(--seaD-ripple);--sea-ripple-2:var(--seaD-ripple-2);
    --sea-focus-in:var(--seaD-focus-in);--sea-press:var(--seaD-press);
    --sea-deco-alpha:var(--seaD-deco-alpha);--sea-beam:var(--seaD-beam);--sea-beam2:var(--seaD-beam2);
    --sea-surface-glow:var(--seaD-surface-glow);--sea-mist:var(--seaD-mist);
    --sea-shadow:var(--seaD-shadow);--sea-shadow-hover:var(--seaD-shadow-hover);
    --sea-link:var(--seaD-link);--sea-link-hover:var(--seaD-link-hover);
    --sea-arrow:var(--sea-svg-arrow-d);--sea-select-arrow:var(--sea-svg-select-d);
    color-scheme:dark;
  }
}

/* ==================================================== ③ 海水背景：纵向渐变 / 丁达尔光束 / 海浪 / 珊瑚 / 水雾 */
body{
  background-color:var(--c-bg);
  background-image:
    linear-gradient(104deg,transparent 8%,var(--sea-beam) 18%,transparent 27%),
    linear-gradient(100deg,transparent 46%,var(--sea-beam2) 54%,transparent 63%),
    radial-gradient(ellipse 760px 320px at 50% -10%,var(--sea-surface-glow) 0,transparent 72%),
    linear-gradient(180deg,var(--sea-mist) 0,transparent 34%),
    var(--sea-waves-img),
    var(--sea-caustic-img),
    var(--sea-coral-img),
    linear-gradient(178deg,#E7F8FA 0%,#A9D8E6 26%,#82C2D8 60%,#5FA9C4 100%);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat,repeat-x,no-repeat;
  background-position:center top,center top,center top,center top,left 12px,left top,left bottom,center;
  background-size:100% 100%,100% 100%,auto,100% 100%,600px 90px,280px 280px,1200px 180px,100% 100%;
  /* 全部随文档滚动：① 纵向渐变按整页高度展开成真正的「海面 → 深海」；
     ② 海面光晕 / 光束 / 珊瑚不会因 fixed 背景按视口分片而重复成横带。
     水流视差改由 sea-drift 背景位移 + view() 区块上浮提供。 */
  background-attachment:scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll;
  background-blend-mode:screen,screen,screen,normal,normal,soft-light,normal,normal;
  color:var(--c-ink-900);
}
a{text-decoration-color:var(--sea-link)}
a:hover{text-decoration-color:var(--sea-link-hover)}
.c-faq__item a,.c-qa__item a,.c-edu__panel a,.c-breadcrumb a,.c-table a{text-decoration-style:dotted}
.c-crumbs__link{color:var(--sea-link)}

/* ==================================================== ④ 潜艇舷窗顶栏 / 圆形舷窗仪表 / 海藻栏目线 */
.c-topbar{
  position:relative;
  background-color:var(--sea-topbar);
  /* 波浪与舷窗排必须在两层渐变之上，否则被下沿不透明渐变吃掉 */
  background-image:
    var(--sea-svg-portholes),
    var(--sea-svg-waves-d),
    linear-gradient(180deg,var(--sea-topbar-hi) 0,transparent 46%),
    linear-gradient(180deg,transparent 62%,var(--sea-topbar-lo) 100%);
  background-repeat:repeat-x,repeat-x,no-repeat,no-repeat;
  background-position:left bottom,left bottom,center top,center bottom;
  background-size:72px 14px,600px 20px,100% 100%,100% 100%;
  border-bottom:1px solid var(--sea-glass-edge);
  box-shadow:0 8px 26px rgba(5,40,66,.22),inset 0 -1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(16px) saturate(1.22);
  -webkit-backdrop-filter:blur(16px) saturate(1.22);
}
.c-topbar__brand{
  font-family:var(--sea-serif);font-weight:700;letter-spacing:.09em;color:var(--sea-pearl);
}
.c-topbar__brand-mark{
  font-size:0;width:32px;height:32px;flex:none;display:inline-grid;place-items:center;
  background-color:transparent;border:0;border-radius:50%;
  /* 双层金属舷窗框，让品牌徽标读作「嵌在舷窗里的潜水仪表」 */
  box-shadow:0 0 0 4px rgba(4,32,54,.46),0 0 0 5px rgba(190,238,250,.58),
             inset 0 0 0 1px rgba(190,238,250,.30);
  background-image:var(--sea-porthole-img);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  filter:drop-shadow(0 2px 5px rgba(3,26,44,.5));
}
.c-topbar__link,.c-nav__item,.c-lang,.c-theme,.c-nav>summary{
  color:#FFFFFF;font-weight:600;border-radius:999px;
  /* 嵌入式小舷窗：去掉原来压低文字对比度的大块半透明圆斑 */
  background-color:rgba(4,32,54,.24);
  border:1px solid rgba(190,238,250,.40);
  box-shadow:inset 0 0 0 2px rgba(4,32,54,.20),inset 0 1px 0 rgba(255,255,255,.16);
  transition:background-color var(--dur-fast) var(--ease-out),translate var(--dur-fast) var(--ease-out);
}
.c-topbar__link:hover,.c-nav__item:hover,.c-topbar__link:focus-visible{
  background-color:rgba(99,211,204,.28);color:#FFFFFF;translate:0 -1px}
.c-topbar__link[aria-current],.c-nav__item[aria-current]{
  background-color:rgba(99,211,204,.34);border-color:rgba(190,246,245,.72);color:#FFFFFF}
.c-lang__opt,.c-theme__label--light,.c-theme__label--dark{color:#FFFFFF;font-weight:600}
.c-lang__opt[aria-current]{background:rgba(99,211,204,.28);color:#FFFFFF;border-radius:999px}
.c-nav__bar{background:var(--sea-nav-ink);border-radius:2px;opacity:.8}
.c-nav__panel{
  background-color:var(--sea-topbar);border:1px solid var(--sea-glass-edge);
  border-radius:var(--r-3);box-shadow:var(--sea-shadow);backdrop-filter:blur(18px)}
.c-nav__title{color:var(--sea-nav-dim);letter-spacing:.1em}

/* 栏目名下的海藻飘逸分割线：repeat-x 的 12px 窄条，不压标题 */
.c-h2{position:relative}
.c-h2::after{
  content:"";position:absolute;left:0;bottom:-12px;width:min(280px,88%);height:12px;
  background-image:var(--sea-seaweed-img);
  background-repeat:repeat-x;background-position:left center;background-size:80px 12px;
  opacity:1;pointer-events:none;
}
.c-sec__head{padding-bottom:8px}
.c-eyebrow{
  color:var(--sea-link);letter-spacing:.18em;font-weight:700;
}
.c-eyebrow::before{content:"";background:var(--sea-mint);border-radius:50%}
.c-hero__title em{color:var(--sea-coral-deep);font-style:normal;
  text-shadow:0 1px 0 rgba(255,255,255,.7)}
.c-hero__lead,.c-hero__points li,.c-sec__desc,.c-sec__intro{line-height:1.85}
.c-hero__points li::before{content:"◌";color:var(--sea-mint);font-weight:700}
.c-stat strong{font-family:var(--font-mono);color:var(--sea-link);font-variant-numeric:tabular-nums}
.c-stat span{color:var(--c-ink-500)}
.c-sec__more,.c-panel-cta{border-radius:999px;font-weight:600;letter-spacing:.02em}
.c-friends__title,.c-links__label,.c-random__group-title,.c-scale__head-text{
  color:var(--sea-link);letter-spacing:.06em}

/* ==================================================== ⑤ 弧形玻璃观测面板 / 水波输入槽 / 水母结果屏 / 贝壳按钮 */
.c-hero__card,.c-conv,.c-cook,.c-speccalc,
.c-answer-card,.c-edu__panel,.c-side-card,.c-random__box,.c-scale__box{
  background-color:transparent;
  /* 斜向细纹模拟水纹折射扭曲：极淡，只在水下玻璃上形成光线偏折感 */
  background-image:
    repeating-linear-gradient(112deg,rgba(255,255,255,.10) 0 1px,transparent 1px 18px),
    linear-gradient(158deg,var(--sea-glass-hi) 0%,var(--sea-glass-lo) 100%);
  background-repeat:repeat,no-repeat;
  background-position:left top,center;
  background-size:auto,100% 100%;
  border:1px solid var(--sea-glass-edge);
  border-radius:var(--r-4);
  box-shadow:inset 0 1px 0 var(--sea-glass-shine),inset 0 -20px 44px var(--sea-glass-depth),var(--sea-shadow);
  backdrop-filter:blur(14px) saturate(1.18);
  -webkit-backdrop-filter:blur(14px) saturate(1.18);
}
/* 主查询区：顶部拱起的潜水观测面板，弧顶留白不裁内容 */
.c-hero__card{
  position:relative;padding-top:44px;
  border-radius:46% 46% var(--r-4) var(--r-4) / 84px 84px var(--r-4) var(--r-4);
}
.c-hero__card .c-conv,.c-hero__card .c-cook,.c-hero__card .c-speccalc{
  background-color:transparent;background-image:none;border:0;border-radius:0;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.c-hero__card>*,.c-conv>*{position:relative}
.c-hero__card-head{border-bottom:1px solid var(--sea-glass-edge);margin-top:4px}
.c-hero__card-head h2{font-family:var(--sea-serif);letter-spacing:.04em}
.c-hero__badge{
  border-radius:999px;background-color:rgba(99,211,204,.20);
  border:1px solid rgba(99,211,204,.44);color:var(--sea-link);font-weight:600}
.c-hero__hint{color:var(--c-ink-500)}

/* 凹陷式水波输入槽：底部一条波浪窄条 + 内凹水影，repeat-x 不纵向铺满 */
.c-input,.c-select{
  position:relative;
  background-color:var(--sea-foam);
  background-image:
    linear-gradient(180deg,rgba(20,97,140,.07) 0,transparent 42%),
    var(--sea-wave-line);
  background-repeat:no-repeat,repeat-x;
  background-position:center top,left bottom;
  background-size:100% 100%,60px 8px;
  border:1px solid var(--sea-glass-edge);border-bottom:2px solid var(--sea-fan-line);
  border-radius:var(--r-2);
  color:var(--c-ink-900);
  box-shadow:inset 0 3px 9px rgba(10,74,110,.10),inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.c-input::placeholder{color:var(--c-ink-300)}
.c-input:focus,.c-select:focus{
  outline:none;border-color:var(--sea-mint);
  background-image:linear-gradient(180deg,rgba(20,97,140,.05) 0,transparent 42%),var(--sea-wave-line);
  animation:sea-ripple var(--dur-slow) var(--ease-out) 1 both;
}
.c-select{
  appearance:none;-webkit-appearance:none;
  background-image:var(--sea-select-arrow),var(--sea-wave-line);
  background-repeat:no-repeat,repeat-x;
  background-position:right 12px center,left bottom;
  background-size:12px 8px,60px 8px;
  padding-right:32px;
}
.c-conv__label,.c-field__label,.c-conv__result--qa .c-conv__label{
  color:var(--c-ink-700);letter-spacing:.06em;font-weight:600}
.c-conv__label::before,.c-field__label::before{
  content:"";background:var(--sea-mint);border-radius:50%;box-shadow:0 0 0 3px rgba(99,211,204,.18)}

/* 结果区：深蓝玻璃屏 + 右下发光水母托举 + 左侧上浮气泡 + 珍珠光泽读数 */
.c-conv__result,.c-result-card{
  position:relative;padding:20px 20px 46px;
  background-color:var(--sea-screen-lo);
  /* 层序红线：不透明的底色渐变必须放最下层，否则会盖掉其后的网格与深度计。
     曾把 gauge 放在底色之后，computed 层存在但画面里完全不显示。 */
  background-image:
    var(--sea-svg-gauge),
    var(--sea-screen-grid),
    radial-gradient(ellipse 230px 110px at 50% 104%,var(--sea-jelly-glow) 0,transparent 72%),
    linear-gradient(166deg,var(--sea-screen-hi) 0%,var(--sea-screen-lo) 100%);
  background-repeat:no-repeat,repeat,no-repeat,no-repeat;
  background-position:left 14px bottom 4px,left top,center bottom,center;
  background-size:var(--sea-gauge-size) var(--sea-gauge-size),36px 36px,auto,100% 100%;
  border:1px solid var(--sea-screen-edge);border-radius:var(--r-3);
  box-shadow:inset 0 2px 14px rgba(2,26,46,.5),inset 0 1px 0 rgba(220,250,255,.22),var(--sea-shadow);
  color:var(--sea-pearl);
}
/* 出厂 .c-hero__card .c-conv__result{padding:var(--sp-3) 0} 特异性更高，用同特异性压回 */
.c-hero__card .c-conv__result{padding:16px 18px 44px}
/* 底部留一条独立「观察窗」带：水母完整居中托举数字，不与右侧交换按钮或数字争空间。
   真实截图里水母放右下会被交换按钮完全盖住伞盖，只剩触须，故改为居中下沉。 */
.c-conv__result::before,.c-result-card::before{
  content:"";position:absolute;left:50%;right:auto;top:auto;bottom:1px;
  transform:translateX(-50%);
  width:112px;height:62px;pointer-events:none;z-index:1;
  background-image:var(--sea-jelly-img);
  background-repeat:no-repeat;background-position:center bottom;background-size:contain;
  opacity:var(--sea-deco-alpha);
}
.c-conv__result::after,.c-result-card::after{
  content:"";position:absolute;left:calc(50% + 62px);right:auto;top:auto;bottom:2px;
  width:22px;height:56px;pointer-events:none;z-index:1;
  background-image:var(--sea-svg-bubbles);
  background-repeat:no-repeat;background-position:center bottom;background-size:contain;
  opacity:.6;
}
.c-conv__result>*,.c-result-card>*{position:relative;z-index:2}
.c-conv__result .c-conv__label,.c-result-card .c-conv__label{color:var(--sea-pearl-dim)}
/* 珍珠数字：渐变字 + 柔和投影，首帧不透明、不裁切；字号收敛保证 390 档长小数完整 */
.c-result,.c-result-card__v strong,.c-side-card__num,.c-tool-result__num,
.c-result-list__v,.c-unit-tile__v{
  font-family:var(--font-sans);font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--sea-pearl);
  -webkit-text-fill-color:var(--sea-pearl);
  text-shadow:0 1px 3px rgba(2,26,46,.55);
}
.c-conv__result .c-result,.c-result-card .c-result-card__v strong,
.c-conv__result .c-result-card__v strong{
  /* 珍珠虹彩：白 → 珊瑚粉 → 珍珠白 → 薄荷青 → 细金沙 → 白，不再是纯白实心字 */
  background-image:linear-gradient(100deg,#FFFFFF 0%,#E4F9FF 16%,#F9DFE9 32%,
    #FFFFFF 48%,#D2F5EA 66%,#F7EACB 82%,#FFFFFF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;filter:drop-shadow(0 1px 3px rgba(2,26,46,.6));
}
.c-result{font-size:clamp(23px,2vw + 11px,33px);letter-spacing:0;word-break:break-word}
.c-result__unit,.c-result-card__v span,.c-side-card__unit{
  color:var(--sea-mint);-webkit-text-fill-color:var(--sea-mint);
  font-weight:600;text-shadow:0 1px 2px rgba(2,26,46,.5)}
.c-conv__result .c-result__unit,.c-result-card .c-result-card__v span{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:none}
.c-conv__result .c-hl,.c-result-card .c-hl{
  background:rgba(244,154,158,.22);color:#FFE7E4;-webkit-text-fill-color:#FFE7E4;border-radius:6px}
.c-answer,.c-answer-card,.c-def{
  background-image:linear-gradient(160deg,var(--sea-glass-hi),var(--sea-glass-lo));
  border:1px solid var(--sea-glass-edge);border-radius:var(--r-3)}
.c-answer__eq,.c-answer-card__eq{font-family:var(--font-sans)}
.c-answer-card__tag{
  border-radius:999px;background:rgba(99,211,204,.20);color:var(--sea-link)}
.c-hl{background:var(--sea-hl-bg);color:var(--c-accent-deep);border-radius:6px}
.c-answer-card__eq .c-hl,.c-formula--answer .c-hl{background:var(--sea-hl-bg);color:var(--c-accent-deep)}
.c-formula{
  background:var(--sea-tip);border:1px dashed var(--sea-tip-line);border-radius:var(--r-2);
  color:var(--sea-tip-ink)}
.c-formula .c-hl{white-space:nowrap}
.c-table thead th{
  background:rgba(20,97,140,.10);color:var(--c-ink-900);letter-spacing:.04em}
.c-table tbody th,.c-table tbody td{border-bottom:1px solid var(--c-line)}
.c-table tbody tr.is-current{background:var(--sea-row-current)}
.c-table .is-num{font-family:var(--font-mono)}

/* 贝壳形状按钮：胶囊 + 内高光；hover 从按钮上沿冒出细碎气泡，不压文字 */
.c-btn,.c-swap,.c-copy,.c-share{
  position:relative;border-radius:999px;font-weight:600;letter-spacing:.02em;
  transition:translate var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out)}
/* 贝壳形状主按钮：扇贝弧顶 + 自底部发散的扇纹，与分类卡同一套贝壳语言 */
.c-btn--primary{
  background-color:var(--sea-mid);
  background-image:
    repeating-conic-gradient(from 248deg at 50% 124%,rgba(255,255,255,.20) 0 3deg,transparent 3deg 11deg),
    linear-gradient(165deg,rgba(255,255,255,.28) 0,transparent 52%),
    linear-gradient(180deg,#1C7CB4 0%,#0E5588 100%);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:center bottom,center top,center;
  background-size:100% 100%,100% 100%,100% 100%;
  border-radius:34% 34% 999px 999px / 48% 48% 999px 999px;
  border:1px solid rgba(220,250,255,.48);color:var(--c-on-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 6px 16px rgba(6,50,80,.26)}
.c-btn--primary:hover{
  background-image:
    repeating-conic-gradient(from 248deg at 50% 124%,rgba(255,255,255,.26) 0 3deg,transparent 3deg 11deg),
    linear-gradient(165deg,rgba(255,255,255,.34) 0,transparent 52%),
    linear-gradient(180deg,#2389C2 0%,#105E94 100%);
  translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px rgba(6,50,80,.32)}
.c-btn--primary:active{translate:0 1px;transform:scale(.985);
  box-shadow:inset 0 3px 8px rgba(2,28,50,.35)}
.c-btn--primary::after{
  content:"";position:absolute;left:24%;right:24%;bottom:100%;height:26px;pointer-events:none;
  background-image:var(--sea-svg-bubbles);
  background-repeat:no-repeat;background-position:center bottom;background-size:contain;
  opacity:0}
.c-btn--primary:hover::after{opacity:.9}
.c-btn--ghost,.c-swap,.c-copy,.c-share{
  background-color:rgba(255,255,255,.56);border:1px solid var(--sea-glass-edge);
  color:var(--sea-link);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 10px rgba(9,58,87,.10)}
.c-btn--ghost:hover,.c-swap:hover,.c-copy:hover,.c-share:hover{
  translate:0 -1px;background-color:rgba(255,255,255,.82);border-color:var(--sea-mint)}
.c-btn--ghost:active,.c-swap:active,.c-copy:active,.c-share:active{transform:scale(.97)}
.c-copy.is-ok{background-color:var(--c-success-soft);border-color:var(--c-success)}

/* ==================================================== ⑥ 贝壳扇纹分类卡 / 气泡量纲标签 / 玻璃说明卡 */
body{counter-reset:sea-depth}
.c-tool-feature{
  counter-increment:sea-depth;
  position:relative;min-height:206px;overflow:visible;
  padding:34px 20px 34px;
  border:1px solid var(--sea-glass-edge);
  border-radius:44% 44% var(--r-3) var(--r-3) / 30% 30% var(--r-3) var(--r-3);
  background-color:var(--sea-shell);
  background-image:
    radial-gradient(ellipse 120px 60px at 28% 4%,var(--sea-bubble-hi) 0,transparent 72%),
    repeating-conic-gradient(from 244deg at 50% 104%,var(--sea-fan) 0 3deg,transparent 3deg 9deg);
  background-repeat:no-repeat,no-repeat;
  background-position:center top,center bottom;
  background-size:100% 100%,100% 78%;
  color:var(--c-ink-900);
  box-shadow:inset 0 1px 0 var(--sea-glass-shine),inset 0 -16px 30px var(--sea-glass-depth),var(--sea-shadow);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.c-tool-feature:nth-child(5n+2){background-color:var(--sea-shell-2)}
.c-tool-feature:nth-child(5n+3){background-color:var(--sea-shell-3)}
.c-tool-feature:nth-child(5n+4){background-color:var(--sea-shell-4)}
.c-tool-feature:nth-child(5n+5){background-color:var(--sea-shell-5)}
/* 海洋图标：必须清掉出厂 ::before 的橙色横条底板（top:-1px / 36×2px） */
.c-tool-feature::before{
  content:"";position:absolute;top:12px;right:14px;left:auto;
  width:44px;height:40px;pointer-events:none;
  background-color:transparent;border:0;border-radius:0;box-shadow:none;
  background-image:var(--sea-icon1);
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:var(--sea-deco-alpha);
}
.c-tool-feature:nth-child(5n+2)::before{background-image:var(--sea-icon2)}
.c-tool-feature:nth-child(5n+3)::before{background-image:var(--sea-icon3)}
.c-tool-feature:nth-child(5n+4)::before{background-image:var(--sea-icon4)}
.c-tool-feature:nth-child(5n+5)::before{background-image:var(--sea-icon5)}
/* 深度编号 + 潮线：放在底部独立窄条，不压描述与 CTA */
.c-tool-feature::after{
  content:"DEPTH " counter(sea-depth,decimal-leading-zero);
  position:absolute;left:16px;right:16px;bottom:8px;height:14px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  color:var(--sea-link);text-align:left;line-height:14px;
  background-image:var(--sea-wave-line);
  background-repeat:repeat-x;background-position:left center;background-size:60px 8px;
  background-blend-mode:normal;
  border-top:1px dashed var(--sea-fan-line);padding-top:2px;
  opacity:.8;pointer-events:none;
}
.c-tool-feature h3,.c-tool-feature__name,.c-tool-feature__title{
  font-family:var(--sea-serif);letter-spacing:.03em;padding-right:48px}
.c-tool-feature__desc{color:var(--c-ink-700);max-width:none;line-height:1.75}
.c-tool-feature__cta{
  border-radius:999px;background:rgba(255,255,255,.62);
  border:1px solid var(--sea-glass-edge);color:var(--sea-link);padding:5px 12px}
.c-tool-feature:hover{
  transform:translateY(-3px);border-color:var(--sea-mint);
  box-shadow:inset 0 1px 0 var(--sea-glass-shine),var(--sea-shadow-hover)}
.c-tool-feature:hover .c-tool-feature__cta{background:rgba(99,211,204,.24);text-decoration:underline;text-underline-offset:4px}
.c-tool-feature:active{transform:scale(.985) translateY(1px)}

/* 量纲区 = 气泡标签：圆润胶囊 + 左上高光点 + 左下气泡尾 */
.c-dim-card{
  position:relative;min-height:80px;padding:14px 18px 14px 36px;
  border-radius:34px 34px 34px 10px;
  background-color:var(--c-surface-1);
  background-image:
    radial-gradient(circle 46px at 14% 6%,var(--sea-bubble-hi) 0,transparent 72%),
    linear-gradient(160deg,var(--sea-glass-hi),var(--sea-glass-lo));
  background-repeat:no-repeat,no-repeat;
  background-position:center,center;
  background-size:100% 100%,100% 100%;
  border:1px solid var(--sea-bubble-edge);
  color:var(--c-ink-900);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 0 0 4px rgba(255,255,255,.12),
             inset 0 -9px 20px var(--sea-bubble-depth),var(--sea-shadow);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.c-dim-card::before{
  content:"";position:absolute;left:14px;top:14px;
  width:11px;height:11px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#FFFFFF 0 35%,rgba(255,255,255,.28) 60%,transparent 72%);
  box-shadow:0 0 0 1px rgba(255,255,255,.6);
}
.c-dim-card::after{
  content:"";position:absolute;left:8px;bottom:7px;
  width:9px;height:9px;border-radius:50%;pointer-events:none;
  border:1px solid var(--sea-bubble-edge);background:rgba(255,255,255,.32);
  box-shadow:-8px 5px 0 -2px var(--sea-bubble-hi);
}
/* 气泡按深度分层：越靠后的量纲卡片水越深、玻璃越沉 */
.c-dim-card:nth-child(4n+2){background-color:var(--c-surface-2)}
.c-dim-card:nth-child(4n+3){background-color:var(--c-surface-3)}
.c-dim-card__name{color:var(--c-ink-900);letter-spacing:.02em}
.c-dim-card__count{color:var(--c-ink-500);font-family:var(--font-mono)}
.c-dim-card:hover{transform:translateY(-3px);border-color:var(--sea-mint);color:var(--c-ink-900)}
.c-dim-card:active{transform:scale(.98)}

/* 单位胶囊 / 教学标签：小气泡 */
.c-chip,.c-edu__tag,.c-cook__tag{
  position:relative;border-radius:999px;
  background-color:rgba(255,255,255,.62);border:1px solid var(--sea-glass-edge);
  color:var(--c-ink-700);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.c-chip::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#FFFFFF 0 40%,var(--sea-mint) 100%);
  box-shadow:0 0 0 1px rgba(99,211,204,.4);
}
.c-chip:hover,.c-chip:focus-visible,.c-chip[aria-current]{
  background-color:rgba(99,211,204,.24);border-color:var(--sea-mint);color:var(--c-accent-deep)}

.c-edu__panel,.c-note:not(span),.c-side-card,.c-random__box,.c-scale__box{
  border-radius:var(--r-3)}
.c-edu__h,.c-edu__sub,.c-edu__tip,.c-edu__app-h,.c-edu__scene-h{
  font-family:var(--sea-serif);letter-spacing:.03em}
.c-edu__tip{
  background:var(--sea-tip);border:1px dashed var(--sea-tip-line);border-radius:var(--r-2);
  color:var(--sea-tip-ink)}
.c-faq__q,.c-faq-static__q,.c-qa__q{font-family:var(--sea-serif)}

.c-footer{
  position:relative;color:var(--sea-pearl);
  background-color:var(--sea-topbar-lo);
  background-image:linear-gradient(180deg,rgba(255,255,255,.09),transparent 40%),var(--sea-svg-waves-d);
  background-repeat:no-repeat,repeat-x;
  background-position:center top,left top;
  background-size:100% 100%,600px 20px;
  border-top:1px solid var(--sea-glass-edge);
}
/* 页脚上沿的远处珊瑚礁剪影：在深蓝底上用浅青版，确保亮暗两路径都看得见 */
.c-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:76px;pointer-events:none;z-index:0;
  background-image:var(--sea-svg-coral-d);
  background-repeat:repeat-x;background-position:left bottom;background-size:600px 90px;
  opacity:.82;
}
.c-footer__inner{position:relative;z-index:1}
.c-footer__brand{font-family:var(--sea-serif);letter-spacing:.08em;color:var(--sea-pearl)}
.c-footer a{color:var(--sea-pearl-dim)}
.c-footer a:hover{color:#FFFFFF}
.c-footer__kbd{
  border-radius:999px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);color:var(--sea-pearl)}

/* ==================================================== ⑦ 动效：气泡 / 涟漪 / 视差 / 珍珠跳字 / 水压按压 */
/* 动效口径：① 答案首帧完整可读，只做轻微亮度呼吸，绝不裁切或 opacity:0 入场；
   ② 装饰一律 z-index:1，结果内容 z-index:2；③ 波浪 / 焦散 / 气泡都只做单向铺排与位移。 */
@keyframes sea-bubbles{
  0%{transform:translateY(6px);opacity:0}
  30%{opacity:.9}
  100%{transform:translateY(-12px);opacity:0}
}
@keyframes sea-ripple{
  0%{box-shadow:inset 0 3px 9px rgba(10,74,110,.10),0 0 0 0 var(--sea-ripple),0 0 0 0 var(--sea-ripple-2)}
  60%{box-shadow:inset 0 3px 9px rgba(10,74,110,.06),0 0 0 5px var(--sea-ripple),0 0 0 10px var(--sea-ripple-2)}
  100%{box-shadow:inset 0 3px 9px rgba(10,74,110,.06),0 0 0 3px var(--sea-ripple-2),0 0 0 8px transparent}
}
@keyframes sea-drift{
  from{background-position:center top,center top,center top,center top,left 12px,left top,left bottom,center}
  to{background-position:center top,center top,center top,center top,left 612px,left 280px,left bottom,center}
}
@keyframes sea-pearl{
  0%{opacity:.97;filter:drop-shadow(0 1px 2px rgba(2,26,46,.5))}
  50%{opacity:1;filter:drop-shadow(0 1px 9px rgba(190,240,250,.62))}
  100%{opacity:1;filter:drop-shadow(0 1px 3px rgba(2,26,46,.6))}
}
@keyframes sea-float{
  from{opacity:.96;translate:0 12px}
  to{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:no-preference){
  body{animation:sea-drift 46s linear infinite alternate}
  .c-conv__result .c-result,.c-conv__result .c-result-card__v strong,
  .c-result-card .c-result-card__v strong{
    animation:sea-pearl var(--dur-slow) var(--ease-out) 1 both}
  .c-conv__result::after,.c-result-card::after{
    animation:sea-bubbles 3.6s var(--ease-float) infinite}
  .c-btn--primary:hover::after{
    animation:sea-bubbles 1.4s var(--ease-float) infinite}
  .c-tool-feature,.c-dim-card,.c-answer-card,.c-edu__panel,.c-random__box,.c-scale__box{
    animation:sea-float linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
}
@media (prefers-reduced-motion:reduce){
  body,.c-conv__result .c-result,.c-conv__result .c-result-card__v strong,
  .c-result-card .c-result-card__v strong,.c-conv__result::after,.c-result-card::after,
  .c-btn--primary:hover::after,.c-tool-feature,.c-dim-card,.c-answer-card,
  .c-edu__panel,.c-random__box,.c-scale__box{animation:none;opacity:1;translate:none;transform:none}
  .c-input:focus,.c-select:focus{animation:none;box-shadow:inset 0 3px 9px rgba(10,74,110,.10),0 0 0 3px var(--sea-ripple-2)}
  .c-btn--primary:hover,.c-btn--primary:active,.c-btn--ghost:hover,.c-btn--ghost:active,
  .c-tool-feature:hover,.c-tool-feature:active,.c-dim-card:hover,.c-dim-card:active{
    transform:none;translate:none}
}

/* 390 档：弧顶收敛、水母缩小、结果屏给长小数留足宽度 */
@media (max-width:640px){
  :root{--sea-gauge-size:30px}
  .c-hero__card{
    padding-top:26px;
    border-radius:34% 34% var(--r-3) var(--r-3) / 40px 40px var(--r-3) var(--r-3);
  }
  .c-conv__result,.c-result-card{padding:16px 14px 40px}
  .c-hero__card .c-conv__result{padding:14px 14px 38px}
  .c-conv__result::before,.c-result-card::before{width:88px;height:50px;opacity:.72}
  .c-conv__result::after,.c-result-card::after{left:calc(50% + 48px);height:46px;opacity:.45}
  .c-result{font-size:clamp(21px,5vw,27px)}
  .c-tool-feature{padding:30px 16px 32px;min-height:196px}
  .c-tool-feature h3,.c-tool-feature__name,.c-tool-feature__title{padding-right:42px}
  .c-dim-card{padding-left:32px}
  /* 窄屏公式行收紧，避免单位 in 被单独挤到第二行 */
  .c-formula{font-size:12px;letter-spacing:-.01em}
}

/* ==================================================== ⑧ 出厂暗色硬编码二次覆盖
   critical.css 对 .c-hl / .c-formula--answer .c-hl / .c-answer-card__eq .c-hl，
   app.css 对主卡 box-shadow / .c-select 箭头，在暗色路径下写了硬编码值。
   这里用与出厂完全相同的选择器逐条压回 --sea-* 变量。 */
:root[data-theme=dark] body{
  background-image:
    linear-gradient(104deg,transparent 8%,var(--sea-beam) 18%,transparent 27%),
    linear-gradient(100deg,transparent 46%,var(--sea-beam2) 54%,transparent 63%),
    radial-gradient(ellipse 760px 320px at 50% -10%,var(--sea-surface-glow) 0,transparent 72%),
    linear-gradient(180deg,var(--sea-mist) 0,transparent 34%),
    var(--sea-waves-img),var(--sea-caustic-img),var(--sea-coral-img),
    linear-gradient(178deg,#0A2C44 0%,#0B3B58 34%,var(--c-bg) 72%,#092C43 100%);
}
:root[data-theme=dark] .c-input,:root[data-theme=dark] .c-select{
  background-color:var(--c-surface-1);color:var(--c-ink-900)}
:root[data-theme=dark] .c-hero__card .c-conv{box-shadow:none}
:root[data-theme=dark] .c-btn--ghost,:root[data-theme=dark] .c-swap,
:root[data-theme=dark] .c-copy,:root[data-theme=dark] .c-share{
  background-color:rgba(28,82,112,.6);color:var(--sea-pearl)}
:root[data-theme=dark] .c-chip,:root[data-theme=dark] .c-edu__tag,:root[data-theme=dark] .c-cook__tag{
  background-color:rgba(28,82,112,.6);color:var(--c-ink-700)}
:root[data-theme=dark] .c-dim-card{background-color:var(--c-surface-1)}
:root[data-theme=dark] .c-tool-feature__cta{background:rgba(28,82,112,.6);color:var(--sea-pearl-dim)}
:root[data-theme=dark] .c-hl{background:var(--sea-hl-bg);color:var(--c-accent-deep)}
:root[data-theme=dark] .c-formula--answer .c-hl{background:var(--sea-hl-bg);color:var(--c-accent-deep)}
:root[data-theme=dark] .c-answer-card__eq .c-hl{background:var(--sea-hl-bg);color:var(--c-accent-deep)}
:root[data-theme=dark] .c-conv,:root[data-theme=dark] .c-hero__card,
:root[data-theme=dark] .c-result-card,:root[data-theme=dark] .c-tool-feature{box-shadow:var(--sea-shadow)}
:root[data-theme=dark] .c-select{background-image:var(--sea-select-arrow),var(--sea-wave-line)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) body{
    background-image:
      linear-gradient(104deg,transparent 8%,var(--sea-beam) 18%,transparent 27%),
      linear-gradient(100deg,transparent 46%,var(--sea-beam2) 54%,transparent 63%),
      radial-gradient(ellipse 760px 320px at 50% -10%,var(--sea-surface-glow) 0,transparent 72%),
      linear-gradient(180deg,var(--sea-mist) 0,transparent 34%),
      var(--sea-waves-img),var(--sea-caustic-img),var(--sea-coral-img),
      linear-gradient(178deg,#0A2C44 0%,#0B3B58 34%,var(--c-bg) 72%,#092C43 100%);
  }
  :root:not([data-theme=light]) .c-input,:root:not([data-theme=light]) .c-select{
    background-color:var(--c-surface-1);color:var(--c-ink-900)}
  :root:not([data-theme=light]) .c-hero__card .c-conv{box-shadow:none}
  :root:not([data-theme=light]) .c-btn--ghost,:root:not([data-theme=light]) .c-swap,
  :root:not([data-theme=light]) .c-copy,:root:not([data-theme=light]) .c-share{
    background-color:rgba(28,82,112,.6);color:var(--sea-pearl)}
  :root:not([data-theme=light]) .c-chip,:root:not([data-theme=light]) .c-edu__tag,
  :root:not([data-theme=light]) .c-cook__tag{
    background-color:rgba(28,82,112,.6);color:var(--c-ink-700)}
  :root:not([data-theme=light]) .c-dim-card{background-color:var(--c-surface-1)}
  :root:not([data-theme=light]) .c-tool-feature__cta{background:rgba(28,82,112,.6);color:var(--sea-pearl-dim)}
  :root:not([data-theme=light]) .c-hl{background:var(--sea-hl-bg);color:var(--c-accent-deep)}
  :root:not([data-theme=light]) .c-formula--answer .c-hl{background:var(--sea-hl-bg);color:var(--c-accent-deep)}
  :root:not([data-theme=light]) .c-answer-card__eq .c-hl{background:var(--sea-hl-bg);color:var(--c-accent-deep)}
  :root:not([data-theme=light]) .c-conv,:root:not([data-theme=light]) .c-hero__card,
  :root:not([data-theme=light]) .c-result-card,:root:not([data-theme=light]) .c-tool-feature{
    box-shadow:var(--sea-shadow)}
  :root:not([data-theme=light]) .c-select{background-image:var(--sea-select-arrow),var(--sea-wave-line)}
}

/* 亮/暗 SVG 别名：暗色路径只换变量，不按主题重写 background-image，避免反向污染 */
:root{
  --sea-wavelet-img:var(--sea-svg-wavelet);
  --sea-waves-img:var(--sea-svg-waves);--sea-caustic-img:var(--sea-svg-caustic);
  --sea-coral-img:var(--sea-svg-coral);--sea-jelly-img:var(--sea-svg-jelly);
  --sea-seaweed-img:var(--sea-svg-seaweed);--sea-porthole-img:var(--sea-svg-porthole);
  --sea-icon1:var(--sea-svg-icon1);--sea-icon2:var(--sea-svg-icon2);
  --sea-icon3:var(--sea-svg-icon3);--sea-icon4:var(--sea-svg-icon4);--sea-icon5:var(--sea-svg-icon5);
}
:root[data-theme=dark]{
  --sea-wavelet-img:var(--sea-svg-wavelet-d);
  --sea-waves-img:var(--sea-svg-waves-d);--sea-caustic-img:var(--sea-svg-caustic-d);
  --sea-coral-img:var(--sea-svg-coral-d);--sea-jelly-img:var(--sea-svg-jelly-d);
  --sea-seaweed-img:var(--sea-svg-seaweed-d);--sea-porthole-img:var(--sea-svg-porthole-d);
  --sea-icon1:var(--sea-svg-icon1d);--sea-icon2:var(--sea-svg-icon2d);
  --sea-icon3:var(--sea-svg-icon3d);--sea-icon4:var(--sea-svg-icon4d);--sea-icon5:var(--sea-svg-icon5d);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --sea-wavelet-img:var(--sea-svg-wavelet-d);
  --sea-waves-img:var(--sea-svg-waves-d);--sea-caustic-img:var(--sea-svg-caustic-d);
    --sea-coral-img:var(--sea-svg-coral-d);--sea-jelly-img:var(--sea-svg-jelly-d);
    --sea-seaweed-img:var(--sea-svg-seaweed-d);--sea-porthole-img:var(--sea-svg-porthole-d);
    --sea-icon1:var(--sea-svg-icon1d);--sea-icon2:var(--sea-svg-icon2d);
    --sea-icon3:var(--sea-svg-icon3d);--sea-icon4:var(--sea-svg-icon4d);--sea-icon5:var(--sea-svg-icon5d);
  }
}

/* ==================================================== ⑨ 选择器红线与动效口径
   1) CLASS 伪原创会给每个 class 前置随机类名，本模板只用普通 .c-xxx 类选择器与
      aria-current / data-theme 等稳定属性；绝不使用针对 class 属性本身的精确、
      前缀或包含属性选择器。图标是纯 SVG，不写中文，英文页不串字。
   2) 页面没有新增 DOM：海浪 / 光束 / 焦散 / 珊瑚剪影 / 水雾、舷窗仪表、水母、
      气泡串、贝壳扇纹、五个海洋图标、气泡高光与尾巴、海藻分割线全是背景层与伪元素。
   3) 衬线感只作用于标题 / 标签；正文继承 --font-sans，表格数值用 --font-mono。
      主数字用珍珠渐变并把字号收敛到 clamp(23px,2vw + 11px,33px)，
      首页长小数 0.3937007874 在 390 / 820 / 1440 三档完整不裁；
      波浪线一律 repeat-x + 底部 3px，不纵向平铺盖住输入文字。
   4) 水母与气泡固定在结果屏 z-index:1，所有结果内容 z-index:2，装饰永不压住答案；
      入场动画 opacity 起点 .96 / 数字 .97，首帧完整可读，无 clip-path 裁切。
   5) 亮 / 手动暗 / 系统暗三条主题路径只换 --c-* 与 --sea-* 别名，SVG 通过
      --sea-*-img 统一切换，不出现亮块泄漏或暗色二次覆盖污染亮色。
   ========================================================================== */