:root { --ink:#0c131b; --muted:#6d7176; --purple:#7f6cf6; --toc-ease:cubic-bezier(.22,1,.36,1); }
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-synthesis:none; font-family:Inter,"PingFang SC",sans-serif; color:var(--ink); }
button { font:inherit; }
button:focus-visible { outline:2px solid var(--purple); outline-offset:5px; }
h1,h2,p,ul { margin:0; } ul { padding:0; list-style:none; }
.hero { position:relative; width:min(868px,calc(100% - 48px)); margin-left:calc(var(--portfolio-content-left) + 16px); padding-top:182px; padding-bottom:68px; }
.hero-heading { display:flex; flex-direction:column; gap:18px; }
.hero h1 { font-family:"PingFang SC",sans-serif; font-weight:600; font-size:40px; line-height:44px; letter-spacing:-1.6px; }
.toc { position:fixed; z-index:10; top:110px; left:10px; width:243px; }
.back-button { display:block; border:0; padding:0; background:none; cursor:pointer; width:24px; height:24px; margin-left:32px; margin-bottom:24px; transition:transform 220ms var(--toc-ease); }
.back-button img { display:block; width:24px; height:24px; }
.back-button:hover { transform:translateX(-3px); }
.toc-item { border:0; padding:0; background:none; display:flex; align-items:center; width:100%; height:20px; margin-bottom:16px; text-align:left; cursor:pointer; color:var(--muted); font-size:14px; line-height:20px; transition:transform 220ms var(--toc-ease),color 220ms var(--toc-ease); }
.toc-line { width:24px; height:2px; border-radius:1px; flex:none; margin-right:8px; background:var(--ink); opacity:0; transform:scaleX(.25); transform-origin:left; transition:opacity 220ms var(--toc-ease),transform 220ms var(--toc-ease); }
.toc-number { width:22px; flex:none; margin-right:18px; font-variant-numeric:tabular-nums; }
.toc-label { white-space:nowrap; font-family:"PingFang SC",Inter,sans-serif; }
.toc-item.is-active,.toc-item:hover,.toc-item:focus-visible { color:var(--ink); transform:translateX(16px); }
.toc-item.is-active .toc-line { opacity:1; transform:scaleX(1); }
.to-top .toc-label { font-family:Inter,sans-serif; }
@media (max-width:1279.98px) { .hero { margin-left:280px; width:868px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
.hero { padding-bottom:53.602px; }

    /* Background and paper copied from workbench-snapshot.html. */
    * { box-sizing: border-box; }
    html, body { margin: 0; }
    .page-shell { position: relative; min-height: 100vh; }
    :root {
      --background: #fff;
      --foreground: #171717;
      --paper-inset-shadow: #78716c26;
      --paper-drop-shadow: #0000001f;
      --paper-bg: #fff;
      --paper-box-shadow: none;
      --sidebar-w: 0px;
      --paper-grid-minor: #78716c1a;
      --paper-grid-major: #78716c1f;
      --paper-grid-hover-minor: #78716c1f;
      --paper-grid-hover-major: #78716c21;
      --top-fade-from: color-mix(in srgb, var(--background) 80%, transparent);
      --portfolio-paper-top: 0px;
      --portfolio-content-inset: 0px;
      --portfolio-content-left: 0px;
    }
    @media (min-width: 1280px) {
      :root {
        --paper-box-shadow: inset 0 0 0 .5px var(--paper-inset-shadow), 0 30px 60px 0 var(--paper-drop-shadow);
        --sidebar-w: clamp(220px, calc(27.273vw - 129.09px), 280px);
        --portfolio-paper-top: 100px;
        --portfolio-content-inset: clamp(48px, 5.5vw, 110px);
        --portfolio-content-left: calc(var(--sidebar-w) + var(--portfolio-content-inset));
      }
    }
    html,
    body {
      color-scheme: light;
      background: var(--background) !important;
      overflow-x: clip !important;
    }
    .page-shell {
      isolation: isolate;
      min-height: 100vh !important;
      background: var(--background) !important;
    }
    .paper-grid-background {
      display: none;
    }
    .paper-top-fade {
      display: none;
    }
    @media (min-width: 1280px) {
      /* 白纸下方保留网格背景，接近页面底部时渐隐。 */
      .page-shell { padding-bottom: 270px; }
      .paper-grid-background {
        pointer-events: none;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: 0 !important;
        background-image:
          linear-gradient(to right, var(--paper-grid-major) 1px, transparent 1px),
          linear-gradient(to bottom, var(--paper-grid-major) 1px, transparent 1px),
          linear-gradient(to right, var(--paper-grid-minor) 1px, transparent 1px),
          linear-gradient(to bottom, var(--paper-grid-minor) 1px, transparent 1px);
        background-position: calc(var(--sidebar-w) - .5px) 99.5px;
        background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
        -webkit-mask-image:
          linear-gradient(to right, transparent 0, #00000040 80px, black var(--sidebar-w)),
          linear-gradient(to bottom, transparent 0, #00000040 35px, black 100px, black calc(100% - 240px), transparent 100%);
        mask-image:
          linear-gradient(to right, transparent 0, #00000040 80px, black var(--sidebar-w)),
          linear-gradient(to bottom, transparent 0, #00000040 35px, black 100px, black calc(100% - 240px), transparent 100%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
      }
      /* 白纸盖在网格之上 */
      .page-shell::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: var(--portfolio-paper-top);
        right: 0;
        bottom: 270px;
        left: var(--sidebar-w);
        pointer-events: none;
        background: var(--paper-bg);
        box-shadow: var(--paper-box-shadow);
      }
      /* 不改 position，避免破坏左侧目录 fixed */
      .page-shell > *:not(.paper-grid-background):not(.paper-top-fade) {
        z-index: 2;
      }
      .page-shell > .paper-grid-background {
        position: absolute !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        z-index: 0 !important;
      }
      .paper-top-fade {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 80px !important;
        z-index: 40 !important;
        pointer-events: none !important;
        background: linear-gradient(to bottom, var(--top-fade-from) 0%, transparent 100%) !important;
      }
    }
  
/* Blank space reserved for future project content. */
.template-content { position:relative; min-height:1100px; }