/* ORBIT UI — reserved grid regions; walking geometry remains below. */
:root{
 --paper:#f2eee4;--ink:#41483d;--muted:#727565;--sky:#f2eee4;
 --green:#6b7056;--line:#c6b999;--soft-line:#ddd3ba;--wash:#efe7d6;--focus:#91643a;
 --serif:"Songti SC","Noto Serif CJK SC",serif;--gutter:32px;--gap:8px;
 --radius:4px;--pill:999px;--control-size:44px;--ui-motion:180ms;
 --glass:linear-gradient(165deg,#fffffa8c,#eeeadd40 55%,#ded8c44d);
 --jade-glass:linear-gradient(155deg,#f6eac866,#e4d19b59 55%,#cdb67c66);
 --glass-edge:#a7a58e5c;--glass-shadow:inset 0 1px 0 #ffffffe6,inset 0 -1px 0 #8d95702e,0 3px 12px #6b644612;
 --glass-blur:blur(18px) saturate(130%);--spring:cubic-bezier(.2,.85,.3,1.12);--slide-time:360ms;
 --text-halo:0 1px 3px #fffdf4aa;--panel:#f7f1e5f2;--panel-edge:#b9aa85;--accent-ink:#665133;--modal-shade:#51493870;
 --body-size:16px;--label-size:14px;--note-size:12px;
 font-family:system-ui,-apple-system,"PingFang SC",sans-serif;color:var(--ink);
 background:var(--sky);font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
[hidden]:not([hidden="until-found" i]){display:none!important}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;min-width:var(--control-size);min-height:var(--control-size)}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
canvas:focus-visible{outline:3px solid var(--focus);outline-offset:-4px}
button:disabled{cursor:wait;opacity:.65}
#viewer-stage{display:grid;grid-template-rows:auto minmax(0,1fr) minmax(0,auto);grid-template-columns:minmax(0,1fr);isolation:isolate;background:var(--paper);overflow:clip}
#viewport{grid-row:2;position:relative;width:100%;height:100%;min-width:0;min-height:0}
#scene{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
header{
 grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:calc(12px + env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 12px max(var(--gutter),env(safe-area-inset-left));
 background:transparent;border:0;box-shadow:none;
}
.identity{display:flex;align-items:center;gap:16px;min-width:0;text-shadow:var(--text-halo)}
.identity>div{min-width:0}
.seal{display:grid;place-items:center;flex:none;width:40px;height:44px;border:1px solid #677c61aa;outline:1px solid #677c614d;outline-offset:-4px;border-radius:2px;font:28px var(--serif);color:#536d54}
.eyebrow{font-size:10px;letter-spacing:.2em;margin:0 0 4px;color:var(--muted)}
h1{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.25;letter-spacing:.1em;margin:0}
h1 span{font:var(--note-size)/1.5 system-ui,sans-serif;letter-spacing:.08em;margin-left:16px;color:var(--muted);vertical-align:middle}
.atlas{display:flex;flex:none;gap:16px;align-items:center;min-height:var(--control-size);padding:8px 16px;border-radius:var(--pill);font-size:var(--label-size);text-decoration:none;transition:transform 240ms var(--spring),background var(--ui-motion) ease-out}
.atlas span{font-size:var(--note-size);letter-spacing:.04em;color:var(--muted)}
.control-panel{
 grid-row:3;min-width:0;max-height:48vh;max-height:48dvh;overflow-y:auto;overscroll-behavior:contain;
 display:grid;gap:var(--gap);padding:8px max(var(--gutter),env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left));
 background:transparent;border:0;box-shadow:none;
}
.caption{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 16px;min-width:0;background:transparent;border:0;box-shadow:none;text-shadow:var(--text-halo)}
.edition{flex:none;font-size:var(--note-size);line-height:1.5;letter-spacing:.06em;color:var(--muted)}
.caption p{font:500 18px/1.5 var(--serif);margin:0;color:var(--ink);overflow-wrap:anywhere}
#view-detail{font-size:var(--label-size);line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px;min-width:0}
.views,.switches{display:flex;align-items:center;gap:var(--gap);min-width:0}
.views,.atlas,.switches button{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.views{position:relative;isolation:isolate;padding:4px;border-radius:var(--pill);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-inline:4px}
.views::-webkit-scrollbar{display:none}
.views::before{content:"";position:absolute;box-sizing:border-box;left:0;top:var(--view-top,4px);width:var(--view-width,0px);height:var(--view-height,var(--control-size));transform:translateX(var(--view-x,4px));border:1px solid #b69c5b99;border-radius:var(--pill);background:var(--jade-glass);box-shadow:inset 0 1px 1px #ffffffe6,inset 0 -2px 2px #94784233,0 2px 6px #715e3926;opacity:0;pointer-events:none}
.views[data-indicator-ready=true]::before{opacity:1}
.views[data-indicator-motion=true]::before{transition:transform var(--slide-time) var(--spring),width var(--slide-time) var(--spring)}
.toolbar button{display:flex;align-items:center;justify-content:center;min-width:var(--control-size);min-height:var(--control-size);padding:8px 16px;border:1px solid transparent;border-radius:var(--pill);color:var(--ink);white-space:nowrap;font-size:var(--label-size);line-height:1.5;transition:transform 240ms var(--spring),background var(--ui-motion) ease-out,color var(--ui-motion) ease-out}
.views button{position:relative;z-index:1;flex:1 0 56px;padding-inline:12px;background:transparent}
.views button[aria-pressed=true]{color:#5b4a2b;font-weight:600;text-shadow:var(--text-halo)}
.views:not([data-indicator-ready=true]) button[aria-pressed=true]{background:var(--jade-glass)}
.views button:focus-visible{outline-offset:-3px}
.switches{padding:4px 0;border:0;background:transparent;box-shadow:none}
.switches button{padding-inline:16px;border-color:var(--glass-edge)}
.switches button[aria-pressed=true]{background:var(--jade-glass);border-color:#baa474;color:#5b4a2b}
.operation-notice{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;min-width:0;padding-top:4px;background:transparent;border:0;box-shadow:none;font-size:var(--note-size);line-height:1.5;color:var(--muted);text-shadow:var(--text-halo)}
.operation-notice span{display:block;overflow-wrap:anywhere;min-width:0}
@media(hover:hover){.atlas:hover,.switches button:hover{background:linear-gradient(165deg,#ffffff55,#dac89d40);color:var(--ink)}.views button:not([aria-pressed=true]):hover{background:#ffffff1c}.switches button[aria-pressed=true]:hover{background:var(--jade-glass);color:#5b4a2b}}
.toolbar button:active:not(:disabled),#walk-hud button:active:not(:disabled),.atlas:active{transform:scale(.95);transition-duration:100ms;transition-timing-function:ease-out}
@media(prefers-reduced-motion:reduce){.views::before{transition:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.views,.atlas,.switches button{background-color:#e9e5d0}}
@media(max-width:1023px){
 :root{--gutter:24px}
 .toolbar{grid-template-columns:minmax(0,1fr);gap:8px}
 .switches{justify-content:flex-end;border:0;padding:0}
}
@media(max-width:740px){
 :root{--gutter:16px}
 header{gap:8px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px}
 .identity{gap:12px}.seal{width:32px;height:36px;font-size:24px}
 h1{font-size:24px}h1 span{display:none}.eyebrow{font-size:9px;letter-spacing:.12em}
 .atlas{padding:8px;font-size:var(--label-size)}.atlas span{display:none}
 .control-panel{padding-top:8px;gap:4px}
 .caption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 8px}
 .caption p{grid-row:1;grid-column:1;font-size:var(--body-size)}
 .edition{grid-row:1;grid-column:2;font-size:10px;letter-spacing:0}
 #view-detail{grid-column:1/-1;font-size:var(--note-size)}
 .toolbar{gap:4px}
 .views button{min-width:56px;padding-inline:12px}
 .switches{justify-content:space-between;flex-wrap:wrap}
 .operation-notice{gap:0 8px;padding-top:4px;font-size:11px}
}
@media(max-width:359px){
 :root{--gutter:12px}
 .identity{gap:8px}.seal{width:28px;height:36px}
 .caption{grid-template-columns:minmax(0,1fr)}
 .edition{grid-row:2;grid-column:1}
}
@media(orientation:landscape) and (max-height:500px){
 :root{--gutter:16px}
 header{padding-top:max(4px,env(safe-area-inset-top));padding-bottom:4px}
 .identity{gap:8px}.seal{width:32px;height:36px;font-size:24px}
 .eyebrow{display:none}h1{font-size:24px}
 .control-panel{max-height:46vh;max-height:46dvh;padding-top:4px;gap:4px}
 .caption{display:flex;gap:0 12px}.caption p{font-size:var(--body-size)}
 .edition,#view-detail,.operation-notice{font-size:11px}
 .views button{min-width:48px;padding-inline:8px}
}
@media(orientation:landscape) and (max-height:500px) and (min-width:600px){
 .toolbar{grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
 .switches{flex-wrap:nowrap}
}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#eee6d4;z-index:5;color:#665c43}.loading-mark{font:50px "Songti SC",serif;padding:10px 20px;border:1px solid #b9aa85;animation:breathe 1.2s ease-in-out infinite alternate}#loading p{font-size:14px;letter-spacing:.1em;margin:24px 0 10px}#loading small{font-size:10px;letter-spacing:.1em;color:#8b8067}#loading[hidden],#error[hidden]{display:none}#error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:540px;width:calc(100% - 40px);padding:30px;background:#f7f1e5f2;border:1px solid #b9aa85;border-radius:8px;z-index:10}#error h2{font-size:20px;font-weight:500}#error p{font-size:14px;line-height:1.8;color:#7b715b;word-break:break-word}.no-script{position:absolute;top:50%;background:#fff;padding:24px}@keyframes breathe{to{opacity:.4}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#walk-hud{position:absolute;z-index:4;top:max(20px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:min(360px,calc(100vw - 36px));padding:12px 14px;background:#f7f1e5f2;border:1px solid #b9aa85;border-radius:6px;color:#544f3d}
body:not(.walking) #walk-hud{position:static;width:100%;border-color:var(--line);background:var(--wash)}
#walk-hud[hidden],#walk-resume[hidden]{display:none}#walk-message{font-size:12px;line-height:1.6;margin:0 0 10px;overflow-wrap:anywhere}#walk-hud>div{display:flex;gap:8px;justify-content:flex-end}#walk-hud button{min-height:44px;padding:8px 16px;border:1px solid #b9aa85;border-radius:var(--pill);background:var(--glass);box-shadow:var(--glass-shadow);color:#665133;font-size:13px;transition:transform 240ms var(--spring)}#walk-exit{font-weight:600}
#walk-touch{display:none;position:absolute;inset:0;z-index:2;pointer-events:none}.mobile-device.walking #walk-touch{display:block}.walking .views,.walking #roofs,.walking #environment,.walking #reset,.walking #walk-toggle,.walking .caption,.walking .atlas,.walking .operation-notice>span:first-child{display:none}.walking .toolbar{width:auto;left:50%;bottom:max(24px,env(safe-area-inset-bottom));flex-direction:row}.walking .switches{background:#f7f1e5ed;backdrop-filter:none;box-shadow:none}.walking header{z-index:1}
#walk-look{position:absolute;top:0;right:0;bottom:0;width:55%;touch-action:none;pointer-events:auto;cursor:grab;user-select:none;-webkit-user-select:none}#walk-look>span{position:absolute;right:max(32px,env(safe-area-inset-right));bottom:max(65px,calc(env(safe-area-inset-bottom) + 40px));color:#665c43;background:#f4ead5e6;padding:9px 12px;border-radius:4px;font-size:11px;pointer-events:none}
#walk-joystick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(50px,calc(env(safe-area-inset-bottom) + 30px));width:120px;height:120px;border-radius:50%;border:2px solid #a88c5580;background:#c8b47b66;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none}
#walk-knob{position:absolute;left:36px;top:36px;width:44px;height:44px;border-radius:50%;background:#fff7e6cc;border:1px solid #b9aa85;pointer-events:none}.stick-label{position:absolute;width:100%;bottom:-23px;text-align:center;color:#665c43;background:#f4ead5e6;border-radius:4px;font-size:11px;line-height:20px;pointer-events:none}.walk-paused #walk-joystick,.walk-paused #walk-look>span{opacity:.45}
@media(max-width:740px){#walk-hud{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:min(300px,calc(100vw - 24px))}.walking .identity{display:none}}
@media(orientation:landscape) and (max-height:500px){#walk-hud{width:300px;padding:8px 12px}#walk-message{margin-bottom:5px}#walk-joystick{bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px))}.walking .identity{display:none}}


#loading{position:fixed;isolation:isolate;overflow:hidden;z-index:20;gap:0;text-align:center;padding:20px;background:radial-gradient(ellipse at 50% 40%,#f9f3e5 0,#eee6d4 52%,#e1dbc7 100%)}
#loading h2{font:500 17px 'Songti SC',serif;letter-spacing:.16em;color:#665c43;margin:5px 0 0}
.pixel-construction{width:min(600px,86vw);position:relative}
.pixel-manor{width:100%;height:auto;display:block;overflow:visible}
.voxel-layer{animation:voxel-assemble .65s cubic-bezier(.2,.8,.2,1) var(--build-delay) both;transform-box:fill-box;transform-origin:center}
.voxel-row{animation:voxel-wave 2.8s linear var(--wave-start) infinite;transform-box:fill-box;transform-origin:center}
#loading[hidden] .voxel-layer,#loading[hidden] .voxel-row{animation-play-state:paused}
.pixel-sky{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.pixel-sky i{position:absolute;left:-180px;top:20%;width:100px;height:22px;background:#fff9e9;box-shadow:22px -22px #fff9e9,44px -44px #fff9e9,66px -22px #fff9e9,100px 0 #fff9e9;opacity:.4;animation:pixel-cloud-drift 24s linear infinite}
.pixel-sky i:nth-child(2){top:58%;animation-delay:-14s;animation-duration:31s;opacity:.3}.pixel-sky i:nth-child(3){top:80%;animation-delay:-8s;animation-duration:38s;opacity:.22}
@keyframes voxel-assemble{from{opacity:0;transform:translateY(-70px) scale(.96)}75%{opacity:1;transform:translateY(3px) scale(1)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes voxel-wave{0%,50%,100%{transform:translateY(0)}12.5%,37.5%{transform:translateY(-2.12px)}25%{transform:translateY(-3px)}62.5%,87.5%{transform:translateY(2.12px)}75%{transform:translateY(3px)}}@keyframes pixel-cloud-drift{to{transform:translateX(calc(100vw + 400px))}}
#arrival-clouds{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:5}
#arrival-clouds[hidden]{display:none}
.cloud-sea{display:block;width:100%;height:100%}
.cloud-layer{transform-box:view-box;transform-origin:50% 50%;animation:cloud-forward-far var(--arrival-duration,3000ms) cubic-bezier(.25,.35,.45,1) both}
.cloud-mid{animation-name:cloud-forward-mid}.cloud-near{animation-name:cloud-forward-near}
.cloud-mist{position:absolute;inset:0;background:radial-gradient(ellipse at 48% 46%,#fff9ee 0%,#f3ecdee8 45%,#e5dcc7b3 100%);animation:cloud-mist-clear var(--arrival-duration,3000ms) ease-out both}
body[data-arrival=running] header,body[data-arrival=running] .caption,body[data-arrival=running] .toolbar,body[data-arrival=running] .operation-notice{visibility:hidden;opacity:0}
header,.caption,.toolbar,.operation-notice{transition:opacity .7s ease}
@keyframes cloud-forward-far{0%{opacity:.78;transform:scale(.8)}55%{opacity:.65}90%,100%{opacity:0;transform:scale(1.65)}}
@keyframes cloud-forward-mid{0%,8%{opacity:1;transform:scale(.85)}60%{opacity:.85}100%{opacity:0;transform:scale(2.3)}}
@keyframes cloud-forward-near{0%{opacity:1;transform:scale(.9)}45%{opacity:.92}85%,100%{opacity:0;transform:scale(3.2)}}
@keyframes cloud-mist-clear{0%,7%{opacity:1}35%{opacity:.45}68%,100%{opacity:0}}
@media(max-width:740px){.pixel-construction{width:min(570px,110vw);margin:0 -10vw}#loading h2{font-size:16px;letter-spacing:.12em;margin-top:16px}}
@media(max-height:500px){.pixel-construction{width:min(420px,66vh)}#loading h2{font-size:14px;margin-top:0}}
@media(prefers-reduced-motion:reduce){.voxel-layer,.voxel-row{opacity:1;transform:none}#arrival-clouds{display:none!important}}


/* Keep the scene horizontal when the browser cannot lock the physical screen. */
#viewer-stage{position:fixed;inset:0;width:100%;height:100%}
.mobile-device.walking.walk-portrait #viewer-stage{inset:auto;left:50%;top:50%;width:100vh;width:100dvh;height:100vw;height:100dvw;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
.mobile-device.walking.walk-portrait #walk-hud{top:max(12px,env(safe-area-inset-right));right:max(18px,env(safe-area-inset-bottom));width:300px}
.mobile-device.walking.walk-portrait #walk-joystick{left:max(24px,env(safe-area-inset-top));bottom:max(30px,env(safe-area-inset-left))}
.mobile-device.walking.walk-portrait #walk-look>span{right:max(32px,env(safe-area-inset-bottom));bottom:max(45px,env(safe-area-inset-left))}
.mobile-device.walking .identity{display:none}

/* Walking uses the unchanged full-stage coordinate system and display authorization. */
.walking #viewer-stage{display:block}
.walking #viewport{position:absolute;inset:0;width:100%;height:100%}
.walking #scene{mask-image:none}
.walking header{position:absolute;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));padding:0;border:0;background:none;backdrop-filter:none;pointer-events:none}
.walking .identity{padding:8px 12px;background:transparent;border:0}
.walking .control-panel{display:contents}
.walking .toolbar{display:none}
.walking .operation-notice{position:absolute;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(4px,env(safe-area-inset-bottom));border:0;justify-content:flex-end;pointer-events:none}
.walking #status{max-width:100%;padding:0 4px;background:transparent;text-shadow:var(--text-halo)}
#error,.no-script{color:#544f3d;text-shadow:none}

.toolbar{align-items:center}
.views{padding:0;border:0;box-shadow:var(--glass-shadow),inset 0 0 0 1px var(--glass-edge)}
.views button{height:var(--control-size);border:0}
.switches{padding:0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}

/* Keep the hint in the header and the controls against the lower safe edge. */
header .operation-notice{align-self:center;justify-content:flex-end;max-width:48%;font-size:11px;line-height:1.6;text-align:right;padding:0}
.walking .operation-notice{display:none}
@media(max-width:740px){
 header .operation-notice{font-size:9px;max-width:46%;letter-spacing:.02em}
 .control-panel{padding-top:6px;gap:0}
 .toolbar{gap:7px}
 .switches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
 .switches button{width:100%;padding-inline:8px}
}
.mobile-device .toolbar{grid-template-columns:minmax(0,1fr)}
.mobile-device .switches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.mobile-device .switches button{width:100%;padding-inline:8px}

/* Crop the painted frame away; preserve the paper texture's aspect ratio. */
#viewer-stage::before{content:"";position:absolute;inset:-8%;z-index:-2;pointer-events:none;background:url("assets/ui/xuan-scroll-v2.jpg") center/cover no-repeat}
#viewer-stage{display:block}
#viewer-content{position:absolute;inset:0;overflow:clip;isolation:isolate}
#viewport,.walking #viewport{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
header,.walking header{position:absolute;inset:0 0 auto;padding:max(16px,env(safe-area-inset-top)) max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left));z-index:3;pointer-events:none}
.control-panel{position:absolute;inset:auto 0 0;z-index:3;max-height:48%;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.toolbar{pointer-events:auto}
#walk-hud{max-width:calc(100% - 24px)}
#loading{inset:0;border-radius:0}
#arrival-clouds{inset:0;border-radius:0}
#error{max-width:calc(100% - 32px)}
.mobile-device.walking #viewer-stage::before{display:none}

@media(max-width:740px){.switches button{padding-inline:4px;font-size:12px}}
.mobile-device .switches button{padding-inline:4px;font-size:12px}

/* Keep animation settings in the modal top layer, clear of scene controls. */
#walk-dialog,#animation-dialog{width:min(480px,calc(100% - 32px));max-height:85vh;max-height:85dvh;margin:auto;padding:22px;border:1px solid #b9aa85;border-radius:18px;background:#f7f1e5f2;color:#41483d;box-shadow:0 24px 80px #5d503b40;overflow:auto;overscroll-behavior:contain;font:14px/1.6 system-ui,-apple-system,"PingFang SC",sans-serif;text-align:left}
#walk-dialog::backdrop,#animation-dialog::backdrop{background:var(--modal-shade);backdrop-filter:blur(6px)}
.animation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#walk-title,#animation-title{margin:0;font:500 24px/1.4 "Songti SC",serif}
#animation-close{min-width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:#e9dfca;color:#41483d;font-size:26px;cursor:pointer}
#animation-intro{margin:8px 0 18px;color:#7b715b}
#animation-dialog .animation-settings{display:grid;gap:10px;width:auto;margin:0}
#animation-dialog button[data-animation]{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:44px;padding:12px 14px;border:1px solid #c6b999;border-radius:12px;background:#fff9ec80;color:#41483d;text-align:left;font:inherit;cursor:pointer;box-shadow:none;backdrop-filter:none;white-space:normal}
#animation-dialog button[data-animation] strong{font-size:16px}
#animation-dialog button[data-animation] span{font-size:13px;line-height:1.6}
#animation-dialog button[data-animation][aria-pressed=true]{border-color:#8e784e;background:var(--jade-glass);box-shadow:inset 3px 0 #b69c5b99;color:var(--accent-ink)}
#animation-dialog button:focus-visible{outline:3px solid #91643a;outline-offset:2px}
.walking #animation-open{display:none}

@media(max-width:480px){#animation-dialog{padding:16px}#animation-title{font-size:22px}#animation-intro{margin:4px 0 12px;font-size:13px}#animation-dialog .animation-settings{gap:8px}#animation-dialog button[data-animation]{padding:10px 12px}#animation-dialog button[data-animation] span{font-size:12px;line-height:1.5}}

/* Authorization stays in the top layer; the walking HUD returns to the stage. */
#walk-dialog #walk-hud{position:static;inset:auto;width:100%;max-width:none;padding:0;margin:16px 0 0;border:0;border-radius:0;background:transparent;color:var(--ink)}
#walk-dialog #walk-message{font-size:14px;line-height:1.8;margin:0 0 20px}
#walk-dialog #walk-hud>div{display:flex;flex-wrap:wrap;gap:10px}
#walk-dialog #walk-hud button{flex:1;min-width:120px}
#walk-hud #walk-resume{background:var(--jade-glass);color:var(--accent-ink)}
#retry-loading{padding:10px 18px;border:1px solid var(--panel-edge);border-radius:var(--pill);background:var(--jade-glass);color:var(--accent-ink);box-shadow:var(--glass-shadow)}
#error a{display:inline-flex;align-items:center;min-height:44px;padding:8px;color:var(--accent-ink);text-underline-offset:4px}
.no-script{background:var(--panel);border:1px solid var(--panel-edge)}
@media(max-width:480px){#walk-dialog{padding:20px}#walk-title{font-size:22px}}

@media(orientation:landscape) and (max-height:500px){header,.walking header{padding-top:max(8px,env(safe-area-inset-top))}.control-panel{padding-bottom:max(8px,env(safe-area-inset-bottom))}}