@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap');
:root{font-family:Arial,'PingFang SC',sans-serif;color:#333e38;background:#f7f5ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0;padding:0 42px}button,input{font:inherit}button{cursor:pointer;color:inherit}header{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedfd4}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;font-family:'Noto Serif SC',serif;font-size:20px;font-weight:600}.seal{background:#a6503f;color:#fff6e8;border-radius:3px;padding:9px 6px;font-size:19px;writing-mode:vertical-rl;letter-spacing:3px;box-shadow:inset 0 0 0 3px #a6503f,inset 0 0 0 4px #e8b5a1}.brand small{display:block;font:9px Arial;letter-spacing:2.7px;margin-top:7px}.header-note{font-family:serif;color:#8a8c7c;letter-spacing:5px;font-size:13px}header button{background:none;border:0;font-size:12px}.intro{display:flex;justify-content:space-between;align-items:center;padding:35px 0 29px}.eyebrow{font-size:10px;letter-spacing:2px;color:#929282}h1{font:500 34px 'Noto Serif SC',serif;margin:13px 0 12px;letter-spacing:3px}.intro p{font-size:12px;color:#909183;margin:0}.stats{text-align:right;border-left:1px solid #dadcd1;padding:0 14px 0 30px}.stats strong{font:36px Georgia;display:block}.stats span{font-size:10px;color:#909183}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:15px}.periods{display:flex;gap:6px}.periods button{border:0;background:none;padding:9px 18px;border-radius:4px;font-size:12px}.periods button.active{background:#384d42;color:white}.search{position:relative;background:#eeeee5;border:1px solid #e3e4da;border-radius:5px;padding:8px 12px;color:#828b7f}.search input{border:0;background:none;outline:none;width:180px;font-size:12px}#results{position:absolute;right:0;top:40px;background:#fffdf7;width:290px;max-height:300px;overflow:auto;z-index:10;box-shadow:0 10px 40px #263c3522;border:1px solid #ddd}#results button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #eee;background:none;padding:13px;font-size:12px}main{border:1px solid #d9ddd1;border-radius:7px;overflow:hidden;background:#fbfaf5;box-shadow:0 5px 25px #384d4205}.canvas-heading{display:flex;justify-content:space-between;padding:14px 18px;background:#f0f1e9;font-size:10px;letter-spacing:1px;color:#8c9386;border-bottom:1px solid #dfe2d5}.canvas-heading span:first-child{color:#586658}#scroll{height:49vh;min-height:300px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:none;cursor:grab}#scroll.dragging{cursor:grabbing}.row{height:77px;display:flex;border-bottom:1px solid #e8e9e0}.row-label{width:120px;flex-shrink:0;padding:16px 18px;background:#f8f8f0;z-index:1;border-right:1px solid #e3e6da;cursor:pointer}.row-label strong{display:block;font:500 14px 'Noto Serif SC',serif}.row-label small{font-size:9px;color:#8f9688;display:block;margin-top:6px}.track{flex:1;position:relative;overflow:hidden;background-image:linear-gradient(to right,#dbe0d755 1px,transparent 1px);background-size:100px}.dynasty{position:absolute;top:12px;height:53px;border-radius:4px;border:1px solid var(--color);background:color-mix(in srgb,var(--color) 15%,#faf9f2);overflow:hidden;min-width:2px}.dynasty-title{position:absolute;top:5px;left:8px;font-size:11px;color:var(--color);white-space:nowrap;font-weight:600;cursor:pointer}.rulers{position:absolute;top:25px;bottom:0;width:100%}.ruler{position:absolute;height:100%;border:0;border-left:1px solid color-mix(in srgb,var(--color) 45%,transparent);background:color-mix(in srgb,var(--color) 18%,transparent);color:#38443c;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:clip;padding:2px 3px;text-align:left}.ruler:hover{background:var(--color);color:white}.pending{font-size:9px;color:#8d9285;padding-left:8px;white-space:nowrap}.axis-wrap{height:52px;display:flex;background:#f1f2e9;border-top:1px solid #d8dece}.axis-label{width:120px;flex-shrink:0;padding:10px 18px;font-size:10px;border-right:1px solid #d8dece}.axis-label small{display:block;font-size:8px;letter-spacing:2px;color:#9aa18f;margin-top:4px}#axis{position:relative;flex:1;overflow:hidden}.tick{position:absolute;padding:18px 0 0 7px;border-left:1px solid #b9c4b1;height:12px;top:0;font-size:10px;color:#6b7866;white-space:nowrap}.bottom{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;font-size:10px;color:#929989;border-top:1px solid #e2e5d8}.bottom i{display:inline-block;width:7px;height:7px;background:#789182;margin-right:6px;border-radius:2px}.divider{margin:0 10px;color:#c3c6b9}.bottom button{border:1px solid #d9dfd0;border-radius:3px;background:#fbfcf6;padding:5px 9px;margin-left:5px}#zoom{display:inline-block;min-width:48px;text-align:center}footer{display:flex;justify-content:space-between;font-size:10px;color:#a1a494;padding:20px 0}dialog{border:1px solid #d4dbcb;background:#fcfaf2;color:#39483d;border-radius:10px;padding:32px;max-width:460px;width:90%;box-shadow:0 30px 100px #172b3322}dialog::backdrop{background:#21382e44;backdrop-filter:blur(3px)}#close{float:right;border:0;background:none;font-size:24px}dialog h2{font:28px 'Noto Serif SC',serif}dialog p{font-size:13px;line-height:1.9;color:#74806e}dialog a{color:#718575}button:focus-visible{outline:2px solid #a6503f;outline-offset:2px}@media(max-width:700px){body{padding:0 14px}header{height:77px}.header-note,.stats,.canvas-heading span:nth-child(2),footer span:last-child{display:none}.intro{padding:25px 0}h1{font-size:25px}.intro p{font-size:11px;line-height:1.8}.toolbar{align-items:stretch;flex-direction:column}.periods{justify-content:space-between}.periods button{padding:8px 12px}.search input{width:85%}.row-label,.axis-label{width:86px;padding-left:11px}#scroll{height:47vh}.bottom{padding:8px;gap:8px}.bottom>span{max-width:120px;line-height:1.6}.bottom button{padding:5px}footer{font-size:9px}.canvas-heading{padding:12px;font-size:9px}}

.has-roster{height:130px}.has-roster .dynasty{height:106px}.name-roster{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;padding:4px 6px;overflow:auto;touch-action:pan-y}.name-roster .ruler{height:auto;flex-shrink:0;border:1px solid #9aa38c44;border-radius:3px;padding:3px 6px;font-size:10px}

.view-options{display:flex;align-items:center;gap:20px;margin:-3px 0 14px;font-size:12px;color:#687765;flex-wrap:wrap}
.view-options>span{font-size:10px;color:#929989;letter-spacing:1px}
.view-options label{display:flex;align-items:center;gap:6px;cursor:pointer}
.view-options input{accent-color:#384d42;width:15px;height:15px;margin:0;cursor:pointer}
#workspace.hide-rulers .row{height:44px}
#workspace.hide-rulers .dynasty{height:28px;top:7px}
#workspace.hide-rulers .rulers,#workspace.hide-rulers #ruler-legend{display:none}
#workspace.hide-rulers .row-label{padding-top:5px;padding-bottom:5px}
#workspace.hide-rulers .row-label small{margin-top:2px}
#workspace.hide-labels .row-label,#workspace.hide-labels .axis-label{display:none}

#fullscreen{margin-left:auto;border:1px solid #d9dfd0;border-radius:4px;background:#fbfcf6;padding:7px 12px;font-size:12px}
#fullscreen-status:empty{display:none}
#timeline-view:fullscreen,#timeline-view.fallback-fullscreen{background:#f7f5ef;padding:20px;display:flex;flex-direction:column;width:100%;height:100%;box-sizing:border-box}
#timeline-view.fallback-fullscreen{position:fixed;inset:0;z-index:1000;height:100dvh}
#timeline-view:fullscreen .view-options,#timeline-view.fallback-fullscreen .view-options{flex-shrink:0;margin:0 0 14px}
#timeline-view:fullscreen #workspace,#timeline-view.fallback-fullscreen #workspace{flex:1;min-height:0;display:flex;flex-direction:column}
#timeline-view:fullscreen #scroll,#timeline-view.fallback-fullscreen #scroll{flex:1;height:auto;min-height:0}
#timeline-view:fullscreen .canvas-heading,#timeline-view:fullscreen .axis-wrap,#timeline-view:fullscreen .bottom,#timeline-view.fallback-fullscreen .canvas-heading,#timeline-view.fallback-fullscreen .axis-wrap,#timeline-view.fallback-fullscreen .bottom{flex-shrink:0}
body.timeline-expanded{overflow:hidden}
@media(max-width:700px){#timeline-view:fullscreen,#timeline-view.fallback-fullscreen{padding:10px}.view-options{gap:12px}}

#workspace{position:relative}
.mouse-guide{position:absolute;width:0;border-left:1px dashed #a6503f;pointer-events:none;z-index:4}
.mouse-guide[hidden]{display:none}
.mouse-guide-year{position:absolute;bottom:2px;left:0;transform:translateX(-50%);background:#a6503f;color:#fffaf0;padding:4px 7px;border-radius:3px;font:11px Arial,sans-serif;white-space:nowrap;box-shadow:0 2px 6px #543a2520}

#workspace:not(.hide-events) .row.has-events{height:135px}
#workspace:not(.hide-events) .row.has-events.has-roster{height:188px}
#workspace.hide-rulers:not(.hide-events) .row.has-events{height:102px}
.history-event{position:absolute;bottom:28px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;background:#f4eee1;color:#936438;border:1px solid #ddc9a6;border-radius:3px;padding:3px 5px;z-index:2;text-align:left}
.history-event:hover{background:#eadac0;z-index:3}
.history-event[hidden]{display:none}

.row[hidden]{display:none!important}
.row-label{position:relative;padding-right:27px}
.hide-dynasty{position:absolute;right:5px;top:12px;width:20px;height:20px;padding:0;border:1px solid #d9dfd0;border-radius:4px;background:#f2f4eb;color:#75816e;font-size:15px;line-height:18px}
.hide-dynasty:hover{background:#e4e9da;color:#384d42}
#workspace.hide-rulers .hide-dynasty{top:11px}
.hidden-dynasties{padding:12px 4px;font-size:11px;color:#84907c;flex-shrink:0}
.hidden-dynasties[hidden]{display:none}
#hidden-dynasty-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;max-height:110px;overflow:auto}
#hidden-dynasty-list button{background:#eef0e6;border:1px solid #d9dfd0;border-radius:4px;padding:6px 10px;font-size:11px;color:#586b50}
#hidden-dynasty-list button:hover{background:#dde5d4}
.dynasty-label-content:focus-visible{outline:2px solid #a6503f;outline-offset:2px}

.dynasty-group{display:block;font-size:9px;line-height:13px;color:#8e795d;margin-top:3px;white-space:nowrap;letter-spacing:0}
#workspace.hide-rulers .row{height:58px}
#workspace.hide-rulers .dynasty{top:14px}
#workspace.hide-rulers .hide-dynasty{top:17px}
#workspace.hide-rulers .dynasty-group{margin-top:1px}
@media(max-width:700px){.dynasty-group{font-size:8px;letter-spacing:-.4px}.row-label{padding-left:7px;padding-right:22px}}

.boundary-event{position:absolute;max-width:165px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 5px;border:1px solid #ccd6c5;border-radius:3px;background:#f8faf2;color:#546d50;font-size:10px;z-index:2;text-align:left}
.boundary-start{top:0}.boundary-end{top:29px;background:#fbf3ed;color:#93674f;border-color:#dfc9b8}
.boundary-event[hidden]{display:none}.boundary-event:hover{z-index:5;filter:brightness(.96)}