:root{font-family:Arial,Helvetica,sans-serif;color:#151515;background:#fafafa}*{box-sizing:border-box}body{margin:0}main{padding:8px;max-width:1440px;margin:auto}header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:10px}h1{font-size:19px;font-weight:600;margin:0 0 2px}header p{font-size:12px;color:#666;margin:0}form label{display:block;font-size:12px;margin-bottom:4px}form>div{display:flex;gap:7px;align-items:center}input,button{font:12px Arial;border:1px solid #ddd;border-radius:10px;background:#fafafa;padding:6px 8px;color:#151515}input{width:100px}button{cursor:pointer}:focus-visible{outline:2px solid #2563eb;outline-offset:2px}#legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:#eee;border:1px solid #d5d5d5;border-radius:17px;padding:12px;margin-bottom:11px}.legend-heading{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap}.swatch{width:13px;height:13px;flex:none}.color-name{font-size:11px;color:#666}.event{font-size:12px;line-height:1.4;margin:8px 0 0}.field{display:grid;grid-template-columns:47px minmax(0,1fr) 28px}.centuries{display:grid;grid-template-rows:repeat(21,1fr);font-size:8px;color:#666;text-align:right;padding-right:5px}.centuries span{display:flex;align-items:center;justify-content:flex-end;white-space:nowrap}.field svg{display:block;width:100%;height:auto;aspect-ratio:100 / 21;overflow:visible}.model{display:flex;align-items:center;justify-content:center;border:1px solid #ddd;border-bottom:0;font-size:12px;writing-mode:vertical-rl}.field:last-child .model{border-bottom:1px solid #ddd}.axis{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#666;margin:8px 28px 0 47px}.hint,.back{font-size:11px;color:#666}.hint{margin:14px 0 10px}.back{display:inline-block;padding:8px 0;color:#444}#status:empty{display:none}#status{font-size:12px}svg rect{cursor:pointer}@media(max-width:480px){h1{font-size:16px}header{gap:8px}input{width:70px}#legend{gap:8px;padding:10px}.event{font-size:11px}.field{grid-template-columns:38px minmax(0,1fr) 23px}.centuries{font-size:6px;padding-right:3px}.model{font-size:11px}.axis{margin-left:38px;margin-right:23px;font-size:9px}}.field{position:relative}.field svg{grid-column:2}.model{grid-column:3}.centuries{position:absolute;inset:0 auto 0 0;width:47px;line-height:1;min-height:0}.centuries span{min-height:0}@media(max-width:480px){.centuries{width:38px}}.field{container-type:inline-size}.centuries{font-size:min(8px,.8cqw)}