:root{--bg: #efe6d4;--paper: #f7f1e1;--ink: #1f2a30;--ink-soft: #4d5a62;--ink-dim: #7e8890;--rule: rgba(31,42,48,.16);--accent: #b54a2f;--gold: #c79a4a;--teal: #34626c;--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;--sans: "Inter", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, Menlo, monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;font-weight:300;touch-action:none}#root{height:100%}.scene-wrap{position:fixed;inset:0;cursor:grab}.scene-wrap:active{cursor:grabbing}.grain{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.35;mix-blend-mode:multiply;background-image:radial-gradient(rgba(0,0,0,.16) 1px,transparent 1px),radial-gradient(rgba(0,0,0,.1) 1px,transparent 1px);background-size:3px 3px,7px 7px;background-position:0 0,1px 2px}.vignette{position:fixed;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 0 220px #3c281459,inset 0 0 60px #3c28142e}.hud{position:fixed;inset:0;pointer-events:none;z-index:6}.hud>*{pointer-events:auto}.top{position:absolute;top:0;left:0;right:0;padding:26px 34px;display:flex;justify-content:space-between;align-items:flex-start}.brand{font-family:var(--serif);font-size:32px;line-height:1;color:var(--ink);letter-spacing:.005em;font-weight:400}.brand i{font-style:italic;color:var(--accent)}.brand small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--ink-soft);margin-top:8px;text-transform:uppercase;font-weight:300}.meta{text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink-soft);text-transform:uppercase;line-height:2}.meta b{color:var(--ink);font-weight:500}.rail{position:absolute;left:34px;top:50%;transform:translateY(-50%);background:#f7f1e1c7;border:1px solid var(--rule);padding:18px 4px 18px 18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 18px #3c28141f}.rail .legend{font-family:var(--mono);font-size:9.5px;letter-spacing:.25em;color:var(--ink-dim);text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:10px;padding-right:14px}.rail .item{display:flex;align-items:baseline;gap:14px;padding:8px 14px 8px 0;cursor:pointer;background:transparent;border:0;color:var(--ink-soft);font:inherit;text-align:left;width:100%;transition:color .25s}.rail .item:hover,.rail .item.active{color:var(--ink)}.rail .item .n{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--ink-dim);width:22px;flex:none}.rail .item.active .n{color:var(--accent)}.rail .item .nm{font-family:var(--serif);font-size:17px;line-height:1.1;flex:1}.rail .item .el{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-dim)}.bottom{position:absolute;bottom:24px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--ink-soft);text-transform:uppercase}.bottom .hint{display:flex;gap:22px}.bottom .hint span b{color:var(--ink);font-weight:500;margin-right:8px}.links{display:flex;gap:18px}.links a{color:var(--ink-soft);text-decoration:none;transition:color .2s}.links a:hover{color:var(--accent)}.play{position:absolute;bottom:22px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:11px 22px;background:var(--paper);border:1px solid var(--ink);color:var(--ink);cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;transition:background .2s,color .2s;box-shadow:4px 4px 0 var(--ink)}.play:hover{background:var(--ink);color:var(--paper)}.play:hover .ic{border-color:transparent transparent transparent var(--paper)}.play .ic{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink);transition:border-color .2s}.play.playing .ic{width:8px;height:10px;border:0;background:currentColor;-webkit-mask:linear-gradient(#000 0 0) left/3px 100% no-repeat,linear-gradient(#000 0 0) right/3px 100% no-repeat;mask:linear-gradient(#000 0 0) left/3px 100% no-repeat,linear-gradient(#000 0 0) right/3px 100% no-repeat}.panel{position:absolute;right:34px;top:50%;transform:translateY(-50%) translate(20px);width:460px;max-width:calc(100vw - 68px);max-height:82vh;overflow-y:auto;background:var(--paper);border:1px solid var(--rule);padding:32px 34px;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .4s cubic-bezier(.2,.6,.2,1);box-shadow:0 18px 40px #281c0c2e}.panel:before{content:"";position:absolute;inset:14px;border:1px solid var(--rule);pointer-events:none}.panel.open{opacity:1;pointer-events:auto;transform:translateY(-50%) translate(0)}.panel .head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:var(--ink-dim);text-transform:uppercase;margin-bottom:8px}.panel .head .n{color:var(--accent)}.panel h2{font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.05;color:var(--ink);margin-bottom:4px;letter-spacing:-.005em}.panel h2 i{font-style:italic;color:var(--accent)}.panel .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:22px;text-transform:uppercase}.panel .ornament{text-align:center;font-family:var(--serif);color:var(--gold);font-size:18px;letter-spacing:.4em;margin:6px 0 18px}.panel .lede{font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink);margin-bottom:20px;font-weight:400}.panel .lede:first-letter{font-size:46px;line-height:.9;float:left;font-family:var(--serif);font-weight:500;padding:6px 8px 0 0;color:var(--accent)}.panel .close{position:absolute;top:18px;right:18px;width:30px;height:30px;background:transparent;border:1px solid var(--rule);color:var(--ink-soft);cursor:pointer;font-size:16px;line-height:1;transition:color .2s,border-color .2s}.panel .close:hover{color:var(--accent);border-color:var(--accent)}.panel .hl{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-bottom:22px}.panel .hl .c{padding:12px 14px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}.panel .hl .c .k{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px}.panel .hl .c .v{font-family:var(--serif);font-size:22px;color:var(--ink);line-height:1.1}.panel .hl .c .v em{font-style:italic;color:var(--accent)}.panel .block{margin-top:20px}.panel .block h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--ink-dim);text-transform:uppercase;margin-bottom:12px;font-weight:400;display:flex;align-items:center;gap:12px}.panel .block h4:before{content:"xa7";color:var(--gold);font-family:var(--serif);font-size:16px}.panel .block h4:after{content:"";flex:1;height:1px;background:var(--rule)}.panel ul.moments{list-style:none;font-family:var(--serif);font-size:17px;line-height:1.5;color:var(--ink)}.panel ul.moments li{padding:10px 0 10px 22px;position:relative;border-top:1px dotted var(--rule)}.panel ul.moments li:first-child{border-top:0}.panel ul.moments li:before{content:"u2055";position:absolute;left:0;top:10px;color:var(--gold);font-size:16px}.panel .tags{display:flex;flex-wrap:wrap;gap:6px}.panel .tag{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink);padding:4px 9px;border:1px solid var(--rule);background:#c79a4a14}.panel .proj{padding:14px 0;border-top:1px dotted var(--rule)}.panel .proj:first-of-type{border-top:0;padding-top:6px}.panel .proj .pt{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;line-height:1.1}.panel .proj .pt .st{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;white-space:nowrap}.panel .proj .pd{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink-soft);margin:4px 0 8px}.panel .proj .ps{display:flex;flex-wrap:wrap;gap:4px}.panel .proj .ps span{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-soft);padding:2px 6px;border:1px solid var(--rule)}.loader{position:fixed;inset:0;background:var(--bg);z-index:30;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;color:var(--ink-soft);letter-spacing:.04em;font-style:italic;transition:opacity .8s ease}.loader.hide{opacity:0;pointer-events:none}#labels{position:fixed;inset:0;pointer-events:none;z-index:5}.label{position:absolute;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;font-family:var(--serif);font-size:16px;color:var(--ink);font-style:italic;text-shadow:0 1px 0 rgba(247,241,225,.9),0 0 12px rgba(247,241,225,.6);transition:opacity .3s}.label .num{display:inline-block;font-family:var(--mono);font-size:9.5px;font-style:normal;letter-spacing:.2em;color:var(--accent);margin-right:6px;vertical-align:2px}.label.hide{opacity:0}@media (max-width: 820px){.top{padding:14px 16px}.brand{font-size:22px}.meta{font-size:9px;letter-spacing:.14em;line-height:1.6}.rail{inset:auto 10px 130px;transform:none;padding:12px 14px;max-height:38vh;overflow-y:auto}.rail .legend{display:none}.rail .item{padding:5px 0}.rail .item .nm{font-size:15px}.play{bottom:70px;padding:9px 16px;font-size:9.5px}.bottom{left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(180deg,transparent,rgba(247,241,225,.85));justify-content:center}.bottom .hint{display:none}.links{gap:14px;font-size:10px;letter-spacing:.08em;flex-wrap:wrap;justify-content:center}.panel{inset:auto 0 0;width:auto;max-width:none;padding:22px 22px 28px;max-height:76vh;transform:translateY(20px)}.panel.open{transform:none}.panel h2{font-size:26px}.label{font-size:13px}}