.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}.tpl-card{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--hp-card);border:1px solid var(--hp-line);color:var(--hp-text)!important;text-decoration:none;transition:transform .4s var(--hp-ease),box-shadow .3s var(--hp-ease),border-color .3s}.tpl-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px #0f122266;border-color:color-mix(in srgb,var(--hp-accent) 30%,var(--hp-line))}.tpl-thumb{position:relative;overflow:hidden;background:var(--hp-alt);border-bottom:1px solid var(--hp-line)}.tpl-thumb iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;pointer-events:none;background:#fff}.tpl-thumb-ph{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--hp-muted)}.tpl-card-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}.tpl-card-body b{color:var(--hp-ink);font-size:15.5px}.tpl-card-body small{font-size:13px;line-height:1.5;color:var(--hp-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tpl-card-body em{font-style:normal;font-size:12px;color:var(--hp-accent-text);font-weight:600}.tpl-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.tpl-cat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:16px 18px;border-radius:14px;background:var(--hp-card);border:1px solid var(--hp-line);color:var(--hp-text)!important;text-decoration:none;transition:border-color .3s,transform .3s var(--hp-ease)}.tpl-cat:hover{border-color:color-mix(in srgb,var(--hp-accent) 35%,var(--hp-line));transform:translateY(-2px)}.tpl-cat b{color:var(--hp-ink);font-size:14.5px}.tpl-cat span{grid-column:1;font-size:12.5px;color:var(--hp-muted)}.tpl-cat svg{grid-row:1 / span 2;grid-column:2;color:var(--hp-accent-text)}.tpl-index{columns:3 260px;column-gap:32px}.tpl-index>div{break-inside:avoid;margin-bottom:22px}.tpl-index h3{font-size:15px;margin:0 0 8px}.tpl-index h3 a{color:var(--hp-ink);text-decoration:none}.tpl-index ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}.tpl-index li a{font-size:13.5px;color:var(--hp-text);text-decoration:none}.tpl-index li a:hover{color:var(--hp-accent-text);text-decoration:underline}.tpl-hero{padding-bottom:48px}.tpl-hero .hp-crumbs{display:flex;align-items:center;gap:6px;font-size:13px;margin-bottom:18px}.tpl-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}.tpl-detail-text h1{margin:14px 0 12px}.tpl-meta{display:grid;gap:10px;margin:20px 0 24px}.tpl-meta>div{padding:12px 14px;border-radius:12px;background:var(--hp-card);border:1px solid var(--hp-line)}.tpl-meta dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--hp-muted);margin-bottom:4px}.tpl-meta dd{margin:0;color:var(--hp-ink);font-weight:600;overflow-wrap:anywhere}.tpl-note{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--hp-muted);margin:12px 0 0}.tpl-preview{display:flex;flex-direction:column;gap:12px;align-items:center}.tpl-device{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--hp-card);border:1px solid var(--hp-line)}.tpl-device button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:7px 14px;border-radius:999px;font:inherit;font-size:13px;color:var(--hp-muted);cursor:pointer}.tpl-device button.is-on{background:var(--hp-acc-soft);color:var(--hp-accent-text);font-weight:600}.tpl-frame{position:relative;width:100%;height:640px;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--hp-line);box-shadow:0 30px 60px -36px #0f122273;transition:width .35s var(--hp-ease)}.tpl-frame.is-mobile{width:375px;max-width:100%;border-radius:28px;border-width:8px;border-color:#11131c}.tpl-frame iframe{width:100%;height:100%;border:0;display:block}.tpl-steps{margin:0;padding-left:20px;display:grid;gap:12px;line-height:1.6;color:var(--hp-text)}.tpl-steps b{color:var(--hp-ink)}@media(max-width:960px){.tpl-detail{grid-template-columns:minmax(0,1fr);gap:28px}.tpl-frame{height:560px}}@media(max-width:600px){.tpl-grid{grid-template-columns:minmax(0,1fr)}.tpl-frame{height:520px}}.tpl-hero{text-align:left}.tpl-hero .tpl-detail-text h1{font-size:clamp(30px,3.6vw,46px);max-width:none}.tpl-hero .tpl-detail-text .hp-lead{margin:0}