#geo-path{font:16px system-ui;color:#183c2c;background:#f3f6ef;padding:22px;border-radius:18px;color-scheme:light}#geo-path *{box-sizing:border-box}#geo-path button{font:inherit;min-height:44px;padding:10px 14px;border:1px solid #9db2a3;border-radius:9px;background:#fff;color:#183c2c;cursor:pointer}#geo-path button:disabled{opacity:.55;cursor:default}#geo-path .gp-primary{background:#296c51;color:#fff}#geo-path .gp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:15px 0}#geo-path .gp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}#geo-path .gp-card{background:#fff;padding:19px;border-radius:13px;margin:12px 0;border:2px solid transparent}#geo-path .gp-valid{border-color:#296c51}#geo-path .gp-steps{display:flex;gap:7px;flex-wrap:wrap}#geo-path .gp-step{padding:8px;background:#edf0e9;border-radius:7px}#geo-path .gp-current{background:#ffe4a5}#geo-path .gp-done{background:#d2eadb}#geo-path .gp-boxes{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}#geo-path .gp-box{padding:12px;border:1px solid #93ab9a;border-radius:7px}#geo-path h2{font-size:23px}#geo-path h3{font-size:18px}#geo-path small{display:block;color:#355342;margin:8px 0}#geo-path [hidden]{display:none!important}#geo-path #pydemo>h2,#geo-path #pydemo>small,#geo-path #pydemo>.row,#geo-path #pydemo>label,#geo-path #thdemo>h2,#geo-path #thdemo>small,#geo-path #thdemo>.row{display:none}#geo-path #pydemo,#geo-path #thdemo{padding:0}

#geo-path p,#geo-path small,#geo-path label,#geo-path h2,#geo-path h3,#geo-path strong,#geo-path span,#geo-path div,#geo-path article{color:#143c2b;opacity:1}
#geo-path button,#geo-path select,#geo-path input{color:#143c2b;opacity:1;-webkit-text-fill-color:#143c2b}
#geo-path button:disabled{color:#244b37;background:#e0e8df;opacity:1;-webkit-text-fill-color:#244b37}
#geo-path button.gp-primary,#geo-path button.go,#geo-path button.active{color:#fff;-webkit-text-fill-color:#fff}
#geo-path input::placeholder{color:#395844;opacity:1}
#geo-path svg text{fill:#143c2b;opacity:1}
#geo-path .gp-step{color:#143c2b}


#pydemo{font:16px system-ui;background:#f3f6ef;color:#233f36;padding:22px;border-radius:18px;color-scheme:light}#pydemo *{box-sizing:border-box}#pydemo .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}#pydemo button,#pydemo select,#pydemo input{font:inherit;padding:11px;border:1px solid #9bb1a4;border-radius:9px;background:white;color:#233f36;min-height:44px}#pydemo button{cursor:pointer}#pydemo button.active,#pydemo .go{background:#296c51;color:white}#pydemo .layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}#pydemo article{background:white;padding:20px;border-radius:14px}#pydemo input{width:90px}#pydemo svg{width:100%;height:auto}#pydemo h2{font-size:23px}#pydemo h3{font-size:18px}#pydemo small{display:block;margin:8px 0}#pydemo .math{font-size:22px;line-height:2.4}#pydemo .feedback{min-height:28px;font-weight:600}#pydemo .side{stroke:#304f43;stroke-width:4}#pydemo .chosen{stroke:#d18311;stroke-width:7}@media(max-width:620px){#pydemo .layout{grid-template-columns:1fr}}


#thdemo{font:16px system-ui;background:#f3f6ef;color:#233f36;padding:22px;border-radius:18px;color-scheme:light}#thdemo *{box-sizing:border-box}#thdemo p,#thdemo small,#thdemo label,#thdemo h2,#thdemo h3,#thdemo strong,#thdemo span,#thdemo text{color:#183c2c;opacity:1}#thdemo input::placeholder{color:#455d50;opacity:1}#thdemo input:disabled{color:#183c2c;-webkit-text-fill-color:#183c2c;opacity:1}#thdemo #thfeedback{color:#174c32}#thdemo svg text{fill:#183c2c}#thdemo .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0}#thdemo button,#thdemo select,#thdemo input{font:inherit;min-height:44px;border:1px solid #9bb1a4;border-radius:8px;background:white;color:#233f36;padding:9px}#thdemo button{cursor:pointer}#thdemo .active,#thdemo .go{background:#296c51;color:white}#thdemo .layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}#thdemo article{background:white;border-radius:13px;padding:18px}#thdemo input{width:70px;text-align:center}#thdemo .parallel-wrap{display:inline-flex;flex-direction:column;align-items:center;vertical-align:bottom;position:relative;padding-top:12px}#thdemo .parallel-note{font-size:14px;color:#183c2c;line-height:1.4;text-align:center}#thdemo .parallel-brace{display:block;width:100%;height:12px;border-top:2px solid #296c51;border-left:2px solid #296c51;border-right:2px solid #296c51;border-radius:14px 14px 0 0;position:relative;margin-top:5px}#thdemo .parallel-brace:before{content:"";position:absolute;left:50%;top:-7px;height:7px;border-left:2px solid #296c51}#thdemo .frac{display:inline-grid;text-align:center;vertical-align:middle;margin:5px}#thdemo .frac>span:first-child{border-bottom:2px solid;padding-bottom:5px}#thdemo .frac>span:last-child{padding-top:5px}#thdemo svg{width:100%;height:auto}#thdemo small{display:block;margin:9px 0}#thdemo .math{font-size:22px;line-height:2.4}#thdemo h2{font-size:23px}#thdemo h3{font-size:18px}@media(max-width:650px){#thdemo .layout{grid-template-columns:1fr}}


