/* Four little pieces of colored wax, on the same warm paper as the report. */
.traits-paper{border-color:#e4ddce;border-radius:24px 28px 23px 26px;background-color:#fffefa}
.trait-chart{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:52px;row-gap:30px;margin-top:28px}
.trait-chart .trait-row{display:block;min-width:0;break-inside:avoid}
.trait-heading{display:flex;align-items:center;gap:12px;min-width:0;margin-bottom:12px}
.trait-heading .trait-letter{display:grid;place-items:center;flex:none;width:38px;height:38px;min-width:0;margin:0;background:var(--trait-paper);border:1px solid var(--trait-edge);border-radius:12px 15px 11px 14px;box-shadow:inset 0 -3px 0 #ffffff80;color:var(--trait-ink);font-family:Georgia,serif;font-size:23px;font-weight:700;line-height:1;transform:rotate(-4deg)}
.trait-row:nth-child(even) .trait-letter{transform:rotate(4deg);border-radius:14px 11px 15px 12px}
.trait-label{flex:1;min-width:0}
.trait-heading .trait-name{display:block;font-size:16px;line-height:1.5;font-weight:750;color:#40372f;text-align:left}
.trait-answered{display:block;font-size:11px;line-height:1.6;color:#73604e}
.trait-value{display:inline-flex;align-items:baseline;justify-content:center;gap:4px;flex:none;min-width:76px;padding:5px 8px;background:var(--trait-paper);color:var(--trait-ink);border-radius:12px 15px 13px 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.trait-value strong{font-size:24px;line-height:1.2;font-weight:750;color:inherit;text-align:center}
.trait-value small{font-size:10px;font-weight:500}
.trait-row .trait-bar{display:flex;width:100%;height:15px;gap:2px;padding:2px;background:#fffdf8;border:.5px solid #d7cbb9;border-radius:7px 8px 6px 8px;overflow:hidden;box-shadow:0 2px 3px #705a3c0a}
.trait-segment{position:relative;display:block;flex:1;min-width:0;height:100%;background:var(--trait-paper);border-radius:6px 8px 6px 7px;overflow:hidden}
.trait-segment:nth-child(even){border-radius:8px 6px 7px 6px}
.trait-segment .trait-fill{position:relative;display:block;height:100%;min-width:0;background:var(--trait-fill);border:.5px solid var(--trait-edge);border-radius:inherit;overflow:hidden;box-shadow:inset 0 2px 0 #ffffff55}
.trait-fill:after{content:'';position:absolute;inset:0;background:url('/assets/zhini/wax.svg') center/180px 100px;opacity:.6;pointer-events:none}
.trait-unknown .trait-bar{border-style:dashed;background:transparent;box-shadow:none}
.trait-unknown .trait-segment{background:#f2eee6}
.trait-unknown .trait-value{background:#f2eee6;color:#695c50}
.trait-unknown .trait-value strong{font-size:14px}
@media(max-width:900px){.trait-chart{column-gap:28px}.trait-heading{gap:9px}.trait-heading .trait-name{font-size:15px}.trait-value{min-width:69px}}
@media(max-width:760px){.trait-chart{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:25px}.trait-heading{gap:10px;margin-bottom:10px}.trait-heading .trait-letter{width:35px;height:35px;font-size:21px}.trait-heading .trait-name{font-size:15px}.trait-value{min-width:77px}.trait-row .trait-bar{height:14.5px}.trait-chart+.chart-note{margin-top:26px}}
@media(max-width:359px){.trait-heading{gap:8px}.trait-heading .trait-letter{width:31px;height:33px;font-size:20px}.trait-heading .trait-name{font-size:14px}.trait-value{min-width:66px;padding:5px 6px}.trait-value strong{font-size:22px}.trait-value small{font-size:9px}}
@media print{.trait-chart{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}.trait-row{print-color-adjust:exact;-webkit-print-color-adjust:exact}.trait-row .trait-bar{box-shadow:none}.trait-heading .trait-name{font-size:13px}.trait-value strong{font-size:20px}}