#cn-opening{position:fixed;inset:0;z-index:2147483646;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#fafaf9;color:#202020;font:16px system-ui;transition:opacity .35s,transform .45s cubic-bezier(.22,1.3,.36,1)}#cn-opening strong{font-size:26px}#cn-opening span{color:#777}#cn-opening.cn-leaving{opacity:0;transform:scale(1.04);pointer-events:none}.cn-orbit{width:56px;height:56px;border:4px solid #eee;border-top-color:#7962cf;border-radius:50%;animation:cn-spin .9s linear infinite}@keyframes cn-spin{to{transform:rotate(360deg)}}
#cn-tools{position:fixed;right:12px;top:max(12px,env(safe-area-inset-top));display:flex;gap:6px;z-index:100000;font:13px system-ui}#cn-tools button,#cn-studio button,#cn-opening button{border:1px solid #ddd;background:#fff;color:#222;padding:9px 13px;border-radius:16px;cursor:pointer;transition:transform .25s cubic-bezier(.2,1.8,.3,1)}#cn-tools button:active,#cn-studio button:active{transform:scale(.92)}#cn-studio{position:fixed;inset:0;z-index:200000;background:#0007;display:grid;place-items:center;padding:20px;font:14px system-ui;color:#222}#cn-studio[hidden]{display:none}#cn-studio section{width:min(480px,100%);max-height:85dvh;overflow:auto;background:#fff;border-radius:22px;padding:24px;box-shadow:0 20px 80px #0002}#cn-studio h2{font-size:20px;margin:0 0 20px}#cn-studio label{display:block;margin:16px 0 8px}#cn-studio input,#cn-studio select{max-width:100%;padding:7px;border:1px solid #ddd;border-radius:8px}#cn-studio p{line-height:1.7;color:#666}#cn-status{white-space:pre-wrap}#cn-live2d{position:fixed;left:3vw;bottom:16vh;width:min(420px,48vw);height:65vh;pointer-events:none;z-index:1000}#cn-live2d[hidden]{display:none}#cn-live2d canvas{width:100%;height:100%}#cn-background{position:fixed;inset:0;object-fit:cover;width:100%;height:100%;pointer-events:none;z-index:0}#root{position:relative}#cn-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300000;background:#222;color:white;padding:12px 18px;border-radius:14px;max-width:90vw;font:14px system-ui}html,body{overscroll-behavior:none}button,input,select,textarea{touch-action:manipulation}@media(max-width:700px){#cn-tools{top:8px;right:8px}#cn-tools button{padding:7px 10px}#cn-live2d{width:65vw;height:52vh;bottom:24vh;left:0}#root .min-w-\[600px\]{min-width:0}#root .text-6xl{font-size:2.5rem}#root .p-12{padding:1.25rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

#cn-live2d{z-index:15}body.cn-has-model .cn-original-character{visibility:hidden}

/* Pixel viewport fallback also covers WebViews where vh/dvh incorrectly resolve to 0. */
html,body,#root{width:100%;height:var(--cn-height,100dvh);min-height:0}
#root .h-screen{height:var(--cn-height,100dvh)}
#root .w-screen{width:100%;max-width:100%}
#root .max-h-\[50vh\]{max-height:calc(var(--cn-vh,1vh)*50)}
#root .max-h-\[80vh\]{max-height:calc(var(--cn-vh,1vh)*80)}
#root .max-h-\[85vh\]{max-height:calc(var(--cn-vh,1vh)*85)}
.cn-opening-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cn-opening-actions[hidden]{display:none}
#cn-opening{padding:24px;box-sizing:border-box;text-align:center}
#cn-opening span{max-width:34em;overflow-wrap:anywhere}
#cn-tools{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
#root .cn-music-button{top:max(52px,calc(env(safe-area-inset-top) + 48px));right:max(12px,env(safe-area-inset-right))}
#cn-studio,#cn-studio *{box-sizing:border-box}
#cn-studio{height:var(--cn-height,100dvh);padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden}
#cn-studio section{display:flex;flex-direction:column;width:min(480px,100%);max-height:calc(var(--cn-height,100dvh) - 24px);padding:0;overflow:hidden;min-height:0}
#cn-studio header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid #eee;flex-shrink:0}
#cn-studio h2{font:600 20px system-ui;margin:0}
.cn-studio-content{padding:16px 20px;overflow:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#cn-studio footer{display:flex;gap:10px;padding:12px 20px;border-top:1px solid #eee;flex-shrink:0}
#cn-studio footer button{flex:1}
#cn-studio button{min-height:44px;line-height:1.3}
#cn-studio input[type=file]{display:block;width:100%;min-width:0;max-width:100%;font:13px system-ui;background:#fafafa}
#cn-studio input::file-selector-button{border:0;border-radius:8px;padding:10px;margin-right:8px;background:#eee;color:#222;font:inherit}
#cn-studio label{line-height:1.5}
#cn-studio .cn-voice-row{display:flex;align-items:center;gap:10px}
#cn-studio input[type=checkbox]{width:20px;height:20px;margin:0;flex-shrink:0}
.cn-expression-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:10px}
#cn-studio select{width:100%;min-width:0;min-height:44px;font:14px system-ui}
#cn-status{overflow-wrap:anywhere;white-space:pre-wrap;margin-bottom:0}
#cn-preview{position:relative;width:100%;height:180px;max-height:calc(var(--cn-vh,1vh)*28);min-height:100px;border-radius:14px;background:#f5f4f7;display:grid;place-items:center;overflow:hidden;color:#777;font-size:13px}
#cn-preview-empty[hidden]{display:none}
#cn-live2d.cn-preview-model{position:absolute;inset:0;width:100%;height:100%;z-index:auto}
#cn-live2d{height:calc(var(--cn-vh,1vh)*65);bottom:calc(var(--cn-vh,1vh)*16)}
@media(max-width:700px){
  #cn-tools button{min-height:36px;font:13px system-ui}
  #root .cn-main-menu{padding:70px 24px 36px;justify-content:center;align-items:center}
  #root .cn-main-menu>div{max-width:320px}
  #root .cn-original-character{height:68%;right:-8%;max-width:95%;bottom:12%}
  #root .cn-original-character img{max-width:100%;object-position:right bottom}
  #root .cn-dialog-layer{padding:0 12px max(16px,env(safe-area-inset-bottom))}
  #root .min-w-\[600px\]{min-width:0;max-width:100%}
  #root .text-6xl{font-size:2.5rem}
  #root .p-12{padding:1.25rem}
  #root .cn-content-page{padding-top:96px;overflow-y:auto;overscroll-behavior:contain}
  #cn-live2d{height:calc(var(--cn-vh,1vh)*52);bottom:calc(var(--cn-vh,1vh)*24)}
}
@media(max-height:500px){
  #cn-preview{height:100px;min-height:100px}
  #cn-studio header{padding:8px 16px}
  #cn-studio footer{padding:8px 16px}
  #root .cn-main-menu{padding-top:50px;overflow-y:auto}
  #root .cn-main-menu>div{gap:4px}
  #root .cn-main-menu button{padding-top:6px;padding-bottom:6px}
}