/* ============================================================================ * forest · 森林治愈工具站（林间木屋） · skin.css · v1.0.0 * 第 17 套覆盖式模板：纯 CSS、零结构覆盖、零新增 DOM / 零外部图片 / 零外部字体 / 零 JS。 * 加载顺序：critical.css → app.css → skin.css（本文件最后加载，同特异性下接管 :root）。 * 设计北极星：像坐在林间小木屋的原木桌前做换算 —— 答案刻在一块树桩年轮截面上。 * 辨识度来自木梁、年轮、藤编、蘑菇、松果、橡果、蕨类与叶隙光斑这些具象 * 物件，不是「又一套绿色渐变」；与 nature / farm / classic 三套绿系拉开。 * * 结构：① 午后林间木屋亮色板 + 全部森林 SVG 装饰（亮 / --frD-* 暗色原始值） * ② 暮色林地暗色双路径（只换 --c-* 与 --fr-* 别名） * ③ 森林绿纵向渐变 / 树叶剪影 / 丁达尔光束 / 光斑 / 灌木剪影 / 薄林雾 * ④ 木屋横梁顶栏 / 圆形树桩年轮品牌标 / 蕨类栏目线 * ⑤ 实木桌面主面板 / 木牌刻槽输入 / 树桩年轮结果屏 / 蘑菇造型按钮 * ⑥ 植物标识卡（藤编包边）/ 木质路牌量纲区 / 说明卡与页脚 * ⑦ 落叶 / 光斑聚拢 / 漫步展现 / 光点聚字 / 木质按压 / reduced-motion * ⑧ 出厂暗色硬编码二次覆盖 ⑨ 选择器红线与动效口径。 * 装饰色与图案全部走 --fr-* 变量（沿用 ink / journal / storybook / industrial / ocean 的教训）。 * ========================================================================== */ /* ==================================================== ① 午后林间木屋 · 森林绿 / 原木棕 / 苔藓绿 / 阳光金 / 奶白 */ :root{ --c-bg:#DDEBD2;--c-surface-1:#FAF7EA;--c-surface-2:#F1EDD9;--c-surface-3:#E7E3C9; --c-line:#D3D2B4;--c-line-strong:#A6AC85; --c-ink-900:#24372A;--c-ink-700:#405741;--c-ink-500:#647A60;--c-ink-300:#8B9C80;--c-ink-invert:#FBF8EC; --c-accent:#356341;--c-accent-hover:#2A5236;--c-accent-active:#204229; --c-accent-soft:#DDEBD2;--c-accent-deep:#244A2E;--c-on-accent:#FFF8E7; --c-success:#3E7449;--c-success-soft:#DEEED6;--c-warning:#9A6E22;--c-warning-soft:#F6EBCE; --c-danger:#A44C3C;--c-danger-soft:#F6E0D8;--c-info:#356341;--c-info-soft:#E0EBD6; --c-focus:#4C7C43;--c-selection:#BFD9A6; /* 木作画框：厚边、圆润、内凹木影 */ --r-1:8px;--r-2:12px;--r-3:18px;--r-4:24px; --sh-1:0 2px 8px rgba(44,58,34,.10),0 10px 26px rgba(44,58,34,.12); --sh-2:0 4px 12px rgba(44,58,34,.14),0 22px 48px rgba(44,58,34,.18); --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); --ease-clunk:cubic-bezier(.3,1.6,.5,1); /* ---- ①-a 模板自有色彩（亮：午后林间木屋） ---- */ --fr-serif:"Songti SC","STSong","Noto Serif CJK SC",var(--font-sans); --fr-cream:#FFF8E7;--fr-cream-dim:#EDE4C8; --fr-sun:#F0C562;--fr-sun-soft:#F8E2AE; --fr-wood:#C69A62;--fr-wood-hi:#DFB77E;--fr-wood-lo:#A8763F;--fr-wood-deep:#6B4526; --fr-wood-edge:#8A6137;--fr-wood-ink:#4A3018; --fr-bark:#5A3A20;--fr-ring:#F3DCB0;--fr-ring-line:#7A5230; --fr-forest:#356341;--fr-forest-deep:#1F4029;--fr-moss:#6F8F52;--fr-moss-deep:#476A3B;--fr-leaf:#93B46E; --fr-topbar:#4A3520;--fr-topbar-lo:#332414;--fr-topbar-hi:rgba(255,240,200,.14); --fr-nav-ink:#FFF8E7;--fr-nav-hover:#F0C562; --fr-desk:#D8B382;--fr-desk-lo:#B98A54;--fr-desk-edge:#8A6137; --fr-desk-shine:rgba(255,246,220,.72);--fr-desk-depth:rgba(94,58,26,.16); --fr-slot:#F3E9CF;--fr-slot-edge:#B08A55;--fr-slot-ink:#3B2A17; --fr-stump-hi:#A8763F;--fr-stump-lo:#6B4526;--fr-stump-edge:#E0BE86;--fr-stump-ink:#FFF6DC; --fr-card:#FAF7EA;--fr-card-2:#F5F1DF;--fr-card-3:#FBF8EE; --fr-card-4:#F0ECD6;--fr-card-5:#EAE7CD; --fr-wattle:#A47C4E;--fr-wattle-edge:#D8C096; --fr-tip:#EFF2DC;--fr-tip-line:#A9BC88;--fr-tip-ink:#405741; --fr-hl-bg:#E4EDC9;--fr-row-current:#EDF1DC;--fr-hover-wash:rgba(255,248,231,.62); --fr-dapple:rgba(255,240,178,.74);--fr-dapple-2:rgba(255,232,164,.56); --fr-beam:rgba(255,246,205,.74);--fr-beam2:rgba(255,240,186,.52); --fr-mist:rgba(232,242,216,.26);--fr-canopy-glow:rgba(255,246,205,.46); --fr-focus-in:rgba(240,197,98,.24);--fr-press:rgba(74,48,24,.16); --fr-deco-alpha:.86; --fr-link:#2F6338;--fr-link-hover:#A0632E; --fr-shadow:0 2px 8px rgba(44,58,34,.12),0 12px 30px rgba(44,58,34,.16); --fr-shadow-hover:0 4px 12px rgba(44,58,34,.16),0 22px 44px rgba(44,58,34,.22); --fr-groove:#6E4B2A;--fr-nail:#E8CE96;--fr-signpost:#C9A063; --fr-ring-size:52px; /* ---- ①-b 森林 SVG 装饰（亮）：SVG 内颜色不可读 CSS 变量，故亮暗各存一份 ---- */ /* 树叶剪影：顶部树冠起伏轮廓 + 斜挂叶片，贴文档顶部横向平铺 */ --fr-svg-leaves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='140'%3E%3Cpath d='M0 0 H1200 V18 Q1150 42 1100 20 Q1050 50 1000 24 Q950 52 900 26 Q850 48 800 20 Q750 52 700 26 Q650 48 600 18 Q550 50 500 24 Q450 52 400 22 Q350 48 300 20 Q250 50 200 24 Q150 46 100 20 Q50 44 0 22 Z' fill='%232F5B3C' fill-opacity='.34'/%3E%3Cg fill='%232F5B3C' fill-opacity='.27'%3E%3Cellipse cx='88' cy='62' rx='27' ry='9' transform='rotate(-28 88 62)'/%3E%3Cellipse cx='238' cy='78' rx='24' ry='8' transform='rotate(24 238 78)'/%3E%3Cellipse cx='392' cy='58' rx='28' ry='9' transform='rotate(-22 392 58)'/%3E%3Cellipse cx='556' cy='84' rx='23' ry='8' transform='rotate(30 556 84)'/%3E%3Cellipse cx='712' cy='60' rx='27' ry='9' transform='rotate(-26 712 60)'/%3E%3Cellipse cx='876' cy='80' rx='24' ry='8' transform='rotate(22 876 80)'/%3E%3Cellipse cx='1038' cy='58' rx='28' ry='9' transform='rotate(-24 1038 58)'/%3E%3Cellipse cx='1160' cy='82' rx='22' ry='8' transform='rotate(28 1160 82)'/%3E%3C/g%3E%3C/svg%3E"); /* 灌木 / 蕨类剪影：贴文档底部横向平铺，不随视口分片 */ --fr-svg-canopy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='150'%3E%3Cpath d='M0 150 V118 Q60 100 118 120 Q176 96 236 118 Q296 100 354 120 Q414 94 474 118 Q534 100 594 120 Q654 94 714 118 Q774 100 834 120 Q894 96 954 118 Q1014 100 1074 120 Q1136 100 1200 118 V150 Z' fill='%232F5B3C' fill-opacity='.22'/%3E%3Cg fill='none' stroke='%232F5B3C' stroke-opacity='.30' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M150 150 V92 M150 116 L126 98 M150 108 L174 90 M126 98 V82 M174 90 V76'/%3E%3Cpath d='M520 150 V88 M520 112 L494 94 M520 104 L546 86 M494 94 V78 M546 86 V70'/%3E%3Cpath d='M910 150 V94 M910 118 L886 100 M910 110 L934 92 M886 100 V84 M934 92 V78'/%3E%3C/g%3E%3C/svg%3E"); /* 原木纹理：不规则年轮线 + 结疤，repeat 铺在桌面 / 木牌 / 路牌 / 结果屏 */ --fr-svg-wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cg fill='none' stroke='%236B4526' stroke-opacity='.17' stroke-width='1.4'%3E%3Cpath d='M-10 16 Q55 8 110 18 T230 14'/%3E%3Cpath d='M-10 44 Q60 36 120 46 T230 40'/%3E%3Cpath d='M-10 76 Q50 68 115 78 T230 72'/%3E%3Cpath d='M-10 104 Q60 98 120 106 T230 100'/%3E%3Cellipse cx='158' cy='58' rx='15' ry='8'/%3E%3Cellipse cx='158' cy='58' rx='8' ry='4'/%3E%3C/g%3E%3C/svg%3E"); /* 树桩年轮截面：树皮外圈 + 四道年轮 + 放射裂纹，放在结果屏左下 */ --fr-svg-rings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Ccircle cx='36' cy='36' r='33' fill='%23B5824A' stroke='%235A3A20' stroke-width='4'/%3E%3Cg fill='none' stroke='%236B4526' stroke-opacity='.76' stroke-width='1.5'%3E%3Ccircle cx='36' cy='36' r='27'/%3E%3Ccircle cx='36' cy='36' r='21'/%3E%3Ccircle cx='36' cy='36' r='15'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3C/g%3E%3Cpath d='M36 6 V16 M66 36 H56 M36 66 V57' stroke='%235A3A20' stroke-opacity='.6' stroke-width='1.6'/%3E%3C/svg%3E"); /* 品牌圆形树桩标：同心年轮 + 四颗铆钉 */ --fr-svg-brand: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='%23A8763F' stroke='%2353381E' stroke-width='2'/%3E%3Cg fill='none' stroke='%23FFF3D6' stroke-opacity='.76' stroke-width='1'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Ccircle cx='16' cy='16' r='7'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3Cg fill='%23FFF3D6'%3E%3Ccircle cx='16' cy='3' r='1.3'/%3E%3Ccircle cx='29' cy='16' r='1.3'/%3E%3Ccircle cx='16' cy='29' r='1.3'/%3E%3Ccircle cx='3' cy='16' r='1.3'/%3E%3C/g%3E%3C/svg%3E"); /* 藤蔓 + 小蘑菇：贴顶栏下沿横向平铺 */ --fr-svg-vine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='20'%3E%3Cpath d='M0 12 Q20 4 40 12 T80 12 T120 12' fill='none' stroke='%237FA45C' stroke-opacity='.70' stroke-width='2'/%3E%3Cg fill='%23A8C97A' fill-opacity='.60'%3E%3Cellipse cx='16' cy='6' rx='6' ry='3' transform='rotate(-30 16 6)'/%3E%3Cellipse cx='62' cy='6' rx='6' ry='3' transform='rotate(28 62 6)'/%3E%3Cellipse cx='104' cy='6' rx='6' ry='3' transform='rotate(-24 104 6)'/%3E%3C/g%3E%3Cpath d='M36 12 V17 M33 17 H39' stroke='%23E8D4AC' stroke-width='1.8'/%3E%3Cpath d='M29 17 Q36 9 43 17 Z' fill='%23C4563C' fill-opacity='.88'/%3E%3Ccircle cx='36' cy='14' r='.8' fill='%23FFF3D6'/%3E%3C/svg%3E"); /* 蕨类分割线：栏目名下方与卡片底部潮线 */ --fr-svg-fern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='14'%3E%3Cpath d='M2 11 C22 9 44 7 78 3' fill='none' stroke='%234E7C46' stroke-opacity='.85' stroke-width='1.8'/%3E%3Cg fill='%234E7C46' fill-opacity='.72'%3E%3Cellipse cx='12' cy='7' rx='5' ry='2' transform='rotate(-38 12 7)'/%3E%3Cellipse cx='26' cy='6' rx='5' ry='2' transform='rotate(-32 26 6)'/%3E%3Cellipse cx='40' cy='5' rx='4.5' ry='1.9' transform='rotate(-30 40 5)'/%3E%3Cellipse cx='54' cy='4' rx='4' ry='1.8' transform='rotate(-28 54 4)'/%3E%3Cellipse cx='16' cy='12' rx='4' ry='1.7' transform='rotate(32 16 12)'/%3E%3Cellipse cx='32' cy='11' rx='4' ry='1.7' transform='rotate(30 32 11)'/%3E%3Cellipse cx='48' cy='9' rx='3.6' ry='1.6' transform='rotate(28 48 9)'/%3E%3C/g%3E%3C/svg%3E"); /* 藤编交叉纹理：卡片包边与页脚 */ --fr-svg-wattle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' stroke='%23A47C4E' stroke-opacity='.26' stroke-width='2'%3E%3Cpath d='M-4 4 L4 -4 M0 16 L16 0 M12 20 L20 12'/%3E%3Cpath d='M-4 12 L4 20 M0 0 L16 16 M12 -4 L20 4'/%3E%3C/g%3E%3C/svg%3E"); /* 蘑菇 / 松果 / 橡果 / 落叶：立体小点缀 */ --fr-svg-mushroom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26'%3E%3Cpath d='M8 15 H20 V22 Q20 25 17 25 H11 Q8 25 8 22 Z' fill='%23F3E4C4' stroke='%236B4526' stroke-width='1.4'/%3E%3Cpath d='M2 15 Q4 4 14 4 Q24 4 26 15 Z' fill='%23C4563C' stroke='%236B4526' stroke-width='1.4'/%3E%3Cg fill='%23FFF3D6'%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Ccircle cx='17' cy='8' r='1.6'/%3E%3Ccircle cx='21' cy='12' r='1.3'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-pinecone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='44'%3E%3Cpath d='M20 3 V9' stroke='%234E6B38' stroke-width='2'/%3E%3Cpath d='M20 8 C8 10 6 22 10 34 C13 41 27 41 30 34 C34 22 32 10 20 8 Z' fill='%237A5330' stroke='%234A3018' stroke-width='1.6'/%3E%3Cg fill='none' stroke='%23D9B27E' stroke-opacity='.78' stroke-width='1.4'%3E%3Cpath d='M9 16 H31 M8 22 H32 M9 28 H31 M11 34 H29'/%3E%3Cpath d='M14 12 L18 17 M26 12 L22 17 M14 22 L18 27 M26 22 L22 27'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-acorn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='40'%3E%3Cpath d='M18 16 C9 18 8 28 12 35 Q18 40 24 35 C28 28 27 18 18 16 Z' fill='%23B07A42' stroke='%2353381E' stroke-width='1.6'/%3E%3Cpath d='M5 16 Q18 8 31 16 Q18 21 5 16 Z' fill='%236B4A28' stroke='%234A3018' stroke-width='1.4'/%3E%3Cpath d='M18 4 V11' stroke='%234A3018' stroke-width='2'/%3E%3C/svg%3E"); --fr-svg-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M3 15 C3 6 9 2 16 2 C16 9 12 16 3 15 Z' fill='%23D8A24A' fill-opacity='.88' stroke='%238A5B26' stroke-width='1'/%3E%3Cpath d='M3 15 L14 4' stroke='%238A5B26' stroke-opacity='.7' stroke-width='1'/%3E%3C/svg%3E"); /* 五张植物标识卡：蕨叶 / 松果 / 蘑菇 / 橡果 / 树苗 */ --fr-svg-icon1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M6 36 C16 30 26 20 36 5' fill='none' stroke='%23476A3B' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg fill='%237FA45C' fill-opacity='.82'%3E%3Cellipse cx='12' cy='29' rx='8' ry='3' transform='rotate(-38 12 29)'/%3E%3Cellipse cx='17' cy='23' rx='8' ry='3' transform='rotate(-36 17 23)'/%3E%3Cellipse cx='22' cy='17' rx='7' ry='2.8' transform='rotate(-34 22 17)'/%3E%3Cellipse cx='27' cy='12' rx='6' ry='2.6' transform='rotate(-32 27 12)'/%3E%3Cellipse cx='14' cy='34' rx='7' ry='2.6' transform='rotate(34 14 34)'/%3E%3Cellipse cx='20' cy='28' rx='7' ry='2.6' transform='rotate(32 20 28)'/%3E%3Cellipse cx='26' cy='22' rx='6' ry='2.4' transform='rotate(30 26 22)'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-icon2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M22 3 V8' stroke='%23476A3B' stroke-width='2'/%3E%3Cpath d='M22 8 C10 10 8 22 12 34 C15 40 29 40 32 34 C36 22 34 10 22 8 Z' fill='%237A5330' stroke='%234A3018' stroke-width='1.7'/%3E%3Cg fill='none' stroke='%23E2C391' stroke-width='1.4'%3E%3Cpath d='M11 15 H33 M10 21 H34 M11 27 H33 M13 33 H31'/%3E%3Cpath d='M16 11 L20 16 M28 11 L24 16 M16 21 L20 26 M28 21 L24 26'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-icon3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M14 22 H30 V33 Q30 37 26 37 H18 Q14 37 14 33 Z' fill='%23F3E4C4' stroke='%236B4526' stroke-width='1.7'/%3E%3Cpath d='M5 22 Q8 7 22 7 Q36 7 39 22 Z' fill='%23C4563C' stroke='%236B4526' stroke-width='1.7'/%3E%3Cg fill='%23FFF3D6'%3E%3Ccircle cx='14' cy='15' r='2.6'/%3E%3Ccircle cx='25' cy='12' r='2.2'/%3E%3Ccircle cx='32' cy='18' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-icon4:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M22 16 C12 18 11 29 15 36 Q22 41 29 36 C33 29 32 18 22 16 Z' fill='%23B07A42' stroke='%2353381E' stroke-width='1.7'/%3E%3Cpath d='M8 16 Q22 7 36 16 Q22 22 8 16 Z' fill='%236B4A28' stroke='%234A3018' stroke-width='1.5'/%3E%3Cpath d='M22 3 V11' stroke='%234A3018' stroke-width='2.2'/%3E%3C/svg%3E"); --fr-svg-icon5:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M22 37 V13' stroke='%2353381E' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M22 20 C12 20 7 14 7 7 C15 7 21 11 22 18 C23 11 29 7 37 7 C37 14 32 20 22 20 Z' fill='%237FA45C' fill-opacity='.86' stroke='%23476A3B' stroke-width='1.7'/%3E%3Cpath d='M22 30 C16 30 13 26 13 22 C18 22 21 25 22 28 C23 25 26 22 31 22 C31 26 28 30 22 30 Z' fill='%2393B46E' fill-opacity='.8' stroke='%23476A3B' stroke-width='1.4'/%3E%3C/svg%3E"); /* 说明箭头 / 下拉箭头 */ --fr-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='%23476A3B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --fr-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='%234A3018' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); /* ---- ①-c 暗色原始值（② 只做别名指向，不重写规则） ---- */ --frD-bg:#101F16;--frD-surface-1:#1C3023;--frD-surface-2:#243A2A;--frD-surface-3:#2C4432; --frD-line:#3A523B;--frD-line-strong:#5C7655; --frD-ink-900:#EDF2DD;--frD-ink-700:#D8E5C4;--frD-ink-500:#BCD2A6;--frD-ink-300:#9CB48D; --frD-accent:#8FC07A;--frD-accent-hover:#A9D496;--frD-accent-active:#C2E3B0; --frD-accent-soft:#294230;--frD-accent-deep:#B8DCA2;--frD-on-accent:#102216; --frD-topbar:#241A10;--frD-topbar-lo:#161008;--frD-topbar-hi:rgba(240,215,160,.10); --frD-desk:#5A4127;--frD-desk-lo:#3E2C19;--frD-desk-edge:#7A5831; --frD-desk-shine:rgba(255,232,186,.14);--frD-desk-depth:rgba(10,6,2,.34); --frD-slot:#3A2A1A;--frD-slot-edge:#8A6137;--frD-slot-ink:#F6EBD3; --frD-stump-hi:#6B4526;--frD-stump-lo:#3E2815;--frD-stump-edge:#B08A55; --frD-card:#203525;--frD-card-2:#1A2E20;--frD-card-3:#25402C; --frD-card-4:#182A1E;--frD-card-5:#2B4733; --frD-wattle-edge:#3A5238; --frD-tip:#233A28;--frD-tip-line:#4C6746;--frD-tip-ink:#CFDCB8; --frD-hl-bg:#335237;--frD-row-current:#27402D;--frD-hover-wash:rgba(240,215,160,.08); --frD-dapple:rgba(240,197,98,.13);--frD-dapple-2:rgba(240,197,98,.09); --frD-beam:rgba(240,197,98,.09);--frD-beam2:rgba(240,197,98,.06); --frD-mist:rgba(8,18,12,.34);--frD-canopy-glow:rgba(240,197,98,.10); --frD-focus-in:rgba(240,197,98,.16);--frD-press:rgba(240,215,160,.10); --frD-deco-alpha:.80; --frD-shadow:0 2px 8px rgba(2,8,4,.52),0 14px 34px rgba(2,8,4,.54); --frD-shadow-hover:0 4px 12px rgba(2,8,4,.58),0 24px 48px rgba(2,8,4,.62); --frD-link:#A9D496;--frD-link-hover:#F0C562; --frD-signpost:#5A4127; } /* ---- ①-d 暗版 SVG：同一套形状，只换描边与填充 ---- */ :root{ --fr-svg-leaves-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='140'%3E%3Cpath d='M0 0 H1200 V18 Q1150 42 1100 20 Q1050 50 1000 24 Q950 52 900 26 Q850 48 800 20 Q750 52 700 26 Q650 48 600 18 Q550 50 500 24 Q450 52 400 22 Q350 48 300 20 Q250 50 200 24 Q150 46 100 20 Q50 44 0 22 Z' fill='%23050F09' fill-opacity='.50'/%3E%3Cg fill='%23050F09' fill-opacity='.38'%3E%3Cellipse cx='88' cy='62' rx='27' ry='9' transform='rotate(-28 88 62)'/%3E%3Cellipse cx='238' cy='78' rx='24' ry='8' transform='rotate(24 238 78)'/%3E%3Cellipse cx='392' cy='58' rx='28' ry='9' transform='rotate(-22 392 58)'/%3E%3Cellipse cx='556' cy='84' rx='23' ry='8' transform='rotate(30 556 84)'/%3E%3Cellipse cx='712' cy='60' rx='27' ry='9' transform='rotate(-26 712 60)'/%3E%3Cellipse cx='876' cy='80' rx='24' ry='8' transform='rotate(22 876 80)'/%3E%3Cellipse cx='1038' cy='58' rx='28' ry='9' transform='rotate(-24 1038 58)'/%3E%3Cellipse cx='1160' cy='82' rx='22' ry='8' transform='rotate(28 1160 82)'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-canopy-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='150'%3E%3Cpath d='M0 150 V118 Q60 100 118 120 Q176 96 236 118 Q296 100 354 120 Q414 94 474 118 Q534 100 594 120 Q654 94 714 118 Q774 100 834 120 Q894 96 954 118 Q1014 100 1074 120 Q1136 100 1200 118 V150 Z' fill='%23050F09' fill-opacity='.52'/%3E%3Cg fill='none' stroke='%23050F09' stroke-opacity='.60' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M150 150 V92 M150 116 L126 98 M150 108 L174 90 M126 98 V82 M174 90 V76'/%3E%3Cpath d='M520 150 V88 M520 112 L494 94 M520 104 L546 86 M494 94 V78 M546 86 V70'/%3E%3Cpath d='M910 150 V94 M910 118 L886 100 M910 110 L934 92 M886 100 V84 M934 92 V78'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-wood-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='120'%3E%3Cg fill='none' stroke='%23D9B27E' stroke-opacity='.13' stroke-width='1.4'%3E%3Cpath d='M-10 16 Q55 8 110 18 T230 14'/%3E%3Cpath d='M-10 44 Q60 36 120 46 T230 40'/%3E%3Cpath d='M-10 76 Q50 68 115 78 T230 72'/%3E%3Cpath d='M-10 104 Q60 98 120 106 T230 100'/%3E%3Cellipse cx='158' cy='58' rx='15' ry='8'/%3E%3Cellipse cx='158' cy='58' rx='8' ry='4'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-rings-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Ccircle cx='36' cy='36' r='33' fill='%236B4526' stroke='%233E2815' stroke-width='4'/%3E%3Cg fill='none' stroke='%23E2C391' stroke-opacity='.66' stroke-width='1.5'%3E%3Ccircle cx='36' cy='36' r='27'/%3E%3Ccircle cx='36' cy='36' r='21'/%3E%3Ccircle cx='36' cy='36' r='15'/%3E%3Ccircle cx='36' cy='36' r='9'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3C/g%3E%3Cpath d='M36 6 V16 M66 36 H56 M36 66 V57' stroke='%23E2C391' stroke-opacity='.5' stroke-width='1.6'/%3E%3C/svg%3E"); --fr-svg-brand-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='%235A4127' stroke='%233E2815' stroke-width='2'/%3E%3Cg fill='none' stroke='%23F0DCAE' stroke-opacity='.72' stroke-width='1'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Ccircle cx='16' cy='16' r='7'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3Cg fill='%23F0DCAE'%3E%3Ccircle cx='16' cy='3' r='1.3'/%3E%3Ccircle cx='29' cy='16' r='1.3'/%3E%3Ccircle cx='16' cy='29' r='1.3'/%3E%3Ccircle cx='3' cy='16' r='1.3'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-vine-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='20'%3E%3Cpath d='M0 12 Q20 4 40 12 T80 12 T120 12' fill='none' stroke='%237FA45C' stroke-opacity='.52' stroke-width='2'/%3E%3Cg fill='%237FA45C' fill-opacity='.42'%3E%3Cellipse cx='16' cy='6' rx='6' ry='3' transform='rotate(-30 16 6)'/%3E%3Cellipse cx='62' cy='6' rx='6' ry='3' transform='rotate(28 62 6)'/%3E%3Cellipse cx='104' cy='6' rx='6' ry='3' transform='rotate(-24 104 6)'/%3E%3C/g%3E%3Cpath d='M36 12 V17 M33 17 H39' stroke='%23E8D4AC' stroke-width='1.8'/%3E%3Cpath d='M29 17 Q36 9 43 17 Z' fill='%23C4563C' fill-opacity='.82'/%3E%3Ccircle cx='36' cy='14' r='.8' fill='%23FFF3D6'/%3E%3C/svg%3E"); --fr-svg-fern-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='14'%3E%3Cpath d='M2 11 C22 9 44 7 78 3' fill='none' stroke='%239FC58A' stroke-opacity='.74' stroke-width='1.8'/%3E%3Cg fill='%239FC58A' fill-opacity='.58'%3E%3Cellipse cx='12' cy='7' rx='5' ry='2' transform='rotate(-38 12 7)'/%3E%3Cellipse cx='26' cy='6' rx='5' ry='2' transform='rotate(-32 26 6)'/%3E%3Cellipse cx='40' cy='5' rx='4.5' ry='1.9' transform='rotate(-30 40 5)'/%3E%3Cellipse cx='54' cy='4' rx='4' ry='1.8' transform='rotate(-28 54 4)'/%3E%3Cellipse cx='16' cy='12' rx='4' ry='1.7' transform='rotate(32 16 12)'/%3E%3Cellipse cx='32' cy='11' rx='4' ry='1.7' transform='rotate(30 32 11)'/%3E%3Cellipse cx='48' cy='9' rx='3.6' ry='1.6' transform='rotate(28 48 9)'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-wattle-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' stroke='%23D9B27E' stroke-opacity='.17' stroke-width='2'%3E%3Cpath d='M-4 4 L4 -4 M0 16 L16 0 M12 20 L20 12'/%3E%3Cpath d='M-4 12 L4 20 M0 0 L16 16 M12 -4 L20 4'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-mushroom-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='26'%3E%3Cpath d='M8 15 H20 V22 Q20 25 17 25 H11 Q8 25 8 22 Z' fill='%23E2C391' stroke='%233E2815' stroke-width='1.4'/%3E%3Cpath d='M2 15 Q4 4 14 4 Q24 4 26 15 Z' fill='%23A0442E' stroke='%233E2815' stroke-width='1.4'/%3E%3Cg fill='%23FFF3D6'%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Ccircle cx='17' cy='8' r='1.6'/%3E%3Ccircle cx='21' cy='12' r='1.3'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-pinecone-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='44'%3E%3Cpath d='M20 3 V9' stroke='%237FA45C' stroke-width='2'/%3E%3Cpath d='M20 8 C8 10 6 22 10 34 C13 41 27 41 30 34 C34 22 32 10 20 8 Z' fill='%235A3B20' stroke='%233E2815' stroke-width='1.6'/%3E%3Cg fill='none' stroke='%23D9B27E' stroke-opacity='.62' stroke-width='1.4'%3E%3Cpath d='M9 16 H31 M8 22 H32 M9 28 H31 M11 34 H29'/%3E%3Cpath d='M14 12 L18 17 M26 12 L22 17 M14 22 L18 27 M26 22 L22 27'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-acorn-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='40'%3E%3Cpath d='M18 16 C9 18 8 28 12 35 Q18 40 24 35 C28 28 27 18 18 16 Z' fill='%238A6033' stroke='%233E2815' stroke-width='1.6'/%3E%3Cpath d='M5 16 Q18 8 31 16 Q18 21 5 16 Z' fill='%234A3018' stroke='%233E2815' stroke-width='1.4'/%3E%3Cpath d='M18 4 V11' stroke='%23D9B27E' stroke-width='2'/%3E%3C/svg%3E"); --fr-svg-leaf-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M3 15 C3 6 9 2 16 2 C16 9 12 16 3 15 Z' fill='%23C79A4A' fill-opacity='.8' stroke='%235A3A20' stroke-width='1'/%3E%3Cpath d='M3 15 L14 4' stroke='%235A3A20' stroke-opacity='.7' stroke-width='1'/%3E%3C/svg%3E"); --fr-svg-icon1d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M6 36 C16 30 26 20 36 5' fill='none' stroke='%23A9D496' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg fill='%237FA45C' fill-opacity='.62'%3E%3Cellipse cx='12' cy='29' rx='8' ry='3' transform='rotate(-38 12 29)'/%3E%3Cellipse cx='17' cy='23' rx='8' ry='3' transform='rotate(-36 17 23)'/%3E%3Cellipse cx='22' cy='17' rx='7' ry='2.8' transform='rotate(-34 22 17)'/%3E%3Cellipse cx='27' cy='12' rx='6' ry='2.6' transform='rotate(-32 27 12)'/%3E%3Cellipse cx='14' cy='34' rx='7' ry='2.6' transform='rotate(34 14 34)'/%3E%3Cellipse cx='20' cy='28' rx='7' ry='2.6' transform='rotate(32 20 28)'/%3E%3Cellipse cx='26' cy='22' rx='6' ry='2.4' transform='rotate(30 26 22)'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-icon2d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M22 3 V8' stroke='%23A9D496' stroke-width='2'/%3E%3Cpath d='M22 8 C10 10 8 22 12 34 C15 40 29 40 32 34 C36 22 34 10 22 8 Z' fill='%235A3B20' stroke='%233E2815' stroke-width='1.7'/%3E%3Cg fill='none' stroke='%23D9B27E' stroke-opacity='.72' stroke-width='1.4'%3E%3Cpath d='M11 15 H33 M10 21 H34 M11 27 H33 M13 33 H31'/%3E%3Cpath d='M16 11 L20 16 M28 11 L24 16 M16 21 L20 26 M28 21 L24 26'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-icon3d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M14 22 H30 V33 Q30 37 26 37 H18 Q14 37 14 33 Z' fill='%23E2C391' stroke='%233E2815' stroke-width='1.7'/%3E%3Cpath d='M5 22 Q8 7 22 7 Q36 7 39 22 Z' fill='%23A0442E' stroke='%233E2815' stroke-width='1.7'/%3E%3Cg fill='%23FFF3D6'%3E%3Ccircle cx='14' cy='15' r='2.6'/%3E%3Ccircle cx='25' cy='12' r='2.2'/%3E%3Ccircle cx='32' cy='18' r='1.8'/%3E%3C/g%3E%3C/svg%3E"); --fr-svg-icon4d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M22 16 C12 18 11 29 15 36 Q22 41 29 36 C33 29 32 18 22 16 Z' fill='%238A6033' stroke='%233E2815' stroke-width='1.7'/%3E%3Cpath d='M8 16 Q22 7 36 16 Q22 22 8 16 Z' fill='%234A3018' stroke='%233E2815' stroke-width='1.5'/%3E%3Cpath d='M22 3 V11' stroke='%23D9B27E' stroke-width='2.2'/%3E%3C/svg%3E"); --fr-svg-icon5d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='40'%3E%3Cpath d='M22 37 V13' stroke='%23D9B27E' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M22 20 C12 20 7 14 7 7 C15 7 21 11 22 18 C23 11 29 7 37 7 C37 14 32 20 22 20 Z' fill='%237FA45C' fill-opacity='.60' stroke='%23A9D496' stroke-width='1.7'/%3E%3Cpath d='M22 30 C16 30 13 26 13 22 C18 22 21 25 22 28 C23 25 26 22 31 22 C31 26 28 30 22 30 Z' fill='%2393B46E' fill-opacity='.54' stroke='%23A9D496' stroke-width='1.4'/%3E%3C/svg%3E"); --fr-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='%23A9D496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --fr-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='%23E2C391' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ==================================================== ② 暮色林地 · 暗色双路径（只换变量） */ :root[data-theme=dark]{ --c-bg:#101F16;--c-surface-1:#1C3023;--c-surface-2:#243A2A;--c-surface-3:#2C4432; --c-line:#3A523B;--c-line-strong:#5C7655; --c-ink-900:#EDF2DD;--c-ink-700:#D8E5C4;--c-ink-500:#BCD2A6;--c-ink-300:#9CB48D;--c-ink-invert:#101F16; --c-accent:#8FC07A;--c-accent-hover:#A9D496;--c-accent-active:#C2E3B0; --c-accent-soft:#294230;--c-accent-deep:#B8DCA2;--c-on-accent:#102216; --c-success:#8FC07A;--c-success-soft:#294230;--c-warning:#E8C986;--c-warning-soft:#423620; --c-danger:#E8A394;--c-danger-soft:#4A2A22;--c-info:#8FC07A;--c-info-soft:#294230; --c-focus:#8FC07A;--c-selection:#3E6040; --sh-1:0 2px 8px rgba(2,8,4,.52),0 10px 26px rgba(2,8,4,.52); --sh-2:0 4px 12px rgba(2,8,4,.58),0 22px 48px rgba(2,8,4,.60); --fr-topbar:var(--frD-topbar);--fr-topbar-lo:var(--frD-topbar-lo);--fr-topbar-hi:var(--frD-topbar-hi); --fr-desk:var(--frD-desk);--fr-desk-lo:var(--frD-desk-lo);--fr-desk-edge:var(--frD-desk-edge); --fr-desk-shine:var(--frD-desk-shine);--fr-desk-depth:var(--frD-desk-depth); --fr-slot:var(--frD-slot);--fr-slot-edge:var(--frD-slot-edge);--fr-slot-ink:var(--frD-slot-ink); --fr-stump-hi:var(--frD-stump-hi);--fr-stump-lo:var(--frD-stump-lo);--fr-stump-edge:var(--frD-stump-edge); --fr-card:var(--frD-card);--fr-card-2:var(--frD-card-2);--fr-card-3:var(--frD-card-3); --fr-card-4:var(--frD-card-4);--fr-card-5:var(--frD-card-5); --fr-wattle-edge:var(--frD-wattle-edge);--fr-signpost:var(--frD-signpost); --fr-tip:var(--frD-tip);--fr-tip-line:var(--frD-tip-line);--fr-tip-ink:var(--frD-tip-ink); --fr-hl-bg:var(--frD-hl-bg);--fr-row-current:var(--frD-row-current);--fr-hover-wash:var(--frD-hover-wash); --fr-dapple:var(--frD-dapple);--fr-dapple-2:var(--frD-dapple-2); --fr-beam:var(--frD-beam);--fr-beam2:var(--frD-beam2); --fr-mist:var(--frD-mist);--fr-canopy-glow:var(--frD-canopy-glow); --fr-focus-in:var(--frD-focus-in);--fr-press:var(--frD-press); --fr-deco-alpha:var(--frD-deco-alpha); --fr-shadow:var(--frD-shadow);--fr-shadow-hover:var(--frD-shadow-hover); --fr-link:var(--frD-link);--fr-link-hover:var(--frD-link-hover); --fr-arrow:var(--fr-svg-arrow-d);--fr-select-arrow:var(--fr-svg-select-d); color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-theme=light]){ --c-bg:#101F16;--c-surface-1:#1C3023;--c-surface-2:#243A2A;--c-surface-3:#2C4432; --c-line:#3A523B;--c-line-strong:#5C7655; --c-ink-900:#EDF2DD;--c-ink-700:#D8E5C4;--c-ink-500:#BCD2A6;--c-ink-300:#9CB48D;--c-ink-invert:#101F16; --c-accent:#8FC07A;--c-accent-hover:#A9D496;--c-accent-active:#C2E3B0; --c-accent-soft:#294230;--c-accent-deep:#B8DCA2;--c-on-accent:#102216; --c-success:#8FC07A;--c-success-soft:#294230;--c-warning:#E8C986;--c-warning-soft:#423620; --c-danger:#E8A394;--c-danger-soft:#4A2A22;--c-info:#8FC07A;--c-info-soft:#294230; --c-focus:#8FC07A;--c-selection:#3E6040; --sh-1:0 2px 8px rgba(2,8,4,.52),0 10px 26px rgba(2,8,4,.52); --sh-2:0 4px 12px rgba(2,8,4,.58),0 22px 48px rgba(2,8,4,.60); --fr-topbar:var(--frD-topbar);--fr-topbar-lo:var(--frD-topbar-lo);--fr-topbar-hi:var(--frD-topbar-hi); --fr-desk:var(--frD-desk);--fr-desk-lo:var(--frD-desk-lo);--fr-desk-edge:var(--frD-desk-edge); --fr-desk-shine:var(--frD-desk-shine);--fr-desk-depth:var(--frD-desk-depth); --fr-slot:var(--frD-slot);--fr-slot-edge:var(--frD-slot-edge);--fr-slot-ink:var(--frD-slot-ink); --fr-stump-hi:var(--frD-stump-hi);--fr-stump-lo:var(--frD-stump-lo);--fr-stump-edge:var(--frD-stump-edge); --fr-card:var(--frD-card);--fr-card-2:var(--frD-card-2);--fr-card-3:var(--frD-card-3); --fr-card-4:var(--frD-card-4);--fr-card-5:var(--frD-card-5); --fr-wattle-edge:var(--frD-wattle-edge);--fr-signpost:var(--frD-signpost); --fr-tip:var(--frD-tip);--fr-tip-line:var(--frD-tip-line);--fr-tip-ink:var(--frD-tip-ink); --fr-hl-bg:var(--frD-hl-bg);--fr-row-current:var(--frD-row-current);--fr-hover-wash:var(--frD-hover-wash); --fr-dapple:var(--frD-dapple);--fr-dapple-2:var(--frD-dapple-2); --fr-beam:var(--frD-beam);--fr-beam2:var(--frD-beam2); --fr-mist:var(--frD-mist);--fr-canopy-glow:var(--frD-canopy-glow); --fr-focus-in:var(--frD-focus-in);--fr-press:var(--frD-press); --fr-deco-alpha:var(--frD-deco-alpha); --fr-shadow:var(--frD-shadow);--fr-shadow-hover:var(--frD-shadow-hover); --fr-link:var(--frD-link);--fr-link-hover:var(--frD-link-hover); --fr-arrow:var(--fr-svg-arrow-d);--fr-select-arrow:var(--fr-svg-select-d); color-scheme:dark; } } /* ==================================================== ③ 森林背景：纵向渐变 / 树叶剪影 / 丁达尔光束 / 光斑 / 灌木 / 薄林雾 */ body{ background-color:var(--c-bg); /* 层序红线：不透明的底色渐变必须放最下层，否则会盖掉其后的 SVG 装饰。 ocean 曾把深度计放在底色之后，computed 层存在但画面里完全不显示。 */ background-image: linear-gradient(104deg,transparent 6%,var(--fr-beam) 17%,transparent 28%), linear-gradient(100deg,transparent 48%,var(--fr-beam2) 56%,transparent 66%), radial-gradient(ellipse 620px 260px at 18% 8%,var(--fr-dapple) 0,transparent 72%), radial-gradient(ellipse 520px 220px at 84% 26%,var(--fr-dapple-2) 0,transparent 72%), radial-gradient(ellipse 760px 320px at 50% -8%,var(--fr-canopy-glow) 0,transparent 72%), linear-gradient(180deg,var(--fr-mist) 0,transparent 34%), var(--fr-leaves-img), var(--fr-canopy-img), linear-gradient(178deg,#EAF2DC 0%,#C6DDB0 24%,#94BE8C 58%,#5D8C67 100%); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,no-repeat; background-position:center top,center top,center top,center top,center top,center top,left top,left bottom,center; background-size:100% 100%,100% 100%,auto,auto,auto,100% 100%,1200px 140px,1200px 150px,100% 100%; /* 全部随文档滚动：纵向渐变按整页展开成真正的「树冠 → 林下」， 树叶 / 灌木 / 光斑不会因 fixed 背景按视口分片而重复成横带。 */ background-attachment:scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll,scroll; background-blend-mode:screen,screen,screen,screen,screen,normal,normal,normal,normal; color:var(--c-ink-900); } a{text-decoration-color:var(--fr-link)} a:hover{text-decoration-color:var(--fr-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(--fr-link)} /* ==================================================== ④ 木屋横梁顶栏 / 圆形树桩品牌标 / 蕨类栏目线 */ .c-topbar{ position:relative; background-color:var(--fr-topbar); background-image: var(--fr-vine-img), var(--fr-wood-img), linear-gradient(180deg,var(--fr-topbar-hi) 0,transparent 46%), linear-gradient(180deg,transparent 60%,rgba(20,12,4,.34) 100%), linear-gradient(180deg,var(--fr-topbar) 0%,var(--fr-topbar-lo) 100%); background-repeat:repeat-x,repeat,no-repeat,no-repeat,no-repeat; background-position:left bottom,left top,center top,center bottom,center; background-size:120px 20px,220px 120px,100% 100%,100% 100%,100% 100%; border-bottom:3px solid var(--fr-bark); box-shadow:inset 0 -2px 0 rgba(255,240,200,.16),0 4px 14px rgba(30,22,10,.28); } .c-topbar__brand{color:var(--fr-cream);font-family:var(--fr-serif);letter-spacing:.06em;font-weight:600} .c-topbar__brand-mark{ color:transparent; background-color:transparent;border:0;border-radius:50%;box-shadow:none; background-image:var(--fr-brand-img); background-repeat:no-repeat;background-position:center;background-size:contain; filter:drop-shadow(0 2px 3px rgba(20,12,4,.55)); } .c-topbar__link,.c-nav__item,.c-lang,.c-theme,.c-nav>summary{ color:#FFF8E7;font-weight:600;border-radius:999px; /* 默认不放半透明浅圆斑：真实放大图里圆斑压低了奶白导航文字的对比度 */ background-color:transparent; border:1px solid rgba(255,240,200,.18); 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(240,197,98,.26);color:#FFF8E7;translate:0 -1px} .c-topbar__link[aria-current],.c-nav__item[aria-current]{ background-color:rgba(240,197,98,.30);border-color:var(--fr-sun);color:#FFF8E7} .c-lang__opt,.c-theme__label--light,.c-theme__label--dark{color:#FFF8E7;font-weight:600} .c-lang__opt[aria-current]{background:rgba(240,197,98,.30);color:#FFF8E7;border-radius:999px} .c-nav__bar{background:var(--fr-cream);border-radius:2px;opacity:.86} .c-nav__panel{ background-color:var(--fr-topbar); background-image:var(--fr-wood-img); background-repeat:repeat;background-position:left top;background-size:220px 120px; border:1px solid var(--fr-bark);border-radius:var(--r-3); box-shadow:var(--fr-shadow-hover)} .c-nav__title{color:var(--fr-sun-soft);letter-spacing:.1em} /* 蕨类线放进 h2 自身底部 padding 内，绝不越界压到下方灰色副标题。 独立评审指出 bottom:-10px 时蕨叶横穿 .c-sec__desc 首行，亮/暗、桌面/移动全中。 */ .c-h2{position:relative;padding-bottom:16px} .c-h2::after{ content:"";position:absolute;left:0;bottom:0;width:80px;height:14px; background-image:var(--fr-fern-img); background-repeat:no-repeat;background-position:left center;background-size:80px 14px; opacity:var(--fr-deco-alpha);pointer-events:none; } .c-sec__head{padding-bottom:8px} .c-eyebrow{color:var(--fr-moss-deep);letter-spacing:.12em;font-weight:600} .c-eyebrow::before{content:"";background:var(--fr-moss);border-radius:50%} .c-hero__title em{color:var(--fr-link-hover);font-style:normal; background:linear-gradient(180deg,transparent 62%,var(--fr-sun-soft) 62%)} .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(--fr-moss);font-weight:700} .c-stat strong{font-family:var(--font-mono);color:var(--fr-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; background-image:var(--fr-arrow);background-repeat:no-repeat;background-position:right 12px center; background-size:28px 10px;padding-right:40px; border:1px solid var(--fr-wattle-edge);color:var(--fr-link); background-color:var(--fr-card); } .c-friends__title,.c-links__label,.c-random__group-title,.c-scale__head-text{ font-family:var(--fr-serif);letter-spacing:.04em;color:var(--fr-forest-deep)} /* ==================================================== ⑤ 实木桌面主面板 / 木牌刻槽输入 / 树桩年轮结果屏 / 蘑菇按钮 */ .c-hero__card,.c-conv,.c-cook,.c-speccalc, .c-answer-card,.c-edu__panel,.c-side-card,.c-random__box,.c-scale__box{ position:relative; --fr-card-tone:var(--fr-card); background-color:var(--fr-card-tone); /* 藤编只落在 6px 边框区：前两层 clip 到 padding-box，第三层 clip 到 border-box。 曾把藤编铺满整卡，真实截图里变成密集菱形格子布，正文可读性被明显压低。 */ background-image: linear-gradient(158deg,var(--fr-desk-shine) 0%,transparent 46%), linear-gradient(160deg,var(--fr-card-tone) 0%,var(--c-surface-2) 100%), var(--fr-wattle-img); background-repeat:no-repeat,no-repeat,repeat; background-position:center top,center,left top; background-size:100% 100%,100% 100%,16px 16px; background-origin:padding-box,padding-box,border-box; background-clip:padding-box,padding-box,border-box; border:6px solid transparent; border-radius:var(--r-4); box-shadow:inset 0 0 0 1px var(--fr-wattle-edge),inset 0 1px 0 var(--fr-desk-shine), inset 0 -18px 40px var(--fr-desk-depth),var(--fr-shadow); } /* 主查询区：实木桌面，上缘做成略带弧度的厚木板，木纹 + 结疤清晰可见 */ .c-hero__card{ padding-top:30px; border-top:7px solid var(--fr-desk-edge); border-radius:var(--r-4) var(--r-4) var(--r-4) var(--r-4); background-image: var(--fr-wood-img), linear-gradient(180deg,rgba(255,246,220,.34) 0,transparent 30%), linear-gradient(160deg,var(--fr-desk) 0%,var(--fr-desk-lo) 100%); background-repeat:repeat,no-repeat,no-repeat; background-position:left top,center top,center; background-size:220px 120px,100% 100%,100% 100%; border-color:var(--fr-desk-edge); color:var(--fr-wood-ink); box-shadow:inset 0 0 0 5px rgba(255,240,200,.20),inset 0 2px 0 var(--fr-desk-shine), inset 0 -22px 46px var(--fr-desk-depth),var(--fr-shadow-hover); } .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 rgba(94,58,26,.38);margin-top:4px} .c-hero__card-head h2{font-family:var(--fr-serif);letter-spacing:.04em;color:var(--fr-wood-ink)} .c-hero__badge{ border-radius:999px;background-color:rgba(255,248,231,.72); border:1px solid var(--fr-desk-edge);color:var(--fr-wood-ink);font-weight:600; padding-right:30px; background-image:var(--fr-mushroom-img); background-repeat:no-repeat;background-position:right 7px center;background-size:18px 17px} .c-hero__hint{color:var(--fr-wood-ink);opacity:.82} .c-hero__title,.c-hero__lead,.c-hero__points li{color:var(--c-ink-900)} /* 木牌刻槽输入：内凹木影 + 底部刻线，绝不用竖虚线冒充纹理纵向铺满控件 */ .c-input,.c-select{ position:relative; background-color:var(--fr-slot); background-image: linear-gradient(180deg,rgba(94,58,26,.14) 0,transparent 38%), var(--fr-wood-img); background-repeat:no-repeat,repeat; background-position:center top,left top; background-size:100% 100%,220px 120px; /* 木纹以 soft-light 混合，输入槽里只留柔和木理，不用深色曲线穿过输入文字 */ background-blend-mode:normal,soft-light; border:1px solid var(--fr-slot-edge);border-bottom:3px solid var(--fr-wood-edge); border-radius:var(--r-2); color:var(--fr-slot-ink); box-shadow:inset 0 3px 8px rgba(74,48,24,.22),inset 0 -1px 0 rgba(255,248,231,.86); 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(--fr-sun); animation:fr-dapple var(--dur-slow) var(--ease-out) 1 both; } .c-select{ appearance:none;-webkit-appearance:none; background-image:var(--fr-select-arrow),var(--fr-wood-img); background-repeat:no-repeat,repeat; background-position:right 12px center,left top; background-size:12px 8px,220px 120px; background-blend-mode:normal,soft-light; padding-right:32px; } .c-conv__label,.c-field__label,.c-conv__result--qa .c-conv__label{ color:var(--fr-wood-ink);letter-spacing:.06em;font-weight:600} .c-conv__label::before,.c-field__label::before{ content:"";background:var(--fr-moss);border-radius:50%;box-shadow:0 0 0 3px rgba(111,143,82,.22)} /* 结果区 = 树桩造型数字牌：同心年轮弧从底部扩散 + 左下具象树桩截面 + 右下松果 + 奶白凿刻凹痕读数。装饰统一放底部窄带，绝不压住答案或交换按钮。 */ .c-conv__result,.c-result-card{ position:relative;padding:22px 20px 62px; background-color:var(--fr-stump-lo); background-image: var(--fr-rings-img), var(--fr-pinecone-img), repeating-radial-gradient(circle at 50% 126%,rgba(255,236,196,.12) 0 2px,transparent 2px 14px), var(--fr-wood-img), linear-gradient(168deg,var(--fr-stump-hi) 0%,var(--fr-stump-lo) 100%); background-repeat:no-repeat,no-repeat,no-repeat,repeat,no-repeat; background-position:left 12px bottom 5px,right 12px bottom 5px,center,left top,center; background-size:var(--fr-ring-size) var(--fr-ring-size),34px 38px,100% 100%,220px 120px,100% 100%; border:2px solid var(--fr-stump-edge);border-radius:var(--r-3); /* 双层树皮环：深色树皮 + 亮色木质切面，让结果牌读作「一段树桩横截面」而非普通木牌 */ box-shadow:inset 0 0 0 5px rgba(74,48,24,.42),inset 0 0 0 7px rgba(224,190,134,.32), inset 0 2px 12px rgba(40,22,8,.62),inset 0 1px 0 rgba(255,236,196,.38),var(--fr-shadow); color:var(--fr-stump-ink); } /* 出厂 .c-hero__card .c-conv__result{padding:var(--sp-3) 0} 特异性更高，用同特异性压回 */ .c-hero__card .c-conv__result{padding:18px 18px 56px} /* 顶部一道木纹压条：让结果牌读起来像钉在桌面上的木牌 */ .c-conv__result::before,.c-result-card::before{ content:"";position:absolute;left:10px;right:10px;top:5px;bottom:auto; height:4px;pointer-events:none;z-index:1; background-image:var(--fr-fern-img); background-repeat:repeat-x;background-position:left center;background-size:80px 14px; /* 暗色下蕨类描边更亮，压低透明度避免变成一排刺眼绿锯齿 */ opacity:.28; } /* 右下橡果小点缀，与松果错开，不压单位 */ .c-conv__result::after,.c-result-card::after{ /* 橡果移到左侧年轮截面旁，与右下松果拉开：真实放大图里两件小物曾挤成一团 */ content:"";position:absolute;left:calc(var(--fr-ring-size) + 20px);right:auto;bottom:5px;top:auto; width:24px;height:26px;pointer-events:none;z-index:1; background-image:var(--fr-acorn-img); background-repeat:no-repeat;background-position:center;background-size:contain; opacity:var(--fr-deco-alpha); } .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(--fr-cream-dim)} /* 刻在原木截面上的读数：奶白 + 上暗下亮凿刻阴影，首帧不透明、不裁切 */ .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(--c-accent-deep); } .c-conv__result .c-result,.c-result-card .c-result-card__v strong, .c-conv__result .c-result-card__v strong{ color:var(--fr-stump-ink);-webkit-text-fill-color:var(--fr-stump-ink); background:none;-webkit-background-clip:border-box;background-clip:border-box; text-shadow:0 1px 0 rgba(255,244,214,.44),0 -1px 1px rgba(48,28,12,.82), 0 2px 5px rgba(48,28,12,.55); } .c-result{font-size:clamp(23px,2vw + 11px,33px);letter-spacing:0;word-break:break-word} /* 出厂 critical.css 的 .c-conv__result--qa .c-result 特异性更高且字号到 40px，压回以免长小数溢出 */ .c-conv__result--qa .c-result{font-size:clamp(23px,2vw + 11px,33px)} .c-result__unit,.c-result-card__v span,.c-side-card__unit{ color:var(--fr-sun-soft);font-weight:600} .c-conv__result .c-result__unit,.c-result-card .c-result-card__v span{ color:var(--fr-sun-soft);-webkit-text-fill-color:var(--fr-sun-soft); text-shadow:0 1px 2px rgba(48,28,12,.6);background:none;-webkit-background-clip:border-box;background-clip:border-box} .c-conv__result .c-hl,.c-result-card .c-hl{ background:rgba(240,197,98,.24);color:#FFF6DC;-webkit-text-fill-color:#FFF6DC;border-radius:6px} .c-answer,.c-answer-card,.c-def{ background-color:var(--fr-card); background-image:linear-gradient(160deg,var(--fr-card) 0%,var(--c-surface-2) 100%); border:1px solid var(--fr-wattle-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:var(--fr-hl-bg);color:var(--fr-link)} .c-hl{background:var(--fr-hl-bg);color:var(--c-accent-deep);border-radius:6px} .c-answer-card__eq .c-hl,.c-formula--answer .c-hl{background:var(--fr-hl-bg);color:var(--c-accent-deep)} .c-formula{ background:var(--fr-tip);border:1px dashed var(--fr-tip-line);border-radius:var(--r-2); font-size:12px;letter-spacing:-.01em;color:var(--fr-tip-ink)} .c-formula .c-hl{white-space:nowrap} .c-table thead th{ background-color:var(--fr-hl-bg);color:var(--fr-forest-deep); border-bottom:2px solid var(--fr-wattle-edge)} .c-table tbody th,.c-table tbody td{border-bottom:1px solid var(--c-line)} .c-table tbody tr.is-current{background:var(--fr-row-current)} .c-table .is-num{font-family:var(--font-mono)} /* 按钮：蘑菇伞盖弧度 + 白点菌斑 + 木质厚边；按下有木质下陷感 */ .c-btn,.c-swap,.c-copy,.c-share{ font-weight:600;letter-spacing:.02em; transition:translate var(--dur-fast) var(--ease-clunk),transform var(--dur-fast) var(--ease-clunk), box-shadow var(--dur-base) var(--ease-out); } .c-btn--primary{ position:relative;overflow:visible; border-radius:46% 46% 40% 40% / 56% 56% 44% 44%; background-color:var(--fr-forest); background-image: radial-gradient(circle 5px at 22% 30%,rgba(255,248,231,.72) 0 60%,transparent 62%), radial-gradient(circle 4px at 68% 24%,rgba(255,248,231,.62) 0 60%,transparent 62%), radial-gradient(circle 3px at 82% 58%,rgba(255,248,231,.54) 0 60%,transparent 62%), /* 奶白菌柄自伞盖下探出：让深绿椭圆一眼读作蘑菇，而非普通药丸按钮 */ radial-gradient(ellipse 30% 50% at 50% 114%,rgba(255,248,231,.94) 0 66%, rgba(255,236,196,.78) 68%,transparent 72%), linear-gradient(180deg,#4B7C4C 0%,var(--fr-forest-deep) 100%); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat; background-position:center,center,center,center,center; background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%; border:2px solid var(--fr-forest-deep);color:var(--fr-cream); box-shadow:inset 0 1px 0 rgba(255,248,231,.34),0 4px 0 var(--fr-forest-deep),0 8px 16px rgba(30,52,26,.28); } .c-btn--primary:hover{ background-image: radial-gradient(circle 5px at 22% 30%,rgba(255,248,231,.82) 0 60%,transparent 62%), radial-gradient(circle 4px at 68% 24%,rgba(255,248,231,.72) 0 60%,transparent 62%), radial-gradient(circle 3px at 82% 58%,rgba(255,248,231,.64) 0 60%,transparent 62%), radial-gradient(ellipse 30% 50% at 50% 114%,rgba(255,248,231,.96) 0 66%, rgba(255,236,196,.82) 68%,transparent 72%), linear-gradient(180deg,#578A50 0%,#274C2F 100%); translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,248,231,.4),0 5px 0 var(--fr-forest-deep),0 12px 22px rgba(30,52,26,.32)} .c-btn--primary:active{translate:0 2px;transform:scale(.985); box-shadow:inset 0 2px 6px rgba(16,34,16,.5),0 2px 0 var(--fr-forest-deep)} /* 落叶：悬浮时从按钮上方缓缓飘落，不遮挡文字 */ .c-btn--primary::after{ content:"";position:absolute;right:8px;top:-6px;left:auto;bottom:auto; width:18px;height:18px;pointer-events:none;opacity:0; background-image:var(--fr-leaf-img); background-repeat:no-repeat;background-position:center;background-size:contain; } .c-btn--primary:hover::after{opacity:.9} .c-btn--ghost,.c-swap,.c-copy,.c-share{ background-color:var(--fr-card);color:var(--fr-wood-ink); border:1px solid var(--fr-wattle-edge);border-radius:var(--r-2); box-shadow:inset 0 1px 0 rgba(255,248,231,.9),0 2px 0 var(--fr-wattle-edge)} .c-btn--ghost:hover,.c-swap:hover,.c-copy:hover,.c-share:hover{ background-color:var(--fr-hover-wash);border-color:var(--fr-moss);color:var(--fr-wood-ink)} .c-btn--ghost:active,.c-swap:active,.c-copy:active,.c-share:active{transform:scale(.97) translateY(1px)} .c-copy.is-ok{background-color:var(--c-success-soft);border-color:var(--c-success)} /* ==================================================== ⑥ 植物标识卡 / 木质路牌量纲区 / 说明卡与页脚 */ body{counter-reset:fr-ring} .c-tool-feature{ counter-increment:fr-ring; position:relative;min-height:206px;overflow:visible; padding:34px 20px 36px; --fr-card-tone:var(--fr-card); border:6px solid transparent; border-radius:var(--r-3); background-color:var(--fr-card-tone); background-image: radial-gradient(ellipse 130px 60px at 26% 2%,rgba(255,248,231,.82) 0,transparent 72%), linear-gradient(160deg,var(--fr-card-tone) 0%,var(--c-surface-2) 100%), var(--fr-wattle-img); background-repeat:no-repeat,no-repeat,repeat; background-position:center top,center,left top; background-size:100% 100%,100% 100%,16px 16px; background-origin:padding-box,padding-box,border-box; background-clip:padding-box,padding-box,border-box; color:var(--c-ink-900); box-shadow:inset 0 0 0 1px var(--fr-wattle-edge),inset 0 1px 0 var(--fr-desk-shine), inset 0 -14px 28px var(--fr-desk-depth),var(--fr-shadow); transition:transform var(--dur-fast) var(--ease-clunk), box-shadow var(--dur-base) var(--ease-out); } .c-tool-feature:nth-child(5n+2){--fr-card-tone:var(--fr-card-2)} .c-tool-feature:nth-child(5n+3){--fr-card-tone:var(--fr-card-3)} .c-tool-feature:nth-child(5n+4){--fr-card-tone:var(--fr-card-4)} .c-tool-feature:nth-child(5n+5){--fr-card-tone:var(--fr-card-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(--fr-icon1); background-repeat:no-repeat;background-position:center;background-size:contain; opacity:var(--fr-deco-alpha); } .c-tool-feature:nth-child(5n+2)::before{background-image:var(--fr-icon2)} .c-tool-feature:nth-child(5n+3)::before{background-image:var(--fr-icon3)} .c-tool-feature:nth-child(5n+4)::before{background-image:var(--fr-icon4)} .c-tool-feature:nth-child(5n+5)::before{background-image:var(--fr-icon5)} /* 年轮编号：底部独立窄条 + 蕨类潮线，不压描述与 CTA */ .c-tool-feature::after{ content:"RING " counter(fr-ring,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(--fr-link);text-align:left;line-height:14px; background-image:var(--fr-fern-img); /* 只留右侧一小段蕨类，绝不横穿左侧 RING 编号（真实截图里编号曾被潮线盖住） */ background-repeat:no-repeat;background-position:right center;background-size:80px 14px; border-top:1px dashed var(--fr-tip-line);padding-top:2px; opacity:.82;pointer-events:none; } .c-tool-feature h3,.c-tool-feature__name,.c-tool-feature__title{ font-family:var(--fr-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,248,231,.72); border:1px solid var(--fr-wattle-edge);color:var(--fr-link);padding:5px 12px} .c-tool-feature:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--fr-moss),inset 0 1px 0 var(--fr-desk-shine),var(--fr-shadow-hover)} .c-tool-feature:hover .c-tool-feature__cta{background:var(--fr-hl-bg);text-decoration:underline;text-underline-offset:4px} .c-tool-feature:active{transform:scale(.985) translateY(2px); box-shadow:inset 0 3px 10px var(--fr-press),0 2px 0 var(--fr-wattle-edge)} /* 量纲区 = 木质路牌：右端箭尖 + 两颗钉子 + 左侧立柱 + 木纹 */ .c-dim-card{ position:relative;min-height:80px;padding:14px 30px 14px 36px; border:0;border-radius:0; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%); background-color:var(--fr-signpost); background-image: linear-gradient(180deg,rgba(255,246,220,.34) 0,transparent 46%), var(--fr-wood-img), linear-gradient(160deg,var(--fr-desk) 0%,var(--fr-desk-lo) 100%); background-repeat:no-repeat,repeat,no-repeat; background-position:center top,left top,center; background-size:100% 100%,220px 120px,100% 100%; color:var(--fr-wood-ink); transition:transform var(--dur-fast) var(--ease-clunk),filter var(--dur-fast) var(--ease-out); } .c-dim-card::before{ content:"";position:absolute;left:12px;top:50%;translate:0 -50%; width:9px;height:9px;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 34% 30%,var(--fr-nail) 0 42%,var(--fr-wood-edge) 60%,transparent 76%); box-shadow:0 -19px 0 -1px var(--fr-wood-edge),0 19px 0 -1px var(--fr-wood-edge); } .c-dim-card::after{ content:"";position:absolute;left:2px;top:0;bottom:0;right:auto; width:5px;pointer-events:none; background-color:var(--fr-bark);opacity:.42; } .c-dim-card:nth-child(4n+2){filter:brightness(.97)} .c-dim-card:nth-child(4n+3){filter:brightness(.94)} .c-dim-card__name{color:var(--fr-wood-ink);letter-spacing:.02em;font-weight:700} .c-dim-card__count{color:var(--fr-wood-ink);opacity:.76;font-family:var(--font-mono)} .c-dim-card:hover{transform:translateX(3px);filter:brightness(1.04)} .c-dim-card:active{transform:scale(.98) translateY(1px)} /* 单位胶囊 / 教学标签：奶白木片 */ .c-chip,.c-edu__tag,.c-cook__tag{ position:relative;border-radius:var(--r-2); background-color:var(--fr-card);border:1px solid var(--fr-wattle-edge); color:var(--c-ink-700);font-weight:500; box-shadow:inset 0 1px 0 rgba(255,248,231,.9),0 2px 0 var(--fr-wattle-edge)} .c-chip::before{ content:"";position:absolute;left:8px;top:50%;translate:0 -50%; width:5px;height:5px;border-radius:50%;pointer-events:none; background:var(--fr-moss);opacity:.7} .c-chip:hover,.c-chip:focus-visible,.c-chip[aria-current]{ background-color:var(--fr-hl-bg);border-color:var(--fr-moss);color:var(--c-accent-deep)} .c-edu__panel,.c-note:not(span),.c-side-card,.c-random__box,.c-scale__box{ background-color:var(--fr-card);border:1px solid var(--fr-wattle-edge);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(--fr-serif);letter-spacing:.03em} .c-edu__tip{color:var(--fr-tip-ink)} .c-faq__q,.c-faq-static__q,.c-qa__q{font-family:var(--fr-serif)} /* 页脚：深林绿 + 藤编上沿 + 灌木剪影 */ .c-footer{ position:relative;overflow:hidden; background-color:var(--fr-forest-deep); background-image: var(--fr-canopy-img), var(--fr-wattle-img), linear-gradient(180deg,#2B5234 0%,var(--fr-forest-deep) 100%); background-repeat:repeat-x,repeat,no-repeat; background-position:left bottom,left top,center; background-size:1200px 150px,16px 16px,100% 100%; border-top:5px solid var(--fr-bark); /* 独立评审指出暗色页脚小字几乎融进深绿底：提到奶白并锁死透明度 */ color:var(--fr-cream); } .c-footer__bottom,.c-footer__meta,.c-footer__tagline,.c-footer__tip{color:var(--fr-cream-dim);opacity:1} .c-footer::before{ content:"";position:absolute;left:0;right:0;top:0;height:5px; background-image:var(--fr-vine-img); background-repeat:repeat-x;background-position:left center;background-size:120px 20px; opacity:.5;pointer-events:none} .c-footer__inner{position:relative;z-index:1} .c-footer__brand{font-family:var(--fr-serif);letter-spacing:.08em;color:var(--fr-cream)} .c-footer a{color:var(--fr-sun-soft)} .c-footer a:hover{color:#FFFFFF} .c-footer__kbd{ background:rgba(255,248,231,.12);border:1px solid rgba(255,248,231,.32); color:var(--fr-cream);border-radius:5px} /* ==================================================== ⑦ 五处动效 + reduced-motion 关闭路径 ① 装饰一律 z-index:1，结果内容 z-index:2；② 入场 opacity 起点 .96 / 数字 .97，首帧可读； ③ 木纹 / 藤蔓 / 蕨类只做单向铺排与位移，不纵向平铺盖住输入文字。 */ @keyframes fr-leaf-fall{ 0%{transform:translateY(-4px) rotate(-12deg);opacity:0} 25%{opacity:.95} 100%{transform:translateY(16px) rotate(38deg);opacity:0} } @keyframes fr-dapple{ 0%{box-shadow:inset 0 3px 8px rgba(74,48,24,.22),0 0 0 0 var(--fr-focus-in),0 0 0 0 transparent} 60%{box-shadow:inset 0 3px 8px rgba(74,48,24,.14),0 0 0 5px var(--fr-focus-in),0 0 0 11px rgba(240,197,98,.10)} 100%{box-shadow:inset 0 3px 8px rgba(74,48,24,.14),0 0 0 3px var(--fr-focus-in),0 0 0 8px transparent} } @keyframes fr-walk{ from{background-position:center top,center top,center top,center top,center top,center top,left top,left bottom,center} to{background-position:center top,center top,center top,center top,center top,center top,left 120px,left bottom,center} } @keyframes fr-gather{ 0%{opacity:.97;filter:drop-shadow(0 0 0 transparent)} 50%{opacity:1;filter:drop-shadow(0 0 7px rgba(255,236,180,.66))} 100%{opacity:1;filter:drop-shadow(0 1px 2px rgba(48,28,12,.5))} } @keyframes fr-reveal{ from{opacity:.96;translate:0 12px} to{opacity:1;translate:0 0} } @media (prefers-reduced-motion:no-preference){ body{animation:fr-walk 52s 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:fr-gather var(--dur-slow) var(--ease-out) 1 both} .c-btn--primary:hover::after{animation:fr-leaf-fall 1.8s var(--ease-float) infinite} .c-conv__result::after,.c-result-card::after{animation:fr-reveal var(--dur-slow) var(--ease-out) 1 both} .c-tool-feature,.c-dim-card,.c-answer-card,.c-edu__panel,.c-random__box,.c-scale__box{ animation:fr-reveal 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-btn--primary:hover::after, .c-conv__result::after,.c-result-card::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;filter:none} .c-input:focus,.c-select:focus{animation:none;box-shadow:inset 0 3px 8px rgba(74,48,24,.22),0 0 0 3px var(--fr-focus-in)} .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;filter:none} } /* 390 档：木牌留足宽度给长小数，树桩截面缩小，桌面弧顶收敛 */ @media (max-width:640px){ :root{--fr-ring-size:40px} .c-hero__card{padding-top:22px;border-top-width:5px} .c-conv__result,.c-result-card{padding:18px 14px 54px} .c-hero__card .c-conv__result{padding:14px 14px 52px} .c-conv__result::after,.c-result-card::after{left:calc(var(--fr-ring-size) + 14px);right:auto;width:20px;height:22px} .c-result{font-size:clamp(21px,5vw,27px)} .c-tool-feature{padding:30px 16px 34px;min-height:196px} .c-tool-feature h3,.c-tool-feature__name,.c-tool-feature__title{padding-right:42px} .c-dim-card{padding-left:32px;padding-right:26px} /* 右列路牌箭尖贴屏幕边缘时看起来像被切平，给 grid 留 14px 呼吸 */ .c-dim-grid{padding-right:14px} .c-formula{font-size:12px} } /* ==================================================== ⑧ 出厂暗色硬编码二次覆盖 critical.css / app.css 在暗色路径写了硬编码值，这里用与出厂完全相同的选择器逐条压回。 */ :root[data-theme=dark] body{ background-image: linear-gradient(104deg,transparent 6%,var(--fr-beam) 17%,transparent 28%), linear-gradient(100deg,transparent 48%,var(--fr-beam2) 56%,transparent 66%), radial-gradient(ellipse 620px 260px at 18% 8%,var(--fr-dapple) 0,transparent 72%), radial-gradient(ellipse 520px 220px at 84% 26%,var(--fr-dapple-2) 0,transparent 72%), radial-gradient(ellipse 760px 320px at 50% -8%,var(--fr-canopy-glow) 0,transparent 72%), linear-gradient(180deg,var(--fr-mist) 0,transparent 34%), var(--fr-leaves-img),var(--fr-canopy-img), linear-gradient(178deg,#1E3A28 0%,#173021 32%,var(--c-bg) 70%,#0B1A12 100%); } :root[data-theme=dark] .c-input,:root[data-theme=dark] .c-select{ background-color:var(--fr-slot);color:var(--fr-slot-ink)} :root[data-theme=dark] .c-hero__card .c-conv{box-shadow:none} :root[data-theme=dark] .c-hero__card{ color:var(--fr-cream);border-color:var(--fr-desk-edge)} :root[data-theme=dark] .c-hero__card-head h2, :root[data-theme=dark] .c-conv__label,:root[data-theme=dark] .c-field__label, :root[data-theme=dark] .c-hero__hint{color:var(--fr-cream)} :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:var(--fr-card);color:var(--c-ink-900)} :root[data-theme=dark] .c-chip,:root[data-theme=dark] .c-edu__tag, :root[data-theme=dark] .c-cook__tag{background-color:var(--fr-card);color:var(--c-ink-700)} :root[data-theme=dark] .c-dim-card{background-color:var(--fr-signpost)} :root[data-theme=dark] .c-dim-card__name,:root[data-theme=dark] .c-dim-card__count{color:var(--fr-cream)} :root[data-theme=dark] .c-tool-feature__cta{background:var(--fr-hl-bg);color:var(--c-accent-deep)} :root[data-theme=dark] .c-hl{background:var(--fr-hl-bg);color:var(--c-accent-deep)} :root[data-theme=dark] .c-formula--answer .c-hl{background:var(--fr-hl-bg);color:var(--c-accent-deep)} :root[data-theme=dark] .c-answer-card__eq .c-hl{background:var(--fr-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(--fr-shadow)} :root[data-theme=dark] .c-select{background-image:var(--fr-select-arrow),var(--fr-wood-img)} :root[data-theme=dark] .c-btn--primary{color:var(--fr-cream)} @media (prefers-color-scheme:dark){ :root:not([data-theme=light]) body{ background-image: linear-gradient(104deg,transparent 6%,var(--fr-beam) 17%,transparent 28%), linear-gradient(100deg,transparent 48%,var(--fr-beam2) 56%,transparent 66%), radial-gradient(ellipse 620px 260px at 18% 8%,var(--fr-dapple) 0,transparent 72%), radial-gradient(ellipse 520px 220px at 84% 26%,var(--fr-dapple-2) 0,transparent 72%), radial-gradient(ellipse 760px 320px at 50% -8%,var(--fr-canopy-glow) 0,transparent 72%), linear-gradient(180deg,var(--fr-mist) 0,transparent 34%), var(--fr-leaves-img),var(--fr-canopy-img), linear-gradient(178deg,#1E3A28 0%,#173021 32%,var(--c-bg) 70%,#0B1A12 100%); } :root:not([data-theme=light]) .c-input,:root:not([data-theme=light]) .c-select{ background-color:var(--fr-slot);color:var(--fr-slot-ink)} :root:not([data-theme=light]) .c-hero__card .c-conv{box-shadow:none} :root:not([data-theme=light]) .c-hero__card{ color:var(--fr-cream);border-color:var(--fr-desk-edge)} :root:not([data-theme=light]) .c-hero__card-head h2, :root:not([data-theme=light]) .c-conv__label,:root:not([data-theme=light]) .c-field__label, :root:not([data-theme=light]) .c-hero__hint{color:var(--fr-cream)} :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:var(--fr-card);color:var(--c-ink-900)} :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:var(--fr-card);color:var(--c-ink-700)} :root:not([data-theme=light]) .c-dim-card{background-color:var(--fr-signpost)} :root:not([data-theme=light]) .c-dim-card__name, :root:not([data-theme=light]) .c-dim-card__count{color:var(--fr-cream)} :root:not([data-theme=light]) .c-tool-feature__cta{background:var(--fr-hl-bg);color:var(--c-accent-deep)} :root:not([data-theme=light]) .c-hl{background:var(--fr-hl-bg);color:var(--c-accent-deep)} :root:not([data-theme=light]) .c-formula--answer .c-hl{background:var(--fr-hl-bg);color:var(--c-accent-deep)} :root:not([data-theme=light]) .c-answer-card__eq .c-hl{background:var(--fr-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(--fr-shadow)} :root:not([data-theme=light]) .c-select{background-image:var(--fr-select-arrow),var(--fr-wood-img)} :root:not([data-theme=light]) .c-btn--primary{color:var(--fr-cream)} } /* 亮 / 暗 SVG 别名：暗色路径只换变量，不按主题重写 background-image，避免反向污染 */ :root{ --fr-leaves-img:var(--fr-svg-leaves);--fr-canopy-img:var(--fr-svg-canopy); --fr-wood-img:var(--fr-svg-wood);--fr-rings-img:var(--fr-svg-rings); --fr-brand-img:var(--fr-svg-brand);--fr-vine-img:var(--fr-svg-vine); --fr-fern-img:var(--fr-svg-fern);--fr-wattle-img:var(--fr-svg-wattle); --fr-mushroom-img:var(--fr-svg-mushroom);--fr-pinecone-img:var(--fr-svg-pinecone); --fr-acorn-img:var(--fr-svg-acorn);--fr-leaf-img:var(--fr-svg-leaf); --fr-icon1:var(--fr-svg-icon1);--fr-icon2:var(--fr-svg-icon2); --fr-icon3:var(--fr-svg-icon3);--fr-icon4:var(--fr-svg-icon4);--fr-icon5:var(--fr-svg-icon5); --fr-arrow:var(--fr-svg-arrow-l);--fr-select-arrow:var(--fr-svg-select-l); } :root[data-theme=dark]{ --fr-leaves-img:var(--fr-svg-leaves-d);--fr-canopy-img:var(--fr-svg-canopy-d); --fr-wood-img:var(--fr-svg-wood-d);--fr-rings-img:var(--fr-svg-rings-d); --fr-brand-img:var(--fr-svg-brand-d);--fr-vine-img:var(--fr-svg-vine-d); --fr-fern-img:var(--fr-svg-fern-d);--fr-wattle-img:var(--fr-svg-wattle-d); --fr-mushroom-img:var(--fr-svg-mushroom-d);--fr-pinecone-img:var(--fr-svg-pinecone-d); --fr-acorn-img:var(--fr-svg-acorn-d);--fr-leaf-img:var(--fr-svg-leaf-d); --fr-icon1:var(--fr-svg-icon1d);--fr-icon2:var(--fr-svg-icon2d); --fr-icon3:var(--fr-svg-icon3d);--fr-icon4:var(--fr-svg-icon4d);--fr-icon5:var(--fr-svg-icon5d); } @media (prefers-color-scheme:dark){ :root:not([data-theme=light]){ --fr-leaves-img:var(--fr-svg-leaves-d);--fr-canopy-img:var(--fr-svg-canopy-d); --fr-wood-img:var(--fr-svg-wood-d);--fr-rings-img:var(--fr-svg-rings-d); --fr-brand-img:var(--fr-svg-brand-d);--fr-vine-img:var(--fr-svg-vine-d); --fr-fern-img:var(--fr-svg-fern-d);--fr-wattle-img:var(--fr-svg-wattle-d); --fr-mushroom-img:var(--fr-svg-mushroom-d);--fr-pinecone-img:var(--fr-svg-pinecone-d); --fr-acorn-img:var(--fr-svg-acorn-d);--fr-leaf-img:var(--fr-svg-leaf-d); --fr-icon1:var(--fr-svg-icon1d);--fr-icon2:var(--fr-svg-icon2d); --fr-icon3:var(--fr-svg-icon3d);--fr-icon4:var(--fr-svg-icon4d);--fr-icon5:var(--fr-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 或低透明 repeat，不纵向平铺盖住输入文字。 4) 年轮截面 / 松果 / 橡果固定在结果屏底部窄带 z-index:1，结果内容 z-index:2， 装饰永不压住答案；入场动画 opacity 起点 .96 / 数字 .97，首帧完整可读，无 clip-path 裁切。 5) 亮 / 手动暗 / 系统暗三条主题路径只换 --c-* 与 --fr-* 别名，SVG 通过 --fr-*-img 统一切换，不出现亮块泄漏或暗色二次覆盖污染亮色。 ========================================================================== */