:root{font-family:'Songti SC','Noto Serif CJK SC',Georgia,serif;color:#303a36;background:#fafcfb;font-synthesis:none;color-scheme:light;--muted:#697b76;--accent:#986b50}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible{outline:2px solid #637d78;outline-offset:5px}[hidden]{display:none!important}
body{background:linear-gradient(to bottom,#fafcfb 0%,#fafcfb 74%,#eff6f7 89%,#c8e2ec 100%)}
#space{position:fixed;inset:0;overflow:hidden;perspective-origin:50% 50%;touch-action:none;cursor:grab;user-select:none}#space.dragging{cursor:grabbing}#world{position:absolute;left:50%;top:49%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.image-card{position:absolute;left:0;top:0;padding:0;border:0;background:transparent;transform-style:preserve-3d;backface-visibility:hidden;cursor:pointer;outline:none}.image-card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;box-shadow:0 3px 9px #273b4210}.image-card:focus-visible{outline:2px solid #405e6a;outline-offset:7px}.image-card .caption{position:absolute;left:50%;top:100%;margin-top:7px;white-space:nowrap;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:13px;line-height:1.4;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .2s}.image-card:hover .caption{opacity:1}.image-card.is-selected .caption{opacity:0}
.year-ring{position:absolute;border:1px solid #738f861a;border-radius:50%;pointer-events:none;backface-visibility:hidden}.ring-label{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-family:Georgia,serif;font-size:28px;letter-spacing:6px;color:#7b90855c}
.horizon{position:fixed;inset:auto 0 0;height:17vh;pointer-events:none;background:linear-gradient(transparent,#c0e0ee44);z-index:2}
.masthead{position:fixed;top:29px;left:32px;z-index:10}.masthead>button{display:flex;gap:13px;align-items:center;border:0;background:none;padding:0;text-align:left;font-size:23px;letter-spacing:2px}.masthead svg{color:#657a70;flex-shrink:0}.masthead small{display:block;font-family:Georgia,serif;font-size:10px;letter-spacing:2.2px;line-height:2.5}.masthead p{margin:9px 0 0 48px;color:var(--muted);font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;letter-spacing:.5px}
.search-shell{position:fixed;z-index:12;right:32px;top:32px;width:292px;max-width:calc(100vw - 36px)}#search-form{display:flex;align-items:center;gap:11px;height:44px;width:100%;padding:0 15px;border:1px solid #aeb8b2;border-radius:26px;background:#fafcfbf0;transition:box-shadow .25s,border-color .25s}#search-form:focus-within{border-color:#637d78;box-shadow:0 0 0 3px #7c979313}#search-form>svg{flex-shrink:0;color:#71837b}#search{min-width:0;width:100%;height:100%;padding:0;border:0;outline:none;background:transparent;font-size:15px}#search::placeholder{color:#819087}#search::-webkit-search-cancel-button{display:none}.enter,#clear{border:0;background:none;font-family:Arial,sans-serif;font-size:20px;padding:5px;color:#71837b}
#suggestions{margin-top:10px;border:1px solid #c4cec7;background:#fafcfbfa;border-radius:15px;padding:6px;box-shadow:0 10px 36px #263d4810;max-height:min(460px,65vh);overflow:auto}.result{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;border-radius:9px;padding:9px;font-size:14px;min-height:60px}.result img{width:42px;height:42px;object-fit:cover}.result span{flex:1}.result small{display:block;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;color:#74867c;margin-top:4px}.result.active,.result:hover{background:#eaf0ec}.empty{margin:14px;font-size:14px;line-height:1.7;color:var(--muted)}
.time-note{position:fixed;left:34px;bottom:115px;pointer-events:none;color:#596d62;z-index:3;transition:opacity .3s}#period{font-family:Georgia,serif;font-size:13px;letter-spacing:3px}.time-note p{font-size:16px;letter-spacing:2px;margin:10px 0 0}.selection{position:fixed;left:50%;bottom:105px;transform:translateX(-50%);z-index:5;text-align:center;max-width:92vw}#selection-meta{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;color:#63776d;letter-spacing:1px;margin:0 0 7px}#selection-title{font-size:20px;font-weight:400;letter-spacing:2px;margin:0 0 9px}.photo-controls{display:flex;gap:16px;align-items:center;justify-content:center}.photo-controls button{border:0;background:#fafcfbcc;border-radius:20px;padding:7px 11px;font-size:17px;color:#536e61}#back{font-size:13px;background:transparent}kbd{font:10px Arial,sans-serif;border:1px solid #85989580;border-radius:3px;padding:2px 4px;margin-left:7px}
.footer{position:fixed;bottom:16px;left:0;right:0;z-index:8;display:flex;flex-direction:column;align-items:center;gap:13px;pointer-events:none}#timeline{display:flex;align-items:center;gap:4px;max-width:calc(100vw - 32px);padding:5px 8px;border:1px solid #889c9038;border-radius:32px;background:#fafcfbe8;backdrop-filter:blur(12px);pointer-events:auto;overflow:auto;scrollbar-width:none}#timeline button{background:transparent;border:0;border-radius:22px;padding:10px 17px;white-space:nowrap;font-family:Georgia,'Songti SC',serif;font-size:14px;color:#65786d;transition:background .25s,color .25s}#timeline button.active{background:#3e5649;color:white}#timeline button:hover:not(.active){background:#e7eee9}#timeline small{font-family:-apple-system,sans-serif;font-size:10px;margin-left:7px;opacity:.65}.instructions{margin:0;text-align:center;color:#536e7a;font-size:12px;letter-spacing:.5px;pointer-events:none}.instructions span{padding:0 8px;opacity:.55}.focused .time-note{opacity:0}.focused .instructions{opacity:.45}.flying #space{cursor:progress}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.no-script{position:fixed;inset:45% 0;text-align:center}
@media(max-width:700px){.masthead{top:21px;left:20px}.masthead>button{font-size:20px;gap:9px}.masthead svg{width:29px;height:29px}.masthead small{font-size:9px;line-height:2.3}.masthead p{margin:4px 0 0 38px;font-size:11px}.search-shell{top:110px;left:20px;right:20px;width:auto;max-width:none}#search-form{height:42px;background:#fafcfbe8}#search{font-size:16px}#world{top:47%}.time-note{left:22px;bottom:126px}#period{font-size:11px}.time-note p{font-size:14px}.selection{bottom:112px}#selection-title{font-size:18px}#timeline{gap:0;padding:4px}#timeline button{padding:10px 13px}#timeline small{display:none}.footer{bottom:19px;gap:14px}.instructions{font-size:11px;letter-spacing:0}.instructions span{padding:0 4px}.photo-controls{gap:24px}}
@media(max-height:600px) and (min-width:701px){.masthead{top:18px}.search-shell{top:18px}.selection{bottom:94px}.time-note{bottom:97px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#space{mask-image:linear-gradient(transparent,black 17%,black 82%,transparent 99%)}body.focused #space{mask-image:none}.masthead{pointer-events:none}.masthead>button{pointer-events:auto}.masthead p{background:#fafcfbe0;display:inline-block;padding:2px 5px 2px 0}.footer{background:linear-gradient(transparent,#d1e8f2b0);padding-top:10px}.focused .image-card:not(.is-selected){visibility:hidden}

#world{top:50%}.selection{width:min(440px,92vw)}#back{white-space:nowrap}.masthead>button{background:#fafcfbe8;border-radius:5px}.masthead{backdrop-filter:blur(2px)}

/* ---- Add photo button: matches timeline pill style, right-aligned ---- */
.add-photo-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid #889c9038;border-radius:22px;padding:9px 15px;font-family:Georgia,'Songti SC',serif;font-size:13px;color:#65786d;white-space:nowrap;transition:background .25s,color .25s,border-color .25s;pointer-events:auto;margin-left:6px}
.add-photo-btn:hover{background:#e7eee9;border-color:#889c9055}
.add-photo-btn:active{background:#dce8e2}
.add-photo-btn svg{width:14px;height:14px;flex-shrink:0}

/* ---- Upload preview modal ---- */
.upload-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#00000055;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
.upload-modal.open{opacity:1;pointer-events:auto}
.upload-modal-box{background:#fafcfb;border-radius:16px;padding:20px 24px;max-width:420px;width:90%;box-shadow:0 20px 60px #263d4825;position:relative}
.upload-modal-box h2{font-size:17px;font-weight:400;letter-spacing:1px;margin:0 0 12px;color:#303a36}
.upload-modal-box p{font-size:13px;color:#697b76;margin:0 0 14px;line-height:1.6}
.upload-modal-actions{display:flex;gap:10px;justify-content:flex-end}
.upload-modal-actions button{border:0;border-radius:18px;padding:8px 16px;font-size:14px;cursor:pointer;transition:background .2s}
.upload-modal-actions .btn-primary{background:#3e5649;color:#fff}
.upload-modal-actions .btn-primary:hover{background:#4a6b5a}
.upload-modal-actions .btn-cancel{background:#e7eee9;color:#536e61}
.upload-modal-actions .btn-cancel:hover{background:#dce8e2}
.upload-drop{border:2px dashed #aeb8b2;border-radius:12px;padding:28px 16px;text-align:center;margin-bottom:14px;cursor:pointer;transition:border-color .2s,background .2s}
.upload-drop:hover,.upload-drop.dragover{border-color:#637d78;background:#f2f7f4}
.upload-drop p{font-size:13px;color:#819087;margin:0}
.upload-drop small{font-size:11px;color:#a0b0a8}
.upload-previews{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.upload-previews img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid #c4cec755}

@media(max-width:700px){
  .add-photo-btn{padding:8px 12px;font-size:12px;margin-left:4px}
  .upload-modal-box{padding:16px 18px}
}