:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#d6d3ca;background:#121517;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden;height:100dvh;display:flex;flex-direction:column}header{height:70px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #ffffff0c;background:#141719}.identity{display:flex;align-items:baseline;gap:22px}.brand{font-family:Georgia,serif;font-size:25px;letter-spacing:.05em;color:#e1d8c6}.subtitle{font-size:12px;letter-spacing:.08em;color:#8e989a}.subtitle b{font-weight:400;color:#af8860;padding-left:8px}a{color:#909d9f;font-size:12px;text-decoration:none}a:hover{color:#e0cab0}#viewport{flex:1;position:relative;min-height:0;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none}#loading{position:absolute;inset:0;display:grid;place-items:center;color:#acb0aa;font-size:14px}#loading.error{padding:40px;line-height:1.8;background:#201719}.toolbar{height:66px;flex-shrink:0;display:flex;gap:24px;align-items:center;padding:0 28px;border-top:1px solid #ffffff0c;background:#161a1c}button{font:inherit;font-size:12px;cursor:pointer;border:1px solid #424b4e;color:#b8c0bd;background:transparent;padding:9px 15px;border-radius:4px;transition:background .12s,color .12s,border-color .12s}button:hover{background:#ffffff09;color:#eee5d5;border-color:#8b7965}button.active{background:#65513c;border-color:#907253;color:#f0e1c9}.views{display:flex;gap:7px}.switches{display:flex;gap:15px;align-items:center;flex:1}label{white-space:nowrap;font-size:12px;display:flex;align-items:center;gap:5px;color:#a4aeae;cursor:pointer}input{accent-color:#b7976b}.export{color:#d3b98f;border-color:#6d5941}button:disabled{opacity:.5;cursor:wait}footer{display:flex;gap:25px;justify-content:space-between;padding:0 28px 14px;background:#161a1c;font-size:11px;color:#687779}.hint{color:#647173}#labels{position:absolute;inset:0;pointer-events:none}.world-label{position:absolute;transform:translate(-50%,-100%);background:#111a1edf;color:#d8e2df;padding:5px 8px;border:1px solid #65786d80;font-size:11px;border-radius:3px;white-space:nowrap}.world-label small{display:block;color:#91b2ac;font-size:10px}.world-label:after{content:"";display:block;width:1px;height:12px;position:absolute;left:50%;top:100%;background:#91b2ac99}@media(max-width:950px){header{height:58px;padding:0 16px}.toolbar{height:auto;padding:10px 16px;gap:10px;flex-wrap:wrap}.switches{order:3;flex-basis:100%;justify-content:space-between}.views{flex:1}footer{padding:0 16px 10px;gap:12px}.hint{display:none}.subtitle{display:none}}body.capture header,body.capture .toolbar,body.capture footer{display:none}body.capture #viewport{height:100dvh}
.light-modes{display:flex;gap:5px;white-space:nowrap}.light-modes button{padding:9px 10px}.light-modes button.active{background:#344842;border-color:#647e70;color:#e1e6d9}@media(max-width:1200px){.toolbar{height:auto;min-height:66px;padding-top:10px;padding-bottom:10px;gap:10px;flex-wrap:wrap}.switches{order:3;flex-basis:100%;justify-content:space-between}.views{flex:1}}
.world-label.region{border-color:#8bb5a4;background:#17302edf;color:#e3eee7;font-weight:600}.world-label.socket{border-color:#b99b5b;background:#302717e8;color:#f0dfb5}.world-label.arrival{border-color:#6f999d;background:#17292ce8;color:#d9ecee}
.world-label.surface{border-color:#8e86b5;background:#242139e8;color:#e5e0f4;font-weight:600}

[hidden]{display:none!important}
#street-preview{position:absolute;bottom:16px;left:18px;right:calc(20% + 18px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;background:#141d20ed;border:1px solid #53635e70;border-radius:5px}
#street-preview select{font:inherit;color:#d8d6cb;background:#26312f;border:1px solid #59625c;padding:5px;border-radius:3px}
#walk-progress{flex:1;min-width:100px;max-width:230px}#walk-readout{font-size:11px;color:#b8c4bd}
#dialogue-preview{position:absolute;right:0;top:0;bottom:0;width:20%;padding:28px 16px;background:#18201ee8;backdrop-filter:blur(12px);border-left:1px solid #acb8a025;color:#a9b2a4;pointer-events:none}
#dialogue-preview span{font:italic 18px Georgia,serif;color:#d3c5ab}#dialogue-preview p{margin-top:35vh;font-size:13px}#dialogue-preview small{font-size:10px;line-height:1.6}
@media(max-width:650px){#street-preview{left:8px;right:calc(20% + 8px);bottom:8px;padding:8px;gap:7px}#street-preview label{font-size:10px}.views{flex-wrap:wrap}.views button{padding:7px 9px}#dialogue-preview{padding:18px 8px}}

.world-label{pointer-events:auto}

.views{flex-wrap:wrap}.views button{white-space:nowrap}

.toolbar{height:auto;min-height:66px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px 18px}.toolbar .switches{flex:1 1 520px;flex-wrap:wrap}.toolbar .views{flex:1 1 470px}

#dialogue-preview{display:flex;flex-direction:column;gap:18px;padding:24px 12px;background:#18201ef2}
.han-portrait{width:100%;flex:0 1 auto;max-height:52%;overflow:hidden;border:1px solid #d4c8b02b;background:#d8d3c8}
.han-portrait img{display:block;width:100%;max-height:42vh;object-fit:cover;object-position:50% 12%}
#dialogue-preview .han-dialogue strong{font-size:15px;font-weight:500;color:#e5d6bc;letter-spacing:.14em}
#dialogue-preview .han-dialogue p{margin:12px 0 0;line-height:1.8;font-size:13px;color:#d4d3c7}
#dialogue-preview>small{margin-top:auto;opacity:.65}.motion-note{font-size:10px;color:#a4afa8}
@media(max-width:650px){#dialogue-preview{padding:14px 8px;gap:12px}#dialogue-preview .han-dialogue p{font-size:11px}.han-portrait img{max-height:34vh}}