.tp-player{background:var(--paper,#fbfaf6);min-height:100vh;margin:0}.tp-player-bench{position:fixed;inset:0;height:100vh!important;max-height:none!important}.tp-player-bench .kf-bench{border:0;border-radius:0;height:100%}.tu-demo{border:1px solid var(--rule-2);aspect-ratio:16/10;background:#fbfaf6;border-radius:14px;width:100%;margin:0;position:relative;overflow:hidden}.tu-demo iframe{transform-origin:0 0;pointer-events:none;opacity:0;border:0;width:1280px;height:800px;transition:opacity .35s;position:absolute;top:0;left:0}.tu-demo iframe.is-loaded{opacity:1}.tu-demo-still{background-color:#fbfaf6;background-image:radial-gradient(circle,#3c321e29 1px,#0000 1.2px);background-size:18px 18px;place-items:center;display:grid;position:absolute;inset:0}.tu-demo-mock{pointer-events:none;position:absolute;inset:9% 12% 16% 4%}.tu-demo-mock i{background:#3c321e14;border-radius:6px;width:7%;height:9%;position:absolute;left:0}.tu-demo-mock i:first-child{top:0}.tu-demo-mock i:nth-child(2){top:12%}.tu-demo-mock i:nth-child(3){top:24%}.tu-demo-mock b{aspect-ratio:1;border:2px solid #28201433;border-radius:3px;width:7%;position:absolute}.tu-demo-mock b:first-of-type{top:10%;left:30%}.tu-demo-mock b:nth-of-type(2){border-radius:50%;top:10%;left:52%}.tu-demo-mock b:nth-of-type(3){border-radius:50%;top:52%;left:36%}.tu-demo-mock b:nth-of-type(4){top:52%;left:58%}.tu-demo-play{background:var(--ink);color:#fff;height:40px;font:650 13px var(--sans);border-radius:999px;align-items:center;gap:8px;padding:0 16px 0 14px;transition:transform .12s,background-color .14s;display:inline-flex;position:relative;box-shadow:0 12px 26px -14px #14101e99}.tu-demo-play:hover{background:#2a2930;transform:translateY(-1px)}.tu-demo-loading{color:var(--ink-3);font:600 12px var(--sans);background:#ffffffeb;border-radius:999px;padding:6px 12px;position:relative;box-shadow:0 6px 16px -10px #281e0f66}.tu-demo figcaption{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:10px;left:10px;right:10px}.tu-demo-tag{color:#fff;font:650 10.5px var(--sans);letter-spacing:.02em;background:#18151fd1;border-radius:999px;padding:4px 9px}.tu-demo-pause{color:#fff;font:650 11px var(--sans);pointer-events:auto;background:#18151fd1;border-radius:999px;padding:4px 10px;transition:background-color .14s}.tu-demo-pause:hover{background:#18151ff2}.tu-nowrap{white-space:nowrap}.tu-demo-play,.tu-demo-loading,.tu-demo-pause{border-radius:6px}.tu-demo-loading,.tu-demo-pause,.tu-demo-tag{font-size:14px}.sg-contents{border-top:1px solid var(--brand-rule);border-bottom:1px solid var(--brand-hairline);flex-wrap:wrap;gap:4px 24px;max-width:75ch;margin:28px 0 0;padding:12px 0;display:flex}.sg-contents a{min-height:40px;color:var(--brand-ink);font:500 15px/1.4 var(--brand-sans);text-underline-offset:4px;align-items:center;text-decoration:underline;text-decoration-thickness:1px;display:inline-flex}.sg-section{column-gap:var(--column-gap,24px);border-top:1px solid var(--brand-hairline);grid-template-columns:repeat(12,minmax(0,1fr));margin-top:56px;padding-top:32px;scroll-margin-top:88px;display:grid}.sg-section>h2{max-width:18ch;color:var(--brand-ink);font:600 26px/32px var(--brand-sans);letter-spacing:-.015em;text-wrap:balance;grid-column:span 4;margin:0}.sg-body{grid-column:span 8;min-width:0}.sg-body>p{max-width:68ch;color:var(--brand-ink);font:400 16px/26px var(--brand-sans);margin:0 0 16px}.sg-body a{color:var(--brand-ink);text-underline-offset:3px;text-decoration:underline}.sg-steps{border-top:1px solid var(--brand-rule);margin:8px 0 24px;padding:0;list-style:none}.sg-steps li{border-bottom:1px solid var(--brand-hairline);grid-template-columns:40px minmax(0,1fr);gap:0 8px;padding:14px 0;display:grid}.sg-n{color:var(--brand-ink-3);font:500 14px/26px var(--brand-sans);font-variant-numeric:tabular-nums}.sg-steps p{max-width:64ch;color:var(--brand-ink-3);font:400 16px/26px var(--brand-sans);margin:0}.sg-steps strong{color:var(--brand-ink);font-weight:500}.sg-drawings{border-top:1px solid var(--brand-rule);margin:8px 0 24px;padding:0;list-style:none}.sg-drawings li{border-bottom:1px solid var(--brand-hairline);grid-template-columns:148px minmax(0,1fr);align-items:center;gap:0 20px;padding:14px 0;display:grid}.sg-paper{border:1px solid var(--brand-rule);border-radius:var(--brand-r-row);background-color:var(--brand-paper);background-image:radial-gradient(var(--brand-field) .9px, transparent 1px);background-size:14px 14px;place-items:center;height:104px;padding:8px;display:grid}.sg-paper .nx-mini{height:100%;max-height:88px}.sg-drawings p{color:var(--brand-ink-3);font:400 15px/24px var(--brand-sans);margin:0}.sg-drawings .sg-name{color:var(--brand-ink);font:500 16px/24px var(--brand-sans);margin-bottom:2px}.sg-figure{margin:8px 0 24px}.sg-figure a{border:1px solid var(--brand-rule);border-radius:var(--brand-r-card);background:var(--brand-paper);display:block;overflow:hidden}.sg-figure img{width:100%;height:auto;display:block}.sg-figure figcaption{color:var(--brand-ink-3);font:400 14px/22px var(--brand-sans);margin-top:10px}@media (width<=1000px){.sg-section>h2{grid-column:span 4}.sg-body{grid-column:span 8}}@media (width<=700px){.sg-section{grid-template-columns:minmax(0,1fr);row-gap:16px;margin-top:40px;padding-top:24px}.sg-section>h2,.sg-body{grid-column:1}.sg-section>h2{max-width:none;font-size:22px;line-height:28px}.sg-drawings li{grid-template-columns:112px minmax(0,1fr);gap:0 14px}.sg-paper{height:88px}}.kf-resource .kf-resource-intro.cp-lede{max-width:75ch;color:var(--brand-ink);font:400 18px/1.65 var(--brand-sans);margin:0 0 18px}