:root{color-scheme:dark;--bg:#1b2838;--panel:#16222f;--input:#0d151d;--text:#d6dee5;--muted:#9aaebf;--blue:#66c0f4;--line:#2a3d4f;--label:245px;--plot:720px;font-family:system-ui,'Segoe UI','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{background:#263e52;border:1px solid #39556c;color:var(--text);padding:9px 13px;border-radius:2px;cursor:pointer}button:hover{background:#365774;color:white}button:disabled{opacity:.42;cursor:default}a{color:var(--blue);text-underline-offset:4px}input{min-width:0;background:var(--input);color:var(--text);border:1px solid #3a4c5d;border-radius:2px;padding:11px 12px;width:100%}input::placeholder{color:#8a9cab}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}h1,h2,h3,p{margin:0}h2{font-weight:500;font-size:1rem}h3{font-size:1.15rem;font-weight:400}.masthead{height:64px;background:#141e29;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1500px)/2));border-bottom:1px solid #263748}.brand{display:flex;gap:12px;align-items:center;font-size:.9rem;letter-spacing:.13em;color:#b7cad8}.brand svg{width:29px;fill:none;stroke:var(--blue);stroke-width:2}.edition{color:var(--muted);font-size:.875rem}main{max-width:1556px;margin:0 auto;padding:38px 28px 0}.page-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:.75rem;letter-spacing:.16em;color:var(--muted);margin-bottom:9px}h1{font-size:2rem;font-weight:400;letter-spacing:.07em;color:var(--blue)}.save-state{font-size:.875rem;color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:24px;align-items:start}.sidebar{grid-column:2;grid-row:1;display:grid;gap:16px}.panel{background:var(--panel);padding:20px;border-top:1px solid #2e4255}.panel h2{margin-bottom:15px}.search-wrap{position:relative}.search-wrap svg{position:absolute;left:12px;top:14px;width:18px;height:18px;stroke:#8aa6ba;fill:none;stroke-width:1.7}.search-wrap input{padding-left:38px;font-size:.9rem}.help{font-size:.875rem;line-height:1.7;color:var(--muted);margin-top:10px}details{margin-top:16px;border-top:1px solid var(--line);padding-top:15px}summary{cursor:pointer;color:#b9cfde;font-size:.875rem}summary span{float:right;color:#8fabbf}.candidate,.catalog-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 8px}.candidate strong,.catalog-item strong{font-size:.9375rem;display:block;font-weight:500}.candidate small,.catalog-item small{display:block;color:var(--muted);font-size:.8rem;margin-top:5px}.candidate.selected{background:#294659;box-shadow:inset 2px 0 var(--blue)}#results:empty{display:none}#results,#catalog-list{max-height:360px;overflow:auto;scrollbar-color:#3b566b var(--panel)}#catalog-list{margin-top:12px}.optional{font-size:.75rem;color:var(--muted);margin-left:5px}.birth-wrap{display:flex;gap:10px;align-items:center}.birth-wrap input{max-width:160px}.guide p{font-size:.875rem;line-height:1.9;color:var(--muted);margin-bottom:12px}.guide p:last-child{margin-bottom:0}.timeline-section{grid-column:1;grid-row:1;min-width:0}.timeline-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 0 18px}.timeline-top h2{font-size:1rem}.timeline-top h2 span{display:inline-block;font-size:.8rem;background:#2a3d50;color:#abc7da;margin-left:8px;padding:2px 7px}.legend{font-size:.75rem;color:var(--muted);display:flex;gap:16px}.legend span{display:flex;align-items:center;gap:6px}.legend i{display:inline-block;width:16px;height:3px;background:#5895b8}.legend .you{background:#d2b876}.timeline{position:relative;border:1px solid #304456;background:var(--panel);min-width:0}.fixed-head{position:sticky;top:0;z-index:6;background:#1b2d3e;box-shadow:0 3px 8px #07101955}.timeline-row{display:grid;grid-template-columns:var(--label) minmax(0,1fr);min-height:84px;border-bottom:1px solid #293b4c;position:relative}.timeline-row:last-child{border-bottom:0}.row-label{display:flex;align-items:center;gap:5px;background:#182737;min-width:0;border-right:1px solid #314557;padding:10px 8px}.axis .row-label{color:var(--muted);font-size:.8rem;padding-left:18px}.artist-name{flex:1;min-width:0;text-align:left;padding:7px 3px;border:0;background:transparent}.artist-name:hover{background:transparent;color:var(--blue)}.artist-name strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;font-weight:500}.artist-name small{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}.handle,.row-more{border:0;background:transparent;padding:6px;color:#8da9bb;flex-shrink:0}.handle{cursor:grab;touch-action:none;font-size:1.15rem;user-select:none}.row-more{font-size:1.25rem;padding:4px 7px}.plot-viewport{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}.plot-viewport::-webkit-scrollbar{display:none}.axis .plot-viewport{scrollbar-width:thin;scrollbar-color:#45647a #172534}.axis .plot-viewport::-webkit-scrollbar{display:block;height:6px}.axis .plot-viewport::-webkit-scrollbar-thumb{background:#45647a}.plot{position:relative;width:var(--plot);height:83px;isolation:isolate}.axis{min-height:64px}.axis .plot{height:63px}.gridline{position:absolute;top:0;bottom:0;width:1px;background:#2b3f51;z-index:-1}.gridline.current{background:#476178}.tick{position:absolute;top:22px;transform:translateX(-50%);font-size:.875rem;color:#9fb6c7;font-variant-numeric:tabular-nums}.tick.current{color:var(--blue)}.bar{position:absolute;top:30px;height:5px;background:#5996ba;min-width:2px;box-shadow:0 0 0 1px #0d192330}.bar:before,.bar:after{content:'';position:absolute;top:-3px;width:11px;height:11px;border:2px solid #88c5e6;background:#20384b;border-radius:50%}.bar:before{left:-5px}.bar:after{right:-5px}.bar.active:after{background:#88c5e6}.year-label{position:absolute;top:47px;font-size:.75rem;color:#a5c0d2;font-variant-numeric:tabular-nums;white-space:nowrap}.year-label.end{transform:translateX(-100%)}.year-label.short-start{top:10px}.self-row .row-label{color:#e4cf9c;padding-left:20px;font-size:.875rem}.self-row small{display:block;font-size:.75rem;color:#b8aa8a;margin-top:5px}.self-row .bar{background:#c5af78}.self-row .bar:before,.self-row .bar:after{border-color:#e3cf9d;background:#2b3034}.self-row .year-label{color:#c8b98e}.self-row .plot{background:#d1bc7805}.artist-row:hover .row-label{background:#213448}.artist-row:hover .bar{background:#8bd0f5}.artist-row.dragging{opacity:.5}.artist-row.drop-target{box-shadow:inset 0 3px var(--blue)}.empty{text-align:center;padding:55px 20px 60px;border:1px solid #2c4052;border-top:0;background:#172533}.empty>svg{width:94px;stroke:#507a97;stroke-width:2;fill:#172533;margin-bottom:22px}.empty h3{color:#beced9}.empty p{margin:12px auto 20px;color:var(--muted);font-size:.875rem;line-height:1.8}.suggestions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.suggestions button{font-size:.8rem;padding:7px 10px;background:#22384b}.timeline-footer{display:flex;justify-content:space-between;align-items:start;gap:20px;margin:18px 0 34px}.timeline-footer p{font-size:.75rem;color:var(--muted);line-height:1.9}.timeline-footer span{color:#829aaf}.quiet{background:transparent;border-color:#3a4b5d;font-size:.8rem;white-space:nowrap;color:var(--muted)}.site-footer{border-top:1px solid #304254;margin-top:48px;padding:22px 0 30px;display:flex;gap:20px;justify-content:space-between;color:#829aaf;font-size:.75rem}.site-footer>span:first-child{letter-spacing:.12em}.notice{background:#382f25;color:#e3cba9;padding:12px 16px;margin-bottom:20px;font-size:.875rem}.error{font-size:.8rem;color:#ffb7ad;margin-top:10px}.muted{color:var(--muted)}dialog{max-width:520px;width:calc(100% - 32px);padding:30px;background:#1c2d3f;border:1px solid #45627a;color:var(--text);box-shadow:0 20px 80px #0008}dialog::backdrop{background:#08111bc7}dialog h2{font-size:1.35rem;line-height:1.5;margin-right:20px;overflow-wrap:anywhere}dialog p{margin:14px 0;line-height:1.8;font-size:.9rem}.dialog-close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.5rem}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}dialog a{font-size:.9rem}.danger{color:#e9b8b4;border-color:#725154;background:#452f36}.danger:hover{background:#61414a}.age-note{color:#e3cf9d}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:15;background:#30485e;border:1px solid #617d90;padding:12px 16px;box-shadow:0 4px 20px #0005;max-width:calc(100vw - 32px);width:max-content;font-size:.875rem}.toast button{margin-left:15px;padding:4px 8px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(min-width:1600px){:root{--label:270px}}@media(max-width:1100px){:root{--label:210px}.workspace{grid-template-columns:minmax(0,1fr) 260px;gap:18px}.panel{padding:16px}.legend{gap:9px}}@media(max-width:899px){.workspace{display:flex;flex-direction:column;gap:22px}.sidebar{width:100%;grid-template-columns:minmax(0,1fr) minmax(180px,.6fr);gap:12px}.guide{display:none}.timeline-section{width:100%}.panel{padding:16px}.page-title{margin-bottom:22px}.save-state{font-size:.75rem}.masthead{padding:0 20px}main{padding:26px 20px 0}.edition{display:none}}@media(max-width:560px){:root{--label:142px}.masthead{height:52px;padding:0 16px}.brand{font-size:.75rem}.brand svg{width:24px}main{padding:24px 12px 0}.page-title{align-items:center}h1{font-size:1.65rem}.eyebrow{font-size:.65rem}.save-state{max-width:108px;text-align:right;font-size:.7rem}.sidebar{grid-template-columns:1fr}.panel{padding:16px}.birth-panel{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:0 10px}.birth-panel h2{margin:0}.birth-panel .help{grid-column:1/-1}.birth-panel .error{grid-column:1/-1}.birth-wrap{gap:6px}.birth-wrap input{padding:9px;font-size:1rem}.timeline-top{align-items:center}.timeline-top h2{font-size:.875rem}.legend{gap:8px;font-size:.65rem}.legend i{width:10px}.row-label{padding:8px 3px;gap:0}.artist-name strong{font-size:.8rem}.artist-name small{font-size:.65rem}.handle{padding:6px 3px;font-size:1rem}.row-more{padding:6px 3px}.self-row .row-label{padding-left:12px}.timeline-footer{flex-direction:column;gap:14px}.timeline-footer .quiet{align-self:flex-end}.site-footer{margin-top:15px;flex-direction:column;gap:8px}.empty{padding:35px 15px}.empty h3{font-size:1rem}.tick{font-size:.85rem}.timeline-row{min-height:80px}.plot{height:79px}.axis{min-height:64px}.dialog-actions button{font-size:.875rem}dialog{padding:24px}.toast{bottom:15px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .12s,color .12s}.bar{transition:background .12s}}

/* Compact phone overview: keep the full time range within the viewport. */
@media(max-width:560px){
 :root{--label:104px}
 .timeline-row{min-height:64px}.plot{height:63px}
 .row-label{padding:5px 3px;gap:1px}
 .artist-name{padding:6px 2px}
 .artist-name strong{font-size:10px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .artist-name small{font-size:9px;line-height:1.2;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .handle{width:20px;padding:10px 2px;font-size:15px}
 .row-more{display:none}
 .axis{min-height:40px}.axis .plot{height:39px}
 .axis .row-label{padding-left:8px;font-size:10px}
 .tick{top:13px;font-size:9px}
 .axis .plot-viewport{scrollbar-width:none}.axis .plot-viewport::-webkit-scrollbar{display:none}
 .bar{top:26px;height:4px}.bar:before,.bar:after{width:8px;height:8px;top:-2px}
 .bar:before{left:-4px}.bar:after{right:-4px}
 .year-label{top:40px;font-size:9px}.year-label.short-start{top:9px}
 .self-row .row-label{padding-left:8px;font-size:11px}.self-row small{font-size:9px}
 .timeline-footer>p{display:none}
}