#reconstruction-board{align-self:center;min-height:0;color:#272727}
.recon-whiteboard{background:#fffcf3;border:9px solid #a3bad9;border-radius:18px;padding:22px 30px;box-shadow:0 12px 0 #10273e,0 24px 40px #0002;background-image:radial-gradient(#a3bad947 1px,transparent 1px);background-size:22px 22px}
.recon-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}.recon-heading h3{font-size:25px;margin:0}.recon-heading small{font-size:13px;color:#666}
.recon-row{display:grid;grid-template-columns:125px 1fr;align-items:center;gap:22px;padding:13px 0;border-top:1px solid #a3bad973}.recon-period{font-weight:800;font-size:17px;display:flex;align-items:center;gap:12px}.recon-period i{width:13px;height:13px;border-radius:50%;background:var(--row-color);box-shadow:0 0 0 5px #a3bad91a}
.recon-sentence{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:20px}.recon-slot{font:700 17px inherit;font-family:inherit;font-size:17px;font-weight:700;min-width:150px;min-height:47px;border:2px dashed #8297b5;border-radius:9px;background:#ecf0f799;color:#677b96;padding:9px 14px;cursor:pointer}.recon-slot.filled{background:var(--row-color);border:2px solid transparent;color:#272727}.recon-slot.over{outline:3px solid #f4a95d;outline-offset:3px}.recon-slot:focus-visible,.recon-chip:focus-visible{outline:3px solid #f4a95d;outline-offset:3px}
.recon-tray{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:white}.recon-tray-label{font-size:15px;color:#d3dfef;min-width:125px}.recon-chips{display:flex;gap:12px;flex-wrap:wrap;flex:1}.recon-chip{border:0;border-radius:5px;background:#cfd982;box-shadow:0 4px 0 #0003;padding:12px 19px;font:700 16px Arial,"Microsoft YaHei",sans-serif;color:#272727;cursor:grab;transform:rotate(-1deg)}.recon-chip:nth-child(2n){background:#fbafaa;transform:rotate(1deg)}.recon-chip:nth-child(3n){background:#f4a95d}.recon-chip.selected{outline:3px solid white;outline-offset:4px}.recon-chip:disabled{opacity:.25;cursor:default;transform:none;box-shadow:none}
.recon-actions{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:19px;color:#d3dfef}.recon-feedback{font-size:14px;line-height:1.5;margin:0}.recon-buttons{display:flex;gap:10px;flex-shrink:0}.recon-buttons button{font:700 15px Arial,"Microsoft YaHei",sans-serif;padding:11px 18px;border-radius:8px;border:1px solid #a3bad9;background:transparent;color:white;cursor:pointer}.recon-buttons button:last-child{background:#cfd982;color:#18334d;border-color:#cfd982}
html[lang=en] .recon-sentence{font-size:18px}html[lang=en] .recon-slot{min-width:140px;font-size:16px}
.recon-whiteboard[data-result=success]{border-color:#70b68a}.recon-whiteboard[data-result=wrong]{border-color:#dd706e}.recon-whiteboard[data-result=incomplete]{border-color:#e6ad4c}
.recon-heading.recon-result-banner{padding:13px 16px;border-radius:9px;background:#e1f3e6;color:#145c37;border-left:6px solid #248750}.recon-result-banner h3{font-size:clamp(20px,2vw,28px);line-height:1.25}.recon-result-banner small{color:inherit;max-width:290px;line-height:1.4}
[data-result=wrong] .recon-result-banner{background:#ffe5e3;color:#9b262c;border-color:#c83f45}[data-result=incomplete] .recon-result-banner{background:#fff0cc;color:#795000;border-color:#be800e}
@media(max-height:780px) and (min-width:901px){.recon-whiteboard{padding:16px 23px}.recon-heading{margin-bottom:8px}.recon-row{padding:10px 0}.recon-tray{margin-top:16px}.recon-actions{margin-top:14px}}
@media(max-width:900px){.recon-row{grid-template-columns:1fr;gap:10px}.recon-whiteboard{padding:20px 16px}.recon-heading,.recon-actions{align-items:flex-start;flex-direction:column}.recon-sentence{font-size:17px}.recon-slot{min-width:110px}.recon-tray-label{width:100%}.recon-chip{padding:12px}.recon-buttons{flex-wrap:wrap}}