html,body,#root{height:100%;margin:0}#main-container{font-family:sans-serif;height:calc(100% - 16px);padding:8px;max-width:1080px;margin:auto}#main-container h1{font-size:20px}#main-grid{height:100%;display:grid;grid-template-rows:[form] auto [results] 1fr;gap:16px}#main-form{grid-row:form}#results{grid-row:results;border-top:1px solid}#results>table{border-collapse:collapse}#results>table th,#results>table td{border:1px solid;padding:4px 8px;text-align:left}.form-area{display:grid;grid-template-columns:[label] auto [input] auto 1fr;gap:8px}.form-area>label{grid-column:label;align-self:start}.form-area>input{grid-column:input;align-self:start}.form-area>hr{grid-column:1 / 4;width:100%;border:0;border-top:1px solid}.form-area>p,.form-area>h1{grid-column:1 / 4;margin:0}.form-area>h1{margin-bottom:8px}.three-column{grid-column:1 / 4;display:grid;grid-template-columns:[one] 1fr [two] 1fr [three] 1fr;gap:8px}.three-column>.column-one{grid-column:one}.three-column>.column-two{grid-column:two}.three-column>.column-three{grid-column:three}.four-column{grid-column:1 / 4;display:grid;grid-template-columns:[one] 1fr [two] 1fr [three] 1fr [four] 1fr;gap:8px}.four-column>.column-one{grid-column:one}.four-column>.column-two{grid-column:two}.four-column>.column-three{grid-column:three}.four-column>.column-four{grid-column:four}.sample{border:1px solid #000;border-radius:8px;display:inline-block;padding:8px;width:72px;color:#fff;font-weight:900;-webkit-text-stroke:1px #000}#triaxial-visualization{position:relative}#triaxial-visualization .sample{position:absolute}#quadraxial-visualization{position:relative}#quadraxial-visualization .sample{position:absolute;width:96px}#tetrahedral-visualization{position:relative}#tetrahedral-visualization .sample{position:absolute;width:96px}#bilinear-visualization{position:relative}#bilinear-visualization .sample{position:absolute;width:96px}