#trdemo{color:#143c2b;font:16px system-ui}#trdemo .tr-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}#trdemo article{background:#fff;padding:18px;border-radius:13px}#trdemo input,#trdemo select{font:inherit;min-height:44px;border:1px solid #8da795;border-radius:8px;background:#fff;color:#143c2b;padding:9px;max-width:100%}#trdemo input{width:85px}#trdemo .tr-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}#trdemo .tr-frac{display:inline-grid;vertical-align:middle;text-align:center;margin:6px}#trdemo .tr-frac>span:first-child{border-bottom:2px solid #143c2b;padding:4px}#trdemo .tr-frac>span:last-child{padding:4px}#trdemo .tr-hat{display:inline-block;position:relative;padding-top:5px}#trdemo svg{width:100%;height:auto}#trdemo .tr-side{stroke:#355944;stroke-width:4}#trdemo .tr-known{stroke:#1465a0;stroke-width:7}#trdemo .tr-wanted{stroke:#b2570b;stroke-width:7}#trdemo .tr-side[role=button]{cursor:pointer}#trdemo .tr-side:focus{outline:2px solid #296c51}#trdemo .tr-math{font-size:21px;line-height:2.4}@media(max-width:650px){#trdemo .tr-layout{grid-template-columns:1fr}}

body{margin:0;background:#f3f6ef;font-family:system-ui}main{max-width:1120px;margin:auto;padding:16px}.geo-top{padding:16px}.geo-top a{color:#183c2c}input{font-size:16px}
/* High contrast controls and fillable Pythagoras bar models. */
#geo-path button,#geo-path button:disabled,#pydemo button,#thdemo button,#trdemo button{background:#235e40!important;color:#fff!important;-webkit-text-fill-color:#fff!important;opacity:1!important;border-color:#235e40!important}
#geo-path button:disabled{border:2px dashed #d8e8d9!important;cursor:default}
#geo-path input,#geo-path select{color:#103923!important;-webkit-text-fill-color:#103923!important;background:#fff!important;opacity:1!important}
#geo-path math{color:#103923;font-size:1em;vertical-align:middle}#geo-path .tr-hat:before{content:none!important}
#pydemo #pyfig svg,#thdemo #thfig svg{width:100%;height:auto}#pydemo .py-bars{margin:18px 0}#pydemo .py-track{display:flex;gap:4px;margin:7px 0;min-height:64px}#pydemo .py-whole,#pydemo .py-part{display:flex;justify-content:center;align-items:center;gap:4px;padding:8px;min-width:0;flex:1;border-radius:8px;background:#d6e9be;color:#103923}#pydemo .py-part{background:#cbe6f2}#pydemo .py-part-other{background:#ffe0a6}#pydemo .py-bars input{width:75px;max-width:calc(100% - 20px)}#pydemo .py-writing{padding-top:15px;margin-top:20px;border-top:1px solid #aec3ad}#pydemo .py-writing p{margin:8px 0}#trdemo [data-geo-side]{cursor:pointer}

#pydemo .layout, #thdemo .layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
#pydemo .py-track > .py-part { flex-shrink: 1; flex-grow: 0; }
#pydemo .py-track > .py-part:only-child { flex: 1; }
#pydemo .py-shrunk { max-width: 68%; }
#pydemo .py-writing-step { padding: 8px 0; border-top: 1px solid #dbe7df; }
#pydemo .py-equation { font-size: 1.15rem; font-weight: 650; }
#pydemo .go { margin-top: 10px; }
#thdemo .th-triangle-fields { display: grid; gap: 8px; margin: 12px 0; }
#thdemo .th-triangle-fields label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
}
#thdemo .th-color-key { display: flex; gap: 8px; flex-wrap: wrap; }
#thdemo .th-color-key span,
#thdemo .frac span[data-triangle]:not([data-triangle=""]) {
  padding: 3px 8px;
  border-radius: 6px;
}
#thdemo [data-triangle="small"],
#geo-path #thdemo input[data-triangle="small"] {
  background: #dcefff !important;
  border-color: #17639c;
  color: #164f7c !important;
  -webkit-text-fill-color: #164f7c !important;
}
#thdemo [data-triangle="large"],
#geo-path #thdemo input[data-triangle="large"] {
  background: #fff0be !important;
  border-color: #935c07;
  color: #704605 !important;
  -webkit-text-fill-color: #704605 !important;
}
#thdemo [data-triangle="common"] { background: #f9e0e5; }
#thdemo .th-alignment { stroke-dasharray: 1; animation: th-trace .55s ease-out both; opacity: .75; }
@keyframes th-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  #thdemo .th-alignment { animation: none; }
}
@media (max-width: 760px) {
  #pydemo .layout, #thdemo .layout { grid-template-columns: minmax(0, 1fr); }
}