.polytype-comparison{color:#28465a}.polytype-summary h2{font-size:19px;margin:0 0 10px}.polytype-summary p{font-size:13px;line-height:1.85;color:#536e7f;margin:0 0 20px}.polytype-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);grid-template-areas:"facts interactive";gap:26px;align-items:start}.polytype-interactive{grid-area:interactive;min-width:0}.polytype-facts{grid-area:facts;min-width:0}.polytype-facts h3{font-size:16px;font-weight:500;margin:0 0 13px}.polytype-table-wrap{overflow-x:auto}.polytype-table{border-collapse:collapse;width:100%;font-size:13px}.polytype-table th,.polytype-table td{border-bottom:1px solid #e1e8ed;padding:11px 10px;text-align:left;font-weight:400;white-space:nowrap}.polytype-table th:first-child{font-weight:500}.polytype-table th:nth-child(4),.polytype-table td:nth-child(4),.polytype-table th:nth-child(5),.polytype-table td:nth-child(5){text-align:right;font-variant-numeric:tabular-nums}.polytype-table thead{font-size:13px;color:#637987}.polytype-table i,.polytype-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.polytype-sequence{font-size:14px;letter-spacing:0}.polytype-controls{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:0 0 14px}.polytype-controls label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#5e7484}.polytype-controls select{border:1px solid #c6d2da;background:white;padding:7px 10px;color:#2a485e;font:inherit;font-size:13px;min-width:72px;border-radius:3px;height:36px}.polytype-controls button{font-size:13px;min-height:36px;padding:7px 10px;border-radius:3px}.polytype-modes{display:flex;gap:6px}.polytype-modes [aria-pressed=true]{color:var(--accent,#28789c);border-color:var(--accent,#28789c);background:var(--tint,#edf3f7)}.polytype-legend{display:flex;gap:10px 18px;flex-wrap:wrap;font-size:13px;color:#547083}.polytype-legend span{display:inline-flex;align-items:center}.polytype-geometry{background:#f8fafc;border:1px solid #e4ebef;margin-top:14px;max-height:400px;overflow:hidden}.polytype-geometry svg{display:block;width:100%;max-height:400px}.polytype-geometry text{font-family:inherit;font-size:14px;fill:#526f83}.polytype-geometry-note{font-size:13px;line-height:1.8;color:#4b697d;margin:12px 0}.polytype-footnote,.polytype-source{font-size:13px;line-height:1.85;color:#607a8b;margin:14px 0}.polytype-source a{color:var(--accent,#28789c)}.polytype-symmetry{margin-top:18px;background:#f4f7fa;padding:12px 14px;font-size:13px;color:#526f81}.polytype-symmetry summary{cursor:pointer;font-size:13px;color:#35586f}.polytype-symmetry-note{font-size:13px;line-height:1.85;margin:12px 0 0}.polytype-symmetry-note b{font-weight:500;color:#35586f}@media(max-width:1000px){.polytype-layout{grid-template-columns:1fr;grid-template-areas:"interactive" "facts";gap:26px}.polytype-facts{max-width:none}.polytype-geometry{max-height:390px}.polytype-geometry svg{max-height:390px}}@media(max-width:600px){.polytype-controls{gap:10px}.polytype-controls label{flex:1}.polytype-controls select{width:100%;min-height:40px}.polytype-table th,.polytype-table td{padding:11px 9px;font-size:13px}.polytype-table .polytype-sequence{font-size:14px;letter-spacing:0}.polytype-geometry svg{min-height:240px}.polytype-geometry text{font-size:20px}.polytype-legend{gap:10px 16px}.polytype-summary p,.polytype-geometry-note{font-size:13px}.polytype-modes button{font-size:13px;min-height:40px}.polytype-controls>button{min-height:40px}.polytype-footnote,.polytype-source{font-size:13px}.polytype-symmetry{padding:12px}.polytype-layout{gap:24px}}

.polytype-repeat {
  display: flex;
  align-items: end;
  gap: 12px;
  border: 0;
  border-top: 1px solid #e0e8ee;
  padding: 8px 0 0;
  margin: 0 0 14px;
  min-width: 0;
}
.polytype-repeat legend {padding-right: 8px; color: #3e5f76; font-size: 13px;}
.polytype-repeat label {display: grid; gap: 4px; color: #516b80; font-size: 13px;}
.polytype-repeat select {height: 36px; min-width: 58px; color: #2a485e; border: 1px solid #c6d2da; border-radius: 3px; background: white; padding: 0 10px;}
.polytype-geometry canvas {display: block; width: 100%; height: 360px; touch-action: none; cursor: grab;}
.polytype-geometry canvas:active {cursor: grabbing;}
.polytype-geometry canvas:focus-visible {outline: 2px solid #28789c; outline-offset: -3px;}
@media(max-width:600px) {
  .polytype-repeat label {flex: 1;}
  .polytype-repeat select {width: 100%; height: 40px;}
  .polytype-geometry canvas {height: 270px;}
}