:root{--bg: #fafafa;--surface: #fff;--text: #1a1a1a;--dim: #86868b;--line: #e8e8e8;--soft: #f4f4f4;--signal: #ff8a00;--keep: #1f9d55;--danger: #d70015;--notch: #000;--n-fg: #f5f5f7;--n-dim: #8e8e93;--n-card: #161618;--n-line: #2a2a2d;--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;--display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #0b0b0c;--surface: #151517;--text: #f5f5f7;--dim: #8e8e93;--line: #26262a;--soft: #1c1c1f;--signal: #ff9f0a;--keep: #30d158;--danger: #ff453a;color-scheme:dark}}:root[data-theme=dark]{--bg: #0b0b0c;--surface: #151517;--text: #f5f5f7;--dim: #8e8e93;--line: #26262a;--soft: #1c1c1f;--signal: #ff9f0a;--keep: #30d158;--danger: #ff453a;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}body{margin:0;background:var(--bg);color:var(--text);font:17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;padding-inline:16px}img,svg{max-width:100%}a{color:inherit}h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}h1{font-size:clamp(44px,8vw,88px);font-weight:700;letter-spacing:-.045em;line-height:.95}h2{font-size:clamp(30px,4.6vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.03}h3{font-size:19px;font-weight:600;letter-spacing:-.015em}p{margin:0;max-width:62ch}code{font:.85em var(--mono);background:var(--soft);padding:1px 5px;border-radius:5px}kbd{font:.85em var(--sans);background:var(--soft);border:1px solid var(--line);padding:0 5px;border-radius:5px}.dim{color:var(--dim)}:is(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--signal);outline-offset:3px}.wrap{max-width:1040px;margin:0 auto}main.wrap{padding-block:clamp(32px,6vw,56px) clamp(72px,12vw,120px);display:flex;flex-direction:column;gap:clamp(72px,12vw,120px)}section{display:flex;flex-direction:column;gap:36px}.kicker{font-size:14px;font-weight:600;color:var(--dim);letter-spacing:-.005em}.kicker b{color:var(--signal);font-weight:600}.head{display:flex;flex-direction:column;gap:14px;max-width:760px}.head p{font-size:clamp(17px,2.4vw,19px);color:var(--dim)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--text);color:var(--bg);border:0;border-radius:99px;padding:12px 22px;font:600 15px var(--sans);cursor:pointer;text-decoration:none;transition:opacity .15s}.btn:hover{opacity:.86}.btn[disabled]{opacity:.5;cursor:default}.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}.btn.small{padding:8px 15px;font-size:14px}.link{color:var(--text);font-weight:600;text-decoration:none}.link:hover{text-decoration:underline}.top{position:sticky;top:0;z-index:10;margin-inline:-16px;padding-inline:16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.top .wrap{height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:inline-flex;align-items:center;gap:9px;font:700 17px var(--display);letter-spacing:-.02em;text-decoration:none}.top nav{display:flex;align-items:center;gap:22px;font-size:14px}.top nav a:not(.btn){color:var(--dim);text-decoration:none}.top nav a:not(.btn):hover{color:var(--text)}@media (max-width: 640px){.top nav a.opt{display:none}}.foot{border-top:1px solid var(--line);margin-inline:-16px;padding:36px 16px 48px;font-size:14px;color:var(--dim)}.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 40px}.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}.foot a{color:var(--dim);text-decoration:none}.foot a:hover{color:var(--text)}.foot p{max-width:52ch}main.narrow{max-width:720px;margin:0 auto;padding-block:clamp(36px,7vw,64px) clamp(72px,12vw,120px);display:flex;flex-direction:column;gap:32px}main.narrow h1{font-size:clamp(40px,7vw,64px)}.prose{display:flex;flex-direction:column;gap:14px;font-size:16.5px}.prose h2{font-size:24px;letter-spacing:-.02em;margin-top:22px;scroll-margin-top:80px}.prose h3{font-size:17px;margin-top:10px}.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;max-width:62ch}.prose a{font-weight:600}.prose pre{margin:0;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow-x:auto;font:13px/1.55 var(--mono)}.prose pre code{background:none;padding:0;font-size:inherit}.prose .note{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px}.keybox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:16px}.keybox .status{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:15px}.keybox .status.err{color:var(--danger)}.keybox .key{font:13px/1.55 var(--mono);word-break:break-all;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;user-select:all;-webkit-user-select:all}.keybox .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.keybox .meta{font-size:14px;color:var(--dim)}.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--text);animation:spin .8s linear infinite;flex:none}@keyframes spin{to{transform:rotate(360deg)}}.field{display:flex;gap:10px;flex-wrap:wrap}.field input{flex:1 1 260px;min-width:0;font:15px var(--mono);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:12px 18px}.sharebox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:16px}.sharebox[hidden]{display:none}.sharebox .share-head{display:flex;flex-direction:column;gap:4px}.sharebox h2{font-size:32px;letter-spacing:-.03em}.sharebox .share-card{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}.sharebox p{font-size:15.5px}.sharebox .actions{display:flex;gap:10px;flex-wrap:wrap}.sharebox .meta{font-size:13.5px;color:var(--dim)}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}:not(.stage,.stage *),:not(.stage,.stage *):before,:not(.stage,.stage *):after{transition:none!important;animation:none!important}}
