8pt

Suitie Mac Clipboard History Website

A bright website for a Mac clipboard history app: a blue-sky, grassy-hills hero with notch-pill navigation and a dark library window, then feature tags, a cross-device phone set, notch shelf, screenshot text recognition, multi-clip merge, snippet reminders, text shortcuts and hotkey cards, followed by a one-time-purchase price card that switches by device count, a two-column FAQ and sister-product cards.

Templates · Mac app landing page•15 sections
Overview

A complete single-file page to start from. Structure, copy slots and responsive layout are all in place; copy the prompt to your model and it rewrites the copy, colors and images for your brand.

Where to use it

Product pages for desktop and Mac apps: downloads, feature demos and pricing.

Install

With Builder, fetch the full page source with the 8pt CLI or call it directly from an editor connected to 8pt MCP.

$ npm i -g @8pt-dev/cli && 8pt template suitie-clipboard-mac
mcp › Use 8pt MCP to call get_template("suitie-clipboard-mac")

Code

Single-file HTML + CSS, no build step.

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>随贴 · Mac 剪贴板历史</title>
<meta name="description" content="随贴:把复制过的文字、图片和截图整理成一面好看的时间线。">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600&amp;text=%E9%9A%8F%E6%97%B6%E5%86%8D%E7%94%A8%E3%80%82%E7%BB%88%E8%BA%AB%E4%BD%BF&amp;display=swap">
<style>*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#0b0b0f;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}img{display:block;max-width:100%}svg{width:1em;height:1em;flex:none}.wrap{width:min(1080px,calc(100% - 40px));margin:0 auto}.h2{margin:0;text-align:center;font-size:clamp(32px,4.6vw,52px);line-height:1.15;font-weight:800;letter-spacing:.01em}.h3{margin:0;text-align:center;font-size:clamp(26px,3.4vw,40px);line-height:1.2;font-weight:800}.h4{margin:0;font-size:22px;font-weight:800;text-align:center}.lead{max-width:620px;margin:16px auto 0;text-align:center;font-size:16px;line-height:1.75;color:#5f6370}.lead.sm{font-size:14.5px;max-width:640px;margin-top:12px}.lead.xs{font-size:13.5px;max-width:380px;margin-top:10px}.br-m{display:none}.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}/* nav page mode */.top{position:fixed;left:0;right:0;top:0;z-index:50;height:0}.x-snv.x-snv--page{max-width:none;height:0;border-radius:0;overflow:visible;background:none}/* hero page mode */.hero{position:relative}.x-shr.x-shr--page{max-width:none;min-height:0;border-radius:0;padding:118px 0 0}.x-shr--page .x-shr__land{height:62%;object-position:center 60%}.x-shr--page::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}.stage{position:relative;z-index:2;width:min(1080px,calc(100% - 40px));margin:64px auto 0;padding-bottom:120px;text-align:left}/* chips */.chips{padding:40px 0 90px}.chip-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:28px auto 0;padding:0;list-style:none}.chip-list li{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:99px;background:#f3f3f5;font-size:13px;color:#3a3a42;transition:background .2s,transform .2s}.chip-list li:hover{background:#e9eefb;transform:translateY(-2px)}.chip-list svg{color:#3d7bff;font-size:15px}/* gray card */.gcard{border-radius:32px;background:#f3f3f5;padding:44px 40px 40px}.sync{padding:0 0 24px}.sync-stage{position:relative;margin-top:30px;border-radius:24px;overflow:hidden;padding:56px 32px 0}.sync-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.phones{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end}.phc{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 12px 22px;border-radius:24px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);text-align:center}.phc b{font-size:17px;line-height:1.3;font-weight:800}.ph{display:block;width:min(150px,100%);aspect-ratio:9/18;padding:5px;border-radius:26px;background:#0b0b0f;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}.ph-scr{position:relative;display:flex;flex-direction:column;gap:7px;height:100%;padding:18px 10px 10px;border-radius:21px;background:#1b1b20;overflow:hidden}.ph-h{display:block;width:50%;height:9px;border-radius:5px;background:#fff}.ph-row{display:block;width:var(--w);height:7px;border-radius:4px;background:#4a4a52}.ph-img{flex:1;border-radius:10px;background:center/cover}.ph-sug{display:flex;gap:4px;margin-top:auto}.ph-sug i{flex:1;height:18px;border-radius:6px;background:#3d7bff}.ph-sug i+i{background:#3a3a42}.ph-kb{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}.ph-kb i{height:13px;border-radius:3px;background:#4a4a52}.ph-cat{display:flex;align-items:center;gap:6px;padding:6px;border-radius:8px;background:#26262c}.ph-cat b{width:14px;height:14px;border-radius:4px}.ph-cat i{flex:1;height:6px;border-radius:3px;background:#4a4a52}.ph--widget .ph-scr{background:linear-gradient(180deg,#3d7bff,#9fd3ff)}.ph-wg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:14px;background:rgba(255,255,255,.35)}.ph-wgc{aspect-ratio:1;border-radius:9px;background:center/cover}.ph-wgt{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:6px;background:#fff}.ph-wgt i{height:5px;border-radius:3px;background:#c8c8d0}.ph-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:6px}.ph-apps i{aspect-ratio:1;border-radius:7px;background:rgba(255,255,255,.75)}.ph-apps i:nth-child(3n){background:#ffd36b}.ph-apps i:nth-child(4n){background:#5be0a8}/* features */.feats{padding:24px 0}.feats .wrap{display:grid;gap:24px}.fc .x-ocr,.fc .x-ils{margin-top:30px;background:#fff}.fc .x-ocr{max-width:none}.fc .x-ocr .x-ocr__item,.fc .x-ocr .x-ocr__search{background:#f6f6f8}.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.fc--sm{padding:36px 28px 32px}.notch-stage{position:relative;height:380px;margin-top:30px;border-radius:24px;overflow:hidden}.ns-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.notch{position:absolute;left:50%;top:0;width:180px;height:34px;border-radius:0 0 20px 20px;background:#050506;transform:translateX(-50%);overflow:hidden;animation:nt 6s cubic-bezier(.6,0,.2,1) infinite}@keyframes nt{0%,12%{width:180px;height:34px;border-radius:0 0 20px 20px}24%,78%{width:min(560px,92%);height:150px;border-radius:0 0 30px 30px}90%,100%{width:180px;height:34px;border-radius:0 0 20px 20px}}.nt-cam{position:absolute;left:50%;top:11px;width:10px;height:10px;border-radius:50%;background:#1d1d24;transform:translateX(-50%)}.nt-shelf{position:absolute;left:18px;right:18px;top:44px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;animation:ntf 6s infinite}@keyframes ntf{0%,20%{opacity:0;transform:translateY(-8px)}30%,74%{opacity:1;transform:none}82%,100%{opacity:0}}.nt-it{height:86px;border-radius:14px;background:#2a2a30 center/cover;color:#e9e9ee;font-size:11.5px;line-height:1.5;padding:10px}.nt-col{background:linear-gradient(135deg,#3d7bff,#7bd3ff)}.nt-lnk{display:grid;place-items:center;font-size:24px;color:#8fb6ff}.drag-it{position:absolute;left:50%;top:150px;width:82px;height:82px;border-radius:16px;background:center/cover;box-shadow:0 20px 40px -10px rgba(0,0,0,.45);opacity:0;animation:drag 6s cubic-bezier(.4,0,.2,1) infinite}@keyframes drag{0%,40%{opacity:0;transform:translate(-160px,-60px) scale(.8)}48%{opacity:1;transform:translate(-160px,-40px) scale(1)}72%{opacity:1;transform:translate(60px,90px) rotate(-6deg)}80%,100%{opacity:0;transform:translate(60px,110px) scale(.9)}}.merge{position:relative;height:220px;margin-top:24px;border-radius:22px;background:#fff;overflow:hidden}.mg{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;gap:6px;width:112px;height:88px;border-radius:16px;background:#f3f3f5;font-size:13px;color:#3a3a42;box-shadow:0 10px 24px -14px rgba(0,0,0,.4);background-position:center;background-size:cover}.mg1{left:12%;animation:m1 5s cubic-bezier(.6,0,.2,1) infinite}.mg2{left:50%;margin-left:-56px;animation:m2 5s cubic-bezier(.6,0,.2,1) infinite}.mg3{right:12%;animation:m3 5s cubic-bezier(.6,0,.2,1) infinite}@keyframes m1{0%,20%{transform:translateY(-50%)}45%,75%{transform:translate(calc(100% + 5vw),-58%) rotate(-6deg)}90%,100%{transform:translateY(-50%)}}@keyframes m2{0%,20%{transform:translateY(-50%)}45%,75%{transform:translateY(-50%) scale(1.04)}90%,100%{transform:translateY(-50%)}}@keyframes m3{0%,20%{transform:translateY(-50%)}45%,75%{transform:translate(calc(-100% - 5vw),-42%) rotate(6deg)}90%,100%{transform:translateY(-50%)}}.mg-done{position:absolute;left:50%;bottom:16px;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;background:#0b0b0f;color:#fff;font-size:12px;transform:translateX(-50%);opacity:0;animation:md 5s infinite}@keyframes md{0%,45%{opacity:0}52%,75%{opacity:1}85%,100%{opacity:0}}.remind{display:flex;flex-direction:column;align-items:center;gap:14px;height:220px;justify-content:center;margin-top:24px;border-radius:22px;background:#fff}.rm-card{display:flex;align-items:center;gap:12px;width:min(300px,90%);padding:12px 14px;border-radius:16px;background:#f3f3f5}.rm-card b{display:block;font-size:14px}.rm-card small{font-size:12px;color:#7a7a84}.rm-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#ffb020;color:#fff;font-size:18px;animation:ring 2.4s ease-in-out infinite}@keyframes ring{0%,60%,100%{transform:none}65%{transform:rotate(14deg)}72%{transform:rotate(-12deg)}79%{transform:rotate(8deg)}}.rm-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:330px}.rm-opts span{height:30px;padding:0 12px;border-radius:99px;background:#f3f3f5;font-size:12.5px;line-height:30px;color:#3a3a42;transition:background .3s,color .3s}.rm-opts span.on{background:#3d7bff;color:#fff}.keys{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px;padding:56px 20px;border-radius:24px;background:#fff}.kc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:110px;height:110px;border-radius:24px;background:linear-gradient(180deg,#fff,#f0f0f3);box-shadow:0 1px 0 #fff inset,0 8px 0 #d8d8de,0 18px 30px -10px rgba(0,0,0,.25);animation:kp 3s ease-in-out infinite}.kc b{font-size:38px;font-weight:600;line-height:1}.kc i{font-style:normal;font-size:12px;color:#8a8a93}.kc:nth-of-type(2){animation-delay:.15s}.kc--v{background:linear-gradient(180deg,#4a8dff,#2a62e8);color:#fff;box-shadow:0 8px 0 #1d49b8,0 18px 30px -10px rgba(30,80,200,.5);animation-delay:.3s}@keyframes kp{0%,30%,100%{transform:none}40%,55%{transform:translateY(6px);box-shadow:0 2px 0 #d8d8de,0 8px 16px -10px rgba(0,0,0,.25)}}.kc--v{animation-name:kpv}@keyframes kpv{0%,30%,100%{transform:none}40%,55%{transform:translateY(6px);box-shadow:0 2px 0 #1d49b8,0 8px 16px -10px rgba(30,80,200,.4)}}.kp{font-size:26px;color:#a1a1aa}/* bento */.bento{padding:0 0 24px}.bgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.bc{padding:36px 28px 32px;display:flex;flex-direction:column;align-items:center}.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:340px;margin-top:26px}.ct{height:36px;padding:0 16px;border-radius:99px;background:#e4e4e9;font-size:13.5px;font-weight:600;line-height:36px;color:#3a3a42;animation:ctin .5s cubic-bezier(.2,.8,.2,1) both}.ct.is-on{background:#3d7bff;color:#fff}@keyframes ctin{from{opacity:0;transform:scale(.8)}}.ct-add{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#e4e4e9;color:#3a3a42;font-size:16px;cursor:pointer;transition:transform .2s}.ct-add:hover{transform:rotate(90deg)}.apps{display:flex;gap:12px;margin-top:26px}.ap{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-size:24px;box-shadow:0 10px 20px -10px rgba(0,0,0,.4);transition:transform .25s}.ap:hover{transform:translateY(-4px) rotate(-4deg)}.types{display:flex;gap:10px;margin-top:12px}.types span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e4e4e9;color:#3a3a42;font-size:18px}/* roles */.roles{padding:110px 0 100px}.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}.rc{padding:26px 24px;border-radius:24px;background:#f3f3f5;transition:transform .3s,background .3s}.rc:hover{transform:translateY(-4px);background:#edf2fc}.rc-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;font-size:18px;color:#0b0b0f}.rc h3{margin:28px 0 8px;font-size:19px;font-weight:800}.rc p{margin:0;font-size:13.5px;line-height:1.7;color:#5f6370}/* price, faq */.price .x-dpc{max-width:none;border-radius:0;padding:110px 20px 120px}.faq{padding:110px 0 90px}/* more */.more{padding:20px 0 100px}.more .wrap{display:grid;gap:24px}.mc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:30px;align-items:center;padding:30px;border-radius:32px;background:#f3f3f5}.mc-lb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}.mc-lb i{width:22px;height:22px;border-radius:7px;background:center/cover}.mc h3{margin:12px 0 0;font-size:clamp(24px,3vw,34px);line-height:1.2;font-weight:800}.mc p{margin:12px 0 0;font-size:14.5px;line-height:1.75;color:#5f6370}.mc-btn{display:inline-flex;align-items:center;gap:8px;height:46px;margin-top:22px;padding:0 20px;border-radius:14px;background:#050506;color:#fff;font-size:14px;font-weight:650;text-decoration:none}.mc-m{position:relative;height:280px;border-radius:22px;overflow:hidden}.mc-m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}.mc:hover .mc-m img{transform:scale(1.05)}.mc-win{position:absolute;left:10%;right:10%;top:16%;bottom:-10%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr;gap:10px;padding:12px;border-radius:16px;background:rgba(18,18,22,.86);backdrop-filter:blur(8px)}.mc-win i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.mc-win i:nth-child(2){background:#febc2e}.mc-win i:nth-child(3){background:#28c840}.mc-win b{border-radius:10px;background:rgba(255,255,255,.1)}.mc-win b:nth-of-type(2){background:rgba(61,123,255,.55)}/* footer */.foot{position:relative;margin-top:40px;padding:90px 0 36px;background:#050506;color:#fff}.foot::before{content:"";position:absolute;left:50%;top:0;width:min(560px,70%);height:30px;border-radius:0 0 26px 26px;background:#fff;transform:translateX(-50%)}.ft-top{display:grid;grid-template-columns:1.1fr 1fr;gap:40px}.ft-logo{display:flex;align-items:center;gap:10px}.ft-logo img{width:30px;height:30px;border-radius:8px}.ft-logo b{font-size:16px}.ft-logo i{font-style:normal;font-size:12px;color:#8a8a93}.ft-slo{display:flex;flex-direction:column;margin:26px 0 0;font-size:30px;line-height:1.2;font-weight:800}.ft-slo em{font-family:"Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;font-style:italic;font-weight:600}.ft-d{max-width:380px;margin:14px 0 0;font-size:13.5px;line-height:1.75;color:#9a9aa3}.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.ft-cols div{display:flex;flex-direction:column;gap:12px}.ft-cols b{font-size:13px;color:#8a8a93;font-weight:600}.ft-cols a{color:#e9e9ee;text-decoration:none;font-size:14px;transition:color .2s}.ft-cols a:hover{color:#7bb2ff}.ft-bot{display:flex;justify-content:space-between;gap:16px;margin-top:60px;padding-top:24px;border-top:1px solid #1e1e24;font-size:12.5px;color:#77777f}@media (max-width:1280px){.wrap{width:min(1000px,calc(100% - 48px))}}@media (max-width:900px){.phones{grid-template-columns:repeat(2,minmax(0,1fr))}.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.mc{grid-template-columns:1fr}.ft-top{grid-template-columns:1fr}}@media (max-width:640px){.wrap{width:calc(100% - 32px)}.br-m{display:inline}.x-shr.x-shr--page{padding:96px 16px 0}.stage{width:100%;margin-top:40px;padding-bottom:70px}.gcard{padding:30px 16px 18px;border-radius:26px}.sync-stage{padding:24px 12px 0}.phones{gap:10px}.phc{padding:12px 8px 16px;border-radius:18px}.phc b{font-size:14px}.fgrid,.bgrid{grid-template-columns:1fr}.notch-stage{height:300px}.nt-shelf{grid-template-columns:repeat(3,minmax(0,1fr))}.nt-it:nth-child(n+4){display:none}.keys{gap:8px;padding:36px 8px}.kc{width:76px;height:76px;border-radius:18px}.kc b{font-size:28px}.kp{font-size:18px}.rgrid{grid-template-columns:1fr}.roles,.faq{padding:72px 0 60px}.price .x-dpc{padding:72px 16px 80px}.mc{padding:18px;border-radius:26px}.mc-m{height:200px}.ft-cols{grid-template-columns:repeat(2,1fr)}.ft-bot{flex-direction:column}.mg{width:92px;height:76px;font-size:12px}.mg2{margin-left:-46px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}.x-snv{box-sizing:border-box;position:relative;width:100%;max-width:1100px;height:320px;margin:0 auto;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#1c46d8 0%,rgba(47,134,255,.85) 45%,rgba(143,208,255,0) 80%),url(https://8pt.dev/api/media/e21eafd697bcecf7b9816709.webp) center 75%/cover #8fd0ff;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-snv *,.x-snv *::before,.x-snv *::after{box-sizing:border-box}.x-snv svg{width:1em;height:1em;flex:none}.x-snv__bar{position:absolute;left:50%;top:0;z-index:2;display:flex;align-items:center;gap:28px;width:min(720px,calc(100% - 32px));height:54px;padding:0 10px 0 12px;border-radius:0 0 22px 22px;background:#050506;color:#fff;transform:translateX(-50%);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}.x-snv__bar::before,.x-snv__bar::after{content:"";position:absolute;top:0;width:18px;height:18px;background:radial-gradient(circle at 0 100%,transparent 17.5px,#050506 18px)}.x-snv__bar::before{left:-18px;transform:scaleX(-1)}.x-snv__bar::after{right:-18px;background:radial-gradient(circle at 100% 100%,transparent 17.5px,#050506 18px);transform:scaleX(-1)}.x-snv__brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:15px;font-weight:650}.x-snv__brand img{width:28px;height:28px;border-radius:8px}.x-snv__links{display:flex;gap:22px;flex:1}.x-snv__links a{color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;transition:color .2s}.x-snv__links a:hover{color:#fff}.x-snv__dl{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;background:#fff;color:#0b0b0f;text-decoration:none;font-size:13px;font-weight:650;transition:transform .2s}.x-snv__dl:hover{transform:translateY(-1px)}.x-snv__burger{display:none;place-items:center;width:38px;height:38px;margin-left:auto;border:0;border-radius:10px;background:transparent;color:#fff;font-size:22px;cursor:pointer}.x-snv__burger .i-close{display:none}.x-snv__burger[aria-expanded="true"] .i-close{display:block}.x-snv__burger[aria-expanded="true"] .i-menu{display:none}.x-snv__menu{position:absolute;left:50%;top:62px;z-index:1;display:grid;gap:2px;width:min(360px,calc(100% - 32px));padding:10px;border-radius:20px;background:#050506;transform:translate(-50%,-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1),visibility .25s}.x-snv__menu.is-open{opacity:1;visibility:visible;transform:translate(-50%,0)}.x-snv__menu a{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;color:#fff;text-decoration:none;font-size:15px}.x-snv__menu a:hover{background:rgba(255,255,255,.08)}.x-snv__menu-dl{justify-content:center;margin-top:6px;background:#fff;color:#0b0b0f!important;font-weight:650}.x-snv__menu-dl:hover{background:#f1f1f3!important}@media (max-width:760px){.x-snv__links,.x-snv__dl{display:none}.x-snv__burger{display:grid}.x-snv__bar{border-radius:0 0 20px 20px}}@media (prefers-reduced-motion:reduce){.x-snv__menu,.x-snv__dl,.x-snv__links a{transition:none}}.x-clw{box-sizing:border-box;position:relative;width:100%;max-width:1080px;margin:0 auto;padding:14px 16px 18px;border-radius:22px;background:rgba(22,22,26,.94);color:#f3f3f5;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -30px rgba(10,20,60,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.x-clw *,.x-clw *::before,.x-clw *::after{box-sizing:border-box}.x-clw svg{width:1em;height:1em;flex:none}.x-clw__top{display:flex;align-items:center;gap:14px}.x-clw__dots{display:flex;gap:7px}.x-clw__dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.x-clw__dots i:nth-child(2){background:#febc2e}.x-clw__dots i:nth-child(3){background:#28c840}.x-clw__search{flex:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:11px;background:rgba(255,255,255,.07);color:#9a9aa3;font-size:15px}.x-clw__search input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:#fff;font:inherit;font-size:13px}.x-clw__search input::placeholder{color:#8a8a93}.x-clw__tools{display:flex;gap:6px}.x-clw__tools button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:#d6d6dc;font-size:16px;cursor:pointer}.x-clw__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 14px}.x-clw__tab{height:32px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.07);color:#cfcfd6;font:inherit;font-size:13px;cursor:pointer;transition:background .2s,color .2s}.x-clw__tab:hover{background:rgba(255,255,255,.12)}.x-clw__tab[aria-selected="true"]{background:#fff;color:#0b0b0f;font-weight:600}.x-clw__add{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#cfcfd6;font-size:15px;cursor:pointer}.x-clw__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.x-clw__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;height:168px;padding:10px;border:0;border-radius:16px;background:#2a2a30;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,box-shadow .2s;animation:x-clw-in .6s cubic-bezier(.2,.8,.2,1) both}.x-clw__card:nth-child(2){animation-delay:.05s}.x-clw__card:nth-child(3){animation-delay:.1s}.x-clw__card:nth-child(4){animation-delay:.15s}.x-clw__card:nth-child(5){animation-delay:.2s}.x-clw__card:nth-child(6){animation-delay:.25s}.x-clw__card:nth-child(7){animation-delay:.3s}.x-clw__card:nth-child(8){animation-delay:.35s}.x-clw__card:nth-child(9){animation-delay:.4s}.x-clw__card:nth-child(10){animation-delay:.45s}@keyframes x-clw-in{from{opacity:0;transform:translateY(12px) scale(.97)}}.x-clw__card:hover{transform:translateY(-3px);box-shadow:0 0 0 2px rgba(61,123,255,.8)}.x-clw__card.is-hide{display:none}.x-clw__card.is-copied{box-shadow:0 0 0 2px #28c840}.x-clw__txt{margin:0;font-size:13px;line-height:1.55;color:#e9e9ee;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.x-clw__img{flex:1;min-height:0;width:100%;object-fit:cover;border-radius:10px}.x-clw__sw{flex:1;display:flex;align-items:flex-end;padding:10px;border-radius:10px;background:var(--c)}.x-clw__sw b{font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.x-clw__lnk{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:linear-gradient(160deg,#3b3b44,#2f2f36)}.x-clw__lnk svg{font-size:18px;color:#8fb6ff}.x-clw__lnk b{font-size:13px;font-weight:600;line-height:1.4}.x-clw__lnk i{font-style:normal;font-size:11px;color:#8a8a93}.x-clw__code{flex:1;padding:10px;border-radius:10px;background:#141418;color:#9fe6a8;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}.x-clw__meta{display:flex;align-items:center;gap:6px;font-size:11px;color:#a1a1aa}.x-clw__meta em{margin-left:auto;font-style:normal;color:#77777f}.x-clw__app{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#ffd36b,#ff9f43)}.x-clw__app--image{background:linear-gradient(135deg,#7bd3ff,#3d7bff)}.x-clw__app--color{background:conic-gradient(#ff6b6b,#ffd36b,#6bff95,#6bc7ff,#b36bff,#ff6b6b)}.x-clw__app--link{background:linear-gradient(135deg,#6be3ff,#2fa7ff)}.x-clw__app--code{background:#0d0d10;box-shadow:inset 0 0 0 1px #3a3a40}.x-clw__toast{position:absolute;left:50%;bottom:16px;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:#fff;color:#0b0b0f;font-size:13px;font-weight:600;box-shadow:0 14px 40px -10px rgba(0,0,0,.5);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}.x-clw__toast svg{color:#28c840}.x-clw__toast.is-show{opacity:1;transform:translate(-50%,0)}@media (max-width:900px){.x-clw__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.x-clw__card:nth-child(n+7){display:none}}@media (max-width:560px){.x-clw__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-clw__card{height:150px}.x-clw__card:nth-child(n+5){display:none}.x-clw__tools{display:none}}@media (prefers-reduced-motion:reduce){.x-clw__card{animation:none;transition:none}.x-clw__toast{transition:none}}.x-shr{box-sizing:border-box;position:relative;width:100%;max-width:1200px;min-height:820px;margin:0 auto;padding:92px 24px 0;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#1638c9 0%,#1f6bff 28%,#4aa3ff 55%,#a9dcff 78%,#dff2ff 100%);color:#fff;text-align:center;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-shr *,.x-shr *::before,.x-shr *::after{box-sizing:border-box}.x-shr svg{width:1em;height:1em;flex:none}.x-shr__glow{position:absolute;left:0;top:-30%;width:100%;height:80%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);animation:x-shr-breathe 7s ease-in-out infinite;pointer-events:none}@keyframes x-shr-breathe{50%{opacity:.55;transform:scale(1.04)}}.x-shr__land{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;object-fit:cover;object-position:center 70%;-webkit-mask:linear-gradient(180deg,transparent 0,#000 38%);mask:linear-gradient(180deg,transparent 0,#000 38%);pointer-events:none}.x-shr__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:720px;margin:0 auto}.x-shr__badge{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:.02em;animation:x-shr-rise .8s cubic-bezier(.2,.8,.2,1) both}.x-shr__badge img{width:22px;height:22px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2)}.x-shr__h{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;line-height:1.08;font-weight:800}.x-shr__h span{font-size:clamp(44px,7vw,80px);letter-spacing:.02em;animation:x-shr-rise .8s .08s cubic-bezier(.2,.8,.2,1) both}.x-shr__h em{margin-top:6px;font-family:"Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;font-style:italic;font-weight:600;font-size:clamp(42px,6.6vw,76px);letter-spacing:.04em;background:linear-gradient(90deg,#fff 30%,#d8ecff 50%,#fff 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:x-shr-rise .8s .16s cubic-bezier(.2,.8,.2,1) both,x-shr-shine 5s 1.2s ease-in-out infinite}@keyframes x-shr-shine{50%{background-position:-100% 0}}.x-shr__p{margin:24px 0 0;max-width:600px;font-size:17px;line-height:1.75;color:rgba(255,255,255,.92);animation:x-shr-rise .8s .24s cubic-bezier(.2,.8,.2,1) both}.x-shr__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px;animation:x-shr-rise .8s .32s cubic-bezier(.2,.8,.2,1) both}.x-shr__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;padding:0 26px;border-radius:16px;font-size:16px;font-weight:650;text-decoration:none;transition:transform .2s,box-shadow .2s}.x-shr__btn:hover{transform:translateY(-2px)}.x-shr__btn svg{font-size:18px}.x-shr__btn--dk{background:#050506;color:#fff;box-shadow:0 12px 30px -10px rgba(0,0,20,.6)}.x-shr__btn--lt{background:#fff;color:#0b0b0f;box-shadow:0 12px 30px -12px rgba(0,30,90,.4)}.x-shr__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:20px 0 0;padding:0;list-style:none;font-size:12px;color:rgba(10,30,80,.55);animation:x-shr-rise .8s .4s cubic-bezier(.2,.8,.2,1) both}@keyframes x-shr-rise{from{opacity:0;transform:translateY(16px)}}@media (max-width:640px){.x-shr{padding-top:72px}.x-shr__btns{flex-direction:column;align-self:stretch}.x-shr__btn{width:100%}.x-shr__p{font-size:15px}.x-shr__meta{color:rgba(255,255,255,.75)}}@media (prefers-reduced-motion:reduce){.x-shr__glow,.x-shr__badge,.x-shr__h span,.x-shr__h em,.x-shr__p,.x-shr__btns,.x-shr__meta{animation:none}.x-shr__btn{transition:none}}.x-ocr{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;width:100%;max-width:980px;margin:0 auto;padding:32px;border-radius:30px;background:#f3f3f5;color:#0b0b0f;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-ocr *,.x-ocr *::before,.x-ocr *::after{box-sizing:border-box}.x-ocr svg{width:1em;height:1em;flex:none}.x-ocr__shot{position:relative;aspect-ratio:510/600;max-height:560px;margin:0 auto;width:100%;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}.x-ocr__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.x-ocr__beam{position:absolute;left:0;right:0;top:0;height:22%;background:linear-gradient(180deg,transparent,rgba(61,123,255,.28) 80%,rgba(61,123,255,.9) 100%);animation:x-ocr-scan 3.6s cubic-bezier(.45,0,.55,1) infinite}@keyframes x-ocr-scan{0%{transform:translateY(-100%)}70%,100%{transform:translateY(460%)}}.x-ocr__box{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:6px;background:rgba(61,123,255,.14);box-shadow:inset 0 0 0 1.5px rgba(61,123,255,.7);opacity:0;animation:x-ocr-box 3.6s var(--d) ease-out infinite}.x-ocr__box--hit{background:rgba(255,200,40,.35);box-shadow:inset 0 0 0 2px #f5a623}@keyframes x-ocr-box{0%{opacity:0;transform:scale(.96)}10%,80%{opacity:1;transform:none}100%{opacity:0}}.x-ocr__side{display:flex;flex-direction:column;gap:14px}.x-ocr__search{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:16px;background:#fff;color:#8a8a93;font-size:18px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 10px 30px -18px rgba(0,0,0,.3)}.x-ocr__q{color:#0b0b0f;font-size:16px;font-weight:600}.x-ocr__caret{width:2px;height:20px;margin-left:-6px;background:#3d7bff;animation:x-ocr-blink 1s steps(1) infinite}@keyframes x-ocr-blink{50%{opacity:0}}.x-ocr__res{display:grid;gap:8px;margin:0;padding:0;list-style:none}.x-ocr__item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#fff;opacity:.6;transition:opacity .3s,box-shadow .3s,transform .3s}.x-ocr__item b{display:block;font-size:14px;font-weight:600}.x-ocr__item small{display:block;margin-top:2px;font-size:12px;color:#7a7a84}.x-ocr__item mark{padding:0 3px;border-radius:4px;background:#ffe08a;color:inherit}.x-ocr__item.is-hit{opacity:1;box-shadow:0 0 0 2px #3d7bff;transform:translateX(4px)}.x-ocr__th{width:44px;height:44px;flex:none;border-radius:11px;background:url(https://8pt.dev/api/media/a889a9ff944e5c79e2b1c3af.webp) center/cover}.x-ocr__th--b{background:linear-gradient(135deg,#f1f5ff,#cfdcf5)}.x-ocr__th--c{background:linear-gradient(135deg,#2b2b31,#5a1f24)}.x-ocr__tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:34px;padding:0 14px;border-radius:99px;background:#e6e6ea;font-size:13px;color:#3a3a42}@media (max-width:720px){.x-ocr{grid-template-columns:1fr;padding:18px}.x-ocr__shot{max-height:300px;aspect-ratio:auto;height:300px}}@media (prefers-reduced-motion:reduce){.x-ocr__beam,.x-ocr__box,.x-ocr__caret{animation:none}.x-ocr__box{opacity:1}.x-ocr__item{transition:none}}.x-ils{box-sizing:border-box;width:100%;max-width:820px;margin:0 auto;padding:28px;border-radius:30px;background:linear-gradient(180deg,#eef4ff,#f6f7fb);color:#0b0b0f;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-ils *,.x-ils *::before,.x-ils *::after{box-sizing:border-box}.x-ils svg{width:1em;height:1em;flex:none}.x-ils__keys{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.x-ils__k{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:10px;background:#fff;font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:#3a3a42;box-shadow:0 1px 0 rgba(0,0,0,.05),inset 0 -2px 0 rgba(0,0,0,.06)}.x-ils__k.is-on{background:#0b0b0f;color:#fff}.x-ils__k--add{width:34px;justify-content:center;padding:0;font-size:15px}.x-ils__win{position:relative;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -30px rgba(20,40,90,.35)}.x-ils__bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;border-bottom:1px solid #efeff2;font-size:13px}.x-ils__dots{display:flex;gap:7px}.x-ils__dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.x-ils__dots i:nth-child(2){background:#febc2e}.x-ils__dots i:nth-child(3){background:#28c840}.x-ils__row{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid #f2f2f5;font-size:14px;color:#3a3a42}.x-ils__row span{width:48px;color:#9a9aa3}.x-ils__body{min-height:150px;padding:18px 20px 24px;font-size:16px;line-height:1.8}.x-ils__out{background:linear-gradient(90deg,rgba(61,123,255,.18),rgba(61,123,255,0));border-radius:4px;transition:background 1.2s}.x-ils__out.is-settle{background:transparent}.x-ils__typed{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#3d7bff}.x-ils__caret{display:inline-block;width:2px;height:20px;margin-left:1px;vertical-align:-4px;background:#0b0b0f;animation:x-ils-blink 1s steps(1) infinite}@keyframes x-ils-blink{50%{opacity:0}}.x-ils__pop{position:absolute;left:20px;bottom:-22px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 40px);padding:10px 14px;border-radius:14px;background:#0b0b0f;color:#fff;font-size:13px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}.x-ils__pop span{color:#a1a1aa;white-space:nowrap}.x-ils__pop b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-ils__pop.is-show{opacity:1;transform:none}@media (max-width:560px){.x-ils{padding:16px}.x-ils__body{font-size:15px}}@media (prefers-reduced-motion:reduce){.x-ils__caret{animation:none}.x-ils__pop,.x-ils__out{transition:none}}.x-dpc{box-sizing:border-box;width:100%;max-width:1100px;margin:0 auto;padding:56px 24px 64px;border-radius:30px;background:linear-gradient(180deg,#fff 0%,#fff 35%,#bfe1ff 75%,#5aa8ff 100%);color:#0b0b0f;text-align:center;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-dpc *,.x-dpc *::before,.x-dpc *::after{box-sizing:border-box}.x-dpc svg{width:1em;height:1em;flex:none}.x-dpc__head h2{margin:0;display:flex;flex-direction:column;font-size:clamp(34px,5vw,52px);line-height:1.12;font-weight:800;letter-spacing:.01em}.x-dpc__head em{font-family:"Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;font-style:italic;font-weight:600}.x-dpc__head p{margin:14px 0 0;font-size:15px;color:#5f6370}.x-dpc__card{width:min(440px,100%);margin:34px auto 0;padding:22px;border-radius:26px;background:#fff;text-align:left;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 40px 80px -40px rgba(10,40,120,.55)}.x-dpc__top{display:flex;flex-direction:column;gap:14px}.x-dpc__name{display:flex;align-items:center;gap:10px;font-size:16px}.x-dpc__name img{width:36px;height:36px;border-radius:10px}.x-dpc__seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:14px;background:#f1f1f4}.x-dpc__seg button{position:relative;z-index:1;height:36px;border:0;background:transparent;color:#6b6f7a;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .25s}.x-dpc__seg button[aria-selected="true"]{color:#0b0b0f}.x-dpc__thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);transform:translateX(calc(var(--i,0) * 100%));transition:transform .35s cubic-bezier(.2,.8,.2,1)}.x-dpc__price{display:flex;align-items:center;gap:10px;margin:22px 0 18px}.x-dpc__price b{font-size:46px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.x-dpc__num{display:inline-block}.x-dpc__num.is-pop{animation:x-dpc-pop .45s cubic-bezier(.2,.8,.2,1)}@keyframes x-dpc-pop{from{opacity:0;transform:translateY(10px)}}.x-dpc__tag{height:24px;padding:0 9px;border-radius:99px;background:#eef4ff;color:#2a62e8;font-size:12px;line-height:24px;font-weight:600}.x-dpc__list{display:grid;gap:11px;margin:0 0 22px;padding:16px 0 0;border-top:1px solid #efeff2;list-style:none;font-size:14px;color:#3a3a42}.x-dpc__list li{display:flex;align-items:center;gap:10px}.x-dpc__list svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#e9f1ff;color:#2a62e8}.x-dpc__buy{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:16px;background:#050506;color:#fff;font-size:15px;font-weight:650;text-decoration:none;transition:transform .2s}.x-dpc__buy:hover{transform:translateY(-2px)}@media (max-width:560px){.x-dpc{padding:40px 16px 48px}.x-dpc__price b{font-size:38px}}@media (prefers-reduced-motion:reduce){.x-dpc__thumb,.x-dpc__buy,.x-dpc__seg button{transition:none}.x-dpc__num.is-pop{animation:none}}.x-tcf{box-sizing:border-box;width:100%;max-width:1000px;margin:0 auto;padding:8px 8px;color:#0b0b0f;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-tcf *,.x-tcf *::before,.x-tcf *::after{box-sizing:border-box}.x-tcf svg{width:1em;height:1em;flex:none}.x-tcf__head{text-align:center}.x-tcf__head h2{margin:0;font-size:clamp(32px,4.4vw,48px);line-height:1.15;font-weight:800}.x-tcf__head p{margin:12px auto 0;max-width:460px;font-size:15px;line-height:1.7;color:#6b6f7a}.x-tcf__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;margin-top:34px}.x-tcf__col{display:grid;gap:10px}.x-tcf__item{border-radius:18px;background:#f3f3f5;transition:background .25s}.x-tcf__item.is-open{background:#eaeef7}.x-tcf__q{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;border:0;background:transparent;color:inherit;font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer}.x-tcf__ic{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:#fff;font-size:13px;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}.x-tcf__item.is-open .x-tcf__ic{transform:rotate(45deg);background:#0b0b0f;color:#fff}.x-tcf__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}.x-tcf__a p{min-height:0;margin:0;padding:0 18px 0 52px;overflow:hidden;font-size:14px;line-height:1.75;color:#5f6370}.x-tcf__item.is-open .x-tcf__a{grid-template-rows:1fr}.x-tcf__item.is-open .x-tcf__a p{padding-bottom:16px}@media (max-width:720px){.x-tcf__cols{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.x-tcf__a,.x-tcf__ic,.x-tcf__item{transition:none}}</style>
</head>
<body>
<header class="top"><div class="x-snv x-snv--page"><nav class="x-snv__bar" aria-label="主导航"><a class="x-snv__brand" href="#"><img src="https://8pt.dev/api/media/0b8c42a8ad950197eb176023.webp" alt="随贴图标" width="28" height="28"><b>随贴</b></a><span class="x-snv__links"><a href="#features">功能</a><a href="#faq">常见问题</a><a href="#more">更新</a><a href="#pricing">定价</a></span><a class="x-snv__dl" href="#pricing"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>下载</a><button type="button" class="x-snv__burger" aria-label="打开菜单" aria-expanded="false"><svg class="i-menu" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></svg><svg class="i-close" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5l11 11"/><path d="M17.5 6.5l-11 11"/></svg></button></nav><div class="x-snv__menu"><a href="#features">功能</a><a href="#faq">常见问题</a><a href="#more">更新</a><a href="#pricing">定价</a><a class="x-snv__menu-dl" href="#pricing"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>下载 Mac 版</a></div></div></header>
…
Subscribe to Builder to see the full source.See pricing

Matching theme

Matching icons · 12

View all in the icon library

Included components

Sky Hero Headline

Device Price Card

OCR Scan Card

Two Column FAQ

Notch Pill Nav

Clip Library Window

Inline Shortcut Typer

More templates

View all

Suiyun Global Network Platform Home

Developer tools home

Niancheng AI App Builder Home

AI generation platform home

Zhiheng AI Research Company Home

AI product home

Moge Team AI Workspace Website

SaaS landing page

Lingye Design Prompt Library Home

AI product home

Chaoyin Lead-Gen Agent Website

AI product home

Houtu Creative Studio Home

Portfolio

Chengbang App Market Intelligence Home

SaaS landing page

Yanbai Independent Designer Portfolio

Portfolio

Banshi Design Reference Library Website

SaaS landing page

Qishu Agent Tool Platform Home

Developer tools home

Ranzhen AI Video Studio Home

AI generation platform home

Nook Mac App Website

Mac app landing page