.lore-page{position:fixed;inset:0;overflow:auto;background:radial-gradient(120% 90% at 50% 0%,#1b2130,#0c0f16 60%,#07090d);color:#f1ede4;font-family:ui-sans-serif,system-ui,sans-serif;padding:clamp(20px,5vw,64px)}.lore-page *{box-sizing:border-box}.lore-head{max-width:1280px;margin:0 auto clamp(24px,4vw,48px)}.lore-head a{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#a8e4d1;text-decoration:none}.lore-head a:hover,.lore-head a:focus-visible{text-decoration:underline}.lore-head h1{margin:14px 0 0;font-family:Georgia,Times New Roman,serif;font-weight:400;font-size:clamp(32px,4.6vw,58px);letter-spacing:-.03em;line-height:1.02;text-wrap:balance}.lore-head small{display:block;margin-top:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#f2c46a}.lore-head p{margin:16px 0 0;max-width:62ch;font-family:Georgia,Times New Roman,serif;font-style:italic;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:#d8d3c6;text-wrap:pretty}.lore-foot{max-width:1280px;margin:clamp(24px,4vw,48px) auto 0;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:12px;line-height:1.6;color:#a6b0bd}.lore-foot p{margin:0;max-width:70ch}.lore-foot nav{display:flex;flex-wrap:wrap;gap:10px}.lore-foot a{padding:10px 16px;border-radius:8px;border:1px solid #ffffff55;color:#f1ede4;text-decoration:none;font-size:13px}.lore-foot a:hover,.lore-foot a:focus-visible{border-color:#a8e4d1;color:#a8e4d1}.lore-foot a.lore-play{background:#f2b544;border-color:#f2b544;color:#101319;font-weight:700}.lore-section{max-width:1280px;margin:0 auto}.lore-shell{container-type:inline-size;container-name:lore-root}.lore-frame{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch;min-height:540px;padding-bottom:230px}.lore-preview{position:relative;min-width:0}.lore-media{position:relative;display:block;width:100%;height:100%;padding:0;border:1px solid #ffffff1c;border-radius:14px;overflow:hidden;background:#10141c;cursor:pointer;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}.lore-media[data-built]{opacity:1;transform:none}.lore-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform 1.2s cubic-bezier(.22,.68,.28,1)}.lore-media img.lore-shown{opacity:1;transform:scale(1)}.lore-media:after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .35s ease;pointer-events:none}.lore-media:hover:after{opacity:.14}.lore-media:focus-visible{outline:2px solid #a8e4d1;outline-offset:3px}.lore-cue{position:absolute;z-index:2;inset-inline-start:16px;bottom:14px;color:#fff;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}.lore-media:hover .lore-cue,.lore-media:focus-visible .lore-cue{opacity:1;transform:none}.lore-caption{position:absolute;top:calc(100% + 18px);left:0;right:0}.lore-title{margin:0;font-family:Georgia,Times New Roman,serif;font-weight:400;font-size:24px;letter-spacing:-.01em;text-wrap:pretty}.lore-title span{margin-inline-start:10px;font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;vertical-align:middle;color:#f2c46a}.lore-body{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.lore-body p{margin:0;font-size:13.5px;line-height:1.7;color:#cfcabd;text-wrap:pretty}.lore-list{display:flex;flex-direction:column;border-top:1px solid #ffffff26}.lore-item{display:flex;flex-direction:column;flex:1 1 auto}.lore-row{position:relative;display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:clamp(12px,1.9vh,20px) 0;background:none;border:none;border-bottom:1px solid #ffffff26;font-family:inherit;text-align:start;cursor:pointer;color:#f1ede4;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .75s cubic-bezier(.16,1,.3,1)}.lore-row[data-built]{opacity:1;transform:none}.lore-row-label{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1 1 auto}.lore-name{flex:1 1 auto;font-family:Georgia,Times New Roman,serif;font-size:clamp(17px,1.8vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline-start:0;transition:padding-inline-start .4s cubic-bezier(.22,.68,.28,1),color .3s ease}.lore-row.lore-on .lore-name{padding-inline-start:30px;color:#a8e4d1}.lore-meta{flex:0 0 auto;min-width:11ch;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#a6b0bd;white-space:nowrap}.lore-num{flex-shrink:0;font-size:clamp(14px,1.4vw,18px);font-variant-numeric:tabular-nums;color:#f2c46a;transition:opacity .3s ease}.lore-row.lore-on .lore-num{opacity:.55}[dir=rtl] .lore-head small,[dir=rtl] .lore-title span,[dir=rtl] .lore-meta,[dir=rtl] .lore-cue{letter-spacing:0;font-size:12px}[dir=rtl] .lore-arrow svg{transform:scaleX(-1)}.lore-arrow{position:absolute;inset-inline-start:0;top:50%;display:flex;align-items:center;color:#a8e4d1;transform:translateY(-50%) translate(-10px);opacity:0;transition:opacity .35s ease,transform .4s cubic-bezier(.22,.68,.28,1);pointer-events:none}.lore-row.lore-on .lore-arrow{opacity:1;transform:translateY(-50%)}.lore-row:focus-visible{outline:2px solid #a8e4d1;outline-offset:2px}.lore-panel{display:none}.lore-light{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(24px,6vw,64px);background:#07090d;opacity:0;visibility:hidden;transition:opacity .4s ease,background-color .5s ease,visibility 0s linear .4s}.lore-light.lore-light-open{opacity:1;visibility:visible;transition:opacity .4s ease,background-color .5s ease,visibility 0s}.lore-light:focus{outline:none}.lore-light-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1100px,92vw);max-height:100%;min-height:0}.lore-light-inner img{max-width:100%;flex:0 1 auto;min-height:0;max-height:74vh;object-fit:contain;display:block;border-radius:10px;animation:lore-open .45s cubic-bezier(.22,.68,.28,1)}@keyframes lore-open{0%{transform:scale(.96);opacity:0}}.lore-light-cap{margin:0;font-family:Georgia,Times New Roman,serif;font-size:18px;color:#14130f;transition:color .4s ease;text-wrap:pretty}.lore-light.lore-fg-light .lore-light-cap{color:#fff}.lore-light-actions{position:fixed;top:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px);z-index:10;display:flex;gap:10px}.lore-light-btn{width:44px;height:44px;border-radius:50%;border:none;background:#07090dd1;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease}.lore-light-btn:hover{background:#07090df2;transform:scale(1.06)}.lore-light-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}@media(max-width:780px){.lore-frame{grid-template-columns:1fr;align-items:start;min-height:0;padding-bottom:0}.lore-preview{display:none}.lore-list{border-top:none}.lore-panel{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .35s ease}.lore-row.lore-on+.lore-panel{max-height:1100px;opacity:1}}@container lore-root (width < 720px){.lore-frame{grid-template-columns:1fr;align-items:start;min-height:0;padding-bottom:0}.lore-preview{display:none}.lore-list{border-top:none}.lore-panel{display:grid;max-height:none;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s cubic-bezier(.22,.68,.28,1),opacity .35s ease}.lore-panel-in{overflow:hidden;min-height:0}.lore-row.lore-on+.lore-panel{grid-template-rows:1fr;opacity:1}.lore-row{padding:14px 0}.lore-row.lore-on .lore-name{padding-inline-start:26px}.lore-name{font-size:18px;white-space:normal;overflow:visible;text-overflow:clip}}.lore-panel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-top:14px;border-radius:10px;cursor:pointer}.lore-panel p{margin:12px 0 0;font-size:14px;line-height:1.7;color:#cfcabd;text-wrap:pretty}.lore-panel p:last-child{margin-bottom:18px}@container lore-root (width < 1000px) and (width >= 720px){.lore-body{grid-template-columns:1fr;gap:10px}.lore-frame{padding-bottom:330px}}@media(prefers-reduced-motion:reduce){.lore-section *,.lore-section *:before,.lore-section *:after{transition-duration:.01ms!important;transition-delay:0ms!important;animation-duration:.01ms!important}}
