/* ==========================================================
     Pm Vibe 首屏（浅色版）
     层级：10 背景渐变 · 11 点阵 · 12 小猪柔光 · 13 颗粒
           20 立体字 · 30 小猪 · 40 文字 · 50 顶栏
     字体：TikTok Sans（拉丁）+ 思源黑体子集（中文），都自托管
     ========================================================== */
   @font-face{
     font-family:"TikTok Sans";
     src:url("./assets/fonts/TikTokSans-var.woff2") format("woff2-variations");
     font-weight:100 900;font-stretch:75% 125%;font-style:normal;font-display:block;
   }
   /* 等宽：参考站那排小字标注用的就是这套（它自己 /fonts/GeistMono[wght].ttf），OFL 许可，可自托管 */
   @font-face{
     font-family:"Geist Mono";
     src:url("./assets/fonts/GeistMono-var.woff2") format("woff2-variations");
     font-weight:100 900;font-style:normal;font-display:block;
   }
   /* 中文：goonsdesign 用的是 Manrope + Noto Sans TC，简体对应的就是 Noto Sans SC */
   @font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:100 900;font-display:swap;src:url("./assets/fonts/NotoSansSC-var.woff2") format("woff2-variations")}

  :root{
    /* 色号照参考站的设计变量抄：背景暖白、正文纯黑、次级是暖灰的透明度档位 */
    --bg:#FBFBF9;                 /* 白色为主，颜色交给背景那几团渐变 */
    --ink:#000;
    --ink-2:rgba(54,54,48,.6);
    --ink-3:rgba(54,54,48,.32);
    --ink-4:rgba(54,54,48,.18);
    /* 主色 = 用户指定的 #1969EE：菜单选中/hover、左下"猪有解"、搜索框聚焦环、调参浮窗的圆点全用它。
       以后站内所有"主色/菜单色"都读这一个变量，要换色只改这一行。 */
    --brand-blue:#1969EE;
    --accent:var(--brand-blue);
    --line:rgba(54,54,48,.10);
     --nav-h:62px;
     --font:"TikTok Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
     --mono:"Geist Mono","Noto Sans SC","PingFang SC",ui-monospace,SFMono-Regular,Menlo,monospace;
     --ease:cubic-bezier(.66,0,.01,1);
       /* 四块文字的左右边距：直接引用全站那一个 `--page-pad`（定义在 globals.css），
          这样首屏和站内页面（顶栏、阅读页三栏、课程列表）永远是同一条竖线。
          2026-10-11 定的：这一项交给设计定值，面板上那个「四块边距」滑杆撤掉。 */
       --pad:var(--page-pad);
       /* --pad-top 是按"墨迹"反推的：目标 = 上两块文字的墨迹上沿离顶栏底边 44px。
          16px 字号的行盒到墨迹还差 3px 左右、30px 字号差 8px，两者都对到 106px，
          再减掉顶栏 62px = 44px。改之前是 104px（上 50 / 下 43 不一致，用户发现了）。 */
       --pad-top:98px;
      /* 边距不能拿「行盒」当基准：字号越大，行盒下沿离墨迹越远。
         所以这里统一按「墨迹」定：--ink-b 是两块底部文字的目标墨迹距底，
         两块各自减掉自己的行盒→墨迹差，落到的位置才对得齐。 */
      --ink-b:44px;          /* 底部两块文字的墨迹距底。**要跟上面 --pad-top 那 44px 对齐**（用户要求上下统一） */
      --sign-ink-off:5px;    /* 16px 等宽字：行盒底到墨迹底还差 5px */
      /* 大标题「行盒底 → 墨迹底」差多少，跟行高是函数关系，不能写死：
           行盒高 = 行高 × 字号；字体自带的 ascent+descent = 1.448em，基线在行盒里离底 descent(0.303em)。
           行高越小，行盒里那圈"隐形空间"越小，墨迹就越贴近行盒底。
         之前写死 .229em（对应行高 1.30），用户把行距拖到 1.04 后，多补了 15.6px，
         大标题就比右下版权低了十几像素——就是他说的"左下和右下对不上"。 */
      --head-metrics:1.448;                            /* 字体 ascent+descent（无单位，乘 em 用） */
      --head-desc:.284;                                /* 基线离行盒底的距离（无单位，实测拟合出来的） */
      --head-ink-off:calc((var(--head-lh,1.30) - var(--head-metrics)) * .5em + var(--head-desc) * 1em);
      --head-fix:0px;      /* 大标题墨迹底边的实测残差（公式改准之后只剩半像素，留着做取整微调） */
      --pad-bot:calc(var(--ink-b) - var(--sign-ink-off));
   }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;overflow:hidden}
  body{color:var(--ink);background:var(--bg);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

  /* 背景：一块暖白画布 + 几团自己会漂移、会互相撞开的浅色，靠 WebGL 混色 */
  #bg{position:fixed;inset:0;z-index:10;display:block;width:100%;height:100%;pointer-events:none;background:var(--bg)}

  /* 点阵：半径内的点被鼠标推开（往外扩散）
     mix-blend-mode:multiply 让每个点自动"取底下的背景色再压深一档"：
     深蓝底上的点就是深蓝、粉底上的点就是深粉，不用去猜背景是什么颜色。 */
  #dots{--dz:3px;position:fixed;inset:0;z-index:13;pointer-events:none;overflow:hidden;mix-blend-mode:multiply}
  .dot{
    position:absolute;width:var(--dz);height:var(--dz);border-radius:50%;
    background:rgba(0,0,0,.30);margin:calc(var(--dz) / -2) 0 0 calc(var(--dz) / -2);
    /* 不要 will-change：1100 个点会各自开一层合成层，反倒把帧率拖下去 */
    transition:background-color .42s var(--ease);
  }
  /* 被推开的点再压深一档，位移才看得见；颜色仍然是背景色本身，只是更深 */
  .dot.on{background:rgba(0,0,0,.60)}

  /* 小猪身后一团白，把点阵压下去、让主体浮起来 */
  #halo{
    position:fixed;left:50%;top:52%;transform:translate(-50%,-50%);
    width:min(80vw,1120px);height:min(90vh,880px);z-index:12;pointer-events:none;
    /* 猪变大后中间基本被自己挡住了，这层白要收小，否则会把点阵洗掉 */
    background:radial-gradient(closest-side,rgba(255,255,255,.52),rgba(255,255,255,.20) 48%,rgba(255,255,255,0) 78%);
  }

  /* 小猪脚下的落地软影：比实时阴影干净得多，也不会出现硬边 */
  #floor{
    position:fixed;left:50%;top:83.5%;transform:translate(-50%,-50%);
    width:min(23vw,340px);height:46px;z-index:29;pointer-events:none;
    /* 参考图里猪是悬在白底上的，几乎没有落影，这里只留一层极淡的接触阴 */
    background:radial-gradient(closest-side,
      rgba(24,20,18,var(--floor-a,.18)),
      rgba(24,20,18,calc(var(--floor-a,.18) * .36)) 58%,
      rgba(24,20,18,0) 80%);
    filter:blur(14px);
  }

  /* 极淡颗粒，防止大面渐出色带 */
  #grain{
    position:fixed;inset:0;z-index:14;pointer-events:none;opacity:.08;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size:140px 140px;
  }

  #words{position:fixed;inset:0;z-index:20;display:block;width:100%;height:100%;pointer-events:none}
  /* 贴纸层：压在点阵/颗粒之上、小猪之下，所以从猪身后落下去，但不会盖住四角的文字 */
  #stickers{position:fixed;inset:0;z-index:21;display:block;width:100%;height:100%;pointer-events:none}
  #pig{position:fixed;inset:0;z-index:30;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .8s var(--ease)}
  #pig[data-ready="true"]{opacity:1}

  /* ---------- 页面文字：四块，规格全部照参考站实测值 ---------- */
  /* 参考站实测（1600×900）：左上 tiktok 30px/500、行高 1.25、字距 normal、纯黑
                            右上 mono 16px/400、行高 1.5、纯黑
                            底部标注 mono 16px/400、纯黑
                            四块左右贴边 64px（4vw）、上边 104px、底部标注离底 38px
     「离底」一律指墨迹：大标题行盒高、墨迹会往上缩 0.229em，位置由上面那组 --ink-* 变量换算 */
  .copy{position:fixed;inset:0;z-index:40;pointer-events:none}
  .copy > *{position:absolute}

  /* ① 左上：Product / Manager */
  .who{left:var(--pad);top:var(--pad-top)}
  .who h1,.who p{
    margin:0;font-size:30px;font-weight:500;line-height:1.25;letter-spacing:normal;color:var(--ink);
  }

  /* ② 右上：个人简介，三行，纯黑，右对齐（右边缘要和右下角那行版权对齐） */
  /* 字号比左边小，行盒上沿虽然齐，但墨迹上沿会高出几个像素，这里补回来，两块的视觉顶边才齐。
     top 的补偿用 em 而不是 px：换字号时（窄屏那档 12.5px）它会跟着缩，顶边才不会又错开。
     .3125em 是按 16px 字号实测的 5px 折出来的比例。 */
  .bio{
    right:var(--pad);top:calc(var(--pad-top) + .3125em);margin:0;width:min(462px,34vw);
    text-align:right;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:normal;color:var(--ink);
  }
  /* 窄屏用一份精简过的短文案（用户要求：宽度收窄 + 字数少点 + 仍然是三行）。
     选 43 个字左右是为了在 390～980px 之间都刚好三行：宽度用 clamp(190px,30vw,235px)，
     每行能放 15～19 个字，43 字正好 3 行。桌面那份长文案原样保留。 */
  .bio-short{display:none}

  /* ③ 左下：大标题（参考站这块是画在 WebGL 里的巨型字，这里用同等视觉重量还原） */
  /* 行距怎么定的：参考站左下那块量出来是「大写字母高 58px、行与行间隔 80px」，
     也就是两行墨迹之间留 22px = 字面高度的 38%。
     这里要区分三样东西：字号(1em) ≠ 字体自带的行内空间(Noto Sans SC 的 ascent+descent
     = 1.448em) ≠ 字面实际墨迹高度（实测 0.949em，不是我一开始以为的 0.86em）。
     字号变大，后两者同比例变大，所以不能拿别处的行高比例直接套。
     要留出同样的 38%：行高 = 0.949 + 0.379×0.949 ≈ 1.31，取 1.30。 */
  .headline{
    /* 行盒比字面高，墨迹停在行盒下沿以上 0.229em（+3px 实测残差）。
       减掉它之后，这块的墨迹底边正好和右下版权落在同一条线上。 */
    left:var(--pad);bottom:calc(var(--ink-b) + var(--head-fix) - var(--head-ink-off));margin:0;
    font-size:calc(clamp(56px,7.4vw,120px) * var(--head-scale,1));
    font-weight:700;line-height:var(--head-lh,1.30);letter-spacing:var(--head-ls,-.03em);
    color:var(--ink);          /* 第二行「产品经理」保持纯黑 */
  }
  .headline span{display:block}
  .headline span:first-child{color:var(--brand-blue)}   /* 只有「猪有解」用主色 */

  /* ④ 右下：站名版权，规格同参考站底部那排标注 */
  .sign{
    right:var(--pad);bottom:var(--pad-bot);
    font-family:var(--mono);font-size:16px;font-weight:400;letter-spacing:normal;
    color:var(--ink);text-transform:uppercase;
  }

  /* ---------- 调参浮窗：临时用，你调好把数值发我，我固化成默认值 ---------- */
  .tuner{
    /* 固定在右下角：折叠时只有一个小胶囊（宽度自适应），展开时往左上长，不会盖住右下角那行版权 */
    position:fixed;right:var(--pad);bottom:calc(var(--pad-bot) + 34px);
    z-index:60;width:352px;
    font-size:12px;color:var(--ink);
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(16px) saturate(150%);
    -webkit-backdrop-filter:blur(16px) saturate(150%);
    border:1px solid var(--line);border-radius:14px;
    box-shadow:0 14px 34px rgba(20,20,20,.12);
    overflow:hidden;
  }
  .tuner[data-open="false"]{width:auto}
  .tuner__head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
    padding:11px 14px;border:0;background:transparent;cursor:pointer;
    font:inherit;font-weight:600;letter-spacing:.02em;color:var(--ink);
  }
  .tuner__head i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(25,105,238,.14);transition:transform .25s var(--ease)}
  .tuner[data-open="true"] .tuner__head i{transform:scale(1.35)}
  .tuner__body{display:none;padding:0 14px 13px;max-height:calc(100vh - 200px);overflow:auto}
  .tuner[data-open="true"] .tuner__body{display:block}
  /* 分组标题：把 30 多个参数按「猪材质 / 灯光 / 立体字 / 背景 / 点阵」分开 */
  .tuner h4{
    margin:12px 0 6px;padding-top:10px;border-top:1px solid var(--line);
    font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  }
  .tuner h4:first-child{margin-top:2px;padding-top:0;border-top:0}
  .tuner .row{display:grid;grid-template-columns:96px 1fr 40px;align-items:center;gap:8px;margin:7px 0}
  .tuner .row label{color:var(--ink-2);white-space:nowrap}
  .tuner .row input[type=range]{width:100%;height:16px;accent-color:var(--accent);cursor:pointer}
  .tuner .row output{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .tuner .row.check{grid-template-columns:96px 1fr}
  .tuner .row.check input{justify-self:start;width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
  /* 注意：这里的类名不能叫 copy —— 覆盖文字层用的是 .copy{position:fixed;inset:0}，撞名会把按钮拉成整块白板 */
  .tuner button.tuner__copy{
    width:100%;margin-top:10px;padding:9px;border:1px solid var(--line);border-radius:9px;
    background:#fff;font:inherit;font-weight:600;cursor:pointer;
    transition:border-color .2s var(--ease),background-color .2s var(--ease);
  }
  .tuner button.tuner__copy:hover{border-color:var(--ink);background:#fff}

  /* ---------- 顶栏 ---------- */
  .nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    /* 左右内边距跟四块文字用同一个变量：这样站名/搜索/GitHub 钮跟下面的文字在同一条竖线上 */
    /* +2px：文字笔画本身自带 2px 左右的左边距（side bearing），补上后顶栏和下方文字落在同一条竖线上 */
    display:flex;align-items:center;gap:30px;height:var(--nav-h);padding:0 calc(var(--pad) + 2px);
    background:rgba(251,251,249,.66);
    /* 顶栏固定在会动的 WebGL 画布上方，backdrop-filter 每帧都要重新取样+模糊，
       模糊半径一大就是稳定的帧率黑洞。18px → 9px，看着几乎一样，开销小一半。 */
    backdrop-filter:saturate(150%) blur(9px);
    -webkit-backdrop-filter:saturate(150%) blur(9px);
    border-bottom:1px solid var(--line);
  }
  /* 站名是用户给的 logo 锁版（猪头 + PM Vibe）。原来的锁版是一整张图，头与字的间距写死在图里，
     用户要求"logo 调小一丢丢、字离头远一点"，所以拆成两张图分开摆：
       --logo-h  猪头高度（原来的 36px 缩到 34px）
       --word-h  PM Vibe 高度（保持原样 14.7px，只让图标变小）
       gap       头与字的间距（原来写死在图里约 5px，现在 8px，可单独调）
     两张图都是从出图里抠出来的，字形没变；word 的 margin-top:1.5px 是照原锁版里
     "字比头中心低 1.5px"还原的，不加这行字会略微上浮。
     margin-left:-3px 仍是光学对齐：猪头是圆的、左边缘一段渐隐，补 3px 才跟左上「Product」那条竖线齐。 */
  .brand{--logo-h:24px;--word-h:14.7px;display:flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;padding:5px 0}
  .brand img{display:block;width:auto}
  .brand .mark{height:var(--logo-h);margin-left:-3px}
  .brand .word{height:var(--word-h);margin-top:1.5px}
  .links{display:flex;align-items:center;gap:8px;margin-left:6px}
  .links a{
    position:relative;font-family:var(--mono);font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;
    padding:8px 10px;cursor:pointer;transition:color .3s var(--ease);
  }
  /* hover / 选中都不用下划线了（虚线框和下划线都被用户否掉）。
     hover 转主色 #1969EE；**选中保持原来的纯黑 + 加粗**（用户明确要黑的，不要蓝）。 */
  .links a:hover{color:var(--brand-blue)}
  .links a.is-active{color:var(--ink);font-weight:600}
  .actions{margin-left:auto;display:flex;align-items:center;gap:12px}
  /* GitHub 入口：参考站那种细描边的圆钮，放在搜索框右边 */
  .gh{
    display:flex;align-items:center;gap:7px;height:38px;flex:none;padding:0 15px;
    border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.66);
    color:var(--ink);text-decoration:none;pointer-events:auto;
    transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .18s var(--ease);
  }
  .gh:hover{border-color:var(--ink);background:#fff;transform:translateY(-1px)}
  .gh svg{width:17px;height:17px;display:block}
  .gh span{font-family:var(--mono);font-size:14px;font-weight:500;line-height:1}
  .search{
    display:flex;align-items:center;gap:9px;width:250px;height:38px;padding:0 14px;
    border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.66);
    transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease);
  }
  .search:hover{background:#fff}
  .search:focus-within{border-color:rgba(25,105,238,.55);box-shadow:0 0 0 4px rgba(25,105,238,.12);background:#fff}
  .search svg{width:16px;height:16px;color:var(--ink-3);flex:none}
  .search input{border:0;outline:0;background:transparent;width:100%;font-family:var(--mono);font-size:14px;color:var(--ink)}
  .search input::placeholder{color:var(--ink-3)}

  /* ---------- 窄屏三条横线：宽屏不出现，窄屏用它开合侧边导航 ---------- */
  /* 只有线条、没有外圈；收起三横线、展开一个叉，两态是同一套线性图标（24 格画布、2px 描边、圆头） */
  .burger{
    display:none;flex:none;width:34px;height:34px;margin-left:-6px;
    padding:0;border:0;background:none;color:var(--ink);cursor:pointer;
  }
  .burger svg{display:block;width:22px;height:22px;margin:0 auto}
  /* 只做透明度交叉淡入，不做缩放（缩放会让人看见图标在变小） */
  .burger .ico-menu,.burger .ico-close{transition:opacity .24s var(--ease)}
  .burger .ico-close{opacity:0}
  .burger[aria-expanded="true"] .ico-menu{opacity:0}
  .burger[aria-expanded="true"] .ico-close{opacity:1}

  @media (max-width:1180px){ .links{gap:0} .search{width:210px} }
  /* 右上简介的窄屏档提到 1100px（跟猪那台相机的取景断点同一个位置）：
     1100 以下窗口放不下那份 66 字的长文案（1024 时会挤成四行），
     所以换精简文案 + 收窄宽度，稳定三行。 */
  @media (max-width:1100px){
    .bio{width:clamp(190px,30vw,235px);font-size:12.5px}
    .bio-long{display:none} .bio-short{display:inline}
  }
  /* ---------- 窄屏侧边导航：点左上角猪头展开 ---------- */
  /* 层级特意压在顶栏（z 50）下面：这样猪头一直在最上层，再点一次就能收起来 */
  .drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:45;width:min(78vw,300px);
    padding:calc(var(--nav-h) + 20px) 24px 24px;
    background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    border-right:1px solid var(--line);
    transform:translateX(-101%);transition:transform .38s var(--ease);
    display:none;
  }
  .drawer a{
    display:block;font-family:var(--mono);font-size:17px;font-weight:500;color:var(--ink-2);
    padding:14px 2px;text-decoration:none;border-bottom:1px solid var(--line);
    transition:color .2s var(--ease);
  }
  .drawer a:last-child{border-bottom:0}
  .drawer a:active,.drawer a:hover{color:var(--brand-blue)}
  .drawer a.is-active{color:var(--ink);font-weight:600}   /* 选中同顶栏：黑 + 加粗 */
  .drawer-backdrop{
    position:fixed;inset:0;z-index:44;display:none;background:rgba(20,20,18,.22);
    opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  }
  @media (max-width:980px){
    /* 窄屏只动 --ink-b 一个值：底部两块会一起跟着挪，不会再出现「大标题离底 42px、版权离底 22px」这种错位 */
    /* 窄屏也跟桌面同一条规矩：上两块墨迹离顶栏底边 44px、下两块墨迹离底 44px。
       窄屏字号小一点（21px／12.5px），行盒到墨迹的差约 5px，所以 --pad-top 用 +39px。 */
    /* 窄屏不再单独给 --pad：上面那个 clamp 已经管到 18px 了，这里只调上下的量 */
    :root{--pad-top:calc(var(--nav-h) + 39px);--ink-b:44px;--sign-ink-off:4px}
    /* 顶栏站名也要跟左上角文字同一条竖线，所以沿用 --pad，不单独给 18px */
    /* 窄屏顶栏：三条横线在左、GitHub 图标在右、logo 和字定在正中。
       不摆搜索框；GitHub 只留图标，去掉外圈那个胶囊。 */
    .nav{gap:12px;padding:0 calc(var(--pad) + 2px)} .links{display:none}
    .burger{display:block} .search{display:none}
    .brand{position:absolute;left:50%;transform:translateX(-50%)}
    .gh{width:34px;height:34px;padding:0;border:0;background:none;justify-content:center}
    .gh span{display:none}
    .gh svg{width:22px;height:22px}
    .gh:hover{border-color:transparent;background:none;transform:none}
    .who h1,.who p{font-size:21px}
    .sign{font-size:13px}
    /* 左下大标题在窄屏要跟着屏宽一起缩：宽屏那套 clamp 的保底是 56px，
       一到手机上就被保底顶住、屏再窄也不缩，最窄那档会跟右下角的版权字压在一起。
       这里单独给一档，28px 起步、8.6vw 长大、48px 封顶（390 下约 34px、320 下 28px）。 */
    .headline{font-size:calc(clamp(28px,8.6vw,48px) * var(--head-scale,1))}
    .drawer,.drawer-backdrop{display:block}
    .drawer[data-open="true"]{transform:translateX(0)}
    .drawer-backdrop[data-open="true"]{opacity:1;pointer-events:auto}
  }
  @media (max-width:560px){
    /* 手机上简介不隐藏，宽度跟着上面的 clamp 走（190px 保底），字号再收一档 */
    .bio{font-size:12px}
  }
/* 自检浮层：只在 3D 起不来时出现，平时页面上一根线都看不到 */
#selfcheck{position:fixed;left:16px;bottom:16px;z-index:99;max-width:min(560px,92vw);
  background:#fff;color:#111;border:2px solid #e5484d;border-radius:12px;padding:14px 16px;
  font:13px/1.6 ui-monospace,Consolas,monospace;box-shadow:0 12px 40px rgba(0,0,0,.18)}
#selfcheck b{display:block;font-size:14px;margin-bottom:8px;color:#c62a2f}
#selfcheck table{border-collapse:collapse;width:100%}
#selfcheck td{padding:2px 0;vertical-align:top;word-break:break-all}
#selfcheck td:first-child{color:#666;white-space:nowrap;padding-right:10px}
#selfcheck button{margin-top:10px;font:inherit;padding:6px 12px;border:1px solid #111;border-radius:999px;background:#fff;cursor:pointer}
#selfcheck span{margin-left:10px;color:#888}