.blogpage{background:var(--bg);--demo-bar-h:56px;min-height:100vh;padding-top:calc(var(--bar-h) + var(--demo-bar-h, 54px));padding-bottom:120px}.blog-post{max-width:41rem;margin:0 auto;padding:clamp(38px,6vw,72px) clamp(20px,5vw,32px) 0}.blog-post-head{margin-bottom:clamp(30px,4vw,46px)}.blog-kicker{display:inline-block;margin-bottom:16px;font-family:var(--code);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta)}.blog-title{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,54px);line-height:1.06;letter-spacing:-.03em;color:var(--fg)}.blog-byline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);font-family:var(--code);font-size:12px;color:var(--fg-3)}.blog-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fg);color:var(--bg);font-family:var(--display);font-weight:700;font-size:13px}.blog-author{color:var(--fg-2)}.blog-dot{opacity:.45}.blog-body p{margin:0;font-size:clamp(17.5px,1.75vw,19.5px);line-height:1.68;color:var(--fg-2)}.demo-shield-block+.demo-shield-block{margin-top:1.15em}.demo-shield-block [class$=-alt]{position:absolute;width:1px;height:1px;-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;white-space:nowrap}.demo-shield-block:has([class$=-alt-out]:not(:empty)) [class$=-alt]{position:static;width:auto;height:auto;-webkit-clip-path:none;clip-path:none;overflow:visible;white-space:normal}body:not(.sr-view) .demo-shield-block:has([class$=-alt-out]:not(:empty)) [class$=-alt-note],body:not(.sr-view) .demo-shield-block:has([class$=-alt-out]:not(:empty)) [class$=-alt-status],body:not(.sr-view) .demo-shield-block:has([class$=-alt-out]:not(:empty)) progress{display:none}body.sr-view .demo-shield-block{display:flex;flex-direction:column;gap:14px}body.sr-view .demo-shield-block [class$=-alt]{display:contents;position:static;width:auto;height:auto;-webkit-clip-path:none;clip-path:none;overflow:visible;white-space:normal}body.sr-view .demo-shield-block [class$=-alt-note]{order:1;margin:0;font-family:var(--code);font-size:12px;line-height:1.5;color:var(--fg-3)}body.sr-view .demo-shield-block [class$=-alt-btn]{order:2;display:block;width:100%;font-family:var(--code);font-size:14px;letter-spacing:0;text-transform:none;padding:15px 20px;border-radius:10px;cursor:pointer;color:var(--bg);background:var(--fg);border:1px solid transparent;transition:opacity .2s,transform .2s}body.sr-view .demo-shield-block [class$=-alt-btn]:hover{opacity:.86;transform:translateY(-1px)}body.sr-view .demo-shield-block progress{order:3;width:100%;height:4px;border:0;border-radius:999px;background:var(--line-soft);color:var(--terracotta);-webkit-appearance:none;-moz-appearance:none;appearance:none}body.sr-view .demo-shield-block progress::-webkit-progress-bar{background:var(--line-soft);border-radius:999px}body.sr-view .demo-shield-block progress::-webkit-progress-value{background:var(--terracotta);border-radius:999px}body.sr-view .demo-shield-block progress::-moz-progress-bar{background:var(--terracotta);border-radius:999px}body.sr-view .demo-shield-block [class$=-alt-status]{order:4;display:block;font-family:var(--code);font-size:12px;color:var(--fg-3)}body.sr-view .demo-shield-block>p{order:5;color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-image:repeating-linear-gradient(to bottom,var(--line-soft) 0 .82em,transparent .82em 1.68em);background-position:0 .34em;border-radius:3px;animation:sr-skeleton-pulse 1.8s ease-in-out infinite;position:relative}body.sr-view .demo-shield-block>p:after{content:"";position:absolute;right:0;bottom:.52em;width:37%;height:.82em;background:var(--bg)}@keyframes sr-skeleton-pulse{0%,to{opacity:1}50%{opacity:.55}}@media (prefers-reduced-motion:reduce){body.sr-view .demo-shield-block>p{animation:none}}.demo-shield-block [class$=-alt-out]{display:block;font-size:clamp(17.5px,1.75vw,19.5px);line-height:1.68;color:var(--fg-2)}body.sr-view .demo-shield-block [class$=-alt-out]{order:6}.demo-bar{position:fixed;top:var(--bar-h);left:0;right:0;z-index:60;border-bottom:1px solid var(--line-soft);background:var(--bar-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.demo-bar-in{max-width:1180px;margin:0 auto;min-height:56px;padding:0 clamp(16px,4vw,32px);display:flex;align-items:center;gap:16px;flex-wrap:wrap}.demo-bar-title{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta)}.demo-bar-title,.demo-bar-tour{flex:0 0 auto;font-family:var(--code)}.demo-bar-tour{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid transparent;border-radius:999px;cursor:pointer;background:var(--fg);color:var(--bg);font-size:11.5px;letter-spacing:.04em;transition:opacity .2s,transform .2s}.demo-bar-tour:hover{opacity:.86;transform:translateY(-1px)}.tour-label-short{display:none}.demo-bar-toggle{flex:0 1 auto;min-width:0;display:flex;align-items:center}.demo-bar-note{margin:0;font-size:11px;line-height:1.2;font-style:italic;color:var(--fg-3)}.demo-toggle{flex:0 0 auto;display:flex;align-items:center;gap:10px;cursor:pointer}.demo-toggle-text{display:flex;flex-direction:column;gap:1px;min-width:0}.demo-toggle input{position:absolute;width:1px;height:1px;-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;white-space:nowrap}.demo-toggle-track{position:relative;flex:0 0 auto;width:32px;height:18px;border-radius:999px;background:var(--line-soft);transition:background .2s}.demo-toggle-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--bg);transition:transform .2s;box-shadow:0 1px 3px rgba(13,13,13,.3)}.demo-toggle input:checked+.demo-toggle-track{background:var(--terracotta)}.demo-toggle input:checked+.demo-toggle-track .demo-toggle-knob{transform:translateX(14px)}.demo-toggle input:focus-visible+.demo-toggle-track{outline:2px solid var(--fg);outline-offset:2px}.demo-toggle-label{font-family:var(--code);font-size:11.5px;color:var(--fg-2);white-space:nowrap}.demo-bar-in{flex-wrap:nowrap}@media (max-width:500px){.demo-bar-in{min-height:60px;gap:11px;padding:8px 14px}.demo-bar-title{flex:0 0 auto;max-width:4ch;text-align:center;line-height:1.15;letter-spacing:.16em}.demo-toggle{gap:8px}.demo-toggle-label{font-size:11px}.demo-bar-note{font-size:10px}.demo-bar-tour{padding:8px 14px;font-size:11px}.tour-label-full{display:none}.tour-label-short{display:inline}}@media (max-width:860px){.blogpage{--demo-bar-h:84px}}@media (max-width:420px){.blogpage{--demo-bar-h:56px}}.demo-selecting{background-image:linear-gradient(var(--chip-bg),var(--chip-bg));background-repeat:no-repeat;background-size:0 100%;animation:demo-sweep .6s cubic-bezier(.4,0,.2,1) forwards}@keyframes demo-sweep{to{background-size:100% 100%}}@media (prefers-reduced-motion:reduce){.demo-selecting{animation:none;background-size:100% 100%}}.wr-dlg-wrap{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.wr-dlg{width:90%;max-width:520px;max-height:80vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;box-shadow:0 24px 48px -12px rgba(0,0,0,.3);overflow:hidden}.wr-dlg-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line-soft);font-family:var(--code);font-size:11px;letter-spacing:.12em;text-transform:uppercase}.wr-dlg-title{font-weight:600}.wr-dlg-x{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:4px;color:var(--fg-3);cursor:pointer;transition:color .15s,background .15s}.wr-dlg-x:hover{color:var(--fg);background:var(--line-vsoft)}.wr-dlg-body{flex:1 1;overflow-y:auto;padding:16px 18px}.onboarding-body{padding:20px 22px!important}.onboarding-lead{font-family:var(--display);font-weight:500;font-size:14px;line-height:1.55;color:var(--fg);margin:0 0 4px}.onboarding-sub{font-family:var(--display);font-size:12.5px;line-height:1.5;color:var(--fg-3);margin:0 0 16px}.onboarding-actions{display:flex;gap:10px;justify-content:center}.onboarding-actions .btn{font-size:10px;padding:9px 18px}.tour-scrim{position:fixed;inset:0;z-index:998;background:rgba(0,0,0,.55);pointer-events:auto}.tour-highlight{position:relative;z-index:999!important;background-color:var(--bg);border-radius:6px;box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 6px rgba(0,0,0,.08),0 0 40px 12px rgba(255,255,255,.15)}.tour-tooltip{position:fixed;z-index:1000;width:260px;padding:14px 16px;background:#1B1B1F;color:#F1EEE6;border:1px solid rgba(241,238,230,.12);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.35);transform:translateX(-50%);max-height:calc(100vh - 24px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(241,238,230,.28) transparent}.tour-tooltip::-webkit-scrollbar{width:8px}.tour-tooltip::-webkit-scrollbar-track{background:transparent}.tour-tooltip::-webkit-scrollbar-thumb{background:rgba(241,238,230,.28);border-radius:999px;border:2px solid transparent;background-clip:padding-box}.tour-tooltip::-webkit-scrollbar-thumb:hover{background:rgba(241,238,230,.45);background-clip:padding-box}.tour-arrow-up:before{top:-7px;border-bottom:7px solid #1b1b1f}.tour-arrow-down:after,.tour-arrow-up:before{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent}.tour-arrow-down:after{bottom:-7px;border-top:7px solid #1b1b1f}.tour-tooltip-title{display:block;font-family:var(--code);font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta);margin-bottom:6px}.tour-tooltip-body{font-family:var(--display);font-size:13px;line-height:1.5;color:rgba(241,238,230,.75);margin:0 0 14px}.tour-tooltip-actions{display:flex;justify-content:space-between;align-items:center}.tour-btn-skip{background:none;border:none;padding:0;font-family:var(--code);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(241,238,230,.35);cursor:pointer}.tour-btn-skip:hover{color:rgba(241,238,230,.7)}.tour-btn-next{background:var(--terracotta);color:#fff;border:none;padding:6px 14px;border-radius:4px;font-family:var(--code);font-size:9px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:opacity .15s}.tour-btn-next:hover{opacity:.85}.tour-tooltip-dots{display:flex;justify-content:center;gap:5px;margin-top:10px}.tour-dot{width:5px;height:5px;border-radius:50%;background:rgba(241,238,230,.15);display:block}.tour-dot.active{background:var(--terracotta)}@media (max-width:830px){.wr-dlg{width:96%;max-width:none}}.tour-tooltip-sm{width:292px}.tour-tooltip-lg{width:440px}.tour-tooltip-xl{width:520px}.tour-panel{margin:0 0 14px;border:1px solid rgba(241,238,230,.14);border-radius:6px;background:rgba(0,0,0,.28);padding:10px 12px}.tour-paste-box{display:block;width:100%;background:transparent;border:0;outline:0;resize:vertical;font-family:var(--code);font-size:12.5px;line-height:1.5;color:#F1EEE6}.tour-paste-box::placeholder{color:rgba(241,238,230,.35)}.tour-paste-result{margin:10px 0 0;padding-top:9px;border-top:1px solid rgba(241,238,230,.12);font-family:var(--display);font-size:12px;line-height:1.55;color:rgba(241,238,230,.8)}.tour-paste-result code{font-family:var(--code);font-size:11.5px;color:var(--orange)}.tour-paste-nomatch{color:rgba(241,238,230,.5)}.tour-source{margin-bottom:14px;max-height:168px;overflow-y:auto;font-family:var(--code);font-size:11.5px;line-height:1.6;color:rgba(241,238,230,.85);white-space:pre-wrap;word-break:break-word}.tour-sr{list-style:none;display:flex;flex-direction:column;gap:8px}.tour-sr-line{display:flex;align-items:flex-start;gap:9px;font-family:var(--display);font-size:12px;line-height:1.45;color:rgba(241,238,230,.5)}.tour-sr-line svg{flex:0 0 auto;margin-top:2px}.tour-sr-line code{font-family:var(--code);font-size:11px}.tour-sr-say{color:rgba(241,238,230,.92)}@media (max-width:560px){.tour-tooltip-lg,.tour-tooltip-xl{width:min(440px,calc(100vw - 24px))}}.onboarding-code{margin:12px 0 14px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:6px;background:var(--chip-bg-soft);font-family:var(--code);font-size:12.5px;line-height:1.5;color:var(--fg-2);white-space:pre-wrap;word-break:break-word}.onboarding-code .tag{color:var(--terracotta)}.tour-pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;max-height:108px;overflow-y:auto}.tour-pill{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;font-family:var(--code);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1;background:#1f8a4c;color:#fff}.tour-reselect{display:block;margin:10px 0 0;background:none;border:0;padding:0;cursor:pointer;font-family:var(--code);font-size:11px;letter-spacing:.04em;color:rgba(241,238,230,.45);text-decoration:underline;text-underline-offset:3px}.tour-reselect:hover{color:rgba(241,238,230,.8)}