.mirror-cloud { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; min-width:0; }
.mirror-cloud-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 24px 0; }
.mirror-cloud-head h2 { font-size:14px; font-weight:550; }
.mirror-cloud-head p { font-size:10px; color:var(--muted); margin-top:4px; }
.mirror-cloud-head .pill { font-size:10px; }
.mirror-cloud-stage { position:relative; min-width:0; height:338px; }
#mirror-icon-cloud { display:block; width:100%; height:312px; touch-action:pan-y; cursor:grab; }
#mirror-icon-cloud:active { cursor:grabbing; }
#mirror-icon-cloud.is-hovering { cursor:pointer; }
.cloud-hover-label { position:absolute; inset-inline:16px; bottom:8px; font-size:10px; text-align:center; color:var(--muted); pointer-events:none; min-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext; }
.mirror-cloud-footer { border-top:1px solid var(--line); padding:14px 20px; display:grid; grid-template-columns:100px minmax(0,1fr); gap:8px 12px; align-items:center; }
.mirror-cloud-footer label { font-size:10px; color:var(--muted); }
.mirror-cloud-footer select { min-height:36px; font-size:10px; padding:7px 10px; }
.cloud-motion-hint { grid-column:1/-1; font-size:9px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.cloud-motion-hint .icon { width:12px; height:12px; }
.animated-theme-toggle { min-width:40px; min-height:40px; }
.theme-symbol { position:relative; display:block; width:20px; height:20px; }
.theme-symbol .icon { position:absolute; inset:0; transition:transform 280ms ease, opacity 280ms ease; }
.theme-moon { transform:rotate(0) scale(1); opacity:1; }
.theme-sun { transform:rotate(90deg) scale(0); opacity:0; }
:root[data-theme="dark"] .theme-moon { transform:rotate(-90deg) scale(0); opacity:0; }
:root[data-theme="dark"] .theme-sun { transform:rotate(0) scale(1); opacity:1; }
.login-theme-toggle { position:absolute; inset-inline-start:28px; top:18px; }
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-group(root) { animation-duration:460ms; }
:root[data-theme-transition="active"]::view-transition-old(root) { z-index:1; }
:root[data-theme-transition="active"]::view-transition-new(root) { z-index:2; clip-path:var(--theme-clip-start); }
@media(max-width:800px) { .mirror-cloud-footer select { font-size:16px; } .animated-theme-toggle { min-width:44px; min-height:44px; } }
@media(max-width:580px) { .mirror-cloud-head { padding:18px 16px 0; } .mirror-cloud-stage { height:310px; } #mirror-icon-cloud { height:284px; } .mirror-cloud-footer { padding:12px 16px; grid-template-columns:1fr; } .mirror-cloud-footer select { width:100%; } .login-theme-toggle { inset-inline-start:16px; } }