* { box-sizing: border-box; letter-spacing: 0; }
html, body { margin: 0; height: 100%; background: #161617; color: #e8e5db; font-family: "Avenir Next", "PingFang SC", sans-serif; }
#world { position: relative; width: 100%; height: 100svh; min-height: 480px; overflow: hidden; }
#cathedral-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -3px; cursor: crosshair; }
header, footer { position: absolute; left: 32px; right: 32px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
header { top: 22px; font-size: 12px; }header > span { font: 10px Consolas, monospace; color: #c4c1b7; text-shadow: 0 1px 5px #000; }
a { color: inherit; text-decoration: none; }a:hover { color: #eac780; }button, input { font: inherit; }
header > a, .tools { background: #151718dc; border: 1px solid #b0ada33b; }
header > a { padding: 12px 14px; }.tools { display: flex; align-items: center; padding: 4px; gap: 5px; }
.tools button { display: grid; place-items: center; width: 34px; height: 34px; color: #e3d9c3; background: none; border: 0; cursor: pointer; font-size: 23px; }.tools button:hover { background: #ffffff17; }.tools label { display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 11px; }.tools input { accent-color: #aa9873; }
.scene-title { position: absolute; top: 110px; left: 36px; pointer-events: none; text-shadow: 0 2px 12px #000; }.scene-title > span { font: 10px Consolas, monospace; color: #cbbda1; }.scene-title h1 { font: 400 42px "Songti SC",serif; margin: 12px 0 10px; }.scene-title p { color: #c2beb2; font-size: 12px; }
footer { bottom: 25px; pointer-events: none; }.hero-info { display: flex; align-items: center; gap: 13px; padding: 12px 18px; background: #171719de; border: 1px solid #99908055; }.hero-emblem { font: 34px Georgia,serif; color: #d7b479; }.hero-info strong { font-size: 13px; font-weight: 500; }.hero-info div > span { display: block; font-size: 10px; color: #b2aba0; margin-top: 4px; }.vital { height: 3px; width: 126px; background: #a1423e; margin-top: 10px; }.journey { display: flex; flex-direction: column; gap: 7px; text-align: right; margin-left: auto; font-size: 12px; text-shadow: 0 1px 5px black; }#position,.edition { font: 10px Consolas,monospace; color: #c5bda9; }
#fallback,.noscript { position: absolute; z-index: 4; top: 40%; left: 10%; right: 10%; padding: 25px; background: #171719; text-align: center; line-height: 2; }#fallback a,.noscript a { text-decoration: underline; }
:focus-visible { outline: 2px solid #e4bb78; outline-offset: 3px; }
#camera-reset, #hero-reset { font-size: 0; }
#camera-reset::after, #hero-reset::after { content: ""; width: 17px; height: 17px; background: url("./assets/focus.svg") center / contain no-repeat; filter: invert(1); }
#hero-reset::after { background-image: url("./assets/rotate-ccw.svg"); }
@media(max-width:700px) { header,footer { left: 16px; right: 16px; gap: 10px; }header { top: 16px; }header > span,.edition { display: none; }.scene-title { left: 20px; top: 92px; }.scene-title h1 { font-size: 30px; }.scene-title > span { font-size: 8px; }.hero-info { padding: 10px 12px; }.vital { width: 96px; }.tools button { width: 30px; }.tools label { padding: 0 4px; } }