.ex-page{max-width:900px;margin:0 auto;padding:0 32px 80px}@media (max-width:640px){.ex-page{padding:0 20px 60px}}.ex-header{border-bottom:1px solid var(--doc-line-soft);margin-bottom:48px;padding:48px 0 40px;position:relative;overflow:hidden}.ex-header:before{content:"";background-image:radial-gradient(circle, var(--doc-dot) 1px, transparent 1px);opacity:.4;pointer-events:none;background-size:22px 22px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000 0%,#0009 50%,#0000 100%);mask-image:linear-gradient(#0000 0%,#0009 50%,#0000 100%)}.ex-page-title{letter-spacing:-.03em;color:var(--doc-ink);margin:0 0 8px;font-size:40px;font-weight:800;position:relative}.ex-page-sub{color:var(--doc-muted);max-width:480px;margin:0;font-size:15px;line-height:1.6;position:relative}.ex-grid{flex-direction:column;gap:32px;display:flex}.ex-card{border:1px solid var(--doc-line);background:var(--color-card);border-radius:14px;overflow:hidden}.ex-card-header{border-bottom:1px solid var(--doc-chip);justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 16px;display:flex}.ex-card-title{letter-spacing:-.01em;color:var(--doc-ink);margin:0 0 4px;font-size:17px;font-weight:700}.ex-card-desc{color:var(--doc-muted);margin:0 0 10px;font-size:13px;line-height:1.6}.ex-tag-row{flex-wrap:wrap;gap:5px;display:flex}.ex-tag{background:var(--doc-chip);color:var(--doc-muted);letter-spacing:.02em;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:600}.ex-open-btn{color:var(--doc-indigo-2);white-space:nowrap;border:1px solid var(--doc-indigo-line);background:var(--doc-indigo-soft);border-radius:7px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:600;text-decoration:none;transition:background .1s}.ex-open-btn:hover{background:var(--doc-indigo-line)}.ex-tabs{border-bottom:1px solid var(--doc-line-soft);background:var(--doc-wash-2);padding:0 16px;display:flex}.ex-tab{color:var(--doc-faint);cursor:pointer;letter-spacing:.02em;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:8px 14px;font-size:12px;font-weight:600;transition:color .1s}.ex-tab:hover{color:var(--doc-body)}.ex-tab.active{color:var(--doc-indigo);border-bottom-color:var(--doc-indigo)}.ex-reveal-btn{letter-spacing:.02em;color:var(--doc-indigo);background:var(--doc-indigo-soft);border:1px solid var(--doc-indigo-line);cursor:pointer;border-radius:999px;margin:6px 0 6px auto;padding:5px 12px;font-size:11px;font-weight:700;transition:background .1s,color .1s,border-color .1s}.ex-reveal-btn:hover{background:var(--doc-indigo-line)}.ex-reveal-btn.active{color:var(--doc-green);background:var(--doc-green-soft);border-color:var(--doc-green-line)}.ex-pane{display:none}.ex-pane.active{display:block}.ex-preview-bg{background:var(--doc-canvas);background-image:radial-gradient(circle, var(--doc-line) 1px, transparent 1px);background-size:18px 18px;min-height:200px;padding:20px 24px}