:root{--navy:#06162b;--navy2:#0d2545;--orange:#ff6a00;--ink:#0b172a;--muted:#667085;--line:#e1e7ef;--soft:#f4f7fa;--shadow:0 18px 48px rgba(8,24,48,.11)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff}button,input{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.examples-hero{border-bottom:1px solid rgba(6,22,43,.10)}.examples-hero .examples-hero-title{max-width:none;white-space:nowrap}.examples-hero p{max-width:760px}.examples-content{width:min(1180px,calc(100% - 40px));margin:auto;padding:48px 0 90px}.category-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.category-filter{border:1px solid #d7dee7;background:#fff;color:#536071;height:37px;padding:0 13px;border-radius:999px;cursor:pointer;font-size:12px}.category-filter:hover,.category-filter.is-active{border-color:var(--orange);background:#fff4eb;color:#bd4d00}.examples-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.example-card{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 4px 16px rgba(13,33,60,.04);transition:.18s ease}.example-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#f2b288}.example-preview-button{display:block;width:100%;border:0;padding:0;background:#edf2f6;cursor:pointer;position:relative}.example-image-wrap{min-height:306px;display:grid;place-items:center;position:relative;overflow:hidden;padding:22px}.front-sheet,.back-sheet{position:absolute;left:50%;top:50%;display:block;width:63%;max-height:260px;overflow:hidden;background:#fff;box-shadow:0 9px 28px rgba(10,28,53,.16);border-radius:2px;transform-origin:center center;transition:transform .18s ease,box-shadow .18s ease,z-index .18s ease,opacity .18s ease}.front-sheet{z-index:2;transform:translate(-50%,-50%) rotate(-1deg)}.back-sheet{z-index:1;transform:translate(calc(-50% + 18px),calc(-50% - 12px)) rotate(5deg);opacity:.96}.front-sheet img,.back-sheet img{display:block;width:100%;height:auto;max-height:260px;object-fit:contain}.example-card:hover .front-sheet{z-index:1;transform:translate(calc(-50% - 16px),calc(-50% + 8px)) rotate(-6deg);opacity:1}.example-card:hover .back-sheet{z-index:3;transform:translate(-50%,-50%) rotate(0deg);opacity:1}.example-zoom{position:absolute;z-index:5;right:12px;bottom:12px;padding:7px 9px;border-radius:8px;background:rgba(6,22,43,.88);color:#fff;font-size:11px;opacity:0;transform:translateY(4px);transition:.18s ease}.example-card:hover .example-zoom,.example-preview-button:focus-visible .example-zoom{opacity:1;transform:none}.example-meta{padding:14px 15px 16px}.example-meta strong{display:block;font-size:14px;margin-bottom:5px}.example-meta span{display:block;color:var(--muted);font-size:12px}.examples-empty,.examples-no-results{padding:46px;border:1px dashed #ccd5e0;border-radius:14px;text-align:center;color:var(--muted);background:#fafbfd}.examples-empty strong{display:block;color:var(--ink);margin-bottom:7px}.examples-empty p{margin:0}.example-dialog{border:0;padding:0;background:transparent;width:min(1040px,94vw);max-width:none;overflow:visible}.example-dialog::backdrop{background:rgba(3,12,25,.74);backdrop-filter:blur(3px)}.dialog-shell{position:relative;display:grid;grid-template-columns:280px minmax(0,1fr);background:#fff;border-radius:18px;overflow:hidden;min-height:660px;box-shadow:0 30px 90px rgba(0,0,0,.34)}.dialog-close{position:absolute;right:14px;top:12px;z-index:10;border:0;background:rgba(6,22,43,.08);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:26px;line-height:1;color:#24334a}.dialog-info{padding:46px 26px;background:#f8fafc;border-right:1px solid #e2e8f0}.dialog-info>span{font-size:11px;color:var(--orange);letter-spacing:.09em;font-weight:800;text-transform:uppercase}.dialog-info h2{margin:9px 0 6px;font-size:25px;line-height:1.15;letter-spacing:-.03em}.dialog-info p{margin:0;color:var(--muted);font-size:13px}.dialog-tabs{display:grid;gap:7px;margin-top:28px}.dialog-tabs button{height:40px;text-align:left;padding:0 12px;border:1px solid #d6dee8;border-radius:9px;background:#fff;color:#405067;cursor:pointer}.dialog-tabs button.is-active{border-color:var(--orange);background:#fff3e9;color:#b74800}.dialog-tabs button[hidden]{display:none}.dialog-preview{display:grid;place-items:center;padding:45px;background:#e9eef3;min-width:0}.dialog-preview img{display:block;max-width:100%;max-height:570px;width:auto;height:auto;box-shadow:0 14px 42px rgba(9,27,51,.18);background:#fff}.example-card[hidden]{display:none!important}@media(max-width:1050px){.examples-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:780px){.examples-grid{grid-template-columns:repeat(2,1fr)}.dialog-shell{grid-template-columns:1fr;min-height:0}.dialog-info{padding:24px 20px;border-right:0;border-bottom:1px solid #e2e8f0}.dialog-tabs{display:flex;margin-top:17px}.dialog-tabs button{flex:1;text-align:center}.dialog-preview{padding:26px;min-height:480px}}@media(max-width:520px){.examples-hero{padding:48px 0 54px}.examples-hero-inner,.examples-content{width:min(100% - 28px,1180px)}.examples-content{padding:34px 0 70px}.examples-grid{grid-template-columns:1fr}.example-image-wrap{min-height:340px}.example-dialog{width:96vw}.dialog-preview{min-height:430px;padding:20px}.dialog-preview img{max-height:420px}}

@media(max-width:900px){.examples-hero .examples-hero-title{white-space:normal}}