:root{color-scheme:light;font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#17202a;background:#efe7d8}*{box-sizing:border-box}html{min-width:320px}body{min-height:100vh;margin:0;background:linear-gradient(90deg,rgba(23,32,42,.05) 1px,transparent 1px),linear-gradient(180deg,rgba(23,32,42,.05) 1px,transparent 1px),linear-gradient(135deg,#f8f1e5,#efe7d8 46%,#d8e8df);background-size:34px 34px,34px 34px,auto}button,textarea{font:inherit}button{border:0}.site-shell{width:min(1120px,calc(100% - 32px));margin:0 auto}.hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:34px;align-items:center;padding:34px 0 28px}.hero__content{min-width:0}.brand-line{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:7px 12px 7px 7px;border:1px solid rgba(23,32,42,.14);border-radius:8px;background:#fffdf8c7;color:#314055;font-size:.92rem;font-weight:850;box-shadow:0 12px 28px #17202a14}.brand-line__icon{width:30px;height:30px;border-radius:7px}h1{max-width:760px;margin:26px 0 18px;color:#121922;font-size:clamp(2.4rem,7vw,5.8rem);line-height:.98;letter-spacing:0;font-weight:950}.hero__copy{max-width:660px;margin:0;color:#475569;font-size:1.08rem;line-height:1.75;font-weight:650}.bookmark-dock{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:28px;padding:10px;border:1px solid rgba(23,32,42,.14);border-radius:12px;background:#fffdf8c7;box-shadow:0 18px 46px #17202a1a}.bookmarklet-pill,.dock-button{min-height:52px;border-radius:8px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.bookmarklet-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:174px;padding:13px 18px;background:#0f766e;color:#fff;text-decoration:none;font-size:1rem;font-weight:900;box-shadow:0 14px 28px #0f766e3d}.bookmarklet-pill__mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#ffffff29}.dock-button{padding:0 16px;background:#fffdf8;color:#263241;font-size:.94rem;font-weight:850;box-shadow:inset 0 0 0 1px #d8d0c2}.dock-button--dark{background:#17202a;color:#fff;box-shadow:0 12px 24px #17202a2e}.bookmarklet-pill:hover,.dock-button:hover{transform:translateY(-2px)}.bookmarklet-pill:focus-visible,.dock-button:focus-visible,.bookmarklet-code:focus-visible{outline:3px solid rgba(15,118,110,.35);outline-offset:3px}.install-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.flow-step{min-width:0;min-height:126px;padding:14px;border:1px solid rgba(23,32,42,.14);border-radius:8px;background:#fffdf8ad}.flow-step span{display:inline-grid;place-items:center;width:28px;height:28px;margin-bottom:10px;border-radius:999px;background:#fef3c7;color:#92400e;font-weight:950}.flow-step strong{display:block;color:#17202a;font-size:.96rem;font-weight:900}.flow-step p{margin:5px 0 0;color:#64748b;font-size:.86rem;line-height:1.55;font-weight:650}.preview{min-width:0;border:1px solid rgba(23,32,42,.18);border-radius:14px;background:#fffdf8;box-shadow:0 28px 70px #17202a2e;overflow:hidden}.browser-bar{display:flex;align-items:center;gap:7px;min-height:46px;padding:0 14px;background:#17202a;color:#cbd5e1}.browser-bar span{width:10px;height:10px;border-radius:999px;background:#fb7185}.browser-bar span:nth-child(2){background:#fbbf24}.browser-bar span:nth-child(3){background:#34d399}.browser-bar strong{margin-left:6px;font-size:.78rem;font-weight:800}.preview-panel{margin:16px;border:1px solid #d8d0c2;border-radius:14px;background:linear-gradient(180deg,#fffaf0,#f7f3ea);box-shadow:0 18px 38px #17202a1f;overflow:hidden}.preview-panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:11px 12px;background:#1f2937;color:#fff}.preview-panel__head strong,.preview-panel__head span{display:block}.preview-panel__head strong{font-size:.96rem;font-weight:900}.preview-panel__head span{color:#cbd5e1;font-size:.78rem;font-weight:700}.preview-panel__head button{width:32px;height:32px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:#ffffff14;color:#fff}.preview-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px;padding:4px;border:1px solid #d8d0c2;border-radius:11px;background:#ebe4d8}.preview-tabs span{display:grid;place-items:center;min-height:34px;border-radius:8px;color:#475569;font-size:.82rem;font-weight:850}.preview-tabs .is-active{background:#17202a;color:#fff}.preview-output{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:8px;margin:0 12px 10px}.preview-output code,.preview-output span,.preview-options span{border:1px solid #d8d0c2;border-radius:8px;background:#fffdf8}.preview-output code{min-width:0;padding:13px 12px;overflow:hidden;color:#17202a;font-family:Consolas,Courier New,monospace;font-size:.86rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.preview-output span{display:grid;place-items:center;background:#17202a;color:#fff;font-size:.78rem;font-weight:900}.preview-meter{height:6px;margin:0 12px 12px;overflow:hidden;border-radius:999px;background:#d8d0c2}.preview-meter span{display:block;width:100%;height:100%;border-radius:inherit;background:#15803d}.preview-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px 14px}.preview-options span{min-height:38px;padding:10px;color:#0f766e;font-size:.82rem;font-weight:850}.code-section{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:18px;align-items:start;padding:0 0 34px}.section-kicker{margin:0 0 6px;color:#b45309;font-size:.78rem;font-weight:950}h2{margin:0;color:#17202a;font-size:clamp(1.4rem,3vw,2rem);line-height:1.18;letter-spacing:0}.bookmarklet-code{width:100%;min-height:132px;max-height:220px;padding:13px;border:1px solid #d8d0c2;border-radius:10px;background:#fffdf8;color:#334155;resize:vertical;font-family:Consolas,Courier New,monospace;font-size:.78rem;line-height:1.55;box-shadow:0 14px 34px #17202a14}.toast{position:fixed;right:18px;bottom:18px;max-width:min(320px,calc(100vw - 36px));padding:12px 14px;border-radius:10px;background:#17202a;color:#fff;font-weight:850;box-shadow:0 18px 40px #17202a38;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.toast.is-visible{opacity:1;transform:translateY(0)}.toast.is-error{background:#9f1239}@media (max-width: 820px){.hero{min-height:auto;grid-template-columns:1fr;padding-top:22px}.preview{max-width:480px}.code-section{grid-template-columns:1fr}}@media (max-width: 560px){.site-shell{width:min(100% - 20px,1120px)}h1{font-size:clamp(2.25rem,14vw,4rem)}.bookmark-dock,.install-flow{display:grid;grid-template-columns:1fr}.bookmarklet-pill,.dock-button{width:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important}}