.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 #f0f0f0;margin-bottom:48px;padding:48px 0 40px;position:relative;overflow:hidden}.ex-header:before{content:"";opacity:.4;pointer-events:none;background-image:radial-gradient(circle,#e2e8f0 1px,#0000 1px);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:#0f0f0f;margin:0 0 8px;font-size:40px;font-weight:800;position:relative}.ex-page-sub{color:#6b7280;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{background:#fff;border:1px solid #e5e7eb;border-radius:14px;transition:box-shadow .15s;overflow:hidden}.ex-card:hover{box-shadow:0 4px 16px #0000000f}.ex-card-header{border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 16px;display:flex}.ex-card-title{letter-spacing:-.01em;color:#0f0f0f;margin:0 0 4px;font-size:17px;font-weight:700}.ex-card-desc{color:#6b7280;margin:0 0 10px;font-size:13px;line-height:1.6}.ex-tag-row{flex-wrap:wrap;gap:5px;display:flex}.ex-tag{color:#6b7280;letter-spacing:.02em;background:#f3f4f6;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:600}.ex-open-btn{color:#6366f1;white-space:nowrap;background:#eef2ff;border:1px solid #e0e7ff;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:#e0e7ff}.ex-tabs{background:#fafafa;border-bottom:1px solid #f0f0f0;padding:0 16px;display:flex}.ex-tab{color:#9ca3af;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:#374151}.ex-tab.active{color:#4f46e5;border-bottom-color:#4f46e5}.ex-reveal-btn{letter-spacing:.02em;color:#4f46e5;cursor:pointer;background:#eef2ff;border:1px solid #e0e7ff;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:#e0e7ff}.ex-reveal-btn.active{color:#16a34a;background:#f0fdf4;border-color:#bbf7d0}.ex-pane{display:none}.ex-pane.active{display:block}.ex-preview-bg{background:#fdfdfd radial-gradient(circle,#e5e7eb 1px,#0000 1px) 0 0/18px 18px;min-height:200px;padding:20px 24px}