/* 延迟满足 /delayed-gratification/ —— 深度研究专题 02。由 ~/Documents/Skill/delayed-gratification/build_site.py 从原型生成，别手改。
   原型（唯一真源）https://claude.ai/artifact/2BkChn2RiM6jvYcf1WrwSt */
.dg{
  --paper:#f6f4ef;--card:#fffdf8;--ink:#1d2433;--ink2:#4b5466;--muted:#878c98;--line:#e2ddd2;
  --acc:#2e5e55;--acc-soft:#e2ede9;--orange:#e8761f;--orange-soft:#fdeedf;--orange-ink:#b55410;
  --good:#2f7d4f;--good-soft:#e4f1e8;--warn:#a96c12;--warn-soft:#f7ecd9;--bad:#b33a3a;--bad-soft:#f6e3e3;--none:#6d7280;--none-soft:#eceae5;
  --serif:"Songti SC","STSong","Noto Serif SC",serif;
  --sans:-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
.dg{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.75}
.dg *{box-sizing:border-box}
html body.gb-interior .dg.dg a{color:var(--acc);text-decoration:none}
html body.gb-interior .dg.dg a:hover{text-decoration:underline}
html body.gb-interior .dg.dg a:focus-visible,html body.gb-interior .dg.dg button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
html body.gb-interior .dg.dg .dg-wrap{max-width:1080px;margin:0 auto;padding-block:18px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
html body.gb-interior .dg.dg h1,html body.gb-interior .dg.dg h2,html body.gb-interior .dg.dg h3{font-family:var(--serif);text-wrap:balance;margin:0;line-height:1.3}
html body.gb-interior .dg.dg .dg-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
html body.gb-interior .dg.dg .dg-eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted)}
html body.gb-interior .dg.dg .dg-note{font-size:12.5px;color:var(--muted)}
html body.gb-interior .dg.dg .dg-proto{background:var(--orange-soft);color:var(--orange-ink);font-size:12.5px;padding:6px 12px;border-radius:8px;margin-bottom:14px}
html body.gb-interior .dg.dg .dg-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:center;font-size:13px;margin-bottom:22px}
html body.gb-interior .dg.dg .dg-crumb{color:var(--muted)}
html body.gb-interior .dg.dg .dg-crumb span{color:var(--ink2)}
html body.gb-interior .dg.dg .dg-toc{display:flex;gap:6px;flex-wrap:wrap}
html body.gb-interior .dg.dg .dg-toc a{padding:3px 11px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink)}
html body.gb-interior .dg.dg .dg-toc a:hover{text-decoration:none;border-color:var(--acc)}
html body.gb-interior .dg.dg .dg-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:end}
html body.gb-interior .dg.dg .dg-hero h1{font-size:44px;letter-spacing:.04em}
html body.gb-interior .dg.dg .dg-hero h1 small{display:block;font-size:17px;letter-spacing:0;color:var(--ink2);font-weight:400;margin-top:8px}
html body.gb-interior .dg.dg .dg-hero p{color:var(--ink2);max-width:62ch;margin:14px 0 0}
html body.gb-interior .dg.dg .dg-tally{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
html body.gb-interior .dg.dg .dg-tally div{background:var(--card);padding:12px 14px}
html body.gb-interior .dg.dg .dg-tally b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
html body.gb-interior .dg.dg .dg-tally span{font-size:12.5px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-ruler{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px 12px}
html body.gb-interior .dg.dg .dg-ruler-track{position:relative;height:58px;margin:0 6px}
html body.gb-interior .dg.dg .dg-ruler-track::before{content:"";position:absolute;left:0;right:0;top:30px;height:2px;background:var(--line)}
html body.gb-interior .dg.dg .dg-tick{position:absolute;top:24px;width:1px;height:14px;background:var(--muted)}
html body.gb-interior .dg.dg .dg-tick em{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
html body.gb-interior .dg.dg .dg-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--acc);border:2px solid var(--card);transform:translateX(-50%)}
html body.gb-interior .dg.dg .dg-dot--media{background:var(--ink)}
html body.gb-interior .dg.dg .dg-dot--said{background:var(--orange)}
html body.gb-interior .dg.dg .dg-gap{position:absolute;top:27px;height:8px;border-top:1px dashed var(--muted);opacity:.7}
html body.gb-interior .dg.dg .dg-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink2);margin-top:6px}
html body.gb-interior .dg.dg .dg-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
html body.gb-interior .dg.dg .dg-sec{margin-top:46px}
html body.gb-interior .dg.dg .dg-sec>h2{font-size:23px}
html body.gb-interior .dg.dg .dg-sub{color:var(--ink2);font-size:14px;margin:4px 0 16px;max-width:70ch}
html body.gb-interior .dg.dg .dg-now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body.gb-interior .dg.dg .dg-now div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
html body.gb-interior .dg.dg .dg-now .dg-mono{font-size:12px;color:var(--acc)}
html body.gb-interior .dg.dg .dg-now h3{font-size:16px;margin:2px 0 4px}
html body.gb-interior .dg.dg .dg-now p{margin:0;font-size:13.5px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-pill{display:inline-block;font-size:11.5px;line-height:1.6;padding:0 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);white-space:nowrap;vertical-align:middle}
html body.gb-interior .dg.dg .dg-pill--arch{background:var(--acc-soft);color:var(--acc);border-color:transparent}
html body.gb-interior .dg.dg .dg-pill--media{background:var(--ink);color:var(--paper);border-color:transparent}
html body.gb-interior .dg.dg .dg-pill--said{border-style:dashed;border-color:var(--orange);color:var(--orange-ink)}
html body.gb-interior .dg.dg .dg-year{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
html body.gb-interior .dg.dg .dg-year>b{font-family:var(--mono);font-size:20px;color:var(--muted);font-weight:500}
html body.gb-interior .dg.dg .dg-qs{display:grid;gap:10px}
html body.gb-interior .dg.dg .dg-q{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 14px}
html body.gb-interior .dg.dg .dg-q blockquote{margin:0;font-family:var(--serif);font-size:16.5px;line-height:1.7}
html body.gb-interior .dg.dg .dg-q .dg-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:12.5px;color:var(--muted);margin-top:6px}
html body.gb-interior .dg.dg .dg-q .dg-layer{color:var(--acc)}
html body.gb-interior .dg.dg .dg-q--key{border-color:var(--acc)}
html body.gb-interior .dg.dg .dg-dia{margin:0 0 0 0;padding:0;list-style:none;display:grid;gap:6px}
html body.gb-interior .dg.dg .dg-dia li{font-family:var(--serif);font-size:16px}
html body.gb-interior .dg.dg .dg-dia li b{font-family:var(--sans);font-size:12.5px;color:var(--muted);font-weight:500;margin-right:6px}
html body.gb-interior .dg.dg .dg-layers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
html body.gb-interior .dg.dg .dg-layer-c{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
html body.gb-interior .dg.dg .dg-layer-c .dg-mono{font-size:12px;color:var(--acc)}
html body.gb-interior .dg.dg .dg-layer-c h3{font-size:18px;margin:2px 0 6px}
html body.gb-interior .dg.dg .dg-layer-c p{margin:0 0 8px;font-size:13.5px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-layer-c q{display:block;font-family:var(--serif);font-size:14px;color:var(--ink);quotes:"「" "」";border-left:2px solid var(--acc-soft);padding-left:8px}
html body.gb-interior .dg.dg .dg-myths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
html body.gb-interior .dg.dg .dg-myth{border:1px dashed var(--line);border-radius:10px;padding:12px 14px}
html body.gb-interior .dg.dg .dg-myth s{color:var(--muted)}
html body.gb-interior .dg.dg .dg-myth p{margin:4px 0 0;font-size:13.5px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-lineage{display:grid;gap:0;border-left:2px solid var(--line);margin-left:6px}
html body.gb-interior .dg.dg .dg-step{position:relative;padding:0 0 18px 22px}
html body.gb-interior .dg.dg .dg-step::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--acc)}
html body.gb-interior .dg.dg .dg-step--turn::before{background:var(--acc)}
html body.gb-interior .dg.dg .dg-step .dg-mono{font-size:12px;color:var(--muted)}
html body.gb-interior .dg.dg .dg-step h3{font-size:17px;margin:1px 0 3px}
html body.gb-interior .dg.dg .dg-step p{margin:0;font-size:14px;color:var(--ink2);max-width:72ch}
html body.gb-interior .dg.dg .dg-step .dg-src{font-size:12px;color:var(--muted);margin-top:3px}
html body.gb-interior .dg.dg .dg-ev{font-size:11px;padding:0 7px;border-radius:999px;background:var(--none-soft);color:var(--ink2);margin-left:6px;vertical-align:2px;font-family:var(--sans);font-weight:400}
html body.gb-interior .dg.dg .dg-timer{margin:20px 0 6px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
html body.gb-interior .dg.dg .dg-timer h3{font-size:16px}
html body.gb-interior .dg.dg .dg-bars{display:grid;gap:8px;margin-top:10px}
html body.gb-interior .dg.dg .dg-bar{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 54px;gap:10px;align-items:center;font-size:13px}
html body.gb-interior .dg.dg .dg-bar .dg-t{height:12px;background:var(--none-soft);border-radius:3px;overflow:hidden}
html body.gb-interior .dg.dg .dg-bar .dg-t i{display:block;height:100%;background:var(--acc)}
html body.gb-interior .dg.dg .dg-bar .dg-t i.dg-lo{background:var(--orange)}
html body.gb-interior .dg.dg .dg-bar .dg-v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink2);text-align:right}
html body.gb-interior .dg.dg .dg-axis{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 54px;gap:10px;font-family:var(--mono);font-size:11px;color:var(--muted)}
html body.gb-interior .dg.dg .dg-axis div:nth-child(2){display:flex;justify-content:space-between}
html body.gb-interior .dg.dg .dg-strands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
html body.gb-interior .dg.dg .dg-strand{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
html body.gb-interior .dg.dg .dg-strand h3{font-size:16px;margin-bottom:6px}
html body.gb-interior .dg.dg .dg-strand ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-strand li{margin-bottom:6px}
html body.gb-interior .dg.dg .dg-strand li b{color:var(--ink);font-weight:600}
html body.gb-interior .dg.dg .dg-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--card)}
html body.gb-interior .dg.dg table{border-collapse:collapse;width:100%;min-width:720px;font-size:13.5px}
html body.gb-interior .dg.dg th,html body.gb-interior .dg.dg td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
html body.gb-interior .dg.dg th{font-size:12px;color:var(--muted);font-weight:500;background:var(--paper)}
html body.gb-interior .dg.dg tr:last-child td{border-bottom:0}
html body.gb-interior .dg.dg td:first-child{font-family:var(--serif);font-size:15px;width:30%}
html body.gb-interior .dg.dg td:nth-child(2){color:var(--ink2)}
html body.gb-interior .dg.dg .dg-vd{display:inline-block;font-size:12px;padding:1px 9px;border-radius:999px;white-space:nowrap}
html body.gb-interior .dg.dg .dg-vd--ok{background:var(--good-soft);color:var(--good)}
html body.gb-interior .dg.dg .dg-vd--half{background:var(--warn-soft);color:var(--warn)}
html body.gb-interior .dg.dg .dg-vd--no{background:var(--bad-soft);color:var(--bad)}
html body.gb-interior .dg.dg .dg-vd--na{background:var(--none-soft);color:var(--none)}
html body.gb-interior .dg.dg .dg-how{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body.gb-interior .dg.dg .dg-h{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
html body.gb-interior .dg.dg .dg-h .dg-n{font-family:var(--mono);font-size:22px;color:var(--acc);line-height:1.2;grid-row:span 3}
html body.gb-interior .dg.dg .dg-h h3{font-size:16.5px}
html body.gb-interior .dg.dg .dg-h p{margin:0;font-size:13.5px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-h .dg-src{font-size:12px;color:var(--muted)}
html body.gb-interior .dg.dg .dg-stars{color:var(--acc);letter-spacing:1px;font-size:12px;margin-left:6px;font-family:var(--sans)}
html body.gb-interior .dg.dg .dg-counter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body.gb-interior .dg.dg .dg-c{border-left:3px solid var(--line);padding:4px 0 4px 14px}
html body.gb-interior .dg.dg .dg-c h3{font-size:16.5px;margin-bottom:4px}
html body.gb-interior .dg.dg .dg-c p{margin:0;font-size:14px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-link-or{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
html body.gb-interior .dg.dg .dg-lo{border-radius:10px;padding:14px 16px;background:var(--card);border:1px solid var(--line)}
html body.gb-interior .dg.dg .dg-lo--or{background:var(--orange-soft);border-color:transparent}
html body.gb-interior .dg.dg .dg-lo h3{font-size:16.5px;margin-bottom:4px}
html body.gb-interior .dg.dg .dg-lo p{margin:0;font-size:14px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-lo--or h3,html body.gb-interior .dg.dg .dg-lo--or a{color:var(--orange-ink)}
html body.gb-interior .dg.dg .dg-mine{border:1px dashed var(--acc);border-radius:10px;padding:14px 16px;background:var(--acc-soft)}
html body.gb-interior .dg.dg .dg-mine h3{font-size:16.5px}
html body.gb-interior .dg.dg .dg-mine p{margin:6px 0 0;font-size:14px;color:var(--ink2)}
html body.gb-interior .dg.dg .dg-lock{font-size:11.5px;color:var(--muted);font-family:var(--sans);font-weight:400;margin-left:6px}
html body.gb-interior .dg.dg .dg-refs{columns:2;column-gap:28px;font-size:12.5px;color:var(--ink2);padding-left:18px;margin:0}
html body.gb-interior .dg.dg .dg-refs li{break-inside:avoid;margin-bottom:6px}
html body.gb-interior .dg.dg .dg-refs .dg-mono{font-size:11.5px}
html body.gb-interior .dg.dg .dg-refs .dg-x{color:var(--bad)}
html body.gb-interior .dg.dg .dg-colophon{margin-top:48px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}

@media (max-width:860px){
html body.gb-interior .dg.dg .dg-hero{grid-template-columns:1fr}
html body.gb-interior .dg.dg .dg-hero h1{font-size:36px}
html body.gb-interior .dg.dg .dg-layers{grid-template-columns:repeat(2,minmax(0,1fr))}
html body.gb-interior .dg.dg .dg-now,html body.gb-interior .dg.dg .dg-myths,html body.gb-interior .dg.dg .dg-strands{grid-template-columns:1fr}
html body.gb-interior .dg.dg .dg-how,html body.gb-interior .dg.dg .dg-counter,html body.gb-interior .dg.dg .dg-link-or{grid-template-columns:1fr}
html body.gb-interior .dg.dg .dg-refs{columns:1}
}
@media (max-width:520px){
html body.gb-interior .dg.dg .dg-layers{grid-template-columns:1fr}
html body.gb-interior .dg.dg .dg-year{grid-template-columns:1fr;gap:6px}
html body.gb-interior .dg.dg .dg-bar,html body.gb-interior .dg.dg .dg-axis{grid-template-columns:minmax(0,1fr) 46px}
html body.gb-interior .dg.dg .dg-bar>span:first-child,html body.gb-interior .dg.dg .dg-axis>div:first-child{grid-column:1/-1}
html body.gb-interior .dg.dg .dg-axis>div:first-child{display:none}
html body.gb-interior .dg.dg .dg-ruler-track .dg-tick:nth-of-type(even) em{display:none}
}
@media (prefers-reduced-motion:no-preference){
html body.gb-interior .dg.dg .dg-dot{transition:transform .2s}
html body.gb-interior .dg.dg .dg-dot:hover{transform:translateX(-50%) scale(1.4)}}

html body.gb-interior .dg.dg :is(h1,h2,h3){font-family:var(--serif);text-wrap:balance;margin:0;color:var(--ink);text-shadow:none;line-height:1.3;letter-spacing:normal}
html body.gb-interior .dg.dg .dg-hero h1{letter-spacing:.04em}
html body.gb-interior .dg.dg .dg-mine form{margin-top:8px;display:grid;gap:8px}
html body.gb-interior .dg.dg .dg-mine textarea{font:inherit;font-size:14.5px;line-height:1.7;padding:10px 12px;border:1px solid var(--line)!important;border-radius:8px!important;background:var(--card)!important;color:var(--ink)!important;box-shadow:none!important;width:100%;min-height:160px}
html body.gb-interior .dg.dg .dg-mine button{justify-self:start;font:inherit;font-size:13.5px;padding:6px 16px;border-radius:8px!important;border:1px solid var(--acc)!important;background:var(--acc)!important;color:#fff!important;box-shadow:none!important;text-shadow:none!important;cursor:pointer}
html body.gb-interior .dg.dg .dg-mine .dg-saved{color:var(--good);font-size:13px}
html body.gb-interior .dg.dg .dg-mine-text{white-space:pre-wrap;font-family:var(--serif);font-size:15.5px;color:var(--ink);margin-top:6px}