@font-face{font-display:swap;font-family:Instrument Sans;font-style:normal;font-weight:400;src:url(./instrument-sans-v1-latin-regular-CzmC6WRw.woff2) format("woff2")}@font-face{font-display:swap;font-family:Instrument Sans;font-style:italic;font-weight:400;src:url(./instrument-sans-v1-latin-italic-CUjvaP9F.woff2) format("woff2")}@font-face{font-display:swap;font-family:Instrument Sans;font-style:normal;font-weight:600;src:url(./instrument-sans-v1-latin-600-WYR4DnIK.woff2) format("woff2")}@font-face{font-display:swap;font-family:Instrument Sans;font-style:italic;font-weight:600;src:url(./instrument-sans-v1-latin-600italic-BCajqPim.woff2) format("woff2")}*{margin:0;padding:0;visibility:initial}body,html{background-color:var(--bgColour);font-family:Instrument Sans,sans-serif;color:var(--textColour);display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;flex-direction:row;--textColour: #fff;--bgColour: #0F4239;--bgLightColour: #fff;--borderColour: #061a16;overflow-x:hidden}#pitchDiagram,#calculationsBox{flex:1;max-width:1000px}#pitchDiagram{position:relative;width:50vw;margin-left:3vw;max-height:100vh;aspect-ratio:1 / 1;background-color:#00afafb3;overflow:hidden}#calculationsBox{padding:0 3vw;max-height:100vh;overflow-y:scroll}header,footer{width:calc(100% - 14px);margin:0 7px}header{padding:20px 0 5px;text-align:center}footer{padding:20px 0}a{color:var(--textColour)}a.social-link{text-decoration:none;margin-right:10px;display:block;padding:5px 0}a.social-link:before{padding-right:25px;content:" ";background-repeat:no-repeat;background-size:contain!important;background-position:left!important}a.insta:before{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23fff'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M7.5%202h9A5.5%205.5%200%200%201%2022%207.5v9A5.5%205.5%200%200%201%2016.5%2022h-9A5.5%205.5%200%200%201%202%2016.5v-9A5.5%205.5%200%200%201%207.5%202zm0%202A3.5%203.5%200%200%200%204%207.5v9A3.5%203.5%200%200%200%207.5%2020h9a3.5%203.5%200%200%200%203.5-3.5v-9A3.5%203.5%200%200%200%2016.5%204h-9zm4.5%203.5a4.5%204.5%200%201%201%200%209%204.5%204.5%200%200%201%200-9zm0%202A2.5%202.5%200%201%200%2014.5%2012%202.5%202.5%200%200%200%2012%209.5zm5-2.25a1.25%201.25%200%201%201-1.25%201.25%201.25%201.25%200%200%201%201.25-1.25z'/%3e%3c/svg%3e") no-repeat}a.tiktok:before{background:url("data:image/svg+xml,%3csvg%20fill='%23fff'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m16.5%202a5.5%205.5%200%200%200%205.5%205.5v3.25a8.75%208.75%200%200%201%20-5.5-1.75v6.5a6.5%206.5%200%201%201%20-6.5-6.5c.25%200%20.5.02.75.05v3.26a3.25%203.25%200%201%200%202.25%203.09v-13.4z'/%3e%3c/svg%3e") no-repeat}a.email:before{background:url("data:image/svg+xml,%3csvg%20fill='none'%20height='24'%20stroke='%23fff'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20viewBox='0%200%2024%2024'%20width='24'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20height='14'%20rx='2'%20width='20'%20x='2'%20y='5'/%3e%3cpath%20d='m22%207-10%206-10-6'/%3e%3c/svg%3e") no-repeat}a.web:before{background:url("data:image/svg+xml,%3csvg%20fill='none'%20height='24'%20stroke='%23fff'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20viewBox='0%200%2024%2024'%20width='24'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='12'%20cy='12'%20r='10'/%3e%3cpath%20d='m2%2012h20'/%3e%3cpath%20d='m12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201%20-4%2010%2015.3%2015.3%200%200%201%20-4-10%2015.3%2015.3%200%200%201%204-10z'/%3e%3c/svg%3e") no-repeat}p{margin-bottom:5px}#textblock{max-width:600px;padding:35px;font-size:1.1em;line-height:1.5em}#textblock h1{line-height:1em}#textblock sup{line-height:0}#textblock .nav-link{opacity:.8}#textblock .nav-link+h1,#textblock *+h2{margin-top:15px}#textblock img{width:100%;margin:10px 0}#textblock ol>li,#textblock p{margin-top:15px;margin-bottom:15px}#triangleSVG{position:absolute;bottom:0;right:0;width:100%;display:block;background:url(data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wIDEwMCAxMDAtMTAwdjEwMHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=) no-repeat;background-size:100% 100%;z-index:98}#halfspanToOverhang{position:absolute;display:block;bottom:0;right:0;width:0;border-top:2px dashed var(--bgColour);border-left:2px dashed var(--bgColour);box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;z-index:99}.diagramlabel{display:block;font-size:1.3em;padding:3px;position:absolute}#topLengthLabel{color:#fff;width:100%;left:40%;transform:translate(-50%) translateY(-50%);text-align:center;z-index:100}#halfSpanWidthLabel{color:var(--bgColour);width:100%;height:20px;word-break:break-all;right:0;top:0;transform:translateY(-150%);text-align:center}#ridgeboardHalfLabel{color:var(--bgColour);top:0;right:7px;transform:translateY(50%);text-align:right}#topLengthLabel:before,#halfSpanWidthLabel:before,#ridgeboardHalfLabel:before{content:"← "}#topLengthLabel:after{content:"mm total →"}#halfSpanWidthLabel:after{content:"mm half span→"}#ridgeboardHalfLabel:after{content:"mm ½ ridge"}.slider-container{display:flex;align-items:center;z-index:100;position:absolute;top:0;bottom:0;padding:10px;width:30px}@supports (margin-left: env(safe-area-inset-left)){.slider-container{margin-left:calc(5px + env(safe-area-inset-left))}}#degValueInput{margin-left:10px}input[type=range]{writing-mode:bt-lr;-webkit-appearance:slider-vertical;appearance:slider-vertical;height:100%;width:20px;background-color:var(--bgColour);border-radius:15px}input[type=range]::-webkit-slider-thumb{width:30px;height:30px;background-color:#fff;cursor:pointer;border:none}input[type=range]::-moz-range-thumb{width:20px;height:20px;background-color:#fff;cursor:pointer;border:none;border-radius:15px}input[type=range]::-webkit-slider-runnable-track{background-color:var(--bgColour);border-radius:15px}input[type=range]::-moz-range-track{background-color:var(--bgColour);border-radius:15px}input.value-box{text-align:right;background:none;border:2px solid var(--borderColour);padding:2px 5px;margin-right:5px;width:80px;background-color:var(--bgLightColour);color:var(--borderColour)}input.value-box,.degree-symbol,.mm-symbol{font-size:1.6em}.mm-symbol{font-size:1.2em}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}table{table-layout:auto;width:calc(100% - 14px);margin:0 7px;border-collapse:collapse;text-align:left}.textblock{width:calc(100% - 14px);margin:10px 7px}.textblock>*{margin-bottom:5px}.textblock p{line-height:1.5em;padding:0 7px}table p{opacity:.8}table tr{border-bottom:1px solid var(--borderColour);line-height:1.5em}table caption{margin-top:10px;margin-bottom:5px}table tr th{width:calc(100%/3)}th,td{padding:7px}table th,table tr td{border-right:1px solid var(--borderColour)}table th:last-child,table tr td:last-child{border-right:none}header h1{font-size:1.7em}table h2,.textblock h2{font-size:1.1em;text-transform:uppercase;letter-spacing:1.5px;border-bottom:2px solid var(--borderColour);padding:3px 0;margin-top:10px;text-align:center}table h3,table h4{font-size:1.1em}.roofMemberDiagramContainer{position:relative;margin:10px 0;padding:5px 0;overflow:hidden}.roofMemberDiagramContainer>p{position:absolute;left:calc(3.5% + var(--cutRoofMemberEndSpacing));top:50%;transform:translateY(-50%);color:var(--bgColour);text-align:left}.roofMemberDiagramContainer>div:first-of-type{margin:10px var(--cutRoofMemberEndSpacing) 10px var(--cutRoofMemberEndSpacing);background-color:#ffffff80;border-radius:3px;height:33px}#rafterDiagram{transform:skew(var(--rafterPlumbCutDegSkewX));width:calc(var(--rafterToHipLengthPercentage) - var(--cutRoofMemberEndSpacing)*2)}#hipDiagram{transform:skew(var(--hipPlumbCutDegSkewX));width:calc(100% - var(--cutRoofMemberEndSpacing)*2)}.endCutLines,.birdsmouthCut{display:block;width:1px;border-left:3px dotted #888;position:absolute;top:-100px;bottom:-100px}.endCutLines{left:var(--cutRoofMemberEndSpacing)}.endCutLines+.endCutLines{left:initial}#rafterDiagram+.endCutLines+.endCutLines{right:calc(var(--cutRoofMemberEndSpacing) + 100% - var(--rafterToHipLengthPercentage))}#hipDiagram+.endCutLines+.endCutLines{right:var(--cutRoofMemberEndSpacing)}#rafterDiagram+.endCutLines+.endCutLines+.birdsmouthCut{left:calc(var(--overhangToTotalToRafterToHipPercentage) + var(--cutRoofMemberEndSpacing))}#hipDiagram+.endCutLines+.endCutLines+.birdsmouthCut{left:calc(var(--overhangToTotalPercentage) + var(--cutRoofMemberEndSpacing))}.endCutLines{z-index:99}.birdsmouthCut{z-index:100}.birdsmouthCut div{display:block;width:100000%;height:100px;background-color:var(--bgColour);position:absolute;left:0;bottom:50%;transform:translateY(105%);right:0}.endCutLines:after{position:absolute;left:0;top:40%}.endCutLines+.endCutLines+.birdsmouthCut div:after{position:absolute;top:0;left:0}#rafterDiagram+.endCutLines,#rafterDiagram+.endCutLines+.endCutLines,#rafterDiagram+.endCutLines+.endCutLines+.birdsmouthCut{transform:rotate(var(--rafterPlumbCutDegRotate))}#rafterDiagram+.endCutLines+.endCutLines:after{content:var(--rafterPlumbCutDegString);transform:rotate(var(--rafterPlumbCutDegSkewX)) translate(-100%) translateY(-40%)}#rafterDiagram+.endCutLines+.endCutLines+.birdsmouthCut div:after{content:var(--trueRafterLengthMM);transform:rotate(var(--rafterPlumbCutDegSkewX)) translate(5%) translateY(-110%)}#hipDiagram+.endCutLines,#hipDiagram+.endCutLines+.endCutLines,#hipDiagram+.endCutLines+.endCutLines+.birdsmouthCut{transform:rotate(var(--hipPlumbCutDegRotate))}#hipDiagram+.endCutLines+.endCutLines:after{content:var(--hipPlumbCutDegString);transform:rotate(var(--hipPlumbCutDegSkewX)) translate(-100%) translateY(-40%)}#hipDiagram+.endCutLines+.endCutLines+.birdsmouthCut div:after{content:var(--trueHipLengthMM);transform:rotate(var(--hipPlumbCutDegSkewX)) translate(5%) translateY(-110%)}#changelog{padding:5px;opacity:.5}#changelog summary{cursor:pointer}#changelog[open] summary{margin-bottom:10px}#changelog ul{list-style:square;list-style-position:inside;margin-left:3px}@media screen and (max-width: 700px) and (orientation: portrait){body,html{flex-direction:column;height:initial;gap:3vw}#pitchDiagram,#calculationsBox{width:100vw}#calculationsBox{max-height:initial;overflow-y:initial}header{padding-top:5px}footer{text-align:center}}@media screen and (max-width: 700px){#pitchDiagram{margin-left:0}.diagramlabel{display:none}.endCutLines:after,.endCutLines+.endCutLines+.birdsmouthCut div:after{font-size:.9em}}