.tf-tech{--tech-ink:#063963;--tech-muted:#536477;--tech-line:#dce2e5;--tech-paper:#f7f6f2;padding:100px 24px;background:var(--tech-paper);color:var(--tech-ink);scroll-margin-top:90px}.tf-tech *{box-sizing:border-box}.tf-tech__inner{max-width:1200px;margin:0 auto}.tf-tech__heading{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:end;margin-bottom:34px}.tf-tech__eyebrow{font-size:11px!important;font-weight:750;letter-spacing:.16em;color:#9e3435!important;margin:0 0 16px!important}.tf-tech__heading h2{font-size:clamp(30px,3.5vw,46px);font-weight:650;line-height:1.12;letter-spacing:-.035em;margin:0;max-width:630px;color:var(--tech-ink)}.tf-tech__heading>p{margin:0 0 4px;color:var(--tech-muted);font-size:16px;line-height:1.75;max-width:490px}.tf-tech__tabs{display:flex;gap:7px;margin-bottom:20px;flex-wrap:wrap}.tf-tech button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.tf-tech button:focus-visible,.tf-tech summary:focus-visible,.tf-tech__canvas-wrap:focus-visible{outline:3px solid #2099b7;outline-offset:4px}.tf-tech__tabs button{display:flex;align-items:center;gap:12px;padding:14px 21px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--tech-muted);font-size:14px;font-weight:650;transition:background .18s,color .18s}.tf-tech__tabs button span{font-size:11px;opacity:.7;font-variant-numeric:tabular-nums}.tf-tech__tabs button.is-active{background:var(--tech-ink);color:#fff;box-shadow:0 3px 8px #0639630c}.tf-tech__tabs button:hover:not(.is-active){background:#eceeeb;color:var(--tech-ink)}.tf-tech__studio{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);overflow:hidden;border:1px solid var(--tech-line);border-radius:18px;background:#fff;box-shadow:0 18px 65px #06396309}.tf-tech__visual{position:relative;min-width:0;background:radial-gradient(ellipse at 50% 35%,#f9fcfd 0%,#edf3f5 70%,#e9f0f2 100%);display:flex;flex-direction:column}.tf-tech__scene-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:23px 25px 0;font-size:10px;letter-spacing:.03em;color:#6f8190;z-index:1}.tf-tech__scene-meta .tf-tech__scene-title{font-size:12px;font-weight:650;color:var(--tech-ink);letter-spacing:0}.tf-tech__canvas-wrap{position:relative;min-height:425px;flex:1;touch-action:pan-y;cursor:grab;outline-offset:-5px!important}.tf-tech__canvas-wrap.is-dragging{cursor:grabbing}.tf-tech__canvas-wrap canvas{width:100%;height:100%;position:absolute;inset:0;display:block}.tf-tech__canvas-hint{position:absolute;left:20px;right:20px;bottom:12px;text-align:center;pointer-events:none;color:#6b7c88;font-size:11px;letter-spacing:.015em;transition:opacity .25s}.tf-tech__canvas-hint span{margin-right:4px;font-size:14px}.tf-tech__toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:16px 20px 18px;border-top:1px solid #d6e1e666;z-index:1}.tf-tech__rotate,.tf-tech__modes{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.tf-tech__toolbar button{border:1px solid #d2dde2;border-radius:6px;padding:8px 9px;color:var(--tech-ink);background:#ffffffb8;font-size:10px;line-height:1.4;font-weight:600;white-space:nowrap}.tf-tech__rotate button:first-child,.tf-tech__rotate button:nth-child(2){font-size:17px;padding:4px 10px;line-height:1.4;min-width:34px}.tf-tech__toolbar button:hover{background:#fff;border-color:#9bb4c3}.tf-tech__toolbar button[aria-pressed=true]{background:#063963;color:#fff;border-color:#063963}.tf-tech__toolbar button span{font-size:13px;margin-right:3px}.tf-tech__explanation{padding:32px 28px 26px;min-width:0;border-left:1px solid var(--tech-line)}.tf-tech__small-label{display:block;font-size:9px;letter-spacing:.13em;line-height:1.5;font-weight:750;color:#6c7e8c}.tf-tech__principle h3{font-size:23px;line-height:1.25;letter-spacing:-.025em;font-weight:650;margin:10px 0 11px;color:var(--tech-ink)}.tf-tech__principle p,.tf-tech__component-card p{font-size:13px;line-height:1.75;color:var(--tech-muted);margin:0}.tf-tech__component-card{margin:23px 0 15px;padding:18px;background:#f3f7f8;border-radius:10px;min-height:184px}.tf-tech__component-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}.tf-tech__component-number{display:flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;font-size:11px;font-weight:750;color:#fff;background:var(--tech-ink)}.tf-tech__component-card h4{font-size:17px;line-height:1.4;margin:0 0 8px;letter-spacing:-.015em;color:var(--tech-ink)}.tf-tech__component-card p{font-size:12px}.tf-tech__components{display:flex;gap:6px;flex-wrap:wrap}.tf-tech__components button{border:1px solid #d8e2e7;background:#fff;border-radius:6px;padding:7px 9px;font-size:10px;line-height:1.4;font-weight:600;color:#657687;transition:background .15s,border-color .15s}.tf-tech__components button.is-active{color:var(--tech-ink);background:#eaf1f5;border-color:#97b0c1}.tf-tech__components button:hover{border-color:#97b0c1;color:var(--tech-ink)}.tf-tech__note{font-size:10px;line-height:1.65;color:#788591;margin:18px 0 0}.tf-tech__footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:15px;padding:0 3px}.tf-tech__footer p{font-size:10px;line-height:1.6;color:#758391;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}.tf-tech__legend-dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex:none}.tf-tech__legend-dot--warm{background:#c57948}.tf-tech__legend-dot--cool{background:#249daf;margin-left:9px}.tf-tech__text-alternative{margin-top:20px;border-top:1px solid var(--tech-line);padding:15px 3px 0;font-size:12px;color:var(--tech-muted)}.tf-tech__text-alternative summary{cursor:pointer;font-weight:600;padding:3px 0}.tf-tech__accessible-copy{padding:8px 0 5px;max-width:850px}.tf-tech__accessible-copy h3{font-size:15px;color:var(--tech-ink);margin:20px 0 7px}.tf-tech__accessible-copy p{font-size:13px;line-height:1.8;margin:0}.tf-tech__no-js{font-size:13px;line-height:1.7;padding:15px;background:#fff;border-radius:8px}.tf-tech__error{padding:45px;text-align:center;font-size:14px;line-height:1.7;color:var(--tech-muted)}
@media(max-width:1050px){.tf-tech__studio{grid-template-columns:minmax(0,1.4fr) minmax(290px,1fr)}.tf-tech__explanation{padding:26px 22px}.tf-tech__toolbar{padding:13px}.tf-tech__canvas-wrap{min-height:450px}.tf-tech__heading{gap:35px}.tf-tech__scene-meta{padding:20px 18px 0}}
@media(max-width:780px){.tf-tech{padding:68px 20px}.tf-tech__heading{grid-template-columns:1fr;gap:17px;margin-bottom:25px}.tf-tech__heading>p{font-size:14px;max-width:600px}.tf-tech__tabs{gap:4px;margin-bottom:14px}.tf-tech__tabs button{padding:12px 14px;font-size:12px;gap:7px}.tf-tech__studio{grid-template-columns:1fr;border-radius:13px}.tf-tech__canvas-wrap{height:365px;min-height:365px;flex:none}.tf-tech__explanation{border-top:1px solid var(--tech-line);border-left:0;padding:24px}.tf-tech__principle h3{font-size:22px}.tf-tech__principle p{font-size:13px}.tf-tech__component-card{min-height:0;padding:17px;margin-top:18px}.tf-tech__component-card p{font-size:13px}.tf-tech__components button{font-size:11px;padding:8px 10px}.tf-tech__footer{gap:8px}.tf-tech__note{font-size:11px}.tf-tech__toolbar{padding:12px 15px}.tf-tech__scene-meta{padding:19px 18px 0}.tf-tech__canvas-hint{font-size:10px}}
@media(max-width:420px){.tf-tech{padding:54px 15px}.tf-tech__tabs button{padding:11px 10px;font-size:11px;gap:5px}.tf-tech__tabs button span{font-size:9px}.tf-tech__canvas-wrap{height:315px;min-height:315px}.tf-tech__scene-meta{font-size:9px;gap:5px;padding:18px 14px 0}.tf-tech__scene-meta .tf-tech__scene-title{font-size:11px}.tf-tech__toolbar{gap:8px}.tf-tech__explanation{padding:22px 20px}.tf-tech__heading h2{font-size:31px}.tf-tech__canvas-hint{left:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.tf-tech *{transition:none!important}}

/* Reliable first paint: native SVG geometry stays visible until Canvas has drawn.
   Script-disabled previews remain useful, with no inactive interactive controls. */
.tf-tech .tf-tech__tabs,.tf-tech .tf-tech__toolbar,.tf-tech .tf-tech__components,.tf-tech .tf-tech__canvas-hint{display:none}
.tf-tech .tf-tech__canvas-wrap{height:430px;min-height:430px;flex:none;overflow:hidden}
.tf-tech .tf-tech__canvas-wrap canvas{visibility:hidden;width:100%!important;height:100%!important;max-width:none}
.tf-tech__poster{position:absolute;inset:0;display:block;pointer-events:none;background:#eef4f6}
.tf-tech__poster>[data-tech-poster]{width:100%;height:100%}
.tf-tech__poster>[hidden]{display:none!important}
.tf-tech .tf-tech__poster svg{display:block;width:100%!important;height:100%!important;max-width:none;overflow:hidden}
.tf-tech[data-tech-mounted="true"] .tf-tech__tabs{display:flex}
.tf-tech[data-tech-mounted="true"] .tf-tech__toolbar{display:flex}
.tf-tech[data-tech-mounted="true"] .tf-tech__components{display:flex}
.tf-tech[data-tech-mounted="true"] .tf-tech__canvas-hint{display:block}
.tf-tech[data-tech-mounted="true"] .tf-tech__canvas-wrap canvas{visibility:visible}
.tf-tech[data-tech-mounted="true"] .tf-tech__poster,.tf-tech[data-tech-mounted="true"] .tf-tech__static-library{display:none}
.tf-tech__poster-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 13px;list-style:none;padding:15px 18px;margin:0;border-top:1px solid #dce6eb;font-size:12px;line-height:1.5;color:#36566a}.tf-tech__poster-key li{display:flex;gap:8px;align-items:flex-start;min-width:0}.tf-tech__poster-key li span{display:grid;place-items:center;flex:0 0 19px;height:19px;border-radius:50%;color:#063963;background:#e4eef3;font-size:10px;font-weight:700}.tf-tech[data-tech-mounted="true"] [data-tech-native-key]{display:none}
.tf-tech__static-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:25px}
.tf-tech__static-library article{overflow:hidden;background:#fff;border:1px solid var(--tech-line);border-radius:12px}
.tf-tech__static-poster{height:205px;background:#eef4f6;padding:10px}
.tf-tech .tf-tech__static-poster svg{display:block;width:100%!important;height:100%!important;max-width:none}
.tf-tech__static-copy{padding:20px}.tf-tech__static-copy h3{margin:0 0 9px;font-size:18px;color:var(--tech-ink);line-height:1.35}
.tf-tech__static-copy p{margin:0;color:var(--tech-muted);font-size:14px;line-height:1.75}
.tf-tech__static-explanation{max-width:870px;padding:24px 3px 0}.tf-tech__static-explanation h3{font-size:17px;line-height:1.4;margin:0 0 9px;color:var(--tech-ink)}.tf-tech__static-explanation p{font-size:14px;line-height:1.75;color:var(--tech-muted);margin:0}
.tf-tech__toolbar button,.tf-tech__rotate button:first-child,.tf-tech__rotate button:nth-child(2){min-height:44px;min-width:44px;padding:9px 11px;font-size:12px}
.tf-tech__rotate button:first-child,.tf-tech__rotate button:nth-child(2){font-size:22px}
.tf-tech__components button{min-height:44px;padding:10px 12px;font-size:12px;line-height:1.4}
.tf-tech__scene-meta{font-size:11px;line-height:1.5}.tf-tech__scene-meta .tf-tech__scene-title{font-size:13px}
.tf-tech__canvas-hint{font-size:12px;line-height:1.5}.tf-tech__small-label{font-size:10px}.tf-tech__note{font-size:12px;line-height:1.65}.tf-tech__footer p{font-size:11px}
@media(max-width:1050px){.tf-tech__studio{grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr)}.tf-tech__toolbar{gap:10px}.tf-tech__rotate,.tf-tech__modes{width:100%}.tf-tech__rotate{display:grid;grid-template-columns:44px 44px minmax(0,1fr)}.tf-tech__modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tf-tech__toolbar button{white-space:normal;text-align:center}.tf-tech__static-library{gap:12px}}
@media(max-width:780px){.tf-tech__studio{grid-template-columns:minmax(0,1fr)}.tf-tech[data-tech-mounted="true"] .tf-tech__tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tf-tech__tabs button{min-height:54px;padding:12px;font-size:13px;line-height:1.35;gap:9px;text-align:left;border:1px solid #dce2e5;background:#fff}.tf-tech__tabs button span{font-size:11px}.tf-tech .tf-tech__canvas-wrap{height:380px;min-height:380px}.tf-tech__scene-meta{padding:17px 18px 0;align-items:flex-start;flex-direction:column;gap:3px}.tf-tech__scene-meta .tf-tech__scene-title{font-size:14px}.tf-tech__toolbar{padding:15px;gap:10px}.tf-tech__toolbar button{font-size:13px}.tf-tech__explanation{padding:25px 21px}.tf-tech__principle h3{font-size:23px}.tf-tech__principle p,.tf-tech__component-card p{font-size:14px;line-height:1.75}.tf-tech__component-card h4{font-size:18px}.tf-tech__components{gap:8px}.tf-tech__components button{font-size:13px;max-width:100%}.tf-tech__static-library{grid-template-columns:minmax(0,1fr);gap:18px}.tf-tech__static-poster{height:235px}.tf-tech__static-copy{padding:20px}.tf-tech__static-copy h3{font-size:20px}.tf-tech__note{font-size:12px}.tf-tech__text-alternative{font-size:13px}.tf-tech__accessible-copy p{font-size:14px}.tf-tech__footer{gap:11px}.tf-tech__footer p{font-size:11px;line-height:1.8}.tf-tech__static-explanation{padding-top:22px}.tf-tech__no-js{font-size:14px}}
@media(max-width:420px){.tf-tech{padding:54px 16px}.tf-tech__tabs button{min-height:56px;font-size:12px;padding:10px;gap:6px}.tf-tech__tabs button span{font-size:10px}.tf-tech .tf-tech__canvas-wrap{height:380px;min-height:380px}.tf-tech__scene-meta{padding:16px 15px 0;font-size:11px}.tf-tech__scene-meta .tf-tech__scene-title{font-size:13px}.tf-tech__canvas-hint{font-size:11px}.tf-tech__toolbar{padding:13px 12px}.tf-tech__toolbar button{font-size:12px}.tf-tech__explanation{padding:23px 19px}.tf-tech__static-poster{height:215px}}