.ex-page{max-width:1100px;min-height:100vh;margin:0 auto;padding:80px 40px 60px}@media (max-width:600px){.ex-page{padding:60px 20px 40px}}.ex-heading{letter-spacing:-.04em;color:#f0f0f0f7;margin-bottom:10px;font-size:48px;font-weight:800;line-height:1}.ex-subheading{color:#a0a0a099;max-width:420px;margin-bottom:60px;font-size:15px;line-height:1.5}.ex-grid{background:#ffffff0f;border:1px solid #ffffff0f;border-radius:16px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1px;display:grid;overflow:hidden}.ex-card{color:inherit;background:#0a0a0c;flex-direction:column;padding:0;text-decoration:none;transition:background .15s;display:flex;overflow:hidden}.ex-card:hover{background:#0d0d10}.ex-card:hover .ex-card-preview{opacity:1}.ex-card-preview{opacity:.85;pointer-events:none;height:180px;transition:opacity .2s;position:relative;overflow:hidden}.ex-card-preview canvas{width:100%;height:100%;display:block}.ex-card-body{border-top:1px solid #ffffff0d;padding:18px 20px 20px}.ex-card-name{letter-spacing:-.01em;color:#e6e6e6f2;margin-bottom:5px;font-size:15px;font-weight:600}.ex-card-desc{color:#8c8c8ca6;margin-bottom:10px;font-size:12px;line-height:1.5}.ex-card-tags{flex-wrap:wrap;gap:5px;display:flex}.ex-tag{font-size:10px;font-family:var(--font-mono,monospace);color:#78787899;background:#ffffff0a;border:1px solid #ffffff0f;border-radius:4px;padding:2px 7px}.ex-fullscreen{background:#080809;position:fixed;inset:0;overflow:hidden}.ex-fullscreen canvas,.ex-fullscreen .ex-demo-root{width:100%;height:100%;position:absolute;inset:0}.ex-back{z-index:10;font-size:12px;font-family:var(--font-mono,monospace);color:#a0a0a080;align-items:center;gap:6px;text-decoration:none;transition:color .15s;display:flex;position:fixed;top:20px;left:24px}.ex-back:hover{color:#c8c8c8cc}.ex-labs-back{z-index:10;font:12px var(--font-mono,monospace);color:#a0a0a0a6;text-decoration:none;position:fixed;top:20px;right:24px}.ex-labs-back:hover{color:#e6e6e6f2}.ex-name-label{z-index:10;font-size:11px;font-family:var(--font-mono,monospace);color:#78787873;letter-spacing:.04em;position:fixed;bottom:24px;left:24px}.ex-reader-controls{z-index:10;color:#dcdcdccc;max-width:min(560px,100vw - 48px);font:11px var(--font-mono,monospace);align-items:flex-end;gap:14px;display:flex;position:fixed;bottom:20px;right:24px}.ex-reader-controls div{gap:5px;display:grid}.ex-reader-controls strong{color:#f0f0f0f2;font-weight:600}.ex-reader-controls span{color:#a0a0a0b3;line-height:1.45}.ex-reader-controls .ex-static-note{color:#dcbe82d9}.ex-reader-actions{gap:8px;display:flex}.ex-reader-controls button{color:#e6e6e6d9;min-height:44px;font:inherit;cursor:pointer;background:#080809bf;border:1px solid #ffffff2e;border-radius:6px;padding:8px 12px}.ex-reader-controls button:disabled{opacity:.45;cursor:not-allowed}.ex-reader-controls button:hover{border-color:#fff6}@media (max-width:600px){.ex-reader-controls{flex-direction:column;align-items:stretch;max-width:none;bottom:16px;left:20px;right:20px}.ex-reader-actions{flex-wrap:wrap}.ex-reader-controls button{flex:none}}@media (prefers-reduced-motion:reduce){.ex-reader-controls button{transition:none}}.ex-fullscreen{z-index:30}.ex-reader-controls{bottom:max(86px,calc(env(safe-area-inset-bottom) + 74px));background:#273027f2;border:1px solid #526047;border-radius:8px;max-height:55dvh;padding:14px;overflow-y:auto}.ex-reader-controls span{color:#d4ddc8}.ex-reader-controls .ex-reader-actions{flex-wrap:wrap;display:flex}body:has(.ex-fullscreen) .field-header{display:none}