html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}.tpl-page{padding:1.5rem 3rem 6rem;max-width:1240px;margin:0 auto;position:relative;z-index:10}.tpl-header{text-align:center;margin-bottom:3.5rem}.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.75rem}.tpl-card{background:#ffffffbf;backdrop-filter:blur(20px) saturate(160%);border-radius:18px;overflow:hidden;border:1px solid rgb(124 58 237 / 13%);box-shadow:0 4px 24px #7c3aed12,inset 0 1px #ffffffe5;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s;display:flex;flex-direction:column;opacity:0;transform:translateY(36px) scale(.97);filter:blur(8px)}.tpl-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 56px #7c3aed2e,inset 0 1px #ffffffe5;border-color:#7c3aed61}.tpl-card:not(.in){transition:opacity .8s cubic-bezier(.34,1.56,.64,1),transform .8s cubic-bezier(.34,1.56,.64,1),filter .6s ease}.tpl-chrome{background:#f1f2f5;border-bottom:1px solid rgb(0 0 0 / 7%);padding:8px 12px;display:flex;align-items:center;gap:10px;flex-shrink:0}.tpl-dots{display:flex;gap:5px}.tpl-dots span{width:10px;height:10px;border-radius:50%}.tpl-dots span:nth-child(1){background:#ff5f57}.tpl-dots span:nth-child(2){background:#febc2e}.tpl-dots span:nth-child(3){background:#28c840}.tpl-url-bar{flex:1;height:22px;background:#fff;border-radius:5px;border:1px solid rgb(0 0 0 / 10%);display:flex;align-items:center;padding:0 8px;font-size:10px;color:#888;font-family:monospace;overflow:hidden;white-space:nowrap}.tpl-thumb{height:210px;overflow:hidden;position:relative;background:#f5f6fa;flex-shrink:0}.tpl-thumb iframe{width:900px;height:620px;transform-origin:top left;border:none;pointer-events:none;display:block}.tpl-body{padding:1.2rem 1.4rem 1.4rem;flex:1;display:flex;flex-direction:column;gap:.6rem}.tpl-body .p-tags{display:flex;flex-wrap:wrap;gap:.4rem}.tpl-body h3{font-size:1.05rem;font-weight:700;color:var(--text);margin:0}.tpl-body p{font-size:.845rem;color:var(--muted);line-height:1.55;margin:0}.tpl-expand-hint{margin-top:auto;padding-top:.7rem;font-size:.78rem;font-weight:600;color:var(--accent);display:flex;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}.tpl-card:hover .tpl-expand-hint{opacity:1;transform:translateY(0)}.tpl-expand-inner{display:inline-flex;align-items:center;gap:.35rem;position:relative}.tpl-ring-svg{position:absolute;pointer-events:none;overflow:visible}.tpl-ring-rect{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.85}#tpl-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:1.5rem;visibility:hidden;pointer-events:none}#tpl-modal.active{visibility:visible;pointer-events:auto}.modal-backdrop{position:absolute;inset:0;background:#0e06269e;backdrop-filter:blur(20px) saturate(160%) brightness(.7);opacity:0;transition:opacity .42s cubic-bezier(.36,0,.66,.56)}#tpl-modal.active .modal-backdrop{opacity:1;transition:opacity .58s cubic-bezier(.25,1,.5,1)}.modal-inner{position:relative;z-index:1;width:100%;max-width:1200px;height:88vh;background:#fffffff5;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 120px #00000073,0 0 0 1px #ffffff2e,inset 0 1px #ffffffe5;opacity:0;transform:scale(.9) translateY(-22px);transition:opacity .42s cubic-bezier(.36,0,.66,.56),transform .44s cubic-bezier(.36,0,.66,.56);will-change:transform,opacity}#tpl-modal.active .modal-inner{opacity:1;transform:scale(1) translateY(0);transition:opacity .62s cubic-bezier(.34,1.38,.64,1),transform .68s cubic-bezier(.34,1.38,.64,1)}.modal-topbar{background:#f1f2f5;border-bottom:1px solid rgb(0 0 0 / 8%);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0}.modal-close{width:28px;height:28px;background:#ff5f57;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:#0000007f;font-weight:700;flex-shrink:0;transition:filter .15s;line-height:1}.modal-close:hover{filter:brightness(.88)}.modal-chrome-dots{display:flex;gap:6px}.modal-chrome-dots span{width:12px;height:12px;border-radius:50%}.modal-chrome-dots span:nth-child(1){background:#febc2e}.modal-chrome-dots span:nth-child(2){background:#28c840}.modal-url{flex:1;height:26px;background:#fff;border-radius:6px;border:1px solid rgb(0 0 0 / 10%);display:flex;align-items:center;padding:0 10px;font-size:11px;color:#666;font-family:monospace}.modal-title-badge{font-size:.75rem;font-weight:600;color:var(--accent);background:#7c3aed14;padding:3px 10px;border-radius:20px;flex-shrink:0}.modal-frame-wrap{flex:1;overflow:auto;background:#e8e8f0;position:relative}.modal-frame-wrap iframe{width:100%;height:100%;border:none;display:block}.tpl-page-hero{text-align:center;position:relative;z-index:10;padding:9rem 2rem 0}.tpl-card.in{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}.tpl-page-hero .label,.tpl-page-hero .title,.tpl-page-hero .desc{opacity:1!important;transform:none!important}.tpl-preview-hint{display:flex;align-items:flex-start;gap:.45rem;max-width:680px;width:calc(100% - 2.5rem);margin:-.75rem auto 2rem;padding:.6rem 1rem;border-radius:.75rem;background:#ffffffb8;backdrop-filter:blur(48px) saturate(260%) brightness(1.08);border:1px solid rgb(255 255 255 / 85%);box-shadow:0 8px 32px #7c3aed1a,0 2px 8px #0000000d,inset 0 1px #fffffff2;color:var(--muted);font-size:.8rem;line-height:1.5}.tpl-filters{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin:2rem 0 2.5rem}.tpl-filter-btn{padding:.5rem 1.3rem;border-radius:100px;border:1px solid rgb(255 255 255 / 35%);background:#ffffff59;backdrop-filter:blur(20px) saturate(160%);color:var(--muted);font-size:.84rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 8px #0000000f,inset 0 1px #ffffffb3}.tpl-filter-btn:hover{background:#ffffff8c;border-color:#fff9;color:var(--text);transform:translateY(-2px) scale(1.04);box-shadow:0 6px 20px #00000017,inset 0 1px #ffffffd9}.tpl-filter-btn.active{background:#ffffffb8;border-color:#ffffffd9;color:var(--text);transform:translateY(-2px) scale(1.05);box-shadow:0 8px 28px #0000001f,inset 0 1px #fff}@media(width<=768px){.tpl-page{padding:1.5rem 1.25rem 3rem}.tpl-grid{grid-template-columns:1fr}.modal-inner{height:92vh;border-radius:14px}.tpl-page-hero{padding:6.5rem 1.25rem 0}.tpl-filters{margin:1.5rem 1.25rem 1.75rem}.modal-topbar{padding:8px 10px;gap:8px}.modal-title-badge{display:none}.modal-url{font-size:10px}.modal-close{width:24px;height:24px;font-size:11px}}@media(width<=400px){.tpl-filters{gap:.4rem}.tpl-filter-btn{padding:.45rem .9rem;font-size:.78rem}}@media(width<=320px){.tpl-filters{flex-direction:column;align-items:center}}[data-theme=dark] .tpl-card{background:#ffffff0f;border-color:#a78bfa29;box-shadow:0 4px 24px #00000059,inset 0 1px #ffffff12}[data-theme=dark] .tpl-card:hover{background:#ffffff1a;border-color:#a78bfa66;box-shadow:0 20px 56px #0000007a,inset 0 1px #ffffff1a}[data-theme=dark] .tpl-chrome{background:#1a1830;border-bottom-color:#ffffff12}[data-theme=dark] .tpl-url-bar{background:#ffffff12;border-color:#ffffff1a;color:var(--muted)}[data-theme=dark] .tpl-thumb{background:#0f0d20}[data-theme=dark] .tpl-filter-btn{background:#ffffff0f;border-color:#ffffff1a;color:var(--muted);box-shadow:0 2px 8px #00000040,inset 0 1px #ffffff0f}[data-theme=dark] .tpl-filter-btn:hover{background:#ffffff1c;border-color:#ffffff29;color:var(--text);box-shadow:0 6px 20px #00000059,inset 0 1px #ffffff1a}[data-theme=dark] .tpl-filter-btn.active{background:#a78bfa2e;border-color:#a78bfa66;color:var(--text);box-shadow:0 8px 28px #00000061,inset 0 1px #ffffff1f}[data-theme=dark] .tpl-preview-hint{background:#0c0a1ae0;backdrop-filter:blur(48px) saturate(200%) brightness(.85);border-color:#ffffff14;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff0f}[data-theme=dark] .modal-backdrop{background:#05030fc7;backdrop-filter:blur(48px) saturate(200%) brightness(.55)}[data-theme=dark] .modal-inner{background:#121023f7;box-shadow:0 40px 120px #000000a6,0 0 0 1px #ffffff17,inset 0 1px #ffffff12}[data-theme=dark] .modal-topbar{background:#1a1830;border-bottom-color:#ffffff12}[data-theme=dark] .modal-url{background:#ffffff12;border-color:#ffffff1a;color:var(--muted)}[data-theme=dark] .modal-title-badge{background:#a78bfa24;color:var(--accent)}[data-theme=dark] .modal-frame-wrap{background:#0c0a1a}