:root{font-family:ui-sans-serif,system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#f6f1df;background:#102d2b;font-synthesis:none}*{box-sizing:border-box}html,body,#app,#viewer{width:100%;height:100%;margin:0}body{overflow:hidden;background:#102d2b}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:focus-visible,input:focus-visible{outline:2px solid #d7b767;outline-offset:3px}[hidden]{display:none!important}#viewer{position:relative;overflow:hidden;background:#172f31}#canvasHost{position:absolute;inset:0}#canvasHost canvas{display:block;width:100%;height:100%;cursor:grab}#canvasHost canvas:active{cursor:grabbing}.viewer-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0a1e252e 0%,transparent 24%,transparent 72%,#061b1bd1 100%)}.topbar{position:absolute;z-index:2;top:0;left:0;right:0;padding:28px 34px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{display:flex;flex-direction:column;text-shadow:0 2px 20px #001418}.brand b{font-family:SimSun,serif;font-size:25px;letter-spacing:.23em}.brand span{font-size:10px;letter-spacing:.23em;margin-top:7px;color:#d7dbc5}.top-actions{display:flex;gap:9px;pointer-events:auto}.top-actions button,.library-open{padding:10px 14px;background:#102e2bd9;border:1px solid #e1d6ac5c;border-radius:4px;color:#fbf1d5;font-size:12px}.top-actions button:hover,.library-open:hover{background:#1d5045}.scene-chip{position:absolute;z-index:2;left:34px;bottom:112px;display:flex;flex-direction:column;gap:5px;text-shadow:0 2px 14px #001418}.eyebrow{font-size:10px;letter-spacing:.2em;color:#ddcf9f;text-transform:uppercase}.scene-chip strong{font-family:SimSun,serif;font-size:27px;font-weight:500;letter-spacing:.05em}.scene-chip span:last-child{font-size:12px;color:#cdd8c6}.loading{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#102d2b99;font-size:13px;backdrop-filter:blur(3px);transition:opacity .35s}.loading.hidden{opacity:0;pointer-events:none}.spinner{width:16px;height:16px;border:2px solid #eadba866;border-top-color:#eadba8;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hint{position:absolute;z-index:2;left:50%;bottom:30px;transform:translateX(-50%);padding:8px 13px;background:#0d2b28a8;border:1px solid #e3d8aa40;border-radius:3px;font-size:11px;color:#d8dfcb;white-space:nowrap;transition:opacity .8s}.hint.fade{opacity:0}.viewer-controls{position:absolute;z-index:2;right:34px;bottom:32px;display:flex;align-items:center;gap:4px}.viewer-controls button{height:35px;background:#102e2bd9;border:1px solid #e1d6ac5c;color:#fbf1d5}.viewer-controls button:first-child,.viewer-controls button:last-child{width:35px;font:27px Georgia,serif}.viewer-controls button:nth-child(2){padding:0 13px;font-size:11px}.viewer-controls button:hover{background:#1d5045}.library-open{position:absolute;z-index:3;left:34px;top:104px}.library-open kbd,.key-row kbd{font-size:10px;padding:2px 5px;border:1px solid #e7dfbd66;border-radius:3px;margin-left:4px}.welcome{position:absolute;z-index:5;inset:0;display:flex;align-items:center;padding:8vw;background:linear-gradient(90deg,#082725f2 0%,#0c2d2aa8 47%,transparent 75%);transition:opacity .35s,visibility .35s}.welcome.hidden{opacity:0;visibility:hidden;pointer-events:none}.welcome-card{max-width:500px}.welcome-card h2{font-family:SimSun,serif;font-size:56px;line-height:1.28;font-weight:500;letter-spacing:.04em;margin:17px 0 20px}.welcome-card h2 em{font-style:normal;color:#d9bb73}.welcome-card p{font-size:15px;line-height:1.9;color:#d9decd;margin:0 0 24px;max-width:450px}.primary{background:#d6b66b;color:#162e28;padding:15px 22px;border-radius:4px;font-size:15px;letter-spacing:.1em;min-width:190px}.primary:hover{background:#e8cc88}.primary span{float:right;font-size:19px;line-height:14px}.key-row{display:flex;gap:15px;margin-top:24px;font-size:11px;color:#d0d8c6}.library-open{transition:transform .2s}.library-open.hidden{transform:translateX(-120%)}#library{position:absolute;z-index:6;top:0;right:0;width:380px;height:100%;padding:30px 27px 22px;background:#f4f1e5;color:#244936;box-shadow:-18px 0 50px #00141452;transform:translateX(105%);transition:transform .35s ease;display:flex;flex-direction:column}#library.open{transform:translateX(0)}.library-head{display:flex;justify-content:space-between;align-items:start}.library-head h1{font-family:SimSun,serif;font-weight:500;font-size:30px;letter-spacing:.08em;margin:6px 0 0}.icon-button,.close-button{background:#dfe6d6;color:#244936;border-radius:50%;width:29px;height:29px;font-size:20px;line-height:1}.intro{font-size:12px;line-height:1.75;color:#5b715b;margin:20px 0 15px}.search{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid #c4cfbb;border-radius:4px;background:#fbfaf4;color:#6a7d6a}.search span{font-size:20px;line-height:15px}.search input{width:100%;border:0;background:transparent;outline:0;color:#244936;font-size:13px}.filters{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 12px}.filter{border:1px solid #c5d0bd;background:transparent;border-radius:20px;padding:5px 9px;color:#59705a;font-size:11px}.filter.active{background:#275b4e;border-color:#275b4e;color:#f6efd7}.scene-list{overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-right:3px}.scene-card{display:flex;flex-direction:column;padding:0;overflow:hidden;border:1px solid #cbd4c0;background:#fffdf6;border-radius:5px;text-align:left;color:#244936}.scene-card:hover,.scene-card.active{border-color:#b48b4a;box-shadow:0 2px 9px #75856538}.scene-card.active{box-shadow:inset 0 0 0 2px #b48b4a}.scene-card img{display:block;width:100%;height:71px;object-fit:cover;background:#ced9ca}.scene-card span{padding:7px 8px 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-card small{padding:0 8px 8px;color:#7b8d78;font-size:9px}.scene-list::-webkit-scrollbar{width:5px}.scene-list::-webkit-scrollbar-thumb{background:#b8c6b2;border-radius:8px}#library footer{display:flex;justify-content:space-between;padding-top:13px;margin-top:auto;border-top:1px solid #d5dccb;color:#748471;font-size:10px}.close-button{float:right;width:auto;height:auto;border-radius:4px;padding:8px 11px;font-size:11px}dialog{width:min(620px,calc(100% - 32px));border:0;border-radius:8px;padding:30px;background:#f4f1e5;color:#244936;box-shadow:0 25px 90px #00141499}dialog::backdrop{background:#061f1dbd;backdrop-filter:blur(5px)}dialog h2{font-family:SimSun,serif;font-size:28px;font-weight:500;margin:14px 0}dialog p{font-size:13px;line-height:1.8;color:#56705a}dialog .close-button{float:right}
@media(max-width:700px){.topbar{padding:19px 18px}.brand b{font-size:20px}.brand span{font-size:9px}.top-actions button{padding:8px 9px;font-size:11px}.scene-chip{left:18px;bottom:104px}.scene-chip strong{font-size:22px}.viewer-controls{right:18px;bottom:28px}.hint{bottom:82px;font-size:10px}.library-open{left:18px;top:85px}.welcome{padding:30px 27px;align-items:end;padding-bottom:88px}.welcome-card h2{font-size:40px;margin:15px 0}.welcome-card p{font-size:13px;line-height:1.75}.key-row{gap:8px;flex-wrap:wrap}.primary{width:100%}#library{width:100%;padding:24px 18px 18px}.scene-list{grid-template-columns:1fr 1fr}.scene-card img{height:67px}}

.scene-list{flex:1 1 auto;min-height:0;align-content:start}.scene-card img{flex:0 0 71px;height:71px}
@media(max-width:700px){.scene-card img{flex-basis:67px;height:67px}}
.scene-card{min-height:105px}
.filter-heading{display:flex;justify-content:space-between;align-items:center;margin:15px 0 7px;color:#71836e;font-size:10px;letter-spacing:.08em}.filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 13px}.filter{width:100%;min-height:31px;padding:6px 4px;border-radius:4px;font-size:12px;line-height:1.2;white-space:nowrap;text-align:center}.scene-card span{min-height:31px;padding:7px 8px 3px;font-size:12px;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.scene-card small.scene-category{display:block;min-height:24px;padding:3px 8px 7px;color:#47705a;font-size:10px;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.filter-heading{margin-top:13px}.filters{grid-template-columns:repeat(3,minmax(0,1fr))}.filter{font-size:11px}.scene-card span{font-size:11px}}
.scene-card{min-height:132px}
@media(max-width:700px){.scene-card{min-height:126px}}
.bottom-menu{position:absolute;z-index:3;left:34px;right:220px;bottom:18px;height:78px;padding:7px 10px;background:#0d2b28b8;border:1px solid #e3d8aa45;border-radius:5px;backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:5px;overflow:hidden;transition:opacity .25s,transform .25s}.bottom-row{display:flex;align-items:center;gap:8px;min-width:0;height:31px}.bottom-label{flex:0 0 30px;color:#d7c98d;font-size:10px;letter-spacing:.12em}.bottom-scroll{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b9aa6b55 transparent}.bottom-category,.bottom-scene{flex:0 0 auto;border:1px solid #e4d9ab66;background:#173b36dd;color:#dce4d2;border-radius:3px;font-size:11px;white-space:nowrap}.bottom-category{padding:5px 11px}.bottom-category.active{background:#d1b56d;color:#17392f;border-color:#efd994}.bottom-scene{width:112px;height:29px;display:flex;align-items:center;gap:6px;padding:3px 6px;text-align:left;overflow:hidden}.bottom-scene img{width:39px;height:23px;object-fit:cover;border-radius:2px;flex:0 0 auto}.bottom-scene span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bottom-scene.active{border-color:#e4c875;background:#27584c}.clear-mode .topbar .brand,.clear-mode .top-actions button:not(#clearBtn),.clear-mode .scene-chip,.clear-mode .hint,.clear-mode .viewer-controls,.clear-mode .library-open,.clear-mode .bottom-menu{opacity:0;pointer-events:none}.clear-mode #clearBtn{background:#102e2b80}.clear-mode .bottom-menu,.clear-mode .viewer-controls{transform:translateY(12px)}
@media(max-width:700px){.bottom-menu{left:12px;right:12px;bottom:16px;height:78px;padding:6px 8px}.bottom-label{flex-basis:27px;font-size:9px}.bottom-category{padding:5px 9px;font-size:10px}.bottom-scene{width:100px;font-size:10px}.viewer-controls{bottom:108px;right:18px}.scene-chip{bottom:160px}.hint{bottom:98px}}
.bottom-menu.welcome-blocked{opacity:0;pointer-events:none}
.clear-mode .welcome{opacity:0;visibility:hidden;pointer-events:none}
.filters{flex-shrink:0}
.filter{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.top-actions button{white-space:nowrap}
#motionBtn[aria-pressed="true"]{background:#d1b56d;border-color:#efd994;color:#17392f}
.motion-status{position:absolute;z-index:4;top:78px;right:34px;max-width:min(380px,calc(100% - 36px));margin:0;padding:10px 14px;border:1px solid #e3d8aa66;border-radius:5px;background:#102e2bf2;color:#fbf1d5;font-size:12px;line-height:1.7;pointer-events:none}
#canvasHost{touch-action:none}
@media(max-width:700px){.topbar{align-items:flex-start;gap:12px}.top-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:210px}.top-actions button{min-height:36px}.motion-status{top:108px;right:18px}}
@media(max-width:420px){.top-actions{max-width:174px}.top-actions button{padding:8px;font-size:11px}.brand{flex-shrink:0}.brand span{letter-spacing:.06em}}

/* Mobile browsers resize their visual viewport when the address bar or safe
   area changes. Keep the viewer inside the live viewport and reserve room for
   notches, home indicators and the two horizontal menus. */
html,body,#app,#viewer{min-height:100%;}
@supports (height:100dvh){html,body,#app,#viewer{height:100dvh;min-height:100dvh}}
@supports not (height:100dvh){html,body,#app,#viewer{height:100vh;min-height:100vh}}
#loading{padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);text-align:center}
@media(max-width:700px){
  body{overscroll-behavior:none}
  .topbar{top:env(safe-area-inset-top);padding:12px 12px 8px;align-items:flex-start}
  .brand b{font-size:18px;letter-spacing:.14em}
  .brand span{display:none}
  .top-actions{gap:5px;max-width:calc(100vw - 125px)}
  .top-actions button{min-width:0;min-height:34px;padding:7px 8px;font-size:10px}
  .top-actions kbd{display:none}
  .scene-chip{left:14px;right:14px;bottom:calc(153px + env(safe-area-inset-bottom));max-width:calc(100% - 28px)}
  .scene-chip strong{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scene-chip span:last-child{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .library-open{left:14px;top:calc(68px + env(safe-area-inset-top));padding:8px 10px}
  .library-open kbd{display:none}
  .viewer-controls{left:14px;right:14px;bottom:calc(102px + env(safe-area-inset-bottom));justify-content:flex-end}
  .viewer-controls button:nth-child(2){padding:0 11px}
  .hint{left:14px;right:14px;bottom:calc(86px + env(safe-area-inset-bottom));transform:none;text-align:center;white-space:normal}
  .bottom-menu{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));height:82px;padding:6px;border-radius:6px}
  .bottom-row{height:32px;gap:5px}
  .bottom-label{flex-basis:24px;font-size:8px}
  .bottom-scroll{gap:5px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .bottom-category{padding:5px 8px;font-size:10px}
  .bottom-scene{width:96px;height:28px;font-size:10px}
  .bottom-scene img{width:35px;height:22px}
  .welcome{padding:calc(22px + env(safe-area-inset-top)) 18px calc(108px + env(safe-area-inset-bottom));align-items:flex-end;background:linear-gradient(180deg,#082725ed 0%,#0c2d2ac7 52%,#082725fa 100%)}
  .welcome-card{width:100%;max-width:none}
  .welcome-card h2{font-size:34px;line-height:1.2;margin:10px 0 14px}
  .welcome-card p{font-size:12px;line-height:1.65;margin-bottom:16px}
  .primary{width:100%;min-height:46px;padding:12px 16px}
  .key-row{gap:6px 10px;margin-top:13px;font-size:10px}
  .key-row span:last-child{width:100%}
  #library{padding:calc(18px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));}
  .library-head h1{font-size:25px}
  .intro{font-size:11px;line-height:1.6;margin:12px 0 10px}
  .filter-heading{margin-top:9px}
  .filters{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:9px}
  .filter{min-height:30px;padding:5px 2px;font-size:10px;overflow-wrap:anywhere}
  .scene-list{gap:6px}
  .scene-card{min-height:118px}
  .scene-card img{height:60px;flex-basis:60px}
  .scene-card span{min-height:30px;padding:5px 6px 2px;font-size:10px}
  .scene-card small.scene-category{min-height:21px;padding:2px 6px 5px;font-size:9px}
  #library footer{padding-top:9px;font-size:9px}
  .motion-status{top:calc(67px + env(safe-area-inset-top));left:14px;right:14px;max-width:none;font-size:11px;padding:8px 10px}
}
@media(max-width:380px){
  .top-actions{max-width:calc(100vw - 112px)}
  .top-actions button{padding:7px 6px;font-size:9px}
  .scene-chip{bottom:calc(146px + env(safe-area-inset-bottom))}
  .bottom-menu{height:78px}
}
@media(max-width:700px) and (orientation:landscape){
  .welcome{padding:16px 22px calc(84px + env(safe-area-inset-bottom))}
  .welcome-card h2{font-size:27px;margin:5px 0 8px}
  .welcome-card p{max-width:620px;margin-bottom:8px}
  .key-row{margin-top:8px}
  .bottom-menu{height:70px}
  .bottom-row{height:27px}
  .viewer-controls{bottom:calc(86px + env(safe-area-inset-bottom))}
  .scene-chip{bottom:calc(115px + env(safe-area-inset-bottom))}
}