.ht{margin-top:var(--s-8);border-radius:var(--r-xl);border:1px solid var(--border);background:var(--surface);padding:clamp(1.25rem,3vw,2rem)}.ht__head h2{font-size:var(--fs-2xl);margin:0 0 var(--s-2);line-height:1.15}.ht__head p{margin:0 0 var(--s-5);color:var(--text-muted)}.ht__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:clamp(1rem,3vw,2rem);display:grid}.ht__stage{aspect-ratio:16/10;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);background:#17171c;border:1px solid #34343c;position:relative;overflow:hidden}.ht .sc{opacity:0;flex-direction:column;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;position:absolute;inset:0}.ht .bar{background:#ececf1;flex:none;align-items:center;gap:6px;padding:8px 10px;display:flex}.ht .bar--d{background:#2b2b33}.ht .bar i{background:#ff5f57;border-radius:50%;width:8px;height:8px}.ht .bar i:nth-child(2){background:#febc2e}.ht .bar i:nth-child(3){background:#28c840}.ht .url{color:#6b6b78;margin:0 auto;font-size:10px;transform:translate(-14px)}.ht .bar--d .url{color:#a8a8b4}.ht .sk{background:#d9d9e2;border-radius:4px;height:7px;margin-bottom:7px;display:block}.ht .sk--t{width:72%;height:12px}.ht .sk--s{width:90%}.ht .sk--short{width:55%}.ht .sk--l{background:#3a3a44;width:90%}.ht .sk--l.sk--short{width:60%}.ht .sc1{background:#f6f6fa}.ht .web{flex:1;grid-template-columns:1.5fr 1fr;gap:14px;min-height:0;padding:14px;display:grid}.ht .web__shot{background:#fff;border:1px solid #e2e2ea;border-radius:10px;place-items:center;min-height:0;padding:8px;display:grid}.ht .web__shot img,.ht .drop img{object-fit:contain;border-radius:6px;width:auto;max-width:100%;height:auto;max-height:100%;display:block}.ht .web__side{flex-direction:column;justify-content:center;padding-top:6px;display:flex}.ht .copybtn{color:#0b0b0f;background:#c4f82a;border-radius:9px;place-items:center;height:34px;margin-top:10px;font-size:12px;font-weight:700;display:grid;position:relative;overflow:hidden}.ht .copybtn .l1,.ht .copybtn .l2{grid-area:1/1}.ht .copybtn .l2{opacity:0}.ht .ripple{opacity:0;border-radius:9px;position:absolute;inset:0;box-shadow:0 0 #0b0b0f59}.ht .bw{position:relative}.ht .cur{z-index:5;filter:drop-shadow(0 3px 5px #00000059);pointer-events:none;position:absolute;top:40%;left:55%}.ht .sc2,.ht .sc3,.ht .sc4{background:#1f1f26}.ht .fig{flex:1;grid-template-columns:22% 1fr 24%;min-height:0;display:grid}.ht .fig__l,.ht .fig__r{background:#2a2a32;padding:10px}.ht .fig__r p{color:#cfcfd9;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;font-size:10px;font-weight:700}.ht .fig__c{background-color:#26262e;background-image:radial-gradient(#3c3c47 1px,#0000 1px);background-size:16px 16px;place-items:center;min-height:0;padding:12px;display:grid;position:relative}.ht .drop{place-items:center;width:100%;height:100%;min-height:0;display:grid;position:relative}.ht .keys{z-index:3;opacity:0;align-items:center;gap:6px;display:flex;position:absolute}.ht .keys kbd{color:#17171c;background:#fff;border-radius:8px;padding:6px 11px;font:700 13px system-ui,sans-serif;box-shadow:0 3px #b9b9c4}.ht .keys em{color:#cfcfd9;font-style:normal;font-weight:700}.ht .sc2 .drop{opacity:0;transform:scale(.88)}.ht .selbox{opacity:0;pointer-events:none;border:2px solid #3b82f6;border-radius:4px;position:absolute;inset:4px}.ht .selbox--on{opacity:1}.ht .drop--edit .selbox{background:#3b82f61f;border-radius:3px;inset:14% 12% 52%}.ht .tip{color:#17171c;white-space:nowrap;opacity:0;background:#fff;border-radius:99px;padding:5px 10px;font-size:10px;font-weight:700;position:absolute;top:8px;left:50%;transform:translate(-50%);box-shadow:0 6px 16px #0006}.ht .sw{gap:6px;display:flex;position:relative}.ht .sw i{border:2px solid #2a2a32;border-radius:6px;width:20px;height:20px}.ht .swpick{border:2px solid #fff;border-radius:8px;width:26px;height:26px;position:absolute;top:-3px;left:-3px}.ht .fig__r--exp .expRow{gap:6px;margin-bottom:8px;display:flex}.ht .fig__r--exp .expRow span{text-align:center;color:#e6e6ee;background:#383842;border-radius:6px;flex:1;padding:6px 0;font-size:11px;font-weight:600}.ht .expBtn{color:#fff;background:#3b82f6;border-radius:7px;place-items:center;padding:8px 0;font-size:11px;font-weight:700;display:grid;position:relative;overflow:hidden}.ht .ripple--e{border-radius:7px;box-shadow:0 0 #ffffff80}.ht .toast{color:#fff;opacity:0;white-space:nowrap;background:#16a34a;border-radius:99px;padding:7px 14px;font-size:11px;font-weight:700;position:absolute;bottom:34px;left:50%;transform:translate(-50%,16px);box-shadow:0 8px 20px #0006}.ht .cap{z-index:6;color:#fff;background:#0b0b0fd1;border-radius:99px;align-items:center;gap:7px;padding:5px 11px 5px 6px;font-size:11px;font-weight:600;display:inline-flex;position:absolute;bottom:10px;left:10px}.ht .cap b{color:#0b0b0f;background:#c4f82a;border-radius:50%;place-items:center;width:18px;height:18px;font-size:11px;display:grid}.ht .prog{transform-origin:0;z-index:7;background:#c4f82a;width:100%;height:3px;position:absolute;bottom:0;left:0;transform:scaleX(0)}.ht__steps{counter-reset:st;gap:8px;margin:0;padding:0;list-style:none;display:grid}.ht__steps li{counter-increment:st;border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:12px 14px 12px 52px;position:relative}.ht__steps li:before{content:counter(st);background:var(--primary);color:#fff;border-radius:50%;place-items:center;width:26px;height:26px;font-size:13px;font-weight:800;display:grid;position:absolute;top:12px;left:14px}.ht__steps li b{color:var(--text);margin-bottom:2px;display:block}.ht__steps li span{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5;display:block}.ht__steps kbd{font:inherit;border:1px solid var(--border-strong);background:var(--surface);border-radius:6px;padding:1px 6px;font-size:.85em}.ht__note{margin:var(--s-4) 0 0;font-size:var(--fs-sm);color:var(--text-subtle)}@media (width<=900px){.ht__grid{grid-template-columns:1fr}}.ht .sc1{animation:16s infinite htS1}.ht .sc2{animation:16s infinite htS2}.ht .sc3{animation:16s infinite htS3}.ht .sc4{animation:16s infinite htS4}@keyframes htS1{0%,23%{opacity:1}25%,99%{opacity:0}to{opacity:1}}@keyframes htS2{0%,24%{opacity:0}26%,48%{opacity:1}50%,to{opacity:0}}@keyframes htS3{0%,49%{opacity:0}51%,73%{opacity:1}75%,to{opacity:0}}@keyframes htS4{0%,74%{opacity:0}76%,98%{opacity:1}to{opacity:0}}.ht .prog{animation:16s linear infinite htProg}@keyframes htProg{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.ht .cur1{animation:16s infinite htCur1}@keyframes htCur1{0%{transform:translate(70px,80px)}4%{transform:translate(70px,80px)}14%{transform:translate(0)}15.5%{transform:translate(0)scale(1)}16%{transform:translateY(2px)scale(.84)}18%{transform:translate(0)scale(1)}to{transform:translate(0)}}.ht .copybtn .l1{animation:16s infinite htL1}.ht .copybtn .l2{animation:16s infinite htL2}.ht .copybtn .ripple{animation:16s infinite htRip}@keyframes htL1{0%,15.5%{opacity:1}16%,99%{opacity:0}to{opacity:1}}@keyframes htL2{0%,15.5%{opacity:0}16%,23%{opacity:1}25%,to{opacity:0}}@keyframes htRip{0%,15.5%{opacity:0;box-shadow:0 0 #0b0b0f59}16%{opacity:1}21%{opacity:0;box-shadow:0 0 0 16px #0b0b0f00}to{opacity:0}}.ht .keys{animation:16s infinite htKeys}.ht .sc2 .drop{animation:16s infinite htDrop}@keyframes htKeys{0%,27%{opacity:0;transform:scale(.9)}29%,34%{opacity:1;transform:scale(1)}36%,to{opacity:0}}@keyframes htDrop{0%,35%{opacity:0;transform:scale(.88)}39%,48%{opacity:1;transform:scale(1)}50%,to{opacity:0}}.ht .tint{animation:16s infinite htTint}.ht .sc3 .tip{animation:16s infinite htTip}.ht .sc3 .selbox{animation:16s infinite htSel}.ht .swpick{animation:16s infinite htPick}@keyframes htTint{0%,56%{filter:hue-rotate()}60%,64%{filter:hue-rotate(110deg)}66%,70%{filter:hue-rotate(220deg)}72%,to{filter:hue-rotate()}}@keyframes htTip{0%,51%{opacity:0}53%,61%{opacity:1}63%,to{opacity:0}}@keyframes htSel{0%,52%{opacity:0}54%,62%{opacity:1}64%,to{opacity:0}}@keyframes htPick{0%,56%{transform:translate(0)}58%,63%{transform:translate(26px)}65%,69%{transform:translate(52px)}71%,to{transform:translate(78px)}}.ht .cur4{animation:16s infinite htCur4}.ht .expBtn .ripple{animation:16s infinite htRipE}.ht .toast{animation:16s infinite htToast}@keyframes htCur4{0%,76%{transform:translate(-50px,-70px)}85%{transform:translate(0)}86.5%{transform:translate(0)scale(1)}87%{transform:translateY(2px)scale(.84)}89%{transform:translate(0)scale(1)}to{transform:translate(0)}}@keyframes htRipE{0%,86.5%{opacity:0;box-shadow:0 0 #ffffff80}87%{opacity:1}92%{opacity:0;box-shadow:0 0 0 14px #fff0}to{opacity:0}}@keyframes htToast{0%,88%{opacity:0;transform:translate(-50%,16px)}91%,97%{opacity:1;transform:translate(-50%)}99%,to{opacity:0}}.ht__steps .s1{animation:16s infinite htH1}.ht__steps .s2{animation:16s infinite htH2}.ht__steps .s3{animation:16s infinite htH3}.ht__steps .s4{animation:16s infinite htH4}@keyframes htH1{0%,24%{border-color:var(--lime);background:var(--primary-soft)}25%,to{border-color:var(--border);background:var(--surface-2)}}@keyframes htH2{0%,24%{border-color:var(--border);background:var(--surface-2)}25%,49%{border-color:var(--lime);background:var(--primary-soft)}50%,to{border-color:var(--border);background:var(--surface-2)}}@keyframes htH3{0%,49%{border-color:var(--border);background:var(--surface-2)}50%,74%{border-color:var(--lime);background:var(--primary-soft)}75%,to{border-color:var(--border);background:var(--surface-2)}}@keyframes htH4{0%,74%{border-color:var(--border);background:var(--surface-2)}75%,99%{border-color:var(--lime);background:var(--primary-soft)}to{border-color:var(--border);background:var(--surface-2)}}@media (prefers-reduced-motion:reduce){.ht .sc,.ht .sc *,.ht .prog,.ht__steps li{animation:none!important}.ht .sc1{opacity:1}.ht .prog{display:none}}.crumbs{font-size:var(--fs-sm);color:var(--text-subtle);margin-bottom:var(--s-5);flex-wrap:wrap;gap:8px;display:flex}.crumbs a{color:var(--text-muted);text-decoration:none}.crumbs a:hover{color:var(--text)}.cx{grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);align-items:start;gap:clamp(1.5rem,3vw,3rem);display:grid}.cx__stage{border-radius:var(--r-xl);box-shadow:var(--shadow-lg);background:#1e1e1e;border:1px solid #3a3a3a;overflow:hidden}.cx__bar{color:#bdbdbd;font-size:var(--fs-sm);background:#2c2c2c;align-items:center;gap:.5rem;padding:.8rem 1rem;display:flex}.cx__bar i{background:#ff5f57;border-radius:50%;width:11px;height:11px}.cx__bar i:nth-child(2){background:#febc2e}.cx__bar i:nth-child(3){background:#28c840}.cx__bar span{white-space:nowrap;text-overflow:ellipsis;max-width:60%;margin:0 auto;overflow:hidden;transform:translate(-1.5rem)}.cx__canvas{background-color:#2c2c2c;background-image:radial-gradient(#4a4a4a 1px,#0000 1px);background-size:22px 22px;place-items:center;min-height:min(70vh,640px);padding:clamp(1rem,3vw,2.5rem);display:grid}.cx__canvas img{border-radius:var(--r-md);width:auto;max-width:100%;height:auto;max-height:74vh;transition:transform .6s var(--ease);box-shadow:0 30px 70px -20px #000000b3}.cx__stage:hover .cx__canvas img{transform:scale(1.02)}.cx__panel{top:calc(var(--header-h) + var(--s-6));gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-xl);border:1px solid var(--border);background:var(--surface);display:grid;position:sticky}.cx__panel h1{font-size:var(--fs-2xl);margin:0;line-height:1.1}.cx__lead{color:var(--text-muted);margin:0;line-height:1.6}.cx__hint{font-size:var(--fs-sm);color:var(--text-subtle);margin:0}.cx__hint kbd{font:inherit;border:1px solid var(--border-strong);background:var(--surface-2);border-radius:6px;padding:1px 6px;font-size:.85em}.cx__meta{border-top:1px solid var(--border);margin:0;display:grid}.cx__meta div{justify-content:space-between;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm);display:flex}.cx__meta dt{color:var(--text-subtle)}.cx__meta dd{color:var(--text);text-align:right;margin:0;font-weight:600}.cx__upsell{padding:var(--s-4);border-radius:var(--r-lg);border:1px solid var(--border-strong);transition:transform var(--t-fast), border-color var(--t-fast);background:linear-gradient(120deg,#8b5cf633,#fb923c24);gap:2px;text-decoration:none;display:grid}.cx__upsell:hover{border-color:var(--lime);transform:translateY(-2px)}.cx__upsell b{color:var(--text)}.cx__upsell span{color:var(--text-muted);font-size:var(--fs-sm)}@media (width<=1000px){.cx{grid-template-columns:1fr}.cx__panel{position:static}.cx__canvas{min-height:0}}.cx2{margin-top:var(--s-8);grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);align-items:start;gap:clamp(1.5rem,3vw,3rem);display:grid}.prose.prose--left{max-width:none;margin:0;font-size:1.125rem}.cx2__side{top:calc(var(--header-h) + var(--s-6));gap:var(--s-4);display:grid;position:sticky}.cx2__box{padding:var(--s-5);border-radius:var(--r-xl);border:1px solid var(--border);background:var(--surface)}.cx2__box h2{font-size:var(--fs-lg);margin:0 0 var(--s-3)}.cx2__box .tag-list{justify-content:flex-start;margin:0}.cx2__box.cta-soft{background:var(--primary-soft);margin:0}.cx2__box.cta-soft p{color:var(--text-muted)}@media (width<=1000px){.cx2{grid-template-columns:1fr}.cx2__side{position:static}}.tag-list{gap:var(--s-2);margin:var(--s-6) 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.cta-soft{padding:var(--s-6);border-radius:var(--r-xl);background:var(--primary-soft);border:1px solid var(--border);margin-top:var(--s-7)}.cta-soft h2{color:var(--text);font-size:var(--fs-2xl)}